<template>
    <div class="index_1_top_box_main">
        <div class="index_1_top_box">
            <h4 class="index_1_top_h4">
                <span>查询服务</span>
            </h4>
        </div>
        <div class="index_1_ul clearfix" v-if="skinId == 7">
            <div class="index_1_li">
                <div class="index_1_li_img_tip">
                    <div class="index_1_li_img_box"></div>
                </div>
                <div class="index_1_li_head">人员查询</div>
                <div class="index_1_li_text">全国政务信息一体化办公室</div>
                <div class="index_1_li_btn_box">
                    <div class="index_1_li_btn">
                        <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">点击查询</NuxtLink>
                    </div>
                </div>
            </div>
            <div class="index_1_li">
                <div class="index_1_li_img_tip">
                    <div class="index_1_li_img_box"></div>
                </div>
                <div class="index_1_li_head">车辆查询</div>
                <div class="index_1_li_text">全国政务信息一体化办公室</div>
                <div class="index_1_li_btn_box">
                    <div class="index_1_li_btn">
                        <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html" target="_blank">
                            点击查询
                        </NuxtLink>
                    </div>
                </div>
            </div>
            <div class="index_1_li">
                <div class="index_1_li_img_tip">
                    <div class="index_1_li_img_box"></div>
                </div>
                <div class="index_1_li_head">调研选题</div>
                <div class="index_1_li_text">全国政务信息一体化办公室</div>
                <div class="index_1_li_btn_box">
                    <div class="index_1_li_btn">
                        <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html" target="_blank">
                            点击查询 
                        </NuxtLink>
                    </div>
                </div>
            </div>
            <div class="index_1_li">
                <div class="index_1_li_img_tip">
                    <div class="index_1_li_img_box"></div>
                </div>
                <div class="index_1_li_head">地市中心</div>
                <div class="index_1_li_text">全国政务信息一体化办公室</div>
                <div class="index_1_li_btn_box">
                    <div class="index_1_li_btn">
                        <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html" target="_blank">
                            点击查询
                        </NuxtLink>
                    </div>
                </div>
            </div>
            <div class="index_1_li">
                <div class="index_1_li_img_tip">
                    <div class="index_1_li_img_box"></div>
                </div>
                <div class="index_1_li_head">介绍信查询</div>
                <div class="index_1_li_text">全国政务信息一体化办公室</div>
                <div class="index_1_li_btn_box">
                    <div class="index_1_li_btn">
                        <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html" target="_blank">
                            点击查询
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

<style lang="less" scoped>
//样式7 start ---------------------------------------->
.index_1_top_box_main {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.index_1_top_box {
    height: 42px;
    text-align: center;
    margin: 24px auto 24px;
}
.index_1_top_h4 {
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 0px 20px;
    margin: 0px auto;
}
.index_1_top_h4::after {
    content: '';
    position: absolute;
    left: -440px;
    top: 14px;
    height: 20px;
    width: 440px;
    background: url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px;
    background-size: auto 100%;
}
.index_1_top_h4::before {
    content: '';
    position: absolute;
    right: -440px;
    top: 14px;
    height: 20px;
    width: 440px;
    background: url(http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px;
    background-size: auto 100%;
}
.index_1_top_box>* {
    text-align: center;
    height: 42px;
    line-height: 42px;
    color: #333;
    font-size: 32px;
    font-weight: normal;
}
.index_1_ul {
    overflow: hidden;
}
.index_1_li {
    float: left;
    width: 210px;
    height: 227px;
    margin-right: 37px;
    box-sizing: border-box;
    background: url(http://192.168.1.234:19000/pre/image/png/20251223/1766472116169936.png) no-repeat left 0px;
    background-size: 100% 100%;
}
.index_1_li:nth-last-of-type(1) {
    margin-right: 0px;
    float: right;
}
.index_1_li:nth-last-of-type(2) {
    margin-right: 0px;
}
.index_1_li a {
    display: block;
    width: 100%;
    height: 100%;
}
.index_1_li_img_tip {
    overflow: hidden;
}
.index_1_li_img_box {
    float: right;
    width: 42px;
    height: 42px;
    margin: 20px 20px 0px 0px;
    background: no-repeat center 0px;
    background-size: auto 100%;
}
.index_1_li_head {
    height: 21px;
    line-height: 21px;
    color: #333;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 30px;
    margin-top: 8px;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.index_1_li_text {
    height: 13px;
    line-height: 13px;
    color: #999;
    font-size: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 30px;
    margin-top: 13px;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.index_1_li_btn_box {
    text-align: center;
    margin-top: 43px;
}
.index_1_li_btn {
    line-height: 30px;
    height: 30px;
    color: #A72213;
    font-size: 10px;
    display: inline-block;
    padding: 0px 20px;
    border: solid 1px #A72213;
    border-radius: 15px;
    text-align: center;
    a {
        color: #A72213;
    }
}
.index_1_li:nth-of-type(1) .index_1_li_img_box {
    background-image: url(http://192.168.1.234:19000/pre/image/png/20251223/1766472547424308.png);
}
.index_1_li:nth-of-type(2) .index_1_li_img_box {
    background-image: url(http://192.168.1.234:19000/pre/image/png/20251223/1766472569511503.png);
}
.index_1_li:nth-of-type(3) .index_1_li_img_box {
    background-image: url(http://192.168.1.234:19000/pre/image/png/20251223/176647258751430.png);
}
.index_1_li:nth-of-type(4) .index_1_li_img_box {
    background-image: url(http://192.168.1.234:19000/pre/image/png/20251223/1766472628882180.png);
}
.index_1_li:nth-of-type(5) .index_1_li_img_box {
    background-image: url(http://192.168.1.234:19000/pre/image/png/20251223/1766472653772806.png);
}
//样式7 end ---------------------------------------->
</style>
