index.html.vue 95 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047
  1. <template>
  2. <div>
  3. <HomePageHead></HomePageHead>
  4. <HomePageNavigation></HomePageNavigation>
  5. <HomeSecondaryHeading :titleData="pageData" :pinyinid="routeId"></HomeSecondaryHeading>
  6. <main class="index_main">
  7. <section class="channel_2 clearfix phone_none" v-if="pageData[0]">
  8. <div class="roll_1_box" v-if="pageData[0]">
  9. <HomeSmallSwiperTwo :data="pageData[0].data"></HomeSmallSwiperTwo>
  10. </div>
  11. <div class="index_2_right_box">
  12. <div class="index_2_head clearfix" v-if="pageData[0]">
  13. <NuxtLink class="index_2_head_a index_2_head_a_only" :href="getLinkPath(pageData[0])"
  14. v-if="pageData[0]" :title="pageData[0].alias">
  15. {{ pageData[0].alias }}
  16. </NuxtLink>
  17. <!-- <NuxtLink class="channel_name_more_2" :href="getLinkPath(pageData[0])" v-if="pageData[0]"
  18. :title="pageData[0].alias">
  19. 栏目简介
  20. </NuxtLink> -->
  21. </div>
  22. <div class="index_2_ul index_2_ul_bold channel_2_ul" v-if="pageData[0]">
  23. <NuxtLink class="index_2_ul_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  24. v-for="item in pageData[0].data2" :key="item.id"
  25. :target="item.islink == 1 ? '_blank' : '_self'">
  26. {{ item.title }}
  27. </NuxtLink>
  28. </div>
  29. </div>
  30. </section>
  31. <div class="pc_none">
  32. <div class="phone_box_1" v-if="pageData[0]">
  33. <div class="phone_box_1_head">
  34. <NuxtLink class=""
  35. :href="getLinkPath(pageData[0])" >
  36. {{ pageData[0].alias }}
  37. </NuxtLink>
  38. </div>
  39. <div class="phone_box_1_img_ul">
  40. <div class="" >
  41. <NuxtLink
  42. v-for="item in pageData[0].data.slice(0,1)" :key="item"
  43. :to="`/${item.pinyin}/${item.id}.html`"
  44. :title="item.title">
  45. <img :src="item.imgurl" :alt="item.title">
  46. <span class="">
  47. {{ item.title }}
  48. </span>
  49. </NuxtLink>
  50. </div>
  51. </div>
  52. <div class="phone_box_1_ul">
  53. <div class="">
  54. <NuxtLink class=""
  55. :href="getLinkPathDetail(item)"
  56. v-for="item in pageData[0].data2.slice(0,3)"
  57. :key="item.id"
  58. :target="item.islink == 1 ? '_blank' : '_self'">
  59. {{ item.title }}
  60. </NuxtLink>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <section class="channel_3 clearfix phone_none"
  66. v-if="routeId == 547 || routeId == 539 || routeId == 692 || routeId == 762">
  67. <div class="channel_name_box clearfix">
  68. <NuxtLink class="channel_name" :href="getLinkPath1(boxData1data)" v-if="boxData1data"
  69. :title="boxData1data.alias">
  70. {{ boxData1data.alias }}
  71. </NuxtLink>
  72. <!-- <NuxtLink class="channel_name_more" :href="getLinkPath1(boxData1data)" v-if="boxData1data"
  73. :title="boxData1data.alias">
  74. 栏目简介
  75. </NuxtLink> -->
  76. </div>
  77. <div class="channel_5_ul_box clearfix">
  78. <div class="channel_5_ul_box_in clearfix">
  79. <div class="channel_5_ul_left_img_box">
  80. <NuxtLink class="channel_5_ul_left_img_box_a" :href="getLinkPathDetail(boxData1[0])"
  81. :title="boxData1[0].title" :key="boxData1[0].id" v-if="boxData1.length > 0"
  82. :target="boxData1[0].islink == 1 ? '_blank' : '_self'">
  83. <img class="channel_5_ul_left_img" :src="boxData1[0].imgurl" title="" alt="">
  84. <span class="channel_5_text">{{ boxData1[0].title }}</span>
  85. </NuxtLink>
  86. </div>
  87. <div class="channel_5_ul" v-if="boxData1data1">
  88. <NuxtLink class="channel_5_ul_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  89. v-for="item in boxData1data1" :key="item.id"
  90. :target="item.islink == 1 ? '_blank' : '_self'">
  91. {{ item.title }}
  92. </NuxtLink>
  93. </div>
  94. </div>
  95. <div class="channel_5_ul_box_in clearfix">
  96. <NuxtLink class="channel_5_ul_left_img_box" :href="getLinkPathDetail(boxData1[1])"
  97. :title="boxData1[1].title" :key="boxData1[1].id" v-if="boxData1.length > 1"
  98. :target="boxData1[1].islink == 1 ? '_blank' : '_self'">
  99. <img class="channel_5_ul_left_img" :src="boxData1[1].imgurl" title="" alt="">
  100. <span class="channel_5_text">{{ boxData1[1].title }}</span>
  101. </NuxtLink>
  102. <div class="channel_5_ul" v-if="boxData1data2">
  103. <NuxtLink class="channel_5_ul_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  104. v-for="item in boxData1data2" :key="item.id"
  105. :target="item.islink == 1 ? '_blank' : '_self'">
  106. {{ item.title }}
  107. </NuxtLink>
  108. </div>
  109. </div>
  110. </div>
  111. </section>
  112. <div class="pc_none">
  113. <div class="phone_box_2" v-if="boxData1data">
  114. <div class="phone_box_1_head">
  115. <NuxtLink class=" "
  116. :href="getLinkPath1(boxData1data)" >
  117. {{ boxData1data.alias }}
  118. </NuxtLink>
  119. </div>
  120. <div class="phone_box_1_img_ul">
  121. <div class="" >
  122. <NuxtLink
  123. :key="boxData1[0].id"
  124. :href="getLinkPathDetail(boxData1[0])"
  125. :target="boxData1[0].islink == 1 ? '_blank' : '_self'" >
  126. <img :src="boxData1[0].imgurl" alt="">
  127. <span class="">{{ boxData1[0].title }}</span>
  128. </NuxtLink>
  129. </div>
  130. </div>
  131. <div class="phone_box_1_ul">
  132. <div class="">
  133. <NuxtLink class=""
  134. :href="getLinkPathDetail(item)"
  135. v-for="item in boxData1data1" :key="item.id"
  136. :target="item.islink == 1 ? '_blank' : '_self'">
  137. {{ item.title }}
  138. </NuxtLink>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
  144. <section class="channel_4 clearfix phone_none">
  145. <div class="index_9_box_1" v-if="pageData[1]">
  146. <div class="index_2_head clearfix" v-if="pageData[1]">
  147. <NuxtLink class="index_2_head_a index_2_head_a_only" :href="getLinkPath(pageData[1])"
  148. v-if="pageData[1]" :title="pageData[1].alias">
  149. {{ pageData[1].alias }}
  150. </NuxtLink>
  151. <!-- <NuxtLink class="channel_name_more_2" :href="getLinkPath(pageData[1])" v-if="pageData[1]"
  152. :title="pageData[1].alias">
  153. 栏目简介
  154. </NuxtLink> -->
  155. </div>
  156. <div class="index_2_body clearfix">
  157. <div class="index_5_box_1 clearfix">
  158. <div class="index_5_big_img_ul">
  159. <div class="index_5_big_img_li" v-if="pageData[1].data">
  160. <NuxtLink class="index_5_big_img_li_a" :href="getLinkPathDetail(item)"
  161. :title="item.title" v-for="item in pageData[1].data" :key="item.id"
  162. :target="item.islink == 1 ? '_blank' : '_self'">
  163. <img class="index_5_big_img_li_img" :src="item.imgurl" alt="item.title">
  164. <div class="index_5_big_img_li_dot2 dot2">
  165. {{ item.title }}
  166. </div>
  167. </NuxtLink>
  168. </div>
  169. </div>
  170. <div class="index_5_img_ul clearfix" v-if="pageData[1].data2">
  171. <div class="index_5_img_li" v-for="item in pageData[1].data2">
  172. <NuxtLink class="index_5_img_li_a" :href="getLinkPathDetail(item)"
  173. :title="item.title" :key="item.id"
  174. :target="item.islink == 1 ? '_blank' : '_self'">
  175. <img class="index_5_img_li_img" :src="item.imgurl" alt="item.title">
  176. <div class="index_5_img_li_dot2 dot2">
  177. {{ item.title }}
  178. </div>
  179. </NuxtLink>
  180. </div>
  181. </div>
  182. </div>
  183. <div class="index_5_box_2 clearfix">
  184. <div class="index_5_ul channel_foot_ul" v-if="pageData[1].data3">
  185. <NuxtLink class="index_5_ul_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  186. v-for="item in pageData[1].data3" :key="item.id"
  187. :target="item.islink == 1 ? '_blank' : '_self'">
  188. {{ item.title }}
  189. </NuxtLink>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. <div class="index_5_box_3 clearfix" v-if="pageData[2]">
  195. <div class="index_2_head clearfix" v-if="pageData[2]">
  196. <NuxtLink class="index_2_head_a index_2_head_a_only" :href="getLinkPath(pageData[2])"
  197. v-if="pageData[2]" :title="pageData[2].alias">
  198. {{ pageData[2].alias }}
  199. </NuxtLink>
  200. <!-- <NuxtLink class="channel_name_more_2" :href="getLinkPath(pageData[2])" v-if="pageData[2]"
  201. :title="pageData[2].alias">
  202. 栏目简介
  203. </NuxtLink> -->
  204. </div>
  205. <div class="index_5_img_ul_2 clearfix channel_2_head_top" v-if="pageData[2].data">
  206. <div class="index_5_img_ul_2_li" v-for="item in pageData[2].data">
  207. <NuxtLink class="index_5_img_ul_2_li_a" :href="getLinkPathDetail(item)" :title="item.title"
  208. :key="item.id" :target="item.islink == 1 ? '_blank' : '_self'">
  209. <img class="index_5_img_ul_2_li_img" :src="item.imgurl" alt="item.title">
  210. <div class="index_5_img_ul_2_li_dot1 dot1">{{ item.title }}</div>
  211. </NuxtLink>
  212. </div>
  213. </div>
  214. <div class="index_2_ul channel_ul_3 channel_foot_ul" v-if="pageData[2].data2">
  215. <NuxtLink class="index_2_ul_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  216. :key="item.id" v-for="item in pageData[2].data2"
  217. :target="item.islink == 1 ? '_blank' : '_self'">
  218. {{ item.title }}
  219. </NuxtLink>
  220. </div>
  221. </div>
  222. </section>
  223. <div class="pc_none">
  224. <div class="phone_box_3" v-if="pageData[1]">
  225. <div class="phone_box_1_head">
  226. <NuxtLink class=""
  227. :href="getLinkPath(pageData[1])">
  228. {{ pageData[1].alias }}
  229. </NuxtLink>
  230. </div>
  231. <div class="phone_box_1_img_ul">
  232. <div class="" >
  233. <NuxtLink
  234. v-for="item in pageData[1].data"
  235. :key="item.id"
  236. :href="getLinkPathDetail(item)"
  237. :target="boxData1[0].islink == 1 ? '_blank' : '_self'" >
  238. <img :src="item.imgurl" alt="item.title">
  239. <span class="">{{ item.title }}</span>
  240. </NuxtLink>
  241. </div>
  242. </div>
  243. <div class="phone_box_1_ul">
  244. <div class="">
  245. <NuxtLink class=""
  246. :href="getLinkPathDetail(item)"
  247. v-for="item in pageData[1].data3" :key="item.id"
  248. :target="item.islink == 1 ? '_blank' : '_self'">
  249. {{ item.title }}
  250. </NuxtLink>
  251. </div>
  252. </div>
  253. </div>
  254. <div class="phone_box_4" v-if="pageData[2]">
  255. <div class="phone_box_1_head">
  256. <NuxtLink class=""
  257. :href="getLinkPath(pageData[2])">
  258. {{ pageData[2].alias }}
  259. </NuxtLink>
  260. </div>
  261. <div class="phone_box_1_img_ul">
  262. <div class="" >
  263. <NuxtLink
  264. v-for="item in pageData[2].data.slice(0,1)"
  265. :key="item.id"
  266. :href="getLinkPathDetail(item)"
  267. :target="item.islink == 1 ? '_blank' : '_self'" >
  268. <img :src="item.imgurl" alt="item.title">
  269. <span class="">{{ item.title }}</span>
  270. </NuxtLink>
  271. </div>
  272. </div>
  273. <div class="phone_box_1_ul">
  274. <div class="">
  275. <NuxtLink class=""
  276. :href="getLinkPathDetail(item)"
  277. v-for="item in pageData[2].data2.slice(0, 3)"
  278. :key="item.id"
  279. :target="item.islink == 1 ? '_blank' : '_self'">
  280. {{ item.title }}
  281. </NuxtLink>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. <section class="channel_5 clearfix phone_none">
  287. <div class="channel_1_box_1" v-if="pageData[3]">
  288. <div class="index_2_head clearfix">
  289. <NuxtLink class="index_2_head_a index_2_head_a_only" :href="getLinkPath(pageData[3])"
  290. v-if="pageData[3]" :title="pageData[3].alias">
  291. {{ pageData[3].alias }}
  292. </NuxtLink>
  293. </div>
  294. <div class="index_2_ul index_2_ul_bold channel_3_ul">
  295. <NuxtLink class="index_2_ul_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  296. v-for="item in pageData[3].data" :target="item.islink == 1 ? '_blank' : '_self'">
  297. {{ item.title }}
  298. </NuxtLink>
  299. </div>
  300. </div>
  301. <div class="channel_1_box_2 clearfix" v-if="pageData[4]">
  302. <div class="index_2_head clearfix">
  303. <NuxtLink class="index_2_head_a index_2_head_a_only" :href="getLinkPath(pageData[4])"
  304. v-if="pageData[4]" :title="pageData[4].alias">
  305. {{ pageData[4].alias }}
  306. </NuxtLink>
  307. </div>
  308. <div class="index_9_big_img_ul">
  309. <div class="index_5_big_img_li" v-if="pageData[4].data">
  310. <NuxtLink class="index_5_big_img_li_a" :href="getLinkPathDetail(item)" :title="item.title"
  311. v-for="item in pageData[4].data" :target="item.islink == 1 ? '_blank' : '_self'">
  312. <img class="index_9_big_img_li_img" :src="item.imgurl" alt="item.title">
  313. <div class="index_5_big_img_li_dot2 dot2">{{ item.title }}</div>
  314. </NuxtLink>
  315. </div>
  316. </div>
  317. </div>
  318. </section>
  319. <div class="pc_none">
  320. <div class="phone_box_5" v-if="pageData[3]">
  321. <div class="phone_box_1_head">
  322. <NuxtLink class=""
  323. :href="getLinkPath(pageData[3])">
  324. {{ pageData[3].alias }}
  325. </NuxtLink>
  326. </div>
  327. <div class="phone_box_1_ul">
  328. <div class="">
  329. <NuxtLink class=""
  330. v-for="item in pageData[3].data.slice(0, 3)"
  331. :key="item"
  332. :href="getLinkPathDetail(item)"
  333. :target="item.islink == 1 ? '_blank' : '_self'">
  334. {{ item.title }}
  335. </NuxtLink>
  336. </div>
  337. </div>
  338. </div>
  339. <div class="phone_box_6" v-if="pageData[4]">
  340. <div class="phone_box_1_head">
  341. <NuxtLink class=""
  342. :href="getLinkPath(pageData[4])"
  343. >
  344. {{ pageData[4].alias }}
  345. </NuxtLink>
  346. </div>
  347. <div class="phone_box_1_img_ul">
  348. <div class="" >
  349. <NuxtLink
  350. v-for="item in pageData[4].data.slice(0,1)"
  351. :key="item"
  352. :href="getLinkPathDetail(item)"
  353. :target="item.islink == 1 ? '_blank' : '_self'">
  354. <img :src="item.imgurl" >
  355. <span class="">{{ item.title }}</span>
  356. </NuxtLink>
  357. </div>
  358. </div>
  359. </div>
  360. </div>
  361. <section class="channel_6 clearfix phone_none"
  362. v-if="routeId == 547 || routeId == 539 || routeId == 692 || routeId == 762">
  363. <div class="channel_6_in">
  364. <div class="channel_name_box clearfix">
  365. <NuxtLink class="channel_name" :hef="getLinkPath1(boxData2data)" v-if="boxData2data"
  366. :title="boxData2data.alias">
  367. {{ boxData2data.alias }}
  368. </NuxtLink>
  369. <!-- <NuxtLink class="channel_name_more" :href="getLinkPath1(boxData2data)" v-if="boxData2data"
  370. :title="boxData2data.alias">
  371. 栏目简介
  372. </NuxtLink> -->
  373. </div>
  374. <div class="channel_6_line clearfix">
  375. <div class="channel_6_ul_box_in clearfix">
  376. <NuxtLink class="channel_6_ul_left_img_box" :href="getLinkPathDetail(boxData2[0])"
  377. :title="boxData2[0].title" :key="boxData2[0].id" v-if="boxData2.length > 0"
  378. :target="boxData2[0].islink == 1 ? '_blank' : '_self'">
  379. <img class="channel_6_ul_left_img" :src="boxData2[0].imgurl" title="" alt="">
  380. <span class="channel_5_text">{{ boxData2[0].title }}</span>
  381. </NuxtLink>
  382. <div class="channel_6_ul">
  383. <NuxtLink class="channel_6_ul_a dot1" :href="getLinkPathDetail(item)"
  384. :title="item.title" v-for="item in boxData2data1" :key="item.id"
  385. :target="item.islink == 1 ? '_blank' : '_self'">
  386. {{ item.title }}
  387. </NuxtLink>
  388. </div>
  389. </div>
  390. <div class="channel_6_ul_box_in clearfix">
  391. <NuxtLink class="channel_6_ul_left_img_box" :href="getLinkPathDetail(boxData2[1])"
  392. :title="boxData2[1].title" :key="boxData2[1].id" v-if="boxData2.length > 1"
  393. :target="boxData2[1].islink == 1 ? '_blank' : '_self'">
  394. <img class="channel_6_ul_left_img" :src="boxData2[1].imgurl" title="" alt="">
  395. <span class="channel_5_text">{{ boxData2[1].title }}</span>
  396. </NuxtLink>
  397. <div class="channel_6_ul">
  398. <NuxtLink class="channel_6_ul_a dot1" :href="getLinkPathDetail(item)"
  399. :title="item.title" v-for="item in boxData2data2" :key="item.id"
  400. :target="item.islink == 1 ? '_blank' : '_self'">
  401. {{ item.title }}
  402. </NuxtLink>
  403. </div>
  404. </div>
  405. </div>
  406. </div>
  407. <div class="channel_6_in">
  408. <div class="channel_name_box clearfix">
  409. <NuxtLink class="channel_name" :href="getLinkPath1(boxData3data)" v-if="boxData3data"
  410. :title="boxData3data.alias">
  411. {{ boxData3data.alias }}
  412. </NuxtLink>
  413. <!-- <NuxtLink class="channel_name_more" :href="getLinkPath1(boxData3data)" v-if="boxData3data"
  414. :title="boxData3data.alias">
  415. 栏目简介
  416. </NuxtLink> -->
  417. </div>
  418. <div class="channel_6_line clearfix">
  419. <div class="channel_6_ul_box_in clearfix">
  420. <NuxtLink class="channel_6_ul_left_img_box" :href="getLinkPathDetail(boxData3[0])"
  421. :title="boxData3[0].title" :key="boxData3[0].id" v-if="boxData3.length > 0"
  422. :target="boxData3[0].islink == 1 ? '_blank' : '_self'">
  423. <img class="channel_6_ul_left_img" :src="boxData3[0].imgurl" title="" alt="">
  424. <span class="channel_5_text">{{ boxData3[0].title }}</span>
  425. </NuxtLink>
  426. <div class="channel_6_ul">
  427. <NuxtLink class="channel_6_ul_a dot1" :href="getLinkPathDetail(item)"
  428. :title="item.title" v-for="item in boxData3data1" :key="item.id"
  429. :target="item.islink == 1 ? '_blank' : '_self'">
  430. {{ item.title }}
  431. </NuxtLink>
  432. </div>
  433. </div>
  434. <div class="channel_6_ul_box_in clearfix">
  435. <NuxtLink class="channel_6_ul_left_img_box" :href="getLinkPathDetail(boxData3[1])"
  436. :title="boxData3[1].title" :key="boxData3[1].id" v-if="boxData3.length > 1"
  437. :target="boxData3[1].islink == 1 ? '_blank' : '_self'">
  438. <img class="channel_6_ul_left_img" :src="boxData3[1].imgurl" title="" alt="">
  439. <span class="channel_5_text">{{ boxData3[1].title }}</span>
  440. </NuxtLink>
  441. <div class="channel_6_ul">
  442. <NuxtLink class="channel_6_ul_a dot1" :href="getLinkPathDetail(item)"
  443. :title="item.title" v-for="item in boxData3data2" :key="item.id"
  444. :target="item.islink == 1 ? '_blank' : '_self'">
  445. {{ item.title }}
  446. </NuxtLink>
  447. </div>
  448. </div>
  449. </div>
  450. </div>
  451. </section>
  452. <div class="pc_none">
  453. <div class="phone_box_7" v-if="boxData2data">
  454. <div class="phone_box_1_head">
  455. <NuxtLink class=""
  456. :hef="getLinkPath1(boxData2data)">
  457. {{ boxData2data.alias }}
  458. </NuxtLink>
  459. </div>
  460. <div class="phone_box_1_img_ul" >
  461. <div class="" >
  462. <NuxtLink
  463. :key="boxData2[0].id"
  464. v-if="boxData2.length > 0"
  465. :href="getLinkPathDetail(boxData2[0])"
  466. :target="boxData2[0].islink == 1 ? '_blank' : '_self'">
  467. <img :src="boxData2[0].imgurl">
  468. <span class="">{{ boxData2[0].title }}</span>
  469. </NuxtLink>
  470. </div>
  471. </div>
  472. <div class="phone_box_1_ul" >
  473. <div class="">
  474. <NuxtLink class=""
  475. :href="getLinkPathDetail(item)"
  476. v-for="item in boxData2data1"
  477. :key="item.id"
  478. :target="item.islink == 1 ? '_blank' : '_self'">
  479. {{ item.title }}
  480. </NuxtLink>
  481. </div>
  482. </div>
  483. </div>
  484. <div class="phone_box_8" v-if="boxData3data">
  485. <div class="phone_box_1_head">
  486. <NuxtLink class=""
  487. :hef="getLinkPath1(boxData3data)">
  488. {{ boxData3data.alias }}
  489. </NuxtLink>
  490. </div>
  491. <div class="phone_box_1_img_ul" >
  492. <div class="" >
  493. <NuxtLink
  494. :key="boxData3[0].id"
  495. v-if="boxData3.length > 0"
  496. :href="getLinkPathDetail(boxData3[0])"
  497. :target="boxData3[0].islink == 1 ? '_blank' : '_self'">
  498. <img :src="boxData3[0].imgurl">
  499. <span class="">{{ boxData3[0].title }}</span>
  500. </NuxtLink>
  501. </div>
  502. </div>
  503. <div class="phone_box_1_ul" >
  504. <div class="">
  505. <NuxtLink class=""
  506. :href="getLinkPathDetail(item)"
  507. v-for="item in boxData3data1"
  508. :key="item.id"
  509. :target="item.islink == 1 ? '_blank' : '_self'">
  510. {{ item.title }}
  511. </NuxtLink>
  512. </div>
  513. </div>
  514. </div>
  515. </div>
  516. <section class="channel_6 clearfix phone_none"
  517. v-if="routeId == 554 || routeId == 555 || routeId == 556 || routeId == 557 || routeId == 760 || routeId == 768 || routeId == 771 || routeId == 773">
  518. <div class="channel_6_in">
  519. <div class="channel_name_box clearfix">
  520. <NuxtLink class="channel_name" :href="getLinkPath1(boxData4data)" v-if="boxData4data"
  521. :title="boxData4data.alias">
  522. {{ boxData4data.alias }}
  523. </NuxtLink>
  524. <!-- <NuxtLink class="channel_name_more" :href="getLinkPath1(boxData4data)" v-if="boxData4data"
  525. :title="boxData4data.alias">
  526. 栏目简介
  527. </NuxtLink> -->
  528. </div>
  529. <div class="channel_6_line clearfix">
  530. <div class="channel_6_ul_box_in clearfix">
  531. <NuxtLink class="channel_6_ul_left_img_box" :href="getLinkPathDetail(boxData4[0])"
  532. :title="boxData4[0].title" :key="boxData4[0].id" v-if="boxData4.length > 0"
  533. :target="boxData4[0].islink == 1 ? '_blank' : '_self'">
  534. <img class="channel_6_ul_left_img" :src="boxData4[0].imgurl" title="" alt="">
  535. <span class="channel_5_text">{{ boxData4[0].title }}</span>
  536. </NuxtLink>
  537. <div class="channel_6_ul">
  538. <NuxtLink class="channel_6_ul_a dot1" :href="getLinkPathDetail(item)"
  539. :title="item.title" v-for="item in boxData4data1" :key="item.id"
  540. :target="item.islink == 1 ? '_blank' : '_self'">
  541. {{ item.title }}
  542. </NuxtLink>
  543. </div>
  544. </div>
  545. <div class="channel_6_ul_box_in clearfix">
  546. <NuxtLink class="channel_6_ul_left_img_box" :href="getLinkPathDetail(boxData4[1])"
  547. :title="boxData4[1].title" :key="boxData4[1].id" v-if="boxData4.length > 1"
  548. :target="boxData4[1].islink == 1 ? '_blank' : '_self'">
  549. <img class="channel_6_ul_left_img" :src="boxData4[1].imgurl" title="" alt="">
  550. <span class="channel_5_text">{{ boxData4[1].title }}</span>
  551. </NuxtLink>
  552. <div class="channel_6_ul">
  553. <NuxtLink class="channel_6_ul_a dot1" :href="getLinkPathDetail(item)"
  554. :title="item.title" v-for="item in boxData4data2" :key="item.id"
  555. :target="item.islink == 1 ? '_blank' : '_self'">
  556. {{ item.title }}
  557. </NuxtLink>
  558. </div>
  559. </div>
  560. </div>
  561. </div>
  562. <div class="channel_6_in">
  563. <div class="channel_name_box clearfix">
  564. <NuxtLink class="channel_name" :href="getLinkPath1(boxData5data)" v-if="boxData5data"
  565. :title="boxData5data.alias">
  566. {{ boxData5data.alias }}
  567. </NuxtLink>
  568. <!-- <NuxtLink class="channel_name_more" :href="getLinkPath1(boxData5data)" v-if="boxData5data"
  569. :title="boxData5data.alias">
  570. 栏目简介
  571. </NuxtLink> -->
  572. </div>
  573. <div class="channel_6_line clearfix">
  574. <div class="channel_6_ul_box_in clearfix">
  575. <NuxtLink class="channel_6_ul_left_img_box" :href="getLinkPathDetail(boxData5[0])"
  576. :title="boxData5[0].title" :key="boxData5[0].id" v-if="boxData5.length > 0"
  577. :target="boxData5[0].islink == 1 ? '_blank' : '_self'">
  578. <img class="channel_6_ul_left_img" :src="boxData5[0].imgurl" title="" alt="">
  579. <span class="channel_5_text">{{ boxData5[0].title }}</span>
  580. </NuxtLink>
  581. <div class="channel_6_ul">
  582. <NuxtLink class="channel_6_ul_a dot1" :href="getLinkPathDetail(item)"
  583. :title="item.title" v-for="item in boxData5data1" :key="item.id"
  584. :target="item.islink == 1 ? '_blank' : '_self'">
  585. {{ item.title }}
  586. </NuxtLink>
  587. </div>
  588. </div>
  589. <div class="channel_6_ul_box_in clearfix">
  590. <NuxtLink class="channel_6_ul_left_img_box" :href="getLinkPathDetail(boxData5[1])"
  591. :title="boxData5[1].title" :key="boxData5[1].id" v-if="boxData5.length > 1"
  592. :target="boxData5[1].islink == 1 ? '_blank' : '_self'">
  593. <img class="channel_6_ul_left_img" :src="boxData5[1].imgurl" title="" alt="">
  594. <span class="channel_5_text">{{ boxData5[1].title }}</span>
  595. </NuxtLink>
  596. <div class="channel_6_ul">
  597. <NuxtLink class="channel_6_ul_a dot1" :href="getLinkPathDetail(item)"
  598. :title="item.title" v-for="item in boxData5data2" :key="item.id"
  599. :target="item.islink == 1 ? '_blank' : '_self'">
  600. {{ item.title }}
  601. </NuxtLink>
  602. </div>
  603. </div>
  604. </div>
  605. </div>
  606. </section>
  607. <HomeAdvertising :imgurl="adImg2"></HomeAdvertising>
  608. <section class="channel_4 clearfix phone_none">
  609. <div class="index_9_box_1" v-if="pageData[5]">
  610. <div class="index_2_head clearfix">
  611. <NuxtLink class="index_2_head_a index_2_head_a_only" :href="getLinkPath(pageData[5])"
  612. v-if="pageData[5]" :title="pageData[5].alias">
  613. {{ pageData[5].alias }}
  614. </NuxtLink>
  615. </div>
  616. <div class="index_5_box_1 clearfix">
  617. <div class="index_5_big_img_ul">
  618. <div class="index_5_big_img_li" v-if="pageData[5].data">
  619. <NuxtLink class="index_5_big_img_li_a" :href="getLinkPathDetail(item)"
  620. :title="item.title" v-for="item in pageData[5].data" :key="item.id"
  621. :target="item.islink == 1 ? '_blank' : '_self'">
  622. <img class="index_5_big_img_li_img" :src="item.imgurl" :alt="item.title">
  623. <div class="index_5_big_img_li_dot2 dot2">{{ item.title }}</div>
  624. </NuxtLink>
  625. </div>
  626. </div>
  627. <div class="index_5_img_ul" v-if="pageData[5].data2">
  628. <div class="index_5_img_li" v-for="item in pageData[5].data2">
  629. <NuxtLink class="index_5_img_li_a" :href="getLinkPathDetail(item)" :title="item.title"
  630. :key="item.id" :target="item.islink == 1 ? '_blank' : '_self'">
  631. <img class="index_5_img_li_img" :src="item.imgurl" :alt="item.title">
  632. <div class="index_5_img_li_dot2 dot2">{{ item.title }}</div>
  633. </NuxtLink>
  634. </div>
  635. </div>
  636. </div>
  637. <div class="index_5_box_2 clearfix">
  638. <div class="index_5_ul" v-if="pageData[5].data3">
  639. <NuxtLink class="index_5_ul_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  640. :key="item.id" v-for="(item, index) in pageData[5].data3"
  641. :target="item.islink == 1 ? '_blank' : '_self'">
  642. <div class="index_5_img_li_dot2 dot2"> {{ item.title }}</div>
  643. </NuxtLink>
  644. </div>
  645. </div>
  646. </div>
  647. <div class="index_5_box_3 clearfix" v-if="pageData[6]">
  648. <div class="index_2_head clearfix">
  649. <NuxtLink :class="['index_2_head_a', showTabs == 1 ? 'index_2_head_a_only' : '']"
  650. :href="getLinkPath(pageData[6])" v-if="pageData[6]" @mouseenter="qhtabs(1)"
  651. :title="pageData[6].alias">
  652. {{ pageData[6].alias }}
  653. </NuxtLink>
  654. <NuxtLink :class="['index_2_head_a', showTabs == 2 ? 'index_2_head_a_only' : '']"
  655. :href="getLinkPath(pageData[7])" v-if="pageData[7]" @mouseenter="qhtabs(2)"
  656. :title="pageData[7].alias">
  657. {{ pageData[7].alias }}
  658. </NuxtLink>
  659. </div>
  660. <div v-if="showTabs == 1">
  661. <div class="index_5_img_ul_2 clearfix channel_2_head_top" v-if="pageData[6].data">
  662. <div class="index_5_img_ul_2_li" v-for="item in pageData[6].data">
  663. <NuxtLink class="index_5_img_ul_2_li_a" :href="getLinkPathDetail(item)"
  664. :title="item.title" :key="item.id" :target="item.islink == 1 ? '_blank' : '_self'">
  665. <img class="index_5_img_ul_2_li_img" :src="item.imgurl" :alt="item.title">
  666. <div class="index_5_img_ul_2_li_dot1 dot1">{{ item.title }}</div>
  667. </NuxtLink>
  668. </div>
  669. </div>
  670. <div class="index_2_ul channel_4_ul" v-if="pageData[6].data2">
  671. <NuxtLink class="index_2_ul_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  672. v-for="item in pageData[6].data2" :key="item.id"
  673. :target="item.islink == 1 ? '_blank' : '_self'">
  674. {{ item.title }}
  675. </NuxtLink>
  676. </div>
  677. </div>
  678. <div v-if="showTabs == 2">
  679. <div class="index_5_img_ul_2 clearfix channel_2_head_top" v-if="pageData[7].data">
  680. <div class="index_5_img_ul_2_li" v-for="item in pageData[7].data">
  681. <NuxtLink class="index_5_img_ul_2_li_a" :href="getLinkPathDetail(item)"
  682. :title="item.title" :key="item.id" :target="item.islink == 1 ? '_blank' : '_self'">
  683. <img class="index_5_img_ul_2_li_img" :src="item.imgurl" :alt="item.title">
  684. <div class="index_5_img_ul_2_li_dot1 dot1">{{ item.title }}</div>
  685. </NuxtLink>
  686. </div>
  687. </div>
  688. <div class="index_2_ul channel_4_ul" v-if="pageData[7].data">
  689. <NuxtLink class="index_2_ul_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  690. v-for="item in pageData[7].data2" :key="item.id"
  691. :target="item.islink == 1 ? '_blank' : '_self'">
  692. {{ item.title }}
  693. </NuxtLink>
  694. </div>
  695. </div>
  696. </div>
  697. </section>
  698. <div class="pc_none">
  699. <div class="phone_box_9" v-if="pageData[5]">
  700. <div class="phone_box_1_head">
  701. <NuxtLink
  702. :href="getLinkPath(pageData[5])">
  703. {{ pageData[5].alias }}
  704. </NuxtLink>
  705. </div>
  706. <div class="phone_box_1_img_ul" >
  707. <div class="" >
  708. <NuxtLink class=""
  709. :href="getLinkPathDetail(item)"
  710. v-for="item in pageData[5].data.slice(0,1)" :key="item.id"
  711. :target="item.islink == 1 ? '_blank' : '_self'">
  712. <img class="" :src="item.imgurl" :alt="item.title">
  713. <span class="">{{ item.title }}</span>
  714. </NuxtLink>
  715. </div>
  716. </div>
  717. <div class="phone_box_1_ul" >
  718. <div class="">
  719. <NuxtLink
  720. :href="getLinkPathDetail(item)"
  721. v-for="(item, index) in pageData[5].data3.slice(0,3)"
  722. :key="item.id"
  723. :target="item.islink == 1 ? '_blank' : '_self'">
  724. {{ item.title }}
  725. </NuxtLink>
  726. </div>
  727. </div>
  728. </div>
  729. <div class="phone_box_10" v-if="pageData[6]">
  730. <div class="phone_box_1_head">
  731. <NuxtLink
  732. :href="getLinkPath(pageData[6])" >
  733. {{ pageData[6].alias }}
  734. </NuxtLink>
  735. </div>
  736. <div class="phone_box_1_img_ul">
  737. <div class="" >
  738. <NuxtLink
  739. v-for="item in pageData[6].data.slice(0)"
  740. :href="getLinkPathDetail(item)"
  741. :key="item.id"
  742. :target="item.islink == 1 ? '_blank' : '_self'">
  743. <img :src="item.imgurl" :alt="item.title">
  744. <span >{{ item.title }}</span>
  745. </NuxtLink>
  746. </div>
  747. </div>
  748. <div class="phone_box_1_ul" >
  749. <div class="">
  750. <NuxtLink
  751. v-for="item in pageData[6].data2.slice(0,3)"
  752. :href="getLinkPathDetail(item)"
  753. :key="item.id"
  754. :target="item.islink == 1 ? '_blank' : '_self'">
  755. {{ item.title }}
  756. </NuxtLink>
  757. </div>
  758. </div>
  759. </div>
  760. <div class="phone_box_11" v-if="pageData[7]">
  761. <div class="phone_box_1_head">
  762. <NuxtLink
  763. :href="getLinkPath(pageData[7])" >
  764. {{ pageData[7].alias }}
  765. </NuxtLink>
  766. </div>
  767. <div class="phone_box_1_img_ul">
  768. <div class="" >
  769. <NuxtLink
  770. v-for="item in pageData[7].data.slice(0)"
  771. :href="getLinkPathDetail(item)"
  772. :key="item.id"
  773. :target="item.islink == 1 ? '_blank' : '_self'">
  774. <img :src="item.imgurl" :alt="item.title">
  775. <span >{{ item.title }}</span>
  776. </NuxtLink>
  777. </div>
  778. </div>
  779. <div class="phone_box_1_ul" >
  780. <div class="">
  781. <NuxtLink
  782. v-for="item in pageData[7].data2.slice(0,3)"
  783. :href="getLinkPathDetail(item)"
  784. :key="item.id"
  785. :target="item.islink == 1 ? '_blank' : '_self'">
  786. {{ item.title }}
  787. </NuxtLink>
  788. </div>
  789. </div>
  790. </div>
  791. </div>
  792. </main>
  793. <!-- 页脚部分 -->
  794. <HomeFoot1></HomeFoot1>
  795. </div>
  796. </template>
  797. <script setup>
  798. //0.加载页面依赖 start ---------------------------------------->
  799. import { ref, onMounted } from 'vue';
  800. import { ElMessage } from 'element-plus';
  801. //0.加载页面依赖 end ---------------------------------------->
  802. //1.获得路由id start ---------------------------------------->
  803. const targetSegment = getRoutePath(1);
  804. //1.1 获得当前的路由id
  805. let routeId;
  806. //通过导航路径反向查询导航id
  807. const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
  808. method: 'GET',
  809. query: {
  810. 'pinyin': targetSegment,
  811. },
  812. });
  813. if (getRouteId.code == 200) {
  814. routeId = getRouteId.data.category_id
  815. } else {
  816. console.log("获得路由id出错!", getRouteId.message)
  817. }
  818. //1.获得路由id end ---------------------------------------->
  819. //2.选项卡 start ---------------------------------------->
  820. let showTabs = ref(1)
  821. let qhtabs = function (number) {
  822. console.log(number)
  823. showTabs.value = number
  824. }
  825. //2.选项卡 end ---------------------------------------->
  826. //3.广告 start ---------------------------------------->
  827. let adImg1 = ref({})
  828. let adImg2 = ref({})
  829. let adImg3 = ref({})
  830. let adImg4 = ref({})
  831. onMounted(async () => {
  832. //从客户端获取行政职能部门 加快打开速度
  833. const { $webUrl, $CwebUrl } = useNuxtApp();
  834. //广告1
  835. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nmgw_category_0001`
  836. const responseAd1 = await fetch(url, {
  837. headers: {
  838. 'Content-Type': 'application/json',
  839. 'Userurl': $CwebUrl,
  840. 'Origin': $CwebUrl
  841. }
  842. });
  843. const resultAd1 = await responseAd1.json();
  844. adImg1.value = resultAd1.data[0];
  845. //广告2
  846. let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nmgw_category_0002`
  847. const responseAd2 = await fetch(url2, {
  848. headers: {
  849. 'Content-Type': 'application/json',
  850. 'Userurl': $CwebUrl,
  851. 'Origin': $CwebUrl
  852. }
  853. });
  854. const resultAd2 = await responseAd2.json();
  855. adImg2.value = resultAd2.data[0];
  856. //广告3
  857. let url3 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nmgw_category_0003`
  858. const responseAd3 = await fetch(url3, {
  859. headers: {
  860. 'Content-Type': 'application/json',
  861. 'Userurl': $CwebUrl,
  862. 'Origin': $CwebUrl
  863. }
  864. });
  865. const resultAd3 = await responseAd3.json();
  866. adImg3.value = resultAd3.data[0];
  867. //广告4
  868. let url4 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nmgw_category_0004`
  869. const responseAd4 = await fetch(url4, {
  870. headers: {
  871. 'Content-Type': 'application/json',
  872. 'Userurl': $CwebUrl,
  873. 'Origin': $CwebUrl
  874. }
  875. });
  876. const resultAd4 = await responseAd4.json();
  877. adImg4.value = resultAd4.data[0];
  878. })
  879. //3.广告 end ---------------------------------------->
  880. //4.页面数据 start ---------------------------------------->
  881. const pageData = ref([
  882. //示例:
  883. // {
  884. // id: 1,
  885. // title: "", //该导航的标题
  886. // data: [], //数据1
  887. // data1: [], //数据2
  888. // data2: [], //数据3
  889. // data3: [], //数据4
  890. // data4: [], //数据5
  891. // category_id1: "", //子导航id1
  892. // category_id2: "",
  893. // category_id3: "",
  894. // category_id4: "",
  895. // title1: "", //子导航标题1
  896. // title2: "",
  897. // title3: "",
  898. // title4: "",
  899. // cid: "" //该导航的id
  900. // },
  901. ])
  902. //4.1 获取所有导航
  903. try {
  904. const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
  905. method: 'GET',
  906. query: {
  907. 'placeid': 1,
  908. 'pid': routeId,
  909. 'num': 20
  910. },
  911. });
  912. if (navigateData.code == 200) {
  913. // 遍历可用的导航池放到页面中
  914. for (let index in navigateData.data) {
  915. let data = {
  916. title: navigateData.data[index].name,
  917. cid: navigateData.data[index].category_id,
  918. children_count: navigateData.data[index].children_count,
  919. alias: navigateData.data[index].alias,
  920. aLIas_pinyin: targetSegment + "/" + navigateData.data[index].aLIas_pinyin,
  921. data: [],
  922. data1: [],
  923. data2: [],
  924. data3: [],
  925. data4: [],
  926. category_id1: "",
  927. category_id2: "",
  928. category_id3: "",
  929. category_id4: "",
  930. title1: "",
  931. title2: "",
  932. title3: "",
  933. title4: ""
  934. };
  935. if (navigateData.data[index].is_url == 1) {
  936. // 处理 URL 的逻辑
  937. } else {
  938. //每个页面最多8个模块
  939. pageData.value.push(data);
  940. }
  941. }
  942. //导航池加载完毕,开始申请模块数据
  943. let getJson = []
  944. for (let i = 0; i < pageData.value.length; i++) {
  945. if (i == 0) {
  946. getJson.push({ "id": pageData.value[i].cid + ",5,6" });
  947. } else if (i == 1) {
  948. getJson.push({ "id": pageData.value[i].cid + ",3,10" });
  949. } else if (i == 2) {
  950. getJson.push({ "id": pageData.value[i].cid + ",2,5" });
  951. } else if (i == 3) {
  952. getJson.push({ "id": pageData.value[i].cid + ",0,7" });
  953. } else if (i == 4) {
  954. getJson.push({ "id": pageData.value[i].cid + ",1,0" });
  955. } else if (i == 5) {
  956. getJson.push({ "id": pageData.value[i].cid + ",3,10" });
  957. } else if (i == 6) {
  958. getJson.push({ "id": pageData.value[i].cid + ",2,5" });
  959. } else if (i == 7) {
  960. getJson.push({ "id": pageData.value[i].cid + ",2,5" });
  961. }
  962. }
  963. let jsonString = JSON.stringify(getJson);
  964. console.log('jsonString', jsonString);
  965. getPageAllData(jsonString);
  966. } else {
  967. console.log("错误:渲染8个模块环节出错,请检查是否存在没有数据的模块!")
  968. }
  969. } catch (error) {
  970. console.log("错误:导航池渲染执行接口出错!请检查频道页渲染的模块数据是否完整!")
  971. }
  972. async function getPageAllData(jsonString) {
  973. const mkdata = await requestDataPromise('/web/getWebsiteCompany', {
  974. method: 'GET',
  975. query: {
  976. 'id': jsonString
  977. },
  978. });
  979. // console.log('mkdata111111111111', mkdata)
  980. if (mkdata.code == 200) {
  981. if (mkdata.data.length > 0) {
  982. //模块1 顶部大图和列表
  983. pageData.value[0].data = mkdata.data[0].img_num;
  984. pageData.value[0].data2 = mkdata.data[0].text_num;
  985. }
  986. if (mkdata.data.length > 1) {
  987. //模块2
  988. for (let index in mkdata.data[1].img_num) {
  989. if (index < 1) {
  990. pageData.value[1].data.push(mkdata.data[1].img_num[index]);
  991. } else {
  992. pageData.value[1].data2.push(mkdata.data[1].img_num[index]);
  993. }
  994. }
  995. pageData.value[1].data3 = mkdata.data[1].text_num;
  996. }
  997. if (mkdata.data.length > 2) {
  998. pageData.value[2].data = mkdata.data[2].img_num;
  999. pageData.value[2].data2 = mkdata.data[2].text_num;
  1000. }
  1001. if (mkdata.data.length > 3) {
  1002. pageData.value[3].data = mkdata.data[3].text_num;
  1003. }
  1004. if (mkdata.data.length > 4) {
  1005. pageData.value[4].data = mkdata.data[4].img_num;
  1006. }
  1007. if (mkdata.data.length > 5) {
  1008. for (let index in mkdata.data[5].img_num) {
  1009. if (index < 1) {
  1010. pageData.value[5].data.push(mkdata.data[5].img_num[index]);
  1011. } else {
  1012. pageData.value[5].data2.push(mkdata.data[5].img_num[index]);
  1013. }
  1014. }
  1015. pageData.value[5].data3 = mkdata.data[5].text_num;
  1016. }
  1017. if (mkdata.data.length > 6) {
  1018. pageData.value[6].data = mkdata.data[6].img_num;
  1019. pageData.value[6].data2 = mkdata.data[6].text_num;
  1020. }
  1021. if (mkdata.data.length > 7) {
  1022. pageData.value[7].data = mkdata.data[7].img_num;
  1023. pageData.value[7].data2 = mkdata.data[7].text_num;
  1024. }
  1025. } else {
  1026. ElMessage.error(mkdata.message)
  1027. }
  1028. }
  1029. // 需要固定的二级栏目
  1030. // 模块1
  1031. const boxData1data = ref([])
  1032. const boxData1 = ref([])
  1033. const boxData1data1 = ref([])
  1034. const boxData1data2 = ref([])
  1035. // 模块2
  1036. const boxData2data = ref([])
  1037. const boxData2 = ref([])
  1038. const boxData2data1 = ref([])
  1039. const boxData2data2 = ref([])
  1040. // 模块3
  1041. const boxData3data = ref([])
  1042. const boxData3 = ref([])
  1043. const boxData3data1 = ref([])
  1044. const boxData3data2 = ref([])
  1045. // 模块4
  1046. const boxData4data = ref([])
  1047. const boxData4 = ref([])
  1048. const boxData4data1 = ref([])
  1049. const boxData4data2 = ref([])
  1050. // 模块5
  1051. const boxData5data = ref([])
  1052. const boxData5 = ref([])
  1053. const boxData5data1 = ref([])
  1054. const boxData5data2 = ref([])
  1055. const { $pageNav } = useNuxtApp();
  1056. // 需要固定的二级栏目
  1057. let getJson1 = [
  1058. { "parent": $pageNav[16] + ",0,0", "child": $pageNav[19] + ",2,8" },//模块1 创业项目
  1059. { "parent": $pageNav[16] + ",0,0", "child": $pageNav[20] + ",2,8" },//模块2 创业故事
  1060. { "parent": $pageNav[16] + ",0,0", "child": $pageNav[21] + ",2,8" },//模块3 创业服务
  1061. // { "parent": $pageNav[17] + ",0,0", "child": $pageNav[22] + ",2,8" },//模块4 组织机构
  1062. // { "parent": $pageNav[18] + ",0,0", "child": $pageNav[23] + ",2,8" },//模块5 招贤纳士
  1063. ]
  1064. let jsonString1 = JSON.stringify(getJson1);
  1065. async function getPagePartData(jsonString1) {
  1066. const mkdata = await requestDataPromise('/web/getWebsiteAllArticle', {
  1067. method: 'GET',
  1068. query: {
  1069. 'id': jsonString1
  1070. },
  1071. });
  1072. if (mkdata.code == 200) {
  1073. if (mkdata.data.length > 0) {
  1074. boxData1data.value = mkdata.data[0].child;
  1075. boxData1.value = mkdata.data[0].child.imgnum;
  1076. for (let index in mkdata.data[0].child.textnum) {
  1077. if (index < 4) {
  1078. boxData1data1.value.push(mkdata.data[0].child.textnum[index]);
  1079. } else if (index < 8) {
  1080. boxData1data2.value.push(mkdata.data[0].child.textnum[index]);
  1081. }
  1082. }
  1083. }
  1084. if (mkdata.data.length > 1) {
  1085. boxData2data.value = mkdata.data[1].child;
  1086. boxData2.value = mkdata.data[1].child.imgnum;
  1087. for (let index in mkdata.data[1].child.textnum) {
  1088. if (index < 4) {
  1089. boxData2data1.value.push(mkdata.data[1].child.textnum[index]);
  1090. } else if (index < 8) {
  1091. boxData2data2.value.push(mkdata.data[1].child.textnum[index]);
  1092. }
  1093. }
  1094. }
  1095. if (mkdata.data.length > 2) {
  1096. boxData3data.value = mkdata.data[2].child;
  1097. boxData3.value = mkdata.data[2].child.imgnum;
  1098. for (let index in mkdata.data[2].child.textnum) {
  1099. if (index < 4) {
  1100. boxData3data1.value.push(mkdata.data[2].child.textnum[index]);
  1101. } else if (index < 8) {
  1102. boxData3data2.value.push(mkdata.data[2].child.textnum[index]);
  1103. }
  1104. }
  1105. }
  1106. if (mkdata.data.length > 3) {
  1107. boxData4data.value = mkdata.data[3].child;
  1108. boxData4.value = mkdata.data[3].child.imgnum;
  1109. for (let index in mkdata.data[3].child.textnum) {
  1110. if (index < 4) {
  1111. boxData4data1.value.push(mkdata.data[3].child.textnum[index]);
  1112. } else if (index < 8) {
  1113. boxData4data2.value.push(mkdata.data[3].child.textnum[index]);
  1114. }
  1115. }
  1116. }
  1117. if (mkdata.data.length > 4) {
  1118. boxData5data.value = mkdata.data[4].child;
  1119. boxData5.value = mkdata.data[4].child.imgnum;
  1120. for (let index in mkdata.data[4].child.textnum) {
  1121. if (index < 4) {
  1122. boxData5data1.value.push(mkdata.data[4].child.textnum[index]);
  1123. } else if (index < 8) {
  1124. boxData5data2.value.push(mkdata.data[4].child.textnum[index]);
  1125. }
  1126. }
  1127. }
  1128. } else {
  1129. ElMessage.error(mkdata.message)
  1130. }
  1131. }
  1132. getPagePartData(jsonString1);
  1133. //4.页面数据 end ---------------------------------------->
  1134. //5.设置seo信息 start---------------------------------------->
  1135. const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
  1136. method: 'GET',
  1137. query: {
  1138. 'catid': routeId
  1139. },
  1140. });
  1141. if (setData.code == 200) {
  1142. let seoTitle = setData.data.seo_title;
  1143. let seoDescription = setData.data.seo_description;
  1144. let seoKeywords = setData.data.seo_keywords;
  1145. let seoSuffix = setData.data.suffix;
  1146. let seoName = setData.data.website_name;
  1147. useSeoMeta({
  1148. title: seoTitle + "_" + seoName + "_" + seoSuffix,
  1149. meta: [
  1150. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  1151. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  1152. { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
  1153. ]
  1154. });
  1155. } else {
  1156. console.log("设置频道页SEO出错!", setData.message)
  1157. }
  1158. //5.设置seo信息 end---------------------------------------->
  1159. </script>
  1160. <style lang="less" scoped>
  1161. @import '@/assets/css/class.less';
  1162. </style>
  1163. <style lang="less" scoped>
  1164. @media screen and (min-width:801px){/*pc*/
  1165. .pc_none{display:none;}
  1166. }
  1167. @media screen and (max-width:800px){/*ipad_phone*/
  1168. .index_main{width:100%;margin-bottom:29px;}
  1169. .phone_box_1{
  1170. width:92%;margin:0px auto 0px;
  1171. .phone_box_1_head{
  1172. height:50px;line-height:50px;
  1173. background:#fff;border-bottom:1px solid #E6E6E6;
  1174. margin-top:0px;width:100%;
  1175. a{
  1176. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1177. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1178. position:relative;padding-left:8px;
  1179. }
  1180. a::before{
  1181. content: '';display: block;
  1182. position:absolute;left:0px;top:18px;
  1183. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1184. width:3px;height:15px;
  1185. }
  1186. }
  1187. .phone_box_1_img_ul{
  1188. height:55vw;overflow:hidden;margin-top:15px;
  1189. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1190. a{display:block;width:100%;height:100%;}
  1191. img{display:block;width:100%;height:100%;}
  1192. span{
  1193. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1194. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1195. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1196. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1197. }
  1198. >div>a:nth-of-type(n+2){display:none;}
  1199. }
  1200. .phone_box_1_ul{
  1201. overflow:hidden;height:123px;margin:15px auto 0px;
  1202. >div{width:100%;height:100%;}
  1203. a{
  1204. width:100%!important;display:block;height:40px;line-height:40px;
  1205. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1206. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1207. font-size:16px;color:#333;text-indent:18px;
  1208. }
  1209. a::after{
  1210. content: '';display: block;
  1211. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1212. width:6px;height:6px;
  1213. }
  1214. a:nth-of-type(n+4){display:none;}
  1215. }
  1216. }
  1217. .phone_box_2{
  1218. width:92%;margin:0px auto 0px;
  1219. .phone_box_1_head{
  1220. height:50px;line-height:50px;
  1221. background:#fff;border-bottom:1px solid #E6E6E6;
  1222. margin-top:15px;width:100%;
  1223. a{
  1224. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1225. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1226. position:relative;padding-left:8px;
  1227. }
  1228. a::before{
  1229. content: '';display: block;
  1230. position:absolute;left:0px;top:18px;
  1231. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1232. width:3px;height:15px;
  1233. }
  1234. }
  1235. .phone_box_1_img_ul{
  1236. height:55vw;overflow:hidden;margin-top:15px;
  1237. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1238. a{display:block;width:100%;height:100%;}
  1239. img{display:block;width:100%;height:100%;}
  1240. span{
  1241. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1242. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1243. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1244. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1245. }
  1246. >div>a:nth-of-type(n+2){display:none;}
  1247. }
  1248. .phone_box_1_ul{
  1249. overflow:hidden;height:123px;margin:15px auto 0px;
  1250. >div{width:100%;height:100%;}
  1251. a{
  1252. width:100%!important;display:block;height:40px;line-height:40px;
  1253. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1254. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1255. font-size:16px;color:#333;text-indent:18px;
  1256. }
  1257. a::after{
  1258. content: '';display: block;
  1259. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1260. width:6px;height:6px;
  1261. }
  1262. a:nth-of-type(n+4){display:none;}
  1263. }
  1264. }
  1265. .phone_box_3{
  1266. width:92%;margin:0px auto 0px;
  1267. .phone_box_1_head{
  1268. height:50px;line-height:50px;
  1269. background:#fff;border-bottom:1px solid #E6E6E6;
  1270. margin-top:15px;width:100%;
  1271. a{
  1272. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1273. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1274. position:relative;padding-left:8px;
  1275. }
  1276. a::before{
  1277. content: '';display: block;
  1278. position:absolute;left:0px;top:18px;
  1279. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1280. width:3px;height:15px;
  1281. }
  1282. }
  1283. .phone_box_1_img_ul{
  1284. height:55vw;overflow:hidden;margin-top:15px;
  1285. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1286. a{display:block;width:100%;height:100%;}
  1287. img{display:block;width:100%;height:100%;}
  1288. span{
  1289. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1290. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1291. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1292. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1293. }
  1294. >div>a:nth-of-type(n+2){display:none;}
  1295. }
  1296. .phone_box_1_ul{
  1297. overflow:hidden;height:123px;margin:15px auto 0px;
  1298. >div{width:100%;height:100%;}
  1299. a{
  1300. width:100%!important;display:block;height:40px;line-height:40px;
  1301. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1302. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1303. font-size:16px;color:#333;text-indent:18px;
  1304. }
  1305. a::after{
  1306. content: '';display: block;
  1307. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1308. width:6px;height:6px;
  1309. }
  1310. a:nth-of-type(n+4){display:none;}
  1311. }
  1312. }
  1313. .phone_box_4{
  1314. width:92%;margin:0px auto 0px;
  1315. .phone_box_1_head{
  1316. height:50px;line-height:50px;
  1317. background:#fff;border-bottom:1px solid #E6E6E6;
  1318. margin-top:15px;width:100%;
  1319. a{
  1320. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1321. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1322. position:relative;padding-left:8px;
  1323. }
  1324. a::before{
  1325. content: '';display: block;
  1326. position:absolute;left:0px;top:18px;
  1327. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1328. width:3px;height:15px;
  1329. }
  1330. }
  1331. .phone_box_1_img_ul{
  1332. height:55vw;overflow:hidden;margin-top:15px;
  1333. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1334. a{display:block;width:100%;height:100%;}
  1335. img{display:block;width:100%;height:100%;}
  1336. span{
  1337. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1338. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1339. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1340. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1341. }
  1342. >div>a:nth-of-type(n+2){display:none;}
  1343. }
  1344. .phone_box_1_ul{
  1345. overflow:hidden;height:123px;margin:15px auto 0px;
  1346. >div{width:100%;height:100%;}
  1347. a{
  1348. width:100%!important;display:block;height:40px;line-height:40px;
  1349. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1350. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1351. font-size:16px;color:#333;text-indent:18px;
  1352. }
  1353. a::after{
  1354. content: '';display: block;
  1355. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1356. width:6px;height:6px;
  1357. }
  1358. a:nth-of-type(n+4){display:none;}
  1359. }
  1360. }
  1361. .phone_box_5{
  1362. width:92%;margin:0px auto 0px;
  1363. .phone_box_1_head{
  1364. height:50px;line-height:50px;
  1365. background:#fff;border-bottom:1px solid #E6E6E6;
  1366. margin-top:15px;width:100%;
  1367. a{
  1368. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1369. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1370. position:relative;padding-left:8px;
  1371. }
  1372. a::before{
  1373. content: '';display: block;
  1374. position:absolute;left:0px;top:18px;
  1375. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1376. width:3px;height:15px;
  1377. }
  1378. }
  1379. .phone_box_1_img_ul{
  1380. height:55vw;overflow:hidden;margin-top:15px;
  1381. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1382. a{display:block;width:100%;height:100%;}
  1383. img{display:block;width:100%;height:100%;}
  1384. span{
  1385. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1386. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1387. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1388. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1389. }
  1390. >div>a:nth-of-type(n+2){display:none;}
  1391. }
  1392. .phone_box_1_ul{
  1393. overflow:hidden;height:123px;margin:8px auto 0px;
  1394. >div{width:100%;height:100%;}
  1395. a{
  1396. width:100%!important;display:block;height:40px;line-height:40px;
  1397. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1398. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1399. font-size:16px;color:#333;text-indent:18px;
  1400. }
  1401. a::after{
  1402. content: '';display: block;
  1403. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1404. width:6px;height:6px;
  1405. }
  1406. a:nth-of-type(n+4){display:none;}
  1407. }
  1408. }
  1409. .phone_box_6{
  1410. width:92%;margin:0px auto 0px;
  1411. .phone_box_1_head{
  1412. height:50px;line-height:50px;
  1413. background:#fff;border-bottom:1px solid #E6E6E6;
  1414. margin-top:15px;width:100%;
  1415. a{
  1416. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1417. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1418. position:relative;padding-left:8px;
  1419. }
  1420. a::before{
  1421. content: '';display: block;
  1422. position:absolute;left:0px;top:18px;
  1423. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1424. width:3px;height:15px;
  1425. }
  1426. }
  1427. .phone_box_1_img_ul{
  1428. height:55vw;overflow:hidden;margin-top:15px;
  1429. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1430. a{display:block;width:100%;height:100%;}
  1431. img{display:block;width:100%;height:100%;}
  1432. span{
  1433. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1434. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1435. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1436. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1437. }
  1438. >div>a:nth-of-type(n+2){display:none;}
  1439. }
  1440. .phone_box_1_ul{
  1441. overflow:hidden;height:123px;margin:8px auto 0px;
  1442. >div{width:100%;height:100%;}
  1443. a{
  1444. width:100%!important;display:block;height:40px;line-height:40px;
  1445. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1446. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1447. font-size:16px;color:#333;text-indent:18px;
  1448. }
  1449. a::after{
  1450. content: '';display: block;
  1451. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1452. width:6px;height:6px;
  1453. }
  1454. a:nth-of-type(n+4){display:none;}
  1455. }
  1456. }
  1457. .phone_box_7{
  1458. width:92%;margin:0px auto 0px;
  1459. .phone_box_1_head{
  1460. height:50px;line-height:50px;
  1461. background:#fff;border-bottom:1px solid #E6E6E6;
  1462. margin-top:15px;width:100%;
  1463. a{
  1464. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1465. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1466. position:relative;padding-left:8px;
  1467. }
  1468. a::before{
  1469. content: '';display: block;
  1470. position:absolute;left:0px;top:18px;
  1471. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1472. width:3px;height:15px;
  1473. }
  1474. }
  1475. .phone_box_1_img_ul{
  1476. height:55vw;overflow:hidden;margin-top:15px;
  1477. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1478. a{display:block;width:100%;height:100%;}
  1479. img{display:block;width:100%;height:100%;}
  1480. span{
  1481. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1482. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1483. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1484. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1485. }
  1486. >div>a:nth-of-type(n+2){display:none;}
  1487. }
  1488. .phone_box_1_ul{
  1489. overflow:hidden;height:123px;margin:15px auto 0px;
  1490. >div{width:100%;height:100%;}
  1491. a{
  1492. width:100%!important;display:block;height:40px;line-height:40px;
  1493. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1494. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1495. font-size:16px;color:#333;text-indent:18px;
  1496. }
  1497. a::after{
  1498. content: '';display: block;
  1499. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1500. width:6px;height:6px;
  1501. }
  1502. a:nth-of-type(n+4){display:none;}
  1503. }
  1504. }
  1505. .phone_box_8{
  1506. width:92%;margin:0px auto 0px;
  1507. .phone_box_1_head{
  1508. height:50px;line-height:50px;
  1509. background:#fff;border-bottom:1px solid #E6E6E6;
  1510. margin-top:15px;width:100%;
  1511. a{
  1512. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1513. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1514. position:relative;padding-left:8px;
  1515. }
  1516. a::before{
  1517. content: '';display: block;
  1518. position:absolute;left:0px;top:18px;
  1519. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1520. width:3px;height:15px;
  1521. }
  1522. }
  1523. .phone_box_1_img_ul{
  1524. height:55vw;overflow:hidden;margin-top:15px;
  1525. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1526. a{display:block;width:100%;height:100%;}
  1527. img{display:block;width:100%;height:100%;}
  1528. span{
  1529. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1530. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1531. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1532. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1533. }
  1534. >div>a:nth-of-type(n+2){display:none;}
  1535. }
  1536. .phone_box_1_ul{
  1537. overflow:hidden;height:123px;margin:15px auto 0px;
  1538. >div{width:100%;height:100%;}
  1539. a{
  1540. width:100%!important;display:block;height:40px;line-height:40px;
  1541. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1542. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1543. font-size:16px;color:#333;text-indent:18px;
  1544. }
  1545. a::after{
  1546. content: '';display: block;
  1547. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1548. width:6px;height:6px;
  1549. }
  1550. a:nth-of-type(n+4){display:none;}
  1551. }
  1552. }
  1553. .phone_box_9{
  1554. width:92%;margin:0px auto 0px;
  1555. .phone_box_1_head{
  1556. height:50px;line-height:50px;
  1557. background:#fff;border-bottom:1px solid #E6E6E6;
  1558. margin-top:15px;width:100%;
  1559. a{
  1560. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1561. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1562. position:relative;padding-left:8px;
  1563. }
  1564. a::before{
  1565. content: '';display: block;
  1566. position:absolute;left:0px;top:18px;
  1567. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1568. width:3px;height:15px;
  1569. }
  1570. }
  1571. .phone_box_1_img_ul{
  1572. height:55vw;overflow:hidden;margin-top:15px;
  1573. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1574. a{display:block;width:100%;height:100%;}
  1575. img{display:block;width:100%;height:100%;}
  1576. span{
  1577. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1578. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1579. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1580. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1581. }
  1582. >div>a:nth-of-type(n+2){display:none;}
  1583. }
  1584. .phone_box_1_ul{
  1585. overflow:hidden;height:123px;margin:15px auto 0px;
  1586. >div{width:100%;height:100%;}
  1587. a{
  1588. width:100%!important;display:block;height:40px;line-height:40px;
  1589. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1590. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1591. font-size:16px;color:#333;text-indent:18px;
  1592. }
  1593. a::after{
  1594. content: '';display: block;
  1595. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1596. width:6px;height:6px;
  1597. }
  1598. a:nth-of-type(n+4){display:none;}
  1599. }
  1600. }
  1601. .phone_box_10{
  1602. width:92%;margin:0px auto 0px;
  1603. .phone_box_1_head{
  1604. height:50px;line-height:50px;
  1605. background:#fff;border-bottom:1px solid #E6E6E6;
  1606. margin-top:15px;width:100%;
  1607. a{
  1608. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1609. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1610. position:relative;padding-left:8px;
  1611. }
  1612. a::before{
  1613. content: '';display: block;
  1614. position:absolute;left:0px;top:18px;
  1615. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1616. width:3px;height:15px;
  1617. }
  1618. }
  1619. .phone_box_1_img_ul{
  1620. height:55vw;overflow:hidden;margin-top:15px;
  1621. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1622. a{display:block;width:100%;height:100%;}
  1623. img{display:block;width:100%;height:100%;}
  1624. span{
  1625. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1626. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1627. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1628. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1629. }
  1630. >div>a:nth-of-type(n+2){display:none;}
  1631. }
  1632. .phone_box_1_ul{
  1633. overflow:hidden;height:123px;margin:15px auto 0px;
  1634. >div{width:100%;height:100%;}
  1635. a{
  1636. width:100%!important;display:block;height:40px;line-height:40px;
  1637. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1638. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1639. font-size:16px;color:#333;text-indent:18px;
  1640. }
  1641. a::after{
  1642. content: '';display: block;
  1643. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1644. width:6px;height:6px;
  1645. }
  1646. a:nth-of-type(n+4){display:none;}
  1647. }
  1648. }
  1649. .phone_box_11{
  1650. width:92%;margin:0px auto 0px;
  1651. .phone_box_1_head{
  1652. height:50px;line-height:50px;
  1653. background:#fff;border-bottom:1px solid #E6E6E6;
  1654. margin-top:15px;width:100%;
  1655. a{
  1656. float:left;height:50px;line-height:50px;margin:0;position:relative;
  1657. color:#489d97;font-size:18px; font-weight:bold;box-sizing:border-box;
  1658. position:relative;padding-left:8px;
  1659. }
  1660. a::before{
  1661. content: '';display: block;
  1662. position:absolute;left:0px;top:18px;
  1663. background: linear-gradient(to top, #0998A9, #6ADDD6);
  1664. width:3px;height:15px;
  1665. }
  1666. }
  1667. .phone_box_1_img_ul{
  1668. height:55vw;overflow:hidden;margin-top:15px;
  1669. div{width:100%;float:none;height:55vw;border-radius:10px;position:relative;overflow:hidden;}
  1670. a{display:block;width:100%;height:100%;}
  1671. img{display:block;width:100%;height:100%;}
  1672. span{
  1673. position:absolute;width:100%;height:66px;line-height:90px;color:#fff; font-size:16px;
  1674. left:0px;bottom:0px;padding:0px 5%;box-sizing:border-box; display:block;
  1675. background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  1676. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1677. }
  1678. >div>a:nth-of-type(n+2){display:none;}
  1679. }
  1680. .phone_box_1_ul{
  1681. overflow:hidden;height:123px;margin:15px auto 0px;
  1682. >div{width:100%;height:100%;}
  1683. a{
  1684. width:100%!important;display:block;height:40px;line-height:40px;
  1685. border-bottom:1px solid #E6E6E6;display:block;position:relative;
  1686. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  1687. font-size:16px;color:#333;text-indent:18px;
  1688. }
  1689. a::after{
  1690. content: '';display: block;
  1691. position:absolute;left:0px;top:18px;background:#E6E6E6;
  1692. width:6px;height:6px;
  1693. }
  1694. a:nth-of-type(n+4){display:none;}
  1695. }
  1696. }
  1697. .phone_none{display:none;}
  1698. }
  1699. </style>