zizhujianzhan_web/components/template/sector/body/index/link/1200x230/1.vue

<template>
    <div class="linkSectorBox">
        <!-- 
            注意 ，该组件可以在首页与频道页中通用
         -->
        <div v-if="skinId==1" class="linkSectorStyle1Box">
            <div class="linkSectorItem bg1">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">
                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026862529548.png" /></div>
                    <div class="linkSectorItemTitle">人员查询</div>
                </NuxtLink>
            </div>
            <div class="linkSectorItem bg1">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html" target="_blank">
                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026870493018.png" /></div>
                    <div class="linkSectorItemTitle">车辆查询</div>
                </NuxtLink>
            </div>
            <div class="linkSectorItem bg1">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html" target="_blank">
                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026884699420.png" /></div>
                    <div class="linkSectorItemTitle">调研选题</div>
                </NuxtLink>
            </div>
            <div class="linkSectorItem bg1">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html" target="_blank">
                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026896833808.png" /></div>
                    <div class="linkSectorItemTitle">地市中心</div>
                </NuxtLink>
            </div>
            <div class="linkSectorItem bg1">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html" target="_blank">
                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/175202690385632.png" /></div>
                    <div class="linkSectorItemTitle">介绍信查询</div>
                </NuxtLink>
            </div>
        </div>
        <div v-if="skinId==2" class="linkSectorStyle2Box">
            <div class="linkSectorItem bg1">
                    <div class="linkSectorItemTitle">人员查询</div>
                    <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
                    <div class="linkSectorItemBtn">
                        <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">
                            点击查询
                        </NuxtLink>
                    </div>
            </div>
            <div class="linkSectorItem bg2">
                <div class="linkSectorItemTitle">车辆查询</div>
                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
                <div class="linkSectorItemBtn">
                    <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html" target="_blank">
                        点击查询
                    </NuxtLink>
                </div>
            </div>
            <div class="linkSectorItem bg3">
                <div class="linkSectorItemTitle">调研选题</div>
                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
                <div class="linkSectorItemBtn">
                    <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html" target="_blank">
                        点击查询
                    </NuxtLink>
                </div>
            </div>
            <div class="linkSectorItem bg4">
                <div class="linkSectorItemTitle">地市中心</div>
                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
                <div class="linkSectorItemBtn">
                    <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html" target="_blank">
                        点击查询
                    </NuxtLink>
                </div>
            </div>
            <div class="linkSectorItem bg5">
                <div class="linkSectorItemTitle">介绍信查询</div>
                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
                <div class="linkSectorItemBtn">
                    <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html" target="_blank">
                        点击查询
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    skinId: Number,//皮肤id
});
</script>

<style lang="less" scoped>
.linkSectorBox {
    width: 1200px;
    height: 230px;
    margin: 0 auto;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: content-box;
}
//样式1 start ---------------------------------------->
.linkSectorStyle1Box {
    width: 1200px;
    height: 230px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .linkSectorItem {
        width: 210px;
        height: 230px;
        box-sizing: border-box;
        padding:30px;
        background: #F9FAFB;
        cursor: pointer;
        .linkSectorItemImg {
            text-align: center;
            border-bottom:1px solid #D3D3D3;
            padding-bottom: 10px;
            height: 85px;
            img {
                display: block;
                margin: 20px auto;
            }
        }
        .linkSectorItemTitle {
            font-size: 16px;
            color:#333333;
            text-align: center;
            padding-top:30px;
        }
    }
}
//样式1 end ---------------------------------------->

//样式2 start ---------------------------------------->
.linkSectorStyle2Box {
    width: 1200px;
    height: 230px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .linkSectorItem {
        width: 210px;
        height: 230px;
        box-sizing: border-box;
        padding:70px 30px;
        cursor: pointer;
        .linkSectorItemTitle {
            font-size:16px;
            color:#333333;
            margin-bottom: 13px;
        }
        .linkSectorItemContent {
            font-size:12px;
            color:#999999;
            margin-bottom: 43px;
        }
        .linkSectorItemBtn {
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border:1px solid #A91B33;
            color:#A91B33;
            border-radius: 15px;
            font-size: 12px;
            margin: 0 auto;
            cursor: pointer;
            a {
                color:#A91B33;
            }
        }
    }
    .bg1 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922702993953.png) no-repeat center center;}
    .bg2 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922720998099.png) no-repeat center center;}
    .bg3 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922727860324.png) no-repeat center center;}
    .bg4 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922744808118.png) no-repeat center center;}
    .bg5 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922748574101.png) no-repeat center center;}
}
//样式2 end ---------------------------------------->
</style>