feat:通用卡片+综合概况静态页面

src/App.vue

@@ -9,7 +9,7 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  // text-align: center;
   color: #2c3e50;
   width: 100%;
   height: 100%;

src/components/base-main/BaseMain.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="baseMainContainer">
+    <div class="header">
+        <div class="left">{{ title }}</div>
+        <div class="right"><slot name="headerR"></slot></div>
+    </div>
+    <div class="content-area">
+        <slot name="mainArea"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'BaseMain',
+    props:{
+        title:String,
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.baseMainContainer{
+    width: px-to-rem(361);
+    margin: px-to-rem(15) px-to-rem(19);
+    .header{
+        background:url('@/assets/image/common/header-bg.png') no-repeat;
+        background-size: contain;
+        width: 100%;
+        height: px-to-rem(47);
+        line-height: px-to-rem(47);
+        display: flex;
+        justify-content: space-between;
+        .left{
+            margin-left: px-to-rem(44);
+            font-weight: bold;
+            font-size: px-to-rem(18);
+            color: #FFFFFF;
+            text-shadow:px-to-rem(0) px-to-rem(2) px-to-rem(9) #003F85;
+        }
+        .right{
+            margin-right: px-to-rem(11);
+        }
+    }
+    .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);
+    }
+}
+</style>

src/views/comprehensiveOverview/index.vue

@@ -0,0 +1,159 @@
+<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>
+                        </div>
+                        <div class="right">
+                            <div class="title">{{ item.txt }}</div>
+                            <div class="date">{{ item.date }}</div>
+                            <div class="detailBtn">详情</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>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseMain from '@/components/base-main/BaseMain.vue';
+import noticeUrl from '@/assets/image/comprehensive/bg1.png'
+import iUrl from '@/assets/image/comprehensive/bg2.png'
+export default {
+    components:{
+        BaseMain
+    },
+    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);
+    .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>