123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <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
- templateData:Object,//新闻数据
- });
- </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>
|