Merge branch 'dev' of http://git.dnzc.vip:3000/yangqishu/tmzn-weihe into dev

src/assets/scss/index.scss

@@ -239,3 +239,12 @@ html#baidu-map-hack {
     opacity: 1;
   }
 }
+
+.u-popper-select{
+  background-color: rgba(79, 159, 255, 0.3);
+  border-color: #4f9fff;
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
+    background-color: rgba(79, 159, 255, 0.4);
+    color: #FFF;
+  }
+}

src/views/hydrologic-info/left.vue

@@ -12,7 +12,13 @@
         <template v-slot:mainArea>
           <div class="main-container">
             <div class="sector-info">
-              <img src="@/assets/image/hydrologic/sectorBg.png" />
+              <div class="img">
+                <img src="@/assets/image/hydrologic/sectorBg.png" />
+                <div class="val">
+                  <span>0.0</span>
+                  <span>2</span>
+                </div>
+              </div>
               <div class="info">
                 <div class="row">
                   <div class="col">在线率：</div>
@@ -28,14 +34,63 @@
                 </div>
               </div>
             </div>
+            <div class="progress-content">
+              <div class="progress-item" v-for="item in progressList" :key="item.id">
+                <div class="progress-item-text">
+                  <span>{{ item.name }}</span>
+                  <span
+                    >{{ item.value }}<span class="green"> / {{ item.total }}</span></span
+                  >
+                </div>
+                <el-progress size="large" :percentage="item.percentage" color="#4183D3" :show-text="false" define-back-color="#213F61" :stroke-width="10"></el-progress>
+              </div>
+            </div>
           </div>
         </template>
       </BaseMain>
       <BaseMain title="水文监测点信息">
