1.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <div class="linkSectorBox">
  3. <div v-if="skinId==1" class="linkSectorStyle1Box">
  4. <div class="linkSectorItem bg1">
  5. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">
  6. <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026862529548.png" /></div>
  7. <div class="linkSectorItemTitle">人员查询</div>
  8. </NuxtLink>
  9. </div>
  10. <div class="linkSectorItem bg1">
  11. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html" target="_blank">
  12. <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026870493018.png" /></div>
  13. <div class="linkSectorItemTitle">车辆查询</div>
  14. </NuxtLink>
  15. </div>
  16. <div class="linkSectorItem bg1">
  17. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html" target="_blank">
  18. <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026884699420.png" /></div>
  19. <div class="linkSectorItemTitle">调研选题</div>
  20. </NuxtLink>
  21. </div>
  22. <div class="linkSectorItem bg1">
  23. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html" target="_blank">
  24. <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026896833808.png" /></div>
  25. <div class="linkSectorItemTitle">地市中心</div>
  26. </NuxtLink>
  27. </div>
  28. <div class="linkSectorItem bg1">
  29. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html" target="_blank">
  30. <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/175202690385632.png" /></div>
  31. <div class="linkSectorItemTitle">介绍信查询</div>
  32. </NuxtLink>
  33. </div>
  34. </div>
  35. <div v-if="skinId==2" class="linkSectorStyle2Box">
  36. <div class="linkSectorItem bg1">
  37. <div class="linkSectorItemTitle">人员查询</div>
  38. <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
  39. <div class="linkSectorItemBtn">
  40. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">
  41. 点击查询
  42. </NuxtLink>
  43. </div>
  44. </div>
  45. <div class="linkSectorItem bg2">
  46. <div class="linkSectorItemTitle">车辆查询</div>
  47. <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
  48. <div class="linkSectorItemBtn">
  49. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html" target="_blank">
  50. 点击查询
  51. </NuxtLink>
  52. </div>
  53. </div>
  54. <div class="linkSectorItem bg3">
  55. <div class="linkSectorItemTitle">调研选题</div>
  56. <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
  57. <div class="linkSectorItemBtn">
  58. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html" target="_blank">
  59. 点击查询
  60. </NuxtLink>
  61. </div>
  62. </div>
  63. <div class="linkSectorItem bg4">
  64. <div class="linkSectorItemTitle">地市中心</div>
  65. <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
  66. <div class="linkSectorItemBtn">
  67. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html" target="_blank">
  68. 点击查询
  69. </NuxtLink>
  70. </div>
  71. </div>
  72. <div class="linkSectorItem bg5">
  73. <div class="linkSectorItemTitle">介绍信查询</div>
  74. <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
  75. <div class="linkSectorItemBtn">
  76. <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html" target="_blank">
  77. 点击查询
  78. </NuxtLink>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. </template>
  84. <script setup>
  85. const props = defineProps({
  86. skinId: Number,//皮肤id
  87. });
  88. </script>
  89. <style lang="less" scoped>
  90. .linkSectorBox {
  91. width: 1200px;
  92. height: 230px;
  93. margin: 0 auto;
  94. margin-bottom: 30px;
  95. display: flex;
  96. align-items: center;
  97. justify-content: space-between;
  98. box-sizing: content-box;
  99. }
  100. //样式1 start ---------------------------------------->
  101. .linkSectorStyle1Box {
  102. width: 1200px;
  103. height: 230px;
  104. margin: 0 auto;
  105. display: flex;
  106. align-items: center;
  107. justify-content: space-between;
  108. .linkSectorItem {
  109. width: 210px;
  110. height: 230px;
  111. box-sizing: border-box;
  112. padding:30px;
  113. background: #F9FAFB;
  114. cursor: pointer;
  115. .linkSectorItemImg {
  116. text-align: center;
  117. border-bottom:1px solid #D3D3D3;
  118. padding-bottom: 10px;
  119. height: 85px;
  120. img {
  121. display: block;
  122. margin: 20px auto;
  123. }
  124. }
  125. .linkSectorItemTitle {
  126. font-size: 16px;
  127. color:#333333;
  128. text-align: center;
  129. padding-top:30px;
  130. }
  131. }
  132. }
  133. //样式1 end ---------------------------------------->
  134. //样式2 start ---------------------------------------->
  135. .linkSectorStyle2Box {
  136. width: 1200px;
  137. height: 230px;
  138. margin: 0 auto;
  139. display: flex;
  140. align-items: center;
  141. justify-content: space-between;
  142. .linkSectorItem {
  143. width: 210px;
  144. height: 230px;
  145. box-sizing: border-box;
  146. padding:70px 30px;
  147. cursor: pointer;
  148. .linkSectorItemTitle {
  149. font-size:16px;
  150. color:#333333;
  151. margin-bottom: 13px;
  152. }
  153. .linkSectorItemContent {
  154. font-size:12px;
  155. color:#999999;
  156. margin-bottom: 43px;
  157. }
  158. .linkSectorItemBtn {
  159. width: 80px;
  160. height: 30px;
  161. line-height: 30px;
  162. text-align: center;
  163. border:1px solid #A91B33;
  164. color:#A91B33;
  165. border-radius: 15px;
  166. font-size: 12px;
  167. margin: 0 auto;
  168. cursor: pointer;
  169. a {
  170. color:#A91B33;
  171. }
  172. }
  173. }
  174. .bg1 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922702993953.png) no-repeat center center;}
  175. .bg2 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922720998099.png) no-repeat center center;}
  176. .bg3 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922727860324.png) no-repeat center center;}
  177. .bg4 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922744808118.png) no-repeat center center;}
  178. .bg5 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922748574101.png) no-repeat center center;}
  179. }
  180. //样式2 end ---------------------------------------->
  181. </style>