2.26

src/components/layout/NavigateBar.vue

@@ -45,6 +45,19 @@
             <el-menu-item index="6">模拟参数</el-menu-item>
             <el-menu-item index="7" >灾害推演</el-menu-item> -->
         </el-menu>
+        <div class="ve_right">
+            <div class="ve_time">
+                <span class="l_huoqing">火灾事故2023.02.26</span>
+                <span class="l_time">2024-03-20 11:30:20</span>
+            </div>
+            <div class="ve_timeioc">
+                <el-image
+                    :src="Vector"
+                    fit="contain"
+                ></el-image>
+                <span>模型库</span>
+            </div>
+        </div>
 </div>
 </template>
 
@@ -52,6 +65,7 @@
 import { computed,ref,onMounted } from "vue";
 import { useStore } from "vuex";
 import logo from "@/assets/logo.png";
+import Vector from "@/assets/img/Vector.png";
 import {timestampToTime} from '@/js/lindex.js'
 
 const title = "灾情推演软件";
@@ -70,6 +84,7 @@ console.log(timestamp);
 
 </script>
 <style lang="scss" scoped>
+
 .ve_menu_logo {
     width: 100%;
     height:70px;
@@ -78,8 +93,14 @@ console.log(timestamp);
     text-align: left;
     overflow: hidden;
     display: flex;
+    background: #0D1639;
+    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+    border-radius: 0px 0px 0px 0px;
+    border-bottom: 1px solid;
+    box-sizing: border-box;
+    border-image: linear-gradient(28deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
     .ve_title{
-        
+     
     }
     .ve_logo_img {
         padding-left: 30px;
@@ -101,8 +122,10 @@ console.log(timestamp);
     font-size: 20px;
     }
     .el-menu-demo{
+        width:60% !important;
    height: 70px;
    border: none !important;
+   background: rgba(12,97,197,0);
    .el-menu-item{
     position: relative;
     width: 97px;
@@ -118,15 +141,16 @@ console.log(timestamp);
     height: 70px;
     border-radius: 0px 0px 0px 0px;
   border:none;
-    // border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
    }
    .is-active{
     width: 110px;
     height: 70px;
-    background: radial-gradient( circle 67% at 114% 79%, #3AA0FF 0%, #123066 100%);
+    background:radial-gradient(ellipse at 54px 0px, #3AA0FF -37%, #123066 53%);
     border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
+     border: 1px solid;
+    border-left: 1px solid rgba(16, 92, 240, 1);
+    border-right: 1px solid rgba(18, 48, 102, 1);
+     border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
     &:after {
     width: 24px;
     height: 1px;
@@ -143,7 +167,64 @@ console.log(timestamp);
 }
    }
 }
-
+.ve_right{
+    width: 350px;
+    height: 70px;
+    overflow: hidden;
+    position:absolute;
+    right: 0;
+    display: flex;
+  .ve_time{
+    width: 190px;
+    height: 55px;
+    padding-top: 15px;
+    height: 70px;
+    border-radius: 0px 0px 0px 0px;
+    border-left: 2px solid rgba(12, 97, 197, 0.20);
+    border-right: 2px  solid rgba(12, 97, 197, 0.20);;
+    box-sizing: border-box;
+   // border-image: linear-gradient(347deg, rgba(31, 107, 255, 1), rgba(164, 195, 255, 1)) 1 1;
+    span{
+       display: block;  
+       font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        color: #FFFFFF;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+      }
+      .l_huoqing{
+        font-size: 13px;
+        line-height: 15px;
+        font-weight: bold;
+        line-height: 2;
+      }
+      .l_time{
+        font-size: 12px;
+        line-height: 14px;
+        font-weight: 400;
+      }
+    }
+    .ve_timeioc{
+        width: 150px;
+        height: 70px;
+        // border-radius: 0px 0px 0px 0px;
+        // border: 1px solid;
+        // border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        font-weight: bold;
+        font-size: 13px;
+        color: #68ADFF;
+        line-height: 15px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        span{
+            padding-left: 15px;
+        }
+            }
+}
 }
-
 </style>

src/main.js

@@ -8,6 +8,7 @@ import $ from 'jquery'
 import ElementUI from 'element-plus'
 import { createPinia } from 'pinia'
 import 'element-plus/theme-chalk/index.css' // 引入整个Element样式
+import './style/index.css' // 引入整个Element样式
 import "normalize.css/normalize.css";//重置样式
 import '@/js/lindex.js'
 

src/style/index.css

@@ -0,0 +1,49 @@
+CSS的重置样式可以通过使用reset.css文件来实现。这个文件会将所有元素的默认样式都设为相同的初始值，从而消除不同浏览器之间的显示差异。
+
+下面是一个常用的reset.css文件的示例代码：
+
+/* reset.css */
+html {
+    box-sizing: border-box; /* 统一盒模型计算方式 */
+}
+*, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit; /* 继承上级元素的盒模型计算方式 */
+}
+body {
+    font-family: Arial, sans-serif; /* 设定基本字体族 */
+    line-height: 1.5; /* 行高 */
+}
+h1, h2, h3, h4, h5, h6 {
+    font-weight: normal; /* 取消标题标签的加粗效果 */
+}
+a {
+    text-decoration: none; /* 去除链接下划线 */
+    color: #007bff; /* 设定颜色 */
+}
+ul, ol {
+    list-style: none; /* 清除列表项符号 */
+}
+img {
+    max-width: 100%; /* 图片最大宽度自动调整到容器尺寸 */
+    height: auto; /* 保持原比例 */
+}
+button {
+    cursor: pointer; /* 改变光标形状为手指 */
+    background: transparent; /* 按钮无背景色 */
+    outline: none; /* 移除点击时的边框 */
+    border: none; /* 移除边框 */
+}
+input[type="text"], input[type="password"] {
+    appearance: none; /* 移除输入框默认外观 */
+    -webkit-appearance: none; /* Safari/Chrome特定属性 */
+    -moz-appearance: none; /* Firefox特定属性 */
+    border: none; /* 移除边框 */
+    outline: none; /* 移除点击时的边框 */
+    background: none; /* 输入框无背景色 */
+}
+img{
+    vertical-align: middle; 
+}
+/* 改 el-dialog的默认样式*/

src/view/Dialoges.vue

@@ -0,0 +1,476 @@
+<template>
+<!-- 所有弹出框 -->
+  <div class="l_Dialog">
+    <!-- 灾害类型 -->
+    <el-dialog
+    v-model="dialogVisible"
+    width="482"
+    :before-close="handleClose"
+    align-center
+    :modal="false"
+    :close-on-click-modal="false"
+    draggable
+ class="dialog_class bgcolor"
+  >
+  <template #header="{titleId, titleClass }">
+      <div class="my-header">
+        <el-image :src="icon" fit="contain" ></el-image>
+        <h4 :id="titleId" :class="titleClass">灾害类型</h4>
+       
+      </div>
+    </template>
+   <div class="my_content">
+    <el-radio-group v-model="radio" class="radio-group">
+    <el-radio label="Fire">火灾</el-radio>
+    <el-radio label="Water">突水</el-radio>
+    <el-radio label="9">瓦斯爆炸</el-radio>
+  </el-radio-group>
+   </div>
+    <template #footer>
+      <div class="dialog-footer class_footer l_btn ">
+        <div class="footerbtn"><div class="borderimg"><el-button @click="dialogVisible = false">取消</el-button></div></div>
+        <div class="footerbtn"><div class="borderimg"><el-button  @click="dialogVisible = false; dialog.dialogVisible_fire = true">
+       确定
+        </el-button></div></div>
+      </div>
+    </template>
+  </el-dialog>
+  <!--火灾 事故列表 -->
+  <el-dialog
+    v-model="dialog.dialogVisible_fire"
+    width="600"
+    :before-close="handleClose"
+    :modal="false"
+    :close-on-click-modal="false"
+    draggable
+   class="dialog_class bgcolor"
+  >
+
+  <template #header="{titleId, titleClass }">
+      <div class="my-header ">
+        <el-image :src="icon" fit="contain" ></el-image>
+        <h4 :id="titleId" :class="titleClass"> 事故列表</h4>
+       
+      </div>
+    </template>
+    <div class="my_content1 bgcolor">
+        <el-table   
+        :data="tableData"
+        style="width: 100%"
+        @current-change= "handleCurrentChange"
+        :row-class-name="tableRowClassName"
+        :header-cell-style="{'background':' #375A88'}"
+
+        >
+            <el-table-column>
+            <template #default="scope">
+                <el-radio v-model="scoperadio" :label="scope.row.id"></el-radio>
+            </template>
+        </el-table-column>
+    <el-table-column prop="date" label="序号"  />
+    <el-table-column prop="name" label="名称"  />
+    <el-table-column prop="name" label="来源" width="120"/>
+    <el-table-column prop="address" label="时间" width="180" />
+  </el-table>
+
+      <div class="dialog-footer footer_div l_btn">
+        <div class="footerbtn flex1"><div class="borderimg"><el-button @click="dialog.dialogVisible_fire">添加</el-button></div></div>
+        <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="dialog.dialogVisible_fire">
+       删除
+        </el-button></div></div>
+        <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="dialog.dialogVisible_fire">
+       确定
+        </el-button></div></div>
+      </div>
+ 
+   </div>
+
+   <div class="ddd">
+      <div class="header_l">
+        <el-image :src="icon" fit="contain" ></el-image>
+        <h4  class="tianjia"> 事故添加</h4>
+ 
+      <div class="ddd_div" style="display: flex;">
+        <div class="demo-input-suffix firsttitle magintop">
+         <el-form-item label="事故名称">
+       <el-input  v-model="selectstr"
+         class="w-50 m-2"
+         placeholder="某次某事件火灾事故"
+         :prefix-icon="Search"   />
+     </el-form-item>
+     <div class="l_btn class_btn" style="width: auto;">
+      
+        <div class="footerbtn"><div class="borderimg"><el-button  @click="dialog.dialogVisible_fire">
+       确定
+        </el-button></div></div>
+      </div>
+  
+     </div>
+      </div>
+    </div>
+   </div>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { computed,ref,onMounted } from "vue";
+import { useStore } from "vuex";
+import { ElMessage,ElButton, ElDialog } from 'element-plus'
+import icon from "@/assets/img/icon.png";
+const dialogVisible = ref(true);
+const radio = ref('Fire');
+const dialog=ref({
+    dialogVisible_fire:false,
+})
+let scoperadio=ref(1);
+const tableRowClassName = ({row, rowIndex}) =>{
+    if (rowIndex%2 != 0) {
+        return 'evenRow';
+    }
+    return 'oddRow';
+  
+}
+const tableData = [
+  {
+    id:1,
+    date: '01',
+    name: '首次火灾事故',
+    address: 'No. 189, Grove S',
+  },
+  {
+    id:2,
+    date: '02',
+    name: 'T首次火灾事故om',
+    address: 'No. 189, Grove St',
+  },
+  {
+    id:3,
+    date: '03',
+    name: '首次火灾事故',
+    address: 'No. 189, Grove St ',
+  },
+
+]
+const handleCurrentChange= ({row, rowIndex}) =>{
+  console.log(row);
+}
+
+onMounted(() => {
+
+});
+
+</script>
+<style lang="scss" scoped>
+.ddd{
+    margin-top: 20px;
+    .ddd_div{
+        padding: 20px 0;
+        position: relative;
+    }
+    .class_btn{
+        position: absolute;
+    right: 0;
+    top: 21px;
+    }
+    .header_l{
+            line-height: 10px;
+            // height: 40px;
+            text-align: left;
+            padding: 0 20px;
+            // border-bottom: 1px solid;
+            border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+            box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+            border-radius: 0px 0px 0px 0px;
+            .el-image{
+                padding: 10px 10px 0 0;
+            }
+            h4{
+                font-weight: bold;
+                font-size: 12px;
+                color: #68ADFF;
+                line-height: 14px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+        }
+}
+.tianjia{
+    display: inline-block;
+}
+.el-dialog__title{
+    display: inline-block;
+}  
+.bgcolor{
+    // width: 482px;
+    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+.dialog_class{
+        .my-header{
+            line-height: 10px;
+            height: 40px;
+            text-align: left;
+            padding: 0 20px;
+            border-bottom: 1px solid;
+            border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+            box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+            border-radius: 0px 0px 0px 0px;
+            .el-image{
+                padding: 10px 10px 0 0;
+            }
+            h4{
+                font-weight: bold;
+                font-size: 12px;
+                color: #68ADFF;
+                line-height: 14px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+        }
+        .my_content{
+            width: 100%;
+            height: 90px;
+            box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+            border-radius: 0px 0px 0px 0px;
+            position: relative;
+           
+            .radio-group{
+                display: flex;
+                justify-content: center;
+                .el-radio{
+                    flex: 1;
+                    justify-content: center;
+                    font-weight: bold;
+                        font-size: 12px;
+                        color: #FFFFFF;
+                        line-height: 14px;
+                  
+                }
+              
+            }
+        }
+        .el-dialog__footer{
+            position: absolute;
+            bottom: 17px;
+            display: flex;
+            .footerbtn{
+                flex: 1;
+                text-align: center;
+            }
+        }
+    }
+    .my_content1{
+        .el-table .cell{
+            font-weight: 400;
+            font-size: 12px;
+            color: #FFFFFF !important;
+            line-height: 14px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+
+    }
+    .l_btn .borderimg {
+    width: 109px;
+height: 30px;
+background: rgba(104,173,255,0.3);
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+/* border: 1px solid rgba(31, 107, 255, 1); */
+ border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+
+border-radius: 4px;
+display: flex;
+display: inline-block;
+box-sizing: border-box;
+}
+.borderimg{
+    width: 109px;
+    height: 30px;
+    background: rgba(104,173,255,0.3);
+    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+    /* border: 1px solid rgba(31, 107, 255, 1); */
+    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    border-radius: 4px;
+    display: flex;
+    display: inline-block;
+    box-sizing: border-box
+}
+.el-table,.el-table thead th {
+    background-color: rgba(13, 22, 57, 0.96) !important;
+}
+
+</style>
+<style>
+/* //.bgcolor */
+.bgcolor{
+    border-radius: 0px 0px 0px 0px;
+     border: 1px solid;
+     border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+     box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+}
+.dialog_class{
+        background-color: rgba(13, 22, 57, 0.96) !important;
+        width: 482px;
+
+  
+      
+    }
+    .el-dialog__header,.el-dialog__body,.el-dialog__footer{
+padding: 0 !important;
+margin: 0 !important;
+    }
+.el-dialog{
+    --el-dialog-padding-primary: 0px !important;
+    }
+.el-dialog__headerbtn{
+    position: absolute;
+    top: 2px !important;
+    right: 0;
+    padding: 0;
+    width: 40px !important;
+    height: 40px !important;
+    background: 0 0;
+    border: none;
+    outline: 0;
+    cursor: pointer;
+    font-size: var(--el-message-close-size,16px);
+}
+.el-icon{
+    color: #68ADFF !important;
+}
+.l_btn .borderimg {
+    width: 109px;
+height: 30px;
+background: rgba(104,173,255,0.3);
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+/* border: 1px solid rgba(31, 107, 255, 1); */
+ border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+
+border-radius: 4px;
+display: flex;
+display: inline-block;
+box-sizing: border-box;
+}
+.l_btn .el-button{
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    color: #fff;
+    background: rgba(104,173,255,0.3);
+    border: 1px solid rgba(31, 107, 255, 1);
+}
+.class_footer{
+    position: absolute;
+    bottom: 17px;
+}
+.footer_div{
+    height: 90px;
+    padding: 30px 0;
+}
+.l_btn{
+            width: 100%;
+       
+            bottom: 17px;
+            display: flex;
+            border-radius: 4px;
+        
+        }
+        .el-table .el-table__cell{
+            padding: 0 !important;
+            height: 30px;
+    line-height: 30px;
+        }
+        /* .el-table tr,.el-table th.el-table__cell{
+            background-color: rgba(13, 22, 57, 0.96) !important;
+        } */
+        .el-table__row{
+            box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+            border-radius: 0px 0px 0px 0px;
+            border: 1px solid;
+            border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+        }
+        .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+            /* box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2); */
+border-radius: 0px 0px 0px 0px;
+border-bottom: 1px solid;
+border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+}   
+.oddRow {
+
+  background-color: rgba(13, 22, 57, 0.96) !important;
+}
+.evenRow {
+    background-color:  rgba(104, 173, 255, 0.20)!important;
+}
+.my_content1 .el-table .cell{
+            font-weight: 400;
+            font-size: 12px;
+            color: #FFFFFF !important;
+            line-height: 14px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+    }
+    .el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before{
+        height: 0 !important;
+        background-color:rgba(red, green, blue,0) !important;
+    }
+    
+    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+    background-color:rgba(104,173,255,0) !important;
+} 
+ .el-button:focus, .el-button:hover{
+    background: rgba(104, 173, 255, 1) !important;
+    font-weight: bold;
+    color: #000 !important;
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+border-radius: 4px 4px 4px 4px;
+border: 1px solid;
+border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+.el-input__wrapper{
+ 
+    height: 30px;
+    background: rgba(104,173,255,0.3) !important;
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2) !important;
+border-radius: 0px 0px 0px 0px;
+border: 1px solid;
+border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+}
+.ddd_div .el-input__inner{
+    border: none;
+    /* background: rgba(104,173,255,0.3); */
+  
+}
+.ddd_div .el-form-item__label{
+color: #fff !important;
+}
+.ddd_div .demo-input-suffix{
+    width: 100%;
+}
+ .ddd .el-form-item{
+    width: 80%;
+}
+.el-input__inner::placeholder {
+			color: #fff !important;
+		}
+        .flex1{
+        flex: 1;
+        }
+ .el-radio__input.is-checked .el-radio__inner{
+    border-color: #fff !important;
+    background: #fff !important;
+}
+.el-radio__inner{
+    border: 2px solid #fff !important;
+    background-color: rgba(104, 173, 255, 0)!important;
+    border: 1px solid #68ADFF;
+}
+</style>

src/view/appmian.vue

@@ -5,7 +5,8 @@
                 <navigate-bar></navigate-bar>
             </el-header>
             <el-main>
-                <el-scrollbar
+                <Dialoges/>
+                <!-- <el-scrollbar
                     style="
                         padding: 20px;
                         box-sizing: border-box;
@@ -13,16 +14,17 @@
                     "
                 >
                     <indexbar/>
-                </el-scrollbar>
+                </el-scrollbar> -->
             </el-main>
         </el-container>
     </div>
   </template>
   
   <script setup>
+import { ref, onMounted, reactive,nextTick } from "vue";
 import NavigateBar from "@/components/layout/NavigateBar.vue";
-// import indexbar  from "./index.vue"
-  import { ref, onMounted, reactive,nextTick } from "vue";
+import Dialoges  from "./Dialoges.vue"
+
   onMounted(() => {
   });
 
@@ -30,6 +32,7 @@ import NavigateBar from "@/components/layout/NavigateBar.vue";
   </script>
   
   <style lang="scss" scoped>
+ 
 .appmian{
     .el-header{
     padding:0;
@@ -41,5 +44,12 @@ import NavigateBar from "@/components/layout/NavigateBar.vue";
     }
 }
   </style>
+  <style>
+   body{
+    width: 100%;
+    height: 100vh;
+    background: #161A2A ; 
+  }
+</style>