liuqiao hace 1 año
padre
commit
57793b388b
Se han modificado 3 ficheros con 924 adiciones y 6 borrados
  1. 2 2
      package-lock.json
  2. 10 4
      src/view/appmian.vue
  3. 912 0
      src/view/components/tanimation.vue

+ 2 - 2
package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "vite-vue3-ts-project",
+  "name": "disater",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "vite-vue3-ts-project",
+      "name": "disater",
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",

+ 10 - 4
src/view/appmian.vue

@@ -55,6 +55,7 @@
                 <Dialoges ref="lliudialog"  :addselect="addselect" :headerobj="headerobj" @headerclick="headerclick" @childfun="childfun" ></Dialoges>
                 <source-disaster ref="sourcedis" :classradio="classradio" :aid="aid"/>
                 <my-boundary  ref="boundary" :classradio="classradio" :aid="aid" />
+                <trananimation ref="tanimation" :classradio="classradio" :aid="aid"/>
               
             </el-main>
         </el-container>
@@ -68,6 +69,7 @@ import Dialoges  from "./Dialoges.vue"
 import logo from "@/assets/logo.png";
 import SourceDisaster  from "./components/Sourcedisaster.vue"
 import myBoundary  from "./components/MyBoundary.vue"
+import trananimation  from "./components/tanimation.vue"
 import Vector from "@/assets/img/Vector.png";
 import {timestampToTime} from '@/js/lindex.js'
 import mitts from "@/utils/Bus"
@@ -78,6 +80,7 @@ const activeIndex = ref('1')
 const activeIndex2 = ref('1')
 let classradio=ref()
 let boundary=ref();
