2.27

src/view/Dialoges.vue

@@ -20,7 +20,7 @@
       </div>
     </template>
    <div class="my_content">
-    <el-radio-group v-model="radio" class="radio-group">
+    <el-radio-group v-model="classradio" class="radio-group">
     <el-radio label="Fire">火灾</el-radio>
     <el-radio label="Water">突水</el-radio>
     <el-radio label="9">瓦斯爆炸</el-radio>
@@ -29,7 +29,7 @@
     <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">
+        <div class="footerbtn"><div class="borderimg"><el-button  @click="classclick()">
        确定
         </el-button></div></div>
       </div>
@@ -78,7 +78,7 @@
         <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">
+        <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="accident()">
        确定
         </el-button></div></div>
       </div>
@@ -110,20 +110,281 @@
     </div>
    </div>
   </el-dialog>
+  <!--火灾左侧栏-->
+  <div class="common-layout" style="margin: 0;"> 
+      <el-aside width="300px" class="L_aside asideg asidegbg">
+        <div class="demo-collapse">
+    <el-collapse v-model="coolactiveName" accordion v-show="leftcoll.collfire">
+      <el-collapse-item  name="1">
+        <template #title>
+            <el-icon class="iconimg Frame2" fit="contain" ></el-icon>  
+          火灾<el-icon class="header-icon">
+            <info-filled />
+          </el-icon>
+        </template>
+        <div class="asides_content">
+            <el-form :inline="true" :model="formInline" class="demo-form-inline">
+             <div class="l_padding" style="padding:20px 20px 20px 24px; ">
+                <!-- <el-form-item label="Activity zone">
+                <el-select v-model="form.region" placeholder="please select your zone">
+                    <el-option label="Zone one" value="shanghai" />
+                    <el-option label="Zone two" value="beijing" />
+                </el-select>
+                </el-form-item> -->
+                <div class="line">
+                <el-form-item label="污染物选择:" >
+                <el-select v-model="formInline.region" placeholder="请选择">
+                    <el-option
+                        v-for="item in strResultFormatlist"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+        </div>
+        <ul>
+            <li><span class="inputtext_1">时间步长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">s</span></div>
+        </li>
+        <li><span class="inputtext_1">空间步长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">m</span></div>
+        </li>
+        <li><span class="inputtext_1">模拟时长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">s</span></div>
+        </li>
+        <li><span class="inputtext_1">输出步长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">s</span></div>
+        </li>
+        <li><span class="inputtext_1">交互步长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">s</span></div>
+        </li>
+        </ul>
+    </div>
+    <div class="asdis_btn">
+        <div class="btn"><span class="spantext">初始数据</span></div>
+        <div class="btn"><span class="spantext">开始计算</span></div>
+    </div>
+  
+    <div class=" logs">
+      <div class="logs_pading">
+    <h4>模拟日志</h4>
+    <div class="footerTextBox">
+                <el-input
+                  class="footerText"
+                  type="textarea"
+                  id="textarea_id"
+                  v-model="rizhi.logs"
+                ></el-input>
+              </div>
+            </div>
+</div>
+  </el-form>
+
+        </div>
+    
+      </el-collapse-item>
+    </el-collapse>
+    <!-- 突水 -->
+    <el-collapse v-model="coolactiveName" accordion v-show="leftcoll.collwater">
+      <el-collapse-item  name="2">
+        <template #title>
+            <el-icon class="iconimg Frame3" fit="contain" ></el-icon>  
+          突水<el-icon class="header-icon">
+            <info-filled />
+          </el-icon>
+        </template>
+        <div class="asides_content">
+            <el-form :inline="true" :model="formInline" class="demo-form-inline">
+             <div class="l_padding" style="padding:20px 20px 20px 24px; ">
+        <ul>
+            <li><span class="inputtext_1">时间步长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">s</span></div>
+        </li>
+        <li><span class="inputtext_1">空间步长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">m</span></div>
+        </li>
+        <li><span class="inputtext_1">模拟时长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">s</span></div>
+        </li>
+        <li><span class="inputtext_1">输出步长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">s</span></div>
+        </li>
+        <li><span class="inputtext_1">交互步长</span>
+            <div class="inputkuang"> <el-input v-model="formInline.user" />
+        <span class="righttext">s</span></div>
+        </li>
+        </ul>
+    </div>
+    <div class="asdis_btn">
+        <div class="btn"><span class="spantext">初始数据</span></div>
+        <div class="btn"><span class="spantext">开始计算</span></div>
+    </div>
+  
+    <div class=" logs">
+      <div class="logs_pading">
+    <h4>模拟日志</h4>
+    <div class="footerTextBox">
+                <el-input
+                  class="footerText"
+                  type="textarea"
+                  id="textarea_id"
+                  v-model="rizhi.logs"
+                ></el-input>
+              </div>
+            </div>
+</div>
+  </el-form>
+
+        </div>
+    
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+  <!-- 推演结果 -->
+  <div class="result">
+    <el-tabs
+    v-model="resultactiveName"
+    type="card"
+    class="demo-tabs"
+    @tab-click="handleClick"
+  >
+    <el-tab-pane label="当前时间" name="first">
+        <div class="newtime">{{newtime}}</div>
+    </el-tab-pane>
+    <el-tab-pane label="指定时间" name="second"> <div class="newtime">{{newtime}}</div></el-tab-pane>
+    <el-tab-pane label="动画演示" name="third">
+        <div class="animation_s">
+        <!-- <el-slider
+              :max="endtime"
+              :min="starttime"
+              v-model="count"
+              @change="sliderchange"
+              :stroke-width="2"
+            ></el-slider> -->
+            <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/>
+            <div class="tanniu">
+                <ul>
+                    <li> <el-image :src="t1" fit="contain" ></el-image><p>后退</p></li>
+                    <li> <el-image :src="t2" fit="contain" ></el-image><p>播放</p></li>
+                    <li> <el-image :src="t3" fit="contain" ></el-image><p>暂停</p></li>
+                    <li> <el-image :src="t4" fit="contain" ></el-image><p>快进</p></li>
+                </ul>
+            </div>
+        </div>
+    </el-tab-pane>
+  </el-tabs>
+  </div>
+      </el-aside>
+   
+  </div>
+ <!-- 监测点 -->
+ <!-- 监测点 -->
+ <div class="jiancedian asideg1 ">
+        <div class="jc_header he_pading color1">
+            
+            <el-form-item label="污染物选择:" >
+                <el-select v-model="formInline.region" placeholder="请选择">
+                    <el-option
+                        v-for="item in strResultFormatlist"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+        </div>
+        <div class="jc_content tablecolor">
+            <div class="jc_padding">
+                <el-table
+        :data="tableData2"
+        style="width: 100%"
+        @current-change= "handleCurrentChange"
+        :row-class-name="tableRowClassName"
+        :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
+
+        >
+    <el-table-column prop="date" label="监测点名称"  width="120" />
+    <el-table-column prop="name" label="水位(m)"  />
+    <el-table-column prop="name" label="流量(m³/s)"/>
+  </el-table>
+            </div>
+            <div class="jc_header color1">
+                <span class="jc_tile">锋面定义</span>
+        </div>
+        <div style="height:200px"></div>
+        </div>
+  </div>
   </div>
 </template>
 
 <script setup>
