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

<template>
    <div class="linkSectorBox">
        <!--皮肤1 该通栏只受皮肤影响，不受组件样式影响-->
        <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://192.168.1.234:19000/pre/image/png/20251218/1766037553931765.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://192.168.1.234:19000/pre/image/png/20251218/1766037566230425.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://192.168.1.234:19000/pre/image/png/20251218/1766037578813795.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://192.168.1.234:19000/pre/image/png/20251218/1766037586373108.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://192.168.1.234:19000/pre/image/png/20251218/1766037601702397.png" /></div>
                    <div class="linkSectorItemTitle">介绍信查询</div>
                </NuxtLink>
            </div>
        </div>
        <!--皮肤2 该通栏只受皮肤影响，不受组件样式影响-->
        <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>
        <!--皮肤3 该通栏只受皮肤影响，不受组件样式影响-->
        <!--皮肤3-->
        <div v-if="skinId==3" class="linkSectorStyle1Box linkSectorStyle3Box">
            <div class="linkSectorItem bg1">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">
                    <div class="linkSectorItemImg">
                        <img src="https://img.bjzxtw.org.cn/pre/image/png/20251016/176060115664158.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="https://img.bjzxtw.org.cn/pre/image/png/20251010/1760060463218152.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="https://img.bjzxtw.org.cn/pre/image/png/20251010/1760060481827368.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="https://img.bjzxtw.org.cn/pre/image/png/20251010/1760060493277146.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="https://img.bjzxtw.org.cn/pre/image/png/20251010/1760060503211764.png" />
                    </div>
                    <div class="linkSectorItemTitle">介绍信查询</div>
                </NuxtLink>
            </div>
        </div>
        <!--皮肤4-->
        <div v-if="skinId==4"  class="linkSectorStyle4Box">
            <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">
                <div class="linkSectorItem bg1">
                    <div class="linkSectorItemTitle">人员查询</div>
                </div>
            </NuxtLink>
            <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html" target="_blank">
                <div class="linkSectorItem bg2">
                    <div class="linkSectorItemTitle">车辆查询</div>
                </div>
            </NuxtLink>
            <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html" target="_blank">
                <div class="linkSectorItem bg3">
                    <div class="linkSectorItemTitle">调研选题</div>
                </div>
            </NuxtLink>
            <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html" target="_blank">
                <div class="linkSectorItem bg4">
                    <div class="linkSectorItemTitle">地市中心</div>
                </div>
            </NuxtLink>
            <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html" target="_blank">
                <div class="linkSectorItem bg5">
                    <div class="linkSectorItemTitle">介绍信查询</div>
                </div>
            </NuxtLink>
        </div>
    </div>
</template>

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

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.linkSectorBox {
    width: 1200px;
    height: 230px;
    margin: 0 auto;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: content-box;
}
//基本样式 end ---------------------------------------->
//样式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://192.168.1.234:19000/pre/image/jpeg/20251218/176604891229964.jpg) no-repeat center center;}
    .bg2 {background: url(http://192.168.1.234:19000/pre/image/jpeg/20251218/1766048943651538.jpg) no-repeat center center;}
    .bg3 {background: url(http://192.168.1.234:19000/pre/image/jpeg/20251218/1766048952966036.jpg) no-repeat center center;}
    .bg4 {background: url(http://192.168.1.234:19000/pre/image/jpeg/20251218/1766048958299300.jpg) no-repeat center center;}
    .bg5 {background: url(http://192.168.1.234:19000/pre/image/png/20251218/1766049475430808.png) no-repeat center center;}
}
//样式2 end ---------------------------------------->
//样式3 start ---------------------------------------->
.linkSectorStyle3Box{
    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: #ffffff;
        border: 1px solid #e8e7e6;
        cursor: pointer;
        .linkSectorItemImg {
            text-align: center;
            border-bottom:1px solid #c82200;
            padding-bottom: 10px;
            height: 85px;
            img {
                display: block;
                margin: 20px auto;
            }
        }
        .linkSectorItemTitle {
            font-size: 16px;
            color:#000000;
            text-align: center;
            padding-top:30px;
        }
    }
}
//样式3 end ---------------------------------------->
//样式4 start ---------------------------------------->
.linkSectorStyle4Box {
    width: 1200px;
    height: 230px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    a{
        &:nth-child(1) {
            color:#5b7bb9;
        }
        &:nth-child(2) {
            color:#5bb7b5;
        }
        &:nth-child(3) {
            color:#b9775c;
        }
        &:nth-child(4) {
            color:#767299;
        }
        &:nth-child(5) {
            color:#986262;
        }
        .linkSectorItem {
            width: 210px;
            box-sizing: border-box;
            padding:70px 30px;
            cursor: pointer;
            text-align: center;
            .linkSectorItemTitle {
                font-size:22px;
                font-weight: bold;
            }
        }
    }
    .bg1 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/17606663709625.png) no-repeat center center;}
    .bg2 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760666387890517.png) no-repeat center center;}
    .bg3 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760666397238636.png) no-repeat center center;}
    .bg4 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760666408499485.png) no-repeat center center;}
    .bg5 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760666421127301.png) no-repeat center center;}
}
//样式4 end ---------------------------------------->
</style>