-        <template v-slot:mainArea> </template>
+        <template v-slot:mainArea>
+          <div class="sw-container">
+            <ScrollPanel>
+              <ul>
+                <li class="li-item" v-for="(item, index) in [...swList, ...swList]" :key="index">
+                  <div class="item">
+                    <div class="titile">
+                      <div>{{ item.title }}</div>
+                      <div class="btn"></div>
+                    </div>
+                    <div class="content">
+                      <img :src="item.url" />
+                      <div class="info">
+                        <div>监测指标：{{ item.indicator }}</div>
+                        <div>监测点位置：{{ item.address }}</div>
+                        <div>
+                          在线状态：<span class="green">{{ item.status }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </ScrollPanel>
+          </div>
+        </template>
       </BaseMain>
       <BaseMain title="今日气象监测">
-        <template v-slot:mainArea> </template>
+        <template v-slot:mainArea>
+          <div class="qx-container">
+            <div class="qx-content">
+              <div class="qx-item" v-for="(item, index) in qxList" :key="index">
+                <img :src="item.img" alt="" class="img1" />
+                <img src="@/assets/image/hydrologic/lj.png" alt="" class="img2" />
+                <div class="txt-val">
+                  <div class="txt" :style="{ backgroundColor: item.bgColor, borderColor: item.borderColor }">{{ item.txt }}</div>
+                  <div class="val">{{ item.val }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
       </BaseMain>
     </div>
   </BasePanelLeft>
@@ -44,15 +99,92 @@
 <script>
 import BasePanelLeft from '@/components/base-panel/base-panel-left'
 import BaseMain from '@/components/base-main/base-main.vue'
+import imgUrl from '@/assets/image/hydrologic/imgT.png'
+import ScrollPanel from '@/components/scroll-panel/index.vue'
+import iconUrl1 from '@/assets/image/hydrologic/icon5.png'
+import iconUrl2 from '@/assets/image/hydrologic/icon6.png'
+import iconUrl3 from '@/assets/image/hydrologic/icon4.png'
+import iconUrl4 from '@/assets/image/hydrologic/icon1.png'
+import iconUrl5 from '@/assets/image/hydrologic/icon3.png'
+import iconUrl6 from '@/assets/image/hydrologic/icon2.png'
 export default {
   data() {
     return {
-      dateVal: 1
+      dateVal: 1,
+      progressList: [
+        { id: 1, name: '降雨', value: 2, total: 2, percentage: 50, color: '#4183D3' },
+        { id: 2, name: '水位', value: 2, total: 2, percentage: 50, color: '#FCD294' },
+        { id: 3, name: '流量', value: 2, total: 2, percentage: 50, color: '#4183D3' },
+        { id: 4, name: '流速', value: 2, total: 2, percentage: 50, color: '#4183D3' }
+      ],
+      swList: [
+        {
+          id: 1,
+          title: '水文监测点详情',
+          indicator: '降雨、水位、流量、流速',
+          address: '兴平市合家庄东沿河堤路100米',
+          status: '在线',
+          url: imgUrl
+        },
+        {
+          id: 2,
+          title: '水文监测点详情',
+          indicator: '降雨、水位、流量、流速',
+          address: '兴平市合家庄东沿河堤路100米',
+          status: '在线',
+          url: imgUrl
+        }
+      ],
+      qxList: [
+        {
+          img: iconUrl1,
+          bgColor: '#FF6B6B4C',
+          borderColor: '#FF6B6B',
+          txt: '高温',
+          val: '36℃'
+        },
+        {
+          img: iconUrl2,
+          bgColor: '#3E92FF4C',
+          borderColor: '#3E92FF',
+          txt: '低温',
+          val: '20℃'
+        },
+        {
+          img: iconUrl3,
+          bgColor: '##FBC5754C',
+          borderColor: '#FBC575',
+          txt: 'PM值',
+          val: '10μm'
+        },
+        {
+          img: iconUrl4,
+          bgColor: '#34F5F74C',
+          borderColor: '#34F5F7',
+          txt: '风级',
+          val: '5级'
+        },
+        {
+          img: iconUrl5,
+          bgColor: '#3883E34C',
+          borderColor: '#3883E3',
+          txt: '日出',
+          val: '05:00'
+        },
+        {
+          img: iconUrl6,
+          bgColor: '#FBC5754C',
+          borderColor: '#FBC575',
+          txt: '日落',
+          val: '19:00'
+        }
+      ]
     }
   },
   components: {
     BasePanelLeft,
-    BaseMain
+    BaseMain,
+    ScrollPanel
   }
 }
 </script>
@@ -82,11 +214,23 @@ export default {
     padding: px-to-rem(22) px-to-rem(14);
     .sector-info {
       display: flex;
+      justify-content: space-between;
       img {
         width: px-to-rem(133);
         height: px-to-rem(74);
       }
+      .img {
+        .val {
+          display: flex;
+          justify-content: space-between;
+          font-weight: 500;
+          font-size: px-to-rem(14);
+          color: #ffffff;
+          margin-top: px-to-rem(-8);
+        }
+      }
       .info {
+        width: calc(100% - px-to-rem(143));
         font-weight: 500;
         font-size: px-to-rem(14);
         color: #ffffff;
@@ -94,7 +238,7 @@ export default {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: px-to-rem(14);
+          margin-bottom: px-to-rem(9);
           .col span {
             font-weight: bold;
             font-size: px-to-rem(16);
@@ -103,8 +247,123 @@ export default {
               margin-right: px-to-rem(19);
             }
           }
-          .bg{
-            // background:  linear-gradient(0deg, #0670B4 0%);;
+          .bg {
+            background: url('@/assets/image/hydrologic/bg.png') no-repeat 0 0 / 100% 100%;
+            width: px-to-rem(121);
+            text-align: center;
+          }
+        }
+      }
+    }
+    .progress-content {
+      display: flex;
+      justify-content: space-between;
+      margin-top: px-to-rem(10);
+      flex-wrap: wrap;
+      .progress-item {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: px-to-rem(10);
+        flex-basis: calc(50% - px-to-rem(14));
+        .progress-item-text {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: px-to-rem(4);
+          span {
+            font-size: px-to-rem(16);
+            color: #fff;
+          }
+          .green {
+            color: #0dc985;
+          }
+        }
+      }
+    }
+  }
+  .sw-container {
+    padding: px-to-rem(10);
+    height: px-to-rem(250);
+    .li-item {
+      .item {
+        background: rgba(79, 159, 255, 0.2);
+        border-radius: px-to-rem(4);
+        border: px-to-rem(1) solid #4f9fff;
+        padding: px-to-rem(6);
+        margin-bottom: px-to-rem(6);
+        .titile {
+          display: flex;
+          justify-content: space-between;
+          font-weight: bold;
+          font-size: px-to-rem(16);
+          color: #ffffff;
+          margin-bottom: px-to-rem(10);
+          .btn {
+            width: px-to-rem(10);
+            height: px-to-rem(10);
+            border-color: #407ed5;
+            border-style: solid;
+            border-width: 0px 2px 2px 0px;
+            transform: rotate(-45deg);
+          }
+        }
+        .content {
+          display: flex;
+          gap: px-to-rem(9);
+          justify-content: space-between;
+          img {
+            width: px-to-rem(100);
+            height: px-to-rem(100);
+          }
+          .info {
+            font-weight: 400;
+            font-size: px-to-rem(14);
+            color: #ffffff;
+            vertical-align: middle;
+          }
+          .green {
+            color: #0dc985;
+          }
+          .green::before {
+            content: '•';
+            margin-right: px-to-rem(8);
+            color: #0dc985;
+          }
+        }
+      }
+    }
+  }
+  .qx-container {
+    padding: px-to-rem(23) px-to-rem(21);
+    .qx-content {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      gap: px-to-rem(32);
+      .qx-item {
+        display: flex;
+        justify-content: space-around;
+        flex-basis: calc(50% - px-to-rem(30));
+        align-items: center;
+        .img1 {
+          width: px-to-rem(54);
+          height: px-to-rem(46);
+        }
+        .img2 {
+          width: px-to-rem(6);
+          height: px-to-rem(27);
+        }
+        .txt-val {
+          font-weight: 400;
+          font-size: px-to-rem(14);
+          color: #ffffff;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          gap: px-to-rem(6);
+          .txt {
+            border: px-to-rem(1) solid;
+            border-radius: px-to-rem(4);
+            padding: px-to-rem(1) px-to-rem(8);
           }
         }
       }

src/views/hydrologic-info/line-chart/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div ref="chart" class="line-chart-container"></div>
+</template>
+
+<script>
+import { echartMixin } from '@/mixins'
+export default {
+  name: 'LineChart',
+  mixins: [echartMixin],
+  props:{
+    option:Object
+  },
+  data() {
+    return {
+      seriesData: []
+    }
+  },
+  methods: {
+    initChart() {
+      this.chartObj.setOption(this.option)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.line-chart-container {
+}
+</style>

src/views/hydrologic-info/right.vue

@@ -1,67 +1,478 @@
 <template>
   <BasePanelRight>
-        <div class="hydrologic-container">
-             <BaseMain title="异常信息分析">
-                 <template v-slot:headerR>
-                    <el-radio-group v-model="dateVal" size="mini" class="dateRadio">
-                        <el-radio-button label="1">近7日</el-radio-button>
-                        <el-radio-button label="2">近30日</el-radio-button>
-                        <el-radio-button label="3">近3个月</el-radio-button>
-                    </el-radio-group>
-                </template>
-                <template v-slot:mainArea>
-
-                </template>
-            </BaseMain>
-            <BaseMain title="监测信息统计">
-                <template v-slot:mainArea>
-                    
-                </template>
-            </BaseMain>
-            <BaseMain title="水文综合分析">
-                <template v-slot:mainArea>
-                    
-                </template>
-            </BaseMain>
-        </div>
+    <div class="hydrologic-container">
+      <BaseMain title="异常信息分析">
+        <template v-slot:headerR>
+          <el-radio-group v-model="dateVal" size="mini" class="dateRadio" @change="changeDate">
+            <el-radio-button label="1">近7日</el-radio-button>
+            <el-radio-button label="2">近30日</el-radio-button>
+            <el-radio-button label="3">近3个月</el-radio-button>
+          </el-radio-group>
+        </template>
+        <template v-slot:mainArea>
+          <div class="yc-info-container">
+            <div class="yc-content">
+              <div class="yc-item" v-for="(item, index) in ycList" :key="index">
+                <div class="info">
+                  <img src="@/assets/image/hydrologic/icon7.png" alt="" />
+                  <div class="txt-val">
+                    <div class="txt">{{ item.txt }}</div>
+                    <div class="val">
+                      <span>{{ item.val }}</span
+                      >次
+                    </div>
+                  </div>
+                </div>
+                <img src="@/assets/image/sand-monitor/icon-bg.png" alt="" class="bgImg" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </BaseMain>
+      <BaseMain title="监测信息统计">
+        <template v-slot:headerR>
+          <el-select v-model="selectedVal" size="mini" class="vSelect" popper-class="u-popper-select">
+            <el-option label="水文监测点" value="0"></el-option>
+          </el-select>
+          <el-select v-model="selectedVal1" size="mini" class="vSelect" popper-class="u-popper-select">
+            <el-option label="水位" value="0"></el-option>
+          </el-select>
+        </template>
+        <template v-slot:mainArea>
+          <div class="jc-container">
+            <div class="filter-head">
+              <el-radio-group v-model="jcDateVal" size="mini" class="slRadio">
+                <el-radio-button label="1">日</el-radio-button>
+                <el-radio-button label="2">周</el-radio-button>
+                <el-radio-button label="3">月</el-radio-button>
+              </el-radio-group>
+              <div class="tabs">
+                <div class="tab-pane" :class="{ active: jcActive }" @click="toChangeTab(true)">列表</div>
+                <div class="tab-pane" :class="{ active: !jcActive }" @click="toChangeTab(false)">趋势</div>
+              </div>
+              <div class="more">更多</div>
+            </div>
+            <div class="table-container" v-if="jcActive">
+              <el-table :data="tableData" style="width: 100%" height="180" size="mini">
+                <el-table-column prop="level" label="预警等级" width="70"> </el-table-column>
+                <el-table-column prop="date" label="上报时间" width="70"> </el-table-column>
+                <el-table-column prop="address" label="设备位置"> </el-table-column>
+                <el-table-column prop="value" label="监测数值" width="70"> </el-table-column>
+              </el-table>
+            </div>
+            <div class="line-chart-container" v-if="!jcActive">
+              <LineChart style="height: 2.22rem" :option="jcOption" />
+            </div>
+          </div>
+        </template>
+      </BaseMain>
+      <BaseMain title="水文综合分析">
+        <template v-slot:mainArea>
+          <div class="sw-container">
+            <div class="head-container">
+              <div class="left">
+                <el-select v-model="selectedVal2" size="mini" class="vSelect" popper-class="u-popper-select">
+                  <el-option label="水文监测点" value="0"></el-option>
+                </el-select>
+                <el-select v-model="selectedVal3" size="mini" class="vSelect" popper-class="u-popper-select">
+                  <el-option label="水位" value="0"></el-option>
+                </el-select>
+              </div>
+              <div class="right">更多</div>
+            </div>
+            <LineChart style="height: 1.8rem" :option="swOption" />
+          </div>
+        </template>
+      </BaseMain>
+    </div>
   </BasePanelRight>
 </template>
 
 <script>
 import BasePanelRight from '@/components/base-panel/base-panel-right'
 import BaseMain from '@/components/base-main/base-main.vue'
+import LineChart from './line-chart/index.vue'
+import * as echarts from 'echarts'
 export default {
-    data(){
-        return{
-            dateVal:1
+  data() {
+    return {
+      dateVal: 1,
+      jcDateVal: 1,
+      jcActive: true,
+      ycList: [
+        {
+          txt: '水位超警戒值',
+          val: '0'
+        },
+        {
+          txt: '雨量超警戒值',
+          val: '0'
+        },
+        {
+          txt: '流量超警戒值',
+          val: '0'
+        },
+        {
+          txt: '流速超警戒值',
+          val: '0'
+        }
+      ],
+      selectedVal: '0',
+      selectedVal1: '0',
+      selectedVal2: '0',
+      selectedVal3: '0',
+      tableData: [
+        {
+          level: '一级预警',
+          date: '2025-01-02 10:00:00',
+          address: '设备位置',
+          value: '30.00'
+        },
+        {
+          level: '一级预警',
+          date: '2025-01-02 10:00:00',
+          address: '设备位置',
+          value: '30.00'
+        },
+        {
+          level: '一级预警',
+          date: '2025-01-02 10:00:00',
+          address: '设备位置',
+          value: '30.00'
+        },
+        {
+          level: '一级预警',
+          date: '2025-01-02 10:00:00',
+          address: '设备位置',
+          value: '30.00'
         }
+      ],
+      jcOption: {
+        backgroundColor: 'transparent',
+        color: ['#4487D7'],
+        grid: {
+          left: 16,
+          right: 16,
+          top: 40,
+          bottom: 8,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'transparent',
+          borderColor: 'transparent',
+          borderWidth: 0,
+          extraCssText: 'box-shadow: none;',
+          formatter: function (params) {
+            let value = params[params.length - 1].value
+            let date = params[params.length - 1].name
+            return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
+                        ${date}  预警数${value}个
+                   </div>`
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['08/21', '08/22', '08/23', '08/24'],
+
+            axisTick: {
+              show: false
+            },
+            lineStyle: {
+              color: '#374672',
+              width: 1
+            }
+          }
+        ],
+        yAxis: [{ type: 'value', splitLine: { show: false } }],
+        series: [
+          {
+            type: 'line',
+            smooth: true,
+            lineStyle: { width: 1, color: '#4487D7' },
+            symbol: 'circle',
+            symbolSize: 7,
+            itemStyle: {
+              normal: {
+                color: '#fff', // 点颜色
+                borderColor: '#4487D7', // 点的边框颜色
+                borderWidth: 2 // 点的边框宽度
+              },
+              emphasis: {
+                borderWidth: 4, // 鼠标悬停时边框加粗
+                shadowBlur: 10, // 阴影模糊大小，实现放大的效果
+                shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
+              }
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: ' rgba(73,142,227,0)' },
+                { offset: 0, color: 'rgba(73,142,227,0.25)' }
+              ])
+            },
+            data: [10, 8, 15, 11, 13, 12]
+          }
+        ]
+      },
+      swOption: {
+        backgroundColor: 'transparent',
+        color: ['#66DC95'],
+        grid: {
+          left: 16,
+          right: 16,
+          top: 20,
+          bottom: 8,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'transparent',
+          borderColor: 'transparent',
+          borderWidth: 0,
+          extraCssText: 'box-shadow: none;',
+          formatter: function (params) {
+            let value = params[params.length - 1].value
+            let date = params[params.length - 1].name
+            return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
+                        ${date}  高程${value}m
+                   </div>`
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['08/21', '08/22', '08/23', '08/24', '08/25', '08/26'],
+
+            axisTick: {
+              show: false
+            },
+            lineStyle: {
+              color: '#374672',
+              width: 1
+            }
+          }
+        ],
+        yAxis: [{ type: 'value', splitLine: { show: false }, min: 380, interval: 10 }],
+        series: [
+          {
+            type: 'line',
+            smooth: true,
+            lineStyle: { width: 1, color: '#66DC95' },
+            symbol: 'circle',
+            symbolSize: 7,
+            itemStyle: {
+              normal: {
+                color: '#ffff', // 点颜色
+                borderColor: '#66DC95', // 点的边框颜色
+                borderWidth: 2 // 点的边框宽度
+              },
+              emphasis: {
+                borderWidth: 4, // 鼠标悬停时边框加粗
+                shadowBlur: 10, // 阴影模糊大小，实现放大的效果
+                shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
+              }
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(102,220,149,0)' },
+                { offset: 0, color: 'rgba(102,220,149,0.25)' }
+              ])
+            },
+            data: [400, 410, 400, 410, 405, 410]
+          }
+        ]
+      }
+    }
+  },
+  components: {
+    BasePanelRight,
+    BaseMain,
+    LineChart
+  },
+  methods: {
+    changeDate(val) {
+      console.info(val)
     },
-    components:{
-        BasePanelRight,BaseMain
+    toChangeTab(d) {
+      this.jcActive = d
     }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.hydrologic-container{
-    position: absolute;
-    top: px-to-rem(66);
-    z-index: 1;
-    left: px-to-rem(-4);
-     .dateRadio{
-        :deep(.el-radio-button__inner) {
-            background: transparent;
-            color: #4F9FFF;
-            border-color: #4F9FFF;
-            font-size: px-to-rem(14);
-            font-weight: 400;
-            padding: px-to-rem(5);
+.hydrologic-container {
+  position: absolute;
+  top: px-to-rem(66);
+  z-index: 1;
+  left: px-to-rem(-4);
+  .dateRadio {
+    :deep(.el-radio-button__inner) {
+      background: transparent;
+      color: #4f9fff;
+      border-color: #4f9fff;
+      font-size: px-to-rem(14);
+      font-weight: 400;
+      padding: px-to-rem(5);
+    }
+    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+      background-color: rgba(79, 159, 255, 0.8);
+      font-weight: 400;
+      color: #f2f6ff;
+    }
+  }
+  .yc-info-container {
+    padding: px-to-rem(22);
+    .yc-content {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      gap: px-to-rem(20);
+      .yc-item {
+        .info {
+          display: flex;
+          justify-content: space-between;
+          img {
+            width: px-to-rem(47);
+            height: px-to-rem(49);
+          }
+          .txt-val {
+            .txt {
+              font-weight: 500;
+              font-size: px-to-rem(14);
+              color: #ffffff;
+            }
+            .val {
+              font-weight: 400;
+              font-size: px-to-rem(14);
+              color: #ffffff;
+              span {
+                font-weight: 500;
+                font-size: px-to-rem(18);
+                color: #bc4747;
+              }
+            }
+          }
         }
-        :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
-            background-color:  rgba(79,159,255,0.8);
-            font-weight: 400;
-            color: #F2F6FF;
+        .bgImg {
+          width: px-to-rem(140);
+          height: px-to-rem(37);
         }
+      }
+    }
+  }
+  .vSelect {
+    :deep(.el-input__inner) {
+      background: rgba(79, 159, 255, 0.3);
+      border-color: #4f9fff;
+      width: px-to-rem(96);
+      border-radius: px-to-rem(4);
+      color: #fff;
+      padding: 0 px-to-rem(2);
+    }
+    :deep(.el-input__suffix .el-input__icon) {
+      width: px-to-rem(18) !important;
+    }
+  }
+  .vSelect:last-child {
+    margin-left: px-to-rem(10);
+    :deep(.el-input__inner) {
+      width: px-to-rem(58);
+    }
+  }
+  .jc-container {
+    padding: px-to-rem(8) px-to-rem(10);
+    .filter-head {
+      display: flex;
+      justify-content: space-between;
+      :deep(.el-radio-button__inner) {
+        background: rgba(79, 159, 255, 0.12);
+        color: #4f9fff;
+        border-color: #4f9fff;
+        font-weight: 400;
+        padding: px-to-rem(6);
+        font-size: px-to-rem(14);
+      }
+      :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+        background-color: rgba(79, 159, 255, 0.8);
+        color: #fff;
+      }
+      .tabs {
+        display: flex;
+        align-items: center;
+        gap: px-to-rem(20);
+        .tab-pane {
+          font-weight: 400;
+          font-size: px-to-rem(16);
+          color: #f5f5f5;
+        }
+        .active {
+          color: #4488d9;
+          border-bottom: px-to-rem(1) solid #4488d9;
+        }
+      }
+      .more {
+        font-weight: 400;
+        font-size: px-to-rem(14);
+        color: #5e93c9;
+        padding-top: px-to-rem(4);
+      }
+    }
+    .table-container {
+      margin-top: px-to-rem(10);
+      :deep(.el-table thead) {
+        color: #fff;
+        font-size: px-to-rem(14);
+        font-weight: 500;
+      }
+      :deep(.el-table th.el-table__cell) {
+        background-color: #244e81;
+        border-bottom: px-to-rem(5) solid #152e51;
+      }
+      :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
+        background-color: transparent;
+      }
+      :deep(.el-table tr) {
+        background-color: #153057;
+      }
+      :deep(.el-table td.el-table__cell) {
+        border-bottom: px-to-rem(5) solid #152e51;
+        font-weight: 400;
+        font-size: px-to-rem(14);
+        color: #c5d0d4;
+      }
+      :deep(.el-table .cell) {
+        line-height: px-to-rem(16);
+        padding-left: px-to-rem(10);
+        padding-right: px-to-rem(5);
+      }
+      :deep(.el-table__body-wrapper) {
+        overflow-x: hidden !important;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+      :deep(.el-table::before) {
+        background-color: transparent;
+      }
+    }
+  }
+  .sw-container {
+    padding: px-to-rem(16) px-to-rem(10);
+    .head-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .right {
+        font-weight: 400;
+        font-size: px-to-rem(14);
+        color: #5e93c9;
+      }
     }
+  }
 }
 </style>