-import { computed,ref,onMounted } from "vue";
+import { computed,ref,onMounted,reactive } from "vue";
 import { useStore } from "vuex";
-import { ElMessage,ElButton, ElDialog } from 'element-plus'
+import { ElMessage,ElButton, ElDialog,ElSelect } from 'element-plus'
 import icon from "@/assets/img/icon.png";
+import Frame2 from "@/assets/img/Frame2.png";
+import t1 from "@/assets/img/t1.png";
+import t2 from "@/assets/img/t2.png";
+import t3 from "@/assets/img/t3.png";
+import t4 from "@/assets/img/t4.png";
+import {timestampToTime} from '@/js/lindex.js'
 const dialogVisible = ref(true);
-const radio = ref('Fire');
+const classradio = ref('Fire');
+const leftcoll = ref({
+    collfire:false,
+    collwater:false,
+});
 const dialog=ref({
     dialogVisible_fire:false,
+    jianced:true,
+})
+let coolactiveName=ref(["1","2"]);
+let rizhi=ref({
+  top:"50px",
+  logs:'',
+  left:"90px"
+});
+let formLabelWidth5=ref('130px');
+const formInline = ref({
+  user: '11',
+  region: 'shanghai',
+  date: '',
+  
 })
+const strResultFormatlist = ref([
+    //  { id: 0, name: "灾情演化",value: ".vtk" },
+    //  { id: 1, name: "演化过程" ,value: ".mesh"},
+   ]);
+// let strResultFormatlist=ref([
+//           { value: ".vtk", name: ".vtk",id:1 },
+//         { value: ".mesh", name: ".mesh",id:2 },
+//         { value: ".ugrid", name: ".ugrid",id:3 },
+//         { value: ".bdf", name: ".bdf",id:4 },
+//         { value: ".neu", name: ".neu",id:5  },
+   
+//       ]);
+   
 let scoperadio=ref(1);
