1.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775
  1. <template>
  2. <div class="listNewsBox">
  3. <div class="listNewsTitle">
  4. <NuxtLink v-if="titleLink.cid" :href="getLinkPath(titleLink)" :title="titleLink.alias">
  5. <div>{{ titleLink.alias }}</div>
  6. </NuxtLink>
  7. </div>
  8. <!--样式1-->
  9. <div class="listNewsContent" v-if="componentStyle == 1">
  10. <div class="contentLeft">
  11. <div class="leftTop">
  12. <div class="photo">
  13. <div v-for="(item, index) in component_style1_News1Array_img_1">
  14. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  15. :target="item.islink == 1 ? '_blank' : '_self'">
  16. <img :src="item.imgurl" v-if="activeIndex == index">
  17. </NuxtLink>
  18. </div>
  19. </div>
  20. <div class="text">
  21. <div v-for="(item, index) in component_style1_News1Array_img_1"
  22. :class="{ 'active': activeIndex == index }">
  23. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  24. @mouseenter="activeIndex = index" :target="item.islink == 1 ? '_blank' : '_self'">
  25. {{ item.title }}
  26. </NuxtLink>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="leftBottom">
  31. <div v-for="item in component_style1_News1Array_text_1">
  32. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  33. :target="item.islink == 1 ? '_blank' : '_self'">
  34. {{ item.title }}
  35. </NuxtLink>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="contentLeft">
  40. <div class="leftTop">
  41. <div class="photo">
  42. <div v-for="(item, index) in component_style1_News1Array_img_2">
  43. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  44. :target="item.islink == 1 ? '_blank' : '_self'">
  45. <img :src="item.imgurl" v-if="activeIndex1 == index">
  46. </NuxtLink>
  47. </div>
  48. </div>
  49. <div class="text">
  50. <div v-for="(item, index) in component_style1_News1Array_img_2"
  51. :class="{ 'active': activeIndex1 == index }">
  52. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  53. @mouseenter="activeIndex1 = index" :target="item.islink == 1 ? '_blank' : '_self'">
  54. {{ item.title }}
  55. </NuxtLink>
  56. </div>
  57. </div>
  58. </div>
  59. <div class="leftBottom">
  60. <div v-for="item in component_style1_News1Array_text_2">
  61. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  62. :target="item.islink == 1 ? '_blank' : '_self'">
  63. {{ item.title }}
  64. </NuxtLink>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <!--样式2-->
  70. <div class="listNewsContent style2" v-if="componentStyle == 2">
  71. <div class="contentLeft">
  72. <div class="leftTop">
  73. <div class="photo">
  74. <div v-for="(item, index) in component_style1_News1Array_img_1">
  75. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  76. :target="item.islink == 1 ? '_blank' : '_self'">
  77. <img :src="item.imgurl" v-if="activeIndex == index">
  78. </NuxtLink>
  79. </div>
  80. </div>
  81. <div class="text">
  82. <div v-for="(item, index) in component_style1_News1Array_img_1"
  83. :class="{ 'active': activeIndex == index }">
  84. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  85. @mouseenter="activeIndex = index" :target="item.islink == 1 ? '_blank' : '_self'">
  86. {{ item.title }}
  87. </NuxtLink>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="leftBottom">
  92. <div v-for="item in component_style1_News1Array_text_1">
  93. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  94. :target="item.islink == 1 ? '_blank' : '_self'">
  95. {{ item.title }}
  96. </NuxtLink>
  97. </div>
  98. </div>
  99. </div>
  100. <div class="contentLeft">
  101. <div class="leftTop">
  102. <div class="photo">
  103. <div v-for="(item, index) in component_style1_News1Array_img_2">
  104. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  105. :target="item.islink == 1 ? '_blank' : '_self'">
  106. <img :src="item.imgurl" v-if="activeIndex1 == index">
  107. </NuxtLink>
  108. </div>
  109. </div>
  110. <div class="text">
  111. <div v-for="(item, index) in component_style1_News1Array_img_2"
  112. :class="{ 'active': activeIndex1 == index }">
  113. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  114. @mouseenter="activeIndex1 = index" :target="item.islink == 1 ? '_blank' : '_self'">
  115. {{ item.title }}
  116. </NuxtLink>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="leftBottom">
  121. <div v-for="item in component_style1_News1Array_text_2">
  122. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  123. :target="item.islink == 1 ? '_blank' : '_self'">
  124. {{ item.title }}
  125. </NuxtLink>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. <!--样式3-->
  131. <div class="listNewsContent style3" v-if="componentStyle == 3">
  132. <div class="contentLeft">
  133. <div class="leftBottom">
  134. <div v-for="item in component_style1_News1Array_text_1">
  135. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  136. :target="item.islink == 1 ? '_blank' : '_self'">
  137. {{ item.title }}
  138. </NuxtLink>
  139. </div>
  140. </div>
  141. <div class="leftTop">
  142. <div class="photo">
  143. <div v-for="(item, index) in component_style1_News1Array_img_1">
  144. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  145. :target="item.islink == 1 ? '_blank' : '_self'">
  146. <img :src="item.imgurl" v-if="activeIndex == index">
  147. </NuxtLink>
  148. </div>
  149. </div>
  150. <div class="text">
  151. <div v-for="(item, index) in component_style1_News1Array_img_1"
  152. :class="{ 'active': activeIndex == index }">
  153. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  154. @mouseenter="activeIndex = index" :target="item.islink == 1 ? '_blank' : '_self'">
  155. {{ item.title }}
  156. </NuxtLink>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. <div class="contentLeft">
  162. <div class="leftBottom">
  163. <div v-for="item in component_style1_News1Array_text_2">
  164. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  165. :target="item.islink == 1 ? '_blank' : '_self'">
  166. {{ item.title }}
  167. </NuxtLink>
  168. </div>
  169. </div>
  170. <div class="leftTop">
  171. <div class="photo">
  172. <div v-for="(item, index) in component_style1_News1Array_img_2">
  173. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  174. :target="item.islink == 1 ? '_blank' : '_self'">
  175. <img :src="item.imgurl" v-if="activeIndex1 == index">
  176. </NuxtLink>
  177. </div>
  178. </div>
  179. <div class="text">
  180. <div v-for="(item, index) in component_style1_News1Array_img_2"
  181. :class="{ 'active': activeIndex1 == index }">
  182. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  183. @mouseenter="activeIndex1 = index" :target="item.islink == 1 ? '_blank' : '_self'">
  184. {{ item.title }}
  185. </NuxtLink>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. <!--样式4-->
  192. <div class="listNewsContent style4" v-if="componentStyle == 4">
  193. <div class="contentLeft">
  194. <div class="leftBottom">
  195. <div v-for="item in component_style1_News1Array_text_1">
  196. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  197. :target="item.islink == 1 ? '_blank' : '_self'">
  198. {{ item.title }}
  199. </NuxtLink>
  200. </div>
  201. </div>
  202. <div class="leftTop">
  203. <div class="photo">
  204. <div v-for="(item, index) in component_style1_News1Array_img_1">
  205. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  206. :target="item.islink == 1 ? '_blank' : '_self'">
  207. <img :src="item.imgurl" v-if="activeIndex == index">
  208. </NuxtLink>
  209. </div>
  210. </div>
  211. <div class="text">
  212. <div v-for="(item, index) in component_style1_News1Array_img_1"
  213. :class="{ 'active': activeIndex == index }">
  214. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  215. @mouseenter="activeIndex = index" :target="item.islink == 1 ? '_blank' : '_self'">
  216. {{ item.title }}
  217. </NuxtLink>
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  222. <div class="contentLeft">
  223. <div class="leftBottom">
  224. <div v-for="item in component_style1_News1Array_text_2">
  225. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  226. :target="item.islink == 1 ? '_blank' : '_self'">
  227. {{ item.title }}
  228. </NuxtLink>
  229. </div>
  230. </div>
  231. <div class="leftTop">
  232. <div class="photo">
  233. <div v-for="(item, index) in component_style1_News1Array_img_2">
  234. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  235. :target="item.islink == 1 ? '_blank' : '_self'">
  236. <img :src="item.imgurl" v-if="activeIndex1 == index">
  237. </NuxtLink>
  238. </div>
  239. </div>
  240. <div class="text">
  241. <div v-for="(item, index) in component_style1_News1Array_img_2"
  242. :class="{ 'active': activeIndex1 == index }">
  243. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  244. @mouseenter="activeIndex1 = index" :target="item.islink == 1 ? '_blank' : '_self'">
  245. {{ item.title }}
  246. </NuxtLink>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. <!--样式5-->
  253. <div class="listNewsContent style5" v-if="componentStyle == 5">
  254. <div class="contentLeft">
  255. <div class="leftTop">
  256. <div class="photo">
  257. <div v-for="(item, index) in component_style1_News1Array_img_1">
  258. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  259. :target="item.islink == 1 ? '_blank' : '_self'">
  260. <img :src="item.imgurl" v-if="activeIndex == index">
  261. </NuxtLink>
  262. </div>
  263. </div>
  264. <div class="text">
  265. <div v-for="(item, index) in component_style1_News1Array_img_1"
  266. :class="{ 'active': activeIndex == index }">
  267. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  268. @mouseenter="activeIndex = index" :target="item.islink == 1 ? '_blank' : '_self'">
  269. {{ item.title }}
  270. </NuxtLink>
  271. </div>
  272. </div>
  273. </div>
  274. <div class="leftBottom">
  275. <div v-for="item in component_style1_News1Array_text_1">
  276. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  277. :target="item.islink == 1 ? '_blank' : '_self'">
  278. {{ item.title }}
  279. </NuxtLink>
  280. </div>
  281. </div>
  282. </div>
  283. <div class="contentLeft">
  284. <div class="leftTop">
  285. <div class="photo">
  286. <div v-for="(item, index) in component_style1_News1Array_img_2">
  287. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  288. :target="item.islink == 1 ? '_blank' : '_self'">
  289. <img :src="item.imgurl" v-if="activeIndex1 == index">
  290. </NuxtLink>
  291. </div>
  292. </div>
  293. <div class="text">
  294. <div v-for="(item, index) in component_style1_News1Array_img_2"
  295. :class="{ 'active': activeIndex1 == index }">
  296. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  297. @mouseenter="activeIndex1 = index" :target="item.islink == 1 ? '_blank' : '_self'">
  298. {{ item.title }}
  299. </NuxtLink>
  300. </div>
  301. </div>
  302. </div>
  303. <div class="leftBottom">
  304. <div v-for="item in component_style1_News1Array_text_2">
  305. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  306. :target="item.islink == 1 ? '_blank' : '_self'">
  307. {{ item.title }}
  308. </NuxtLink>
  309. </div>
  310. </div>
  311. </div>
  312. </div>
  313. <!--样式6-->
  314. <div class="listNewsContent style6" v-if="componentStyle == 6">
  315. <div class="contentLeft">
  316. <div class="leftTop">
  317. <div class="photo">
  318. <div v-for="(item, index) in component_style1_News1Array_img_1">
  319. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  320. :target="item.islink == 1 ? '_blank' : '_self'">
  321. <img :src="item.imgurl" v-if="activeIndex == index">
  322. </NuxtLink>
  323. </div>
  324. </div>
  325. <div class="text">
  326. <div v-for="(item, index) in component_style1_News1Array_img_1"
  327. :class="{ 'active': activeIndex == index }">
  328. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  329. @mouseenter="activeIndex = index" :target="item.islink == 1 ? '_blank' : '_self'">
  330. {{ item.title }}
  331. </NuxtLink>
  332. </div>
  333. </div>
  334. </div>
  335. <div class="leftBottom">
  336. <div v-for="item in component_style1_News1Array_text_1">
  337. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  338. :target="item.islink == 1 ? '_blank' : '_self'">
  339. {{ item.title }}
  340. </NuxtLink>
  341. </div>
  342. </div>
  343. </div>
  344. <div class="contentLeft">
  345. <div class="leftTop">
  346. <div class="photo">
  347. <div v-for="(item, index) in component_style1_News1Array_img_2">
  348. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  349. :target="item.islink == 1 ? '_blank' : '_self'">
  350. <img :src="item.imgurl" v-if="activeIndex1 == index">
  351. </NuxtLink>
  352. </div>
  353. </div>
  354. <div class="text">
  355. <div v-for="(item, index) in component_style1_News1Array_img_2"
  356. :class="{ 'active': activeIndex1 == index }">
  357. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  358. @mouseenter="activeIndex1 = index" :target="item.islink == 1 ? '_blank' : '_self'">
  359. {{ item.title }}
  360. </NuxtLink>
  361. </div>
  362. </div>
  363. </div>
  364. <div class="leftBottom">
  365. <div v-for="item in component_style1_News1Array_text_2">
  366. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  367. :target="item.islink == 1 ? '_blank' : '_self'">
  368. {{ item.title }}
  369. </NuxtLink>
  370. </div>
  371. </div>
  372. </div>
  373. </div>
  374. <!--样式7-->
  375. <div class="listNewsContent style7" v-if="componentStyle == 7">
  376. <div class="contentLeft">
  377. <div class="leftBottom">
  378. <div v-for="item in component_style1_News1Array_text_1">
  379. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  380. :target="item.islink == 1 ? '_blank' : '_self'">
  381. {{ item.title }}
  382. </NuxtLink>
  383. </div>
  384. </div>
  385. <div class="leftTop">
  386. <div class="photo">
  387. <div v-for="(item, index) in component_style1_News1Array_img_1">
  388. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  389. :target="item.islink == 1 ? '_blank' : '_self'">
  390. <img :src="item.imgurl" v-if="activeIndex == index">
  391. </NuxtLink>
  392. </div>
  393. </div>
  394. <div class="text">
  395. <div v-for="(item, index) in component_style1_News1Array_img_1"
  396. :class="{ 'active': activeIndex == index }">
  397. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  398. @mouseenter="activeIndex = index" :target="item.islink == 1 ? '_blank' : '_self'">
  399. {{ item.title }}
  400. </NuxtLink>
  401. </div>
  402. </div>
  403. </div>
  404. </div>
  405. <div class="contentLeft">
  406. <div class="leftBottom">
  407. <div v-for="item in component_style1_News1Array_text_2">
  408. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  409. :target="item.islink == 1 ? '_blank' : '_self'">
  410. {{ item.title }}
  411. </NuxtLink>
  412. </div>
  413. </div>
  414. <div class="leftTop">
  415. <div class="photo">
  416. <div v-for="(item, index) in component_style1_News1Array_img_2">
  417. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  418. :target="item.islink == 1 ? '_blank' : '_self'">
  419. <img :src="item.imgurl" v-if="activeIndex1 == index">
  420. </NuxtLink>
  421. </div>
  422. </div>
  423. <div class="text">
  424. <div v-for="(item, index) in component_style1_News1Array_img_2"
  425. :class="{ 'active': activeIndex1 == index }">
  426. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  427. @mouseenter="activeIndex1 = index" :target="item.islink == 1 ? '_blank' : '_self'">
  428. {{ item.title }}
  429. </NuxtLink>
  430. </div>
  431. </div>
  432. </div>
  433. </div>
  434. </div>
  435. <!--样式8-->
  436. <div class="listNewsContent style8" v-if="componentStyle == 8">
  437. <div class="contentLeft">
  438. <div class="leftBottom">
  439. <div v-for="item in component_style1_News1Array_text_1">
  440. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  441. :target="item.islink == 1 ? '_blank' : '_self'">
  442. {{ item.title }}
  443. </NuxtLink>
  444. </div>
  445. </div>
  446. <div class="leftTop">
  447. <div class="photo">
  448. <div v-for="(item, index) in component_style1_News1Array_img_1">
  449. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  450. :target="item.islink == 1 ? '_blank' : '_self'">
  451. <img :src="item.imgurl" v-if="activeIndex == index">
  452. </NuxtLink>
  453. </div>
  454. </div>
  455. <div class="text">
  456. <div v-for="(item, index) in component_style1_News1Array_img_1"
  457. :class="{ 'active': activeIndex == index }">
  458. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  459. @mouseenter="activeIndex = index" :target="item.islink == 1 ? '_blank' : '_self'">
  460. {{ item.title }}
  461. </NuxtLink>
  462. </div>
  463. </div>
  464. </div>
  465. </div>
  466. <div class="contentLeft">
  467. <div class="leftBottom">
  468. <div v-for="item in component_style1_News1Array_text_2">
  469. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  470. :target="item.islink == 1 ? '_blank' : '_self'">
  471. {{ item.title }}
  472. </NuxtLink>
  473. </div>
  474. </div>
  475. <div class="leftTop">
  476. <div class="photo">
  477. <div v-for="(item, index) in component_style1_News1Array_img_2">
  478. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  479. :target="item.islink == 1 ? '_blank' : '_self'">
  480. <img :src="item.imgurl" v-if="activeIndex1 == index">
  481. </NuxtLink>
  482. </div>
  483. </div>
  484. <div class="text">
  485. <div v-for="(item, index) in component_style1_News1Array_img_2"
  486. :class="{ 'active': activeIndex1 == index }">
  487. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
  488. @mouseenter="activeIndex1 = index" :target="item.islink == 1 ? '_blank' : '_self'">
  489. {{ item.title }}
  490. </NuxtLink>
  491. </div>
  492. </div>
  493. </div>
  494. </div>
  495. </div>
  496. </div>
  497. </template>
  498. <script setup>
  499. //引入vue
  500. import { ref } from 'vue';
  501. //获得新闻数据
  502. const props = defineProps({
  503. titleLink: Object,//板块名称
  504. templateData: Array,//新闻数据
  505. componentStyle: Number,//样式编号
  506. });
  507. const activeIndex = ref(0);
  508. const activeIndex1 = ref(0);
  509. //样式1与样式2共用 start ---------------------------------------->
  510. const component_style1_News1Array_img_1 = ref([]);
  511. const component_style1_News1Array_img_2 = ref([]);
  512. const component_style1_News1Array_text_1 = ref([]);
  513. const component_style1_News1Array_text_2 = ref([]);
  514. //真实数据
  515. // 图文数据
  516. component_style1_News1Array_img_1.value = props.templateData.imgnum.slice(0, 2);
  517. component_style1_News1Array_img_2.value = props.templateData.imgnum.slice(2, 4);
  518. // 文本数据
  519. component_style1_News1Array_text_1.value = props.templateData.textnum.slice(0, 3);
  520. component_style1_News1Array_text_2.value = props.templateData.textnum.slice(3, 6);
  521. //样式1与样式2共用 end ---------------------------------------->
  522. </script>
  523. <style lang="less" scoped>
  524. //基本样式 start ---------------------------------------->
  525. .listNewsBox {
  526. position: relative;
  527. .listNewsTitle {
  528. height: 38px;
  529. line-height: 38px;
  530. margin-bottom: 19px;
  531. div {
  532. height: 35px;
  533. width: 138px;
  534. line-height: 32px;
  535. font-size: 22px;
  536. font-weight: bold;
  537. color: #333333;
  538. cursor: pointer;
  539. overflow: hidden;
  540. text-overflow: ellipsis;
  541. white-space: nowrap;
  542. color: #154079;
  543. padding-bottom: 5px;
  544. background: url("http://192.168.1.234:19000/pre/image/png/20251218/1766042138413493.png") bottom left no-repeat;
  545. }
  546. }
  547. .listNewsContent {
  548. display: flex;
  549. align-items: center;
  550. justify-content: space-between;
  551. .contentLeft {
  552. width: 378px;
  553. height: 292px;
  554. .leftTop {
  555. width: 220px;
  556. height: 160px;
  557. position: relative;
  558. display: flex;
  559. align-items: center;
  560. justify-content: flex-start;
  561. margin-bottom: 20px;
  562. .photo {
  563. width: 220px;
  564. height: 160px;
  565. margin-right: 20px;
  566. position: relative;
  567. div {
  568. a {
  569. img {
  570. width: 220px;
  571. height: 160px;
  572. position: relative;
  573. }
  574. }
  575. }
  576. }
  577. .text {
  578. div {
  579. width: 129px;
  580. height: 72px;
  581. font-size: 18px;
  582. color: #333333;
  583. line-height: 24px;
  584. display: -webkit-box;
  585. -webkit-box-orient: vertical;
  586. -webkit-line-clamp: 3;
  587. overflow: hidden;
  588. text-overflow: ellipsis;
  589. word-break: break-all;
  590. &:first-child {
  591. font-weight: bold;
  592. margin-bottom: 10px;
  593. }
  594. // &.active {
  595. // a {
  596. // color: #154079;
  597. // }
  598. // }
  599. a {
  600. width: 100%;
  601. height: 100%;
  602. color: #333333;
  603. }
  604. }
  605. }
  606. }
  607. .leftBottom {
  608. div {
  609. width: 370px;
  610. white-space: nowrap;
  611. overflow: hidden;
  612. text-overflow: ellipsis;
  613. font-size: 18px;
  614. color: #666666;
  615. margin-bottom: 22px;
  616. padding-left: 8px;
  617. background: url("http://192.168.1.234:19000/pre/image/png/20251218/1766042944885873.png") no-repeat left center;
  618. &:last-child {
  619. margin-bottom: 0px;
  620. }
  621. a {
  622. color: #666666;
  623. }
  624. }
  625. }
  626. }
  627. }
  628. //样式2
  629. .style2 {
  630. .contentLeft {
  631. .leftTop {
  632. .text {
  633. div {
  634. &:first-child {
  635. font-weight: 400;
  636. }
  637. }
  638. }
  639. }
  640. }
  641. }
  642. //样式3
  643. .style3 {
  644. .contentLeft {
  645. .leftTop {
  646. margin-top: 0px;
  647. }
  648. .leftBottom {
  649. margin-bottom: 20px;
  650. }
  651. }
  652. }
  653. // 样式4
  654. .style4 {
  655. .contentLeft {
  656. .leftTop {
  657. margin-top: 0px;
  658. .text {
  659. div {
  660. &:first-child {
  661. font-weight: 400;
  662. }
  663. }
  664. }
  665. }
  666. .leftBottom {
  667. margin-bottom: 20px;
  668. }
  669. }
  670. }
  671. // 样式5
  672. .style5 {
  673. .contentLeft {
  674. .leftBottom {
  675. div {
  676. padding-left: 8px;
  677. background: url("http://192.168.1.234:19000/pre/image/png/20251218/176604296168575.png") no-repeat left center;
  678. }
  679. }
  680. }
  681. }
  682. //样式6
  683. .style6 {
  684. .contentLeft {
  685. .leftTop {
  686. .text {
  687. div {
  688. &:first-child {
  689. font-weight: 400;
  690. }
  691. }
  692. }
  693. }
  694. .leftBottom {
  695. div {
  696. padding-left: 8px;
  697. background: url("http://192.168.1.234:19000/pre/image/png/20251218/176604296168575.png") no-repeat left center;
  698. }
  699. }
  700. }
  701. }
  702. //样式7
  703. .style7 {
  704. .contentLeft {
  705. .leftTop {
  706. margin-top: 0px;
  707. }
  708. .leftBottom {
  709. margin-bottom: 20px;
  710. div {
  711. padding-left: 8px;
  712. background: url("http://192.168.1.234:19000/pre/image/png/20251218/176604296168575.png") no-repeat left center;
  713. }
  714. }
  715. }
  716. }
  717. // 样式8
  718. .style8 {
  719. .contentLeft {
  720. .leftTop {
  721. margin-top: 0px;
  722. .text {
  723. div {
  724. &:first-child {
  725. font-weight: 400;
  726. }
  727. }
  728. }
  729. }
  730. .leftBottom {
  731. margin-bottom: 20px;
  732. div {
  733. padding-left: 8px;
  734. background: url("http://192.168.1.234:19000/pre/image/png/20251218/176604296168575.png") no-repeat left center;
  735. }
  736. }
  737. }
  738. }
  739. }
  740. </style>