index.html 61 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057
  1. <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  2. xsi:schemaLocation="https://www.thymeleaf.org ">
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8"/>
  6. <meta name="referrer" content="never">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  8. <template th:replace="components/head-link"></template>
  9. <link href="/css/activity/normalize.css" rel="stylesheet" type="text/css">
  10. <link rel="stylesheet" href="/css/activity/swiper.min.css"/>
  11. <link th:href="@{/css/quickOperation/index.css(v=${version})}" rel="stylesheet" type="text/css">
  12. <template th:replace="components/analysis"></template>
  13. <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
  14. </head>
  15. <body>
  16. <input type="hidden" th:value="${coreServer}" id="coreServer">
  17. <input type="hidden" th:value="${agent}" id="userAgent">
  18. <!-- 引用头部 -->
  19. <template th:replace="components/header"></template>
  20. <div id="app" :style="{backgroundColor:pageInfo.backgroundColour || '',backgroundImage:'url('+pageInfo.backgroundImage+')'}">
  21. <!-- 大图 -->
  22. <div class="banner-container">
  23. <a :href="pageInfo && pageInfo.headLink" class="banner">
  24. <img :src="pageInfo && pageInfo.crmHeadImage" alt="" v-if="isMobile"/>
  25. <img :src="pageInfo && pageInfo.headImage" alt="" v-else/>
  26. </a>
  27. </div>
  28. <template v-for="(floorData,index) in floorList">
  29. <div class="cm-floor">
  30. <div class="cm-container">
  31. <!-- 楼层标题 -->
  32. <div
  33. class="cm-row cm-floor-title cm-p-l-4 cm-m-b-4"
  34. :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-p-r-4','cm-relative']:''"
  35. >
  36. <div :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-col-md-40', 'cm-col-xs-36']:''">
  37. <div class="cm-title cm-text-ellipsis-1">{{floorData.title}}</div>
  38. <div class="cm-subtitle cm-text-ellipsis-1">{{floorData.detail}}</div>
  39. </div>
  40. <div
  41. class="cm-tabs cm-p-t-12 cm-absolute cm-bottom-right"
  42. v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)"
  43. >
  44. <div class="cm-tab-content cm-p-r-4">
  45. <div
  46. class="cm-tab"
  47. :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 0}"
  48. @click="handleTabClick(floorData.floorContent.templateType,index,0)"
  49. >
  50. <span>{{floorData.floorContent.displayDate1 | tabTime}}</span>
  51. </div>
  52. <div
  53. class="cm-tab"
  54. :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 1}"
  55. @click="handleTabClick(floorData.floorContent.templateType,index, 1)"
  56. >
  57. <span>{{floorData.floorContent.displayDate2 | tabTime}}</span>
  58. </div>
  59. <div v-if="floorData.floorContent.templateType !== '25'"
  60. class="cm-tab"
  61. :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 2}"
  62. @click="handleTabClick(floorData.floorContent.templateType,index, 2)"
  63. >
  64. <span>{{floorData.floorContent.displayDate3 | tabTime}}</span>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <!-- 商品楼层11-21 -->
  70. <template v-if="fetchTemplate([11,12,13,14,15,16,17,18,19,20,21],floorData.floorContent.templateType)">
  71. <!-- 轮播图 -->
  72. <div class="cm-row cm-relative cm-swiper" v-if="floorData.floorContent.templateType == 21">
  73. <div class="cm-p-a-4">
  74. <div class="swiper-container" :id="'swiper-template-' + index" data-swiper-type="1-6-2-2">
  75. <div class="swiper-wrapper">
  76. <div class="swiper-slide" v-for="(pros , index) in floorData.floorImageList">
  77. <a :target="pros.link ? '_blank' : ''" :href="reallink(pros.link)">
  78. <div class="cm-product-item hover-class bg-white">
  79. <div class="aspect">
  80. <img width="100%" height="100%" src="/img/activity/placeholder.png"
  81. :data-original="pros.image" alt=""/>
  82. </div>
  83. <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
  84. <div class="cm-tags cm-p-b-2">
  85. <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
  86. </div>
  87. <div class="cm-product-title cm-text-ellipsis-2 h44">
  88. <span class="cm-meibohui-tag"
  89. v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
  90. {{pros.name}}
  91. </div>
  92. <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
  93. <!-- <span class="cm-tag color2" v-if="pros.product.couponsLogo">优惠券</span>-->
  94. <span class="cm-tag color3" v-if="pros.listType == 2">{{ pros.label }}</span>
  95. <template v-if="(pros.product.productCategory == 1 && params.userId>0) || GLOBAL_USER_ID && GLOBAL_USER_ID>0">
  96. <span class="cm-tag color3" v-if="pros.product.actStatus==1">
  97. {{pros.product.promotions.name}}
  98. <span class="red" v-if="pros.priceFlag != 1 && PromotionsFormat(pros.product.promotions)">:¥{{pros.product.price | NumFormat}}</span>
  99. </span>
  100. </template>
  101. </div>
  102. <div class="cm-prodcut-price h24">
  103. <div class="pro-price" v-if="pros.listType == 1">
  104. <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
  105. <template v-if="pros.product.productCategory==1">
  106. <!-- 样式1 价格未公开-->
  107. <template v-if="pros.product.priceFlag==1">
  108. <div class="price-tag cm-left"></div>
  109. <div class="price cm-left">¥价格未公开</div>
  110. </template>
  111. <template v-else>
  112. <!-- 样式2-->
  113. <template v-if="(pros.product.priceFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
  114. <div class="price-tag cm-left"></div>
  115. <div class="price cm-left"
  116. :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
  117. <span class="red">
  118. ¥{{(PromotionsFormat(pros.product.promotions) ? pros.product.originalPrice
  119. : pros.product.price) | NumFormat }}
  120. </span>
  121. </div>
  122. </template>
  123. <!-- 样式3 -->
  124. <template v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4 && GLOBAL_VIP_FLAG!=1">
  125. <div class="price-tag cm-left"></div>
  126. <div class="price cm-left">
  127. <span>¥会员可见</span></div>
  128. </template>
  129. <!-- 样式4 -->
  130. <template v-else>
  131. <div class="price-tag cm-left"></div>
  132. <div class="price cm-left">
  133. <span>¥</span>
  134. <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
  135. </div>
  136. </template>
  137. </template>
  138. </template>
  139. <!-- 样式5 -->
  140. <template v-else>
  141. <div class="price-tag cm-left"></div>
  142. <div class="price" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
  143. <div class="price cm-left" v-else>
  144. <span class="red">¥{{ pros.product.price | NumFormat }}</span>
  145. </div>
  146. </template>
  147. </template>
  148. <template v-else>
  149. <!-- 样式6 -->
  150. <template v-if="pros.product.productCategory == 1">
  151. <div class="price-tag cm-left" v-if="params.userId>0"></div>
  152. <div class="price cm-left ">
  153. <span>¥</span>
  154. <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
  155. </div>
  156. </template>
  157. <!-- 样式7 -->
  158. <template v-else>
  159. <div class="price-tag cm-left"></div>
  160. <div class="price cm-left"><span>¥登录可见</span></div>
  161. </template>
  162. </template>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. </a>
  168. </div>
  169. </div>
  170. <!-- Add Pagination -->
  171. <div class="swiper-pagination" v-show="floorData.floorImageList.length > 6"></div>
  172. <!-- Add Navigation -->
  173. <div class="swiper-button-prev swiper-button-white cm-none"></div>
  174. <div class="swiper-button-next swiper-button-white cm-none"></div>
  175. </div>
  176. </div>
  177. </div>
  178. <!-- 普通列表 -->
  179. <div class="cm-row" v-else>
  180. <div class="fold-box cm-clearfix"
  181. :data-floor-type="floorData.floorContent.templateType + '-' + index">
  182. <!-- banner -->
  183. <template v-for="(i,index) in 5">
  184. <div
  185. class="cm-p-a-4"
  186. :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index], 'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
  187. v-if="floorData.floorContent['pcAdsImage' + (index + 1)] && floorData.floorContent.templateType != 20"
  188. >
  189. <div class="aspect"
  190. :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
  191. <a :target="floorData.floorContent['adsLink' + (index + 1)] ? '_blank' : ''"
  192. :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
  193. <img
  194. width="100%"
  195. height="100%"
  196. :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
  197. alt="/banner.jpg"
  198. v-if="isMobile && floorData.floorContent['appletsAdsImage' + (index + 1)]"
  199. />
  200. <img
  201. width="100%"
  202. height="100%"
  203. :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
  204. alt="/banner.jpg"
  205. v-if="!isMobile && floorData.floorContent['pcAdsImage' + (index + 1)]"
  206. />
  207. </a>
  208. </div>
  209. </div>
  210. </template>
  211. <!-- banner END -->
  212. <div class="cm-col-md-10 cm-col-xs-30" v-for="(pros , index) in makeList(floorData,index)">
  213. <div class="cm-p-a-4">
  214. <a :target="pros.link ? '_blank' : ''" :href="pros.link">
  215. <div class="cm-product-item hover-class bg-white">
  216. <div class="aspect">
  217. <img width="100%" height="100%" src="/img/activity/placeholder.png"
  218. :data-original="pros.image" alt=""/>
  219. </div>
  220. <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
  221. <div class="cm-tags cm-p-b-2">
  222. <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
  223. </div>
  224. <div class="cm-product-title cm-text-ellipsis-2 h44">
  225. <span class="cm-meibohui-tag"
  226. v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
  227. {{pros.name}}
  228. </div>
  229. <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
  230. <!-- <span class="cm-tag color3" v-if="pros.product.couponsLogo">优惠券</span>-->
  231. <span class="cm-tag color2" v-if="pros.listType == 2">{{ pros.label }}</span>
  232. <template v-if="(pros.product.productCategory == 1 && params.userId>0) || GLOBAL_USER_ID && GLOBAL_USER_ID>0">
  233. <span class="cm-tag color3" v-if="pros.product.actStatus==1">
  234. {{pros.product.promotions.name}}
  235. <span class="red" v-if="pros.priceFlag != 1 && PromotionsFormat(pros.product.promotions)">:¥{{pros.product.price | NumFormat}}</span>
  236. </span>
  237. </template>
  238. </div>
  239. <div class="cm-prodcut-price h24">
  240. <div class="pro-price cm-clearfix" v-if="pros.listType == 1">
  241. <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
  242. <template v-if="pros.product.productCategory == 1">
  243. <!-- 样式1 价格未公开-->
  244. <template v-if="pros.product.priceFlag == 1">
  245. <div class="price-tag cm-left"></div>
  246. <div class="price cm-left">¥价格未公开</div>
  247. </template>
  248. <template v-else>
  249. <!-- 样式2-->
  250. <template v-if="(pros.product.priceFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
  251. <div class="price-tag cm-left"></div>
  252. <div class="price cm-left" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
  253. <span class="red">
  254. ¥{{(PromotionsFormat(pros.product.promotions) ? pros.product.originalPrice
  255. : pros.product.price) | NumFormat }}
  256. </span>
  257. </div>
  258. </template>
  259. <!-- 样式3 -->
  260. <template v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4 && GLOBAL_VIP_FLAG!=1">
  261. <div class="price-tag cm-left" v-if="pros.product.actStatus==1"></div>
  262. <div class="price cm-left"><span>¥会员可见</span></div>
  263. </template>
  264. <!-- 样式4 -->
  265. <template v-else>
  266. <div class="price-tag cm-left" v-if="pros.product.actStatus==1"></div>
  267. <div class="price cm-left"><span>¥</span>
  268. <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
  269. </div>
  270. </template>
  271. </template>
  272. </template>
  273. <!-- 样式5 -->
  274. <template v-else>
  275. <div class="price-tag cm-left"></div>
  276. <div class="price" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
  277. <div class="price cm-left" v-else>
  278. <span class="red">¥{{ pros.product.price | NumFormat }}</span>
  279. </div>
  280. </template>
  281. </template>
  282. <template v-else>
  283. <!-- 样式6 -->
  284. <template v-if="pros.product.productCategory == 1">
  285. <div class="price-tag cm-left" v-if="params.userId>0"></div>
  286. <div class="price cm-left ">
  287. <span>¥</span>
  288. <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
  289. </div>
  290. </template>
  291. <!-- 样式7 -->
  292. <template v-else>
  293. <div class="price-tag cm-left"></div>
  294. <div class="price cm-left"><span>¥登录可见</span></div>
  295. </template>
  296. </template>
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301. </a>
  302. </div>
  303. </div>
  304. <template v-for="(i,index) in 5">
  305. <div
  306. class="cm-p-a-4"
  307. :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index], 'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
  308. v-if="floorData.floorContent.templateType == 20"
  309. >
  310. <div class="aspect"
  311. :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
  312. <a :target="floorData.floorContent['adsLink' + (index + 1)] ? '_blank' : ''"
  313. :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
  314. <img
  315. width="100%"
  316. height="100%"
  317. :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
  318. alt="/banner.jpg"
  319. v-if="isMobile && floorData.floorContent['appletsAdsImage' + (index + 1)]"
  320. />
  321. <img
  322. width="100%"
  323. height="100%"
  324. :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
  325. alt="/banner.jpg"
  326. v-if="!isMobile && floorData.floorContent['appletsAdsImage' + (index + 1)]"
  327. />
  328. </a>
  329. </div>
  330. </div>
  331. </template>
  332. </div>
  333. <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
  334. <div
  335. class="cm-toggle-btn"
  336. :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
  337. @click="toggleMore(floorData.floorContent.templateType, index)"
  338. >
  339. 查看更多
  340. </div>
  341. </div>
  342. </div>
  343. </template>
  344. <!-- 文章楼层4,5 -->
  345. <!-- fetchTemplate([4,5],floorData.floorContent.templateType) -->
  346. <template v-if="fetchTemplate([4,5],floorData.floorContent.templateType)">
  347. <!-- 轮播式 pc -->
  348. <div class="cm-row cm-relative cm-swiper" v-show="!isMobile">
  349. <div class="cm-p-a-4">
  350. <template v-if="fetchTemplate([4,5],floorData.floorContent.templateType)">
  351. <div class="cm-swiper-button-prev cm-absolute cm-pc-only"
  352. @click="handlePrevClick(index)"></div>
  353. <div class="cm-swiper-button-next cm-absolute cm-pc-only"
  354. @click="handleNextClick(index)"></div>
  355. </template>
  356. <div
  357. class="swiper-container"
  358. :class="{'no-bottom':fetchTemplate([4,5],floorData.floorContent.templateType)}"
  359. :id="'swiper-template-' + index"
  360. :data-swiper-type="getArticleScalcMap(floorData.floorContent.templateType).swiper"
  361. >
  362. <div class="swiper-wrapper">
  363. <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
  364. :key="item_index">
  365. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
  366. <!-- 模板4 5 6 -->
  367. <div class="cm-article-item bg-white">
  368. <div class="cm-article-cover aspect"
  369. :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
  370. <img width="100%" height="100%" :src="item.appletsImage"
  371. :alt="item.name" v-if="isMobile"/>
  372. <img width="100%" height="100%" :src="item.image" :alt="item.name"
  373. v-else/>
  374. </div>
  375. <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
  376. {{item.name}}
  377. </div>
  378. <div class="cm-m-a-8">
  379. <div class="cm-article-desc cm-text-ellipsis-2 h56">
  380. {{item.content}}
  381. </div>
  382. </div>
  383. </div>
  384. </a>
  385. </div>
  386. </div>
  387. <!-- Add Pagination -->
  388. <div class="swiper-pagination"
  389. v-show="isMobile || !fetchTemplate([4,5],floorData.floorContent.templateType)"></div>
  390. <!-- Add Navigation -->
  391. <div class="swiper-button-prev swiper-button-white cm-none"></div>
  392. <div class="swiper-button-next swiper-button-white cm-none"></div>
  393. </div>
  394. </div>
  395. </div>
  396. <!-- 列表式 mobile 3 4 6 -->
  397. <div class="cm-row"
  398. v-show="isMobile && fetchTemplate([3,4,6],floorData.floorContent.templateType)">
  399. <div class="fold-box cm-clearfix"
  400. :data-floor-type="floorData.floorContent.templateType + '-' + index">
  401. <div
  402. class="cm-col-md-30"
  403. :class="floorData.floorContent.templateType == 6 ? 'cm-col-xs-30' : 'cm-col-xs-60'"
  404. v-for="(item, item_index) in makeList(floorData,index)"
  405. :key="item_index"
  406. >
  407. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
  408. <div class="cm-p-a-4">
  409. <!-- 3 -->
  410. <div
  411. class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
  412. v-if="floorData.floorContent.templateType == 3"
  413. >
  414. <div class="cm-left cm-article-cover cover-168-168">
  415. <img width="100%" height="100%" :src="item.appletsImage"
  416. :alt="item.name" v-if="isMobile"/>
  417. <img width="100%" height="100%" :src="item.image" :alt="item.name"
  418. v-else/>
  419. </div>
  420. <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
  421. <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
  422. {{item.name}}
  423. </div>
  424. <div class="cm-line"></div>
  425. <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
  426. {{item.content}}
  427. </div>
  428. </div>
  429. </div>
  430. <!-- 4 6 -->
  431. <div class="cm-article-item bg-white" v-else>
  432. <div class="cm-article-cover aspect"
  433. :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
  434. <img width="100%" height="100%" :src="item.appletsImage"
  435. :alt="item.name" v-if="isMobile"/>
  436. <img width="100%" height="100%" :src="item.image" :alt="item.name"
  437. v-else/>
  438. </div>
  439. <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
  440. {{item.name}}
  441. </div>
  442. <div class="cm-m-a-8">
  443. <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
  444. </div>
  445. </div>
  446. </div>
  447. </div>
  448. </a>
  449. </div>
  450. </div>
  451. <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
  452. <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
  453. <div
  454. class="cm-toggle-btn"
  455. :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
  456. @click="toggleMore(floorData.floorContent.templateType, index)"
  457. >
  458. 查看更多
  459. </div>
  460. </div>
  461. </div>
  462. <!-- 左右滑动式 mobile 5-->
  463. <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 5">
  464. <div class="cm-p-a-4">
  465. <div class="cm-scroll-container">
  466. <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
  467. :key="item_index">
  468. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
  469. <div class="cm-article-item bg-white">
  470. <div class="cm-article-cover aspect"
  471. :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
  472. <img width="100%" height="100%" :src="item.appletsImage"
  473. :alt="item.name" v-if="isMobile"/>
  474. <img width="100%" height="100%" :src="item.image" :alt="item.name"
  475. v-else/>
  476. </div>
  477. <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
  478. {{item.name}}
  479. </div>
  480. <div class="cm-m-a-8">
  481. <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
  482. </div>
  483. </div>
  484. </div>
  485. </a>
  486. </div>
  487. </div>
  488. </div>
  489. </div>
  490. </template>
  491. <!-- 图片楼层1 2 3 6,9 -->
  492. <template v-if="fetchTemplate([1,2,3,6,9,26,28,30,32],floorData.floorContent.templateType)">
  493. <div class="cm-row cm-relative cm-swiper" v-if="!isMobile || !fetchTemplate([3,4,6,10],floorData.floorContent.templateType)">
  494. <div class="cm-p-a-4">
  495. <template v-if="!isMobile">
  496. <div class="cm-swiper-button-prev cm-absolute" @click="handlePrevClick(index)"></div>
  497. <div class="cm-swiper-button-next cm-absolute" @click="handleNextClick(index)"></div>
  498. </template>
  499. <div
  500. class="swiper-container"
  501. :id="'swiper-template-' + index"
  502. :data-swiper-type="getImageScalcMap('10').swiper"
  503. >
  504. <div class="swiper-wrapper">
  505. <div class="swiper-slide" v-for="(item, item_index) in getGroupMenu(floorData.floorImageList, floorData.floorContent.templateType)"
  506. :key="item_index">
  507. <div :class="'slide-template-' + floorData.floorContent.templateType" class="template-rows-2" :style="{display: 'grid', gridTemplateRows: 'repeat(2, 1fr)', gridTemplateColumns: `repeat(${gridTemplateColumns[floorData.floorContent.templateType]}, 1fr)`, gridGap: '16px'}">
  508. <template v-for="i in item" :key="i.id" v-if="fetchTemplate([1,2,9,26,28],floorData.floorContent.templateType)">
  509. <div class="slide-template-2-img hover-class" @click="handleClick(i)">
  510. <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="150px"/>
  511. <div class="has-player"
  512. v-if="floorData.floorContent.templateClassify == 4"></div>
  513. </div>
  514. </template>
  515. <template v-for="i in item" :key="i.id" v-if="fetchTemplate([30,32],floorData.floorContent.templateType)" @click="onPlayVideo(i.link)">
  516. <div class="slide-template-2-img" @click="handleClick(i)">
  517. <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="150px"/>
  518. <div class="has-player hover-class"
  519. v-if="floorData.floorContent.templateClassify == 4"></div>
  520. </div>
  521. </template>
  522. <template v-if="fetchTemplate([3],floorData.floorContent.templateType)" v-for="i in item" :key="i.id">
  523. <div class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between" @click="handleClick(i)">
  524. <div class="cm-left cm-article-cover cover-168-168">
  525. <img width="100%" height="100%" :src="isMobile ? i.appletsImage : i.image"
  526. :alt="i.name"/>
  527. </div>
  528. <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
  529. <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
  530. {{i.name}}
  531. </div>
  532. <div class="cm-line"></div>
  533. <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
  534. {{i.content}}
  535. </div>
  536. </div>
  537. </div>
  538. </template>
  539. <template v-if="fetchTemplate([6],floorData.floorContent.templateType)" v-for="i in item" :key="i.id">
  540. <div class="cm-article-item bg-white">
  541. <div class="cm-article-cover aspect"
  542. :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
  543. <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="100%"/>
  544. </div>
  545. <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
  546. {{i.name}}
  547. </div>
  548. <div class="cm-m-a-8">
  549. <div class="cm-article-desc cm-text-ellipsis-2 h56">
  550. {{i.content}}
  551. </div>
  552. </div>
  553. </div>
  554. </template>
  555. </div>
  556. </div>
  557. </div>
  558. <!-- Add Pagination -->
  559. <div class="swiper-pagination" v-show="getGroupMenu(floorData.floorImageList, floorData.floorContent.templateType).length > 1"></div>
  560. <!-- Add Navigation -->
  561. <div class="swiper-button-prev swiper-button-white cm-none"></div>
  562. <div class="swiper-button-next swiper-button-white cm-none"></div>
  563. </div>
  564. </div>
  565. </div>
  566. <!-- 模板346-->
  567. <div class="cm-row"
  568. v-show="isMobile && fetchTemplate([3,4,6],floorData.floorContent.templateType)">
  569. <div class="fold-box cm-clearfix"
  570. :data-floor-type="floorData.floorContent.templateType + '-' + index">
  571. <div
  572. class="cm-col-md-30"
  573. :class="floorData.floorContent.templateType == 6 ? 'cm-col-xs-30' : 'cm-col-xs-60'"
  574. v-for="(item, item_index) in makeList(floorData,index)"
  575. :key="item_index"
  576. >
  577. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
  578. <div class="cm-p-a-4">
  579. <!-- 3 -->
  580. <div
  581. class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
  582. v-if="floorData.floorContent.templateType == 3"
  583. >
  584. <div class="cm-left cm-article-cover cover-168-168">
  585. <img width="100%" height="100%" :src="item.appletsImage"
  586. :alt="item.name" v-if="isMobile"/>
  587. <img width="100%" height="100%" :src="item.image" :alt="item.name"
  588. v-else/>
  589. </div>
  590. <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
  591. <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
  592. {{item.name}}
  593. </div>
  594. <div class="cm-line"></div>
  595. <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
  596. {{item.content}}
  597. </div>
  598. </div>
  599. </div>
  600. <!-- 4 6 -->
  601. <div class="cm-article-item bg-white" v-else>
  602. <div class="cm-article-cover aspect">
  603. <img width="100%" height="100%" :src="item.appletsImage"
  604. :alt="item.name" v-if="isMobile"/>
  605. <img width="100%" height="100%" :src="item.image" :alt="item.name"
  606. v-else/>
  607. </div>
  608. <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
  609. {{item.name}}
  610. </div>
  611. <div class="cm-m-a-8">
  612. <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
  613. </div>
  614. </div>
  615. </div>
  616. </div>
  617. </a>
  618. </div>
  619. </div>
  620. <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
  621. <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
  622. <div
  623. class="cm-toggle-btn"
  624. :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
  625. @click="toggleMore(floorData.floorContent.templateType, index)"
  626. >
  627. 查看更多
  628. </div>
  629. </div>
  630. </div>
  631. <!-- 列表式 mobile 8 10 -->
  632. <div class="cm-row" v-show="fetchTemplate([8,10],floorData.floorContent.templateType) && isMobile">
  633. <div class="fold-box cm-clearfix"
  634. :data-floor-type="floorData.floorContent.templateType + '-' + index">
  635. <div class="cm-col-md-30 cm-col-xs-60">
  636. <div class="cm-p-a-4" v-for="(item, item_index) in makeList(floorData,index)"
  637. :key="item_index">
  638. <div class="bg-white aspect"
  639. :data-scalc="getImageScalcMap('10').scalc">
  640. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
  641. <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
  642. v-if="isMobile"/>
  643. <img width="100%" height="100%" :src="item.image" alt="" v-else/>
  644. </a>
  645. </div>
  646. </div>
  647. </div>
  648. </div>
  649. <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
  650. <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
  651. <div
  652. class="cm-toggle-btn"
  653. :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
  654. @click="toggleMore(floorData.floorContent.templateType, index)"
  655. >
  656. 查看更多
  657. </div>
  658. </div>
  659. </div>
  660. <!-- 左右滑动式 mobile 7 27 31-->
  661. <div class="cm-row" v-show="fetchTemplate([7,27,31],floorData.floorContent.templateType) && isMobile">
  662. <div class="cm-p-a-4">
  663. <div class="cm-scroll-container">
  664. <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
  665. :key="item_index">
  666. <div class="bg-white aspect cm-relative"
  667. :data-scalc="getImageScalcMap('10').scalc">
  668. <div v-if="fetchTemplate([31],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
  669. <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
  670. v-if="isMobile"/>
  671. <img width="100%" height="100%" :src="item.image" alt="" v-else/>
  672. <div class="has-player"
  673. v-if="floorData.floorContent.templateClassify == 4"></div>
  674. </div>
  675. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
  676. <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
  677. v-if="isMobile"/>
  678. <img width="100%" height="100%" :src="item.image" alt="" v-else/>
  679. <div class="has-player"
  680. v-if="floorData.floorContent.templateClassify == 4"></div>
  681. </a>
  682. </div>
  683. </div>
  684. </div>
  685. </div>
  686. </div>
  687. </template>
  688. <template v-if="fetchTemplate([7,8,10,27,29,31,33],floorData.floorContent.templateType)">
  689. <!-- 轮播式 mobile(1 2 9) pc(全部)-->
  690. <div
  691. class="cm-row cm-relative cm-swiper"
  692. v-show="!isMobile || (fetchTemplate([7,8,27,29,31,33],floorData.floorContent.templateType) && isMobile)"
  693. >
  694. <div class="cm-p-a-4">
  695. <template v-if="fetchTemplate([7,8,10],floorData.floorContent.templateType)">
  696. <div class="cm-swiper-button-prev cm-absolute" @click="handlePrevClick(index)"></div>
  697. <div class="cm-swiper-button-next cm-absolute" @click="handleNextClick(index)"></div>
  698. </template>
  699. <div
  700. class="swiper-container"
  701. :id="'swiper-template-' + index"
  702. :class="{'no-bottom':fetchTemplate([7,8,10],floorData.floorContent.templateType)}"
  703. :data-swiper-type="getImageScalcMap(floorData.floorContent.templateType).swiper"
  704. >
  705. <div class="swiper-wrapper">
  706. <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
  707. :key="item_index">
  708. <div
  709. class="bg-white hover-class aspect cm-relative"
  710. :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc"
  711. >
  712. <div v-if="fetchTemplate([31,33],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
  713. <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
  714. v-if="isMobile"/>
  715. <img width="100%" height="100%" :src="item.image" alt="" v-else/>
  716. <div class="has-player"
  717. v-if="floorData.floorContent.templateClassify == 4"></div>
  718. </div>
  719. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
  720. <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
  721. v-if="isMobile"/>
  722. <img width="100%" height="100%" :src="item.image" alt="" v-else/>
  723. <div class="has-player"
  724. v-if="floorData.floorContent.templateClassify == 4"></div>
  725. </a>
  726. </div>
  727. </div>
  728. </div>
  729. <!-- Add Pagination -->
  730. <div class="swiper-pagination"
  731. v-show="(isMobile || !fetchTemplate([7,8,10],floorData.floorContent.templateType)) && floorData.floorImageList.length > 4"></div>
  732. <!-- Add Navigation -->
  733. <div class="swiper-button-prev swiper-button-white cm-none"></div>
  734. <div class="swiper-button-next swiper-button-white cm-none"></div>
  735. </div>
  736. </div>
  737. </div>
  738. <!-- 列表式 mobile 8 10 -->
  739. <div class="cm-row" v-show="fetchTemplate([8,10],floorData.floorContent.templateType) && isMobile">
  740. <div class="fold-box cm-clearfix"
  741. :data-floor-type="floorData.floorContent.templateType + '-' + index">
  742. <div class="cm-col-md-30 cm-col-xs-60">
  743. <div class="cm-p-a-4" v-for="(item, item_index) in makeList(floorData,index)"
  744. :key="item_index">
  745. <div class="bg-white aspect"
  746. :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
  747. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
  748. <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
  749. v-if="isMobile"/>
  750. <img width="100%" height="100%" :src="item.image" alt="" v-else/>
  751. </a>
  752. </div>
  753. </div>
  754. </div>
  755. </div>
  756. <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
  757. <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
  758. <div
  759. class="cm-toggle-btn"
  760. :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
  761. @click="toggleMore(floorData.floorContent.templateType, index)"
  762. >
  763. 查看更多
  764. </div>
  765. </div>
  766. </div>
  767. <!-- 左右滑动式 mobile 7 27 31-->
  768. <div class="cm-row" v-show="fetchTemplate([7,27,31],floorData.floorContent.templateType) && isMobile">
  769. <div class="cm-p-a-4">
  770. <div class="cm-scroll-container">
  771. <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
  772. :key="item_index">
  773. <div class="bg-white aspect cm-relative"
  774. :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
  775. <div v-if="fetchTemplate([31],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
  776. <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
  777. v-if="isMobile"/>
  778. <img width="100%" height="100%" :src="item.image" alt="" v-else/>
  779. <div class="has-player"
  780. v-if="floorData.floorContent.templateClassify == 4"></div>
  781. </div>
  782. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
  783. <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
  784. v-if="isMobile"/>
  785. <img width="100%" height="100%" :src="item.image" alt="" v-else/>
  786. <div class="has-player"
  787. v-if="floorData.floorContent.templateClassify == 4"></div>
  788. </a>
  789. </div>
  790. </div>
  791. </div>
  792. </div>
  793. </div>
  794. </template>
  795. <!-- 直播楼层22 23 24 25 -->
  796. <!-- v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)" -->
  797. <template v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)">
  798. <!-- 轮播式 && tab切换 22 24 25 -->
  799. <!-- 选项卡 -->
  800. <div class="cm-row"
  801. v-if="fetchTemplate([22,24,25],floorData.floorContent.templateType)">
  802. <div class="cm-p-a-4">
  803. <div class="cm-relative cm-swiper">
  804. <template v-for="(i,i_index) in 3">
  805. <div v-show="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
  806. <div
  807. class="swiper-container"
  808. :id="'swiper-template-' + index + '-' + floorData.floorContent.templateType + '-' + i_index"
  809. :data-swiper-type="getImageScalcMap('10').swiper"
  810. >
  811. <div class="swiper-wrapper">
  812. <div
  813. class="swiper-slide"
  814. v-for="(item, item_index) in getGroupMenu(floorData[getFloorImageListType(i_index)], floorData.floorContent.templateType)"
  815. :key="item_index"
  816. >
  817. <div :class="'slide-template-' + floorData.floorContent.templateType" class="template-rows-2" :style="{display: 'grid', gridTemplateRows: 'repeat(2, 1fr)', gridTemplateColumns: `repeat(${gridTemplateColumns[floorData.floorContent.templateType]}, 1fr)`, gridGap: '16px'}">
  818. <template v-for="i in item" :key="i.id">
  819. <div
  820. class="bg-white aspect cm-relative"
  821. :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
  822. >
  823. <a :target="i.link ? '_blank' : ''" :href="reallink(i.link)">
  824. <span
  825. class="cm-cover-tag color1 cm-absolute cm-top-right"
  826. v-if="makeVideoStatus(floorData,i_index + 1) === 2"
  827. >已结束</span
  828. >
  829. <span
  830. class="cm-cover-tag color2 cm-absolute cm-top-right"
  831. v-if="makeVideoStatus(floorData,i_index + 1) === 0"
  832. >未开始</span
  833. >
  834. <span
  835. class="cm-cover-tag color3 cm-absolute cm-top-right"
  836. v-if="makeVideoStatus(floorData,i_index + 1) === 1"
  837. >已开始</span
  838. >
  839. <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="100%" @click="handleClick(i)"/>
  840. </a>
  841. </div>
  842. </template>
  843. </div>
  844. </div>
  845. </div>
  846. <!-- Add Pagination -->
  847. <div class="swiper-pagination" v-if="getGroupMenu(floorData[getFloorImageListType(i_index)], floorData.floorContent.templateType).length > 1"></div>
  848. <!-- Add Navigation -->
  849. <div class="swiper-button-prev swiper-button-white cm-none"></div>
  850. <div class="swiper-button-next swiper-button-white cm-none"></div>
  851. </div>
  852. </div>
  853. </template>
  854. </div>
  855. </div>
  856. </div>
  857. <div class="cm-row"
  858. v-if="!isMobile && fetchTemplate([23],floorData.floorContent.templateType)">
  859. <div class="cm-p-a-4">
  860. <div class="cm-relative cm-swiper">
  861. <template v-for="(i,i_index) in 3">
  862. <div v-show="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
  863. <div
  864. class="swiper-container"
  865. :id="'swiper-template-' + index + '-' + floorData.floorContent.templateType + '-' + i_index"
  866. :data-swiper-type="getVideoScalcMap(floorData.floorContent.templateType).swiper"
  867. >
  868. <div class="swiper-wrapper">
  869. <div
  870. class="swiper-slide"
  871. v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]"
  872. :key="item_index"
  873. >
  874. <div
  875. class="bg-white aspect cm-relative"
  876. :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
  877. >
  878. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
  879. <span
  880. class="cm-cover-tag color1 cm-absolute cm-top-right"
  881. v-if="makeVideoStatus(floorData,i_index + 1) === 2"
  882. >已结束</span
  883. >
  884. <span
  885. class="cm-cover-tag color2 cm-absolute cm-top-right"
  886. v-if="makeVideoStatus(floorData,i_index + 1) === 0"
  887. >未开始</span
  888. >
  889. <span
  890. class="cm-cover-tag color3 cm-absolute cm-top-right"
  891. v-if="makeVideoStatus(floorData,i_index + 1) === 1"
  892. >已开始</span
  893. >
  894. <img width="100%" height="100%" :src="item.appletsImage"
  895. alt="" v-if="isMobile"/>
  896. <img width="100%" height="100%" :src="item.image" alt=""
  897. v-else/>
  898. </a>
  899. </div>
  900. </div>
  901. </div>
  902. <!-- Add Pagination -->
  903. <div class="swiper-pagination" v-show="floorData[getFloorImageListType(i_index)].length > 4"></div>
  904. <!-- Add Navigation -->
  905. <div class="swiper-button-prev swiper-button-white cm-none"></div>
  906. <div class="swiper-button-next swiper-button-white cm-none"></div>
  907. </div>
  908. </div>
  909. </template>
  910. </div>
  911. </div>
  912. </div>
  913. <!-- 左右滑动式 mobile 23-->
  914. <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 23">
  915. <div class="cm-p-a-4">
  916. <template v-for="(i,i_index) in 3">
  917. <div class="cm-scroll-container"
  918. v-if="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
  919. <div class="cm-scroll-item"
  920. v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]">
  921. <div
  922. class="bg-white aspect cm-relative cm-radius-4"
  923. :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
  924. >
  925. <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
  926. <span class="cm-cover-tag color2 cm-absolute cm-top-right">已开始</span>
  927. <img width="100%" height="100%" :src="item.appletsImage" alt=""
  928. v-if="isMobile"/>
  929. <img width="100%" height="100%" :src="item.image" alt="" v-else/>
  930. </a>
  931. </div>
  932. </div>
  933. </div>
  934. </template>
  935. </div>
  936. </div>
  937. </template>
  938. </div>
  939. </div>
  940. </template>
  941. <!-- 侧边浮窗-->
  942. <div class="cm-float-container" v-if="activityEntryVisiable || contactVisiable">
  943. <!-- <a class="cm-regexp" href="/help/1038.html" target="_blank">优惠券<br />规则</a>-->
  944. <div>
  945. <div class="cm-slide" v-show="activityEntryVisiable">
  946. <div class="cm-toggle-btn" @click="handleToggleActive(true)"></div>
  947. </div>
  948. <template v-if="contactVisiable">
  949. <div class="cm-slide">
  950. <div class="cm-toggle-btn"></div>
  951. <div class="cm-tooltop">
  952. <div class="cm-tooltop-content cm-tooltop-1">
  953. <div class="cm-item">展会咨询电话:15338897365</div>
  954. <i></i>
  955. <div class="cm-item">客服咨询电话:15338851365</div>
  956. </div>
  957. </div>
  958. </div>
  959. <div class="cm-slide">
  960. <div class="cm-toggle-btn"></div>
  961. <div class="cm-tooltop cm-mobile-tooltop">
  962. <div class="cm-tooltop-content cm-tooltop-2 cm-clearfix">
  963. <div class="cm-item cm-left">
  964. <img width="108" height="108"
  965. src="https://static.caimei365.com/app/img/icon2/cm_wechat_02.png" alt=""/>
  966. <span>展会咨询微信</span>
  967. </div>
  968. <div class="cm-left line"></div>
  969. <div class="cm-item cm-left">
  970. <img width="108" height="108"
  971. src="https://static.caimei365.com/app/img/icon2/cm_wechat_01.png" alt=""/>
  972. <span>客服咨询微信</span>
  973. </div>
  974. </div>
  975. </div>
  976. </div>
  977. </template>
  978. </div>
  979. </div>
  980. <!-- 活动弹窗入口1-->
  981. <!-- <div class="cm-entry" v-show="activityEntryVisiable && isActive">-->
  982. <!-- <div id="cm-icon-content" class="cm-icon-content" onclick="_czc.push(['_trackEvent','云上美博会','红包弹窗点击','红包弹窗点击',1,'cm-icon-content'])">-->
  983. <!-- <span class="cm-close" @click="handleToggleActive(false)"></span>-->
  984. <!-- <div @click="handleToggleCoupon(false)" style="cursor: pointer">-->
  985. <!-- <a href="/info/detail-7657-1.html" target="_blank">-->
  986. <!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>-->
  987. <!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>-->
  988. <!-- </a>-->
  989. <!-- &lt;!&ndash; <img src="/img/activity/pc_entry.png" alt="" v-if="!isMobile"/>&ndash;&gt;-->
  990. <!-- &lt;!&ndash; <img src="/img/activity/h5_entry.png" alt="" v-else/>&ndash;&gt;-->
  991. <!-- </div>-->
  992. <!-- </div>-->
  993. <!-- </div>-->
  994. <!-- 活动弹窗入口2-->
  995. <!-- <div class="cm-entry" v-show="showCouponEntry">-->
  996. <!-- <div class="cm-icon-content" @click="handleToggleCoupon(false)" style="cursor: pointer">-->
  997. <!-- &lt;!&ndash; <a href="/product-6898.html" id="conpun" target="_blank" onclick="_czc.push(['_trackEvent','云上美博会','优惠券弹窗点击','优惠券弹窗点击',1,'conpun'])"><span class="btn btn1"></span></a>&ndash;&gt;-->
  998. <!-- &lt;!&ndash; <a href="/product/couponExp.html" id="conpunDetail" target="_blank" onclick="_czc.push(['_trackEvent','云上美博会','优惠券说明弹窗点击','优惠券说明弹窗点击',1,'conpunDetail'])"><span class="btn btn2"></span></a>&ndash;&gt;-->
  999. <!-- <span class="cm-close" @click.stop="handleToggleCoupon(false)"></span>-->
  1000. <!-- &lt;!&ndash; <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>&ndash;&gt;-->
  1001. <!-- &lt;!&ndash; <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>&ndash;&gt;-->
  1002. <!-- <a href="/info/detail-7657-1.html" target="_blank">-->
  1003. <!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>-->
  1004. <!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>-->
  1005. <!-- </a>-->
  1006. <!-- </div>-->
  1007. <!-- </div>-->
  1008. <!-- 视频播放弹窗 -->
  1009. <div class="video-popup" style="display: none;" id="video-popup">
  1010. <div class="mask"></div>
  1011. <span class="close"></span>
  1012. <div class="content">
  1013. <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
  1014. </div>
  1015. </div>
  1016. <!-- 返回顶部 -->
  1017. <div class="cm-to-top" id="cm-to-top" v-show="showScrollTop">
  1018. <span class="cm-icon-bar"></span>
  1019. <span class="cm-icon-bar"></span>
  1020. <span class="cm-icon-bar"></span>
  1021. </div>
  1022. <!-- loading动画 -->
  1023. <div class="cm-loading" v-if="isLoading"></div>
  1024. </div>
  1025. <!-- 底部区域 end -->
  1026. <template th:replace="components/footer"></template>
  1027. <template th:replace="components/foot-link"></template>
  1028. <script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/swiper.min.js}"></script>
  1029. <script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/base.js(v=${version})}"></script>
  1030. <script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/utils.js(v=${version})}"></script>
  1031. <script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/layout.js(v=${version})}"></script>
  1032. <script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/mixin.js(v=${version})}"></script>
  1033. <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
  1034. <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js(v=${version})}"></script>
  1035. <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
  1036. <script charset="utf-8" type="text/javascript" th:src="@{/js/quickOpreation/index.js(v=${version})}"></script>
  1037. <script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
  1038. <script>
  1039. var isFormal = window.location.href.indexOf('www.caimei365.com') !== -1;
  1040. if (isFormal) {
  1041. document.write(unescape("%3Cspan id='cnzz_stat_icon_1279558759'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1279558759%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
  1042. var _czc = _czc || [];
  1043. _czc.push(["_setAccount", "1279558759"]);
  1044. }
  1045. $('#cm-to-top').on("click", function () {
  1046. $("html,body").animate({scrollTop: 0}, 500);
  1047. });
  1048. </script>
  1049. </body>
  1050. </html>