+// 推演结果
+const resultactiveName = ref('first');
+let newtime=ref("");
+let starttime = ref(1);
+let endtime = ref(60);
+let timenum = ref(2);
+let isstop = ref(false);
+const percentage = ref(20)
+const customColor = ref('#409eff')
+
 const tableRowClassName = ({row, rowIndex}) =>{
     if (rowIndex%2 != 0) {
         return 'evenRow';
@@ -151,17 +412,114 @@ const tableData = [
     address: 'No. 189, Grove St ',
   },
 
+]
+const tableData2 = [
+  {
+   
+    date: '站点1',
+    name: '2',
+    address: '10',
+  },
+  {
+    date: '站点1',
+    name: '2',
+    address: '10',
+  },
+  {
+    date: '站点1',
+    name: '2',
+    address: '10',
+  },
+  {
+    date: '站点1',
+    name: '2',
+    address: '10',
+  },
+
 ]
 const handleCurrentChange= ({row, rowIndex}) =>{
   console.log(row);
 }
+// 类型选择
+const classclick= () =>{
+    console.log(classradio.value);
+  dialogVisible.value = false; 
+  dialog.value.dialogVisible_fire = true
+}
+// 事故确定列表
+const accident=()=>{
+    dialog.value.dialogVisible_fire=false;
+    if(classradio.value=="Fire"){
+        leftcoll.value.collfire=true;
 
+    }else if(classradio.value=="Water"){
+        leftcoll.value.collwater=true;
+    }
+}
 onMounted(() => {
-
+    const timestamp = new Date().getTime();
+    timestampToTime(timestamp)
+    newtime.value= timestampToTime(timestamp);
 });
 
 </script>
 <style lang="scss" scoped>
+.jc_padding{
+    padding: 18px 10px;
+}
+.line{
+border-bottom: 1px solid rgba(255, 255, 255, 0.20);  
+box-sizing: border-box;
+}
+.L_aside{
+.iconimg{
+    width: 37px;
+    height: 36px;
+    margin:0 7px 0 24px;
+}
+.Frame2{
+    background-image: url(../assets/img/Frame2.png);
+    background-size: 100%;
+    background-position: center;
+}
+.Frame3{
+    background-image: url(../assets/img/Frame3.png);
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.el-collapse,.el-collapse-item__header{
+border: none;
+ul li{
+    text-align: left;
+}
+.inputkuang{
+    height: 30px;
+    width: 100%;
+    background: rgba(13,22,57,0.4);
+position: relative;
+.righttext{
+    display: inline-block;
+    position: absolute;
+    right: 10px;
+    top: 3px;
+    color: rgba($color: #FFFFFF, $alpha: 0.8);
+}
+}
+
+.inputtext_1{
+    font-weight: 400;
+font-size: 13px;
+color: #FFFFFF;
+line-height: 14px;
+text-align: left;
+font-style: normal;
+text-transform: none; 
+padding: 13px 0 7px 0;
+display: inline-block;
+
+}
+}
+}
 .ddd{
     margin-top: 20px;
     .ddd_div{
@@ -305,7 +663,104 @@ box-sizing: border-box;
 .el-table,.el-table thead th {
     background-color: rgba(13, 22, 57, 0.96) !important;
 }
+.L_aside{
+    height: calc(100vh - 70px);
+    position: absolute;
+    top: 70px;
 
+}
+.asides_content{
+    background: rgba(13,22,57,0.4);
+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(359deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
+.el-form-item__label{
+    color: #FFFFFF !important;
+}
+}
+.asdis_btn{
+display: flex;
+margin-top: 9px;
+    .btn{
+        flex: 1;
+        width: 145px;
+        height: 54px;
+        background-image: url(../assets/img/Rectangle5.png) ; 
+        background-repeat: no-repeat;
+        line-height: 54px;
+        .spantext{
+            font-weight: bold;
+            font-size: 12px;
+            color: #FFFFFF;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+
+        }
+    }
+}
+.logs{
+  margin-top: 25px;
+    border-radius: 0px 0px 0px 0px;
+     border-top: 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);
+     h4{
+     padding: 10px 0;
+        font-weight: 400;
+font-size: 13px;
+color: #FFFFFF;
+line-height: 14px;
+text-align: left;
+font-style: normal;
+text-transform: none;
+     }
+}
+.logs_pading{
+    padding: 13px 20px 23px 24px;
+}
+.newtime{
+    height: 112px;
+    padding: 38px;
+    font-weight: bold;
+    font-size: 20px;
+    color: #FF0F0F;
+    line-height: 23px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+}
+.animation_s{
+    padding: 25px;
+}
+.tanniu ul{
+    margin-top: 40px;
+display: flex;
+li{
+    flex: 1;
+    text-align: center;
+    p{
+        text-align: center;
+        font-weight: 400;
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 14px;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+}
+.jiancedian{
+    width:380px;
+    position: absolute;
+    right: 0;
+    top: 70px;
+ 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; 
+}
 </style>
 <style>
 /* //.bgcolor */
@@ -473,4 +928,228 @@ color: #fff !important;
     background-color: rgba(104, 173, 255, 0)!important;
     border: 1px solid #68ADFF;
 }
+.asideg .el-collapse-item__header{
+    height: 50px !important;
+    width: 100%;
+
+ background-position: left;
+ border: none !important;
+ font-weight: bold;
+font-size: 15px;
+color: #FFFFFF;
+line-height: 18px;
+text-align: left;
+font-style: normal;
+text-transform: none;
+}
+.asidegbg .el-collapse-item__header{
+    background-image: url(../assets/img/Group10.png)!important; 
+}
+.asideg1 .jc_header{
+    width: 100%;
+    height: 69px;
+    line-height: 69px;
+    background-image: url(../assets/img/Group9.png)!important; 
+
+}
+.jc_tile{
+    padding-left: 20px;
+}
+.he_pading{
+    padding: 19px 14px 0 31px;
+}
+.asideg1  .el-form-item__label{
+    font-weight: 400;
+    font-size: 13px;
+    color: #FFFFFF;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+.asideg .el-collapse{
+    --el-collapse-header-bg-color: none !important;
+}
+.asideg .el-collapse-item__arrow{
+    margin: 0 8px 0 auto;
+    font-weight: 800;
+    color: #fff !important;
+    font-weight: bold !important;
+    font-size: 20px !important;
+}
+  .el-collapse-item__content{
+    background: rgba(13, 22, 57, 0.2);
+}
+.asideg .el-input__wrapper{
+    background: rgba(104,173,255,0) !important;
+    border:1px solid rgba(31, 107, 255, 1);
+    border-radius: 4px;
+    box-shadow:none !important;
+}
+.asideg .el-input__inner{
+    color:rgba(255, 15, 15, 1);
+    font-weight: 400;
+    font-size: 16px;
+}
+.el-collapse {
+    --el-collapse-header-bg-color:rgba(104,173,255,0) !important;
+    --el-collapse-header-text-color: var(--el-text-color-primary);
+    --el-collapse-header-font-size: 13px;
+    --el-collapse-content-text-color:rgba(104,173,255,0) !important;
+    --el-collapse-content-bg-color:rgba(104,173,255,0) !important;
+}
+.asideg .el-collapse-item__content{
+padding:0 !important;
+}
+.asideg  .el-collapse-item__wrap{
+
+ box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
+border-radius: 4px 4px 4px 4px;
+border-bottom: 1px solid;
+border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
+}
+#textarea_id{
+    height: 226px;
+    background: rgba(104,173,255,0) !important;
+    border: 1px solid rgba(31, 107, 255, 1);
+    border-radius: 4px;
+    box-shadow: none !important;
+}
+.asides_content .el-form-item__label{
+    color: #FFFFFF !important;
+            font-weight: 400;
+        font-size: 13px;
+        line-height: 33px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+}
+.el-form-item {
+    width: 100%;
+}
+.el-select__wrapper{
+background-color: rgba(104, 173, 255, 0) !important;
+}
+.el-select__wrapper.is-hovering:not(.is-focused),.el-select__wrapper{
+box-shadow: none !important;
+border: 1px solid rgba(31, 107, 255, 1);
+    border-radius: 4px;
+    box-shadow: none !important;
+}
+/* Webkit内核浏览器（Chrome、Safari等）*/
+::-webkit-scrollbar {
+    width: 4px; /* 设置滚动条宽度 */
+    background-color: #161A2A; /* 设置滚动条背景颜色 */
+}
+ 
+/* 滑块样式 */
+::-webkit-scrollbar-thumb {
+    border-radius: 2px; /* 设置滑块边角半径 */
+    background-color: rgba(31, 107, 255, 1); /* 设置滑块背景颜色 */
+}
+ 
+/* 滑块在hover状态时的样式 */
+::-webkit-scrollbar-thumb:hover {
+    background-color: #555; /* 设置滑块在hover状态下的背景颜色 */
+}
+ 
+/* 滚动条轨道样式 */
+::-webkit-scrollbar-track {
+    background-color: rgba(104, 173, 255, 0.4) /* 设置滚动条轨道背景颜色 */
+}
+.result .el-tabs__item{
+    padding:17px !important;
+    font-weight: bold;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 16px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+}
+.el-tabs--card>.el-tabs__header,.el-tabs--card>.el-tabs__header,.el-tabs--card>.el-tabs__header .el-tabs__nav{
+    border: none !important;
+}
+.el-tabs{
+    --el-tabs-header-height: 70px  !important;
+}
+.result .el-tabs__item{
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-image: linear-gradient(180deg, rgb(31, 107, 255), 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;
+    font-weight: bold;
+font-size: 14px;
+color: #fff;
+line-height: 23px;
+text-align: center;
+font-style: normal;
+text-transform: none;
+}
+.result .is-active{
+    height: 70px;
+    background:radial-gradient(ellipse at 54px 0px, #3AA0FF -37%, #123066 53%);
+    border-radius: 0px 0px 0px 0px;
+     border: 2px solid;
+     color:rgba(255, 15, 15, 1) !important;
+    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;
+}
+.result .el-tabs__item:hover {
+    color:rgba(255, 15, 15, 1);
+    cursor: pointer;
+}
+.result .el-tabs__header{
+padding: 0 !important;
+margin: 0 !important;
+}
+.result .el-tabs__content{
+    border: 1px solid;
+     color:rgba(255, 15, 15, 1) !important;
+     border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
+     box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    position: relative;
+}
+.result .el-tabs__content{
+    width: 275px;
+}
+.el-slider__button{
+    height: 10px;
+    width: 10px;
+
+}
+.color1{
+    font-weight: 400;
+font-size: 13px;
+color: #FFFFFF;
+line-height: 14px;
+text-align: left;
+font-style: normal;
+text-transform: none;
+}
+.tablecolor .el-table{
+     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);
+    border-radius: 0px 0px 0px 0px;
+   background-color:  rgba(13, 22, 57, 0.4);
+} 
+.jc_padding .el-table tr{
+    height:40px;
+    background-color: none;
+
+
+}
+.jc_padding .el-table .cell{
+    font-weight: 400;
+font-size: 13px;
+color: #FFFFFF;
+line-height: 14px;
+text-align: left;
+font-style: normal;
+text-transform: none;
+}
 </style>

src/view/appmian.vue

@@ -1,9 +1,11 @@
 <template>
     <div class="appmian">
+
         <el-container>
             <el-header >
                 <navigate-bar></navigate-bar>
             </el-header>
+         
             <el-main>
                 <Dialoges/>
                 <!-- <el-scrollbar
@@ -34,6 +36,9 @@ import Dialoges  from "./Dialoges.vue"
   <style lang="scss" scoped>
  
 .appmian{
+    .el-main{
+        --el-main-padding: 0 !important;
+    }
     .el-header{
     padding:0;
     margin: 0;