<template>
    <div class="linkSectorBox">
        <!--皮肤5 该通栏只受皮肤影响，不受组件样式影响-->
        <div class="topicon">
            <img src="https://img.bjzxtw.org.cn/pre/image/png/20251106/1762399582861225.png" alt="">
        </div>
        <div v-if="skinId == 5" class="linkSectorStyle5Box">
            <div class="linkSectorItem bg1">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">
                    <div class="linkSectorItemTitle">人员查询</div>
                </NuxtLink>
            </div>
            <div class="linkSectorItem bg2">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html" target="_blank">
                    <div class="linkSectorItemTitle">车辆查询</div>
                </NuxtLink>
            </div>
            <div class="linkSectorItem bg3">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html" target="_blank">
                    <div class="linkSectorItemTitle">调研选题</div>
                </NuxtLink>
            </div>
            <div class="linkSectorItem bg4">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html" target="_blank">
                    <div class="linkSectorItemTitle">地市中心</div>
                </NuxtLink>
            </div>
            <div class="linkSectorItem bg5">
                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html" target="_blank">
                    <div class="linkSectorItemTitle">介绍信查询</div>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

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

<style scoped lang="less">
.linkSectorBox {
    width: 1200px;
    height: 250px;
    margin: 0 auto;
    margin-bottom: 30px;
}

//样式5 start ---------------------------------------->
.topicon {
    width: 1200px;
    height: 70px;
    margin-bottom: 26px;
}

.linkSectorStyle5Box {
    width: 1196px;
    height: 150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .linkSectorItem {
        width: 224px;
        box-sizing: border-box;
        padding: 62px 30px;
        cursor: pointer;
        text-align: center;

        a {
            .linkSectorItemTitle {
                font-size: 22px;
                font-weight: bold;
            }
        }

        &:nth-child(1) a{
            color: #5b7bb9;
        }

        &:nth-child(2) a{
            color: #5bb7b5;
        }

        &:nth-child(3) a{
            color: #b9775c;
        }

        &:nth-child(4) a{
            color: #767299;
        }

        &:nth-child(5) a{
            color: #986262;
        }
    }

    .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;
    }
}

//样式5 end ----------------------------------------></style>