1.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. <template>
  2. <div class="headLineStyle1" v-if="style=='1'">
  3. <div class="headLineTitle">
  4. <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
  5. <NuxtLink
  6. :href="getLinkPathDetail(component_style1_News1)"
  7. :title="component_style1_News1.title"
  8. :target="component_style1_News1.islink == 1 ? '_blank' : '_self'"
  9. >
  10. {{ component_style1_News1.title }}
  11. </NuxtLink>
  12. </div>
  13. <div class="headLineContent">
  14. <div v-for="item in component_style1_News2Array" :key="item.id">
  15. <NuxtLink
  16. :href="getLinkPathDetail(item)"
  17. :title="item.title"
  18. :target="item.islink == 1 ? '_blank' : '_self'"
  19. >
  20. {{ item.title }}
  21. </NuxtLink>
  22. </div>
  23. </div>
  24. </div>
  25. <div class="headLineStyle1_skin2" v-if="style=='2'">
  26. <div class="headTip">
  27. <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750901450165042.jpg">
  28. </div>
  29. <div class="headLineContentBox" ref="contentBox">
  30. <div class="headLineSlider" :style="sliderStyle" v-if="templateData.length > 0">
  31. <div class="headLineTitleBox">
  32. <div class="headLineTop">
  33. <NuxtLink
  34. :href="getLinkPathDetail(component_style2_News1)"
  35. :title="component_style2_News1.title"
  36. :target="component_style2_News1.islink == 1 ? '_blank' : '_self'"
  37. >
  38. {{ component_style2_News1.title }}
  39. </NuxtLink>
  40. </div>
  41. <div class="headLineBottom">
  42. <div v-for="item in component_style2_News1Array" :key="item.id">
  43. <NuxtLink
  44. :href="getLinkPathDetail(item)"
  45. :title="item.title"
  46. :target="item.islink == 1 ? '_blank' : '_self'"
  47. >
  48. {{ item.title }}
  49. </NuxtLink>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="headLineTitleBox" v-if="templateData.length > 4">
  54. <div class="headLineTop">
  55. <NuxtLink
  56. :href="getLinkPathDetail(component_style2_News2)"
  57. :title="component_style2_News2.title"
  58. :target="component_style2_News2.islink == 1 ? '_blank' : '_self'"
  59. >
  60. {{ component_style2_News2.title }}
  61. </NuxtLink>
  62. </div>
  63. <div class="headLineBottom">
  64. <div v-for="item in component_style2_News2Array" :key="item.id">
  65. <NuxtLink
  66. :href="getLinkPathDetail(item)"
  67. :title="item.title"
  68. :target="item.islink == 1 ? '_blank' : '_self'"
  69. >
  70. {{ item.title }}
  71. </NuxtLink>
  72. </div>
  73. </div>
  74. </div>
  75. <div class="headLineTitleBox" v-if="templateData.length > 8">
  76. <div class="headLineTop">
  77. <NuxtLink
  78. :href="getLinkPathDetail(component_style2_News3)"
  79. :title="component_style2_News3.title"
  80. :target="component_style2_News3.islink == 1 ? '_blank' : '_self'"
  81. >
  82. {{ component_style2_News3.title }}
  83. </NuxtLink>
  84. </div>
  85. <div class="headLineBottom">
  86. <div v-for="item in component_style2_News3Array" :key="item.id">
  87. <NuxtLink
  88. :href="getLinkPathDetail(item)"
  89. :title="item.title"
  90. :target="item.islink == 1 ? '_blank' : '_self'"
  91. >
  92. {{ item.title }}
  93. </NuxtLink>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <div class="headLineIcon">
  100. <div @mouseover="setActive(0)" :class="{active: activeIndex === 0}" v-if="templateData.length > 0"></div>
  101. <div @mouseover="setActive(1)" :class="{active: activeIndex === 1}" v-if="templateData.length > 4"></div>
  102. <div @mouseover="setActive(2)" :class="{active: activeIndex === 2}" v-if="templateData.length > 8"></div>
  103. </div>
  104. </div>
  105. </template>
  106. <script setup>
  107. //引入vue
  108. import {ref} from 'vue';
  109. //获得新闻数据
  110. const props = defineProps({
  111. style:String,//组件样式
  112. templateData:Array,//新闻数据
  113. });
  114. //组件样式1 start ---------------------------------------->
  115. const component_style1_News1 = ref({});
  116. const component_style1_News2Array = ref([]);
  117. component_style1_News1.value = props.templateData[0];
  118. component_style1_News2Array.value = props.templateData.slice(1,4);
  119. //组件样式1 end ---------------------------------------->
  120. //组件样式2 start ---------------------------------------->
  121. const component_style2_News1 = ref({})
  122. const component_style2_News1Array = ref([])
  123. const component_style2_News2 = ref({})
  124. const component_style2_News2Array = ref([])
  125. const component_style2_News3 = ref({})
  126. const component_style2_News3Array = ref([])
  127. if(props.templateData.length>0){
  128. if(props.templateData.length>0){
  129. component_style2_News1.value = props.templateData[0]
  130. component_style2_News1Array.value = props.templateData.slice(1,4)
  131. }
  132. if(props.templateData.length>4){
  133. component_style2_News2.value = props.templateData[4]
  134. component_style2_News2Array.value = props.templateData.slice(5,8)
  135. }
  136. if(props.templateData.length>8){
  137. component_style2_News3.value = props.templateData[8]
  138. component_style2_News3Array.value = props.templateData.slice(9,12)
  139. }
  140. }
  141. const activeIndex = ref(0);
  142. const sliderStyle = computed(() => {
  143. // 每个headLineTitleBox的高度是70px + 间距30px = 100px
  144. const translateY = -(activeIndex.value * 100);
  145. return {
  146. transform: `translateY(${translateY}px)`,
  147. transition: 'transform 0.3s ease-in-out'
  148. };
  149. });
  150. const setActive = (index) => {
  151. activeIndex.value = index;
  152. };
  153. //组件样式2 end ---------------------------------------->
  154. </script>
  155. <style lang="less">
  156. //皮肤1 样式1 start---------------------------------------->
  157. .headLineStyle1 {
  158. width: 1200px;
  159. height: 140px;
  160. margin: 0 auto;
  161. box-sizing: border-box;
  162. padding: 30px 100px 30px 100px;
  163. .headLineTitle {
  164. display: flex;
  165. align-items: center;
  166. justify-content: center;
  167. margin-bottom: 10px;
  168. a {
  169. font-weight: bold;
  170. font-size: 30px;
  171. color: #004564;
  172. }
  173. img {
  174. margin-right: 20px;
  175. }
  176. }
  177. .headLineContent{
  178. display: flex;
  179. align-items: center;
  180. justify-content: center;
  181. div {
  182. margin-right: 40px;
  183. overflow: hidden;
  184. text-overflow: ellipsis;
  185. white-space: nowrap;
  186. a {
  187. font-size: 18px;
  188. color:#333333;
  189. }
  190. &:last-child {
  191. margin-right: 0;
  192. }
  193. }
  194. }
  195. }
  196. //皮肤1 样式1 end---------------------------------------->
  197. //皮肤2 样式1 start---------------------------------------->
  198. .headLineStyle1_skin2 {
  199. border:1px solid #E4E4E4;
  200. width: 1200px;
  201. height: 140px;
  202. box-sizing: border-box;
  203. padding:32px 15px 32px 40px;
  204. display: flex;
  205. align-items: center;
  206. justify-content: space-between;
  207. .headLineContentBox {
  208. width: 1000px;
  209. height: 70px;
  210. overflow: hidden;
  211. position: relative;
  212. .headLineSlider {
  213. display: flex;
  214. flex-direction: column; // 改为垂直方向
  215. width: 100%;
  216. height: 210px; // 3个titleBox,每个70px高
  217. }
  218. }
  219. .headLineTitleBox {
  220. text-align: center;
  221. height: 70px; // 明确设置高度
  222. width: 100%;
  223. margin-bottom: 30px;
  224. flex-shrink: 0; // 防止收缩
  225. display: flex;
  226. flex-direction: column;
  227. justify-content: center;
  228. .headLineTop {
  229. margin-bottom: 8px;
  230. font-weight: bold;
  231. a {
  232. font-size: 30px;
  233. color:#A91B33;
  234. }
  235. }
  236. .headLineBottom {
  237. display: flex;
  238. align-items: center;
  239. justify-content: center;
  240. div {
  241. width: 32%;
  242. margin-right: 30px;
  243. white-space: nowrap;
  244. overflow: hidden;
  245. text-overflow: ellipsis;
  246. a {
  247. font-size: 18px;
  248. color:#333333;
  249. }
  250. &:last-child {
  251. margin-right: 0;
  252. }
  253. }
  254. }
  255. }
  256. .headLineIcon {
  257. div {
  258. width: 10px;
  259. height: 10px;
  260. background: #EDEDED;
  261. margin-bottom: 10px;
  262. cursor: pointer;
  263. transition: background 0.3s ease;
  264. &:last-child {
  265. margin-bottom: 0;
  266. }
  267. &.active {
  268. background: #A91B33;
  269. }
  270. &:hover {
  271. background: #A91B33;
  272. }
  273. }
  274. }
  275. }
  276. //皮肤2 样式1 start---------------------------------------->
  277. </style>