|
@@ -1,826 +1,1057 @@
|
|
|
-<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
|
- xsi:schemaLocation="https://www.thymeleaf.org ">
|
|
|
-<head>
|
|
|
- <title></title>
|
|
|
- <meta charset="utf-8"/>
|
|
|
- <meta name="referrer" content="never">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
- <template th:replace="components/head-link"></template>
|
|
|
- <link href="/css/activity/normalize.css" rel="stylesheet" type="text/css">
|
|
|
- <link rel="stylesheet" href="/css/activity/swiper.min.css"/>
|
|
|
- <link th:href="@{/css/quickOperation/index.css(v=${version})}" rel="stylesheet" type="text/css">
|
|
|
- <template th:replace="components/analysis"></template>
|
|
|
- <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<input type="hidden" th:value="${coreServer}" id="coreServer">
|
|
|
-<input type="hidden" th:value="${agent}" id="userAgent">
|
|
|
-<!-- 引用头部 -->
|
|
|
-<template th:replace="components/header"></template>
|
|
|
-<div id="app">
|
|
|
- <!-- 大图 -->
|
|
|
- <div class="banner-container">
|
|
|
- <a :href="pageInfo && pageInfo.headLink" class="banner">
|
|
|
- <img :src="pageInfo && pageInfo.crmHeadImage" alt="" v-if="isMobile"/>
|
|
|
- <img :src="pageInfo && pageInfo.headImage" alt="" v-else/>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <template v-for="(floorData,index) in floorList">
|
|
|
- <div class="cm-floor">
|
|
|
- <div class="cm-container">
|
|
|
- <!-- 楼层标题 -->
|
|
|
- <div
|
|
|
- class="cm-row cm-floor-title cm-p-l-4 cm-m-b-4"
|
|
|
- :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-p-r-4','cm-relative']:''"
|
|
|
- >
|
|
|
- <div :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-col-md-40', 'cm-col-xs-36']:''">
|
|
|
- <div class="cm-title cm-text-ellipsis-1">{{floorData.title}}</div>
|
|
|
- <div class="cm-subtitle cm-text-ellipsis-1">{{floorData.detail}}</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="cm-tabs cm-p-t-12 cm-absolute cm-bottom-right"
|
|
|
- v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)"
|
|
|
- >
|
|
|
- <div class="cm-tab-content cm-p-r-4">
|
|
|
- <div
|
|
|
- class="cm-tab"
|
|
|
- :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 0}"
|
|
|
- @click="handleTabClick(floorData.floorContent.templateType,index,0)"
|
|
|
- >
|
|
|
- <span>{{floorData.floorContent.displayDate1 | tabTime}}</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="cm-tab"
|
|
|
- :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 1}"
|
|
|
- @click="handleTabClick(floorData.floorContent.templateType,index, 1)"
|
|
|
- >
|
|
|
- <span>{{floorData.floorContent.displayDate2 | tabTime}}</span>
|
|
|
- </div>
|
|
|
- <div v-if="floorData.floorContent.templateType !== '25'"
|
|
|
- class="cm-tab"
|
|
|
- :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 2}"
|
|
|
- @click="handleTabClick(floorData.floorContent.templateType,index, 2)"
|
|
|
- >
|
|
|
- <span>{{floorData.floorContent.displayDate3 | tabTime}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 商品楼层11-21 -->
|
|
|
- <template v-if="fetchTemplate([11,12,13,14,15,16,17,18,19,20,21],floorData.floorContent.templateType)">
|
|
|
- <!-- 轮播图 -->
|
|
|
- <div class="cm-row cm-relative cm-swiper" v-if="floorData.floorContent.templateType == 21">
|
|
|
- <div class="cm-p-a-4">
|
|
|
- <div class="swiper-container" :id="'swiper-template-' + index" data-swiper-type="1-6-2-2">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide" v-for="(pros , index) in floorData.floorImageList">
|
|
|
- <a :target="pros.link ? '_blank' : ''" :href="reallink(pros.link)">
|
|
|
- <div class="cm-product-item hover-class bg-white">
|
|
|
- <div class="aspect">
|
|
|
- <img width="100%" height="100%" src="/img/activity/placeholder.png"
|
|
|
- :data-original="pros.image" alt=""/>
|
|
|
- </div>
|
|
|
- <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
|
|
|
- <div class="cm-tags cm-p-b-2">
|
|
|
- <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
|
|
|
- </div>
|
|
|
- <div class="cm-product-title cm-text-ellipsis-2 h44">
|
|
|
- <span class="cm-meibohui-tag"
|
|
|
- v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
|
|
|
- {{pros.name}}
|
|
|
- </div>
|
|
|
- <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
|
|
|
- <!-- <span class="cm-tag color2" v-if="pros.product.couponsLogo">优惠券</span>-->
|
|
|
- <span class="cm-tag color3" v-if="pros.listType == 2">{{ pros.label }}</span>
|
|
|
- <template v-if="(pros.product.productCategory == 1 && params.userId>0) || GLOBAL_USER_ID && GLOBAL_USER_ID>0">
|
|
|
- <span class="cm-tag color3" v-if="pros.product.actStatus==1">
|
|
|
- {{pros.product.promotions.name}}
|
|
|
- <span class="red" v-if="pros.priceFlag != 1 && PromotionsFormat(pros.product.promotions)">:¥{{pros.product.price | NumFormat}}</span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="cm-prodcut-price h24">
|
|
|
- <div class="pro-price" v-if="pros.listType == 1">
|
|
|
- <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
|
|
|
- <template v-if="pros.product.productCategory==1">
|
|
|
- <!-- 样式1 价格未公开-->
|
|
|
- <template v-if="pros.product.priceFlag==1">
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price cm-left">¥价格未公开</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <!-- 样式2-->
|
|
|
- <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)">
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price cm-left"
|
|
|
- :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
|
|
|
- <span class="red">
|
|
|
- ¥{{(PromotionsFormat(pros.product.promotions) ? pros.product.originalPrice
|
|
|
- : pros.product.price) | NumFormat }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 样式3 -->
|
|
|
- <template v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4 && GLOBAL_VIP_FLAG!=1">
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price cm-left">
|
|
|
- <span>¥会员可见</span></div>
|
|
|
- </template>
|
|
|
- <!-- 样式4 -->
|
|
|
- <template v-else>
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price cm-left">
|
|
|
- <span>¥</span>
|
|
|
- <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 样式5 -->
|
|
|
- <template v-else>
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
|
|
|
- <div class="price cm-left" v-else>
|
|
|
- <span class="red">¥{{ pros.product.price | NumFormat }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <!-- 样式6 -->
|
|
|
- <template v-if="pros.product.productCategory == 1">
|
|
|
- <div class="price-tag cm-left" v-if="params.userId>0"></div>
|
|
|
- <div class="price cm-left ">
|
|
|
- <span>¥</span>
|
|
|
- <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 样式7 -->
|
|
|
- <template v-else>
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price cm-left"><span>¥登录可见</span></div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- Add Pagination -->
|
|
|
- <div class="swiper-pagination"></div>
|
|
|
- <!-- Add Navigation -->
|
|
|
- <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
- <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 普通列表 -->
|
|
|
- <div class="cm-row" v-else>
|
|
|
- <div class="fold-box cm-clearfix"
|
|
|
- :data-floor-type="floorData.floorContent.templateType + '-' + index">
|
|
|
- <!-- banner -->
|
|
|
- <template v-for="(i,index) in 5">
|
|
|
- <div
|
|
|
- class="cm-p-a-4"
|
|
|
- :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index], 'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
|
|
|
- v-if="floorData.floorContent['pcAdsImage' + (index + 1)] && floorData.floorContent.templateType != 20"
|
|
|
- >
|
|
|
- <div class="aspect"
|
|
|
- :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
|
|
|
- <a :target="floorData.floorContent['adsLink' + (index + 1)] ? '_blank' : ''"
|
|
|
- :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
|
|
|
- <img
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
- alt="/banner.jpg"
|
|
|
- v-if="isMobile && floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
- />
|
|
|
- <img
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
|
|
|
- alt="/banner.jpg"
|
|
|
- v-if="!isMobile && floorData.floorContent['pcAdsImage' + (index + 1)]"
|
|
|
- />
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- banner END -->
|
|
|
- <div class="cm-col-md-10 cm-col-xs-30" v-for="(pros , index) in makeList(floorData,index)">
|
|
|
- <div class="cm-p-a-4">
|
|
|
- <a :target="pros.link ? '_blank' : ''" :href="pros.link">
|
|
|
- <div class="cm-product-item hover-class bg-white">
|
|
|
- <div class="aspect">
|
|
|
- <img width="100%" height="100%" src="/img/activity/placeholder.png"
|
|
|
- :data-original="pros.image" alt=""/>
|
|
|
- </div>
|
|
|
- <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
|
|
|
- <div class="cm-tags cm-p-b-2">
|
|
|
- <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
|
|
|
- </div>
|
|
|
- <div class="cm-product-title cm-text-ellipsis-2 h44">
|
|
|
- <span class="cm-meibohui-tag"
|
|
|
- v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
|
|
|
- {{pros.name}}
|
|
|
- </div>
|
|
|
- <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
|
|
|
- <!-- <span class="cm-tag color3" v-if="pros.product.couponsLogo">优惠券</span>-->
|
|
|
- <span class="cm-tag color2" v-if="pros.listType == 2">{{ pros.label }}</span>
|
|
|
- <template v-if="(pros.product.productCategory == 1 && params.userId>0) || GLOBAL_USER_ID && GLOBAL_USER_ID>0">
|
|
|
- <span class="cm-tag color3" v-if="pros.product.actStatus==1">
|
|
|
- {{pros.product.promotions.name}}
|
|
|
- <span class="red" v-if="pros.priceFlag != 1 && PromotionsFormat(pros.product.promotions)">:¥{{pros.product.price | NumFormat}}</span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="cm-prodcut-price h24">
|
|
|
- <div class="pro-price cm-clearfix" v-if="pros.listType == 1">
|
|
|
- <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
|
|
|
- <template v-if="pros.product.productCategory == 1">
|
|
|
- <!-- 样式1 价格未公开-->
|
|
|
- <template v-if="pros.product.priceFlag == 1">
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price cm-left">¥价格未公开</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <!-- 样式2-->
|
|
|
- <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)">
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price cm-left" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
|
|
|
- <span class="red">
|
|
|
- ¥{{(PromotionsFormat(pros.product.promotions) ? pros.product.originalPrice
|
|
|
- : pros.product.price) | NumFormat }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 样式3 -->
|
|
|
- <template v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4 && GLOBAL_VIP_FLAG!=1">
|
|
|
- <div class="price-tag cm-left" v-if="pros.product.actStatus==1"></div>
|
|
|
- <div class="price cm-left"><span>¥会员可见</span></div>
|
|
|
- </template>
|
|
|
- <!-- 样式4 -->
|
|
|
- <template v-else>
|
|
|
- <div class="price-tag cm-left" v-if="pros.product.actStatus==1"></div>
|
|
|
- <div class="price cm-left"><span>¥</span>
|
|
|
- <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 样式5 -->
|
|
|
- <template v-else>
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
|
|
|
- <div class="price cm-left" v-else>
|
|
|
- <span class="red">¥{{ pros.product.price | NumFormat }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <!-- 样式6 -->
|
|
|
- <template v-if="pros.product.productCategory == 1">
|
|
|
- <div class="price-tag cm-left" v-if="params.userId>0"></div>
|
|
|
- <div class="price cm-left ">
|
|
|
- <span>¥</span>
|
|
|
- <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 样式7 -->
|
|
|
- <template v-else>
|
|
|
- <div class="price-tag cm-left"></div>
|
|
|
- <div class="price cm-left"><span>¥登录可见</span></div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template v-for="(i,index) in 5">
|
|
|
- <div
|
|
|
- class="cm-p-a-4"
|
|
|
- :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index], 'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
|
|
|
- v-if="floorData.floorContent.templateType == 20"
|
|
|
- >
|
|
|
- <div class="aspect"
|
|
|
- :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
|
|
|
- <a :target="floorData.floorContent['adsLink' + (index + 1)] ? '_blank' : ''"
|
|
|
- :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
|
|
|
- <img
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
- alt="/banner.jpg"
|
|
|
- v-if="isMobile && floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
- />
|
|
|
- <img
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
|
|
|
- alt="/banner.jpg"
|
|
|
- v-if="!isMobile && floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
- />
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
|
|
|
- <div
|
|
|
- class="cm-toggle-btn"
|
|
|
- :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
|
|
|
- @click="toggleMore(floorData.floorContent.templateType, index)"
|
|
|
- >
|
|
|
- 查看更多
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 文章楼层3-6 -->
|
|
|
- <!-- fetchTemplate([3,4,5,6],floorData.floorContent.templateType) -->
|
|
|
- <template v-if="fetchTemplate([3,4,5,6],floorData.floorContent.templateType)">
|
|
|
- <!-- 轮播式 pc -->
|
|
|
- <div class="cm-row cm-relative cm-swiper" v-show="!isMobile">
|
|
|
- <div class="cm-p-a-4">
|
|
|
- <template v-if="fetchTemplate([4,5],floorData.floorContent.templateType)">
|
|
|
- <div class="cm-swiper-button-prev cm-absolute cm-pc-only"
|
|
|
- @click="handlePrevClick(index)"></div>
|
|
|
- <div class="cm-swiper-button-next cm-absolute cm-pc-only"
|
|
|
- @click="handleNextClick(index)"></div>
|
|
|
- </template>
|
|
|
- <div
|
|
|
- class="swiper-container"
|
|
|
- :class="{'no-bottom':fetchTemplate([4,5],floorData.floorContent.templateType)}"
|
|
|
- :id="'swiper-template-' + index"
|
|
|
- :data-swiper-type="getArticleScalcMap(floorData.floorContent.templateType).swiper"
|
|
|
- >
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
|
|
|
- :key="item_index">
|
|
|
- <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
- <!-- 模板3 -->
|
|
|
- <div
|
|
|
- class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
|
|
|
- v-if="floorData.floorContent.templateType == 3"
|
|
|
- >
|
|
|
- <div class="cm-left cm-article-cover cover-168-168">
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
- :alt="item.name" v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
- v-else/>
|
|
|
- </div>
|
|
|
- <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
|
|
|
- <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- <div class="cm-line"></div>
|
|
|
- <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
|
|
|
- {{item.content}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 模板4 5 6 -->
|
|
|
- <div class="cm-article-item bg-white" v-else>
|
|
|
- <div class="cm-article-cover aspect"
|
|
|
- :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
- :alt="item.name" v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
- v-else/>
|
|
|
- </div>
|
|
|
- <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">
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- <div class="cm-m-a-8">
|
|
|
- <div class="cm-article-desc cm-text-ellipsis-2 h56">
|
|
|
- {{item.content}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- Add Pagination -->
|
|
|
- <div class="swiper-pagination"
|
|
|
- v-show="isMobile || !fetchTemplate([4,5],floorData.floorContent.templateType)"></div>
|
|
|
- <!-- Add Navigation -->
|
|
|
- <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
- <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 列表式 mobile 3 4 6 -->
|
|
|
- <div class="cm-row"
|
|
|
- v-show="isMobile && fetchTemplate([3,4,6],floorData.floorContent.templateType)">
|
|
|
- <div class="fold-box cm-clearfix"
|
|
|
- :data-floor-type="floorData.floorContent.templateType + '-' + index">
|
|
|
- <div
|
|
|
- class="cm-col-md-30"
|
|
|
- :class="floorData.floorContent.templateType == 6 ? 'cm-col-xs-30' : 'cm-col-xs-60'"
|
|
|
- v-for="(item, item_index) in makeList(floorData,index)"
|
|
|
- :key="item_index"
|
|
|
- >
|
|
|
- <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
- <div class="cm-p-a-4">
|
|
|
- <!-- 3 -->
|
|
|
- <div
|
|
|
- class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
|
|
|
- v-if="floorData.floorContent.templateType == 3"
|
|
|
- >
|
|
|
- <div class="cm-left cm-article-cover cover-168-168">
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
- :alt="item.name" v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
- v-else/>
|
|
|
- </div>
|
|
|
- <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
|
|
|
- <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- <div class="cm-line"></div>
|
|
|
- <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
|
|
|
- {{item.content}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 4 6 -->
|
|
|
- <div class="cm-article-item bg-white" v-else>
|
|
|
- <div class="cm-article-cover aspect"
|
|
|
- :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
- :alt="item.name" v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
- v-else/>
|
|
|
- </div>
|
|
|
- <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">
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- <div class="cm-m-a-8">
|
|
|
- <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
|
|
|
- <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
|
|
|
- <div
|
|
|
- class="cm-toggle-btn"
|
|
|
- :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
|
|
|
- @click="toggleMore(floorData.floorContent.templateType, index)"
|
|
|
- >
|
|
|
- 查看更多
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 左右滑动式 mobile 5-->
|
|
|
- <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 5">
|
|
|
- <div class="cm-p-a-4">
|
|
|
- <div class="cm-scroll-container">
|
|
|
- <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
|
|
|
- :key="item_index">
|
|
|
- <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
- <div class="cm-article-item bg-white">
|
|
|
- <div class="cm-article-cover aspect"
|
|
|
- :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
- :alt="item.name" v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
- v-else/>
|
|
|
- </div>
|
|
|
- <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">
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- <div class="cm-m-a-8">
|
|
|
- <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 图片楼层1 2 7 8 9 10 -->
|
|
|
- <!-- fetchTemplate([1,2,7,8,9,10],floorData.floorContent.templateType) -->
|
|
|
- <template v-if="fetchTemplate([1,2,7,8,9,10,26,27,28,29,30,31,32,33],floorData.floorContent.templateType)">
|
|
|
- <!-- 轮播式 mobile(1 2 9) pc(全部)-->
|
|
|
- <div
|
|
|
- class="cm-row cm-relative cm-swiper"
|
|
|
- v-show="!isMobile || (fetchTemplate([1,2,9,26,28,29,30,32,33],floorData.floorContent.templateType) && isMobile)"
|
|
|
- >
|
|
|
- <div class="cm-p-a-4">
|
|
|
- <template v-if="fetchTemplate([7,8,10],floorData.floorContent.templateType)">
|
|
|
- <div class="cm-swiper-button-prev cm-absolute" @click="handlePrevClick(index)"></div>
|
|
|
- <div class="cm-swiper-button-next cm-absolute" @click="handleNextClick(index)"></div>
|
|
|
- </template>
|
|
|
- <div
|
|
|
- class="swiper-container"
|
|
|
- :id="'swiper-template-' + index"
|
|
|
- :class="{'no-bottom':fetchTemplate([7,8,10],floorData.floorContent.templateType)}"
|
|
|
- :data-swiper-type="getImageScalcMap(floorData.floorContent.templateType).swiper"
|
|
|
- >
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
|
|
|
- :key="item_index">
|
|
|
- <div
|
|
|
- class="bg-white hover-class aspect cm-relative"
|
|
|
- :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc"
|
|
|
- >
|
|
|
- <div v-if="fetchTemplate([30,31,32,33],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
- v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
- <div class="has-player"
|
|
|
- v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
- </div>
|
|
|
- <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
- v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
- <div class="has-player"
|
|
|
- v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- Add Pagination -->
|
|
|
- <div class="swiper-pagination"
|
|
|
- v-show="isMobile || !fetchTemplate([7,8,10],floorData.floorContent.templateType)"></div>
|
|
|
- <!-- Add Navigation -->
|
|
|
- <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
- <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 列表式 mobile 8 10 -->
|
|
|
- <div class="cm-row" v-show="fetchTemplate([8,10],floorData.floorContent.templateType) && isMobile">
|
|
|
- <div class="fold-box cm-clearfix"
|
|
|
- :data-floor-type="floorData.floorContent.templateType + '-' + index">
|
|
|
- <div class="cm-col-md-30 cm-col-xs-60">
|
|
|
- <div class="cm-p-a-4" v-for="(item, item_index) in makeList(floorData,index)"
|
|
|
- :key="item_index">
|
|
|
- <div class="bg-white aspect"
|
|
|
- :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
- <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
- v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
|
|
|
- <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
|
|
|
- <div
|
|
|
- class="cm-toggle-btn"
|
|
|
- :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
|
|
|
- @click="toggleMore(floorData.floorContent.templateType, index)"
|
|
|
- >
|
|
|
- 查看更多
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 左右滑动式 mobile 7 27 31-->
|
|
|
- <div class="cm-row" v-show="fetchTemplate([7,27,31],floorData.floorContent.templateType) && isMobile">
|
|
|
- <div class="cm-p-a-4">
|
|
|
- <div class="cm-scroll-container">
|
|
|
- <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
|
|
|
- :key="item_index">
|
|
|
- <div class="bg-white aspect cm-relative"
|
|
|
- :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
- <div v-if="fetchTemplate([31],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
- v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
- <div class="has-player"
|
|
|
- v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
- </div>
|
|
|
- <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
- v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
- <div class="has-player"
|
|
|
- v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 直播楼层22 23 24 25 -->
|
|
|
- <!-- v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)" -->
|
|
|
- <template v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)">
|
|
|
- <!-- 轮播式 && tab切换 22 24 25 -->
|
|
|
- <!-- 选项卡 -->
|
|
|
- <div class="cm-row"
|
|
|
- v-show="!isMobile || (fetchTemplate([22,24,25],floorData.floorContent.templateType) && isMobile)">
|
|
|
- <div class="cm-p-a-4">
|
|
|
- <div class="cm-relative cm-swiper">
|
|
|
- <template v-for="(i,i_index) in 3">
|
|
|
- <div v-show="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
|
|
|
- <div
|
|
|
- class="swiper-container"
|
|
|
- :id="'swiper-template-' + index + '-' + floorData.floorContent.templateType + '-' + i_index"
|
|
|
- :data-swiper-type="getVideoScalcMap(floorData.floorContent.templateType).swiper"
|
|
|
- >
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div
|
|
|
- class="swiper-slide"
|
|
|
- v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]"
|
|
|
- :key="item_index"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="bg-white aspect cm-relative"
|
|
|
- :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
|
|
|
- >
|
|
|
- <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
- <span
|
|
|
- class="cm-cover-tag color1 cm-absolute cm-top-right"
|
|
|
- v-if="makeVideoStatus(floorData,i_index + 1) === 2"
|
|
|
- >已结束</span
|
|
|
- >
|
|
|
- <span
|
|
|
- class="cm-cover-tag color2 cm-absolute cm-top-right"
|
|
|
- v-if="makeVideoStatus(floorData,i_index + 1) === 0"
|
|
|
- >未开始</span
|
|
|
- >
|
|
|
- <span
|
|
|
- class="cm-cover-tag color3 cm-absolute cm-top-right"
|
|
|
- v-if="makeVideoStatus(floorData,i_index + 1) === 1"
|
|
|
- >已开始</span
|
|
|
- >
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
- alt="" v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" alt=""
|
|
|
- v-else/>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- Add Pagination -->
|
|
|
- <div class="swiper-pagination"></div>
|
|
|
- <!-- Add Navigation -->
|
|
|
- <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
- <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 左右滑动式 mobile 23-->
|
|
|
- <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 23">
|
|
|
- <div class="cm-p-a-4">
|
|
|
- <template v-for="(i,i_index) in 3">
|
|
|
- <div class="cm-scroll-container"
|
|
|
- v-if="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
|
|
|
- <div class="cm-scroll-item"
|
|
|
- v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]">
|
|
|
- <div
|
|
|
- class="bg-white aspect cm-relative cm-radius-4"
|
|
|
- :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
|
|
|
- >
|
|
|
- <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
- <span class="cm-cover-tag color2 cm-absolute cm-top-right">已开始</span>
|
|
|
- <img width="100%" height="100%" :src="item.appletsImage" alt=""
|
|
|
- v-if="isMobile"/>
|
|
|
- <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-<!-- 侧边浮窗-->
|
|
|
- <div class="cm-float-container" v-if="activityEntryVisiable || contactVisiable">
|
|
|
-<!-- <a class="cm-regexp" href="/help/1038.html" target="_blank">优惠券<br />规则</a>-->
|
|
|
- <div>
|
|
|
- <div class="cm-slide" v-show="activityEntryVisiable">
|
|
|
- <div class="cm-toggle-btn" @click="handleToggleActive(true)"></div>
|
|
|
- </div>
|
|
|
- <template v-if="contactVisiable">
|
|
|
- <div class="cm-slide">
|
|
|
- <div class="cm-toggle-btn"></div>
|
|
|
- <div class="cm-tooltop">
|
|
|
- <div class="cm-tooltop-content cm-tooltop-1">
|
|
|
- <div class="cm-item">展会咨询电话:15338897365</div>
|
|
|
- <i></i>
|
|
|
- <div class="cm-item">客服咨询电话:15338851365</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="cm-slide">
|
|
|
- <div class="cm-toggle-btn"></div>
|
|
|
- <div class="cm-tooltop cm-mobile-tooltop">
|
|
|
- <div class="cm-tooltop-content cm-tooltop-2 cm-clearfix">
|
|
|
- <div class="cm-item cm-left">
|
|
|
- <img width="108" height="108"
|
|
|
- src="https://static.caimei365.com/app/img/icon2/cm_wechat_02.png" alt=""/>
|
|
|
- <span>展会咨询微信</span>
|
|
|
- </div>
|
|
|
- <div class="cm-left line"></div>
|
|
|
- <div class="cm-item cm-left">
|
|
|
- <img width="108" height="108"
|
|
|
- src="https://static.caimei365.com/app/img/icon2/cm_wechat_01.png" alt=""/>
|
|
|
- <span>客服咨询微信</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-<!-- 活动弹窗入口1-->
|
|
|
-<!-- <div class="cm-entry" v-show="activityEntryVisiable && isActive">-->
|
|
|
-<!-- <div id="cm-icon-content" class="cm-icon-content" onclick="_czc.push(['_trackEvent','云上美博会','红包弹窗点击','红包弹窗点击',1,'cm-icon-content'])">-->
|
|
|
-<!-- <span class="cm-close" @click="handleToggleActive(false)"></span>-->
|
|
|
-<!-- <div @click="handleToggleCoupon(false)" style="cursor: pointer">-->
|
|
|
-<!-- <a href="/info/detail-7657-1.html" target="_blank">-->
|
|
|
-<!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>-->
|
|
|
-<!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>-->
|
|
|
-<!-- </a>-->
|
|
|
-<!-- <!– <img src="/img/activity/pc_entry.png" alt="" v-if="!isMobile"/>–>-->
|
|
|
-<!-- <!– <img src="/img/activity/h5_entry.png" alt="" v-else/>–>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
-
|
|
|
-<!-- 活动弹窗入口2-->
|
|
|
-<!-- <div class="cm-entry" v-show="showCouponEntry">-->
|
|
|
-<!-- <div class="cm-icon-content" @click="handleToggleCoupon(false)" style="cursor: pointer">-->
|
|
|
-<!-- <!– <a href="/product-6898.html" id="conpun" target="_blank" onclick="_czc.push(['_trackEvent','云上美博会','优惠券弹窗点击','优惠券弹窗点击',1,'conpun'])"><span class="btn btn1"></span></a>–>-->
|
|
|
-<!-- <!– <a href="/product/couponExp.html" id="conpunDetail" target="_blank" onclick="_czc.push(['_trackEvent','云上美博会','优惠券说明弹窗点击','优惠券说明弹窗点击',1,'conpunDetail'])"><span class="btn btn2"></span></a>–>-->
|
|
|
-<!-- <span class="cm-close" @click.stop="handleToggleCoupon(false)"></span>-->
|
|
|
-<!-- <!– <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>–>-->
|
|
|
-<!-- <!– <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>–>-->
|
|
|
-<!-- <a href="/info/detail-7657-1.html" target="_blank">-->
|
|
|
-<!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>-->
|
|
|
-<!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>-->
|
|
|
-<!-- </a>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
-
|
|
|
- <!-- 视频播放弹窗 -->
|
|
|
- <div class="video-popup" style="display: none;" id="video-popup">
|
|
|
- <div class="mask"></div>
|
|
|
- <span class="close"></span>
|
|
|
- <div class="content">
|
|
|
- <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 返回顶部 -->
|
|
|
- <div class="cm-to-top" id="cm-to-top" v-show="showScrollTop">
|
|
|
- <span class="cm-icon-bar"></span>
|
|
|
- <span class="cm-icon-bar"></span>
|
|
|
- <span class="cm-icon-bar"></span>
|
|
|
- </div>
|
|
|
- <!-- loading动画 -->
|
|
|
- <div class="cm-loading" v-if="isLoading"></div>
|
|
|
-</div>
|
|
|
-<!-- 底部区域 end -->
|
|
|
-<template th:replace="components/footer"></template>
|
|
|
-<template th:replace="components/foot-link"></template>
|
|
|
-
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/swiper.min.js}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/base.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/utils.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/layout.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/mixin.js(v=${version})}"></script>
|
|
|
-
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/quickOpreation/index.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
|
|
|
-
|
|
|
-<script>
|
|
|
- var isFormal = window.location.href.indexOf('www.caimei365.com') !== -1;
|
|
|
- if (isFormal) {
|
|
|
- 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"));
|
|
|
- var _czc = _czc || [];
|
|
|
- _czc.push(["_setAccount", "1279558759"]);
|
|
|
- }
|
|
|
- $('#cm-to-top').on("click", function () {
|
|
|
- $("html,body").animate({scrollTop: 0}, 500);
|
|
|
- });
|
|
|
-</script>
|
|
|
-</body>
|
|
|
-</html>
|
|
|
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
|
+ xsi:schemaLocation="https://www.thymeleaf.org ">
|
|
|
+<head>
|
|
|
+ <title></title>
|
|
|
+ <meta charset="utf-8"/>
|
|
|
+ <meta name="referrer" content="never">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
+ <template th:replace="components/head-link"></template>
|
|
|
+ <link href="/css/activity/normalize.css" rel="stylesheet" type="text/css">
|
|
|
+ <link rel="stylesheet" href="/css/activity/swiper.min.css"/>
|
|
|
+ <link th:href="@{/css/quickOperation/index.css(v=${version})}" rel="stylesheet" type="text/css">
|
|
|
+ <template th:replace="components/analysis"></template>
|
|
|
+ <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<input type="hidden" th:value="${coreServer}" id="coreServer">
|
|
|
+<input type="hidden" th:value="${agent}" id="userAgent">
|
|
|
+<!-- 引用头部 -->
|
|
|
+<template th:replace="components/header"></template>
|
|
|
+<div id="app" :style="{backgroundColor:pageInfo.backgroundColour || '',backgroundImage:'url('+pageInfo.backgroundImage+')'}">
|
|
|
+ <!-- 大图 -->
|
|
|
+ <div class="banner-container">
|
|
|
+ <a :href="pageInfo && pageInfo.headLink" class="banner">
|
|
|
+ <img :src="pageInfo && pageInfo.crmHeadImage" alt="" v-if="isMobile"/>
|
|
|
+ <img :src="pageInfo && pageInfo.headImage" alt="" v-else/>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <template v-for="(floorData,index) in floorList">
|
|
|
+ <div class="cm-floor">
|
|
|
+ <div class="cm-container">
|
|
|
+ <!-- 楼层标题 -->
|
|
|
+ <div
|
|
|
+ class="cm-row cm-floor-title cm-p-l-4 cm-m-b-4"
|
|
|
+ :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-p-r-4','cm-relative']:''"
|
|
|
+ >
|
|
|
+ <div :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-col-md-40', 'cm-col-xs-36']:''">
|
|
|
+ <div class="cm-title cm-text-ellipsis-1">{{floorData.title}}</div>
|
|
|
+ <div class="cm-subtitle cm-text-ellipsis-1">{{floorData.detail}}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="cm-tabs cm-p-t-12 cm-absolute cm-bottom-right"
|
|
|
+ v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)"
|
|
|
+ >
|
|
|
+ <div class="cm-tab-content cm-p-r-4">
|
|
|
+ <div
|
|
|
+ class="cm-tab"
|
|
|
+ :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 0}"
|
|
|
+ @click="handleTabClick(floorData.floorContent.templateType,index,0)"
|
|
|
+ >
|
|
|
+ <span>{{floorData.floorContent.displayDate1 | tabTime}}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="cm-tab"
|
|
|
+ :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 1}"
|
|
|
+ @click="handleTabClick(floorData.floorContent.templateType,index, 1)"
|
|
|
+ >
|
|
|
+ <span>{{floorData.floorContent.displayDate2 | tabTime}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="floorData.floorContent.templateType !== '25'"
|
|
|
+ class="cm-tab"
|
|
|
+ :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 2}"
|
|
|
+ @click="handleTabClick(floorData.floorContent.templateType,index, 2)"
|
|
|
+ >
|
|
|
+ <span>{{floorData.floorContent.displayDate3 | tabTime}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 商品楼层11-21 -->
|
|
|
+ <template v-if="fetchTemplate([11,12,13,14,15,16,17,18,19,20,21],floorData.floorContent.templateType)">
|
|
|
+ <!-- 轮播图 -->
|
|
|
+ <div class="cm-row cm-relative cm-swiper" v-if="floorData.floorContent.templateType == 21">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <div class="swiper-container" :id="'swiper-template-' + index" data-swiper-type="1-6-2-2">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" v-for="(pros , index) in floorData.floorImageList">
|
|
|
+ <a :target="pros.link ? '_blank' : ''" :href="reallink(pros.link)">
|
|
|
+ <div class="cm-product-item hover-class bg-white">
|
|
|
+ <div class="aspect">
|
|
|
+ <img width="100%" height="100%" src="/img/activity/placeholder.png"
|
|
|
+ :data-original="pros.image" alt=""/>
|
|
|
+ </div>
|
|
|
+ <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
|
|
|
+ <div class="cm-tags cm-p-b-2">
|
|
|
+ <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="cm-product-title cm-text-ellipsis-2 h44">
|
|
|
+ <span class="cm-meibohui-tag"
|
|
|
+ v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
|
|
|
+ {{pros.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
|
|
|
+ <!-- <span class="cm-tag color2" v-if="pros.product.couponsLogo">优惠券</span>-->
|
|
|
+ <span class="cm-tag color3" v-if="pros.listType == 2">{{ pros.label }}</span>
|
|
|
+ <template v-if="(pros.product.productCategory == 1 && params.userId>0) || GLOBAL_USER_ID && GLOBAL_USER_ID>0">
|
|
|
+ <span class="cm-tag color3" v-if="pros.product.actStatus==1">
|
|
|
+ {{pros.product.promotions.name}}
|
|
|
+ <span class="red" v-if="pros.priceFlag != 1 && PromotionsFormat(pros.product.promotions)">:¥{{pros.product.price | NumFormat}}</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="cm-prodcut-price h24">
|
|
|
+ <div class="pro-price" v-if="pros.listType == 1">
|
|
|
+ <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
|
|
|
+ <template v-if="pros.product.productCategory==1">
|
|
|
+ <!-- 样式1 价格未公开-->
|
|
|
+ <template v-if="pros.product.priceFlag==1">
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price cm-left">¥价格未公开</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 样式2-->
|
|
|
+ <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)">
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price cm-left"
|
|
|
+ :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
|
|
|
+ <span class="red">
|
|
|
+ ¥{{(PromotionsFormat(pros.product.promotions) ? pros.product.originalPrice
|
|
|
+ : pros.product.price) | NumFormat }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 样式3 -->
|
|
|
+ <template v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4 && GLOBAL_VIP_FLAG!=1">
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price cm-left">
|
|
|
+ <span>¥会员可见</span></div>
|
|
|
+ </template>
|
|
|
+ <!-- 样式4 -->
|
|
|
+ <template v-else>
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price cm-left">
|
|
|
+ <span>¥</span>
|
|
|
+ <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <!-- 样式5 -->
|
|
|
+ <template v-else>
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
|
|
|
+ <div class="price cm-left" v-else>
|
|
|
+ <span class="red">¥{{ pros.product.price | NumFormat }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 样式6 -->
|
|
|
+ <template v-if="pros.product.productCategory == 1">
|
|
|
+ <div class="price-tag cm-left" v-if="params.userId>0"></div>
|
|
|
+ <div class="price cm-left ">
|
|
|
+ <span>¥</span>
|
|
|
+ <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 样式7 -->
|
|
|
+ <template v-else>
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price cm-left"><span>¥登录可见</span></div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Add Pagination -->
|
|
|
+ <div class="swiper-pagination" v-show="floorData.floorImageList.length > 6"></div>
|
|
|
+ <!-- Add Navigation -->
|
|
|
+ <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
+ <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 普通列表 -->
|
|
|
+ <div class="cm-row" v-else>
|
|
|
+ <div class="fold-box cm-clearfix"
|
|
|
+ :data-floor-type="floorData.floorContent.templateType + '-' + index">
|
|
|
+ <!-- banner -->
|
|
|
+ <template v-for="(i,index) in 5">
|
|
|
+ <div
|
|
|
+ class="cm-p-a-4"
|
|
|
+ :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index], 'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
|
|
|
+ v-if="floorData.floorContent['pcAdsImage' + (index + 1)] && floorData.floorContent.templateType != 20"
|
|
|
+ >
|
|
|
+ <div class="aspect"
|
|
|
+ :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
|
|
|
+ <a :target="floorData.floorContent['adsLink' + (index + 1)] ? '_blank' : ''"
|
|
|
+ :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
|
|
|
+ <img
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
+ alt="/banner.jpg"
|
|
|
+ v-if="isMobile && floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
|
|
|
+ alt="/banner.jpg"
|
|
|
+ v-if="!isMobile && floorData.floorContent['pcAdsImage' + (index + 1)]"
|
|
|
+ />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- banner END -->
|
|
|
+ <div class="cm-col-md-10 cm-col-xs-30" v-for="(pros , index) in makeList(floorData,index)">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <a :target="pros.link ? '_blank' : ''" :href="pros.link">
|
|
|
+ <div class="cm-product-item hover-class bg-white">
|
|
|
+ <div class="aspect">
|
|
|
+ <img width="100%" height="100%" src="/img/activity/placeholder.png"
|
|
|
+ :data-original="pros.image" alt=""/>
|
|
|
+ </div>
|
|
|
+ <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
|
|
|
+ <div class="cm-tags cm-p-b-2">
|
|
|
+ <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="cm-product-title cm-text-ellipsis-2 h44">
|
|
|
+ <span class="cm-meibohui-tag"
|
|
|
+ v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
|
|
|
+ {{pros.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
|
|
|
+ <!-- <span class="cm-tag color3" v-if="pros.product.couponsLogo">优惠券</span>-->
|
|
|
+ <span class="cm-tag color2" v-if="pros.listType == 2">{{ pros.label }}</span>
|
|
|
+ <template v-if="(pros.product.productCategory == 1 && params.userId>0) || GLOBAL_USER_ID && GLOBAL_USER_ID>0">
|
|
|
+ <span class="cm-tag color3" v-if="pros.product.actStatus==1">
|
|
|
+ {{pros.product.promotions.name}}
|
|
|
+ <span class="red" v-if="pros.priceFlag != 1 && PromotionsFormat(pros.product.promotions)">:¥{{pros.product.price | NumFormat}}</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="cm-prodcut-price h24">
|
|
|
+ <div class="pro-price cm-clearfix" v-if="pros.listType == 1">
|
|
|
+ <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
|
|
|
+ <template v-if="pros.product.productCategory == 1">
|
|
|
+ <!-- 样式1 价格未公开-->
|
|
|
+ <template v-if="pros.product.priceFlag == 1">
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price cm-left">¥价格未公开</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 样式2-->
|
|
|
+ <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)">
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price cm-left" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
|
|
|
+ <span class="red">
|
|
|
+ ¥{{(PromotionsFormat(pros.product.promotions) ? pros.product.originalPrice
|
|
|
+ : pros.product.price) | NumFormat }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 样式3 -->
|
|
|
+ <template v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4 && GLOBAL_VIP_FLAG!=1">
|
|
|
+ <div class="price-tag cm-left" v-if="pros.product.actStatus==1"></div>
|
|
|
+ <div class="price cm-left"><span>¥会员可见</span></div>
|
|
|
+ </template>
|
|
|
+ <!-- 样式4 -->
|
|
|
+ <template v-else>
|
|
|
+ <div class="price-tag cm-left" v-if="pros.product.actStatus==1"></div>
|
|
|
+ <div class="price cm-left"><span>¥</span>
|
|
|
+ <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <!-- 样式5 -->
|
|
|
+ <template v-else>
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
|
|
|
+ <div class="price cm-left" v-else>
|
|
|
+ <span class="red">¥{{ pros.product.price | NumFormat }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 样式6 -->
|
|
|
+ <template v-if="pros.product.productCategory == 1">
|
|
|
+ <div class="price-tag cm-left" v-if="params.userId>0"></div>
|
|
|
+ <div class="price cm-left ">
|
|
|
+ <span>¥</span>
|
|
|
+ <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 样式7 -->
|
|
|
+ <template v-else>
|
|
|
+ <div class="price-tag cm-left"></div>
|
|
|
+ <div class="price cm-left"><span>¥登录可见</span></div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-for="(i,index) in 5">
|
|
|
+ <div
|
|
|
+ class="cm-p-a-4"
|
|
|
+ :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index], 'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
|
|
|
+ v-if="floorData.floorContent.templateType == 20"
|
|
|
+ >
|
|
|
+ <div class="aspect"
|
|
|
+ :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
|
|
|
+ <a :target="floorData.floorContent['adsLink' + (index + 1)] ? '_blank' : ''"
|
|
|
+ :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
|
|
|
+ <img
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
+ alt="/banner.jpg"
|
|
|
+ v-if="isMobile && floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
|
|
|
+ alt="/banner.jpg"
|
|
|
+ v-if="!isMobile && floorData.floorContent['appletsAdsImage' + (index + 1)]"
|
|
|
+ />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
|
|
|
+ <div
|
|
|
+ class="cm-toggle-btn"
|
|
|
+ :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
|
|
|
+ @click="toggleMore(floorData.floorContent.templateType, index)"
|
|
|
+ >
|
|
|
+ 查看更多
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 文章楼层4,5 -->
|
|
|
+ <!-- fetchTemplate([4,5],floorData.floorContent.templateType) -->
|
|
|
+ <template v-if="fetchTemplate([4,5],floorData.floorContent.templateType)">
|
|
|
+ <!-- 轮播式 pc -->
|
|
|
+ <div class="cm-row cm-relative cm-swiper" v-show="!isMobile">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <template v-if="fetchTemplate([4,5],floorData.floorContent.templateType)">
|
|
|
+ <div class="cm-swiper-button-prev cm-absolute cm-pc-only"
|
|
|
+ @click="handlePrevClick(index)"></div>
|
|
|
+ <div class="cm-swiper-button-next cm-absolute cm-pc-only"
|
|
|
+ @click="handleNextClick(index)"></div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ class="swiper-container"
|
|
|
+ :class="{'no-bottom':fetchTemplate([4,5],floorData.floorContent.templateType)}"
|
|
|
+ :id="'swiper-template-' + index"
|
|
|
+ :data-swiper-type="getArticleScalcMap(floorData.floorContent.templateType).swiper"
|
|
|
+ >
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
|
|
|
+ :key="item_index">
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
+ <!-- 模板4 5 6 -->
|
|
|
+ <div class="cm-article-item bg-white">
|
|
|
+ <div class="cm-article-cover aspect"
|
|
|
+ :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
+ :alt="item.name" v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
+ v-else/>
|
|
|
+ </div>
|
|
|
+ <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">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-m-a-8">
|
|
|
+ <div class="cm-article-desc cm-text-ellipsis-2 h56">
|
|
|
+ {{item.content}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Add Pagination -->
|
|
|
+ <div class="swiper-pagination"
|
|
|
+ v-show="isMobile || !fetchTemplate([4,5],floorData.floorContent.templateType)"></div>
|
|
|
+ <!-- Add Navigation -->
|
|
|
+ <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
+ <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 列表式 mobile 3 4 6 -->
|
|
|
+ <div class="cm-row"
|
|
|
+ v-show="isMobile && fetchTemplate([3,4,6],floorData.floorContent.templateType)">
|
|
|
+ <div class="fold-box cm-clearfix"
|
|
|
+ :data-floor-type="floorData.floorContent.templateType + '-' + index">
|
|
|
+ <div
|
|
|
+ class="cm-col-md-30"
|
|
|
+ :class="floorData.floorContent.templateType == 6 ? 'cm-col-xs-30' : 'cm-col-xs-60'"
|
|
|
+ v-for="(item, item_index) in makeList(floorData,index)"
|
|
|
+ :key="item_index"
|
|
|
+ >
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <!-- 3 -->
|
|
|
+ <div
|
|
|
+ class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
|
|
|
+ v-if="floorData.floorContent.templateType == 3"
|
|
|
+ >
|
|
|
+ <div class="cm-left cm-article-cover cover-168-168">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
+ :alt="item.name" v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
+ v-else/>
|
|
|
+ </div>
|
|
|
+ <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
|
|
|
+ <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-line"></div>
|
|
|
+ <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
|
|
|
+ {{item.content}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 4 6 -->
|
|
|
+ <div class="cm-article-item bg-white" v-else>
|
|
|
+ <div class="cm-article-cover aspect"
|
|
|
+ :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
+ :alt="item.name" v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
+ v-else/>
|
|
|
+ </div>
|
|
|
+ <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">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-m-a-8">
|
|
|
+ <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
|
|
|
+ <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
|
|
|
+ <div
|
|
|
+ class="cm-toggle-btn"
|
|
|
+ :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
|
|
|
+ @click="toggleMore(floorData.floorContent.templateType, index)"
|
|
|
+ >
|
|
|
+ 查看更多
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 左右滑动式 mobile 5-->
|
|
|
+ <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 5">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <div class="cm-scroll-container">
|
|
|
+ <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
|
|
|
+ :key="item_index">
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
+ <div class="cm-article-item bg-white">
|
|
|
+ <div class="cm-article-cover aspect"
|
|
|
+ :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
+ :alt="item.name" v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
+ v-else/>
|
|
|
+ </div>
|
|
|
+ <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">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-m-a-8">
|
|
|
+ <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 图片楼层1 2 3 6,9 -->
|
|
|
+ <template v-if="fetchTemplate([1,2,3,6,9,26,28,30,32],floorData.floorContent.templateType)">
|
|
|
+ <div class="cm-row cm-relative cm-swiper" v-if="!isMobile || !fetchTemplate([3,4,6,10],floorData.floorContent.templateType)">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <template v-if="!isMobile">
|
|
|
+ <div class="cm-swiper-button-prev cm-absolute" @click="handlePrevClick(index)"></div>
|
|
|
+ <div class="cm-swiper-button-next cm-absolute" @click="handleNextClick(index)"></div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ class="swiper-container"
|
|
|
+ :id="'swiper-template-' + index"
|
|
|
+ :data-swiper-type="getImageScalcMap('10').swiper"
|
|
|
+ >
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" v-for="(item, item_index) in getGroupMenu(floorData.floorImageList, floorData.floorContent.templateType)"
|
|
|
+ :key="item_index">
|
|
|
+ <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'}">
|
|
|
+ <template v-for="i in item" :key="i.id" v-if="fetchTemplate([1,2,9,26,28],floorData.floorContent.templateType)">
|
|
|
+ <div class="slide-template-2-img" @click="handleClick(i)">
|
|
|
+ <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="150px"/>
|
|
|
+ <div class="has-player"
|
|
|
+ v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-for="i in item" :key="i.id" v-if="fetchTemplate([30,32],floorData.floorContent.templateType)" @click="onPlayVideo(i.link)">
|
|
|
+ <div class="slide-template-2-img" @click="handleClick(i)">
|
|
|
+ <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="150px"/>
|
|
|
+ <div class="has-player"
|
|
|
+ v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="fetchTemplate([3],floorData.floorContent.templateType)" v-for="i in item" :key="i.id">
|
|
|
+ <div class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between" @click="handleClick(i)">
|
|
|
+ <div class="cm-left cm-article-cover cover-168-168">
|
|
|
+ <img width="100%" height="100%" :src="isMobile ? i.appletsImage : i.image"
|
|
|
+ :alt="i.name"/>
|
|
|
+ </div>
|
|
|
+ <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
|
|
|
+ <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
|
|
|
+ {{i.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-line"></div>
|
|
|
+ <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
|
|
|
+ {{i.content}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="fetchTemplate([6],floorData.floorContent.templateType)" v-for="i in item" :key="i.id">
|
|
|
+ <div class="cm-article-item bg-white">
|
|
|
+ <div class="cm-article-cover aspect"
|
|
|
+ :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
+ <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="100%"/>
|
|
|
+ </div>
|
|
|
+ <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">
|
|
|
+ {{i.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-m-a-8">
|
|
|
+ <div class="cm-article-desc cm-text-ellipsis-2 h56">
|
|
|
+ {{i.content}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Add Pagination -->
|
|
|
+ <div class="swiper-pagination" v-show="getGroupMenu(floorData.floorImageList, floorData.floorContent.templateType).length > 1"></div>
|
|
|
+ <!-- Add Navigation -->
|
|
|
+ <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
+ <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+<!-- 模板346-->
|
|
|
+ <div class="cm-row"
|
|
|
+ v-show="isMobile && fetchTemplate([3,4,6],floorData.floorContent.templateType)">
|
|
|
+ <div class="fold-box cm-clearfix"
|
|
|
+ :data-floor-type="floorData.floorContent.templateType + '-' + index">
|
|
|
+ <div
|
|
|
+ class="cm-col-md-30"
|
|
|
+ :class="floorData.floorContent.templateType == 6 ? 'cm-col-xs-30' : 'cm-col-xs-60'"
|
|
|
+ v-for="(item, item_index) in makeList(floorData,index)"
|
|
|
+ :key="item_index"
|
|
|
+ >
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <!-- 3 -->
|
|
|
+ <div
|
|
|
+ class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
|
|
|
+ v-if="floorData.floorContent.templateType == 3"
|
|
|
+ >
|
|
|
+ <div class="cm-left cm-article-cover cover-168-168">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
+ :alt="item.name" v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
+ v-else/>
|
|
|
+ </div>
|
|
|
+ <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
|
|
|
+ <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-line"></div>
|
|
|
+ <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
|
|
|
+ {{item.content}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 4 6 -->
|
|
|
+ <div class="cm-article-item bg-white" v-else>
|
|
|
+ <div class="cm-article-cover aspect">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
+ :alt="item.name" v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" :alt="item.name"
|
|
|
+ v-else/>
|
|
|
+ </div>
|
|
|
+ <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">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ <div class="cm-m-a-8">
|
|
|
+ <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
|
|
|
+ <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
|
|
|
+ <div
|
|
|
+ class="cm-toggle-btn"
|
|
|
+ :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
|
|
|
+ @click="toggleMore(floorData.floorContent.templateType, index)"
|
|
|
+ >
|
|
|
+ 查看更多
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 列表式 mobile 8 10 -->
|
|
|
+ <div class="cm-row" v-show="fetchTemplate([8,10],floorData.floorContent.templateType) && isMobile">
|
|
|
+ <div class="fold-box cm-clearfix"
|
|
|
+ :data-floor-type="floorData.floorContent.templateType + '-' + index">
|
|
|
+ <div class="cm-col-md-30 cm-col-xs-60">
|
|
|
+ <div class="cm-p-a-4" v-for="(item, item_index) in makeList(floorData,index)"
|
|
|
+ :key="item_index">
|
|
|
+ <div class="bg-white aspect"
|
|
|
+ :data-scalc="getImageScalcMap('10').scalc">
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
+ v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
|
|
|
+ <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
|
|
|
+ <div
|
|
|
+ class="cm-toggle-btn"
|
|
|
+ :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
|
|
|
+ @click="toggleMore(floorData.floorContent.templateType, index)"
|
|
|
+ >
|
|
|
+ 查看更多
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 左右滑动式 mobile 7 27 31-->
|
|
|
+ <div class="cm-row" v-show="fetchTemplate([7,27,31],floorData.floorContent.templateType) && isMobile">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <div class="cm-scroll-container">
|
|
|
+ <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
|
|
|
+ :key="item_index">
|
|
|
+ <div class="bg-white aspect cm-relative"
|
|
|
+ :data-scalc="getImageScalcMap('10').scalc">
|
|
|
+ <div v-if="fetchTemplate([31],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
+ v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
+ <div class="has-player"
|
|
|
+ v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
+ </div>
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
+ v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
+ <div class="has-player"
|
|
|
+ v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="fetchTemplate([7,8,10,27,29,31,33],floorData.floorContent.templateType)">
|
|
|
+ <!-- 轮播式 mobile(1 2 9) pc(全部)-->
|
|
|
+ <div
|
|
|
+ class="cm-row cm-relative cm-swiper"
|
|
|
+ v-show="!isMobile || (fetchTemplate([7,8,27,29,31,33],floorData.floorContent.templateType) && isMobile)"
|
|
|
+ >
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <template v-if="fetchTemplate([7,8,10],floorData.floorContent.templateType)">
|
|
|
+ <div class="cm-swiper-button-prev cm-absolute" @click="handlePrevClick(index)"></div>
|
|
|
+ <div class="cm-swiper-button-next cm-absolute" @click="handleNextClick(index)"></div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ class="swiper-container"
|
|
|
+ :id="'swiper-template-' + index"
|
|
|
+ :class="{'no-bottom':fetchTemplate([7,8,10],floorData.floorContent.templateType)}"
|
|
|
+ :data-swiper-type="getImageScalcMap(floorData.floorContent.templateType).swiper"
|
|
|
+ >
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
|
|
|
+ :key="item_index">
|
|
|
+ <div
|
|
|
+ class="bg-white hover-class aspect cm-relative"
|
|
|
+ :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc"
|
|
|
+ >
|
|
|
+ <div v-if="fetchTemplate([31,33],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
+ v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
+ <div class="has-player"
|
|
|
+ v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
+ </div>
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
+ v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
+ <div class="has-player"
|
|
|
+ v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Add Pagination -->
|
|
|
+ <div class="swiper-pagination"
|
|
|
+ v-show="(isMobile || !fetchTemplate([7,8,10],floorData.floorContent.templateType)) && floorData.floorImageList.length > 4"></div>
|
|
|
+ <!-- Add Navigation -->
|
|
|
+ <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
+ <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 列表式 mobile 8 10 -->
|
|
|
+ <div class="cm-row" v-show="fetchTemplate([8,10],floorData.floorContent.templateType) && isMobile">
|
|
|
+ <div class="fold-box cm-clearfix"
|
|
|
+ :data-floor-type="floorData.floorContent.templateType + '-' + index">
|
|
|
+ <div class="cm-col-md-30 cm-col-xs-60">
|
|
|
+ <div class="cm-p-a-4" v-for="(item, item_index) in makeList(floorData,index)"
|
|
|
+ :key="item_index">
|
|
|
+ <div class="bg-white aspect"
|
|
|
+ :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
+ v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
|
|
|
+ <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
|
|
|
+ <div
|
|
|
+ class="cm-toggle-btn"
|
|
|
+ :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
|
|
|
+ @click="toggleMore(floorData.floorContent.templateType, index)"
|
|
|
+ >
|
|
|
+ 查看更多
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 左右滑动式 mobile 7 27 31-->
|
|
|
+ <div class="cm-row" v-show="fetchTemplate([7,27,31],floorData.floorContent.templateType) && isMobile">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <div class="cm-scroll-container">
|
|
|
+ <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
|
|
|
+ :key="item_index">
|
|
|
+ <div class="bg-white aspect cm-relative"
|
|
|
+ :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
|
|
|
+ <div v-if="fetchTemplate([31],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
+ v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
+ <div class="has-player"
|
|
|
+ v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
+ </div>
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
|
|
|
+ v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
+ <div class="has-player"
|
|
|
+ v-if="floorData.floorContent.templateClassify == 4"></div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 直播楼层22 23 24 25 -->
|
|
|
+ <!-- v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)" -->
|
|
|
+ <template v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)">
|
|
|
+ <!-- 轮播式 && tab切换 22 24 25 -->
|
|
|
+ <!-- 选项卡 -->
|
|
|
+ <div class="cm-row"
|
|
|
+ v-if="fetchTemplate([22,24,25],floorData.floorContent.templateType)">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <div class="cm-relative cm-swiper">
|
|
|
+ <template v-for="(i,i_index) in 3">
|
|
|
+ <div v-show="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
|
|
|
+ <div
|
|
|
+ class="swiper-container"
|
|
|
+ :id="'swiper-template-' + index + '-' + floorData.floorContent.templateType + '-' + i_index"
|
|
|
+ :data-swiper-type="getImageScalcMap('10').swiper"
|
|
|
+ >
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div
|
|
|
+ class="swiper-slide"
|
|
|
+ v-for="(item, item_index) in getGroupMenu(floorData[getFloorImageListType(i_index)], floorData.floorContent.templateType)"
|
|
|
+ :key="item_index"
|
|
|
+ >
|
|
|
+ <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'}">
|
|
|
+ <template v-for="i in item" :key="i.id">
|
|
|
+ <div
|
|
|
+ class="bg-white aspect cm-relative"
|
|
|
+ :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
|
|
|
+ >
|
|
|
+ <a :target="i.link ? '_blank' : ''" :href="reallink(i.link)">
|
|
|
+ <span
|
|
|
+ class="cm-cover-tag color1 cm-absolute cm-top-right"
|
|
|
+ v-if="makeVideoStatus(floorData,i_index + 1) === 2"
|
|
|
+ >已结束</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="cm-cover-tag color2 cm-absolute cm-top-right"
|
|
|
+ v-if="makeVideoStatus(floorData,i_index + 1) === 0"
|
|
|
+ >未开始</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="cm-cover-tag color3 cm-absolute cm-top-right"
|
|
|
+ v-if="makeVideoStatus(floorData,i_index + 1) === 1"
|
|
|
+ >已开始</span
|
|
|
+ >
|
|
|
+ <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="100%" @click="handleClick(i)"/>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Add Pagination -->
|
|
|
+ <div class="swiper-pagination" v-if="getGroupMenu(floorData[getFloorImageListType(i_index)], floorData.floorContent.templateType).length > 1"></div>
|
|
|
+ <!-- Add Navigation -->
|
|
|
+ <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
+ <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cm-row"
|
|
|
+ v-if="!isMobile && fetchTemplate([23],floorData.floorContent.templateType)">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <div class="cm-relative cm-swiper">
|
|
|
+ <template v-for="(i,i_index) in 3">
|
|
|
+ <div v-show="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
|
|
|
+ <div
|
|
|
+ class="swiper-container"
|
|
|
+ :id="'swiper-template-' + index + '-' + floorData.floorContent.templateType + '-' + i_index"
|
|
|
+ :data-swiper-type="getVideoScalcMap(floorData.floorContent.templateType).swiper"
|
|
|
+ >
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div
|
|
|
+ class="swiper-slide"
|
|
|
+ v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]"
|
|
|
+ :key="item_index"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="bg-white aspect cm-relative"
|
|
|
+ :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
|
|
|
+ >
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
+ <span
|
|
|
+ class="cm-cover-tag color1 cm-absolute cm-top-right"
|
|
|
+ v-if="makeVideoStatus(floorData,i_index + 1) === 2"
|
|
|
+ >已结束</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="cm-cover-tag color2 cm-absolute cm-top-right"
|
|
|
+ v-if="makeVideoStatus(floorData,i_index + 1) === 0"
|
|
|
+ >未开始</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="cm-cover-tag color3 cm-absolute cm-top-right"
|
|
|
+ v-if="makeVideoStatus(floorData,i_index + 1) === 1"
|
|
|
+ >已开始</span
|
|
|
+ >
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage"
|
|
|
+ alt="" v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt=""
|
|
|
+ v-else/>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Add Pagination -->
|
|
|
+ <div class="swiper-pagination" v-show="floorData[getFloorImageListType(i_index)].length > 4"></div>
|
|
|
+ <!-- Add Navigation -->
|
|
|
+ <div class="swiper-button-prev swiper-button-white cm-none"></div>
|
|
|
+ <div class="swiper-button-next swiper-button-white cm-none"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 左右滑动式 mobile 23-->
|
|
|
+ <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 23">
|
|
|
+ <div class="cm-p-a-4">
|
|
|
+ <template v-for="(i,i_index) in 3">
|
|
|
+ <div class="cm-scroll-container"
|
|
|
+ v-if="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
|
|
|
+ <div class="cm-scroll-item"
|
|
|
+ v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]">
|
|
|
+ <div
|
|
|
+ class="bg-white aspect cm-relative cm-radius-4"
|
|
|
+ :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
|
|
|
+ >
|
|
|
+ <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
|
|
|
+ <span class="cm-cover-tag color2 cm-absolute cm-top-right">已开始</span>
|
|
|
+ <img width="100%" height="100%" :src="item.appletsImage" alt=""
|
|
|
+ v-if="isMobile"/>
|
|
|
+ <img width="100%" height="100%" :src="item.image" alt="" v-else/>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+<!-- 侧边浮窗-->
|
|
|
+ <div class="cm-float-container" v-if="activityEntryVisiable || contactVisiable">
|
|
|
+<!-- <a class="cm-regexp" href="/help/1038.html" target="_blank">优惠券<br />规则</a>-->
|
|
|
+ <div>
|
|
|
+ <div class="cm-slide" v-show="activityEntryVisiable">
|
|
|
+ <div class="cm-toggle-btn" @click="handleToggleActive(true)"></div>
|
|
|
+ </div>
|
|
|
+ <template v-if="contactVisiable">
|
|
|
+ <div class="cm-slide">
|
|
|
+ <div class="cm-toggle-btn"></div>
|
|
|
+ <div class="cm-tooltop">
|
|
|
+ <div class="cm-tooltop-content cm-tooltop-1">
|
|
|
+ <div class="cm-item">展会咨询电话:15338897365</div>
|
|
|
+ <i></i>
|
|
|
+ <div class="cm-item">客服咨询电话:15338851365</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cm-slide">
|
|
|
+ <div class="cm-toggle-btn"></div>
|
|
|
+ <div class="cm-tooltop cm-mobile-tooltop">
|
|
|
+ <div class="cm-tooltop-content cm-tooltop-2 cm-clearfix">
|
|
|
+ <div class="cm-item cm-left">
|
|
|
+ <img width="108" height="108"
|
|
|
+ src="https://static.caimei365.com/app/img/icon2/cm_wechat_02.png" alt=""/>
|
|
|
+ <span>展会咨询微信</span>
|
|
|
+ </div>
|
|
|
+ <div class="cm-left line"></div>
|
|
|
+ <div class="cm-item cm-left">
|
|
|
+ <img width="108" height="108"
|
|
|
+ src="https://static.caimei365.com/app/img/icon2/cm_wechat_01.png" alt=""/>
|
|
|
+ <span>客服咨询微信</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+<!-- 活动弹窗入口1-->
|
|
|
+<!-- <div class="cm-entry" v-show="activityEntryVisiable && isActive">-->
|
|
|
+<!-- <div id="cm-icon-content" class="cm-icon-content" onclick="_czc.push(['_trackEvent','云上美博会','红包弹窗点击','红包弹窗点击',1,'cm-icon-content'])">-->
|
|
|
+<!-- <span class="cm-close" @click="handleToggleActive(false)"></span>-->
|
|
|
+<!-- <div @click="handleToggleCoupon(false)" style="cursor: pointer">-->
|
|
|
+<!-- <a href="/info/detail-7657-1.html" target="_blank">-->
|
|
|
+<!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>-->
|
|
|
+<!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>-->
|
|
|
+<!-- </a>-->
|
|
|
+<!-- <!– <img src="/img/activity/pc_entry.png" alt="" v-if="!isMobile"/>–>-->
|
|
|
+<!-- <!– <img src="/img/activity/h5_entry.png" alt="" v-else/>–>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+<!-- 活动弹窗入口2-->
|
|
|
+<!-- <div class="cm-entry" v-show="showCouponEntry">-->
|
|
|
+<!-- <div class="cm-icon-content" @click="handleToggleCoupon(false)" style="cursor: pointer">-->
|
|
|
+<!-- <!– <a href="/product-6898.html" id="conpun" target="_blank" onclick="_czc.push(['_trackEvent','云上美博会','优惠券弹窗点击','优惠券弹窗点击',1,'conpun'])"><span class="btn btn1"></span></a>–>-->
|
|
|
+<!-- <!– <a href="/product/couponExp.html" id="conpunDetail" target="_blank" onclick="_czc.push(['_trackEvent','云上美博会','优惠券说明弹窗点击','优惠券说明弹窗点击',1,'conpunDetail'])"><span class="btn btn2"></span></a>–>-->
|
|
|
+<!-- <span class="cm-close" @click.stop="handleToggleCoupon(false)"></span>-->
|
|
|
+<!-- <!– <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>–>-->
|
|
|
+<!-- <!– <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>–>-->
|
|
|
+<!-- <a href="/info/detail-7657-1.html" target="_blank">-->
|
|
|
+<!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>-->
|
|
|
+<!-- <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>-->
|
|
|
+<!-- </a>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+ <!-- 视频播放弹窗 -->
|
|
|
+ <div class="video-popup" style="display: none;" id="video-popup">
|
|
|
+ <div class="mask"></div>
|
|
|
+ <span class="close"></span>
|
|
|
+ <div class="content">
|
|
|
+ <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 返回顶部 -->
|
|
|
+ <div class="cm-to-top" id="cm-to-top" v-show="showScrollTop">
|
|
|
+ <span class="cm-icon-bar"></span>
|
|
|
+ <span class="cm-icon-bar"></span>
|
|
|
+ <span class="cm-icon-bar"></span>
|
|
|
+ </div>
|
|
|
+ <!-- loading动画 -->
|
|
|
+ <div class="cm-loading" v-if="isLoading"></div>
|
|
|
+</div>
|
|
|
+<!-- 底部区域 end -->
|
|
|
+<template th:replace="components/footer"></template>
|
|
|
+<template th:replace="components/foot-link"></template>
|
|
|
+
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/swiper.min.js}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/base.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/utils.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/layout.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/mixin.js(v=${version})}"></script>
|
|
|
+
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/quickOpreation/index.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
|
|
|
+
|
|
|
+<script>
|
|
|
+ var isFormal = window.location.href.indexOf('www.caimei365.com') !== -1;
|
|
|
+ if (isFormal) {
|
|
|
+ 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"));
|
|
|
+ var _czc = _czc || [];
|
|
|
+ _czc.push(["_setAccount", "1279558759"]);
|
|
|
+ }
|
|
|
+ $('#cm-to-top').on("click", function () {
|
|
|
+ $("html,body").animate({scrollTop: 0}, 500);
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|