feat:综合概况静态页面完成100%

src/components/base-main/base-main.vue

@@ -22,7 +22,7 @@ export default {
 <style lang="scss" scoped>
 .baseMainContainer{
     width: px-to-rem(361);
-    margin: px-to-rem(15) px-to-rem(19);
+    margin: px-to-rem(10) px-to-rem(19);
     .header{
         background:url('@/assets/image/common/header-bg.png') no-repeat;
         background-size: contain;

src/views/comprehensive-overview/left.vue

@@ -24,7 +24,78 @@
             </BaseMain>
             <BaseMain title="渭河生态区概况">
                 <template v-slot:mainArea>
-        
+                    <div class="main-container">
+                        <div class="icon-item">
+                            <img src="@/assets/image/comprehensive/point1.png" class="img1"/>
+                            <img src="@/assets/image/comprehensive/line.png" class="img2"/>
+                            <img src="@/assets/image/comprehensive/point2.png" class="img3"/>
+                        </div>
+                        <div class="info">
+                            <div class="left">西起：武兴交界</div>
+                            <div class="right">东起：兴秦交界</div>
+                        </div>
+                        <div class="base-info-card">
+                            <div class="base-info-item">
+                                <span>水资源总量 (2024年)</span>
+                                <span class="value green">0.7 <span>亿m³</span></span>
+                            </div>
+                            <div class="base-info-item">
+                                <span>人均综合用量 (2024年)</span>
+                                <span class="value yellow">亿m³ <span>m³</span></span>
+                            </div>
+                            <div class="base-info-item">
+                                <span>河堤与堤防长度</span>
+                                 <span class="value blue">30.7 <span>km</span></span>
+                            </div>
+                        </div>
+                         <div class="base-info-card m0">
+                            <div class="base-info-item">
+                                <span>堤顶宽度</span>
+                                <span class="value green">20~30<span>m</span></span>
+                            </div>
+                            <div class="base-info-item">
+                                <span>堤距</span>
+                                <span class="value yellow">800~1200 <span>m</span></span>
+                            </div>
+                            <div class="base-info-item">
+                                <span>堤防外总面积</span>
+                                 <span class="value blue">35.75 <span>㎡</span></span>
+                            </div>
+                        </div>
+                        <div class="table-card" v-for="item in tableInfo" :key="item.id">
+                            <div class="title">{{item.title}}</div>
+                            <div class="base-info-card">
+                                <div class="base-info-item">
+                                    <span>堤防长度</span>
+                                    <span class="value">{{ item.len }} <span>km</span></span>
+                                </div>
+                                <div class="base-info-item pl20">
+                                    <span>防洪标准</span>
+                                    <span class="value">{{item.year}} <span>年一遇</span></span>
+                                </div>
+                                <div class="base-info-item pl20">
+                                    <span>设计流量</span>
+                                    <span class="value">{{item.sl}} <span>m³/人</span></span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="icon-card-container">
+                            <div class="area">
+                                <img src="@/assets/image/comprehensive/icon2.png"/>
+                                <div class="areainfo">
+                                    <div class="title">农村区段</div>
+                                    <div class="km"><span class="blue">34.01</span>K㎡</div>
+                                </div>
+                            </div>
+                            <div class="area">
+                                <img src="@/assets/image/comprehensive/icon1.png"/>
+                                 <div class="areainfo">
+                                    <div class="title">城市核心区段</div>
+                                    <div class="km"><span class="green">34.01</span>K㎡</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </template>
             </BaseMain>
         </div>
@@ -63,7 +134,23 @@ export default {
                     date:'2025-05-04 10:00:00'
                 }
             ],
-            noticeDataList:[]
+            noticeDataList:[],
+            tableInfo:[
+                {
+                    id:1,
+                    title:'桑镇西桥村至庄头镇蔡庄村段',
+                    len:13.146,
+                    year:30,
+                    sl:6669
+                },
+                {
+                    id:2,
+                    title:'庄头镇蔡庄村至阜寨镇段家村段',
+                    len:13.146,
+                    year:30,
+                    sl:6669
+                }
+            ]
         }
     },
     created(){
@@ -79,13 +166,20 @@ export default {
 <style lang="scss" scoped>
 .comprehensive-container{
     position: absolute;
-    top: px-to-rem(74);
+    top: px-to-rem(66);
     z-index: 1;
+    left: px-to-rem(-4);
     .main-container{
-        padding: px-to-rem(12);
+        padding: px-to-rem(10);
         .img-txt{
             position: relative;
-            height: px-to-rem(182);
+            .img{
+                width: 100%;
+            }
+            :deep(.el-image__inner){
+                height: px-to-rem(166);
+                width: 100%;
+            }
             .txt{
                 width: px-to-rem(337);
                 height: px-to-rem(30);
@@ -99,20 +193,24 @@ export default {
                 left: 0;
                 bottom: 0;
                 text-align: left;
-                padding-left: px-to-rem(12);
+                padding-left: px-to-rem(10);
             }
         }
         .list{
             display: flex;
             justify-content: space-between;
-            margin-top: px-to-rem(12);
+            margin-top: px-to-rem(10);
             background: rgba(79,159,255,0.2);
             border-radius: px-to-rem(4);
             border: 1px solid #4F9FFF;
             padding: px-to-rem(5);
+            height: px-to-rem(93);
             .left .img{
                 width: px-to-rem(100);
-                height: 100%;
+                height: px-to-rem(80);
+                :deep(.el-image__inner){
+                    height: px-to-rem(80);
+                }
             }
             .right{
                 font-weight: 500;
@@ -124,7 +222,7 @@ export default {
                     font-size: px-to-rem(14);
                     color: #FFFFFF;
                     margin-top: px-to-rem(9);
-                    margin-bottom:px-to-rem(13)
+                    margin-bottom:px-to-rem(10)
                 }
                 .detailBtn{
                     width: px-to-rem(48);
@@ -138,6 +236,127 @@ export default {
                     position: absolute;
                     right: 0;
                     text-align: center;
+                    bottom: px-to-rem(4);
+                }
+            }
+        }
+    }
+    .icon-item{
+        position: relative;
+        height: px-to-rem(18);
+        .img1{
+            position: absolute;
+            top: px-to-rem(0);
+            z-index: 1;
+        }
+        .img2{
+            width: px-to-rem(328);
+            height: px-to-rem(11);
+            position: absolute;
+            left: px-to-rem(8);
+            top: px-to-rem(4);
+        }
+        .img3{
+            position: absolute;
+            top: px-to-rem(0);
+            right: 0;
+            z-index: 1;
+        }
+    }
+    .info{
+        display: flex;
+        justify-content: space-between;
+        font-weight: bold;
+        font-size: px-to-rem(14);
+        color: #FFFFFF;
+        margin-top: px-to-rem(6);
+        padding-bottom: px-to-rem(6);
+        border-bottom: px-to-rem(1) solid #5980A9;
+    }
+    .base-info-card{
+        display: flex;
+        justify-content: space-between;
+        margin-top: px-to-rem(10);
+        .base-info-item {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: px-to-rem(5);
+            width: 30%;
+            span {
+                font-weight: bold;
+                font-size: px-to-rem(12);
+                color: #c4c6c8;
+            }
+            .value {
+                font-size: px-to-rem(14);
+                margin-top: px-to-rem(5);
+                color: #FFFFFF;
+            }
+            .yellow{
+                color: #D6A042;
+            }
+            .blue{
+                color: #81B1F5;
+            }
+            .green{
+                color: #80F5FF;
+            }
+        }
+    }
+    .m0{
+        margin-top: 0;
+    }
+    .table-card{
+        border: px-to-rem(1) solid #6B87B1;
+        background: #182C44;
+        margin-bottom: px-to-rem(5);
+        .title{
+            background: #3B5071;
+            font-weight: bold;
+            font-size: px-to-rem(14);
+            color: #FFFFFF;
+            height: px-to-rem(24);
+            line-height: px-to-rem(24);
+            padding-left: px-to-rem(11);
+        }
+        .base-info-card{
+            padding: 0 px-to-rem(10);
+            .base-info-item{
+                border-right: px-to-rem(1) solid #3A4148;
+                width:33%;
+            }
+            .base-info-item:last-child{
+                border-right: 0;
+            }
+            .pl20{
+                padding-left: px-to-rem(20);
+            }
+        }
+    }
+    .icon-card-container{
+        display: flex;
+        justify-content: space-between;
+        padding: 0 px-to-rem(10);
+        .area{
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+            img{
+                width:  px-to-rem(47);
+                height:  px-to-rem(49);
+                margin-right: px-to-rem(8);
+            }
+            .areainfo{
+                .title,.km{
+                    font-weight: bold;
+                    font-size: px-to-rem(12);
+                    color: #c4c6c8;
+                }
+                .blue{
+                    color: #81B1F5;
+                }
+                .green{
+                    color: #80F5FF;
                 }
             }
         }

src/views/comprehensive-overview/pie-chart/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div ref="chart" class="pie-chart-container"></div>
+</template>
+
+<script>
+import { echartMixin } from '@/mixins'
+export default {
+  name: 'PieChart',
+  mixins: [echartMixin],
+  data() {
+    return {
+      seriesData: [
+        { value: 10, name: '非采区采砂' },
+        { value: 10, name: '非采期采砂' },
+        { value: 10, name: '采砂超量' }
+      ]
+    }
+  },
+  methods: {
+    initChart() {
+      const option = {
+        backgroundColor: 'transparent',
+        color: ['#91ffab', '#90caff', '#f9dd71'],
+        graphic: {
+          elements: [
+            {
+              type: 'text',
+              left: '18%',
+              top: '38%',
+              style: {
+                text: `{a|3}{b|类}\n{c|预警类型}`,
+                fill: '#fff',
+                textAlign: 'center',
+                textVerticalAlign: 'middle',
+                rich: { a: { fontSize: this.pxToRem(28) }, b: { fontSize: this.pxToRem(12) }, c: { fontSize: this.pxToRem(14) } }
+              }
+            }
+          ]
+        },
+        legend: {
+          orient: 'vertical',
+          right: 10,
+          top: 35,
+          bottom: 20,
+          itemWidth: 12,
+          itemHeight:6,
+          textStyle: { color: '#F5F5F5', fontSize: this.pxToRem(14) },
+          formatter: (name) => {
+            const item = this.seriesData.find((d) => d.name === name)
+            return item ? `${name} ${item.value}` : name
+          }
+        },
+        series: [
+          {
+            name: '预警总数',
+            type: 'pie',
+            radius: ['70%', '95%'],
+            center: ['25%', '50%'],
+            avoidLabelOverlap: false,
+            label: { show: false },
+            labelLine: { show: true },
+            data: this.seriesData
+          }
+        ]
+      }
+      this.chartObj.setOption(option)
+    },
+    pxToRem(px) {
+      return `${px / 100}rem`
+    }
+  }
+}
+</script>
+<style lang="scss">
+.pie-chart-container {
+}
+</style>

src/views/comprehensive-overview/right.vue

@@ -4,17 +4,77 @@
         <div class="right">
             <BaseMain title="水文监测">
                 <template v-slot:mainArea>
-        
+                    <div class="sw-container">
+                        <div class="left">
+                            <img src="@/assets/image/comprehensive/swIcon.png" alt="" class="icon1">
+                            <span class="value"><span class="big">2</span> / 2</span>
+                        </div>
+                        <div class="right">
+                            <div class="icon-text">
+                                <div class="txt">水文</div>
+                                <div class="txt2">雨量</div>
+                            </div>
+                            <div class="icon-text">
+                                <div class="txt3">流速</div>
+                                <div class="txt4">流量</div>
+                            </div>
+                        </div>
+                    </div>
                 </template>
             </BaseMain>
             <BaseMain title="四乱监测">
                 <template v-slot:mainArea>
-        
+                    <div class="sl-container">
+                        <div class="seach-btn">
+                            <el-radio-group v-model="dateVal" 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">近30日</el-radio-button>
+                               <el-radio-button  label="4">全部</el-radio-button>
+                           </el-radio-group>
+                        </div>
+                        <div class="dottTitle">
+                            事件总数
+                        </div>
+                        <div class="data-info">
+                            <div class="left">
+                                <div class="val">40</div>
+                                <img src="@/assets/image/comprehensive/midBg2.png"/>
+                            </div>
+                            <div class="right">
+                                <div class="em">
+                                    <div class="color1">乱建</div>
+                                    <div>10</div>
+                                </div>
+                                <div class="em">
+                                    <div class="color2">乱采</div>
+                                    <div>10</div>
+                                </div>
+                                <div class="em">
+                                    <div class="color3">乱堆</div>
+                                    <div>10</div>
+                                </div>
+                                <div class="em">
+                                    <div class="color4">乱占</div>
+                                    <div>10</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </template>
             </BaseMain>
             <BaseMain title="采砂监测">
                 <template v-slot:mainArea>
-        
+                   <div class="card-item">
+                        <div class="warning-content">
+                        <div class="warning-title">
+                            <div class="title">预警总数</div>
+                            <div class="num">30</div>
+                            <div class="unit">条</div>
+                        </div>
+                        <PieChart style="height: 1.45rem" />
+                        </div>
+                    </div>
                 </template>
             </BaseMain>
         </div>
@@ -25,40 +85,17 @@
 <script>
 import BasePanelRight from '@/components/base-panel/base-panel-right'
 import BaseMain from '@/components/base-main/base-main.vue';
-import noticeUrl from '@/assets/image/comprehensive/bg1.png'
-import iUrl from '@/assets/image/comprehensive/bg2.png'
+import PieChart from './pie-chart/index.vue'
 export default {
     components:{
-        BaseMain,BasePanelRight
+        BaseMain,BasePanelRight,PieChart
     },
     data() {
         return {
-            noticeList:[
-                {
-                    id:1,
-                    url:noticeUrl,
-                    txt:'朝元阁峻临秦岭，羯鼓楼高俯渭河',
-                    date:'2025-05-04 10:00:00'
-                },
-                {
-                    id:2,
-                    url:iUrl,
-                    txt:'离亭当日唱离歌，只为柔条傍渭河',
-                     date:'2025-05-04 10:00:00'
-                },
-                {
-                    id:3,
-                    url:iUrl,
-                    txt:'离亭当日唱离歌，只为柔条傍渭河',
-                    date:'2025-05-04 10:00:00'
-                }
-            ],
-            noticeDataList:[]
+            dateVal:1
         }
     },
     created(){
-        this.noticeDataList = this.noticeList.splice(1,this.noticeList.length)
-        console.info(this.noticeDataList)
     },
     methods:{
 
@@ -69,68 +106,328 @@ export default {
 <style lang="scss" scoped>
 .comprehensive-container{
     position: absolute;
-    top: px-to-rem(74);
+    top: px-to-rem(66);
     z-index: 1;
-    .main-container{
-        padding: px-to-rem(12);
-        .img-txt{
+    .sw-container{
+        padding: px-to-rem(59) px-to-rem(12) px-to-rem(70) px-to-rem(16);
+        display: flex;
+        justify-content: flex-start;
+        .left{
             position: relative;
-            height: px-to-rem(182);
-            .txt{
-                width: px-to-rem(337);
-                height: px-to-rem(30);
-                background: rgba(0, 0, 0, 0.5);
-                border-radius: px-to-rem(4);
-                font-weight: bold;
-                font-size:  px-to-rem(14);
-                color: #FFFFFF;
-                line-height: px-to-rem(30);
+            margin-right: px-to-rem(24);
+            .icon1{
+                width: px-to-rem(124);
+                height: px-to-rem(124);
+            }
+            .value{
                 position: absolute;
-                left: 0;
-                bottom: 0;
-                text-align: left;
-                padding-left: px-to-rem(12);
+                font-weight: bold;
+                font-size: px-to-rem(14);
+                color: #fff;
+                left: px-to-rem(45);
+                bottom:px-to-rem(35);
+                .big{
+                    font-size: px-to-rem(18);
+                    color: #91FFAB;
+                }
+            }
+        }   
+        .right{
+            font-weight: 500;
+            font-size: px-to-rem(14);
+            color: #FFFFFF;
+            width: calc(100% - px-to-rem(124));
+            .icon-text{
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: px-to-rem(32);
+                .txt{
+                    background: url('@/assets/image/comprehensive/swIcon1.png') no-repeat;
+                    background-size: contain;
+                    width: px-to-rem(80);
+                    height: px-to-rem(32);
+                    line-height: px-to-rem(32);
+                    padding-left: px-to-rem(39);
+                }
+                 .txt2{
+                    background: url('@/assets/image/comprehensive/swIcon2.png') no-repeat;
+                    background-size: contain;
+                    width: px-to-rem(80);
+                    height: px-to-rem(32);
+                    line-height: px-to-rem(32);
+                    padding-left: px-to-rem(39);
+                }
+                 .txt3{
+                    background: url('@/assets/image/comprehensive/swIcon3.png') no-repeat;
+                    background-size: contain;
+                    width: px-to-rem(80);
+                    height: px-to-rem(32);
+                    line-height: px-to-rem(32);
+                    padding-left: px-to-rem(39);
+                }
+                 .txt4{
+                    background: url('@/assets/image/comprehensive/swIcon4.png') no-repeat;
+                    background-size: contain;
+                    width: px-to-rem(80);
+                    height: px-to-rem(32);
+                    line-height: px-to-rem(32);
+                    padding-left: px-to-rem(39);
+                }
+            }
+            .icon-text:first-child{
+                margin-top: px-to-rem(9);
             }
         }
-        .list{
+    }
+    .sl-container{
+        padding: px-to-rem(16) px-to-rem(15) px-to-rem(55) px-to-rem(11);
+        height: px-to-rem(253);
+        .slRadio{
+            margin-bottom: px-to-rem(24);
+            :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;
+            }
+        }
+        .dottTitle{
+            position: relative;
+            display: inline-block;
+            font-weight: bold;
+            font-size: px-to-rem(14);
+            color: #F5F5F5;
+            margin-bottom:px-to-rem(10);
+            margin-left:px-to-rem(16);
+            &::before,
+            &::after {
+                content: " "; 
+                display: inline-block;
+                width: px-to-rem(30); 
+                height: px-to-rem(2); 
+                background-color:  #4487D8; 
+                vertical-align: middle; 
+                margin: 0 0.5em; 
+            }
+            &::before {
+                margin-left: 0; 
+            }
+            &::after {
+                margin-right: 0;
+            }
+        }
+        .data-info{
             display: flex;
-            justify-content: space-between;
-            margin-top: px-to-rem(12);
-            background: rgba(79,159,255,0.2);
-            border-radius: px-to-rem(4);
-            border: 1px solid #4F9FFF;
-            padding: px-to-rem(5);
-            .left .img{
-                width: px-to-rem(100);
-                height: 100%;
+            justify-content:space-between;
+            .left{
+                margin-top:px-to-rem(26);
+                .val{
+                    font-weight: bold;
+                    font-size: px-to-rem(30);
+                    color: #F5F5F5;
+                    background: url('@/assets/image/comprehensive/midBg.png') no-repeat;
+                    background-size: contain;
+                    width: px-to-rem(86);
+                    height: px-to-rem(50);
+                    text-align: center;
+                    margin-left: px-to-rem(50);
+                }
+                img{
+                    width: px-to-rem(197);
+                    height: px-to-rem(33);
+                }
             }
             .right{
-                font-weight: 500;
-                font-size: px-to-rem(14);
-                color: #FFFFFF;
-                position: relative;
-                .date{
-                    font-weight: 400;
-                    font-size: px-to-rem(14);
-                    color: #FFFFFF;
-                    margin-top: px-to-rem(9);
-                    margin-bottom:px-to-rem(13)
-                }
-                .detailBtn{
-                    width: px-to-rem(48);
-                    height: px-to-rem(24);
-                    background: linear-gradient(0deg, #468ADB 0%, #366DAE 100%);
-                    border-radius:px-to-rem(4);
-                    border: px-to-rem(1) solid;
+                width:30%;
+                .em{
+                    display: flex;
+                    justify-content: space-between;
                     font-weight: 400;
                     font-size: px-to-rem(14);
-                    color: #FFFFFF;
-                    position: absolute;
-                    right: 0;
-                    text-align: center;
+                    color: #F5F5F5;
+                    margin-bottom:px-to-rem(12);
+                    .color1::before{
+                        content: " "; 
+                        display: inline-block;
+                        width: px-to-rem(12); 
+                        height: px-to-rem(6); 
+                        background-color:  #6BFE91; 
+                        border-radius: px-to-rem(2);
+                        vertical-align: middle; 
+                        margin-right: px-to-rem(6);
+                    }
+                    .color2::before{
+                        content: " "; 
+                        display: inline-block;
+                        width: px-to-rem(12); 
+                        height: px-to-rem(6); 
+                        background-color:  #EFD800; 
+                        border-radius: px-to-rem(2);
+                        vertical-align: middle; 
+                        margin-right: px-to-rem(6);
+                    }
+                    .color3::before{
+                        content: " "; 
+                        display: inline-block;
+                        width: px-to-rem(12); 
+                        height: px-to-rem(6); 
+                        background-color:  #F17A23; 
+                        border-radius: px-to-rem(2);
+                        vertical-align: middle; 
+                        margin-right: px-to-rem(6);
+                    }
+                    .color4::before{
+                        content: " "; 
+                        display: inline-block;
+                        width: px-to-rem(12); 
+                        height: px-to-rem(6); 
+                        background-color:  #4487D8; 
+                        border-radius: px-to-rem(2);
+                        vertical-align: middle; 
+                        margin-right: px-to-rem(6);
+                    }
                 }
             }
         }
     }
+   .card-item {
+    position: relative;
+    width: 3.68rem;
+    padding: px-to-rem(22) px-to-rem(16) px-to-rem(27) px-to-rem(26);
+    .icon-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .icon-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .icon-item-content {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .item-content {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-left: px-to-rem(10);
+            margin-bottom: px-to-rem(-6);
+            .label {
+              font-weight: 500;
+              font-size: px-to-rem(16);
+              color: #ffffff;
+            }
+            .value {
+              font-weight: bold;
+              font-size: px-to-rem(18);
+            }
+          }
+        }
+      }
+    }
+    .progress-content {
+      display: flex;
+      flex-direction: column;
+      margin-top: px-to-rem(10);
+      .progress-item {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: px-to-rem(6);
+        .progress-item-text {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: px-to-rem(4);
+          span {
+            font-size: px-to-rem(16);
+            color: #fff;
+          }
+        }
+      }
+    }
+    .warning-content {
+      height: px-to-rem(200);
+      .warning-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #fff;
+        font-size: px-to-rem(16);
+        .title {
+          &::before {
+            content: '';
+            display: inline-block;
+            background: #4487d8;
+            width: px-to-rem(30);
+            height: px-to-rem(2);
+            margin-bottom: px-to-rem(4);
+            margin-right: px-to-rem(6);
+          }
+          &::after {
+            content: '';
+            display: inline-block;
+            background: #4487d8;
+            width: px-to-rem(30);
+            height: px-to-rem(2);
+            margin-bottom: px-to-rem(4);
+            margin-left: px-to-rem(6);
+          }
+        }
+        .num {
+          text-align: center;
+          width: px-to-rem(75);
+          height: px-to-rem(45);
+          font-size: px-to-rem(30);
+          color: #f5f5f5;
+          background: url('@/assets/image/sand-monitor/mid-bg.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        .unit {
+          margin-right: px-to-rem(10);
+        }
+      }
+    }
+    .info-content {
+      color: #fff;
+      .base-info-container {
+        .title {
+          font-size: px-to-rem(16);
+          text-align: left;
+          &::before {
+            content: '';
+            display: inline-block;
+            width: px-to-rem(8);
+            height: px-to-rem(10);
+            background: #81b1f5;
+            margin-right: px-to-rem(6);
+          }
+        }
+        .base-info-card {
+          display: flex;
+          justify-content: space-between;
+          .base-info-item {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: px-to-rem(10);
+            span {
+              font-weight: bold;
+              font-size: px-to-rem(12);
+              color: #c4c6c8;
+            }
+            .value {
+              font-size: px-to-rem(14);
+              color: #81b1f5;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>