1.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <template>
  2. <div class="headLineStyle1" v-if="skinId=='1'">
  3. <div class="headLineTitle" v-if="templateData.length>0">
  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="skinId=='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. skinId:String,//组件样式
  112. templateData:Array,//新闻数据
  113. });
  114. //组件样式1 start ---------------------------------------->
  115. console.log(props.templateData)
  116. const component_style1_News1 = ref({});
  117. const component_style1_News2Array = ref([]);
  118. component_style1_News1.value = props.templateData[0];
  119. component_style1_News2Array.value = props.templateData.slice(1,4);
  120. //组件样式1 end ---------------------------------------->
  121. //组件样式2 start ---------------------------------------->
  122. const component_style2_News1 = ref({})
  123. const component_style2_News1Array = ref([])
  124. const component_style2_News2 = ref({})
  125. const component_style2_News2Array = ref([])
  126. const component_style2_News3 = ref({})
  127. const component_style2_News3Array = ref([])
  128. if(props.templateData.length>0){
  129. if(props.templateData.length>0){
  130. component_style2_News1.value = props.templateData[0]
  131. component_style2_News1Array.value = props.templateData.slice(1,4)
  132. }
  133. if(props.templateData.length>4){
  134. component_style2_News2.value = props.templateData[4]
  135. component_style2_News2Array.value = props.templateData.slice(5,8)
  136. }
  137. if(props.templateData.length>8){
  138. component_style2_News3.value = props.templateData[8]
  139. component_style2_News3Array.value = props.templateData.slice(9,12)
  140. }
  141. }
  142. const activeIndex = ref(0);
  143. const sliderStyle = computed(() => {
  144. // 每个headLineTitleBox的高度是70px + 间距30px = 100px
  145. const translateY = -(activeIndex.value * 100);
  146. return {
  147. transform: `translateY(${translateY}px)`,
  148. transition: 'transform 0.3s ease-in-out'
  149. };
  150. });
  151. const setActive = (index) => {
  152. activeIndex.value = index;
  153. };
  154. //组件样式2 end ---------------------------------------->
  155. </script>
  156. <style lang="less" scoped>
  157. //皮肤1 样式1 start---------------------------------------->
  158. .headLineStyle1 {
  159. width: 1200px;
  160. height: 110px;
  161. margin: 0 auto;
  162. box-sizing: border-box;
  163. padding: 0 100px 0 100px;
  164. .headLineTitle {
  165. display: flex;
  166. align-items: center;
  167. justify-content: center;
  168. margin-bottom: 20px;
  169. a {
  170. font-weight: bold;
  171. font-size: 30px;
  172. color: #004564;
  173. }
  174. img {
  175. margin-right: 20px;
  176. }
  177. }
  178. .headLineContent{
  179. display: flex;
  180. align-items: center;
  181. justify-content: center;
  182. div {
  183. margin-right: 40px;
  184. overflow: hidden;
  185. text-overflow: ellipsis;
  186. white-space: nowrap;
  187. a {
  188. font-size: 18px;
  189. color:#333333;
  190. }
  191. &:last-child {
  192. margin-right: 0;
  193. }
  194. }
  195. }
  196. }
  197. //皮肤1 样式1 end---------------------------------------->
  198. //皮肤2 样式1 start---------------------------------------->
  199. .headLineStyle1_skin2 {
  200. border:1px solid #E4E4E4;
  201. width: 1200px;
  202. height: 110px;
  203. box-sizing: border-box;
  204. padding:0 15px 0 40px;
  205. display: flex;
  206. align-items: center;
  207. justify-content: space-between;
  208. .headLineContentBox {
  209. width: 1000px;
  210. height: 70px;
  211. overflow: hidden;
  212. position: relative;
  213. .headLineSlider {
  214. display: flex;
  215. flex-direction: column; // 改为垂直方向
  216. width: 100%;
  217. height: 210px; // 3个titleBox,每个70px高
  218. }
  219. }
  220. .headLineTitleBox {
  221. text-align: center;
  222. height: 70px; // 明确设置高度
  223. width: 100%;
  224. margin-bottom: 30px;
  225. flex-shrink: 0; // 防止收缩
  226. display: flex;
  227. flex-direction: column;
  228. justify-content: center;
  229. .headLineTop {
  230. margin-bottom: 8px;
  231. font-weight: bold;
  232. img {
  233. display: block;
  234. width: 350px;
  235. height: 245px;
  236. }
  237. a {
  238. font-size: 30px;
  239. color:#A91B33;
  240. }
  241. }
  242. .headLineBottom {
  243. display: flex;
  244. align-items: center;
  245. justify-content: center;
  246. div {
  247. width: 32%;
  248. margin-right: 30px;
  249. white-space: nowrap;
  250. overflow: hidden;
  251. text-overflow: ellipsis;
  252. a {
  253. font-size: 18px;
  254. color:#333333;
  255. }
  256. &:last-child {
  257. margin-right: 0;
  258. }
  259. }
  260. }
  261. }
  262. .headLineIcon {
  263. div {
  264. width: 10px;
  265. height: 10px;
  266. background: #EDEDED;
  267. margin-bottom: 10px;
  268. cursor: pointer;
  269. transition: background 0.3s ease;
  270. &:last-child {
  271. margin-bottom: 0;
  272. }
  273. &.active {
  274. background: #A91B33;
  275. }
  276. &:hover {
  277. background: #A91B33;
  278. }
  279. }
  280. }
  281. }
  282. //皮肤2 样式1 start---------------------------------------->
  283. </style>