<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>