+let tanimation=ref()
 let headerobj=ref({
     time:'火灾事故2023.02.26',
     name:"2024-03-20 11:30:20",
@@ -114,7 +117,7 @@ const handleSelect = (key,keyPath) => {
     boundary.value.boun.collfire=false;
     lliudialog.value.leftcoll.collfire=false;
      lliudialog.value.leftcoll.collwater=false;
-     lliudialog.value.monitor=false;
+     tanimation.value.monitor=false;
         break;
     case '2':
     boundary.value.accident4();
@@ -122,22 +125,22 @@ const handleSelect = (key,keyPath) => {
     sourcedis.value.sour.collwater=false;
     lliudialog.value.leftcoll.collfire=false;
      lliudialog.value.leftcoll.collwater=false;
-     lliudialog.value.monitor=false;
+     tanimation.value.monitor=false;
     break;
     case '3':
     sourcedis.value.sour.collfire=false;
     sourcedis.value.sour.collwater=false;
     boundary.value.boun.collfire=false;
     lliudialog.value.accident2();
-    lliudialog.value.monitor=false;
+    tanimation.value.monitor=false;
         break;
      case '4':
+     tanimation.value.accident5(aid.value);
      sourcedis.value.sour.collfire=false;
     sourcedis.value.sour.collwater=false;
     boundary.value.boun.collfire=false;
      lliudialog.value.leftcoll.collfire=false;
      lliudialog.value.leftcoll.collwater=false;
-     lliudialog.value.monitor=true;
     default:
         break;
 }
@@ -310,6 +313,9 @@ const handleSelect = (key,keyPath) => {
     height: 100vh;
     background: #161A2A ; 
   }
+  button:focus, button:focus-visible{
+    outline:none;
+  }
 </style>
   
   

+ 912 - 0
src/view/components/tanimation.vue

@@ -0,0 +1,912 @@
+<template>
+    <!-- 所有弹出框 -->
+      <div class="l_Dialog">
+          <!-- 推演结果 -->
+          <el-aside width="278px" class="L_aside asideg asidegbg  leftbgimg">
+  <div class="result" v-show="monitor">
+    <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"
+            ></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 class="jiancedian asideg1 " v-show="monitor">
+            <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">
+                 <div class="xian">
+                    <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>
+                <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,reactive, toRef } from "vue";
+    import { request, uploadFile } from "@/utils/request";
+    import { ElMessage,ElButton, ElDialog,ElSelect } from 'element-plus'
+    import icon from "@/assets/img/icon.png";
+    import mitts from "@/utils/Bus"
+    import closeimg from "@/assets/img/colse.png";
+    import {timestampToTime} from '@/js/lindex.js'
+    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";
+    let emit= defineEmits([])
+    const props= defineProps({
+        classradio: {
+        type: String,
+        // default: '',
+    },
+
+ });
+ 
+    const monitor = ref(false);
+    const strResultFormatlist = ref([
+      { id: 0, name: "灾情演化",value: ".vtk" },
+      { id: 1, name: "演化过程" ,value: ".mesh"},
+   ]);
+    let url=ref("http://localhost:8080/?aid=0")
+    // 推演结果
+    const resultactiveName = ref('first');
+    let newtime=ref("");
+    let starttime = ref(1);
+    let endtime = ref(60);
+    let timenum = ref(2);
+    let isstop = ref(false);
+    let aid=ref();
+    const percentage = ref(20)
+    const customColor = ref('#409eff')
+    const tableRowClassName = ({row, rowIndex}) =>{
+        if (rowIndex%2 != 0) {
+            return 'evenRow';
+        }
+        return 'oddRow';
+      
+    }
+    const formInline = ref({
+  user: '11',
+  region: 'shanghai',
+  date: '',
+  
+})
+
+    const tableData = ref([]);
+    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);
+    }
+    // aid获取
+       const  accident5=(val)=>{
+      aid.value=val;
+        console.log(aid.value);
+        console.log(11111)
+    if(props.classradio=="Fire"){
+        monitor.value=true;
+
+    }else if(props.classradio=="Water"){
+        monitor.value=true;
+    }
+}
+ 
+
+    const init=()=>{
+ 
+
+   } 
+    onMounted(() => {
+        console.log()
+        init();
+        const timestamp = new Date().getTime();
+        timestampToTime(timestamp)
+        newtime.value= timestampToTime(timestamp);
+    });
+    
+    defineExpose({monitor,accident5});
+    </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{
+            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;
+    }
+    .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:371px;
+        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 */
+    .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(104, 173, 255, 0.20)!important;
+    }
+    .evenRow {
+        background-color: rgba(13, 22, 57, 0.96) !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;
+    }
+    .asideg .el-collapse-item__header{
+        height: 50px !important;
+        width: 100%;
+        color: #fff;
+    
+     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;
+    }
+    .leftbgimg .el-collapse-item__header{
+        background-image: url(../../assets/img/Group10.png)!important; 
+    }
+    .asideg1 .jc_header{
+        width: 100%;
+        height: 52px;
+        line-height: 69px;
+        background-image: url(../../assets/img/Group24.png)!important; 
+        background-repeat: no-repeat;
+            background-position: center;
+    
+    }
+    .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;
+    }
+    
+    .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;
+    }
+    .tianjia .el-dialog__body{
+        padding: 20px !important;
+    }
+    .tianjia .el-form-item__label{
+        color: #fff;
+     
+    }
+    .tianjia .el-input__inner{
+        color: #fff;
+        font-size: 14px;
+        font-weight: 400;
+        text-align: left;
+        padding: 20px 0;
+        height: 30px;
+        line-height: 47px;
+    }
+    .ddd_div .el-input__inner{
+        color: #fff;
+    }
+    .pagination{
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+    }
+    .pagination .el-pagination__total{
+        color: #fff;
+    }
+    .el-pagination.is-background .btn-next.is-disabled, .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev.is-disabled, .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .el-pager li.is-disabled, .el-pagination.is-background .el-pager li:disabled
+    {
+        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;
+    }
+    .delecttitle{
+        font-size:22px;
+        font-weight: bold;
+        color: #fff;
+    }
+    </style>