refactor:优化卡片组件及综合概况页面调整

src/components/base-main/BaseMain.vue

@@ -45,8 +45,7 @@ export default {
     .content-area{
         width: px-to-rem(360);
         min-height: px-to-rem(252);
-        background: linear-gradient(to bottom, #324862 0%, #313A44 50%, #324862 100%);
-        border-radius: 0 0 px-to-rem(10) px-to-rem(10);
+        background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
     }
 }
 </style>

src/views/comprehensive-overview/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="container">
+    <Left></Left>
+    <Right></Right>
+  </div>
+</template>
+
+<script>
+import Left from './left.vue'
+import Right from './right.vue'
+export default {
+    components:{
+        Left,Right
+    }
+}
+</script>
+
+<style>
+
+</style>

src/views/comprehensiveOverview/index.vue

@@ -1,59 +1,45 @@
 <template>
-  <div class="comprehensive-container">
-    <div class="left">
-        <BaseMain title="通知公告">
-            <template v-slot:mainArea>
-                <div class="main-container">
-                    <div class="img-txt" v-if="noticeList.length>0">
-                        <el-image class="img" :src="noticeList[0].url"></el-image>
-                        <div class="txt">{{ noticeList[0].txt }}</div>
-                    </div>
-                    <div class="list" v-for="item in noticeDataList" :key="item.id">
-                        <div class="left">
-                            <el-image :src="item.url" class="img"></el-image>
+    <BasePanelLeft>
+    <div class="comprehensive-container">
+        <div class="left">
+            <BaseMain title="通知公告">
+                <template v-slot:mainArea>
+                    <div class="main-container">
+                        <div class="img-txt" v-if="noticeList.length>0">
+                            <el-image class="img" :src="noticeList[0].url"></el-image>
+                            <div class="txt">{{ noticeList[0].txt }}</div>
                         </div>
-                        <div class="right">
-                            <div class="title">{{ item.txt }}</div>
-                            <div class="date">{{ item.date }}</div>
-                            <div class="detailBtn">详情</div>
+                        <div class="list" v-for="item in noticeDataList" :key="item.id">
+                            <div class="left">
+                                <el-image :src="item.url" class="img"></el-image>
+                            </div>
+                            <div class="right">
+                                <div class="title">{{ item.txt }}</div>
+                                <div class="date">{{ item.date }}</div>
+                                <div class="detailBtn">详情</div>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </template>
-        </BaseMain>
-         <BaseMain title="渭河生态区概况">
-            <template v-slot:mainArea>
-    
-            </template>
-        </BaseMain>
-    </div>
-    <div class="right">
-        <BaseMain title="水文监测">
-            <template v-slot:mainArea>
-    
-            </template>
-        </BaseMain>
-         <BaseMain title="四乱监测">
-            <template v-slot:mainArea>
-    
-            </template>
-        </BaseMain>
-         <BaseMain title="采砂监测">
-            <template v-slot:mainArea>
-    
-            </template>
-        </BaseMain>
+                </template>
+            </BaseMain>
+            <BaseMain title="渭河生态区概况">
+                <template v-slot:mainArea>
+        
+                </template>
+            </BaseMain>
+        </div>
     </div>
-  </div>
+  </BasePanelLeft>
 </template>
 
 <script>
-import BaseMain from '@/components/base-main/BaseMain.vue';
+import BasePanelLeft from '@/components/base-panel/base-panel-left'
+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'
 export default {
     components:{
-        BaseMain
+        BaseMain,BasePanelLeft
     },
     data() {
         return {
@@ -94,6 +80,7 @@ export default {
 .comprehensive-container{
     position: absolute;
     top: px-to-rem(74);
+    z-index: 1;
     .main-container{
         padding: px-to-rem(12);
         .img-txt{

src/views/comprehensive-overview/right.vue

@@ -0,0 +1,136 @@
+<template>
+    <BasePanelRight>
+    <div class="comprehensive-container">
+        <div class="right">
+            <BaseMain title="水文监测">
+                <template v-slot:mainArea>
+        
+                </template>
+            </BaseMain>
+            <BaseMain title="四乱监测">
+                <template v-slot:mainArea>
+        
+                </template>
+            </BaseMain>
+            <BaseMain title="采砂监测">
+                <template v-slot:mainArea>
+        
+                </template>
+            </BaseMain>
+        </div>
+    </div>
+  </BasePanelRight>
+</template>
+
+<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'
+export default {
+    components:{
+        BaseMain,BasePanelRight
+    },
+    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:[]
+        }
+    },
+    created(){
+        this.noticeDataList = this.noticeList.splice(1,this.noticeList.length)
+        console.info(this.noticeDataList)
+    },
+    methods:{
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.comprehensive-container{
+    position: absolute;
+    top: px-to-rem(74);
+    z-index: 1;
+    .main-container{
+        padding: px-to-rem(12);
+        .img-txt{
+            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);
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                text-align: left;
+                padding-left: px-to-rem(12);
+            }
+        }
+        .list{
+            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%;
+            }
+            .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;
+                    font-weight: 400;
+                    font-size: px-to-rem(14);
+                    color: #FFFFFF;
+                    position: absolute;
+                    right: 0;
+                    text-align: center;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/index.vue

@@ -9,6 +9,7 @@
           <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
           <SandMonitorLeft v-if="mainMenu === '采砂监控'"></SandMonitorLeft>
           <SandMonitorRight v-if="mainMenu === '采砂监控'"></SandMonitorRight>
+          <ComprehensiveOverview v-if="mainMenu === '综合概览'"></ComprehensiveOverview>
         </div>
       </el-main>
     </el-container>
@@ -21,10 +22,11 @@ import { mapState } from 'vuex'
 import MainMap from '@/views/components/map'
 import SandMonitorLeft from './sand-monitor/left.vue'
 import SandMonitorRight from './sand-monitor/right.vue'
+import ComprehensiveOverview from '@/views/comprehensive-overview/index'
 const basePathUrl = window.basePathUrl || ''
 export default {
   name: 'MainView',
-  components: { MainMap, menuPanel, SandMonitorLeft, SandMonitorRight },
+  components: { MainMap, menuPanel, SandMonitorLeft, SandMonitorRight,ComprehensiveOverview },
   computed: {
     ...mapState({
       mainMenu: (state) => state.home.mainMenu