1.vue 7.5 KB

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