信息平台&美博会&文章优化

src/main/java/com/caimei/www/controller/authorized/AccountController.java

@@ -1,124 +1,133 @@
-package com.caimei.www.controller.authorized;
-
-import com.caimei.www.controller.BaseController;
-import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.GetMapping;
-
-/**
- * Description
- *
- * @author : Charles
- * @date : 2020/7/24
- */
-@Controller
-public class AccountController extends BaseController {
-    /** 登录 */
-	private static final String LOGIN_PATH = "account/login";
-    private static final String SUPPLIER_LOGIN_PATH = "account/supplierTologin";
-    private static final String REGISTER_SUPPLIER_LOGIN = "supplier_login/index";
-    private static final String REGISTER_SUPPLIER_LOGIN_TEXTINFO = "supplier_login/text_info";
-
-    /** 注册 */
-	private static final String REGISTER_PATH = "account/register";
-	private static final String REGISTER_SUPPLIER = "account/register-supplier";
-	private static final String REGISTER_CLUB = "account/register-club";
-    /** 升级会员机构 */
-	private static final String UPGRADE_PATH = "account/upgrade";
-    /** 忘记密码 */
-	private static final String FORGET_PATH = "account/forget";
-    /** 绑定运营人员 */
-	private static final String BIND_PATH = "account/bind";
-    /** 供应商编辑资料*/
-    private static final String SUPPLIER_INFORMATION = "account/supplier-information";
-
-
-    /**
-     * 登录页
-     */
-    @GetMapping("/login.html")
-    public String login() {
-        return LOGIN_PATH;
-    }
-
-    /**
-     * supplier登录页
-     */
-    @GetMapping("/supplierlogin.html")
-    public String supplierlogin() {
-        return SUPPLIER_LOGIN_PATH;
-    }
-
-    /**
-     * 注册选择页
-     */
-    @GetMapping("/register.html")
-    public String signUp() {
-        return REGISTER_PATH;
-    }
-
-    /**
-     * 注册选择页
-     */
-    @GetMapping("/supplier/register.html")
-    public String signUpSupplier() {
-        return REGISTER_SUPPLIER;
-    }
-
-    /**
-     * 供应商落地页
-     */
-    @GetMapping("/supplier/attraction.html")
-    public String signUpSupplierLogin() {
-        return REGISTER_SUPPLIER_LOGIN;
-    }
-
-    /**
-     * 详情页
-     */
-    @GetMapping("/supplier-login/text_info.html")
-    public String signUpSupplierLoginTextInfo() {
-        return REGISTER_SUPPLIER_LOGIN_TEXTINFO;
-    }
-
-    /**
-     * 注册选择页
-     */
-    @GetMapping("/club/register.html")
-    public String signUpClub() {
-        return REGISTER_CLUB;
-    }
-
-    /**
-     * 机构升级
-     */
-    @GetMapping("/upgrade.html")
-    public String upgrade() {
-        return UPGRADE_PATH;
-    }
-
-
-    /**
-     * 忘记密码
-     */
-    @GetMapping("/forget.html")
-    public String forget() {
-        return FORGET_PATH;
-    }
-
-    /**
-     * 绑定运营人员
-     */
-    @GetMapping("/bind.html")
-    public String bind() {
-        return BIND_PATH;
-    }
-
-    /**
-     * 供应商登录失败编辑资料页
-     */
-    @GetMapping("/supplier/information.html")
-    public String supplierInformation(){
-        return SUPPLIER_INFORMATION;
-    }
-
-}
+package com.caimei.www.controller.authorized;
+
+import com.caimei.www.controller.BaseController;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/7/24
+ */
+@Controller
+public class AccountController extends BaseController {
+    /** 登录 */
+	private static final String LOGIN_PATH = "account/login";
+    private static final String SUPPLIER_LOGIN_PATH = "account/supplierTologin";
+    private static final String REGISTER_SUPPLIER_LOGIN = "supplier_login/index";
+    private static final String REGISTER_SUPPLIER_LOGIN_MORE = "supplier_login/more";
+    private static final String REGISTER_SUPPLIER_LOGIN_TEXTINFO = "supplier_login/text_info";
+
+    /** 注册 */
+	private static final String REGISTER_PATH = "account/register";
+	private static final String REGISTER_SUPPLIER = "account/register-supplier";
+	private static final String REGISTER_CLUB = "account/register-club";
+    /** 升级会员机构 */
+	private static final String UPGRADE_PATH = "account/upgrade";
+    /** 忘记密码 */
+	private static final String FORGET_PATH = "account/forget";
+    /** 绑定运营人员 */
+	private static final String BIND_PATH = "account/bind";
+    /** 供应商编辑资料*/
+    private static final String SUPPLIER_INFORMATION = "account/supplier-information";
+
+
+    /**
+     * 登录页
+     */
+    @GetMapping("/login.html")
+    public String login() {
+        return LOGIN_PATH;
+    }
+
+    /**
+     * supplier登录页
+     */
+    @GetMapping("/supplierlogin.html")
+    public String supplierlogin() {
+        return SUPPLIER_LOGIN_PATH;
+    }
+
+    /**
+     * 注册选择页
+     */
+    @GetMapping("/register.html")
+    public String signUp() {
+        return REGISTER_PATH;
+    }
+
+    /**
+     * 注册选择页
+     */
+    @GetMapping("/supplier/register.html")
+    public String signUpSupplier() {
+        return REGISTER_SUPPLIER;
+    }
+
+    /**
+     * 供应商落地页
+     */
+    @GetMapping("/supplier/attraction.html")
+    public String signUpSupplierLogin() {
+        return REGISTER_SUPPLIER_LOGIN;
+    }
+
+    /**
+     * 供应商落地页详情更多
+     */
+    @GetMapping("/supplier/attractionMore.html")
+    public String signUpSupplierLoginMore() {
+        return REGISTER_SUPPLIER_LOGIN_MORE;
+    }
+
+    /**
+     * 详情页
+     */
+    @GetMapping("/supplier-login/text_info.html")
+    public String signUpSupplierLoginTextInfo() {
+        return REGISTER_SUPPLIER_LOGIN_TEXTINFO;
+    }
+
+    /**
+     * 注册选择页
+     */
+    @GetMapping("/club/register.html")
+    public String signUpClub() {
+        return REGISTER_CLUB;
+    }
+
+    /**
+     * 机构升级
+     */
+    @GetMapping("/upgrade.html")
+    public String upgrade() {
+        return UPGRADE_PATH;
+    }
+
+
+    /**
+     * 忘记密码
+     */
+    @GetMapping("/forget.html")
+    public String forget() {
+        return FORGET_PATH;
+    }
+
+    /**
+     * 绑定运营人员
+     */
+    @GetMapping("/bind.html")
+    public String bind() {
+        return BIND_PATH;
+    }
+
+    /**
+     * 供应商登录失败编辑资料页
+     */
+    @GetMapping("/supplier/information.html")
+    public String supplierInformation(){
+        return SUPPLIER_INFORMATION;
+    }
+
+}

src/main/java/com/caimei/www/controller/unlimited/ArticleController.java

@@ -1,364 +1,365 @@
-package com.caimei.www.controller.unlimited;
-
-import com.alibaba.fastjson.JSON;
-import com.caimei.www.controller.BaseController;
-import com.caimei.www.pojo.JsonModel;
-import com.caimei.www.pojo.link.CmBrandLandingVO;
-import com.caimei.www.pojo.page.*;
-import com.caimei.www.service.page.ArticleService;
-import com.caimei.www.service.page.CmBrandLandingService;
-import com.caimei.www.service.page.ProductService;
-import com.caimei.www.utils.PaginationVo;
-import com.github.pagehelper.PageHelper;
-import com.github.pagehelper.PageInfo;
-import lombok.extern.slf4j.Slf4j;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.http.HttpHeaders;
-import org.springframework.http.server.reactive.ServerHttpRequest;
-import org.springframework.http.server.reactive.ServerHttpResponse;
-import org.springframework.stereotype.Controller;
-import org.springframework.ui.Model;
-import org.springframework.web.bind.annotation.*;
-import org.springframework.web.server.ServerWebExchange;
-import org.thymeleaf.util.StringUtils;
-
-import java.text.SimpleDateFormat;
-import java.util.ArrayList;
-import java.util.Date;
-import java.util.List;
-
-/**
- * 文章页鉴于seo,保留旧链接
- *
- * @author : Charles
- * @date : 2020/7/31
- */
-@Slf4j
-@Controller
-public class ArticleController extends BaseController {
-
-    /**
-     * 错误页面
-     */
-    private static final String ERROR_PATH = "article/error";
-    private static final String ARTICLE_LIST_PATH = "article/list";
-    private static final String ARTICLE_DETAIL_PATH = "article/detail";
-    private static final String ARTICLE_RECOMMENDATION = "article/recommendation";
-    private ArticleService articleService;
-    @Autowired
-    private CmBrandLandingService cmBrandLandingService;
-    @Autowired
-    private ProductService productService;
-
-    @Autowired
-    public void setArticleService(ArticleService articleService) {
-        this.articleService = articleService;
-    }
-
-    /**
-     * 文章列表【旧center】
-     */
-    @GetMapping("/info/center-{id}-{pageNum}.html")
-    public String toArticleList(@PathVariable("id") Integer id, @PathVariable("pageNum") Integer pageNum, final Model model) {
-        List<BaseLink> typeList = articleService.getArticleTypes();
-        List<CmBrandLandingVO> cmBrandLandingList = cmBrandLandingService.getCmBrandLandingList(new CmBrandLanding()
-                .setType("4").setAuthorId(id.toString()));
-        List<Article> infoSelected = articleService.getArticleSelected(0, 5);
-        List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,0, 3);
-        List<ProductList> productSellNumbers = productService.getProductSellNumbers(null);
-        List<BaseLink> data = articleService.getArticleLabels().getData();
-        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
-        model.addAttribute("ads", Ads);
-        model.addAttribute("labels", data);
-        model.addAttribute("articleType", typeList);//导航栏
-        model.addAttribute("articleImages", cmBrandLandingList);//导航栏图片
-        model.addAttribute("infoSelected", infoSelected);//精选文章
-        model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
-        model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
-        model.addAttribute("typeId", id);
-        model.addAttribute("labelId", 0);
-        model.addAttribute("pageNum", pageNum);
-        model.addAttribute("isSearch", true);
-        model.addAttribute("isSelectInfo", true);
-        //model.addAttribute("pagePath", String.format("/info/center-%s-1.html", id));
-        return ARTICLE_LIST_PATH;
-    }
-
-    /**
-     * 文章列表【旧label】
-     */
-    @GetMapping("/info/label-{id}-{pageNum}.html")
-    public String toArticleLabel(@PathVariable("id") Integer id, @PathVariable("pageNum") Integer pageNum, final Model model) {
-        List<BaseLink> typeList = articleService.getArticleTypes();
-        List<BaseLink> data = articleService.getArticleLabels().getData();
-        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
-        List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,0, 3);
-        List<ProductList> productSellNumbers = productService.getProductSellNumbers(null);
-        model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
-        model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
-        model.addAttribute("ads", Ads);
-        model.addAttribute("labels", data);
-        model.addAttribute("articleType", typeList);
-        model.addAttribute("typeId", 0);
-        model.addAttribute("labelId", id);
-        model.addAttribute("pageNum", pageNum);
-        model.addAttribute("isSearch", false);
-        model.addAttribute("isSelectInfo", true);
-        //model.addAttribute("pagePath", String.format("/info/label-%s-1.html", id));
-        return ARTICLE_LIST_PATH;
-    }
-
-    /**
-     * 精选文章和美业资料列表
-     */
-    @GetMapping("/info/articlerecommendation-{id}-{pageNum}.html")
-    public String selectedList(@PathVariable("id") Integer id, @PathVariable("pageNum") Integer pageNum, final Model model) {
-        List<BaseLink> typeList = articleService.getArticleTypes();
-        if (id == 1) {//精选文章
-            List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,0, 3);
-            List<ProductList> productSellNumbers = productService.getProductSellNumbers(null);
-            model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
-            model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
-        }
-        List<BaseLink> data = articleService.getArticleLabels().getData();
-        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
-        model.addAttribute("ads", Ads);
-        model.addAttribute("labels", data);
-        model.addAttribute("articleType", typeList);//导航栏
-        model.addAttribute("labelId", 0);
-        model.addAttribute("pageNum", pageNum);
-        model.addAttribute("isSearch", true);
-        model.addAttribute("isSelectInfo", id == 1);
-        return ARTICLE_RECOMMENDATION;
-    }
-
-    /**
-     * 精选文章和美业资料列表数据
-     */
-    @ResponseBody
-    @GetMapping("/info/articlerecommendation/{id}/{pageNum}")
-    public JsonModel<PaginationVo> toPagination(@PathVariable("id") Integer id,@PathVariable("pageNum") Integer pageNum) {
-        PageHelper.startPage(pageNum, 10);
-        PaginationVo pageData = null;
-        if (id == 1) {//精选文章
-            List<Article> infoSelected = articleService.getArticleSelected(null, null);
-            pageData = new PaginationVo<Article>(infoSelected);
-        } else {//美业资料
-            List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,null, null);
-            pageData = new PaginationVo<CmProductArchiveFile>(archiveFiles);
-        }
-        return JsonModel.success(pageData);
-    }
-
-    @GetMapping("/info/search-{pageNum}.html")
-    public String toArticleSearch(@PathVariable("pageNum") Integer pageNum, final Model model) {
-        List<BaseLink> typeList = articleService.getArticleTypes();
-        List<BaseLink> data = articleService.getArticleLabels().getData();
-        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
-        List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,0, 3);
-        List<ProductList> productSellNumbers = productService.getProductSellNumbers(null);
-        model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
-        model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
-        model.addAttribute("ads", Ads);
-        model.addAttribute("labels", data);
-        model.addAttribute("articleType", typeList);
-        model.addAttribute("typeId", 0);
-        model.addAttribute("labelId", 0);
-        model.addAttribute("pageNum", pageNum);
-        model.addAttribute("isSearch", false);
-        model.addAttribute("isSelectInfo", true);
-        //model.addAttribute("pagePath", "/info/search.html");
-        return ARTICLE_LIST_PATH;
-    }
-
-    /**
-     * 文章详情【旧】
-     */
-    @GetMapping("/info/detail-{id}-1.html")
-    public String toArticleDetail(@PathVariable("id") Integer id, final Model model, ServerWebExchange serverWebExchange, ServerHttpResponse response) {
-        List<BaseLink> typeList = articleService.getArticleTypes();
-        Article article = articleService.getArticleInfo(id);
-        if (article == null) {
-            // return super.errorPath();
-            return "redirect:/info/404.html";
-        }
-        // 获取referer 判断访问来源
-        ServerHttpRequest request = serverWebExchange.getRequest();
-        String ip = "";
-        String referer = "";
-        String source = "";
-        HttpHeaders headers = request.getHeaders();
-        ip = String.valueOf(headers.get("x-forwarded-for"));
-        if (StringUtils.isEmpty(ip)) {
-            ip = String.valueOf(headers.get("X-Real-IP"));
-        }
-        if (null != ip && "" != ip) {
-            ip = ip.replaceAll("[^\\d.]", "");
-        }
-        List<String> referer1 = headers.get("Referer");
-        if (referer1 != null) {
-            referer = referer1.get(0);
-        }
-        String subReferer = "";
-        if (referer.length() > 200) {
-            subReferer = referer.substring(0, 190);
-        }
-        source = source(referer);
-        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
-        String format = dateFormat.format(new Date());
-        articleService.insertRecord(ip, subReferer, source, format);
-        log.info("文章详情访问来源记录完成========》" + source);
-        List<BaseLink> data = articleService.getArticleLabels().getData();
-        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
-        List<Article> articles = new ArrayList<>();
-        if (null != article && article.getAutoStatus() == 0) {
-            articles = articleService.getInfoById(id);
-        } else {
-            articles = articleService.getArticleRelatedId(id.toString());
-        }
-        String relatedLabels = articleService.relatedLabel(id);
-        List<Article> infoSelected = articleService.getArticleSelected(0, 5);
-        List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(article.getRelatedLabelIds(), 0,3);
-        List<ProductList> productSellNumbers = productService.getProductSellNumbers(article.getRelatedLabelIds());
-        model.addAttribute("infoSelected", infoSelected);//精选文章
-        model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
-        model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
-        model.addAttribute("articles", articles);//相关文章
-        model.addAttribute("ads", Ads);
-        model.addAttribute("labels", data);
-        model.addAttribute("article", article);
-        model.addAttribute("articleType", typeList);
-        model.addAttribute("articleId", id);
-        model.addAttribute("relatedLabels", relatedLabels);
-        model.addAttribute("typeId", (article != null ? article.getTypeId() : 0));
-        model.addAttribute("labelId", 0);
-        model.addAttribute("isSelectInfo", true);
-        model.addAttribute("isDetail", true);
-        return ARTICLE_DETAIL_PATH;
-    }
-
-    /**
-     * 404
-     */
-    @GetMapping("/info/404.html")
-    public String errorPage(final Model model) {
-        model.addAttribute("msg", "404页面");
-        model.addAttribute("type", "article");
-        List<BaseLink> typeList = articleService.getArticleTypes();
-        List<BaseLink> data = articleService.getArticleLabels().getData();
-        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
-        model.addAttribute("ads", Ads);
-        model.addAttribute("labels", data);
-        model.addAttribute("articleType", typeList);
-        model.addAttribute("typeId", 0);
-        model.addAttribute("labelId", 0);
-        return ERROR_PATH;
-    }
-
-    /**
-     * 获取文章热门标签
-     */
-    @GetMapping("/article/labels")
-    @ResponseBody
-    public JsonModel<List<BaseLink>> getArticleLabels() {
-        return articleService.getArticleLabels();
-    }
-
-    /**
-     * 获取文章推荐
-     */
-    @GetMapping("/article/recommend")
-    @ResponseBody
-    public JsonModel<PageInfo<ImageLink>> getArticleRecommended(Integer typeId,
-                                                                @RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
-                                                                @RequestParam(value = "pageSize", defaultValue = "3") int pageSize) {
-        return articleService.getArticleRecommended(typeId, pageNum, pageSize);
-    }
-
-    /**
-     * 获取相关文章
-     */
-    @GetMapping("/article/related")
-    @ResponseBody
-    public JsonModel<PageInfo<Article>> getArticleRelated(Integer id, String labels,
-                                                          @RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
-                                                          @RequestParam(value = "pageSize", defaultValue = "3") int pageSize) {
-        return articleService.getArticleRelated(id, labels, pageNum, pageSize);
-    }
-
-    /**
-     * 获取文章广告
-     */
-    @GetMapping("/article/ads")
-    @ResponseBody
-    public JsonModel<List<ImageLink>> getLastestInfoAds() {
-        return articleService.getLastestInfoAds();
-    }
-
-    /**
-     * 点击标签
-     */
-    @GetMapping("/article/label/click")
-    @ResponseBody
-    public JsonModel clickArticleLabel(Integer id) {
-        return articleService.clickArticleLabel(id);
-    }
-
-    /**
-     * 点击广告
-     */
-    @GetMapping("/article/ad/click")
-    @ResponseBody
-    public JsonModel clickArticleAd(Integer id) {
-        return articleService.clickArticleAd(id);
-    }
-
-    /**
-     * 文章点赞
-     */
-    @GetMapping("/article/like")
-    @ResponseBody
-    public JsonModel articleLike(Integer id, ServerWebExchange serverWebExchange) {
-        return articleService.articleLike(id, serverWebExchange);
-    }
-
-    /**
-     * 文章浏览量增加
-     */
-    @GetMapping("/article/pv")
-    @ResponseBody
-    public JsonModel articlePv(Integer id) {
-        return articleService.articlePv(id);
-    }
-
-    private String source(String link) {
-        if (link.contains("baidu.com")) {
-            return "1";
-        }
-        if (link.contains("www.so.com")) {
-            return "2";
-        }
-        if (link.contains("www.google.cn")) {
-            return "3";
-        }
-        if (link.contains("m.sm.cn")) {
-            return "4";
-        }
-        if (link.contains("toutiao.com")) {
-            return "5";
-        }
-        if (link.contains("www.sogou.com")) {
-            return "6";
-        }
-        if (link.contains("servicewechat.com")) {
-            return "7";
-        }
-        if (link.contains("www.caimei365.com")) {
-            return "0";
-        }
-        if (link.contains("zzjtest.gz.aeert.com")) {
-            return "0";
-        }
-        return null;
-    }
-}
+package com.caimei.www.controller.unlimited;
+
+import com.alibaba.fastjson.JSON;
+import com.caimei.www.controller.BaseController;
+import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.link.CmBrandLandingVO;
+import com.caimei.www.pojo.page.*;
+import com.caimei.www.service.page.ArticleService;
+import com.caimei.www.service.page.CmBrandLandingService;
+import com.caimei.www.service.page.ProductService;
+import com.caimei.www.utils.PaginationVo;
+import com.github.pagehelper.PageHelper;
+import com.github.pagehelper.PageInfo;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.server.reactive.ServerHttpRequest;
+import org.springframework.http.server.reactive.ServerHttpResponse;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.server.ServerWebExchange;
+import org.thymeleaf.util.StringUtils;
+
+import java.text.SimpleDateFormat;
+import java.util.ArrayList;
+import java.util.Date;
+import java.util.List;
+
+/**
+ * 文章页鉴于seo,保留旧链接
+ *
+ * @author : Charles
+ * @date : 2020/7/31
+ */
+@Slf4j
+@Controller
+public class ArticleController extends BaseController {
+
+    /**
+     * 错误页面
+     */
+    private static final String ERROR_PATH = "article/error";
+    private static final String ARTICLE_LIST_PATH = "article/list";
+    private static final String ARTICLE_DETAIL_PATH = "article/detail";
+    private static final String ARTICLE_RECOMMENDATION = "article/recommendation";
+    private ArticleService articleService;
+    @Autowired
+    private CmBrandLandingService cmBrandLandingService;
+    @Autowired
+    private ProductService productService;
+
+    @Autowired
+    public void setArticleService(ArticleService articleService) {
+        this.articleService = articleService;
+    }
+
+    /**
+     * 文章列表【旧center】
+     */
+    @GetMapping("/info/center-{id}-{pageNum}.html")
+    public String toArticleList(@PathVariable("id") Integer id, @PathVariable("pageNum") Integer pageNum, final Model model) {
+        List<BaseLink> typeList = articleService.getArticleTypes();
+        List<CmBrandLandingVO> cmBrandLandingList = cmBrandLandingService.getCmBrandLandingList(new CmBrandLanding()
+                .setType("4").setAuthorId(id.toString()));
+        List<Article> infoSelected = articleService.getArticleSelected(0, 5);
+        List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,0, 3);
+        List<ProductList> productSellNumbers = productService.getProductSellNumbers(null);
+        List<BaseLink> data = articleService.getArticleLabels().getData();
+        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
+        model.addAttribute("ads", Ads);
+        model.addAttribute("labels", data);
+        model.addAttribute("articleType", typeList);//导航栏
+        model.addAttribute("articleImages", cmBrandLandingList);//导航栏图片
+        model.addAttribute("infoSelected", infoSelected);//精选文章
+        model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
+        model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
+        model.addAttribute("typeId", id);
+        model.addAttribute("labelId", 0);
+        model.addAttribute("pageNum", pageNum);
+        model.addAttribute("isSearch", true);
+        model.addAttribute("isSelectInfo", true);
+        System.out.println("articleImages" + cmBrandLandingList);
+        //model.addAttribute("pagePath", String.format("/info/center-%s-1.html", id));
+        return ARTICLE_LIST_PATH;
+    }
+
+    /**
+     * 文章列表【旧label】
+     */
+    @GetMapping("/info/label-{id}-{pageNum}.html")
+    public String toArticleLabel(@PathVariable("id") Integer id, @PathVariable("pageNum") Integer pageNum, final Model model) {
+        List<BaseLink> typeList = articleService.getArticleTypes();
+        List<BaseLink> data = articleService.getArticleLabels().getData();
+        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
+        List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,0, 3);
+        List<ProductList> productSellNumbers = productService.getProductSellNumbers(null);
+        model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
+        model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
+        model.addAttribute("ads", Ads);
+        model.addAttribute("labels", data);
+        model.addAttribute("articleType", typeList);
+        model.addAttribute("typeId", 0);
+        model.addAttribute("labelId", id);
+        model.addAttribute("pageNum", pageNum);
+        model.addAttribute("isSearch", false);
+        model.addAttribute("isSelectInfo", true);
+        //model.addAttribute("pagePath", String.format("/info/label-%s-1.html", id));
+        return ARTICLE_LIST_PATH;
+    }
+
+    /**
+     * 精选文章和美业资料列表
+     */
+    @GetMapping("/info/articlerecommendation-{id}-{pageNum}.html")
+    public String selectedList(@PathVariable("id") Integer id, @PathVariable("pageNum") Integer pageNum, final Model model) {
+        List<BaseLink> typeList = articleService.getArticleTypes();
+        if (id == 1) {//精选文章
+            List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,0, 3);
+            List<ProductList> productSellNumbers = productService.getProductSellNumbers(null);
+            model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
+            model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
+        }
+        List<BaseLink> data = articleService.getArticleLabels().getData();
+        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
+        model.addAttribute("ads", Ads);
+        model.addAttribute("labels", data);
+        model.addAttribute("articleType", typeList);//导航栏
+        model.addAttribute("labelId", 0);
+        model.addAttribute("pageNum", pageNum);
+        model.addAttribute("isSearch", true);
+        model.addAttribute("isSelectInfo", id == 1);
+        return ARTICLE_RECOMMENDATION;
+    }
+
+    /**
+     * 精选文章和美业资料列表数据
+     */
+    @ResponseBody
+    @GetMapping("/info/articlerecommendation/{id}/{pageNum}")
+    public JsonModel<PaginationVo> toPagination(@PathVariable("id") Integer id,@PathVariable("pageNum") Integer pageNum) {
+        PageHelper.startPage(pageNum, 10);
+        PaginationVo pageData = null;
+        if (id == 1) {//精选文章
+            List<Article> infoSelected = articleService.getArticleSelected(null, null);
+            pageData = new PaginationVo<Article>(infoSelected);
+        } else {//美业资料
+            List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,null, null);
+            pageData = new PaginationVo<CmProductArchiveFile>(archiveFiles);
+        }
+        return JsonModel.success(pageData);
+    }
+
+    @GetMapping("/info/search-{pageNum}.html")
+    public String toArticleSearch(@PathVariable("pageNum") Integer pageNum, final Model model) {
+        List<BaseLink> typeList = articleService.getArticleTypes();
+        List<BaseLink> data = articleService.getArticleLabels().getData();
+        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
+        List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(null,0, 3);
+        List<ProductList> productSellNumbers = productService.getProductSellNumbers(null);
+        model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
+        model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
+        model.addAttribute("ads", Ads);
+        model.addAttribute("labels", data);
+        model.addAttribute("articleType", typeList);
+        model.addAttribute("typeId", 0);
+        model.addAttribute("labelId", 0);
+        model.addAttribute("pageNum", pageNum);
+        model.addAttribute("isSearch", false);
+        model.addAttribute("isSelectInfo", true);
+        //model.addAttribute("pagePath", "/info/search.html");
+        return ARTICLE_LIST_PATH;
+    }
+
+    /**
+     * 文章详情【旧】
+     */
+    @GetMapping("/info/detail-{id}-1.html")
+    public String toArticleDetail(@PathVariable("id") Integer id, final Model model, ServerWebExchange serverWebExchange, ServerHttpResponse response) {
+        List<BaseLink> typeList = articleService.getArticleTypes();
+        Article article = articleService.getArticleInfo(id);
+        if (article == null) {
+            // return super.errorPath();
+            return "redirect:/info/404.html";
+        }
+        // 获取referer 判断访问来源
+        ServerHttpRequest request = serverWebExchange.getRequest();
+        String ip = "";
+        String referer = "";
+        String source = "";
+        HttpHeaders headers = request.getHeaders();
+        ip = String.valueOf(headers.get("x-forwarded-for"));
+        if (StringUtils.isEmpty(ip)) {
+            ip = String.valueOf(headers.get("X-Real-IP"));
+        }
+        if (null != ip && "" != ip) {
+            ip = ip.replaceAll("[^\\d.]", "");
+        }
+        List<String> referer1 = headers.get("Referer");
+        if (referer1 != null) {
+            referer = referer1.get(0);
+        }
+        String subReferer = "";
+        if (referer.length() > 200) {
+            subReferer = referer.substring(0, 190);
+        }
+        source = source(referer);
+        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+        String format = dateFormat.format(new Date());
+        articleService.insertRecord(ip, subReferer, source, format);
+        log.info("文章详情访问来源记录完成========》" + source);
+        List<BaseLink> data = articleService.getArticleLabels().getData();
+        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
+        List<Article> articles = new ArrayList<>();
+        if (null != article && article.getAutoStatus() == 0) {
+            articles = articleService.getInfoById(id);
+        } else {
+            articles = articleService.getArticleRelatedId(id.toString());
+        }
+        String relatedLabels = articleService.relatedLabel(id);
+        List<Article> infoSelected = articleService.getArticleSelected(0, 5);
+        List<CmProductArchiveFile> archiveFiles = articleService.findArchiveFileAddTime(article.getRelatedLabelIds(), 0,3);
+        List<ProductList> productSellNumbers = productService.getProductSellNumbers(article.getRelatedLabelIds());
+        model.addAttribute("infoSelected", infoSelected);//精选文章
+        model.addAttribute("productSellNumbers", productSellNumbers);//销量前三商品
+        model.addAttribute("archiveFiles", archiveFiles);//最新美业资料top3
+        model.addAttribute("articles", articles);//相关文章
+        model.addAttribute("ads", Ads);
+        model.addAttribute("labels", data);
+        model.addAttribute("article", article);
+        model.addAttribute("articleType", typeList);
+        model.addAttribute("articleId", id);
+        model.addAttribute("relatedLabels", relatedLabels);
+        model.addAttribute("typeId", (article != null ? article.getTypeId() : 0));
+        model.addAttribute("labelId", 0);
+        model.addAttribute("isSelectInfo", true);
+        model.addAttribute("isDetail", true);
+        return ARTICLE_DETAIL_PATH;
+    }
+
+    /**
+     * 404
+     */
+    @GetMapping("/info/404.html")
+    public String errorPage(final Model model) {
+        model.addAttribute("msg", "404页面");
+        model.addAttribute("type", "article");
+        List<BaseLink> typeList = articleService.getArticleTypes();
+        List<BaseLink> data = articleService.getArticleLabels().getData();
+        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
+        model.addAttribute("ads", Ads);
+        model.addAttribute("labels", data);
+        model.addAttribute("articleType", typeList);
+        model.addAttribute("typeId", 0);
+        model.addAttribute("labelId", 0);
+        return ERROR_PATH;
+    }
+
+    /**
+     * 获取文章热门标签
+     */
+    @GetMapping("/article/labels")
+    @ResponseBody
+    public JsonModel<List<BaseLink>> getArticleLabels() {
+        return articleService.getArticleLabels();
+    }
+
+    /**
+     * 获取文章推荐
+     */
+    @GetMapping("/article/recommend")
+    @ResponseBody
+    public JsonModel<PageInfo<ImageLink>> getArticleRecommended(Integer typeId,
+                                                                @RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
+                                                                @RequestParam(value = "pageSize", defaultValue = "3") int pageSize) {
+        return articleService.getArticleRecommended(typeId, pageNum, pageSize);
+    }
+
+    /**
+     * 获取相关文章
+     */
+    @GetMapping("/article/related")
+    @ResponseBody
+    public JsonModel<PageInfo<Article>> getArticleRelated(Integer id, String labels,
+                                                          @RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
+                                                          @RequestParam(value = "pageSize", defaultValue = "3") int pageSize) {
+        return articleService.getArticleRelated(id, labels, pageNum, pageSize);
+    }
+
+    /**
+     * 获取文章广告
+     */
+    @GetMapping("/article/ads")
+    @ResponseBody
+    public JsonModel<List<ImageLink>> getLastestInfoAds() {
+        return articleService.getLastestInfoAds();
+    }
+
+    /**
+     * 点击标签
+     */
+    @GetMapping("/article/label/click")
+    @ResponseBody
+    public JsonModel clickArticleLabel(Integer id) {
+        return articleService.clickArticleLabel(id);
+    }
+
+    /**
+     * 点击广告
+     */
+    @GetMapping("/article/ad/click")
+    @ResponseBody
+    public JsonModel clickArticleAd(Integer id) {
+        return articleService.clickArticleAd(id);
+    }
+
+    /**
+     * 文章点赞
+     */
+    @GetMapping("/article/like")
+    @ResponseBody
+    public JsonModel articleLike(Integer id, ServerWebExchange serverWebExchange) {
+        return articleService.articleLike(id, serverWebExchange);
+    }
+
+    /**
+     * 文章浏览量增加
+     */
+    @GetMapping("/article/pv")
+    @ResponseBody
+    public JsonModel articlePv(Integer id) {
+        return articleService.articlePv(id);
+    }
+
+    private String source(String link) {
+        if (link.contains("baidu.com")) {
+            return "1";
+        }
+        if (link.contains("www.so.com")) {
+            return "2";
+        }
+        if (link.contains("www.google.cn")) {
+            return "3";
+        }
+        if (link.contains("m.sm.cn")) {
+            return "4";
+        }
+        if (link.contains("toutiao.com")) {
+            return "5";
+        }
+        if (link.contains("www.sogou.com")) {
+            return "6";
+        }
+        if (link.contains("servicewechat.com")) {
+            return "7";
+        }
+        if (link.contains("www.caimei365.com")) {
+            return "0";
+        }
+        if (link.contains("zzjtest.gz.aeert.com")) {
+            return "0";
+        }
+        return null;
+    }
+}

src/main/resources/static/css/activity/beautyTopic.css

@@ -1,774 +1,774 @@
-body{background:#f5f5f5}
-a{color:#333;text-decoration:none}
-.swiper-wrapper{height: auto;}
-.cm-left{float:left}
-.cm-right{float:right}
-.cm-clearfix::after,.cm-container::after,.cm-row::after{content:'';display:block;clear:both}
-.cm-hidden,.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{overflow:hidden}
-.cm-none{display:none}
-.cm-not-visible{visibility:hidden}
-.cm-flex,.cm-flex-j-between{display:-webkit-box;display:-ms-flexbox;display:flex}
-.bg-white{background-color:#fff}
-.cm-flex-j-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
-.cm-flex-1{-webkit-box-flex:1;-ms-flex:1;flex:1}
-.text-justify{text-align:justify}
-.cm-radius-4{border-radius:4px;overflow:hidden}
-.cm-absolute{position:absolute}
-.cm-relative{position:relative}
-.cm-top,.cm-top-left,.cm-top-right{top:0}
-.cm-bottom,.cm-bottom-right,.cm-bottom-left{bottom:0}
-.cm-left,.cm-top-left,.cm-bottom-left{left:0}
-.cm-right,.cm-top-right,.cm-bottom-right{right:0}
-.bg-white{background-color:#fff}
-.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}
-.cm-text-ellipsis-1{-webkit-line-clamp:1}
-.cm-text-ellipsis-2{-webkit-line-clamp:2}
-.cm-text-ellipsis-3{-webkit-line-clamp:3}
-.cm-text-ellipsis-4{-webkit-line-clamp:4}
-.cm-img-responsive{max-width:100%;height:auto;display:block}
-.cm-container{width:100%;margin:0 auto}
-[class*='cm-col-']{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}
-.cm-floor .swiper-slide{ height: auto;}
-.cm-product-item .cm-prodcut-price .price.none{color: #999;text-decoration: line-through;}
-.cm-product-item .cm-prodcut-price .price.none .red{color: #999;}
-@media (max-width:560px){
-.cm-col-xs-1{width:1.66667%}
-.cm-col-xs-2{width:3.33333%}
-.cm-col-xs-3{width:5%}
-.cm-col-xs-4{width:6.66667%}
-.cm-col-xs-5{width:8.33333%}
-.cm-col-xs-6{width:10%}
-.cm-col-xs-7{width:11.66667%}
-.cm-col-xs-8{width:13.33333%}
-.cm-col-xs-9{width:15%}
-.cm-col-xs-10{width:16.66667%}
-.cm-col-xs-11{width:18.33333%}
-.cm-col-xs-12{width:20%}
-.cm-col-xs-13{width:21.66667%}
-.cm-col-xs-14{width:23.33333%}
-.cm-col-xs-15{width:25%}
-.cm-col-xs-16{width:26.66667%}
-.cm-col-xs-17{width:28.33333%}
-.cm-col-xs-18{width:30%}
-.cm-col-xs-19{width:31.66667%}
-.cm-col-xs-20{width:33.33333%}
-.cm-col-xs-21{width:35%}
-.cm-col-xs-22{width:36.66667%}
-.cm-col-xs-23{width:38.33333%}
-.cm-col-xs-24{width:40%}
-.cm-col-xs-25{width:41.66667%}
-.cm-col-xs-26{width:43.33333%}
-.cm-col-xs-27{width:45%}
-.cm-col-xs-28{width:46.66667%}
-.cm-col-xs-29{width:48.33333%}
-.cm-col-xs-30{width:50%}
-.cm-col-xs-31{width:51.66667%}
-.cm-col-xs-32{width:53.33333%}
-.cm-col-xs-33{width:55%}
-.cm-col-xs-34{width:56.66667%}
-.cm-col-xs-35{width:58.33333%}
-.cm-col-xs-36{width:60%}
-.cm-col-xs-37{width:61.66667%}
-.cm-col-xs-38{width:63.33333%}
-.cm-col-xs-39{width:65%}
-.cm-col-xs-40{width:66.66667%}
-.cm-col-xs-41{width:68.33333%}
-.cm-col-xs-42{width:70%}
-.cm-col-xs-43{width:71.66667%}
-.cm-col-xs-44{width:73.33333%}
-.cm-col-xs-45{width:75%}
-.cm-col-xs-46{width:76.66667%}
-.cm-col-xs-47{width:78.33333%}
-.cm-col-xs-48{width:80%}
-.cm-col-xs-49{width:81.66667%}
-.cm-col-xs-50{width:83.33333%}
-.cm-col-xs-51{width:85%}
-.cm-col-xs-52{width:86.66667%}
-.cm-col-xs-53{width:88.33333%}
-.cm-col-xs-54{width:90%}
-.cm-col-xs-55{width:91.66667%}
-.cm-col-xs-56{width:93.33333%}
-.cm-col-xs-57{width:95%}
-.cm-col-xs-58{width:96.66667%}
-.cm-col-xs-59{width:98.33333%}
-.cm-col-xs-60{width:100%}
-.cm-m-a-1{margin:0.25vw}
-.cm-p-a-1{padding:0.25vw}
-.cm-m-t-1{margin-top:0.25vw}
-.cm-p-t-1{padding-top:0.25vw}
-.cm-m-b-1{margin-bottom:0.25vw}
-.cm-p-b-1{padding-bottom:0.25vw}
-.cm-m-l-1{margin-left:0.25vw}
-.cm-p-l-1{padding-left:0.25vw}
-.cm-m-r-1{margin-right:0.25vw}
-.cm-p-r-1{padding-right:0.25vw}
-.cm-m-a-2{margin:0.5vw}
-.cm-p-a-2{padding:0.5vw}
-.cm-m-t-2{margin-top:0.5vw}
-.cm-p-t-2{padding-top:0.5vw}
-.cm-m-b-2{margin-bottom:0.5vw}
-.cm-p-b-2{padding-bottom:0.5vw}
-.cm-m-l-2{margin-left:0.5vw}
-.cm-p-l-2{padding-left:0.5vw}
-.cm-m-r-2{margin-right:0.5vw}
-.cm-p-r-2{padding-right:0.5vw}
-.cm-m-a-3{margin:0.75vw}
-.cm-p-a-3{padding:0.75vw}
-.cm-m-t-3{margin-top:0.75vw}
-.cm-p-t-3{padding-top:0.75vw}
-.cm-m-b-3{margin-bottom:0.75vw}
-.cm-p-b-3{padding-bottom:0.75vw}
-.cm-m-l-3{margin-left:0.75vw}
-.cm-p-l-3{padding-left:0.75vw}
-.cm-m-r-3{margin-right:0.75vw}
-.cm-p-r-3{padding-right:0.75vw}
-.cm-m-a-4{margin:1vw}
-.cm-p-a-4{padding:1vw}
-.cm-m-t-4{margin-top:1vw}
-.cm-p-t-4{padding-top:1vw}
-.cm-m-b-4{margin-bottom:1vw}
-.cm-p-b-4{padding-bottom:1vw}
-.cm-m-l-4{margin-left:1vw}
-.cm-p-l-4{padding-left:1vw}
-.cm-m-r-4{margin-right:1vw}
-.cm-p-r-4{padding-right:1vw}
-.cm-m-a-5{margin:1.25vw}
-.cm-p-a-5{padding:1.25vw}
-.cm-m-t-5{margin-top:1.25vw}
-.cm-p-t-5{padding-top:1.25vw}
-.cm-m-b-5{margin-bottom:1.25vw}
-.cm-p-b-5{padding-bottom:1.25vw}
-.cm-m-l-5{margin-left:1.25vw}
-.cm-p-l-5{padding-left:1.25vw}
-.cm-m-r-5{margin-right:1.25vw}
-.cm-p-r-5{padding-right:1.25vw}
-.cm-m-a-6{margin:1.5vw}
-.cm-p-a-6{padding:1.5vw}
-.cm-m-t-6{margin-top:1.5vw}
-.cm-p-t-6{padding-top:1.5vw}
-.cm-m-b-6{margin-bottom:1.5vw}
-.cm-p-b-6{padding-bottom:1.5vw}
-.cm-m-l-6{margin-left:1.5vw}
-.cm-p-l-6{padding-left:1.5vw}
-.cm-m-r-6{margin-right:1.5vw}
-.cm-p-r-6{padding-right:1.5vw}
-.cm-m-a-7{margin:1.75vw}
-.cm-p-a-7{padding:1.75vw}
-.cm-m-t-7{margin-top:1.75vw}
-.cm-p-t-7{padding-top:1.75vw}
-.cm-m-b-7{margin-bottom:1.75vw}
-.cm-p-b-7{padding-bottom:1.75vw}
-.cm-m-l-7{margin-left:1.75vw}
-.cm-p-l-7{padding-left:1.75vw}
-.cm-m-r-7{margin-right:1.75vw}
-.cm-p-r-7{padding-right:1.75vw}
-.cm-m-a-8{margin:2vw}
-.cm-p-a-8{padding:2vw}
-.cm-m-t-8{margin-top:2vw}
-.cm-p-t-8{padding-top:2vw}
-.cm-m-b-8{margin-bottom:2vw}
-.cm-p-b-8{padding-bottom:2vw}
-.cm-m-l-8{margin-left:2vw}
-.cm-p-l-8{padding-left:2vw}
-.cm-m-r-8{margin-right:2vw}
-.cm-p-r-8{padding-right:2vw}
-.cm-m-a-9{margin:2.25vw}
-.cm-p-a-9{padding:2.25vw}
-.cm-m-t-9{margin-top:2.25vw}
-.cm-p-t-9{padding-top:2.25vw}
-.cm-m-b-9{margin-bottom:2.25vw}
-.cm-p-b-9{padding-bottom:2.25vw}
-.cm-m-l-9{margin-left:2.25vw}
-.cm-p-l-9{padding-left:2.25vw}
-.cm-m-r-9{margin-right:2.25vw}
-.cm-p-r-9{padding-right:2.25vw}
-.cm-m-a-10{margin:2.5vw}
-.cm-p-a-10{padding:2.5vw}
-.cm-m-t-10{margin-top:2.5vw}
-.cm-p-t-10{padding-top:2.5vw}
-.cm-m-b-10{margin-bottom:2.5vw}
-.cm-p-b-10{padding-bottom:2.5vw}
-.cm-m-l-10{margin-left:2.5vw}
-.cm-p-l-10{padding-left:2.5vw}
-.cm-m-r-10{margin-right:2.5vw}
-.cm-p-r-10{padding-right:2.5vw}
-.cm-m-a-11{margin:2.75vw}
-.cm-p-a-11{padding:2.75vw}
-.cm-m-t-11{margin-top:2.75vw}
-.cm-p-t-11{padding-top:2.75vw}
-.cm-m-b-11{margin-bottom:2.75vw}
-.cm-p-b-11{padding-bottom:2.75vw}
-.cm-m-l-11{margin-left:2.75vw}
-.cm-p-l-11{padding-left:2.75vw}
-.cm-m-r-11{margin-right:2.75vw}
-.cm-p-r-11{padding-right:2.75vw}
-.cm-m-a-12{margin:3vw}
-.cm-p-a-12{padding:3vw}
-.cm-m-t-12{margin-top:3vw}
-.cm-p-t-12{padding-top:3vw}
-.cm-m-b-12{margin-bottom:3vw}
-.cm-p-b-12{padding-bottom:3vw}
-.cm-m-l-12{margin-left:3vw}
-.cm-p-l-12{padding-left:3vw}
-.cm-m-r-12{margin-right:3vw}
-.cm-p-r-12{padding-right:3vw}
-.cm-m-a-13{margin:3.25vw}
-.cm-p-a-13{padding:3.25vw}
-.cm-m-t-13{margin-top:3.25vw}
-.cm-p-t-13{padding-top:3.25vw}
-.cm-m-b-13{margin-bottom:3.25vw}
-.cm-p-b-13{padding-bottom:3.25vw}
-.cm-m-l-13{margin-left:3.25vw}
-.cm-p-l-13{padding-left:3.25vw}
-.cm-m-r-13{margin-right:3.25vw}
-.cm-p-r-13{padding-right:3.25vw}
-.cm-m-a-14{margin:3.5vw}
-.cm-p-a-14{padding:3.5vw}
-.cm-m-t-14{margin-top:3.5vw}
-.cm-p-t-14{padding-top:3.5vw}
-.cm-m-b-14{margin-bottom:3.5vw}
-.cm-p-b-14{padding-bottom:3.5vw}
-.cm-m-l-14{margin-left:3.5vw}
-.cm-p-l-14{padding-left:3.5vw}
-.cm-m-r-14{margin-right:3.5vw}
-.cm-p-r-14{padding-right:3.5vw}
-.cm-m-a-15{margin:3.75vw}
-.cm-p-a-15{padding:3.75vw}
-.cm-m-t-15{margin-top:3.75vw}
-.cm-p-t-15{padding-top:3.75vw}
-.cm-m-b-15{margin-bottom:3.75vw}
-.cm-p-b-15{padding-bottom:3.75vw}
-.cm-m-l-15{margin-left:3.75vw}
-.cm-p-l-15{padding-left:3.75vw}
-.cm-m-r-15{margin-right:3.75vw}
-.cm-p-r-15{padding-right:3.75vw}
-.cm-m-a-16{margin:4vw}
-.cm-p-a-16{padding:4vw}
-.cm-m-t-16{margin-top:4vw}
-.cm-p-t-16{padding-top:4vw}
-.cm-m-b-16{margin-bottom:4vw}
-.cm-p-b-16{padding-bottom:4vw}
-.cm-m-l-16{margin-left:4vw}
-.cm-p-l-16{padding-left:4vw}
-.cm-m-r-16{margin-right:4vw}
-.cm-p-r-16{padding-right:4vw}
-.cm-m-a-17{margin:4.25vw}
-.cm-p-a-17{padding:4.25vw}
-.cm-m-t-17{margin-top:4.25vw}
-.cm-p-t-17{padding-top:4.25vw}
-.cm-m-b-17{margin-bottom:4.25vw}
-.cm-p-b-17{padding-bottom:4.25vw}
-.cm-m-l-17{margin-left:4.25vw}
-.cm-p-l-17{padding-left:4.25vw}
-.cm-m-r-17{margin-right:4.25vw}
-.cm-p-r-17{padding-right:4.25vw}
-.cm-m-a-18{margin:4.5vw}
-.cm-p-a-18{padding:4.5vw}
-.cm-m-t-18{margin-top:4.5vw}
-.cm-p-t-18{padding-top:4.5vw}
-.cm-m-b-18{margin-bottom:4.5vw}
-.cm-p-b-18{padding-bottom:4.5vw}
-.cm-m-l-18{margin-left:4.5vw}
-.cm-p-l-18{padding-left:4.5vw}
-.cm-m-r-18{margin-right:4.5vw}
-.cm-p-r-18{padding-right:4.5vw}
-.cm-m-a-19{margin:4.75vw}
-.cm-p-a-19{padding:4.75vw}
-.cm-m-t-19{margin-top:4.75vw}
-.cm-p-t-19{padding-top:4.75vw}
-.cm-m-b-19{margin-bottom:4.75vw}
-.cm-p-b-19{padding-bottom:4.75vw}
-.cm-m-l-19{margin-left:4.75vw}
-.cm-p-l-19{padding-left:4.75vw}
-.cm-m-r-19{margin-right:4.75vw}
-.cm-p-r-19{padding-right:4.75vw}
-.cm-m-a-20{margin:5vw}
-.cm-p-a-20{padding:5vw}
-.cm-m-t-20{margin-top:5vw}
-.cm-p-t-20{padding-top:5vw}
-.cm-m-b-20{margin-bottom:5vw}
-.cm-p-b-20{padding-bottom:5vw}
-.cm-m-l-20{margin-left:5vw}
-.cm-p-l-20{padding-left:5vw}
-.cm-m-r-20{margin-right:5vw}
-.cm-p-r-20{padding-right:5vw}
-.p-icon{display:inline-block;width:66px;height:22px;vertical-align:middle}
-.p-icon::before{content:'';display:inline-block;width:66px;height:22px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
-.p-icon.i1::before{background-position-y:-714px}
-.p-icon.i2::before{background-position-y:-744px}
-.p-icon.i3::before{background-position-y:-774px}
-.p-icon.i4::before{background-position-y:-804px}
-.p-icon.i5::before{background-position-y:-834px}
-.cm-container{padding-left:1vw;padding-right:1vw;-webkit-box-sizing:border-box;box-sizing:border-box}
-.cm-floor{padding:2.2vw 0}
-.cm-p-a{padding:1vw}
-.cm-m-a{padding:1vw}
-.cm-floor-title .cm-title{font-size:5vw;color:#4a4f58;font-weight:700;line-height:7.5vw;padding-top:1vw;padding-bottom:1vw}
-.cm-floor-title .cm-subtitle{font-size:4vw;color:#93979f;padding-top:1vw;padding-bottom:1vw}
-.cm-article-item{overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
-.cm-article-item .cm-article-title{font-size:3.5vw;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-.cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
-.cm-article-item .cm-article-desc{font-size:2.5vw;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
-.cm-article-item .cm-article-desc.h56{height:10.5vw}
-.cm-article-item .cm-article-cover.cover-168-168{width:27vw;height:27vw}
-.cm-article-item.h200{height:33vw}
-.cm-article-item .cm-line{display:none;height:1px;background-color:#f0f0f0}
-.cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
-.cm-product-item .cm-product-title{font-size:3vw;color:#4a4f58;line-height:5vw;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-.cm-product-item .cm-prodcut-price{font-size:3vw;font-weight:bold}
-.cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
-.cm-product-item .h20{height:20px}
-.cm-product-item .h24{height:24px;line-height: 24px;}
-.cm-product-item .h44{height:10vw}
-.swiper-container{padding-bottom:8vw}
-.cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
-.cm-scroll-container::-webkit-scrollbar{display:none}
-.cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
-.cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
-.cm-cover-tag{width:11vw;height:4vw;font-size:3vw;line-height:4vw;padding:0.5vw 1vw;border-radius:4px}
-.cm-tabs{height:6vw}
-.cm-tabs .cm-tab{font-size:3vw;width:12vw;height:6vw;line-height:6vw;text-align:center}
-.cm-btn-box{text-align:center}
-.cm-btn-box .cm-toggle-btn{width:20vw;height:6vw;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:6vw;font-size:3vw;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-.cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:10px;height:16px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
-.cm-btn-box .cm-toggle-btn.down::after{background-position-x:-96px}
-.cm-btn-box .cm-toggle-btn.up::after{background-position-x:-125px}
-.cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
-.cm-float-container .cm-regexp{ background: #fff; font-size: 2.4vw;line-height: 1.4;display: flex;justify-content: center;align-items: center;text-align: center;color: #666;}
-.cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:12vw;height:12vw;margin:0.8vw 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
-.cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
-.cm-float-container .cm-slide:hover .cm-tooltop{display:block}
-.cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
-.cm-float-container .cm-slide:nth-child(1){height:13.2vw;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:12vw}
-.cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
-.cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
-.cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
-.cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
-.cm-float-container .cm-tooltop{position:absolute;padding:3.5vw;background:#ff5c00;top:0;right:16vw;border-radius:6px;display:none}
-.cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
-.cm-float-container .cm-tooltop .cm-tooltop-content{font-size:3.2vw;color:#fff}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:51.6vw}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:2.5vw 0}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{text-align:center;width:44.8vw;}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:11vw;margin:3vw 3vw 0;width:1px;background:#f1f1f1}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:inline-block;width:16.4vw;height:16.4vw}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:2vw}
-.cm-float-container .cm-mobile-tooltop .cm-tooltop-content .cm-item{ font-size: 1.8vw; }
-.cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
-.cm-entry .cm-icon-content{position:absolute;width:75.1vw;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
-.cm-entry .cm-icon-content img{width:100%}
-.cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:6.45vw;height:6.45vw;right:5vw;top:-8vw;background:url(/img/activity/pc_close.png) no-repeat center center;background-size:6.4vw}
-.cm-entry .cm-icon-content .btn{display: block;width: 10vw;height: 10vw;background: #666;position: absolute;right: 8vw;z-index: 999;cursor: pointer;opacity: 0;}
-.cm-entry .cm-icon-content .btn1{top: 24vw;}
-.cm-entry .cm-icon-content .btn2{top: 47.5vw;}
-.cm-footer{padding:4vw 0 2vw;background-color:#4a4f58;text-align:center;color:#fff;font-size:2.4vw;overflow:hidden}
-.cm-footer img{width:12vw}
-.banner-container{position:relative;width:100vw;height:45vw;overflow:hidden}
-.banner-container .banner{width:100vw;position:absolute;height:100%;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
-.banner-container .cm-container{height:100%;padding: 0;}
-.banner-container img{display:block;height:100%;width: 100%;}
-.has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
-.has-player::before{content:'';cursor: pointer; display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6vw;height:6vw; background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 6vw;}
-.cm-to-top{width:12vw;height:12vw;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
-.cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
-.cm-to-top .cm-icon-bar:nth-child(1){width:6vw;height:1vw;background:#999999;margin-top:4vw;}
-.cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:3vw solid transparent;border-right:3vw solid transparent;border-bottom:2vw solid #999999}
-.cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
-}
-@media (max-width:992px){
-.cm-swiper-button-prev,.cm-swiper-button-next{display:none}
-}
-@media (min-width:560px){
-.cm-col-md-1{width:1.66667%}
-.cm-col-md-2{width:3.33333%}
-.cm-col-md-3{width:5%}
-.cm-col-md-4{width:6.66667%}
-.cm-col-md-5{width:8.33333%}
-.cm-col-md-6{width:10%}
-.cm-col-md-7{width:11.66667%}
-.cm-col-md-8{width:13.33333%}
-.cm-col-md-9{width:15%}
-.cm-col-md-10{width:16.66667%}
-.cm-col-md-11{width:18.33333%}
-.cm-col-md-12{width:20%}
-.cm-col-md-13{width:21.66667%}
-.cm-col-md-14{width:23.33333%}
-.cm-col-md-15{width:25%}
-.cm-col-md-16{width:26.66667%}
-.cm-col-md-17{width:28.33333%}
-.cm-col-md-18{width:30%}
-.cm-col-md-19{width:31.66667%}
-.cm-col-md-20{width:33.33333%}
-.cm-col-md-21{width:35%}
-.cm-col-md-22{width:36.66667%}
-.cm-col-md-23{width:38.33333%}
-.cm-col-md-24{width:40%}
-.cm-col-md-25{width:41.66667%}
-.cm-col-md-26{width:43.33333%}
-.cm-col-md-27{width:45%}
-.cm-col-md-28{width:46.66667%}
-.cm-col-md-29{width:48.33333%}
-.cm-col-md-30{width:50%}
-.cm-col-md-31{width:51.66667%}
-.cm-col-md-32{width:53.33333%}
-.cm-col-md-33{width:55%}
-.cm-col-md-34{width:56.66667%}
-.cm-col-md-35{width:58.33333%}
-.cm-col-md-36{width:60%}
-.cm-col-md-37{width:61.66667%}
-.cm-col-md-38{width:63.33333%}
-.cm-col-md-39{width:65%}
-.cm-col-md-40{width:66.66667%}
-.cm-col-md-41{width:68.33333%}
-.cm-col-md-42{width:70%}
-.cm-col-md-43{width:71.66667%}
-.cm-col-md-44{width:73.33333%}
-.cm-col-md-45{width:75%}
-.cm-col-md-46{width:76.66667%}
-.cm-col-md-47{width:78.33333%}
-.cm-col-md-48{width:80%}
-.cm-col-md-49{width:81.66667%}
-.cm-col-md-50{width:83.33333%}
-.cm-col-md-51{width:85%}
-.cm-col-md-52{width:86.66667%}
-.cm-col-md-53{width:88.33333%}
-.cm-col-md-54{width:90%}
-.cm-col-md-55{width:91.66667%}
-.cm-col-md-56{width:93.33333%}
-.cm-col-md-57{width:95%}
-.cm-col-md-58{width:96.66667%}
-.cm-col-md-59{width:98.33333%}
-.cm-col-md-60{width:100%}
-.cm-m-a-1{margin:2px}
-.cm-p-a-1{padding:2px}
-.cm-m-t-1{margin-top:2px}
-.cm-p-t-1{padding-top:2px}
-.cm-m-b-1{margin-bottom:2px}
-.cm-p-b-1{padding-bottom:2px}
-.cm-m-l-1{margin-left:2px}
-.cm-p-l-1{padding-left:2px}
-.cm-m-r-1{margin-right:2px}
-.cm-p-r-1{padding-right:2px}
-.cm-m-a-2{margin:4px}
-.cm-p-a-2{padding:4px}
-.cm-m-t-2{margin-top:4px}
-.cm-p-t-2{padding-top:4px}
-.cm-m-b-2{margin-bottom:4px}
-.cm-p-b-2{padding-bottom:4px}
-.cm-m-l-2{margin-left:4px}
-.cm-p-l-2{padding-left:4px}
-.cm-m-r-2{margin-right:4px}
-.cm-p-r-2{padding-right:4px}
-.cm-m-a-3{margin:6px}
-.cm-p-a-3{padding:6px}
-.cm-m-t-3{margin-top:6px}
-.cm-p-t-3{padding-top:6px}
-.cm-m-b-3{margin-bottom:6px}
-.cm-p-b-3{padding-bottom:6px}
-.cm-m-l-3{margin-left:6px}
-.cm-p-l-3{padding-left:6px}
-.cm-m-r-3{margin-right:6px}
-.cm-p-r-3{padding-right:6px}
-.cm-m-a-4{margin:8px}
-.cm-p-a-4{padding:8px}
-.cm-m-t-4{margin-top:8px}
-.cm-p-t-4{padding-top:8px}
-.cm-m-b-4{margin-bottom:8px}
-.cm-p-b-4{padding-bottom:8px}
-.cm-m-l-4{margin-left:8px}
-.cm-p-l-4{padding-left:8px}
-.cm-m-r-4{margin-right:8px}
-.cm-p-r-4{padding-right:8px}
-.cm-m-a-5{margin:10px}
-.cm-p-a-5{padding:10px}
-.cm-m-t-5{margin-top:10px}
-.cm-p-t-5{padding-top:10px}
-.cm-m-b-5{margin-bottom:10px}
-.cm-p-b-5{padding-bottom:10px}
-.cm-m-l-5{margin-left:10px}
-.cm-p-l-5{padding-left:10px}
-.cm-m-r-5{margin-right:10px}
-.cm-p-r-5{padding-right:10px}
-.cm-m-a-6{margin:12px}
-.cm-p-a-6{padding:12px}
-.cm-m-t-6{margin-top:12px}
-.cm-p-t-6{padding-top:12px}
-.cm-m-b-6{margin-bottom:12px}
-.cm-p-b-6{padding-bottom:12px}
-.cm-m-l-6{margin-left:12px}
-.cm-p-l-6{padding-left:12px}
-.cm-m-r-6{margin-right:12px}
-.cm-p-r-6{padding-right:12px}
-.cm-m-a-7{margin:14px}
-.cm-p-a-7{padding:14px}
-.cm-m-t-7{margin-top:14px}
-.cm-p-t-7{padding-top:14px}
-.cm-m-b-7{margin-bottom:14px}
-.cm-p-b-7{padding-bottom:14px}
-.cm-m-l-7{margin-left:14px}
-.cm-p-l-7{padding-left:14px}
-.cm-m-r-7{margin-right:14px}
-.cm-p-r-7{padding-right:14px}
-.cm-m-a-8{margin:16px}
-.cm-p-a-8{padding:16px}
-.cm-m-t-8{margin-top:16px}
-.cm-p-t-8{padding-top:16px}
-.cm-m-b-8{margin-bottom:16px}
-.cm-p-b-8{padding-bottom:16px}
-.cm-m-l-8{margin-left:16px}
-.cm-p-l-8{padding-left:16px}
-.cm-m-r-8{margin-right:16px}
-.cm-p-r-8{padding-right:16px}
-.cm-m-a-9{margin:18px}
-.cm-p-a-9{padding:18px}
-.cm-m-t-9{margin-top:18px}
-.cm-p-t-9{padding-top:18px}
-.cm-m-b-9{margin-bottom:18px}
-.cm-p-b-9{padding-bottom:18px}
-.cm-m-l-9{margin-left:18px}
-.cm-p-l-9{padding-left:18px}
-.cm-m-r-9{margin-right:18px}
-.cm-p-r-9{padding-right:18px}
-.cm-m-a-10{margin:20px}
-.cm-p-a-10{padding:20px}
-.cm-m-t-10{margin-top:20px}
-.cm-p-t-10{padding-top:20px}
-.cm-m-b-10{margin-bottom:20px}
-.cm-p-b-10{padding-bottom:20px}
-.cm-m-l-10{margin-left:20px}
-.cm-p-l-10{padding-left:20px}
-.cm-m-r-10{margin-right:20px}
-.cm-p-r-10{padding-right:20px}
-.cm-m-a-11{margin:22px}
-.cm-p-a-11{padding:22px}
-.cm-m-t-11{margin-top:22px}
-.cm-p-t-11{padding-top:22px}
-.cm-m-b-11{margin-bottom:22px}
-.cm-p-b-11{padding-bottom:22px}
-.cm-m-l-11{margin-left:22px}
-.cm-p-l-11{padding-left:22px}
-.cm-m-r-11{margin-right:22px}
-.cm-p-r-11{padding-right:22px}
-.cm-m-a-12{margin:24px}
-.cm-p-a-12{padding:24px}
-.cm-m-t-12{margin-top:24px}
-.cm-p-t-12{padding-top:24px}
-.cm-m-b-12{margin-bottom:24px}
-.cm-p-b-12{padding-bottom:24px}
-.cm-m-l-12{margin-left:24px}
-.cm-p-l-12{padding-left:24px}
-.cm-m-r-12{margin-right:24px}
-.cm-p-r-12{padding-right:24px}
-.cm-m-a-13{margin:26px}
-.cm-p-a-13{padding:26px}
-.cm-m-t-13{margin-top:26px}
-.cm-p-t-13{padding-top:26px}
-.cm-m-b-13{margin-bottom:26px}
-.cm-p-b-13{padding-bottom:26px}
-.cm-m-l-13{margin-left:26px}
-.cm-p-l-13{padding-left:26px}
-.cm-m-r-13{margin-right:26px}
-.cm-p-r-13{padding-right:26px}
-.cm-m-a-14{margin:28px}
-.cm-p-a-14{padding:28px}
-.cm-m-t-14{margin-top:28px}
-.cm-p-t-14{padding-top:28px}
-.cm-m-b-14{margin-bottom:28px}
-.cm-p-b-14{padding-bottom:28px}
-.cm-m-l-14{margin-left:28px}
-.cm-p-l-14{padding-left:28px}
-.cm-m-r-14{margin-right:28px}
-.cm-p-r-14{padding-right:28px}
-.cm-m-a-15{margin:30px}
-.cm-p-a-15{padding:30px}
-.cm-m-t-15{margin-top:30px}
-.cm-p-t-15{padding-top:30px}
-.cm-m-b-15{margin-bottom:30px}
-.cm-p-b-15{padding-bottom:30px}
-.cm-m-l-15{margin-left:30px}
-.cm-p-l-15{padding-left:30px}
-.cm-m-r-15{margin-right:30px}
-.cm-p-r-15{padding-right:30px}
-.cm-m-a-16{margin:32px}
-.cm-p-a-16{padding:32px}
-.cm-m-t-16{margin-top:32px}
-.cm-p-t-16{padding-top:32px}
-.cm-m-b-16{margin-bottom:32px}
-.cm-p-b-16{padding-bottom:32px}
-.cm-m-l-16{margin-left:32px}
-.cm-p-l-16{padding-left:32px}
-.cm-m-r-16{margin-right:32px}
-.cm-p-r-16{padding-right:32px}
-.cm-m-a-17{margin:34px}
-.cm-p-a-17{padding:34px}
-.cm-m-t-17{margin-top:34px}
-.cm-p-t-17{padding-top:34px}
-.cm-m-b-17{margin-bottom:34px}
-.cm-p-b-17{padding-bottom:34px}
-.cm-m-l-17{margin-left:34px}
-.cm-p-l-17{padding-left:34px}
-.cm-m-r-17{margin-right:34px}
-.cm-p-r-17{padding-right:34px}
-.cm-m-a-18{margin:36px}
-.cm-p-a-18{padding:36px}
-.cm-m-t-18{margin-top:36px}
-.cm-p-t-18{padding-top:36px}
-.cm-m-b-18{margin-bottom:36px}
-.cm-p-b-18{padding-bottom:36px}
-.cm-m-l-18{margin-left:36px}
-.cm-p-l-18{padding-left:36px}
-.cm-m-r-18{margin-right:36px}
-.cm-p-r-18{padding-right:36px}
-.cm-m-a-19{margin:38px}
-.cm-p-a-19{padding:38px}
-.cm-m-t-19{margin-top:38px}
-.cm-p-t-19{padding-top:38px}
-.cm-m-b-19{margin-bottom:38px}
-.cm-p-b-19{padding-bottom:38px}
-.cm-m-l-19{margin-left:38px}
-.cm-p-l-19{padding-left:38px}
-.cm-m-r-19{margin-right:38px}
-.cm-p-r-19{padding-right:38px}
-.cm-m-a-20{margin:40px}
-.cm-p-a-20{padding:40px}
-.cm-m-t-20{margin-top:40px}
-.cm-p-t-20{padding-top:40px}
-.cm-m-b-20{margin-bottom:40px}
-.cm-p-b-20{padding-bottom:40px}
-.cm-m-l-20{margin-left:40px}
-.cm-p-l-20{padding-left:40px}
-.cm-m-r-20{margin-right:40px}
-.cm-p-r-20{padding-right:40px}
-.p-icon{display:inline-block;width:80px;height:24px;vertical-align:middle}
-.p-icon::before{content:'';display:inline-block;width:80px;height:24px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
-.p-icon.i1::before{background-position-y:-714px}
-.p-icon.i2::before{background-position-y:-744px}
-.p-icon.i3::before{background-position-y:-774px}
-.p-icon.i4::before{background-position-y:-804px}
-.p-icon.i5::before{background-position-y:-834px}
-.cm-container{width:960px;padding-left:8px;padding-right:8px}
-.cm-container .cm-row{margin-left:-8px;margin-right:-8px}
-.cm-floor{padding:10px 0}
-.cm-p-a{padding:8px}
-.cm-m-a{padding:8px}
-.cm-floor-title .cm-title{font-size:24px;color:#4a4f58;line-height:30px;font-weight:700;padding-top:4px;padding-bottom:4px}
-.cm-floor-title .cm-subtitle{font-size:14px;color:#93979f;padding-top:4px;padding-bottom:4px}
-.cm-article-item{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
-.cm-article-item .cm-article-title{font-size:18px;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-.cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
-.cm-article-item .cm-article-desc{font-size:14px;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
-.cm-article-item .cm-article-desc.h56{height:56px}
-.cm-article-item .cm-article-cover.cover-168-168{width:168px;height:168px}
-.cm-article-item:hover .cm-article-title{color:#ff5c00}
-.cm-article-item:hover .cm-article-title.has-border{border-color:#ff5c00}
-.cm-article-item.h200{height:200px}
-.cm-article-item .cm-line{height:1px;background-color:#f0f0f0}
-.cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
-.cm-product-item .cm-product-title{font-size:14px;color:#4a4f58;line-height:20px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-.cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
-.cm-product-item .h20{height:20px}
-.cm-product-item .h24{height:24px}
-.cm-product-item .h44{height:44px}
-.swiper-container{padding-bottom:30px}
-.swiper-container.no-bottom{padding-bottom:0 !important}
-.cm-cover-tag{width:72px;height:32px;font-size:16px;line-height:32px;border-radius:4px}
-.cm-tabs .cm-tab{font-size:16px;width:60px;height:30px;line-height:30px;text-align:center}
-.hover-class{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-.hover-class:hover{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);box-shadow:0 0 15px rgba(0,0,0,0.2)}
-.has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
-.has-player::before{content:'';cursor: pointer;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px;height:40px;background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 40px 40px; }
-.cm-btn-box{text-align:center}
-.cm-btn-box .cm-toggle-btn{width:98px;height:32px;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:32px;font-size:14px;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-.cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:20px;height:16px;margin-right:2px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
-.cm-btn-box .cm-toggle-btn.down::after{background-position-x:-90px}
-.cm-btn-box .cm-toggle-btn.up::after{background-position-x:-119px}
-.cm-btn-box .cm-toggle-btn:hover{color:#ff5c00;border-color:#ff5c00}
-.cm-btn-box .cm-toggle-btn:hover.down::after{background-position-x:-150px}
-.cm-btn-box .cm-toggle-btn:hover.up::after{background-position-x:-180px}
-.cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
-.cm-float-container .cm-regexp{display: flex;justify-content: center;align-items: center;text-align: center; background: #fff;font-size: 14px;color: #666;line-height: 1.4}
-.cm-float-container .cm-regexp:hover{ color: #fff; background:#ff5c00 }
-.cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:64px;height:64px;margin:6px 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
-.cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
-.cm-float-container .cm-slide:hover .cm-tooltop{display:block}
-.cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
-.cm-float-container .cm-slide:nth-child(1){height:70px;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:64px}
-.cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
-.cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
-.cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
-.cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
-.cm-float-container .cm-tooltop{position:absolute;padding:15px;background:#ff5c00;top:0;right:80px;border-radius:6px;display: none}
-.cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
-.cm-float-container .cm-tooltop .cm-tooltop-content{font-size:14px;color:#fff}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:190px}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:8px 0}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{width:262px}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:72px;margin:15px 15px 0;width:1px;background:#f1f1f1}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:block}
-.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:8px}
-.cm-footer{padding:25px 0 12px;background-color:#4a4f58;text-align:center;color:#fff;font-size:12px;overflow:hidden}
-.cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
-.cm-entry .cm-icon-content{width: 400px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
-.cm-entry .cm-icon-content img{display: block; width: 100%;}
-.cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:32px;height:32px;right:20px;top:-40px;background:url(/img/activity/pc_close.png) no-repeat center center}
-.cm-entry .cm-icon-content .btn{display: block;width: 60px;height: 60px;background: #666;position: absolute;right: 40px;z-index: 999;cursor: pointer;opacity: 0;}
-.cm-entry .cm-icon-content .btn1{top: 122px;}
-.cm-entry .cm-icon-content .btn2{top: 250px;}
-.banner-container{display: flex;justify-content: center; height:480px;background:pink;width: 100%;overflow: hidden;}
-.banner-container .banner{ height: 480px;}
-.banner-container .banner img{display: block;min-width: 1920px}
-.cm-to-top{width:64px;height:64px;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
-.cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
-.cm-to-top .cm-icon-bar:nth-child(1){width:28px;height:4px;background:#999999;margin-top:20px}
-.cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:10px solid #999999}
-.cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
-.cm-to-top:hover{background:#ff5c00}
-.cm-to-top:hover .cm-icon-bar:nth-child(1),.cm-to-top:hover .cm-icon-bar:nth-child(3){background:#fff !important}
-.cm-to-top:hover .cm-icon-bar:nth-child(2){border-bottom-color:#fff}
-}
-@media (min-width:1200px){
-.cm-container{width:1140px}
-}
-.cm-tags{white-space:nowrap}
-.cm-tags .cm-tag{display:inline-block;padding:1px 4px;font-size:12px;border:1px solid #999;border-radius:2px}
-.cm-tags .cm-tag.color1{border-color:#aaa;background-color:#fff;color:#888}
-.cm-tags .cm-tag.color2{border-color:#f94b4b;background-color:#fff1eb;color:#f94b4b}
-.cm-tags .cm-tag.color3{border-color:rgba(225,86,22,0.24);background-color:#fff;color:#FF5B00}
-.cm-meibohui-tag{font-size:12px;display:inline-block;padding:2px 4px;text-align:center;color:#ffffff !important;background-image:-webkit-gradient(linear,right top,left top,from(#f9c023),to(#f83600));background-image:-o-linear-gradient(right,#f9c023 0%,#f83600 100%);background-image:linear-gradient(270deg,#f9c023 0%,#f83600 100%);border-radius:0px 10px 0px 0px}
-.cm-swiper .cm-swiper-button-prev,.cm-swiper .cm-swiper-button-next{visibility:hidden;width:44px;height:100px;background:rgba(102,102,102,0.74) no-repeat center;z-index:20;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;border-radius:6px;opacity:0;-webkit-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;background-size:30px !important}
-.cm-swiper .cm-swiper-button-prev{background-image:url(/img/activity/prev-icon.png);left:-60px}
-.cm-swiper .cm-swiper-button-next{background-image:url(/img/activity/next-icon.png);right:-60px}
-.cm-swiper:hover .cm-swiper-button-prev,.cm-swiper:hover .cm-swiper-button-next{opacity:1;visibility:visible}
-.swiper-container .swiper-pagination-bullet-active{width:28px !important;background:#ff5c00}
-.swiper-container .swiper-pagination-bullet{width:14px;height:4px;display:inline-block;border-radius:2px}
-.cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
-.cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
-.cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
-.cm-cover-tag{display:block;background:#000;text-align:center;color:#fff}
-.cm-cover-tag.color1{background:rgba(0,0,0,0.5)}
-.cm-cover-tag.color2{background:#1ece70}
-.cm-cover-tag.color3{background:#ff5c00}
-.cm-tabs{text-align:right}
-.cm-tabs .cm-tab-content{display:inline-block;overflow:hidden;border-radius:4px}
-.cm-tabs .cm-tab{position:relative;display:inline-block;color:#4a4f58;cursor:pointer;background:#fff}
-.cm-tabs .cm-tab.on{color:#fff;background-color:#ff5c00}
-.cm-loading{z-index:99999;width:100vw;height:100vh;position:fixed;top:0;background:#fff}
-.cm-prodcut-price .red { color: #f94b4b;}
-
-@media screen and (min-width: 768px) {
-.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: rgba(0,0,0,0.8);z-index: 99999}
-/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
-.video-popup .content{width: 944px;height: 642px; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
-.video-popup .content video{width: 100%;height: 100%;display: block;}
-.video-popup .close {position: absolute;right: 30px;top: 30px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
-}
-
-@media screen and (max-width: 768px) {
-.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
-/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
-.video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
-.video-popup .content video{width: 100%;height: 100%;display: block;}
-.video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
-}
+body{background:#f5f5f5}
+a{color:#333;text-decoration:none}
+.swiper-wrapper{height: auto;}
+.cm-left{float:left}
+.cm-right{float:right}
+.cm-clearfix::after,.cm-container::after,.cm-row::after{content:'';display:block;clear:both}
+.cm-hidden,.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{overflow:hidden}
+.cm-none{display:none}
+.cm-not-visible{visibility:hidden}
+.cm-flex,.cm-flex-j-between{display:-webkit-box;display:-ms-flexbox;display:flex}
+.bg-white{background-color:#fff}
+.cm-flex-j-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.cm-flex-1{-webkit-box-flex:1;-ms-flex:1;flex:1}
+.text-justify{text-align:justify}
+.cm-radius-4{border-radius:4px;overflow:hidden}
+.cm-absolute{position:absolute}
+.cm-relative{position:relative}
+.cm-top,.cm-top-left,.cm-top-right{top:0}
+.cm-bottom,.cm-bottom-right,.cm-bottom-left{bottom:0}
+.cm-left,.cm-top-left,.cm-bottom-left{left:0}
+.cm-right,.cm-top-right,.cm-bottom-right{right:0}
+.bg-white{background-color:#fff}
+.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}
+.cm-text-ellipsis-1{-webkit-line-clamp:1}
+.cm-text-ellipsis-2{-webkit-line-clamp:2}
+.cm-text-ellipsis-3{-webkit-line-clamp:3}
+.cm-text-ellipsis-4{-webkit-line-clamp:4}
+.cm-img-responsive{max-width:100%;height:auto;display:block}
+.cm-container{width:100%;margin:0 auto}
+[class*='cm-col-']{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-floor .swiper-slide{ height: auto;}
+.cm-product-item .cm-prodcut-price .price.none{color: #999;text-decoration: line-through;}
+.cm-product-item .cm-prodcut-price .price.none .red{color: #999;}
+@media (max-width:560px){
+.cm-col-xs-1{width:1.66667%}
+.cm-col-xs-2{width:3.33333%}
+.cm-col-xs-3{width:5%}
+.cm-col-xs-4{width:6.66667%}
+.cm-col-xs-5{width:8.33333%}
+.cm-col-xs-6{width:10%}
+.cm-col-xs-7{width:11.66667%}
+.cm-col-xs-8{width:13.33333%}
+.cm-col-xs-9{width:15%}
+.cm-col-xs-10{width:16.66667%}
+.cm-col-xs-11{width:18.33333%}
+.cm-col-xs-12{width:20%}
+.cm-col-xs-13{width:21.66667%}
+.cm-col-xs-14{width:23.33333%}
+.cm-col-xs-15{width:25%}
+.cm-col-xs-16{width:26.66667%}
+.cm-col-xs-17{width:28.33333%}
+.cm-col-xs-18{width:30%}
+.cm-col-xs-19{width:31.66667%}
+.cm-col-xs-20{width:33.33333%}
+.cm-col-xs-21{width:35%}
+.cm-col-xs-22{width:36.66667%}
+.cm-col-xs-23{width:38.33333%}
+.cm-col-xs-24{width:40%}
+.cm-col-xs-25{width:41.66667%}
+.cm-col-xs-26{width:43.33333%}
+.cm-col-xs-27{width:45%}
+.cm-col-xs-28{width:46.66667%}
+.cm-col-xs-29{width:48.33333%}
+.cm-col-xs-30{width:50%}
+.cm-col-xs-31{width:51.66667%}
+.cm-col-xs-32{width:53.33333%}
+.cm-col-xs-33{width:55%}
+.cm-col-xs-34{width:56.66667%}
+.cm-col-xs-35{width:58.33333%}
+.cm-col-xs-36{width:60%}
+.cm-col-xs-37{width:61.66667%}
+.cm-col-xs-38{width:63.33333%}
+.cm-col-xs-39{width:65%}
+.cm-col-xs-40{width:66.66667%}
+.cm-col-xs-41{width:68.33333%}
+.cm-col-xs-42{width:70%}
+.cm-col-xs-43{width:71.66667%}
+.cm-col-xs-44{width:73.33333%}
+.cm-col-xs-45{width:75%}
+.cm-col-xs-46{width:76.66667%}
+.cm-col-xs-47{width:78.33333%}
+.cm-col-xs-48{width:80%}
+.cm-col-xs-49{width:81.66667%}
+.cm-col-xs-50{width:83.33333%}
+.cm-col-xs-51{width:85%}
+.cm-col-xs-52{width:86.66667%}
+.cm-col-xs-53{width:88.33333%}
+.cm-col-xs-54{width:90%}
+.cm-col-xs-55{width:91.66667%}
+.cm-col-xs-56{width:93.33333%}
+.cm-col-xs-57{width:95%}
+.cm-col-xs-58{width:96.66667%}
+.cm-col-xs-59{width:98.33333%}
+.cm-col-xs-60{width:100%}
+.cm-m-a-1{margin:0.25vw}
+.cm-p-a-1{padding:0.25vw}
+.cm-m-t-1{margin-top:0.25vw}
+.cm-p-t-1{padding-top:0.25vw}
+.cm-m-b-1{margin-bottom:0.25vw}
+.cm-p-b-1{padding-bottom:0.25vw}
+.cm-m-l-1{margin-left:0.25vw}
+.cm-p-l-1{padding-left:0.25vw}
+.cm-m-r-1{margin-right:0.25vw}
+.cm-p-r-1{padding-right:0.25vw}
+.cm-m-a-2{margin:0.5vw}
+.cm-p-a-2{padding:0.5vw}
+.cm-m-t-2{margin-top:0.5vw}
+.cm-p-t-2{padding-top:0.5vw}
+.cm-m-b-2{margin-bottom:0.5vw}
+.cm-p-b-2{padding-bottom:0.5vw}
+.cm-m-l-2{margin-left:0.5vw}
+.cm-p-l-2{padding-left:0.5vw}
+.cm-m-r-2{margin-right:0.5vw}
+.cm-p-r-2{padding-right:0.5vw}
+.cm-m-a-3{margin:0.75vw}
+.cm-p-a-3{padding:0.75vw}
+.cm-m-t-3{margin-top:0.75vw}
+.cm-p-t-3{padding-top:0.75vw}
+.cm-m-b-3{margin-bottom:0.75vw}
+.cm-p-b-3{padding-bottom:0.75vw}
+.cm-m-l-3{margin-left:0.75vw}
+.cm-p-l-3{padding-left:0.75vw}
+.cm-m-r-3{margin-right:0.75vw}
+.cm-p-r-3{padding-right:0.75vw}
+.cm-m-a-4{margin:1vw}
+.cm-p-a-4{padding:1vw}
+.cm-m-t-4{margin-top:1vw}
+.cm-p-t-4{padding-top:1vw}
+.cm-m-b-4{margin-bottom:1vw}
+.cm-p-b-4{padding-bottom:1vw}
+.cm-m-l-4{margin-left:1vw}
+.cm-p-l-4{padding-left:1vw}
+.cm-m-r-4{margin-right:1vw}
+.cm-p-r-4{padding-right:1vw}
+.cm-m-a-5{margin:1.25vw}
+.cm-p-a-5{padding:1.25vw}
+.cm-m-t-5{margin-top:1.25vw}
+.cm-p-t-5{padding-top:1.25vw}
+.cm-m-b-5{margin-bottom:1.25vw}
+.cm-p-b-5{padding-bottom:1.25vw}
+.cm-m-l-5{margin-left:1.25vw}
+.cm-p-l-5{padding-left:1.25vw}
+.cm-m-r-5{margin-right:1.25vw}
+.cm-p-r-5{padding-right:1.25vw}
+.cm-m-a-6{margin:1.5vw}
+.cm-p-a-6{padding:1.5vw}
+.cm-m-t-6{margin-top:1.5vw}
+.cm-p-t-6{padding-top:1.5vw}
+.cm-m-b-6{margin-bottom:1.5vw}
+.cm-p-b-6{padding-bottom:1.5vw}
+.cm-m-l-6{margin-left:1.5vw}
+.cm-p-l-6{padding-left:1.5vw}
+.cm-m-r-6{margin-right:1.5vw}
+.cm-p-r-6{padding-right:1.5vw}
+.cm-m-a-7{margin:1.75vw}
+.cm-p-a-7{padding:1.75vw}
+.cm-m-t-7{margin-top:1.75vw}
+.cm-p-t-7{padding-top:1.75vw}
+.cm-m-b-7{margin-bottom:1.75vw}
+.cm-p-b-7{padding-bottom:1.75vw}
+.cm-m-l-7{margin-left:1.75vw}
+.cm-p-l-7{padding-left:1.75vw}
+.cm-m-r-7{margin-right:1.75vw}
+.cm-p-r-7{padding-right:1.75vw}
+.cm-m-a-8{margin:2vw}
+.cm-p-a-8{padding:2vw}
+.cm-m-t-8{margin-top:2vw}
+.cm-p-t-8{padding-top:2vw}
+.cm-m-b-8{margin-bottom:2vw}
+.cm-p-b-8{padding-bottom:2vw}
+.cm-m-l-8{margin-left:2vw}
+.cm-p-l-8{padding-left:2vw}
+.cm-m-r-8{margin-right:2vw}
+.cm-p-r-8{padding-right:2vw}
+.cm-m-a-9{margin:2.25vw}
+.cm-p-a-9{padding:2.25vw}
+.cm-m-t-9{margin-top:2.25vw}
+.cm-p-t-9{padding-top:2.25vw}
+.cm-m-b-9{margin-bottom:2.25vw}
+.cm-p-b-9{padding-bottom:2.25vw}
+.cm-m-l-9{margin-left:2.25vw}
+.cm-p-l-9{padding-left:2.25vw}
+.cm-m-r-9{margin-right:2.25vw}
+.cm-p-r-9{padding-right:2.25vw}
+.cm-m-a-10{margin:2.5vw}
+.cm-p-a-10{padding:2.5vw}
+.cm-m-t-10{margin-top:2.5vw}
+.cm-p-t-10{padding-top:2.5vw}
+.cm-m-b-10{margin-bottom:2.5vw}
+.cm-p-b-10{padding-bottom:2.5vw}
+.cm-m-l-10{margin-left:2.5vw}
+.cm-p-l-10{padding-left:2.5vw}
+.cm-m-r-10{margin-right:2.5vw}
+.cm-p-r-10{padding-right:2.5vw}
+.cm-m-a-11{margin:2.75vw}
+.cm-p-a-11{padding:2.75vw}
+.cm-m-t-11{margin-top:2.75vw}
+.cm-p-t-11{padding-top:2.75vw}
+.cm-m-b-11{margin-bottom:2.75vw}
+.cm-p-b-11{padding-bottom:2.75vw}
+.cm-m-l-11{margin-left:2.75vw}
+.cm-p-l-11{padding-left:2.75vw}
+.cm-m-r-11{margin-right:2.75vw}
+.cm-p-r-11{padding-right:2.75vw}
+.cm-m-a-12{margin:3vw}
+.cm-p-a-12{padding:3vw}
+.cm-m-t-12{margin-top:3vw}
+.cm-p-t-12{padding-top:3vw}
+.cm-m-b-12{margin-bottom:3vw}
+.cm-p-b-12{padding-bottom:3vw}
+.cm-m-l-12{margin-left:3vw}
+.cm-p-l-12{padding-left:3vw}
+.cm-m-r-12{margin-right:3vw}
+.cm-p-r-12{padding-right:3vw}
+.cm-m-a-13{margin:3.25vw}
+.cm-p-a-13{padding:3.25vw}
+.cm-m-t-13{margin-top:3.25vw}
+.cm-p-t-13{padding-top:3.25vw}
+.cm-m-b-13{margin-bottom:3.25vw}
+.cm-p-b-13{padding-bottom:3.25vw}
+.cm-m-l-13{margin-left:3.25vw}
+.cm-p-l-13{padding-left:3.25vw}
+.cm-m-r-13{margin-right:3.25vw}
+.cm-p-r-13{padding-right:3.25vw}
+.cm-m-a-14{margin:3.5vw}
+.cm-p-a-14{padding:3.5vw}
+.cm-m-t-14{margin-top:3.5vw}
+.cm-p-t-14{padding-top:3.5vw}
+.cm-m-b-14{margin-bottom:3.5vw}
+.cm-p-b-14{padding-bottom:3.5vw}
+.cm-m-l-14{margin-left:3.5vw}
+.cm-p-l-14{padding-left:3.5vw}
+.cm-m-r-14{margin-right:3.5vw}
+.cm-p-r-14{padding-right:3.5vw}
+.cm-m-a-15{margin:3.75vw}
+.cm-p-a-15{padding:3.75vw}
+.cm-m-t-15{margin-top:3.75vw}
+.cm-p-t-15{padding-top:3.75vw}
+.cm-m-b-15{margin-bottom:3.75vw}
+.cm-p-b-15{padding-bottom:3.75vw}
+.cm-m-l-15{margin-left:3.75vw}
+.cm-p-l-15{padding-left:3.75vw}
+.cm-m-r-15{margin-right:3.75vw}
+.cm-p-r-15{padding-right:3.75vw}
+.cm-m-a-16{margin:4vw}
+.cm-p-a-16{padding:4vw}
+.cm-m-t-16{margin-top:4vw}
+.cm-p-t-16{padding-top:4vw}
+.cm-m-b-16{margin-bottom:4vw}
+.cm-p-b-16{padding-bottom:4vw}
+.cm-m-l-16{margin-left:4vw}
+.cm-p-l-16{padding-left:4vw}
+.cm-m-r-16{margin-right:4vw}
+.cm-p-r-16{padding-right:4vw}
+.cm-m-a-17{margin:4.25vw}
+.cm-p-a-17{padding:4.25vw}
+.cm-m-t-17{margin-top:4.25vw}
+.cm-p-t-17{padding-top:4.25vw}
+.cm-m-b-17{margin-bottom:4.25vw}
+.cm-p-b-17{padding-bottom:4.25vw}
+.cm-m-l-17{margin-left:4.25vw}
+.cm-p-l-17{padding-left:4.25vw}
+.cm-m-r-17{margin-right:4.25vw}
+.cm-p-r-17{padding-right:4.25vw}
+.cm-m-a-18{margin:4.5vw}
+.cm-p-a-18{padding:4.5vw}
+.cm-m-t-18{margin-top:4.5vw}
+.cm-p-t-18{padding-top:4.5vw}
+.cm-m-b-18{margin-bottom:4.5vw}
+.cm-p-b-18{padding-bottom:4.5vw}
+.cm-m-l-18{margin-left:4.5vw}
+.cm-p-l-18{padding-left:4.5vw}
+.cm-m-r-18{margin-right:4.5vw}
+.cm-p-r-18{padding-right:4.5vw}
+.cm-m-a-19{margin:4.75vw}
+.cm-p-a-19{padding:4.75vw}
+.cm-m-t-19{margin-top:4.75vw}
+.cm-p-t-19{padding-top:4.75vw}
+.cm-m-b-19{margin-bottom:4.75vw}
+.cm-p-b-19{padding-bottom:4.75vw}
+.cm-m-l-19{margin-left:4.75vw}
+.cm-p-l-19{padding-left:4.75vw}
+.cm-m-r-19{margin-right:4.75vw}
+.cm-p-r-19{padding-right:4.75vw}
+.cm-m-a-20{margin:5vw}
+.cm-p-a-20{padding:5vw}
+.cm-m-t-20{margin-top:5vw}
+.cm-p-t-20{padding-top:5vw}
+.cm-m-b-20{margin-bottom:5vw}
+.cm-p-b-20{padding-bottom:5vw}
+.cm-m-l-20{margin-left:5vw}
+.cm-p-l-20{padding-left:5vw}
+.cm-m-r-20{margin-right:5vw}
+.cm-p-r-20{padding-right:5vw}
+.p-icon{display:inline-block;width:66px;height:22px;vertical-align:middle}
+.p-icon::before{content:'';display:inline-block;width:66px;height:22px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
+.p-icon.i1::before{background-position-y:-714px}
+.p-icon.i2::before{background-position-y:-744px}
+.p-icon.i3::before{background-position-y:-774px}
+.p-icon.i4::before{background-position-y:-804px}
+.p-icon.i5::before{background-position-y:-834px}
+.cm-container{padding-left:1vw;padding-right:1vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-floor{padding:2.2vw 0}
+.cm-p-a{padding:1vw}
+.cm-m-a{padding:1vw}
+.cm-floor-title .cm-title{font-size:4vw;color:#4a4f58;font-weight:700;line-height:7.5vw;padding-top:1vw;padding-bottom:1vw}
+.cm-floor-title .cm-subtitle{font-size:3.5vw;color:#93979f;padding-top:1vw;padding-bottom:1vw}
+.cm-article-item{overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-article-item .cm-article-title{font-size:3.5vw;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
+.cm-article-item .cm-article-desc{font-size:2.5vw;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
+.cm-article-item .cm-article-desc.h56{height:10.5vw}
+.cm-article-item .cm-article-cover.cover-168-168{width:27vw;height:27vw}
+.cm-article-item.h200{height:33vw}
+.cm-article-item .cm-line{display:none;height:1px;background-color:#f0f0f0}
+.cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
+.cm-product-item .cm-product-title{font-size:3vw;color:#4a4f58;line-height:5vw;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-product-item .cm-prodcut-price{font-size:3vw;font-weight:bold}
+.cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
+.cm-product-item .h20{height:20px}
+.cm-product-item .h24{height:24px;line-height: 24px;}
+.cm-product-item .h44{height:10vw}
+.swiper-container{padding-bottom:8vw}
+.cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
+.cm-scroll-container::-webkit-scrollbar{display:none}
+.cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
+.cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
+.cm-cover-tag{width:11vw;height:4vw;font-size:3vw;line-height:4vw;padding:0.5vw 1vw;border-radius:4px}
+.cm-tabs{height:6vw}
+.cm-tabs .cm-tab{font-size:3vw;width:12vw;height:6vw;line-height:6vw;text-align:center}
+.cm-btn-box{text-align:center}
+.cm-btn-box .cm-toggle-btn{width:20vw;height:6vw;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:6vw;font-size:3vw;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:10px;height:16px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
+.cm-btn-box .cm-toggle-btn.down::after{background-position-x:-96px}
+.cm-btn-box .cm-toggle-btn.up::after{background-position-x:-125px}
+.cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
+.cm-float-container .cm-regexp{ background: #fff; font-size: 2.4vw;line-height: 1.4;display: flex;justify-content: center;align-items: center;text-align: center;color: #666;}
+.cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:12vw;height:12vw;margin:0.8vw 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
+.cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
+.cm-float-container .cm-slide:hover .cm-tooltop{display:block}
+.cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
+.cm-float-container .cm-slide:nth-child(1){height:13.2vw;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:12vw}
+.cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
+.cm-float-container .cm-tooltop{position:absolute;padding:3.5vw;background:#ff5c00;top:0;right:16vw;border-radius:6px;display:none}
+.cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
+.cm-float-container .cm-tooltop .cm-tooltop-content{font-size:3.2vw;color:#fff}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:51.6vw}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:2.5vw 0}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{text-align:center;width:44.8vw;}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:11vw;margin:3vw 3vw 0;width:1px;background:#f1f1f1}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:inline-block;width:16.4vw;height:16.4vw}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:2vw}
+.cm-float-container .cm-mobile-tooltop .cm-tooltop-content .cm-item{ font-size: 1.8vw; }
+.cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
+.cm-entry .cm-icon-content{position:absolute;width:75.1vw;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+.cm-entry .cm-icon-content img{width:100%}
+.cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:6.45vw;height:6.45vw;right:5vw;top:-8vw;background:url(/img/activity/pc_close.png) no-repeat center center;background-size:6.4vw}
+.cm-entry .cm-icon-content .btn{display: block;width: 10vw;height: 10vw;background: #666;position: absolute;right: 8vw;z-index: 999;cursor: pointer;opacity: 0;}
+.cm-entry .cm-icon-content .btn1{top: 24vw;}
+.cm-entry .cm-icon-content .btn2{top: 47.5vw;}
+.cm-footer{padding:4vw 0 2vw;background-color:#4a4f58;text-align:center;color:#fff;font-size:2.4vw;overflow:hidden}
+.cm-footer img{width:12vw}
+.banner-container{position:relative;width:100vw;height:45vw;overflow:hidden}
+.banner-container .banner{width:100vw;position:absolute;height:100%;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
+.banner-container .cm-container{height:100%;padding: 0;}
+.banner-container img{display:block;height:100%;width: 100%;}
+.has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
+.has-player::before{content:'';cursor: pointer; display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6vw;height:6vw; background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 6vw;}
+.cm-to-top{width:12vw;height:12vw;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+.cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+.cm-to-top .cm-icon-bar:nth-child(1){width:6vw;height:1vw;background:#999999;margin-top:4vw;}
+.cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:3vw solid transparent;border-right:3vw solid transparent;border-bottom:2vw solid #999999}
+.cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
+}
+@media (max-width:992px){
+.cm-swiper-button-prev,.cm-swiper-button-next{display:none}
+}
+@media (min-width:560px){
+.cm-col-md-1{width:1.66667%}
+.cm-col-md-2{width:3.33333%}
+.cm-col-md-3{width:5%}
+.cm-col-md-4{width:6.66667%}
+.cm-col-md-5{width:8.33333%}
+.cm-col-md-6{width:10%}
+.cm-col-md-7{width:11.66667%}
+.cm-col-md-8{width:13.33333%}
+.cm-col-md-9{width:15%}
+.cm-col-md-10{width:16.66667%}
+.cm-col-md-11{width:18.33333%}
+.cm-col-md-12{width:20%}
+.cm-col-md-13{width:21.66667%}
+.cm-col-md-14{width:23.33333%}
+.cm-col-md-15{width:25%}
+.cm-col-md-16{width:26.66667%}
+.cm-col-md-17{width:28.33333%}
+.cm-col-md-18{width:30%}
+.cm-col-md-19{width:31.66667%}
+.cm-col-md-20{width:33.33333%}
+.cm-col-md-21{width:35%}
+.cm-col-md-22{width:36.66667%}
+.cm-col-md-23{width:38.33333%}
+.cm-col-md-24{width:40%}
+.cm-col-md-25{width:41.66667%}
+.cm-col-md-26{width:43.33333%}
+.cm-col-md-27{width:45%}
+.cm-col-md-28{width:46.66667%}
+.cm-col-md-29{width:48.33333%}
+.cm-col-md-30{width:50%}
+.cm-col-md-31{width:51.66667%}
+.cm-col-md-32{width:53.33333%}
+.cm-col-md-33{width:55%}
+.cm-col-md-34{width:56.66667%}
+.cm-col-md-35{width:58.33333%}
+.cm-col-md-36{width:60%}
+.cm-col-md-37{width:61.66667%}
+.cm-col-md-38{width:63.33333%}
+.cm-col-md-39{width:65%}
+.cm-col-md-40{width:66.66667%}
+.cm-col-md-41{width:68.33333%}
+.cm-col-md-42{width:70%}
+.cm-col-md-43{width:71.66667%}
+.cm-col-md-44{width:73.33333%}
+.cm-col-md-45{width:75%}
+.cm-col-md-46{width:76.66667%}
+.cm-col-md-47{width:78.33333%}
+.cm-col-md-48{width:80%}
+.cm-col-md-49{width:81.66667%}
+.cm-col-md-50{width:83.33333%}
+.cm-col-md-51{width:85%}
+.cm-col-md-52{width:86.66667%}
+.cm-col-md-53{width:88.33333%}
+.cm-col-md-54{width:90%}
+.cm-col-md-55{width:91.66667%}
+.cm-col-md-56{width:93.33333%}
+.cm-col-md-57{width:95%}
+.cm-col-md-58{width:96.66667%}
+.cm-col-md-59{width:98.33333%}
+.cm-col-md-60{width:100%}
+.cm-m-a-1{margin:2px}
+.cm-p-a-1{padding:2px}
+.cm-m-t-1{margin-top:2px}
+.cm-p-t-1{padding-top:2px}
+.cm-m-b-1{margin-bottom:2px}
+.cm-p-b-1{padding-bottom:2px}
+.cm-m-l-1{margin-left:2px}
+.cm-p-l-1{padding-left:2px}
+.cm-m-r-1{margin-right:2px}
+.cm-p-r-1{padding-right:2px}
+.cm-m-a-2{margin:4px}
+.cm-p-a-2{padding:4px}
+.cm-m-t-2{margin-top:4px}
+.cm-p-t-2{padding-top:4px}
+.cm-m-b-2{margin-bottom:4px}
+.cm-p-b-2{padding-bottom:4px}
+.cm-m-l-2{margin-left:4px}
+.cm-p-l-2{padding-left:4px}
+.cm-m-r-2{margin-right:4px}
+.cm-p-r-2{padding-right:4px}
+.cm-m-a-3{margin:6px}
+.cm-p-a-3{padding:6px}
+.cm-m-t-3{margin-top:6px}
+.cm-p-t-3{padding-top:6px}
+.cm-m-b-3{margin-bottom:6px}
+.cm-p-b-3{padding-bottom:6px}
+.cm-m-l-3{margin-left:6px}
+.cm-p-l-3{padding-left:6px}
+.cm-m-r-3{margin-right:6px}
+.cm-p-r-3{padding-right:6px}
+.cm-m-a-4{margin:8px}
+.cm-p-a-4{padding:8px}
+.cm-m-t-4{margin-top:8px}
+.cm-p-t-4{padding-top:8px}
+.cm-m-b-4{margin-bottom:8px}
+.cm-p-b-4{padding-bottom:8px}
+.cm-m-l-4{margin-left:8px}
+.cm-p-l-4{padding-left:8px}
+.cm-m-r-4{margin-right:8px}
+.cm-p-r-4{padding-right:8px}
+.cm-m-a-5{margin:10px}
+.cm-p-a-5{padding:10px}
+.cm-m-t-5{margin-top:10px}
+.cm-p-t-5{padding-top:10px}
+.cm-m-b-5{margin-bottom:10px}
+.cm-p-b-5{padding-bottom:10px}
+.cm-m-l-5{margin-left:10px}
+.cm-p-l-5{padding-left:10px}
+.cm-m-r-5{margin-right:10px}
+.cm-p-r-5{padding-right:10px}
+.cm-m-a-6{margin:12px}
+.cm-p-a-6{padding:12px}
+.cm-m-t-6{margin-top:12px}
+.cm-p-t-6{padding-top:12px}
+.cm-m-b-6{margin-bottom:12px}
+.cm-p-b-6{padding-bottom:12px}
+.cm-m-l-6{margin-left:12px}
+.cm-p-l-6{padding-left:12px}
+.cm-m-r-6{margin-right:12px}
+.cm-p-r-6{padding-right:12px}
+.cm-m-a-7{margin:14px}
+.cm-p-a-7{padding:14px}
+.cm-m-t-7{margin-top:14px}
+.cm-p-t-7{padding-top:14px}
+.cm-m-b-7{margin-bottom:14px}
+.cm-p-b-7{padding-bottom:14px}
+.cm-m-l-7{margin-left:14px}
+.cm-p-l-7{padding-left:14px}
+.cm-m-r-7{margin-right:14px}
+.cm-p-r-7{padding-right:14px}
+.cm-m-a-8{margin:16px}
+.cm-p-a-8{padding:16px}
+.cm-m-t-8{margin-top:16px}
+.cm-p-t-8{padding-top:16px}
+.cm-m-b-8{margin-bottom:16px}
+.cm-p-b-8{padding-bottom:16px}
+.cm-m-l-8{margin-left:16px}
+.cm-p-l-8{padding-left:16px}
+.cm-m-r-8{margin-right:16px}
+.cm-p-r-8{padding-right:16px}
+.cm-m-a-9{margin:18px}
+.cm-p-a-9{padding:18px}
+.cm-m-t-9{margin-top:18px}
+.cm-p-t-9{padding-top:18px}
+.cm-m-b-9{margin-bottom:18px}
+.cm-p-b-9{padding-bottom:18px}
+.cm-m-l-9{margin-left:18px}
+.cm-p-l-9{padding-left:18px}
+.cm-m-r-9{margin-right:18px}
+.cm-p-r-9{padding-right:18px}
+.cm-m-a-10{margin:20px}
+.cm-p-a-10{padding:20px}
+.cm-m-t-10{margin-top:20px}
+.cm-p-t-10{padding-top:20px}
+.cm-m-b-10{margin-bottom:20px}
+.cm-p-b-10{padding-bottom:20px}
+.cm-m-l-10{margin-left:20px}
+.cm-p-l-10{padding-left:20px}
+.cm-m-r-10{margin-right:20px}
+.cm-p-r-10{padding-right:20px}
+.cm-m-a-11{margin:22px}
+.cm-p-a-11{padding:22px}
+.cm-m-t-11{margin-top:22px}
+.cm-p-t-11{padding-top:22px}
+.cm-m-b-11{margin-bottom:22px}
+.cm-p-b-11{padding-bottom:22px}
+.cm-m-l-11{margin-left:22px}
+.cm-p-l-11{padding-left:22px}
+.cm-m-r-11{margin-right:22px}
+.cm-p-r-11{padding-right:22px}
+.cm-m-a-12{margin:24px}
+.cm-p-a-12{padding:24px}
+.cm-m-t-12{margin-top:24px}
+.cm-p-t-12{padding-top:24px}
+.cm-m-b-12{margin-bottom:24px}
+.cm-p-b-12{padding-bottom:24px}
+.cm-m-l-12{margin-left:24px}
+.cm-p-l-12{padding-left:24px}
+.cm-m-r-12{margin-right:24px}
+.cm-p-r-12{padding-right:24px}
+.cm-m-a-13{margin:26px}
+.cm-p-a-13{padding:26px}
+.cm-m-t-13{margin-top:26px}
+.cm-p-t-13{padding-top:26px}
+.cm-m-b-13{margin-bottom:26px}
+.cm-p-b-13{padding-bottom:26px}
+.cm-m-l-13{margin-left:26px}
+.cm-p-l-13{padding-left:26px}
+.cm-m-r-13{margin-right:26px}
+.cm-p-r-13{padding-right:26px}
+.cm-m-a-14{margin:28px}
+.cm-p-a-14{padding:28px}
+.cm-m-t-14{margin-top:28px}
+.cm-p-t-14{padding-top:28px}
+.cm-m-b-14{margin-bottom:28px}
+.cm-p-b-14{padding-bottom:28px}
+.cm-m-l-14{margin-left:28px}
+.cm-p-l-14{padding-left:28px}
+.cm-m-r-14{margin-right:28px}
+.cm-p-r-14{padding-right:28px}
+.cm-m-a-15{margin:30px}
+.cm-p-a-15{padding:30px}
+.cm-m-t-15{margin-top:30px}
+.cm-p-t-15{padding-top:30px}
+.cm-m-b-15{margin-bottom:30px}
+.cm-p-b-15{padding-bottom:30px}
+.cm-m-l-15{margin-left:30px}
+.cm-p-l-15{padding-left:30px}
+.cm-m-r-15{margin-right:30px}
+.cm-p-r-15{padding-right:30px}
+.cm-m-a-16{margin:32px}
+.cm-p-a-16{padding:32px}
+.cm-m-t-16{margin-top:32px}
+.cm-p-t-16{padding-top:32px}
+.cm-m-b-16{margin-bottom:32px}
+.cm-p-b-16{padding-bottom:32px}
+.cm-m-l-16{margin-left:32px}
+.cm-p-l-16{padding-left:32px}
+.cm-m-r-16{margin-right:32px}
+.cm-p-r-16{padding-right:32px}
+.cm-m-a-17{margin:34px}
+.cm-p-a-17{padding:34px}
+.cm-m-t-17{margin-top:34px}
+.cm-p-t-17{padding-top:34px}
+.cm-m-b-17{margin-bottom:34px}
+.cm-p-b-17{padding-bottom:34px}
+.cm-m-l-17{margin-left:34px}
+.cm-p-l-17{padding-left:34px}
+.cm-m-r-17{margin-right:34px}
+.cm-p-r-17{padding-right:34px}
+.cm-m-a-18{margin:36px}
+.cm-p-a-18{padding:36px}
+.cm-m-t-18{margin-top:36px}
+.cm-p-t-18{padding-top:36px}
+.cm-m-b-18{margin-bottom:36px}
+.cm-p-b-18{padding-bottom:36px}
+.cm-m-l-18{margin-left:36px}
+.cm-p-l-18{padding-left:36px}
+.cm-m-r-18{margin-right:36px}
+.cm-p-r-18{padding-right:36px}
+.cm-m-a-19{margin:38px}
+.cm-p-a-19{padding:38px}
+.cm-m-t-19{margin-top:38px}
+.cm-p-t-19{padding-top:38px}
+.cm-m-b-19{margin-bottom:38px}
+.cm-p-b-19{padding-bottom:38px}
+.cm-m-l-19{margin-left:38px}
+.cm-p-l-19{padding-left:38px}
+.cm-m-r-19{margin-right:38px}
+.cm-p-r-19{padding-right:38px}
+.cm-m-a-20{margin:40px}
+.cm-p-a-20{padding:40px}
+.cm-m-t-20{margin-top:40px}
+.cm-p-t-20{padding-top:40px}
+.cm-m-b-20{margin-bottom:40px}
+.cm-p-b-20{padding-bottom:40px}
+.cm-m-l-20{margin-left:40px}
+.cm-p-l-20{padding-left:40px}
+.cm-m-r-20{margin-right:40px}
+.cm-p-r-20{padding-right:40px}
+.p-icon{display:inline-block;width:80px;height:24px;vertical-align:middle}
+.p-icon::before{content:'';display:inline-block;width:80px;height:24px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
+.p-icon.i1::before{background-position-y:-714px}
+.p-icon.i2::before{background-position-y:-744px}
+.p-icon.i3::before{background-position-y:-774px}
+.p-icon.i4::before{background-position-y:-804px}
+.p-icon.i5::before{background-position-y:-834px}
+.cm-container{width:960px;padding-left:8px;padding-right:8px}
+.cm-container .cm-row{margin-left:-8px;margin-right:-8px}
+.cm-floor{padding:10px 0}
+.cm-p-a{padding:8px}
+.cm-m-a{padding:8px}
+.cm-floor-title .cm-title{font-size:24px;color:#4a4f58;line-height:30px;font-weight:700;padding-top:4px;padding-bottom:4px}
+.cm-floor-title .cm-subtitle{font-size:14px;color:#93979f;padding-top:4px;padding-bottom:4px}
+.cm-article-item{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.cm-article-item .cm-article-title{font-size:18px;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
+.cm-article-item .cm-article-desc{font-size:14px;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
+.cm-article-item .cm-article-desc.h56{height:56px}
+.cm-article-item .cm-article-cover.cover-168-168{width:168px;height:168px}
+.cm-article-item:hover .cm-article-title{color:#ff5c00}
+.cm-article-item:hover .cm-article-title.has-border{border-color:#ff5c00}
+.cm-article-item.h200{height:200px}
+.cm-article-item .cm-line{height:1px;background-color:#f0f0f0}
+.cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
+.cm-product-item .cm-product-title{font-size:14px;color:#4a4f58;line-height:20px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
+.cm-product-item .h20{height:20px}
+.cm-product-item .h24{height:24px}
+.cm-product-item .h44{height:44px}
+.swiper-container{padding-bottom:30px}
+.swiper-container.no-bottom{padding-bottom:0 !important}
+.cm-cover-tag{width:72px;height:32px;font-size:16px;line-height:32px;border-radius:4px}
+.cm-tabs .cm-tab{font-size:16px;width:60px;height:30px;line-height:30px;text-align:center}
+.hover-class{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.hover-class:hover{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);box-shadow:0 0 15px rgba(0,0,0,0.2)}
+.has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
+.has-player::before{content:'';cursor: pointer;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px;height:40px;background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 40px 40px; }
+.cm-btn-box{text-align:center}
+.cm-btn-box .cm-toggle-btn{width:98px;height:32px;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:32px;font-size:14px;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:20px;height:16px;margin-right:2px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
+.cm-btn-box .cm-toggle-btn.down::after{background-position-x:-90px}
+.cm-btn-box .cm-toggle-btn.up::after{background-position-x:-119px}
+.cm-btn-box .cm-toggle-btn:hover{color:#ff5c00;border-color:#ff5c00}
+.cm-btn-box .cm-toggle-btn:hover.down::after{background-position-x:-150px}
+.cm-btn-box .cm-toggle-btn:hover.up::after{background-position-x:-180px}
+.cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
+.cm-float-container .cm-regexp{display: flex;justify-content: center;align-items: center;text-align: center; background: #fff;font-size: 14px;color: #666;line-height: 1.4}
+.cm-float-container .cm-regexp:hover{ color: #fff; background:#ff5c00 }
+.cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:64px;height:64px;margin:6px 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
+.cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
+.cm-float-container .cm-slide:hover .cm-tooltop{display:block}
+.cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
+.cm-float-container .cm-slide:nth-child(1){height:70px;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:64px}
+.cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
+.cm-float-container .cm-tooltop{position:absolute;padding:15px;background:#ff5c00;top:0;right:80px;border-radius:6px;display: none}
+.cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
+.cm-float-container .cm-tooltop .cm-tooltop-content{font-size:14px;color:#fff}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:190px}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:8px 0}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{width:262px}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:72px;margin:15px 15px 0;width:1px;background:#f1f1f1}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:block}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:8px}
+.cm-footer{padding:25px 0 12px;background-color:#4a4f58;text-align:center;color:#fff;font-size:12px;overflow:hidden}
+.cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
+.cm-entry .cm-icon-content{width: 400px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+.cm-entry .cm-icon-content img{display: block; width: 100%;}
+.cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:32px;height:32px;right:20px;top:-40px;background:url(/img/activity/pc_close.png) no-repeat center center}
+.cm-entry .cm-icon-content .btn{display: block;width: 60px;height: 60px;background: #666;position: absolute;right: 40px;z-index: 999;cursor: pointer;opacity: 0;}
+.cm-entry .cm-icon-content .btn1{top: 122px;}
+.cm-entry .cm-icon-content .btn2{top: 250px;}
+.banner-container{display: flex;justify-content: center; height:480px;background:pink;width: 100%;overflow: hidden;}
+.banner-container .banner{ height: 480px;}
+.banner-container .banner img{display: block;min-width: 1920px}
+.cm-to-top{width:64px;height:64px;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+.cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+.cm-to-top .cm-icon-bar:nth-child(1){width:28px;height:4px;background:#999999;margin-top:20px}
+.cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:10px solid #999999}
+.cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
+.cm-to-top:hover{background:#ff5c00}
+.cm-to-top:hover .cm-icon-bar:nth-child(1),.cm-to-top:hover .cm-icon-bar:nth-child(3){background:#fff !important}
+.cm-to-top:hover .cm-icon-bar:nth-child(2){border-bottom-color:#fff}
+}
+@media (min-width:1200px){
+.cm-container{width:1140px}
+}
+.cm-tags{white-space:nowrap}
+.cm-tags .cm-tag{display:inline-block;padding:1px 4px;font-size:12px;border:1px solid #999;border-radius:2px}
+.cm-tags .cm-tag.color1{border-color:#aaa;background-color:#fff;color:#888}
+.cm-tags .cm-tag.color2{border-color:#f94b4b;background-color:#fff1eb;color:#f94b4b}
+.cm-tags .cm-tag.color3{border-color:rgba(225,86,22,0.24);background-color:#fff;color:#FF5B00}
+.cm-meibohui-tag{font-size:12px;display:inline-block;padding:2px 4px;text-align:center;color:#ffffff !important;background-image:-webkit-gradient(linear,right top,left top,from(#f9c023),to(#f83600));background-image:-o-linear-gradient(right,#f9c023 0%,#f83600 100%);background-image:linear-gradient(270deg,#f9c023 0%,#f83600 100%);border-radius:0px 10px 0px 0px}
+.cm-swiper .cm-swiper-button-prev,.cm-swiper .cm-swiper-button-next{visibility:hidden;width:44px;height:100px;background:rgba(102,102,102,0.74) no-repeat center;z-index:20;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;border-radius:6px;opacity:0;-webkit-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;background-size:30px !important}
+.cm-swiper .cm-swiper-button-prev{background-image:url(/img/activity/prev-icon.png);left:-60px}
+.cm-swiper .cm-swiper-button-next{background-image:url(/img/activity/next-icon.png);right:-60px}
+.cm-swiper:hover .cm-swiper-button-prev,.cm-swiper:hover .cm-swiper-button-next{opacity:1;visibility:visible}
+.swiper-container .swiper-pagination-bullet-active{width:28px !important;background:#ff5c00 !important;}
+.swiper-container .swiper-pagination-bullet{width:14px;height:4px;display:inline-block;border-radius:2px}
+.cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
+.cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
+.cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
+.cm-cover-tag{display:block;background:#000;text-align:center;color:#fff}
+.cm-cover-tag.color1{background:rgba(0,0,0,0.5)}
+.cm-cover-tag.color2{background:#1ece70}
+.cm-cover-tag.color3{background:#ff5c00}
+.cm-tabs{text-align:right}
+.cm-tabs .cm-tab-content{display:inline-block;overflow:hidden;border-radius:4px}
+.cm-tabs .cm-tab{position:relative;display:inline-block;color:#4a4f58;cursor:pointer;background:#fff}
+.cm-tabs .cm-tab.on{color:#fff;background-color:#ff5c00}
+.cm-loading{z-index:99999;width:100vw;height:100vh;position:fixed;top:0;background:#fff}
+.cm-prodcut-price .red { color: #f94b4b;}
+
+@media screen and (min-width: 768px) {
+.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: rgba(0,0,0,0.8);z-index: 99999}
+/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+.video-popup .content{width: 944px;height: 642px; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
+.video-popup .content video{width: 100%;height: 100%;display: block;}
+.video-popup .close {position: absolute;right: 30px;top: 30px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
+}
+
+@media screen and (max-width: 768px) {
+.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+.video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
+.video-popup .content video{width: 100%;height: 100%;display: block;}
+.video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
+}

src/main/resources/static/css/article/article.css

@@ -40,7 +40,7 @@ dl,dd,dt{zoom:1}
 
 
 @media screen and (min-width:768px){.header .h5-head{display:none}
-	#drawer-footer {display: none;}
+	.drawer-footer {display: none}
 	.advertisement {display: none;}
 	.icon:before{content:'';display:inline-block;background:url(/img/base/icon.png) no-repeat;font-size:0}
 	.header .van-overlay {display: none;}
@@ -179,6 +179,11 @@ dl,dd,dt{zoom:1}
 	/*信息平台banner*/
 	.info-banner {width: fit-content;box-sizing: border-box;display: flex;justify-content: space-between;}
 	.info-banner .banner {width: 524px;margin-right: 8px;height: 382px;margin-bottom: 16px;}
+	.info-banner .banner .el-carousel,
+	.info-banner .sider-banner .el-carousel,
+	.banner .el-carousel .el-carousel__container,
+	.sider-banner .el-carousel .el-carousel__container {width:100%;height: 100%;}
+	.info-banner .sider-banner {width: 360px;display: flex;flex-direction: column;}
 	.info-banner .sider-banner {width: 360px;display: flex;flex-direction: column;}
 	.info-banner .sider-banner div {height: 187px;}
 	.info-banner .sider-banner div:nth-child(2) {margin-top: 8px;}
@@ -187,7 +192,7 @@ dl,dd,dt{zoom:1}
 	.info-Notice .notice-title div:nth-child(1) {font-size: 16px;font-weight: bold;color: #333333;}
 	.info-Notice .notice-content {height: calc(100% - 48px);padding: 0 20px;box-sizing: border-box;overflow: hidden;}
 	.info-Notice .notice-content .notice-content-list {border-top: 1px solid #F0F0F0;}
-	.info-Notice .notice-content .notice-content-li {padding: 14px 0 14px 18px;border-top: 1px solid #F0F0F0;list-style: disc;cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color: #333333;position: relative;}
+	.info-Notice .notice-content .notice-content-li {padding: 8px 0 8px 18px;border-top: 1px solid #F0F0F0;list-style: disc;cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color: #333333;position: relative;}
 	.info-Notice .notice-content .notice-content-li:before {content: "";width: 6px;height: 6px;background: #ccc;position: absolute;left: 0;border-radius: 50%;top: calc(50% - 4px);}
 	.info-Notice .notice-content .notice-content-li:hover {color: #FF5B00;}
 	.info-Notice .notice-content .notice-content-li:hover:before {background: #FF5B00;}
@@ -246,7 +251,7 @@ dl,dd,dt{zoom:1}
 	.row .new-blurb.xiao{padding-left:110px;min-height:70px !important}
 	.row .new-blurb .shuoming{font-size:14px;line-height:25px;max-height:78px;overflow :hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
 	.tui .tui-img{display:block;position: relative; width:284px;height: 343px;margin-bottom:20px;overflow:hidden;background:#FFF url(/img/base/placeholder.png) no-repeat center center;background-size:80%}
-	.tui .tui-img img{width:100%;height: 100%;object-fit: contain;}
+	.tui-img img{width:100%;height: 100%;}
 	.tui .tui-img::after{content: "";opacity: 0;width: 100%;height: 100%; position: absolute; left: 0;top: 0;box-sizing: border-box;border: 1px solid #FF5B00; transition: all 0.2s;}
 	.tui .tui-img:hover::after{opacity: 1;}
 	/*.tui .tui-img img:hover{opacity:0.8;border:solid 1px #FF5B00} */
@@ -321,7 +326,7 @@ dl,dd,dt{zoom:1}
 	.content .new-list.article{padding:24px;margin-bottom:20px;background: #fff;}
 	.article .title{line-height:40px;font-size:28px;color:#333}
 	.article .xinxi{margin-top:5px;padding-bottom:14px;border-bottom:solid 1px #ededed}
-	.article .new-mian{margin:23px 0;width:760px}
+	.article .new-mian{margin:23px 0;}
 	.article .new-mian img{width:auto !important;display:inline-block;display:block;margin:0 auto;height:auto !important}
 	.article p{font-size:16px;line-height:30px;color:#777;margin-bottom:15px}
 	.dianzan{width:auto;text-align:center}
@@ -413,10 +418,11 @@ dl,dd,dt{zoom:1}
 
 	.info-Notice {display: none;}
 	.info-banner {margin: 3.2vw auto;width: 94.4vw;display: flex;justify-content: space-between;align-items: center;}
+	.info-banner .van-swipe {width: 100%;height: 100%;}
 	.info-banner .banner {width: 55vw;height: 40vw;box-sizing: border-box;}
 	.info-banner .sider-banner {width: 37.8vw;box-sizing: border-box;display: flex;flex-direction: column;}
-	.info-banner .sider-banner div {width: 100%;height: 19vw;}
-	.info-banner .sider-banner div:nth-child(2) {margin-top: 1.6vw;}
+	.info-banner .sider-banner .sider-banner-1, .info-banner .sider-banner .sider-banner-2{width: 100%;height: 19vw;}
+	.info-banner .sider-banner .sider-banner-2 {margin-top: 1.6vw;}
 	.info-h5-notice {height: 10vw;box-sizing: border-box;margin: 1.6vw auto 3.2vw auto;width: 93.6vw;background: #fff;display: flex;justify-content: space-between;padding: 2.7vw 3.2vw;}
 	.info-h5-notice .h5-notice {font-weight: bold;font-size: 3.6vw;color: #333333;}
 	.info-h5-notice .h5-notice-title ul > li {list-style: disc;white-space: nowrap;text-overflow: ellipsis;width: 60vw;overflow: hidden;font-size: 3.2vw;}

src/main/resources/static/css/article/drawer-footer.css

@@ -1,4 +1,4 @@
-#drawer-footer {
+.drawer-footer {
     width: 94.4vw;
     margin: 4vw auto;
     height: 76.9vw;
@@ -34,16 +34,6 @@
     text-align: center;
     position: relative;
 }
-/*.hot-recommend .hot-recommend-title div:nth-child(2):after {*/
-/*    content: '\276F';*/
-/*    font-weight: normal;*/
-/*    position: absolute;*/
-/*    right: 0;*/
-/*    top: 50%;*/
-/*    left: 50%;*/
-/*    transform: translate(-50%, -50%);*/
-/*    font-size: 3.6vw;*/
-/*}*/
 
 .hot-recommend .hot-recommend-content {
     height: calc(100% - 8vw);
@@ -93,12 +83,15 @@
     white-space: nowrap;
     /*animation: AdvsFrames .5s linear forwards;*/
 }
+.advertisement .van-swipe {
+    width: 100%;
+    height: 100%;
+}
 .advertisement .advertisement-link {
     display: inline-block;
     vertical-align: top;
     width: 45.6vw;
     height: 100%;
-    margin-right: 2.4vw;
     background: #fff;
 }
 .advertisement .advertisement-link img {
@@ -106,14 +99,6 @@
     height: 100%;
     /*object-fit: contain;*/
 }
-/*@keyframes AdvsFrames {*/
-/*    0% {*/
-/*        bottom: -36vw;*/
-/*    }*/
-/*    100% {*/
-/*        bottom: 0;*/
-/*    }*/
-/*}*/
 .bg-filter {
     width: 100%;
     backdrop-filter: blur(33px);

src/main/resources/static/css/document/beauty-archive.css

@@ -1,162 +1,170 @@
-/*css样式初始化*/
-html{line-height:1.15;-webkit-text-size-adjust:100%}
-body{margin:0;font-family: Microsoft YaHei;}
-main{display:block}
-h1{font-size:2em;margin:0.67em 0}
-hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}
-pre{font-family:monospace,monospace;font-size:1em}
-a{background-color:transparent;text-decoration: none}
-abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
-b,strong{font-weight:bolder}
-code,kbd,samp{font-family:monospace,monospace;font-size:1em}
-small{font-size:80%}
-sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
-sub{bottom:-0.25em}
-sup{top:-0.5em}
-img{border-style:none}
-button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
-button,input{overflow:visible}
-button,select{text-transform:none}
-button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
-button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
-button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
-fieldset{padding:0.35em 0.75em 0.625em}
-legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
-progress{vertical-align:baseline}
-textarea{overflow:auto}
-[type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}
-[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
-[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
-[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
-::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
-details{display:block}
-summary{display:list-item}
-template{display:none}
-[hidden]{display:none}
-input{outline: none}
-p{margin: 0}
-
-/*公共样式*/
-[v-cloak] { display: none;}
-.cm-fl{float: left}
-.cm-fr{float: right}
-.cm-clearfix::after{content: "";display: block;clear: both}
-.cm-fixed-bottom{position: fixed;width: 100%;bottom: 0;left: 0}
-.loading{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%; height: 100%;padding:80px 0;-webkit-box-sizing: border-box;box-sizing: border-box; background: #fff;position: absolute;z-index: 99999;top: 0}
-/*pc端样式*/
-@media screen and (min-width: 768px) {
-::-webkit-scrollbar{width:10px;height:10px;background-color:#F6F6F6;}
-::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);border-radius:2px;background-color:#F6F6F6}
-::-webkit-scrollbar-thumb{border-radius:2px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#93979F}
-body{background:#F5F5F5;color: #4A4F58;padding-top: 72px;box-sizing: border-box;}
-#beautyArchive{min-height: 67vh}
-.cm-container{width:1200px;margin:0 auto;position: relative}
-.cm-empty{width: 100%;height: 460px; text-align: center;}
-.cm-empty.cm-empty-pc img{width: 180px;height: 180px;margin-top: 120px;}
-.cm-empty.cm-empty-pc span{display: block;font-size: 16px;color: #9AA5B5;font-weight: 400;}
-/*顶部区域*/
-.cm-topbar{background:#FF5B00;height:72px;position: fixed;width: 100%;top: 0;z-index: 999;}
-.cm-topbar .cm-title{font-size:24px;line-height:72px;color:#FFFFFF}
-.cm-topbar .cm-search{position:relative;display:table-cell;vertical-align:top;width:280px;height:32px;margin-left:39px}
-.cm-topbar .cm-search .cm-keyword{width:280px;height:32px;line-height:32px;margin:22px 0 16px 0;padding:0 32px 0 10px;border:none;border-radius:16px;background:#eb7941;color:#fff;font-size:14px}
-.cm-topbar .cm-search .cm-keyword::-webkit-input-placeholder{color:#fff}
-.cm-topbar .cm-search .cm-keyword::-moz-placeholder{color:#fff}
-.cm-topbar .cm-search .cm-keyword:-ms-input-placeholder{color:#fff}
-.cm-topbar .cm-search .cm-keyword::-ms-input-placeholder{color:#fff}
-.cm-topbar .cm-search .cm-keyword::placeholder{color:#fff}
-.cm-topbar .cm-search .cm-search-btn{position:absolute;top:22px;right:-1px;display:block;width:32px;height:32px;background:url(/img/info/search.png) no-repeat left 8px}
-/*tab切换*/
-.cm-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height:58px;margin-top:16px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:28px}
-.cm-tabs .cm-tab-item{padding-bottom: 6px; border-bottom:2px solid #fff;color:#4A4F58;font-size:18px;font-weight:400;cursor:pointer}
-.cm-tabs .cm-tab-item.on{border-color:#FF5B00;color:#FF5B00}
-.cm-tab-content{margin-top:16px;background:#fff;}
-.cm-tab-content .cm-list{padding:8px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}
-.cm-tab-content .cm-list .cm-section{width:1152px;padding:16px 0;border-top:1px solid #E2E7EF;cursor:pointer}
-.cm-tab-content .cm-list .cm-section.no-border{border:0}
-.cm-tab-content .cm-list .cm-section .cm-cover{width:120px;height:120px;border:1px solid #eee;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
-.cm-tab-content .cm-list .cm-section .cm-cover img{display:block;width:100%;height:inherit}
-.cm-tab-content .cm-list .cm-section .cm-content{width:1032px;padding-left:16px;-webkit-box-sizing:border-box;box-sizing:border-box}
-.cm-tab-content .cm-list .cm-section .cm-content .cm-title{width:100%;height:54px;margin-bottom:12px;font-size:18px;font-weight:400;line-height:1.5;color:#4A4F58;word-break:break-all;text-align: justify; display:-webkit-box;-webkit-box-orient:vertical;white-space:normal;-webkit-line-clamp:2;overflow:hidden;-webkit-transition:color .2s;-o-transition:color .2s;transition:color .2s}
-.cm-tab-content .cm-list .cm-section .cm-content .cm-title span{color: #FF5B00} /*搜索结果的标题用span标签包裹*/
-.cm-tab-content .cm-list .cm-section .cm-content .cm-param{margin-top: 8px;font-size:16px;color:#4A4F58}
-.cm-tab-content .cm-list .cm-section .cm-content .cm-param span:nth-child(1){color:#9AA5B5}
-.cm-tab-content .cm-list .cm-section:hover .cm-title{color:#FF5B00}
-/*搜索*/
-.cm-search-info{height:24px;padding:24px 0 0 24px;font-size:18px;color:#4A4F58}
-.cm-search-info span{color:#FF5B00}
-/*加载更多*/
-.cm-loading{display: none;}
-/*分页*/
-.pageWrap{text-align:center;padding:30px 0}
-.pageWrap a{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:40px;height:40px;line-height:40px;border:1px solid #EBECEF;font-size:16px;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}
-.pageWrap a.on{background:#FF5B00;color:#fff;border:1px solid #FF5B00}
-.pageWrap a:hover{color:#FF5B00}
-.pageWrap a.on:hover{color:#fff;opacity:.8}
-.pageWrap a.btn{width:auto;color:#FF5B00;background:none;border:none}
-.pageWrap .prev:before{content:'\276E'}
-.pageWrap .next:before{content:'\276F'}
-.pageWrap span{display:inline-block;height:40px;line-height:40px;margin:0 5px;color:#93979F}
-.pageWrap b{color:#2D3036;font-weight:normal}
-.pageWrap input{-webkit-box-sizing:border-box;box-sizing:border-box;width:80px;height:40px;line-height:40px;font-size:16px;border:1px solid #EBECEF;outline:none;border-radius:2px;text-align:center}
-.crumbs{width:1184px;margin:0 auto;-webkit-box-sizing:border-box;box-sizing:border-box;padding:12px 0;font-size:16px;color: #22272E;}
-/*底部*/
-.foot{width:100%;height:130px;background:#262626;margin-top:100px}
-.footer{width:1190px;margin:0 auto;text-align:center;height: 130px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 39px 0;}
-.footer p{line-height: 30px;color: #FFFFFF;margin: 0;font-size: 14px}
-.footer p span{margin:0 5px}
-.footer p span a{color: #FFFFFF;}
-.footer p span a:hover{color: #E15621;}
-.footer p span img.icp{width: 18px;height: 18px;display: inline-block;}
-}
-
-/*移动端*/
-@media screen and (max-width: 768px){
-body{color:#4A4F58;background:#fff;}
-#meiye{margin:0 3.2vw;}
-.cm-container{position: relative}
-.cm-empty{width: 100%;margin-top: 40vw; text-align: center;}
-.cm-empty.cm-empty-h5 img{width: 36vw;height: 36vw}
-.cm-empty.cm-empty-h5 span{display: block;font-size: 3.4vw;color: #9AA5B5;font-weight: 400;}
-/*顶部区域*/
-.cm-mobile-fixed{position: fixed;width: 100%;top: 0;background: #fff;z-index: 9999;}
-.cm-topbar{padding:4vw 0 3vw}
-.cm-topbar .cm-title{display:none}
-.cm-topbar .cm-search{position:relative;margin-right:3.2vw;border:1px solid #eee;border-radius:2px}
-.cm-topbar .cm-search .cm-keyword{width:93.6vw;height:9.6vw;padding:2.6vw 2.4vw;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;font-size:3.4vw;color:#4A4F58}
-.cm-topbar .cm-search .cm-keyword::-webkit-input-placeholder{color:#B2B2B2}
-.cm-topbar .cm-search .cm-keyword::-moz-placeholder{color:#B2B2B2}
-.cm-topbar .cm-search .cm-keyword:-ms-input-placeholder{color:#B2B2B2}
-.cm-topbar .cm-search .cm-keyword::-ms-input-placeholder{color:#B2B2B2}
-.cm-topbar .cm-search .cm-keyword::placeholder{color:#B2B2B2}
-.cm-topbar .cm-search .cm-search-btn{position:absolute;display:block;top:1.6vw;right:3.2vw;width:6.4vw;height:6.4vw;background:url(/img/info/H5-search.png) no-repeat center;background-size:6.4vw}
-/*tab切换*/
-.cm-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:10vw;padding-top:3.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid #eee}
-.cm-tabs .cm-tab-item{padding-bottom:1.2vw;border-bottom:2px solid transparent;color:#4A4F58;font-size:4.6vw;font-weight:400}
-.cm-tabs .cm-tab-item.on{border-color:#FF5B00;color:#FF5B00}
-.cm-tab-content .cm-list .cm-section{padding:3.2vw 0;border-top:1px solid #eee}
-.cm-tab-content .cm-list{margin-top:3.2vw;padding: 0 3.2vw;}
-.cm-tab-content .cm-list .cm-section .cm-cover{width:24vw;height:24vw;border: 1px solid #eee;-webkit-box-sizing: border-box;box-sizing: border-box;}
-.cm-tab-content .cm-list .cm-section .cm-cover img{display:block;width:100%;height:100%}
-.cm-tab-content .cm-list .cm-section .cm-content{width:69vw;padding-left:3.2vw;-webkit-box-sizing:border-box;box-sizing:border-box}
-.cm-tab-content .cm-list .cm-section.no-border{border:0}
-.cm-tab-content .cm-list .cm-section .cm-content .cm-title{display:-webkit-box;height:11vw;margin-bottom:2.8vw;font-size:3.6vw;color:#4A4F58;line-height:1.5;word-break:break-all;text-align:justify;-webkit-box-orient:vertical;white-space:normal;-webkit-line-clamp:2;overflow:hidden}
-.cm-tab-content .cm-list .cm-section .cm-content .cm-title span{color: #FF5B00} /*搜索结果的标题用span标签包裹*/
-.cm-tab-content .cm-list .cm-section .cm-content .cm-param{font-size:3vw;font-weight:400;color:#4A4F58;margin-top:1.6vw}
-.cm-tab-content .cm-list .cm-section .cm-content .cm-param span:nth-child(1){color:#9AA5B5}
-/*加载更多*/
-.cm-loading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:4.5vw;padding:4vw 0;font-size:3.4vw;color:#CCCCCC}
-.cm-loading span.cm-text{display:block;margin:0 2.4vw}
-.cm-loading span.cm-action{display:block;width:4vw;height:4vw;margin:0 2.4vw;border:1px solid #333;border-bottom:0;border-radius:50%;-webkit-animation:rotate .5s ease-in infinite;animation:rotate .5s ease-in infinite}
-.cm-loading::before,.cm-loading::after{content:"";display:block;width:4.8vw;height:1px;background:#CCCCCC}
-@-webkit-keyframes rotate{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}
-100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
-}@keyframes rotate{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}
-100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
-}
-/*分页*/
-.pageWrap{display: none}
-/*底部*/
-.foot{display: none}
-}
-
-.cm-tab-content .cm-list .cm-section:active{ background: #f8f8f8; }
+/*css样式初始化*/
+html{line-height:1.15;-webkit-text-size-adjust:100%}
+body{margin:0;font-family: Microsoft YaHei;}
+main{display:block}
+h1{font-size:2em;margin:0.67em 0}
+hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}
+pre{font-family:monospace,monospace;font-size:1em}
+a{background-color:transparent;text-decoration: none}
+abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
+b,strong{font-weight:bolder}
+code,kbd,samp{font-family:monospace,monospace;font-size:1em}
+small{font-size:80%}
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sub{bottom:-0.25em}
+sup{top:-0.5em}
+img{border-style:none}
+button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
+button,input{overflow:visible}
+button,select{text-transform:none}
+button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
+button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
+button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
+fieldset{padding:0.35em 0.75em 0.625em}
+legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
+progress{vertical-align:baseline}
+textarea{overflow:auto}
+[type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}
+[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
+[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
+[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
+::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
+details{display:block}
+summary{display:list-item}
+template{display:none}
+[hidden]{display:none}
+input{outline: none}
+p{margin: 0}
+
+/*公共样式*/
+[v-cloak] { display: none;}
+.cm-fl{float: left}
+.cm-fr{float: right}
+.cm-clearfix::after{content: "";display: block;clear: both}
+.cm-fixed-bottom{position: fixed;width: 100%;bottom: 0;left: 0}
+.loading{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%; height: 100%;padding:80px 0;-webkit-box-sizing: border-box;box-sizing: border-box; background: #fff;position: absolute;z-index: 99999;top: 0}
+/*pc端样式*/
+@media screen and (min-width: 768px) {
+/*返回首页*/
+.head-back {width: 100%;height: 40px;background: #F7F7F7;cursor: pointer;}
+.head-back .head {width: 1185px; height: 100%; margin: 0 auto;display: flex;align-items: center;}
+.head-back .head .head-logo {width: 20px;height: 18px;box-sizing: border-box;margin-right: 5px;background: url(/img/article/PC.png) -180px -747px;}
+.head-back .head .text {font-size: 14px; color: #909090;}
+::-webkit-scrollbar{width:10px;height:10px;background-color:#F6F6F6;}
+::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);border-radius:2px;background-color:#F6F6F6}
+::-webkit-scrollbar-thumb{border-radius:2px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#93979F}
+body{background:#F5F5F5;color: #4A4F58;padding-top: 72px;box-sizing: border-box;}
+#beautyArchive{min-height: 67vh; margin-top: 40px;}
+.cm-container{width:1200px;margin:0 auto;position: relative}
+.cm-empty{width: 100%;height: 460px; text-align: center;}
+.cm-empty.cm-empty-pc img{width: 180px;height: 180px;margin-top: 120px;}
+.cm-empty.cm-empty-pc span{display: block;font-size: 16px;color: #9AA5B5;font-weight: 400;}
+/*顶部区域*/
+.cm-topbar{background:#FF5B00;position: fixed;width: 100%;top: 0;z-index: 999;}
+.cm-topbar .cm-title{font-size:24px;line-height:72px;color:#FFFFFF}
+.cm-topbar .cm-search{position:relative;display:table-cell;vertical-align:top;width:280px;height:32px;margin-left:39px}
+.cm-topbar .cm-search .cm-keyword{width:280px;height:32px;line-height:32px;margin:22px 0 16px 0;padding:0 32px 0 10px;border:none;border-radius:16px;background:#eb7941;color:#fff;font-size:14px}
+.cm-topbar .cm-search .cm-keyword::-webkit-input-placeholder{color:#fff}
+.cm-topbar .cm-search .cm-keyword::-moz-placeholder{color:#fff}
+.cm-topbar .cm-search .cm-keyword:-ms-input-placeholder{color:#fff}
+.cm-topbar .cm-search .cm-keyword::-ms-input-placeholder{color:#fff}
+.cm-topbar .cm-search .cm-keyword::placeholder{color:#fff}
+.cm-topbar .cm-search .cm-search-btn{position:absolute;top:22px;right:-1px;display:block;width:32px;height:32px;background:url(/img/info/search.png) no-repeat left 8px}
+/*tab切换*/
+.cm-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height:58px;margin-top:16px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:28px}
+.cm-tabs .cm-tab-item{padding-bottom: 6px; border-bottom:2px solid #fff;color:#4A4F58;font-size:18px;font-weight:400;cursor:pointer}
+.cm-tabs .cm-tab-item.on{border-color:#FF5B00;color:#FF5B00}
+.cm-tab-content{margin-top:16px;background:#fff;}
+.cm-tab-content .cm-list{padding:8px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-tab-content .cm-list .cm-section{width:1152px;padding:16px 0;border-top:1px solid #E2E7EF;cursor:pointer}
+.cm-tab-content .cm-list .cm-section.no-border{border:0}
+.cm-tab-content .cm-list .cm-section .cm-cover{width:120px;height:120px;border:1px solid #eee;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.cm-tab-content .cm-list .cm-section .cm-cover img{display:block;width:100%;height:inherit}
+.cm-tab-content .cm-list .cm-section .cm-content{width:1032px;padding-left:16px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-tab-content .cm-list .cm-section .cm-content .cm-title{width:100%;height:54px;margin-bottom:12px;font-size:18px;font-weight:400;line-height:1.5;color:#4A4F58;word-break:break-all;text-align: justify; display:-webkit-box;-webkit-box-orient:vertical;white-space:normal;-webkit-line-clamp:2;overflow:hidden;-webkit-transition:color .2s;-o-transition:color .2s;transition:color .2s}
+.cm-tab-content .cm-list .cm-section .cm-content .cm-title span{color: #FF5B00} /*搜索结果的标题用span标签包裹*/
+.cm-tab-content .cm-list .cm-section .cm-content .cm-param{margin-top: 8px;font-size:16px;color:#4A4F58}
+.cm-tab-content .cm-list .cm-section .cm-content .cm-param span:nth-child(1){color:#9AA5B5}
+.cm-tab-content .cm-list .cm-section:hover .cm-title{color:#FF5B00}
+/*搜索*/
+.cm-search-info{height:24px;padding:24px 0 0 24px;font-size:18px;color:#4A4F58}
+.cm-search-info span{color:#FF5B00}
+/*加载更多*/
+.cm-loading{display: none;}
+/*分页*/
+.pageWrap{text-align:center;padding:30px 0}
+.pageWrap a{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:40px;height:40px;line-height:40px;border:1px solid #EBECEF;font-size:16px;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}
+.pageWrap a.on{background:#FF5B00;color:#fff;border:1px solid #FF5B00}
+.pageWrap a:hover{color:#FF5B00}
+.pageWrap a.on:hover{color:#fff;opacity:.8}
+.pageWrap a.btn{width:auto;color:#FF5B00;background:none;border:none}
+.pageWrap .prev:before{content:'\276E'}
+.pageWrap .next:before{content:'\276F'}
+.pageWrap span{display:inline-block;height:40px;line-height:40px;margin:0 5px;color:#93979F}
+.pageWrap b{color:#2D3036;font-weight:normal}
+.pageWrap input{-webkit-box-sizing:border-box;box-sizing:border-box;width:80px;height:40px;line-height:40px;font-size:16px;border:1px solid #EBECEF;outline:none;border-radius:2px;text-align:center}
+.crumbs{width:1184px;margin:0 auto;-webkit-box-sizing:border-box;box-sizing:border-box;padding:12px 0;font-size:16px;color: #22272E;}
+/*底部*/
+.foot{width:100%;height:130px;background:#262626;margin-top:100px}
+.footer{width:1190px;margin:0 auto;text-align:center;height: 130px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 39px 0;}
+.footer p{line-height: 30px;color: #FFFFFF;margin: 0;font-size: 14px}
+.footer p span{margin:0 5px}
+.footer p span a{color: #FFFFFF;}
+.footer p span a:hover{color: #E15621;}
+.footer p span img.icp{width: 18px;height: 18px;display: inline-block;}
+}
+
+/*移动端*/
+@media screen and (max-width: 768px){
+.head-back {font-size: 3.2vw;width: 100%;box-sizing: border-box;padding: 4vw 0 3.2vw 3.2vw;background: #F7F7F7;margin-bottom: 3.2vw;}
+.head-back .head {display: flex;align-items: center;vertical-align: bottom;}
+.head-back .head .head-logo {width: 20px;height: 18px;box-sizing: border-box;margin-right: 2vw;background: url(/img/article/PC.png) -180px -747px;}
+.head-back .text a {color: #666;}
+body{color:#4A4F58;background:#fff;}
+#meiye{margin:0 3.2vw;}
+.cm-container{position: relative}
+.cm-empty{width: 100%;margin-top: 40vw; text-align: center;}
+.cm-empty.cm-empty-h5 img{width: 36vw;height: 36vw}
+.cm-empty.cm-empty-h5 span{display: block;font-size: 3.4vw;color: #9AA5B5;font-weight: 400;}
+/*顶部区域*/
+.cm-mobile-fixed{position: fixed;width: 100%;top: 0;background: #fff;z-index: 9999;}
+.cm-topbar .cm-title{display:none}
+.cm-topbar .cm-search{position:relative;margin-right:3.2vw;border:1px solid #eee;border-radius:2px}
+.cm-topbar .cm-search .cm-keyword{width:93.6vw;height:9.6vw;padding:2.6vw 2.4vw;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;font-size:3.4vw;color:#4A4F58}
+.cm-topbar .cm-search .cm-keyword::-webkit-input-placeholder{color:#B2B2B2}
+.cm-topbar .cm-search .cm-keyword::-moz-placeholder{color:#B2B2B2}
+.cm-topbar .cm-search .cm-keyword:-ms-input-placeholder{color:#B2B2B2}
+.cm-topbar .cm-search .cm-keyword::-ms-input-placeholder{color:#B2B2B2}
+.cm-topbar .cm-search .cm-keyword::placeholder{color:#B2B2B2}
+.cm-topbar .cm-search .cm-search-btn{position:absolute;display:block;top:1.6vw;right:3.2vw;width:6.4vw;height:6.4vw;background:url(/img/info/H5-search.png) no-repeat center;background-size:6.4vw}
+/*tab切换*/
+.cm-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:10vw;padding-top:3.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid #eee}
+.cm-tabs .cm-tab-item{padding-bottom:1.2vw;border-bottom:2px solid transparent;color:#4A4F58;font-size:4.6vw;font-weight:400}
+.cm-tabs .cm-tab-item.on{border-color:#FF5B00;color:#FF5B00}
+.cm-tab-content .cm-list .cm-section{padding:3.2vw 0;border-top:1px solid #eee}
+.cm-tab-content .cm-list{margin-top:9.2vw;padding: 0 3.2vw;}
+.cm-tab-content .cm-list .cm-section .cm-cover{width:24vw;height:24vw;border: 1px solid #eee;-webkit-box-sizing: border-box;box-sizing: border-box;}
+.cm-tab-content .cm-list .cm-section .cm-cover img{display:block;width:100%;height:100%}
+.cm-tab-content .cm-list .cm-section .cm-content{width:69vw;padding-left:3.2vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-tab-content .cm-list .cm-section.no-border{border:0}
+.cm-tab-content .cm-list .cm-section .cm-content .cm-title{display:-webkit-box;height:11vw;margin-bottom:2.8vw;font-size:3.6vw;color:#4A4F58;line-height:1.5;word-break:break-all;text-align:justify;-webkit-box-orient:vertical;white-space:normal;-webkit-line-clamp:2;overflow:hidden}
+.cm-tab-content .cm-list .cm-section .cm-content .cm-title span{color: #FF5B00} /*搜索结果的标题用span标签包裹*/
+.cm-tab-content .cm-list .cm-section .cm-content .cm-param{font-size:3vw;font-weight:400;color:#4A4F58;margin-top:1.6vw}
+.cm-tab-content .cm-list .cm-section .cm-content .cm-param span:nth-child(1){color:#9AA5B5}
+/*加载更多*/
+.cm-loading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:4.5vw;padding:4vw 0;font-size:3.4vw;color:#CCCCCC}
+.cm-loading span.cm-text{display:block;margin:0 2.4vw}
+.cm-loading span.cm-action{display:block;width:4vw;height:4vw;margin:0 2.4vw;border:1px solid #333;border-bottom:0;border-radius:50%;-webkit-animation:rotate .5s ease-in infinite;animation:rotate .5s ease-in infinite}
+.cm-loading::before,.cm-loading::after{content:"";display:block;width:4.8vw;height:1px;background:#CCCCCC}
+@-webkit-keyframes rotate{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}
+100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
+}@keyframes rotate{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}
+100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
+}
+/*分页*/
+.pageWrap{display: none}
+/*底部*/
+.foot{display: none}
+}
+
+.cm-tab-content .cm-list .cm-section:active{ background: #f8f8f8; }

src/main/resources/static/css/quickOperation/index.css

@@ -1,783 +1,783 @@
-body{background:#f5f5f5}
-#globalFot #scrollTop {
-    display: none !important;
-}
-#supplierLogin {
-    display: none !important;
-}
-a{color:#333;text-decoration:none}
-[v-cloak] {
-    opacity: 0;
-}
-.swiper-wrapper{height: auto;}
-.cm-left{float:left}
-.cm-right{float:right}
-.cm-clearfix::after,.cm-container::after,.cm-row::after{content:'';display:block;clear:both}
-.cm-hidden,.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{overflow:hidden}
-.cm-none{display:none}
-.cm-not-visible{visibility:hidden}
-.cm-flex,.cm-flex-j-between{display:-webkit-box;display:-ms-flexbox;display:flex}
-.bg-white{background-color:#fff}
-.cm-flex-j-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
-.cm-flex-1{-webkit-box-flex:1;-ms-flex:1;flex:1}
-.text-justify{text-align:justify}
-.cm-radius-4{border-radius:4px;overflow:hidden}
-.cm-absolute{position:absolute}
-.cm-relative{position:relative}
-.cm-top,.cm-top-left,.cm-top-right{top:0}
-.cm-bottom,.cm-bottom-right,.cm-bottom-left{bottom:0}
-.cm-left,.cm-top-left,.cm-bottom-left{left:0}
-.cm-right,.cm-top-right,.cm-bottom-right{right:0}
-.bg-white{background-color:#fff}
-.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}
-.cm-text-ellipsis-1{-webkit-line-clamp:1}
-.cm-text-ellipsis-2{-webkit-line-clamp:2}
-.cm-text-ellipsis-3{-webkit-line-clamp:3}
-.cm-text-ellipsis-4{-webkit-line-clamp:4}
-.cm-img-responsive{max-width:100%;height:auto;display:block}
-.cm-container{width:100%;margin:0 auto}
-[class*='cm-col-']{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}
-.cm-floor .swiper-slide{ height: auto;}
-.cm-product-item .cm-prodcut-price .price.none{color: #999;text-decoration: line-through;}
-.cm-product-item .cm-prodcut-price .price.none .red{color: #999;}
-@media (max-width:560px){
-    .cm-col-xs-1{width:1.66667%}
-    .cm-col-xs-2{width:3.33333%}
-    .cm-col-xs-3{width:5%}
-    .cm-col-xs-4{width:6.66667%}
-    .cm-col-xs-5{width:8.33333%}
-    .cm-col-xs-6{width:10%}
-    .cm-col-xs-7{width:11.66667%}
-    .cm-col-xs-8{width:13.33333%}
-    .cm-col-xs-9{width:15%}
-    .cm-col-xs-10{width:16.66667%}
-    .cm-col-xs-11{width:18.33333%}
-    .cm-col-xs-12{width:20%}
-    .cm-col-xs-13{width:21.66667%}
-    .cm-col-xs-14{width:23.33333%}
-    .cm-col-xs-15{width:25%}
-    .cm-col-xs-16{width:26.66667%}
-    .cm-col-xs-17{width:28.33333%}
-    .cm-col-xs-18{width:30%}
-    .cm-col-xs-19{width:31.66667%}
-    .cm-col-xs-20{width:33.33333%}
-    .cm-col-xs-21{width:35%}
-    .cm-col-xs-22{width:36.66667%}
-    .cm-col-xs-23{width:38.33333%}
-    .cm-col-xs-24{width:40%}
-    .cm-col-xs-25{width:41.66667%}
-    .cm-col-xs-26{width:43.33333%}
-    .cm-col-xs-27{width:45%}
-    .cm-col-xs-28{width:46.66667%}
-    .cm-col-xs-29{width:48.33333%}
-    .cm-col-xs-30{width:50%}
-    .cm-col-xs-31{width:51.66667%}
-    .cm-col-xs-32{width:53.33333%}
-    .cm-col-xs-33{width:55%}
-    .cm-col-xs-34{width:56.66667%}
-    .cm-col-xs-35{width:58.33333%}
-    .cm-col-xs-36{width:60%}
-    .cm-col-xs-37{width:61.66667%}
-    .cm-col-xs-38{width:63.33333%}
-    .cm-col-xs-39{width:65%}
-    .cm-col-xs-40{width:66.66667%}
-    .cm-col-xs-41{width:68.33333%}
-    .cm-col-xs-42{width:70%}
-    .cm-col-xs-43{width:71.66667%}
-    .cm-col-xs-44{width:73.33333%}
-    .cm-col-xs-45{width:75%}
-    .cm-col-xs-46{width:76.66667%}
-    .cm-col-xs-47{width:78.33333%}
-    .cm-col-xs-48{width:80%}
-    .cm-col-xs-49{width:81.66667%}
-    .cm-col-xs-50{width:83.33333%}
-    .cm-col-xs-51{width:85%}
-    .cm-col-xs-52{width:86.66667%}
-    .cm-col-xs-53{width:88.33333%}
-    .cm-col-xs-54{width:90%}
-    .cm-col-xs-55{width:91.66667%}
-    .cm-col-xs-56{width:93.33333%}
-    .cm-col-xs-57{width:95%}
-    .cm-col-xs-58{width:96.66667%}
-    .cm-col-xs-59{width:98.33333%}
-    .cm-col-xs-60{width:100%}
-    .cm-m-a-1{margin:0.25vw}
-    .cm-p-a-1{padding:0.25vw}
-    .cm-m-t-1{margin-top:0.25vw}
-    .cm-p-t-1{padding-top:0.25vw}
-    .cm-m-b-1{margin-bottom:0.25vw}
-    .cm-p-b-1{padding-bottom:0.25vw}
-    .cm-m-l-1{margin-left:0.25vw}
-    .cm-p-l-1{padding-left:0.25vw}
-    .cm-m-r-1{margin-right:0.25vw}
-    .cm-p-r-1{padding-right:0.25vw}
-    .cm-m-a-2{margin:0.5vw}
-    .cm-p-a-2{padding:0.5vw}
-    .cm-m-t-2{margin-top:0.5vw}
-    .cm-p-t-2{padding-top:0.5vw}
-    .cm-m-b-2{margin-bottom:0.5vw}
-    .cm-p-b-2{padding-bottom:0.5vw}
-    .cm-m-l-2{margin-left:0.5vw}
-    .cm-p-l-2{padding-left:0.5vw}
-    .cm-m-r-2{margin-right:0.5vw}
-    .cm-p-r-2{padding-right:0.5vw}
-    .cm-m-a-3{margin:0.75vw}
-    .cm-p-a-3{padding:0.75vw}
-    .cm-m-t-3{margin-top:0.75vw}
-    .cm-p-t-3{padding-top:0.75vw}
-    .cm-m-b-3{margin-bottom:0.75vw}
-    .cm-p-b-3{padding-bottom:0.75vw}
-    .cm-m-l-3{margin-left:0.75vw}
-    .cm-p-l-3{padding-left:0.75vw}
-    .cm-m-r-3{margin-right:0.75vw}
-    .cm-p-r-3{padding-right:0.75vw}
-    .cm-m-a-4{margin:1vw}
-    .cm-p-a-4{padding:1vw}
-    .cm-m-t-4{margin-top:1vw}
-    .cm-p-t-4{padding-top:1vw}
-    .cm-m-b-4{margin-bottom:1vw}
-    .cm-p-b-4{padding-bottom:1vw}
-    .cm-m-l-4{margin-left:1vw}
-    .cm-p-l-4{padding-left:1vw}
-    .cm-m-r-4{margin-right:1vw}
-    .cm-p-r-4{padding-right:1vw}
-    .cm-m-a-5{margin:1.25vw}
-    .cm-p-a-5{padding:1.25vw}
-    .cm-m-t-5{margin-top:1.25vw}
-    .cm-p-t-5{padding-top:1.25vw}
-    .cm-m-b-5{margin-bottom:1.25vw}
-    .cm-p-b-5{padding-bottom:1.25vw}
-    .cm-m-l-5{margin-left:1.25vw}
-    .cm-p-l-5{padding-left:1.25vw}
-    .cm-m-r-5{margin-right:1.25vw}
-    .cm-p-r-5{padding-right:1.25vw}
-    .cm-m-a-6{margin:1.5vw}
-    .cm-p-a-6{padding:1.5vw}
-    .cm-m-t-6{margin-top:1.5vw}
-    .cm-p-t-6{padding-top:1.5vw}
-    .cm-m-b-6{margin-bottom:1.5vw}
-    .cm-p-b-6{padding-bottom:1.5vw}
-    .cm-m-l-6{margin-left:1.5vw}
-    .cm-p-l-6{padding-left:1.5vw}
-    .cm-m-r-6{margin-right:1.5vw}
-    .cm-p-r-6{padding-right:1.5vw}
-    .cm-m-a-7{margin:1.75vw}
-    .cm-p-a-7{padding:1.75vw}
-    .cm-m-t-7{margin-top:1.75vw}
-    .cm-p-t-7{padding-top:1.75vw}
-    .cm-m-b-7{margin-bottom:1.75vw}
-    .cm-p-b-7{padding-bottom:1.75vw}
-    .cm-m-l-7{margin-left:1.75vw}
-    .cm-p-l-7{padding-left:1.75vw}
-    .cm-m-r-7{margin-right:1.75vw}
-    .cm-p-r-7{padding-right:1.75vw}
-    .cm-m-a-8{margin:2vw}
-    .cm-p-a-8{padding:2vw}
-    .cm-m-t-8{margin-top:2vw}
-    .cm-p-t-8{padding-top:2vw}
-    .cm-m-b-8{margin-bottom:2vw}
-    .cm-p-b-8{padding-bottom:2vw}
-    .cm-m-l-8{margin-left:2vw}
-    .cm-p-l-8{padding-left:2vw}
-    .cm-m-r-8{margin-right:2vw}
-    .cm-p-r-8{padding-right:2vw}
-    .cm-m-a-9{margin:2.25vw}
-    .cm-p-a-9{padding:2.25vw}
-    .cm-m-t-9{margin-top:2.25vw}
-    .cm-p-t-9{padding-top:2.25vw}
-    .cm-m-b-9{margin-bottom:2.25vw}
-    .cm-p-b-9{padding-bottom:2.25vw}
-    .cm-m-l-9{margin-left:2.25vw}
-    .cm-p-l-9{padding-left:2.25vw}
-    .cm-m-r-9{margin-right:2.25vw}
-    .cm-p-r-9{padding-right:2.25vw}
-    .cm-m-a-10{margin:2.5vw}
-    .cm-p-a-10{padding:2.5vw}
-    .cm-m-t-10{margin-top:2.5vw}
-    .cm-p-t-10{padding-top:2.5vw}
-    .cm-m-b-10{margin-bottom:2.5vw}
-    .cm-p-b-10{padding-bottom:2.5vw}
-    .cm-m-l-10{margin-left:2.5vw}
-    .cm-p-l-10{padding-left:2.5vw}
-    .cm-m-r-10{margin-right:2.5vw}
-    .cm-p-r-10{padding-right:2.5vw}
-    .cm-m-a-11{margin:2.75vw}
-    .cm-p-a-11{padding:2.75vw}
-    .cm-m-t-11{margin-top:2.75vw}
-    .cm-p-t-11{padding-top:2.75vw}
-    .cm-m-b-11{margin-bottom:2.75vw}
-    .cm-p-b-11{padding-bottom:2.75vw}
-    .cm-m-l-11{margin-left:2.75vw}
-    .cm-p-l-11{padding-left:2.75vw}
-    .cm-m-r-11{margin-right:2.75vw}
-    .cm-p-r-11{padding-right:2.75vw}
-    .cm-m-a-12{margin:3vw}
-    .cm-p-a-12{padding:3vw}
-    .cm-m-t-12{margin-top:3vw}
-    .cm-p-t-12{padding-top:3vw}
-    .cm-m-b-12{margin-bottom:3vw}
-    .cm-p-b-12{padding-bottom:3vw}
-    .cm-m-l-12{margin-left:3vw}
-    .cm-p-l-12{padding-left:3vw}
-    .cm-m-r-12{margin-right:3vw}
-    .cm-p-r-12{padding-right:3vw}
-    .cm-m-a-13{margin:3.25vw}
-    .cm-p-a-13{padding:3.25vw}
-    .cm-m-t-13{margin-top:3.25vw}
-    .cm-p-t-13{padding-top:3.25vw}
-    .cm-m-b-13{margin-bottom:3.25vw}
-    .cm-p-b-13{padding-bottom:3.25vw}
-    .cm-m-l-13{margin-left:3.25vw}
-    .cm-p-l-13{padding-left:3.25vw}
-    .cm-m-r-13{margin-right:3.25vw}
-    .cm-p-r-13{padding-right:3.25vw}
-    .cm-m-a-14{margin:3.5vw}
-    .cm-p-a-14{padding:3.5vw}
-    .cm-m-t-14{margin-top:3.5vw}
-    .cm-p-t-14{padding-top:3.5vw}
-    .cm-m-b-14{margin-bottom:3.5vw}
-    .cm-p-b-14{padding-bottom:3.5vw}
-    .cm-m-l-14{margin-left:3.5vw}
-    .cm-p-l-14{padding-left:3.5vw}
-    .cm-m-r-14{margin-right:3.5vw}
-    .cm-p-r-14{padding-right:3.5vw}
-    .cm-m-a-15{margin:3.75vw}
-    .cm-p-a-15{padding:3.75vw}
-    .cm-m-t-15{margin-top:3.75vw}
-    .cm-p-t-15{padding-top:3.75vw}
-    .cm-m-b-15{margin-bottom:3.75vw}
-    .cm-p-b-15{padding-bottom:3.75vw}
-    .cm-m-l-15{margin-left:3.75vw}
-    .cm-p-l-15{padding-left:3.75vw}
-    .cm-m-r-15{margin-right:3.75vw}
-    .cm-p-r-15{padding-right:3.75vw}
-    .cm-m-a-16{margin:4vw}
-    .cm-p-a-16{padding:4vw}
-    .cm-m-t-16{margin-top:4vw}
-    .cm-p-t-16{padding-top:4vw}
-    .cm-m-b-16{margin-bottom:4vw}
-    .cm-p-b-16{padding-bottom:4vw}
-    .cm-m-l-16{margin-left:4vw}
-    .cm-p-l-16{padding-left:4vw}
-    .cm-m-r-16{margin-right:4vw}
-    .cm-p-r-16{padding-right:4vw}
-    .cm-m-a-17{margin:4.25vw}
-    .cm-p-a-17{padding:4.25vw}
-    .cm-m-t-17{margin-top:4.25vw}
-    .cm-p-t-17{padding-top:4.25vw}
-    .cm-m-b-17{margin-bottom:4.25vw}
-    .cm-p-b-17{padding-bottom:4.25vw}
-    .cm-m-l-17{margin-left:4.25vw}
-    .cm-p-l-17{padding-left:4.25vw}
-    .cm-m-r-17{margin-right:4.25vw}
-    .cm-p-r-17{padding-right:4.25vw}
-    .cm-m-a-18{margin:4.5vw}
-    .cm-p-a-18{padding:4.5vw}
-    .cm-m-t-18{margin-top:4.5vw}
-    .cm-p-t-18{padding-top:4.5vw}
-    .cm-m-b-18{margin-bottom:4.5vw}
-    .cm-p-b-18{padding-bottom:4.5vw}
-    .cm-m-l-18{margin-left:4.5vw}
-    .cm-p-l-18{padding-left:4.5vw}
-    .cm-m-r-18{margin-right:4.5vw}
-    .cm-p-r-18{padding-right:4.5vw}
-    .cm-m-a-19{margin:4.75vw}
-    .cm-p-a-19{padding:4.75vw}
-    .cm-m-t-19{margin-top:4.75vw}
-    .cm-p-t-19{padding-top:4.75vw}
-    .cm-m-b-19{margin-bottom:4.75vw}
-    .cm-p-b-19{padding-bottom:4.75vw}
-    .cm-m-l-19{margin-left:4.75vw}
-    .cm-p-l-19{padding-left:4.75vw}
-    .cm-m-r-19{margin-right:4.75vw}
-    .cm-p-r-19{padding-right:4.75vw}
-    .cm-m-a-20{margin:5vw}
-    .cm-p-a-20{padding:5vw}
-    .cm-m-t-20{margin-top:5vw}
-    .cm-p-t-20{padding-top:5vw}
-    .cm-m-b-20{margin-bottom:5vw}
-    .cm-p-b-20{padding-bottom:5vw}
-    .cm-m-l-20{margin-left:5vw}
-    .cm-p-l-20{padding-left:5vw}
-    .cm-m-r-20{margin-right:5vw}
-    .cm-p-r-20{padding-right:5vw}
-    .p-icon{display:inline-block;width:66px;height:22px;vertical-align:middle}
-    .p-icon::before{content:'';display:inline-block;width:66px;height:22px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
-    .p-icon.i1::before{background-position-y:-714px}
-    .p-icon.i2::before{background-position-y:-744px}
-    .p-icon.i3::before{background-position-y:-774px}
-    .p-icon.i4::before{background-position-y:-804px}
-    .p-icon.i5::before{background-position-y:-834px}
-    .cm-container{padding-left:1vw;padding-right:1vw;-webkit-box-sizing:border-box;box-sizing:border-box}
-    .cm-floor{padding:2.2vw 0}
-    .cm-p-a{padding:1vw}
-    .cm-m-a{padding:1vw}
-    .cm-floor-title .cm-title{font-size:5vw;color:#4a4f58;font-weight:700;line-height:7.5vw;padding-top:1vw;padding-bottom:1vw}
-    .cm-floor-title .cm-subtitle{font-size:4vw;color:#93979f;padding-top:1vw;padding-bottom:1vw}
-    .cm-article-item{overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
-    .cm-article-item .cm-article-title{font-size:3.5vw;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-    .cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
-    .cm-article-item .cm-article-desc{font-size:2.5vw;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
-    .cm-article-item .cm-article-desc.h56{height:10.5vw}
-    .cm-article-item .cm-article-cover.cover-168-168{width:27vw;height:27vw}
-    .cm-article-item.h200{height:33vw}
-    .cm-article-item .cm-line{display:none;height:1px;background-color:#f0f0f0}
-    .cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
-    .cm-product-item .cm-product-title{font-size:3vw;color:#4a4f58;line-height:5vw;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-    .cm-product-item .cm-prodcut-price{font-size:3vw;font-weight:bold}
-    .cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
-    .cm-product-item .h20{height:20px}
-    .cm-product-item .h24{height:24px;line-height: 24px;}
-    .cm-product-item .h44{height:10vw}
-    .swiper-container{padding-bottom:8vw}
-    .cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
-    .cm-scroll-container::-webkit-scrollbar{display:none}
-    .cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
-    .cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
-    .cm-cover-tag{width:11vw;height:4vw;font-size:3vw;line-height:4vw;padding:0.5vw 1vw;border-radius:4px}
-    .cm-tabs{height:6vw}
-    .cm-tabs .cm-tab{font-size:3vw;width:12vw;height:6vw;line-height:6vw;text-align:center}
-    .cm-btn-box{text-align:center}
-    .cm-btn-box .cm-toggle-btn{width:20vw;height:6vw;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:6vw;font-size:3vw;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-    .cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:10px;height:16px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
-    .cm-btn-box .cm-toggle-btn.down::after{background-position-x:-96px}
-    .cm-btn-box .cm-toggle-btn.up::after{background-position-x:-125px}
-    .cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
-    .cm-float-container .cm-regexp{ background: #fff; font-size: 2.4vw;line-height: 1.4;display: flex;justify-content: center;align-items: center;text-align: center;color: #666;}
-    .cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:12vw;height:12vw;margin:0.8vw 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
-    .cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
-    .cm-float-container .cm-slide:hover .cm-tooltop{display:block}
-    .cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
-    .cm-float-container .cm-slide:nth-child(1){height:13.2vw;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:12vw}
-    .cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
-    .cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
-    .cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
-    .cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
-    .cm-float-container .cm-tooltop{position:absolute;padding:3.5vw;background:#ff5c00;top:0;right:16vw;border-radius:6px;display:none}
-    .cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
-    .cm-float-container .cm-tooltop .cm-tooltop-content{font-size:3.2vw;color:#fff}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:51.6vw}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:2.5vw 0}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{text-align:center;width:44.8vw;}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:11vw;margin:3vw 3vw 0;width:1px;background:#f1f1f1}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:inline-block;width:16.4vw;height:16.4vw}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:2vw}
-    .cm-float-container .cm-mobile-tooltop .cm-tooltop-content .cm-item{ font-size: 1.8vw; }
-    .cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
-    .cm-entry .cm-icon-content{position:absolute;width:75.1vw;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
-    .cm-entry .cm-icon-content img{width:100%}
-    .cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:6.45vw;height:6.45vw;right:5vw;top:-8vw;background:url(/img/activity/pc_close.png) no-repeat center center;background-size:6.4vw}
-    .cm-entry .cm-icon-content .btn{display: block;width: 10vw;height: 10vw;background: #666;position: absolute;right: 8vw;z-index: 999;cursor: pointer;opacity: 0;}
-    .cm-entry .cm-icon-content .btn1{top: 24vw;}
-    .cm-entry .cm-icon-content .btn2{top: 47.5vw;}
-    .cm-footer{padding:4vw 0 2vw;background-color:#4a4f58;text-align:center;color:#fff;font-size:2.4vw;overflow:hidden}
-    .cm-footer img{width:12vw}
-    .banner-container{position:relative;width:100vw;height:45vw;overflow:hidden}
-    .banner-container .banner{width:100vw;position:absolute;height:100%;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
-    .banner-container .cm-container{height:100%;padding: 0;}
-    .banner-container img{display:block;height:100%;width: 100%;}
-    .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
-    .has-player::before{content:'';cursor: pointer; display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6vw;height:6vw; background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 6vw;}
-    .cm-to-top{width:12vw;height:12vw;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
-    .cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
-    .cm-to-top .cm-icon-bar:nth-child(1){width:6vw;height:1vw;background:#999999;margin-top:4vw;}
-    .cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:3vw solid transparent;border-right:3vw solid transparent;border-bottom:2vw solid #999999}
-    .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
-}
-@media (max-width:992px){
-    .cm-swiper-button-prev,.cm-swiper-button-next{display:none}
-}
-@media (min-width:560px){
-    .cm-col-md-1{width:1.66667%}
-    .cm-col-md-2{width:3.33333%}
-    .cm-col-md-3{width:5%}
-    .cm-col-md-4{width:6.66667%}
-    .cm-col-md-5{width:8.33333%}
-    .cm-col-md-6{width:10%}
-    .cm-col-md-7{width:11.66667%}
-    .cm-col-md-8{width:13.33333%}
-    .cm-col-md-9{width:15%}
-    .cm-col-md-10{width:16.66667%}
-    .cm-col-md-11{width:18.33333%}
-    .cm-col-md-12{width:20%}
-    .cm-col-md-13{width:21.66667%}
-    .cm-col-md-14{width:23.33333%}
-    .cm-col-md-15{width:25%}
-    .cm-col-md-16{width:26.66667%}
-    .cm-col-md-17{width:28.33333%}
-    .cm-col-md-18{width:30%}
-    .cm-col-md-19{width:31.66667%}
-    .cm-col-md-20{width:33.33333%}
-    .cm-col-md-21{width:35%}
-    .cm-col-md-22{width:36.66667%}
-    .cm-col-md-23{width:38.33333%}
-    .cm-col-md-24{width:40%}
-    .cm-col-md-25{width:41.66667%}
-    .cm-col-md-26{width:43.33333%}
-    .cm-col-md-27{width:45%}
-    .cm-col-md-28{width:46.66667%}
-    .cm-col-md-29{width:48.33333%}
-    .cm-col-md-30{width:50%}
-    .cm-col-md-31{width:51.66667%}
-    .cm-col-md-32{width:53.33333%}
-    .cm-col-md-33{width:55%}
-    .cm-col-md-34{width:56.66667%}
-    .cm-col-md-35{width:58.33333%}
-    .cm-col-md-36{width:60%}
-    .cm-col-md-37{width:61.66667%}
-    .cm-col-md-38{width:63.33333%}
-    .cm-col-md-39{width:65%}
-    .cm-col-md-40{width:66.66667%}
-    .cm-col-md-41{width:68.33333%}
-    .cm-col-md-42{width:70%}
-    .cm-col-md-43{width:71.66667%}
-    .cm-col-md-44{width:73.33333%}
-    .cm-col-md-45{width:75%}
-    .cm-col-md-46{width:76.66667%}
-    .cm-col-md-47{width:78.33333%}
-    .cm-col-md-48{width:80%}
-    .cm-col-md-49{width:81.66667%}
-    .cm-col-md-50{width:83.33333%}
-    .cm-col-md-51{width:85%}
-    .cm-col-md-52{width:86.66667%}
-    .cm-col-md-53{width:88.33333%}
-    .cm-col-md-54{width:90%}
-    .cm-col-md-55{width:91.66667%}
-    .cm-col-md-56{width:93.33333%}
-    .cm-col-md-57{width:95%}
-    .cm-col-md-58{width:96.66667%}
-    .cm-col-md-59{width:98.33333%}
-    .cm-col-md-60{width:100%}
-    .cm-m-a-1{margin:2px}
-    .cm-p-a-1{padding:2px}
-    .cm-m-t-1{margin-top:2px}
-    .cm-p-t-1{padding-top:2px}
-    .cm-m-b-1{margin-bottom:2px}
-    .cm-p-b-1{padding-bottom:2px}
-    .cm-m-l-1{margin-left:2px}
-    .cm-p-l-1{padding-left:2px}
-    .cm-m-r-1{margin-right:2px}
-    .cm-p-r-1{padding-right:2px}
-    .cm-m-a-2{margin:4px}
-    .cm-p-a-2{padding:4px}
-    .cm-m-t-2{margin-top:4px}
-    .cm-p-t-2{padding-top:4px}
-    .cm-m-b-2{margin-bottom:4px}
-    .cm-p-b-2{padding-bottom:4px}
-    .cm-m-l-2{margin-left:4px}
-    .cm-p-l-2{padding-left:4px}
-    .cm-m-r-2{margin-right:4px}
-    .cm-p-r-2{padding-right:4px}
-    .cm-m-a-3{margin:6px}
-    .cm-p-a-3{padding:6px}
-    .cm-m-t-3{margin-top:6px}
-    .cm-p-t-3{padding-top:6px}
-    .cm-m-b-3{margin-bottom:6px}
-    .cm-p-b-3{padding-bottom:6px}
-    .cm-m-l-3{margin-left:6px}
-    .cm-p-l-3{padding-left:6px}
-    .cm-m-r-3{margin-right:6px}
-    .cm-p-r-3{padding-right:6px}
-    .cm-m-a-4{margin:8px}
-    .cm-p-a-4{padding:8px}
-    .cm-m-t-4{margin-top:8px}
-    .cm-p-t-4{padding-top:8px}
-    .cm-m-b-4{margin-bottom:8px}
-    .cm-p-b-4{padding-bottom:8px}
-    .cm-m-l-4{margin-left:8px}
-    .cm-p-l-4{padding-left:8px}
-    .cm-m-r-4{margin-right:8px}
-    .cm-p-r-4{padding-right:8px}
-    .cm-m-a-5{margin:10px}
-    .cm-p-a-5{padding:10px}
-    .cm-m-t-5{margin-top:10px}
-    .cm-p-t-5{padding-top:10px}
-    .cm-m-b-5{margin-bottom:10px}
-    .cm-p-b-5{padding-bottom:10px}
-    .cm-m-l-5{margin-left:10px}
-    .cm-p-l-5{padding-left:10px}
-    .cm-m-r-5{margin-right:10px}
-    .cm-p-r-5{padding-right:10px}
-    .cm-m-a-6{margin:12px}
-    .cm-p-a-6{padding:12px}
-    .cm-m-t-6{margin-top:12px}
-    .cm-p-t-6{padding-top:12px}
-    .cm-m-b-6{margin-bottom:12px}
-    .cm-p-b-6{padding-bottom:12px}
-    .cm-m-l-6{margin-left:12px}
-    .cm-p-l-6{padding-left:12px}
-    .cm-m-r-6{margin-right:12px}
-    .cm-p-r-6{padding-right:12px}
-    .cm-m-a-7{margin:14px}
-    .cm-p-a-7{padding:14px}
-    .cm-m-t-7{margin-top:14px}
-    .cm-p-t-7{padding-top:14px}
-    .cm-m-b-7{margin-bottom:14px}
-    .cm-p-b-7{padding-bottom:14px}
-    .cm-m-l-7{margin-left:14px}
-    .cm-p-l-7{padding-left:14px}
-    .cm-m-r-7{margin-right:14px}
-    .cm-p-r-7{padding-right:14px}
-    .cm-m-a-8{margin:16px}
-    .cm-p-a-8{padding:16px}
-    .cm-m-t-8{margin-top:16px}
-    .cm-p-t-8{padding-top:16px}
-    .cm-m-b-8{margin-bottom:16px}
-    .cm-p-b-8{padding-bottom:16px}
-    .cm-m-l-8{margin-left:16px}
-    .cm-p-l-8{padding-left:16px}
-    .cm-m-r-8{margin-right:16px}
-    .cm-p-r-8{padding-right:16px}
-    .cm-m-a-9{margin:18px}
-    .cm-p-a-9{padding:18px}
-    .cm-m-t-9{margin-top:18px}
-    .cm-p-t-9{padding-top:18px}
-    .cm-m-b-9{margin-bottom:18px}
-    .cm-p-b-9{padding-bottom:18px}
-    .cm-m-l-9{margin-left:18px}
-    .cm-p-l-9{padding-left:18px}
-    .cm-m-r-9{margin-right:18px}
-    .cm-p-r-9{padding-right:18px}
-    .cm-m-a-10{margin:20px}
-    .cm-p-a-10{padding:20px}
-    .cm-m-t-10{margin-top:20px}
-    .cm-p-t-10{padding-top:20px}
-    .cm-m-b-10{margin-bottom:20px}
-    .cm-p-b-10{padding-bottom:20px}
-    .cm-m-l-10{margin-left:20px}
-    .cm-p-l-10{padding-left:20px}
-    .cm-m-r-10{margin-right:20px}
-    .cm-p-r-10{padding-right:20px}
-    .cm-m-a-11{margin:22px}
-    .cm-p-a-11{padding:22px}
-    .cm-m-t-11{margin-top:22px}
-    .cm-p-t-11{padding-top:22px}
-    .cm-m-b-11{margin-bottom:22px}
-    .cm-p-b-11{padding-bottom:22px}
-    .cm-m-l-11{margin-left:22px}
-    .cm-p-l-11{padding-left:22px}
-    .cm-m-r-11{margin-right:22px}
-    .cm-p-r-11{padding-right:22px}
-    .cm-m-a-12{margin:24px}
-    .cm-p-a-12{padding:24px}
-    .cm-m-t-12{margin-top:24px}
-    .cm-p-t-12{padding-top:24px}
-    .cm-m-b-12{margin-bottom:24px}
-    .cm-p-b-12{padding-bottom:24px}
-    .cm-m-l-12{margin-left:24px}
-    .cm-p-l-12{padding-left:24px}
-    .cm-m-r-12{margin-right:24px}
-    .cm-p-r-12{padding-right:24px}
-    .cm-m-a-13{margin:26px}
-    .cm-p-a-13{padding:26px}
-    .cm-m-t-13{margin-top:26px}
-    .cm-p-t-13{padding-top:26px}
-    .cm-m-b-13{margin-bottom:26px}
-    .cm-p-b-13{padding-bottom:26px}
-    .cm-m-l-13{margin-left:26px}
-    .cm-p-l-13{padding-left:26px}
-    .cm-m-r-13{margin-right:26px}
-    .cm-p-r-13{padding-right:26px}
-    .cm-m-a-14{margin:28px}
-    .cm-p-a-14{padding:28px}
-    .cm-m-t-14{margin-top:28px}
-    .cm-p-t-14{padding-top:28px}
-    .cm-m-b-14{margin-bottom:28px}
-    .cm-p-b-14{padding-bottom:28px}
-    .cm-m-l-14{margin-left:28px}
-    .cm-p-l-14{padding-left:28px}
-    .cm-m-r-14{margin-right:28px}
-    .cm-p-r-14{padding-right:28px}
-    .cm-m-a-15{margin:30px}
-    .cm-p-a-15{padding:30px}
-    .cm-m-t-15{margin-top:30px}
-    .cm-p-t-15{padding-top:30px}
-    .cm-m-b-15{margin-bottom:30px}
-    .cm-p-b-15{padding-bottom:30px}
-    .cm-m-l-15{margin-left:30px}
-    .cm-p-l-15{padding-left:30px}
-    .cm-m-r-15{margin-right:30px}
-    .cm-p-r-15{padding-right:30px}
-    .cm-m-a-16{margin:32px}
-    .cm-p-a-16{padding:32px}
-    .cm-m-t-16{margin-top:32px}
-    .cm-p-t-16{padding-top:32px}
-    .cm-m-b-16{margin-bottom:32px}
-    .cm-p-b-16{padding-bottom:32px}
-    .cm-m-l-16{margin-left:32px}
-    .cm-p-l-16{padding-left:32px}
-    .cm-m-r-16{margin-right:32px}
-    .cm-p-r-16{padding-right:32px}
-    .cm-m-a-17{margin:34px}
-    .cm-p-a-17{padding:34px}
-    .cm-m-t-17{margin-top:34px}
-    .cm-p-t-17{padding-top:34px}
-    .cm-m-b-17{margin-bottom:34px}
-    .cm-p-b-17{padding-bottom:34px}
-    .cm-m-l-17{margin-left:34px}
-    .cm-p-l-17{padding-left:34px}
-    .cm-m-r-17{margin-right:34px}
-    .cm-p-r-17{padding-right:34px}
-    .cm-m-a-18{margin:36px}
-    .cm-p-a-18{padding:36px}
-    .cm-m-t-18{margin-top:36px}
-    .cm-p-t-18{padding-top:36px}
-    .cm-m-b-18{margin-bottom:36px}
-    .cm-p-b-18{padding-bottom:36px}
-    .cm-m-l-18{margin-left:36px}
-    .cm-p-l-18{padding-left:36px}
-    .cm-m-r-18{margin-right:36px}
-    .cm-p-r-18{padding-right:36px}
-    .cm-m-a-19{margin:38px}
-    .cm-p-a-19{padding:38px}
-    .cm-m-t-19{margin-top:38px}
-    .cm-p-t-19{padding-top:38px}
-    .cm-m-b-19{margin-bottom:38px}
-    .cm-p-b-19{padding-bottom:38px}
-    .cm-m-l-19{margin-left:38px}
-    .cm-p-l-19{padding-left:38px}
-    .cm-m-r-19{margin-right:38px}
-    .cm-p-r-19{padding-right:38px}
-    .cm-m-a-20{margin:40px}
-    .cm-p-a-20{padding:40px}
-    .cm-m-t-20{margin-top:40px}
-    .cm-p-t-20{padding-top:40px}
-    .cm-m-b-20{margin-bottom:40px}
-    .cm-p-b-20{padding-bottom:40px}
-    .cm-m-l-20{margin-left:40px}
-    .cm-p-l-20{padding-left:40px}
-    .cm-m-r-20{margin-right:40px}
-    .cm-p-r-20{padding-right:40px}
-    .p-icon{display:inline-block;width:80px;height:24px;vertical-align:middle}
-    .p-icon::before{content:'';display:inline-block;width:80px;height:24px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
-    .p-icon.i1::before{background-position-y:-714px}
-    .p-icon.i2::before{background-position-y:-744px}
-    .p-icon.i3::before{background-position-y:-774px}
-    .p-icon.i4::before{background-position-y:-804px}
-    .p-icon.i5::before{background-position-y:-834px}
-    .cm-container{width:960px;padding-left:8px;padding-right:8px}
-    .cm-container .cm-row{margin-left:-8px;margin-right:-8px}
-    .cm-floor{padding:10px 0}
-    .cm-p-a{padding:8px}
-    .cm-m-a{padding:8px}
-    .cm-floor-title .cm-title{font-size:24px;color:#4a4f58;line-height:30px;font-weight:700;padding-top:4px;padding-bottom:4px}
-    .cm-floor-title .cm-subtitle{font-size:14px;color:#93979f;padding-top:4px;padding-bottom:4px}
-    .cm-article-item{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
-    .cm-article-item .cm-article-title{font-size:18px;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-    .cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
-    .cm-article-item .cm-article-desc{font-size:14px;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
-    .cm-article-item .cm-article-desc.h56{height:56px}
-    .cm-article-item .cm-article-cover.cover-168-168{width:168px;height:168px}
-    .cm-article-item:hover .cm-article-title{color:#ff5c00}
-    .cm-article-item:hover .cm-article-title.has-border{border-color:#ff5c00}
-    .cm-article-item.h200{height:200px}
-    .cm-article-item .cm-line{height:1px;background-color:#f0f0f0}
-    .cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
-    .cm-product-item .cm-product-title{font-size:14px;color:#4a4f58;line-height:20px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-    .cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
-    .cm-product-item .h20{height:20px}
-    .cm-product-item .h24{height:24px}
-    .cm-product-item .h44{height:44px}
-    .swiper-container{padding-bottom:30px}
-    .swiper-container.no-bottom{padding-bottom:0 !important}
-    .cm-cover-tag{width:72px;height:32px;font-size:16px;line-height:32px;border-radius:4px}
-    .cm-tabs .cm-tab{font-size:16px;width:60px;height:30px;line-height:30px;text-align:center}
-    .hover-class{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-    .hover-class:hover{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);box-shadow:0 0 15px rgba(0,0,0,0.2)}
-    .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
-    .has-player::before{content:'';cursor: pointer;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px;height:40px;background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 40px 40px; }
-    .cm-btn-box{text-align:center}
-    .cm-btn-box .cm-toggle-btn{width:98px;height:32px;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:32px;font-size:14px;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-    .cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:20px;height:16px;margin-right:2px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
-    .cm-btn-box .cm-toggle-btn.down::after{background-position-x:-90px}
-    .cm-btn-box .cm-toggle-btn.up::after{background-position-x:-119px}
-    .cm-btn-box .cm-toggle-btn:hover{color:#ff5c00;border-color:#ff5c00}
-    .cm-btn-box .cm-toggle-btn:hover.down::after{background-position-x:-150px}
-    .cm-btn-box .cm-toggle-btn:hover.up::after{background-position-x:-180px}
-    .cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
-    .cm-float-container .cm-regexp{display: flex;justify-content: center;align-items: center;text-align: center; background: #fff;font-size: 14px;color: #666;line-height: 1.4}
-    .cm-float-container .cm-regexp:hover{ color: #fff; background:#ff5c00 }
-    .cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:64px;height:64px;margin:6px 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
-    .cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
-    .cm-float-container .cm-slide:hover .cm-tooltop{display:block}
-    .cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
-    .cm-float-container .cm-slide:nth-child(1){height:70px;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:64px}
-    .cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
-    .cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
-    .cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
-    .cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
-    .cm-float-container .cm-tooltop{position:absolute;padding:15px;background:#ff5c00;top:0;right:80px;border-radius:6px;display: none}
-    .cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
-    .cm-float-container .cm-tooltop .cm-tooltop-content{font-size:14px;color:#fff}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:190px}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:8px 0}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{width:262px}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:72px;margin:15px 15px 0;width:1px;background:#f1f1f1}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:block}
-    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:8px}
-    .cm-footer{padding:25px 0 12px;background-color:#4a4f58;text-align:center;color:#fff;font-size:12px;overflow:hidden}
-    .cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
-    .cm-entry .cm-icon-content{width: 400px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
-    .cm-entry .cm-icon-content img{display: block; width: 100%;}
-    .cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:32px;height:32px;right:20px;top:-40px;background:url(/img/activity/pc_close.png) no-repeat center center}
-    .cm-entry .cm-icon-content .btn{display: block;width: 60px;height: 60px;background: #666;position: absolute;right: 40px;z-index: 999;cursor: pointer;opacity: 0;}
-    .cm-entry .cm-icon-content .btn1{top: 122px;}
-    .cm-entry .cm-icon-content .btn2{top: 250px;}
-    .banner-container{display: flex;justify-content: center; height:480px;background:pink;width: 100%;overflow: hidden;}
-    .banner-container .banner{ height: 480px;}
-    .banner-container .banner img{display: block;min-width: 1920px}
-    .cm-to-top{width:64px;height:64px;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
-    .cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
-    .cm-to-top .cm-icon-bar:nth-child(1){width:28px;height:4px;background:#999999;margin-top:20px}
-    .cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:10px solid #999999}
-    .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
-    .cm-to-top:hover{background:#ff5c00}
-    .cm-to-top:hover .cm-icon-bar:nth-child(1),.cm-to-top:hover .cm-icon-bar:nth-child(3){background:#fff !important}
-    .cm-to-top:hover .cm-icon-bar:nth-child(2){border-bottom-color:#fff}
-}
-@media (min-width:1200px){
-    .cm-container{width:1140px}
-}
-.cm-tags{white-space:nowrap}
-.cm-tags .cm-tag{display:inline-block;padding:1px 4px;font-size:12px;border:1px solid #999;border-radius:2px}
-.cm-tags .cm-tag.color1{border-color:#aaa;background-color:#fff;color:#888}
-.cm-tags .cm-tag.color2{border-color:#f94b4b;background-color:#fff1eb;color:#f94b4b}
-.cm-tags .cm-tag.color3{border-color:rgba(225,86,22,0.24);background-color:#fff;color:#FF5B00}
-.cm-meibohui-tag{font-size:12px;display:inline-block;padding:2px 4px;text-align:center;color:#ffffff !important;background-image:-webkit-gradient(linear,right top,left top,from(#f9c023),to(#f83600));background-image:-o-linear-gradient(right,#f9c023 0%,#f83600 100%);background-image:linear-gradient(270deg,#f9c023 0%,#f83600 100%);border-radius:0px 10px 0px 0px}
-.cm-swiper .cm-swiper-button-prev,.cm-swiper .cm-swiper-button-next{visibility:hidden;width:44px;height:100px;background:rgba(102,102,102,0.74) no-repeat center;z-index:20;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;border-radius:6px;opacity:0;-webkit-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;background-size:30px !important}
-.cm-swiper .cm-swiper-button-prev{background-image:url(/img/activity/prev-icon.png);left:-60px}
-.cm-swiper .cm-swiper-button-next{background-image:url(/img/activity/next-icon.png);right:-60px}
-.cm-swiper:hover .cm-swiper-button-prev,.cm-swiper:hover .cm-swiper-button-next{opacity:1;visibility:visible}
-.swiper-container .swiper-pagination-bullet-active{width:28px !important;background:#ff5c00}
-.swiper-container .swiper-pagination-bullet{width:14px;height:4px;display:inline-block;border-radius:2px}
-.cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
-.cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
-.cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
-.cm-cover-tag{display:block;background:#000;text-align:center;color:#fff}
-.cm-cover-tag.color1{background:rgba(0,0,0,0.5)}
-.cm-cover-tag.color2{background:#1ece70}
-.cm-cover-tag.color3{background:#ff5c00}
-.cm-tabs{text-align:right}
-.cm-tabs .cm-tab-content{display:inline-block;overflow:hidden;border-radius:4px}
-.cm-tabs .cm-tab{position:relative;display:inline-block;color:#4a4f58;cursor:pointer;background:#fff}
-.cm-tabs .cm-tab.on{color:#fff;background-color:#ff5c00}
-.cm-loading{z-index:99999;width:100vw;height:100vh;position:fixed;top:0;background:#fff}
-.cm-prodcut-price .red { color: #f94b4b;}
-
-@media screen and (min-width: 768px) {
-    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: rgba(0,0,0,0.8);z-index: 99999}
-    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
-    .video-popup .content{width: 944px;height: 642px; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
-    .video-popup .content video{width: 100%;height: 100%;display: block;}
-    .video-popup .close {position: absolute;right: 30px;top: 30px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
-}
-
-@media screen and (max-width: 768px) {
-    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
-    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
-    .video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
-    .video-popup .content video{width: 100%;height: 100%;display: block;}
-    .video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
-}
+body{background:#f5f5f5}
+#globalFot #scrollTop {
+    display: none !important;
+}
+#supplierLogin {
+    display: none !important;
+}
+a{color:#333;text-decoration:none}
+[v-cloak] {
+    opacity: 0;
+}
+.swiper-wrapper{height: auto;}
+.cm-left{float:left}
+.cm-right{float:right}
+.cm-clearfix::after,.cm-container::after,.cm-row::after{content:'';display:block;clear:both}
+.cm-hidden,.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{overflow:hidden}
+.cm-none{display:none}
+.cm-not-visible{visibility:hidden}
+.cm-flex,.cm-flex-j-between{display:-webkit-box;display:-ms-flexbox;display:flex}
+.bg-white{background-color:#fff}
+.cm-flex-j-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.cm-flex-1{-webkit-box-flex:1;-ms-flex:1;flex:1}
+.text-justify{text-align:justify}
+.cm-radius-4{border-radius:4px;overflow:hidden}
+.cm-absolute{position:absolute}
+.cm-relative{position:relative}
+.cm-top,.cm-top-left,.cm-top-right{top:0}
+.cm-bottom,.cm-bottom-right,.cm-bottom-left{bottom:0}
+.cm-left,.cm-top-left,.cm-bottom-left{left:0}
+.cm-right,.cm-top-right,.cm-bottom-right{right:0}
+.bg-white{background-color:#fff}
+.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}
+.cm-text-ellipsis-1{-webkit-line-clamp:1}
+.cm-text-ellipsis-2{-webkit-line-clamp:2}
+.cm-text-ellipsis-3{-webkit-line-clamp:3}
+.cm-text-ellipsis-4{-webkit-line-clamp:4}
+.cm-img-responsive{max-width:100%;height:auto;display:block}
+.cm-container{width:100%;margin:0 auto}
+[class*='cm-col-']{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-floor .swiper-slide{ height: auto;}
+.cm-product-item .cm-prodcut-price .price.none{color: #999;text-decoration: line-through;}
+.cm-product-item .cm-prodcut-price .price.none .red{color: #999;}
+@media (max-width:560px){
+    .cm-col-xs-1{width:1.66667%}
+    .cm-col-xs-2{width:3.33333%}
+    .cm-col-xs-3{width:5%}
+    .cm-col-xs-4{width:6.66667%}
+    .cm-col-xs-5{width:8.33333%}
+    .cm-col-xs-6{width:10%}
+    .cm-col-xs-7{width:11.66667%}
+    .cm-col-xs-8{width:13.33333%}
+    .cm-col-xs-9{width:15%}
+    .cm-col-xs-10{width:16.66667%}
+    .cm-col-xs-11{width:18.33333%}
+    .cm-col-xs-12{width:20%}
+    .cm-col-xs-13{width:21.66667%}
+    .cm-col-xs-14{width:23.33333%}
+    .cm-col-xs-15{width:25%}
+    .cm-col-xs-16{width:26.66667%}
+    .cm-col-xs-17{width:28.33333%}
+    .cm-col-xs-18{width:30%}
+    .cm-col-xs-19{width:31.66667%}
+    .cm-col-xs-20{width:33.33333%}
+    .cm-col-xs-21{width:35%}
+    .cm-col-xs-22{width:36.66667%}
+    .cm-col-xs-23{width:38.33333%}
+    .cm-col-xs-24{width:40%}
+    .cm-col-xs-25{width:41.66667%}
+    .cm-col-xs-26{width:43.33333%}
+    .cm-col-xs-27{width:45%}
+    .cm-col-xs-28{width:46.66667%}
+    .cm-col-xs-29{width:48.33333%}
+    .cm-col-xs-30{width:50%}
+    .cm-col-xs-31{width:51.66667%}
+    .cm-col-xs-32{width:53.33333%}
+    .cm-col-xs-33{width:55%}
+    .cm-col-xs-34{width:56.66667%}
+    .cm-col-xs-35{width:58.33333%}
+    .cm-col-xs-36{width:60%}
+    .cm-col-xs-37{width:61.66667%}
+    .cm-col-xs-38{width:63.33333%}
+    .cm-col-xs-39{width:65%}
+    .cm-col-xs-40{width:66.66667%}
+    .cm-col-xs-41{width:68.33333%}
+    .cm-col-xs-42{width:70%}
+    .cm-col-xs-43{width:71.66667%}
+    .cm-col-xs-44{width:73.33333%}
+    .cm-col-xs-45{width:75%}
+    .cm-col-xs-46{width:76.66667%}
+    .cm-col-xs-47{width:78.33333%}
+    .cm-col-xs-48{width:80%}
+    .cm-col-xs-49{width:81.66667%}
+    .cm-col-xs-50{width:83.33333%}
+    .cm-col-xs-51{width:85%}
+    .cm-col-xs-52{width:86.66667%}
+    .cm-col-xs-53{width:88.33333%}
+    .cm-col-xs-54{width:90%}
+    .cm-col-xs-55{width:91.66667%}
+    .cm-col-xs-56{width:93.33333%}
+    .cm-col-xs-57{width:95%}
+    .cm-col-xs-58{width:96.66667%}
+    .cm-col-xs-59{width:98.33333%}
+    .cm-col-xs-60{width:100%}
+    .cm-m-a-1{margin:0.25vw}
+    .cm-p-a-1{padding:0.25vw}
+    .cm-m-t-1{margin-top:0.25vw}
+    .cm-p-t-1{padding-top:0.25vw}
+    .cm-m-b-1{margin-bottom:0.25vw}
+    .cm-p-b-1{padding-bottom:0.25vw}
+    .cm-m-l-1{margin-left:0.25vw}
+    .cm-p-l-1{padding-left:0.25vw}
+    .cm-m-r-1{margin-right:0.25vw}
+    .cm-p-r-1{padding-right:0.25vw}
+    .cm-m-a-2{margin:0.5vw}
+    .cm-p-a-2{padding:0.5vw}
+    .cm-m-t-2{margin-top:0.5vw}
+    .cm-p-t-2{padding-top:0.5vw}
+    .cm-m-b-2{margin-bottom:0.5vw}
+    .cm-p-b-2{padding-bottom:0.5vw}
+    .cm-m-l-2{margin-left:0.5vw}
+    .cm-p-l-2{padding-left:0.5vw}
+    .cm-m-r-2{margin-right:0.5vw}
+    .cm-p-r-2{padding-right:0.5vw}
+    .cm-m-a-3{margin:0.75vw}
+    .cm-p-a-3{padding:0.75vw}
+    .cm-m-t-3{margin-top:0.75vw}
+    .cm-p-t-3{padding-top:0.75vw}
+    .cm-m-b-3{margin-bottom:0.75vw}
+    .cm-p-b-3{padding-bottom:0.75vw}
+    .cm-m-l-3{margin-left:0.75vw}
+    .cm-p-l-3{padding-left:0.75vw}
+    .cm-m-r-3{margin-right:0.75vw}
+    .cm-p-r-3{padding-right:0.75vw}
+    .cm-m-a-4{margin:1vw}
+    .cm-p-a-4{padding:1vw}
+    .cm-m-t-4{margin-top:1vw}
+    .cm-p-t-4{padding-top:1vw}
+    .cm-m-b-4{margin-bottom:1vw}
+    .cm-p-b-4{padding-bottom:1vw}
+    .cm-m-l-4{margin-left:1vw}
+    .cm-p-l-4{padding-left:1vw}
+    .cm-m-r-4{margin-right:1vw}
+    .cm-p-r-4{padding-right:1vw}
+    .cm-m-a-5{margin:1.25vw}
+    .cm-p-a-5{padding:1.25vw}
+    .cm-m-t-5{margin-top:1.25vw}
+    .cm-p-t-5{padding-top:1.25vw}
+    .cm-m-b-5{margin-bottom:1.25vw}
+    .cm-p-b-5{padding-bottom:1.25vw}
+    .cm-m-l-5{margin-left:1.25vw}
+    .cm-p-l-5{padding-left:1.25vw}
+    .cm-m-r-5{margin-right:1.25vw}
+    .cm-p-r-5{padding-right:1.25vw}
+    .cm-m-a-6{margin:1.5vw}
+    .cm-p-a-6{padding:1.5vw}
+    .cm-m-t-6{margin-top:1.5vw}
+    .cm-p-t-6{padding-top:1.5vw}
+    .cm-m-b-6{margin-bottom:1.5vw}
+    .cm-p-b-6{padding-bottom:1.5vw}
+    .cm-m-l-6{margin-left:1.5vw}
+    .cm-p-l-6{padding-left:1.5vw}
+    .cm-m-r-6{margin-right:1.5vw}
+    .cm-p-r-6{padding-right:1.5vw}
+    .cm-m-a-7{margin:1.75vw}
+    .cm-p-a-7{padding:1.75vw}
+    .cm-m-t-7{margin-top:1.75vw}
+    .cm-p-t-7{padding-top:1.75vw}
+    .cm-m-b-7{margin-bottom:1.75vw}
+    .cm-p-b-7{padding-bottom:1.75vw}
+    .cm-m-l-7{margin-left:1.75vw}
+    .cm-p-l-7{padding-left:1.75vw}
+    .cm-m-r-7{margin-right:1.75vw}
+    .cm-p-r-7{padding-right:1.75vw}
+    .cm-m-a-8{margin:2vw}
+    .cm-p-a-8{padding:2vw}
+    .cm-m-t-8{margin-top:2vw}
+    .cm-p-t-8{padding-top:2vw}
+    .cm-m-b-8{margin-bottom:2vw}
+    .cm-p-b-8{padding-bottom:2vw}
+    .cm-m-l-8{margin-left:2vw}
+    .cm-p-l-8{padding-left:2vw}
+    .cm-m-r-8{margin-right:2vw}
+    .cm-p-r-8{padding-right:2vw}
+    .cm-m-a-9{margin:2.25vw}
+    .cm-p-a-9{padding:2.25vw}
+    .cm-m-t-9{margin-top:2.25vw}
+    .cm-p-t-9{padding-top:2.25vw}
+    .cm-m-b-9{margin-bottom:2.25vw}
+    .cm-p-b-9{padding-bottom:2.25vw}
+    .cm-m-l-9{margin-left:2.25vw}
+    .cm-p-l-9{padding-left:2.25vw}
+    .cm-m-r-9{margin-right:2.25vw}
+    .cm-p-r-9{padding-right:2.25vw}
+    .cm-m-a-10{margin:2.5vw}
+    .cm-p-a-10{padding:2.5vw}
+    .cm-m-t-10{margin-top:2.5vw}
+    .cm-p-t-10{padding-top:2.5vw}
+    .cm-m-b-10{margin-bottom:2.5vw}
+    .cm-p-b-10{padding-bottom:2.5vw}
+    .cm-m-l-10{margin-left:2.5vw}
+    .cm-p-l-10{padding-left:2.5vw}
+    .cm-m-r-10{margin-right:2.5vw}
+    .cm-p-r-10{padding-right:2.5vw}
+    .cm-m-a-11{margin:2.75vw}
+    .cm-p-a-11{padding:2.75vw}
+    .cm-m-t-11{margin-top:2.75vw}
+    .cm-p-t-11{padding-top:2.75vw}
+    .cm-m-b-11{margin-bottom:2.75vw}
+    .cm-p-b-11{padding-bottom:2.75vw}
+    .cm-m-l-11{margin-left:2.75vw}
+    .cm-p-l-11{padding-left:2.75vw}
+    .cm-m-r-11{margin-right:2.75vw}
+    .cm-p-r-11{padding-right:2.75vw}
+    .cm-m-a-12{margin:3vw}
+    .cm-p-a-12{padding:3vw}
+    .cm-m-t-12{margin-top:3vw}
+    .cm-p-t-12{padding-top:3vw}
+    .cm-m-b-12{margin-bottom:3vw}
+    .cm-p-b-12{padding-bottom:3vw}
+    .cm-m-l-12{margin-left:3vw}
+    .cm-p-l-12{padding-left:3vw}
+    .cm-m-r-12{margin-right:3vw}
+    .cm-p-r-12{padding-right:3vw}
+    .cm-m-a-13{margin:3.25vw}
+    .cm-p-a-13{padding:3.25vw}
+    .cm-m-t-13{margin-top:3.25vw}
+    .cm-p-t-13{padding-top:3.25vw}
+    .cm-m-b-13{margin-bottom:3.25vw}
+    .cm-p-b-13{padding-bottom:3.25vw}
+    .cm-m-l-13{margin-left:3.25vw}
+    .cm-p-l-13{padding-left:3.25vw}
+    .cm-m-r-13{margin-right:3.25vw}
+    .cm-p-r-13{padding-right:3.25vw}
+    .cm-m-a-14{margin:3.5vw}
+    .cm-p-a-14{padding:3.5vw}
+    .cm-m-t-14{margin-top:3.5vw}
+    .cm-p-t-14{padding-top:3.5vw}
+    .cm-m-b-14{margin-bottom:3.5vw}
+    .cm-p-b-14{padding-bottom:3.5vw}
+    .cm-m-l-14{margin-left:3.5vw}
+    .cm-p-l-14{padding-left:3.5vw}
+    .cm-m-r-14{margin-right:3.5vw}
+    .cm-p-r-14{padding-right:3.5vw}
+    .cm-m-a-15{margin:3.75vw}
+    .cm-p-a-15{padding:3.75vw}
+    .cm-m-t-15{margin-top:3.75vw}
+    .cm-p-t-15{padding-top:3.75vw}
+    .cm-m-b-15{margin-bottom:3.75vw}
+    .cm-p-b-15{padding-bottom:3.75vw}
+    .cm-m-l-15{margin-left:3.75vw}
+    .cm-p-l-15{padding-left:3.75vw}
+    .cm-m-r-15{margin-right:3.75vw}
+    .cm-p-r-15{padding-right:3.75vw}
+    .cm-m-a-16{margin:4vw}
+    .cm-p-a-16{padding:4vw}
+    .cm-m-t-16{margin-top:4vw}
+    .cm-p-t-16{padding-top:4vw}
+    .cm-m-b-16{margin-bottom:4vw}
+    .cm-p-b-16{padding-bottom:4vw}
+    .cm-m-l-16{margin-left:4vw}
+    .cm-p-l-16{padding-left:4vw}
+    .cm-m-r-16{margin-right:4vw}
+    .cm-p-r-16{padding-right:4vw}
+    .cm-m-a-17{margin:4.25vw}
+    .cm-p-a-17{padding:4.25vw}
+    .cm-m-t-17{margin-top:4.25vw}
+    .cm-p-t-17{padding-top:4.25vw}
+    .cm-m-b-17{margin-bottom:4.25vw}
+    .cm-p-b-17{padding-bottom:4.25vw}
+    .cm-m-l-17{margin-left:4.25vw}
+    .cm-p-l-17{padding-left:4.25vw}
+    .cm-m-r-17{margin-right:4.25vw}
+    .cm-p-r-17{padding-right:4.25vw}
+    .cm-m-a-18{margin:4.5vw}
+    .cm-p-a-18{padding:4.5vw}
+    .cm-m-t-18{margin-top:4.5vw}
+    .cm-p-t-18{padding-top:4.5vw}
+    .cm-m-b-18{margin-bottom:4.5vw}
+    .cm-p-b-18{padding-bottom:4.5vw}
+    .cm-m-l-18{margin-left:4.5vw}
+    .cm-p-l-18{padding-left:4.5vw}
+    .cm-m-r-18{margin-right:4.5vw}
+    .cm-p-r-18{padding-right:4.5vw}
+    .cm-m-a-19{margin:4.75vw}
+    .cm-p-a-19{padding:4.75vw}
+    .cm-m-t-19{margin-top:4.75vw}
+    .cm-p-t-19{padding-top:4.75vw}
+    .cm-m-b-19{margin-bottom:4.75vw}
+    .cm-p-b-19{padding-bottom:4.75vw}
+    .cm-m-l-19{margin-left:4.75vw}
+    .cm-p-l-19{padding-left:4.75vw}
+    .cm-m-r-19{margin-right:4.75vw}
+    .cm-p-r-19{padding-right:4.75vw}
+    .cm-m-a-20{margin:5vw}
+    .cm-p-a-20{padding:5vw}
+    .cm-m-t-20{margin-top:5vw}
+    .cm-p-t-20{padding-top:5vw}
+    .cm-m-b-20{margin-bottom:5vw}
+    .cm-p-b-20{padding-bottom:5vw}
+    .cm-m-l-20{margin-left:5vw}
+    .cm-p-l-20{padding-left:5vw}
+    .cm-m-r-20{margin-right:5vw}
+    .cm-p-r-20{padding-right:5vw}
+    .p-icon{display:inline-block;width:66px;height:22px;vertical-align:middle}
+    .p-icon::before{content:'';display:inline-block;width:66px;height:22px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
+    .p-icon.i1::before{background-position-y:-714px}
+    .p-icon.i2::before{background-position-y:-744px}
+    .p-icon.i3::before{background-position-y:-774px}
+    .p-icon.i4::before{background-position-y:-804px}
+    .p-icon.i5::before{background-position-y:-834px}
+    .cm-container{padding-left:1vw;padding-right:1vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .cm-floor{padding:2.2vw 0}
+    .cm-p-a{padding:1vw}
+    .cm-m-a{padding:1vw}
+    .cm-floor-title .cm-title{font-size:4vw;color:#4a4f58;font-weight:700;line-height:7.5vw;padding-top:1vw;padding-bottom:1vw}
+    .cm-floor-title .cm-subtitle{font-size:3.5vw;color:#93979f;padding-top:1vw;padding-bottom:1vw}
+    .cm-article-item{overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .cm-article-item .cm-article-title{font-size:3.5vw;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
+    .cm-article-item .cm-article-desc{font-size:2.5vw;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
+    .cm-article-item .cm-article-desc.h56{height:10.5vw}
+    .cm-article-item .cm-article-cover.cover-168-168{width:27vw;height:27vw}
+    .cm-article-item.h200{height:33vw}
+    .cm-article-item .cm-line{display:none;height:1px;background-color:#f0f0f0}
+    .cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
+    .cm-product-item .cm-product-title{font-size:3vw;color:#4a4f58;line-height:5vw;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-product-item .cm-prodcut-price{font-size:3vw;font-weight:bold}
+    .cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
+    .cm-product-item .h20{height:20px}
+    .cm-product-item .h24{height:24px;line-height: 24px;}
+    .cm-product-item .h44{height:10vw}
+    .swiper-container{padding-bottom:8vw}
+    .cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
+    .cm-scroll-container::-webkit-scrollbar{display:none}
+    .cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
+    .cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
+    .cm-cover-tag{width:11vw;height:4vw;font-size:3vw;line-height:4vw;padding:0.5vw 1vw;border-radius:4px}
+    .cm-tabs{height:6vw}
+    .cm-tabs .cm-tab{font-size:3vw;width:12vw;height:6vw;line-height:6vw;text-align:center}
+    .cm-btn-box{text-align:center}
+    .cm-btn-box .cm-toggle-btn{width:20vw;height:6vw;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:6vw;font-size:3vw;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:10px;height:16px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
+    .cm-btn-box .cm-toggle-btn.down::after{background-position-x:-96px}
+    .cm-btn-box .cm-toggle-btn.up::after{background-position-x:-125px}
+    .cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
+    .cm-float-container .cm-regexp{ background: #fff; font-size: 2.4vw;line-height: 1.4;display: flex;justify-content: center;align-items: center;text-align: center;color: #666;}
+    .cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:12vw;height:12vw;margin:0.8vw 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
+    .cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
+    .cm-float-container .cm-slide:hover .cm-tooltop{display:block}
+    .cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
+    .cm-float-container .cm-slide:nth-child(1){height:13.2vw;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:12vw}
+    .cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
+    .cm-float-container .cm-tooltop{position:absolute;padding:3.5vw;background:#ff5c00;top:0;right:16vw;border-radius:6px;display:none}
+    .cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
+    .cm-float-container .cm-tooltop .cm-tooltop-content{font-size:3.2vw;color:#fff}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:51.6vw}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:2.5vw 0}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{text-align:center;width:44.8vw;}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:11vw;margin:3vw 3vw 0;width:1px;background:#f1f1f1}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:inline-block;width:16.4vw;height:16.4vw}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:2vw}
+    .cm-float-container .cm-mobile-tooltop .cm-tooltop-content .cm-item{ font-size: 1.8vw; }
+    .cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
+    .cm-entry .cm-icon-content{position:absolute;width:75.1vw;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+    .cm-entry .cm-icon-content img{width:100%}
+    .cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:6.45vw;height:6.45vw;right:5vw;top:-8vw;background:url(/img/activity/pc_close.png) no-repeat center center;background-size:6.4vw}
+    .cm-entry .cm-icon-content .btn{display: block;width: 10vw;height: 10vw;background: #666;position: absolute;right: 8vw;z-index: 999;cursor: pointer;opacity: 0;}
+    .cm-entry .cm-icon-content .btn1{top: 24vw;}
+    .cm-entry .cm-icon-content .btn2{top: 47.5vw;}
+    .cm-footer{padding:4vw 0 2vw;background-color:#4a4f58;text-align:center;color:#fff;font-size:2.4vw;overflow:hidden}
+    .cm-footer img{width:12vw}
+    .banner-container{position:relative;width:100vw;height:45vw;overflow:hidden}
+    .banner-container .banner{width:100vw;position:absolute;height:100%;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
+    .banner-container .cm-container{height:100%;padding: 0;}
+    .banner-container img{display:block;height:100%;width: 100%;}
+    .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
+    .has-player::before{content:'';cursor: pointer; display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6vw;height:6vw; background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 6vw;}
+    .cm-to-top{width:12vw;height:12vw;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+    .cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+    .cm-to-top .cm-icon-bar:nth-child(1){width:6vw;height:1vw;background:#999999;margin-top:4vw;}
+    .cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:3vw solid transparent;border-right:3vw solid transparent;border-bottom:2vw solid #999999}
+    .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
+}
+@media (max-width:992px){
+    .cm-swiper-button-prev,.cm-swiper-button-next{display:none}
+}
+@media (min-width:560px){
+    .cm-col-md-1{width:1.66667%}
+    .cm-col-md-2{width:3.33333%}
+    .cm-col-md-3{width:5%}
+    .cm-col-md-4{width:6.66667%}
+    .cm-col-md-5{width:8.33333%}
+    .cm-col-md-6{width:10%}
+    .cm-col-md-7{width:11.66667%}
+    .cm-col-md-8{width:13.33333%}
+    .cm-col-md-9{width:15%}
+    .cm-col-md-10{width:16.66667%}
+    .cm-col-md-11{width:18.33333%}
+    .cm-col-md-12{width:20%}
+    .cm-col-md-13{width:21.66667%}
+    .cm-col-md-14{width:23.33333%}
+    .cm-col-md-15{width:25%}
+    .cm-col-md-16{width:26.66667%}
+    .cm-col-md-17{width:28.33333%}
+    .cm-col-md-18{width:30%}
+    .cm-col-md-19{width:31.66667%}
+    .cm-col-md-20{width:33.33333%}
+    .cm-col-md-21{width:35%}
+    .cm-col-md-22{width:36.66667%}
+    .cm-col-md-23{width:38.33333%}
+    .cm-col-md-24{width:40%}
+    .cm-col-md-25{width:41.66667%}
+    .cm-col-md-26{width:43.33333%}
+    .cm-col-md-27{width:45%}
+    .cm-col-md-28{width:46.66667%}
+    .cm-col-md-29{width:48.33333%}
+    .cm-col-md-30{width:50%}
+    .cm-col-md-31{width:51.66667%}
+    .cm-col-md-32{width:53.33333%}
+    .cm-col-md-33{width:55%}
+    .cm-col-md-34{width:56.66667%}
+    .cm-col-md-35{width:58.33333%}
+    .cm-col-md-36{width:60%}
+    .cm-col-md-37{width:61.66667%}
+    .cm-col-md-38{width:63.33333%}
+    .cm-col-md-39{width:65%}
+    .cm-col-md-40{width:66.66667%}
+    .cm-col-md-41{width:68.33333%}
+    .cm-col-md-42{width:70%}
+    .cm-col-md-43{width:71.66667%}
+    .cm-col-md-44{width:73.33333%}
+    .cm-col-md-45{width:75%}
+    .cm-col-md-46{width:76.66667%}
+    .cm-col-md-47{width:78.33333%}
+    .cm-col-md-48{width:80%}
+    .cm-col-md-49{width:81.66667%}
+    .cm-col-md-50{width:83.33333%}
+    .cm-col-md-51{width:85%}
+    .cm-col-md-52{width:86.66667%}
+    .cm-col-md-53{width:88.33333%}
+    .cm-col-md-54{width:90%}
+    .cm-col-md-55{width:91.66667%}
+    .cm-col-md-56{width:93.33333%}
+    .cm-col-md-57{width:95%}
+    .cm-col-md-58{width:96.66667%}
+    .cm-col-md-59{width:98.33333%}
+    .cm-col-md-60{width:100%}
+    .cm-m-a-1{margin:2px}
+    .cm-p-a-1{padding:2px}
+    .cm-m-t-1{margin-top:2px}
+    .cm-p-t-1{padding-top:2px}
+    .cm-m-b-1{margin-bottom:2px}
+    .cm-p-b-1{padding-bottom:2px}
+    .cm-m-l-1{margin-left:2px}
+    .cm-p-l-1{padding-left:2px}
+    .cm-m-r-1{margin-right:2px}
+    .cm-p-r-1{padding-right:2px}
+    .cm-m-a-2{margin:4px}
+    .cm-p-a-2{padding:4px}
+    .cm-m-t-2{margin-top:4px}
+    .cm-p-t-2{padding-top:4px}
+    .cm-m-b-2{margin-bottom:4px}
+    .cm-p-b-2{padding-bottom:4px}
+    .cm-m-l-2{margin-left:4px}
+    .cm-p-l-2{padding-left:4px}
+    .cm-m-r-2{margin-right:4px}
+    .cm-p-r-2{padding-right:4px}
+    .cm-m-a-3{margin:6px}
+    .cm-p-a-3{padding:6px}
+    .cm-m-t-3{margin-top:6px}
+    .cm-p-t-3{padding-top:6px}
+    .cm-m-b-3{margin-bottom:6px}
+    .cm-p-b-3{padding-bottom:6px}
+    .cm-m-l-3{margin-left:6px}
+    .cm-p-l-3{padding-left:6px}
+    .cm-m-r-3{margin-right:6px}
+    .cm-p-r-3{padding-right:6px}
+    .cm-m-a-4{margin:8px}
+    .cm-p-a-4{padding:8px}
+    .cm-m-t-4{margin-top:8px}
+    .cm-p-t-4{padding-top:8px}
+    .cm-m-b-4{margin-bottom:8px}
+    .cm-p-b-4{padding-bottom:8px}
+    .cm-m-l-4{margin-left:8px}
+    .cm-p-l-4{padding-left:8px}
+    .cm-m-r-4{margin-right:8px}
+    .cm-p-r-4{padding-right:8px}
+    .cm-m-a-5{margin:10px}
+    .cm-p-a-5{padding:10px}
+    .cm-m-t-5{margin-top:10px}
+    .cm-p-t-5{padding-top:10px}
+    .cm-m-b-5{margin-bottom:10px}
+    .cm-p-b-5{padding-bottom:10px}
+    .cm-m-l-5{margin-left:10px}
+    .cm-p-l-5{padding-left:10px}
+    .cm-m-r-5{margin-right:10px}
+    .cm-p-r-5{padding-right:10px}
+    .cm-m-a-6{margin:12px}
+    .cm-p-a-6{padding:12px}
+    .cm-m-t-6{margin-top:12px}
+    .cm-p-t-6{padding-top:12px}
+    .cm-m-b-6{margin-bottom:12px}
+    .cm-p-b-6{padding-bottom:12px}
+    .cm-m-l-6{margin-left:12px}
+    .cm-p-l-6{padding-left:12px}
+    .cm-m-r-6{margin-right:12px}
+    .cm-p-r-6{padding-right:12px}
+    .cm-m-a-7{margin:14px}
+    .cm-p-a-7{padding:14px}
+    .cm-m-t-7{margin-top:14px}
+    .cm-p-t-7{padding-top:14px}
+    .cm-m-b-7{margin-bottom:14px}
+    .cm-p-b-7{padding-bottom:14px}
+    .cm-m-l-7{margin-left:14px}
+    .cm-p-l-7{padding-left:14px}
+    .cm-m-r-7{margin-right:14px}
+    .cm-p-r-7{padding-right:14px}
+    .cm-m-a-8{margin:16px}
+    .cm-p-a-8{padding:16px}
+    .cm-m-t-8{margin-top:16px}
+    .cm-p-t-8{padding-top:16px}
+    .cm-m-b-8{margin-bottom:16px}
+    .cm-p-b-8{padding-bottom:16px}
+    .cm-m-l-8{margin-left:16px}
+    .cm-p-l-8{padding-left:16px}
+    .cm-m-r-8{margin-right:16px}
+    .cm-p-r-8{padding-right:16px}
+    .cm-m-a-9{margin:18px}
+    .cm-p-a-9{padding:18px}
+    .cm-m-t-9{margin-top:18px}
+    .cm-p-t-9{padding-top:18px}
+    .cm-m-b-9{margin-bottom:18px}
+    .cm-p-b-9{padding-bottom:18px}
+    .cm-m-l-9{margin-left:18px}
+    .cm-p-l-9{padding-left:18px}
+    .cm-m-r-9{margin-right:18px}
+    .cm-p-r-9{padding-right:18px}
+    .cm-m-a-10{margin:20px}
+    .cm-p-a-10{padding:20px}
+    .cm-m-t-10{margin-top:20px}
+    .cm-p-t-10{padding-top:20px}
+    .cm-m-b-10{margin-bottom:20px}
+    .cm-p-b-10{padding-bottom:20px}
+    .cm-m-l-10{margin-left:20px}
+    .cm-p-l-10{padding-left:20px}
+    .cm-m-r-10{margin-right:20px}
+    .cm-p-r-10{padding-right:20px}
+    .cm-m-a-11{margin:22px}
+    .cm-p-a-11{padding:22px}
+    .cm-m-t-11{margin-top:22px}
+    .cm-p-t-11{padding-top:22px}
+    .cm-m-b-11{margin-bottom:22px}
+    .cm-p-b-11{padding-bottom:22px}
+    .cm-m-l-11{margin-left:22px}
+    .cm-p-l-11{padding-left:22px}
+    .cm-m-r-11{margin-right:22px}
+    .cm-p-r-11{padding-right:22px}
+    .cm-m-a-12{margin:24px}
+    .cm-p-a-12{padding:24px}
+    .cm-m-t-12{margin-top:24px}
+    .cm-p-t-12{padding-top:24px}
+    .cm-m-b-12{margin-bottom:24px}
+    .cm-p-b-12{padding-bottom:24px}
+    .cm-m-l-12{margin-left:24px}
+    .cm-p-l-12{padding-left:24px}
+    .cm-m-r-12{margin-right:24px}
+    .cm-p-r-12{padding-right:24px}
+    .cm-m-a-13{margin:26px}
+    .cm-p-a-13{padding:26px}
+    .cm-m-t-13{margin-top:26px}
+    .cm-p-t-13{padding-top:26px}
+    .cm-m-b-13{margin-bottom:26px}
+    .cm-p-b-13{padding-bottom:26px}
+    .cm-m-l-13{margin-left:26px}
+    .cm-p-l-13{padding-left:26px}
+    .cm-m-r-13{margin-right:26px}
+    .cm-p-r-13{padding-right:26px}
+    .cm-m-a-14{margin:28px}
+    .cm-p-a-14{padding:28px}
+    .cm-m-t-14{margin-top:28px}
+    .cm-p-t-14{padding-top:28px}
+    .cm-m-b-14{margin-bottom:28px}
+    .cm-p-b-14{padding-bottom:28px}
+    .cm-m-l-14{margin-left:28px}
+    .cm-p-l-14{padding-left:28px}
+    .cm-m-r-14{margin-right:28px}
+    .cm-p-r-14{padding-right:28px}
+    .cm-m-a-15{margin:30px}
+    .cm-p-a-15{padding:30px}
+    .cm-m-t-15{margin-top:30px}
+    .cm-p-t-15{padding-top:30px}
+    .cm-m-b-15{margin-bottom:30px}
+    .cm-p-b-15{padding-bottom:30px}
+    .cm-m-l-15{margin-left:30px}
+    .cm-p-l-15{padding-left:30px}
+    .cm-m-r-15{margin-right:30px}
+    .cm-p-r-15{padding-right:30px}
+    .cm-m-a-16{margin:32px}
+    .cm-p-a-16{padding:32px}
+    .cm-m-t-16{margin-top:32px}
+    .cm-p-t-16{padding-top:32px}
+    .cm-m-b-16{margin-bottom:32px}
+    .cm-p-b-16{padding-bottom:32px}
+    .cm-m-l-16{margin-left:32px}
+    .cm-p-l-16{padding-left:32px}
+    .cm-m-r-16{margin-right:32px}
+    .cm-p-r-16{padding-right:32px}
+    .cm-m-a-17{margin:34px}
+    .cm-p-a-17{padding:34px}
+    .cm-m-t-17{margin-top:34px}
+    .cm-p-t-17{padding-top:34px}
+    .cm-m-b-17{margin-bottom:34px}
+    .cm-p-b-17{padding-bottom:34px}
+    .cm-m-l-17{margin-left:34px}
+    .cm-p-l-17{padding-left:34px}
+    .cm-m-r-17{margin-right:34px}
+    .cm-p-r-17{padding-right:34px}
+    .cm-m-a-18{margin:36px}
+    .cm-p-a-18{padding:36px}
+    .cm-m-t-18{margin-top:36px}
+    .cm-p-t-18{padding-top:36px}
+    .cm-m-b-18{margin-bottom:36px}
+    .cm-p-b-18{padding-bottom:36px}
+    .cm-m-l-18{margin-left:36px}
+    .cm-p-l-18{padding-left:36px}
+    .cm-m-r-18{margin-right:36px}
+    .cm-p-r-18{padding-right:36px}
+    .cm-m-a-19{margin:38px}
+    .cm-p-a-19{padding:38px}
+    .cm-m-t-19{margin-top:38px}
+    .cm-p-t-19{padding-top:38px}
+    .cm-m-b-19{margin-bottom:38px}
+    .cm-p-b-19{padding-bottom:38px}
+    .cm-m-l-19{margin-left:38px}
+    .cm-p-l-19{padding-left:38px}
+    .cm-m-r-19{margin-right:38px}
+    .cm-p-r-19{padding-right:38px}
+    .cm-m-a-20{margin:40px}
+    .cm-p-a-20{padding:40px}
+    .cm-m-t-20{margin-top:40px}
+    .cm-p-t-20{padding-top:40px}
+    .cm-m-b-20{margin-bottom:40px}
+    .cm-p-b-20{padding-bottom:40px}
+    .cm-m-l-20{margin-left:40px}
+    .cm-p-l-20{padding-left:40px}
+    .cm-m-r-20{margin-right:40px}
+    .cm-p-r-20{padding-right:40px}
+    .p-icon{display:inline-block;width:80px;height:24px;vertical-align:middle}
+    .p-icon::before{content:'';display:inline-block;width:80px;height:24px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
+    .p-icon.i1::before{background-position-y:-714px}
+    .p-icon.i2::before{background-position-y:-744px}
+    .p-icon.i3::before{background-position-y:-774px}
+    .p-icon.i4::before{background-position-y:-804px}
+    .p-icon.i5::before{background-position-y:-834px}
+    .cm-container{width:960px;padding-left:8px;padding-right:8px}
+    .cm-container .cm-row{margin-left:-8px;margin-right:-8px}
+    .cm-floor{padding:10px 0}
+    .cm-p-a{padding:8px}
+    .cm-m-a{padding:8px}
+    .cm-floor-title .cm-title{font-size:24px;color:#4a4f58;line-height:30px;font-weight:700;padding-top:4px;padding-bottom:4px}
+    .cm-floor-title .cm-subtitle{font-size:14px;color:#93979f;padding-top:4px;padding-bottom:4px}
+    .cm-article-item{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+    .cm-article-item .cm-article-title{font-size:18px;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
+    .cm-article-item .cm-article-desc{font-size:14px;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
+    .cm-article-item .cm-article-desc.h56{height:56px}
+    .cm-article-item .cm-article-cover.cover-168-168{width:168px;height:168px}
+    .cm-article-item:hover .cm-article-title{color:#ff5c00}
+    .cm-article-item:hover .cm-article-title.has-border{border-color:#ff5c00}
+    .cm-article-item.h200{height:200px}
+    .cm-article-item .cm-line{height:1px;background-color:#f0f0f0}
+    .cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
+    .cm-product-item .cm-product-title{font-size:14px;color:#4a4f58;line-height:20px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
+    .cm-product-item .h20{height:20px}
+    .cm-product-item .h24{height:24px}
+    .cm-product-item .h44{height:44px}
+    .swiper-container{padding-bottom:30px}
+    .swiper-container.no-bottom{padding-bottom:0 !important}
+    .cm-cover-tag{width:72px;height:32px;font-size:16px;line-height:32px;border-radius:4px}
+    .cm-tabs .cm-tab{font-size:16px;width:60px;height:30px;line-height:30px;text-align:center}
+    .hover-class{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .hover-class:hover{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);box-shadow:0 0 15px rgba(0,0,0,0.2)}
+    .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
+    .has-player::before{content:'';cursor: pointer;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px;height:40px;background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 40px 40px; }
+    .cm-btn-box{text-align:center}
+    .cm-btn-box .cm-toggle-btn{width:98px;height:32px;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:32px;font-size:14px;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:20px;height:16px;margin-right:2px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
+    .cm-btn-box .cm-toggle-btn.down::after{background-position-x:-90px}
+    .cm-btn-box .cm-toggle-btn.up::after{background-position-x:-119px}
+    .cm-btn-box .cm-toggle-btn:hover{color:#ff5c00;border-color:#ff5c00}
+    .cm-btn-box .cm-toggle-btn:hover.down::after{background-position-x:-150px}
+    .cm-btn-box .cm-toggle-btn:hover.up::after{background-position-x:-180px}
+    .cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
+    .cm-float-container .cm-regexp{display: flex;justify-content: center;align-items: center;text-align: center; background: #fff;font-size: 14px;color: #666;line-height: 1.4}
+    .cm-float-container .cm-regexp:hover{ color: #fff; background:#ff5c00 }
+    .cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:64px;height:64px;margin:6px 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
+    .cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
+    .cm-float-container .cm-slide:hover .cm-tooltop{display:block}
+    .cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
+    .cm-float-container .cm-slide:nth-child(1){height:70px;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:64px}
+    .cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
+    .cm-float-container .cm-tooltop{position:absolute;padding:15px;background:#ff5c00;top:0;right:80px;border-radius:6px;display: none}
+    .cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
+    .cm-float-container .cm-tooltop .cm-tooltop-content{font-size:14px;color:#fff}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:190px}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:8px 0}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{width:262px}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:72px;margin:15px 15px 0;width:1px;background:#f1f1f1}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:block}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:8px}
+    .cm-footer{padding:25px 0 12px;background-color:#4a4f58;text-align:center;color:#fff;font-size:12px;overflow:hidden}
+    .cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
+    .cm-entry .cm-icon-content{width: 400px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+    .cm-entry .cm-icon-content img{display: block; width: 100%;}
+    .cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:32px;height:32px;right:20px;top:-40px;background:url(/img/activity/pc_close.png) no-repeat center center}
+    .cm-entry .cm-icon-content .btn{display: block;width: 60px;height: 60px;background: #666;position: absolute;right: 40px;z-index: 999;cursor: pointer;opacity: 0;}
+    .cm-entry .cm-icon-content .btn1{top: 122px;}
+    .cm-entry .cm-icon-content .btn2{top: 250px;}
+    .banner-container{display: flex;justify-content: center; height:480px;background:pink;width: 100%;overflow: hidden;}
+    .banner-container .banner{ height: 480px;}
+    .banner-container .banner img{display: block;min-width: 1920px}
+    .cm-to-top{width:64px;height:64px;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+    .cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+    .cm-to-top .cm-icon-bar:nth-child(1){width:28px;height:4px;background:#999999;margin-top:20px}
+    .cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:10px solid #999999}
+    .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
+    .cm-to-top:hover{background:#ff5c00}
+    .cm-to-top:hover .cm-icon-bar:nth-child(1),.cm-to-top:hover .cm-icon-bar:nth-child(3){background:#fff !important}
+    .cm-to-top:hover .cm-icon-bar:nth-child(2){border-bottom-color:#fff}
+}
+@media (min-width:1200px){
+    .cm-container{width:1140px}
+}
+.cm-tags{white-space:nowrap}
+.cm-tags .cm-tag{display:inline-block;padding:1px 4px;font-size:12px;border:1px solid #999;border-radius:2px}
+.cm-tags .cm-tag.color1{border-color:#aaa;background-color:#fff;color:#888}
+.cm-tags .cm-tag.color2{border-color:#f94b4b;background-color:#fff1eb;color:#f94b4b}
+.cm-tags .cm-tag.color3{border-color:rgba(225,86,22,0.24);background-color:#fff;color:#FF5B00}
+.cm-meibohui-tag{font-size:12px;display:inline-block;padding:2px 4px;text-align:center;color:#ffffff !important;background-image:-webkit-gradient(linear,right top,left top,from(#f9c023),to(#f83600));background-image:-o-linear-gradient(right,#f9c023 0%,#f83600 100%);background-image:linear-gradient(270deg,#f9c023 0%,#f83600 100%);border-radius:0px 10px 0px 0px}
+.cm-swiper .cm-swiper-button-prev,.cm-swiper .cm-swiper-button-next{visibility:hidden;width:44px;height:100px;background:rgba(102,102,102,0.74) no-repeat center;z-index:20;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;border-radius:6px;opacity:0;-webkit-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;background-size:30px !important}
+.cm-swiper .cm-swiper-button-prev{background-image:url(/img/activity/prev-icon.png);left:-60px}
+.cm-swiper .cm-swiper-button-next{background-image:url(/img/activity/next-icon.png);right:-60px}
+.cm-swiper:hover .cm-swiper-button-prev,.cm-swiper:hover .cm-swiper-button-next{opacity:1;visibility:visible}
+.swiper-container .swiper-pagination-bullet-active{width:28px !important;background:#ff5c00 !important;}
+.swiper-container .swiper-pagination-bullet{width:14px;height:4px;display:inline-block;border-radius:2px}
+.cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
+.cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
+.cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
+.cm-cover-tag{display:block;background:#000;text-align:center;color:#fff}
+.cm-cover-tag.color1{background:rgba(0,0,0,0.5)}
+.cm-cover-tag.color2{background:#1ece70}
+.cm-cover-tag.color3{background:#ff5c00}
+.cm-tabs{text-align:right}
+.cm-tabs .cm-tab-content{display:inline-block;overflow:hidden;border-radius:4px}
+.cm-tabs .cm-tab{position:relative;display:inline-block;color:#4a4f58;cursor:pointer;background:#fff}
+.cm-tabs .cm-tab.on{color:#fff;background-color:#ff5c00}
+.cm-loading{z-index:99999;width:100vw;height:100vh;position:fixed;top:0;background:#fff}
+.cm-prodcut-price .red { color: #f94b4b;}
+
+@media screen and (min-width: 768px) {
+    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: rgba(0,0,0,0.8);z-index: 99999}
+    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+    .video-popup .content{width: 944px;height: 642px; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
+    .video-popup .content video{width: 100%;height: 100%;display: block;}
+    .video-popup .close {position: absolute;right: 30px;top: 30px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
+}
+
+@media screen and (max-width: 768px) {
+    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+    .video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
+    .video-popup .content video{width: 100%;height: 100%;display: block;}
+    .video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
+}

src/main/resources/static/css/supplier-center/encyclopedia/edit.css

@@ -1,90 +1,91 @@
-#globalHead.fiexd{position:sticky !important;z-index:999}
-.navLayout{min-height:calc(100vh - 185px - 785px) !important}
-.bk-container .right{background:#fff;padding:24px 0}
-.bk-container .top-tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;text-align:center;font-size:12px;color:#FF5B00;line-height:18px;background:-o-linear-gradient(left,rgba(255,255,255,0.1) 0%,rgba(225,86,22,0.1) 51%,rgba(255,255,255,0.1) 100%);background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0.1)),color-stop(51%,rgba(225,86,22,0.1)),to(rgba(255,255,255,0.1)));background:linear-gradient(90deg,rgba(255,255,255,0.1) 0%,rgba(225,86,22,0.1) 51%,rgba(255,255,255,0.1) 100%)}
-.max-width{width:100% !important}
-.valide-form{width:680px;margin:40px auto 0}
-.valide-form .el-input .el-input__inner{height:36px;line-height:34px;border-radius:2px}
-.valide-form .el-select .el-select__caret{line-height:36px}
-.valide-form .el-form--label-top .el-form-item__label{color:#627386;line-height:32px;padding:0}
-.valide-form .el-form--label-top .el-form-item__label span{color:#FFB496}
-.valide-form .el-form-item{margin-bottom:24px}
-.valide-form .el-form-item.is-required{margin-bottom:32px}
-.valide-form .el-textarea .el-input__count{line-height:initial}
-.valide-form .bk-label{font-size:14px;color:#4A4F58;font-weight:bold;margin:16px 0 8px;position:relative}
-.valide-form .bk-label .bk-info-add{position:absolute;font-size:12px;color:#FF5B00;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-decoration:underline;cursor:pointer}
-.valide-form .bk-label span,.valide-form .bk-label i{font-weight:normal;font-style:normal}
-.valide-form .bk-label em{color:#f56c6c;font-style:normal}
-.valide-form .bk-label i{color:#FFB496}
-.valide-form .bk-status{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:24px;-moz-column-gap:24px;column-gap:24px}
-.valide-form .bk-literature-list{margin-bottom:32px}
-.valide-form .bk-literature-list li{margin-top:16px}
-.valide-form .bk-literature-list li:first-child{margin-top:0}
-.valide-form .bk-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:32px;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
-.valide-form .bk-control button{width:230px;height:48px;border:1px solid #FF5B00;text-align:center;border-radius:2px;font-size:18px;cursor:pointer}
-.valide-form .bk-control .bk-back{background:#FFE6DC;color:#FF5B00}
-.valide-form .bk-control .bk-confirm{background:#FF5B00;color:#FFFFFF}
-.valide-form .bk-form-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.valide-form .bk-form-item .bk-section{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-left:16px}
-.valide-form .bk-form-item .bk-section span{color:#FF5B00;text-decoration:none;font-size:12px;white-space:nowrap;cursor:pointer;line-height:initial}
-.valide-form .bk-form-item .bk-section .delete{position:absolute;top:0;right:-8px;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
-.valide-form .el-input{position:relative}
-.valide-form .el-input .bk-toolbar{position:absolute;top:0;left:0;font-size:14px;padding:6px 18px;background:#fff;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);border:1px solid #EEEEEE;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:initial;cursor:pointer;color:#9AA5B5;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.valide-form .el-input .bk-toolbar::after{content:"[1]"}
-.valide-form .el-input .bk-bubble{position:absolute;right:0;top:0;min-width:20px;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);height:20px;line-height:20px;border-radius:10px;background:#D7DCE4;color:#fff;font-size:14px;text-align:center;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}
-.valide-form .el-input .bk-mask{position:fixed;width:100vw;height:100vh;left:0;top:0;z-index:1}
-.valide-form .el-input .bk-literature{position:absolute;bottom:0;left:0;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);z-index:2;width:96%;background:#fff;border:1px solid #EEEEEE}
-.valide-form .bk-literature-list li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
-.valide-form .el-input .bk-literature li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;line-height:36px;padding:0 16px;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
-.valide-form .bk-literature-list li .bk-ref-control,.valide-form .el-input .bk-literature li .bk-ref-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px}
-.valide-form .bk-literature-list li .edit,.valide-form .bk-literature-list li .delete,.valide-form .el-input .bk-literature li .edit,.valide-form .el-input .bk-literature li .delete{display:block;width:18px;height:18px;background:url("/img/encyclopedia/assets/pc-icon-edit.png") no-repeat center;background-size:18px;cursor:pointer}
-.valide-form .bk-literature-list li .delete,.valide-form .el-input .bk-literature li .delete{background-image:url("/img/encyclopedia/assets/pc-icon-delete.png")}
-.valide-form .el-input .bk-input{line-height:initial;height:initial;padding-top:8px;padding-bottom:8px}
-.valide-form .bk-form-item-group{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
-.valide-form .bk-form-item-group .el-form-item:first-child{width:30%;-ms-flex-negative:0;flex-shrink:0}
-.valide-form .bk-form-item-group .el-form-item:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-negative:0;flex-shrink:0}
-.valide-form .bk-form-item-group .bk-info-remove{position:absolute;right:0;top:12px;-webkit-transform:translateX(140%);-ms-transform:translateX(140%);transform:translateX(140%);color:#F94B4B;font-size:12px;cursor:pointer}
-.bk-file-upload{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.bk-file-upload .bk-upload{position:relative;width:92px;height:92px;border:1px dashed #E2E7EF;font-size:14px;color:#9AA5B5;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:initial;cursor:pointer}
-.bk-file-upload .bk-upload div:first-child{font-size:40px;font-weight:lighter}
-.bk-file-upload .bk-upload div:last-child{font-size:14px}
-.bk-file-upload .bk-file-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
-.bk-file-upload .bk-file-wrap li{position:relative;width:90px;height:90px;border:1px dashed #E2E7EF}
-.bk-file-upload .bk-file-wrap span{position:absolute;right:0;top:0;z-index:1;width:20px;height:20px;background:#F94B4B;text-align:center;line-height:20px;color:#fff;font-size:14px;cursor:pointer}
-.bk-file-upload .bk-file-wrap img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}
-.bk-file-upload .bk-file-wrap video{display:block;width:100%;height:100%}
-.bk-dialog .mask{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);z-index:1000}
-.bk-dialog .bk-dialog-container{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:750px;height:526px;background:#fff;z-index:1001;-webkit-box-sizing:border-box;box-sizing:border-box;padding:32px 0 32px 32px}
-.bk-dialog .bk-dialog-container .bk-dialog-close{position:absolute;width:24px;height:24px;font-size:32px;right:24px;top:16px;text-align:center;line-height:24px;color:#9AA5B5;font-weight:lighter;cursor:pointer}
-.bk-dialog .bk-dialog-container .bk-dialog-content{height:350px;overflow-y:auto;padding-right:32px}
-.bk-dialog .bk-tab{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:56px;-moz-column-gap:56px;column-gap:56px;margin-bottom:36px}
-.bk-dialog .bk-tab .bk-tab-item{font-size:16px;color:#22272E;border-bottom:3px solid #fff;padding-bottom:2px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.bk-dialog .bk-tab .bk-tab-item.active{border-color:#FF5B00}
-.bk-dialog .bk-literature-list li{margin-top:10px;background:#F5F5F5;color:#999999;font-size:14px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;line-height:36px;padding:0 16px}
-.bk-dialog .bk-literature-list li:first-child{margin-top:0}
-.bk-dialog .bk-literature-list li a{color:#22272E}
-.bk-dialog .bk-literature-list li a:hover{text-decoration:underline;color:#FF5B00}
-.bk-dialog .bk-literature-list li a:hover i{background-image:url("/img/encyclopedia/assets/pc-icon-link-hover.png")}
-.bk-dialog .bk-literature-list li i{display:inline-block;vertical-align:middle;width:18px;height:18px;background-image:url("/img/encyclopedia/assets/pc-icon-link.png");background-repeat:no-repeat;background-position:center;background-size:18px;cursor:pointer}
-.bk-dialog .bk-literature-list li>i{background-image:url("/img/encyclopedia/assets/pc-icon-img.png")}
-.bk-dialog .bk-literature-list li>i:hover{background-image:url("/img/encyclopedia/assets/pc-icon-img-hover.png")}
-.bk-dialog .bk-dialog-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px;margin-top:20px}
-.bk-dialog .bk-dialog-footer button{width:80px;height:30px;text-align:center;line-height:28px;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
-.bk-dialog .bk-dialog-footer .bk-cancel{border:1px solid #B8BFCA;color:#22272E;background:#fff}
-.bk-dialog .bk-dialog-footer .bk-confirm{background:#FF5B00;color:#fff}
-.scapegoat.hover{background-color:#ddd}
-.bk-agreement-mask{top:0;left:0;position:fixed;z-index:1000;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
-.bk-agreement{position:fixed;z-index:1001;width:750px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:#fff}
-.bk-agreement .bk-header{position:relative;height:64px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#FFF6F2}
-.bk-agreement .bk-header span{font-size:18px;color:#22272E;font-weight:bold}
-.bk-agreement .bk-header i{position:absolute;width:24px;height:24px;font-size:16px;color:#9AA5B5;right:16px;top:16px;line-height:24px;text-align:center}
-.bk-agreement .bk-desc{font-size:14px;color:#999999;line-height:24px;text-align:center;margin:32px 0 0;padding-bottom:16px}
-.bk-agreement .bk-desc a{color:#FF5B00}
-.bk-agreement .bk-content{height:450px;overflow-y:auto;padding:0 40px}
-.bk-agreement .bk-content h2{position:relative;font-size:14px;color:#22272E;margin-bottom:16px;margin-top:32px}
-.bk-agreement .bk-content h2::before{content:"";display:block;width:4px;height:12px;background:#FF5B00;position:absolute;top:50%;left:0;-webkit-transform:translate(-250%,-40%);-ms-transform:translate(-250%,-40%);transform:translate(-250%,-40%)}
-.bk-agreement .bk-content p{color:#666666;line-height:24px;margin:12px 0}
-.bk-agreement .bk-content p span{color:#22272E}
-.bk-agreement .bk-control{padding:40px 0;text-align:center}
-.bk-agreement .bk-control button{font-size:16px;color:#fff;width:295px;height:50px;background:#FF5B00;border-radius:4px;cursor:pointer}
-.bk-agreement .bk-control .bk-link {margin-top: 10px;}
+#globalHead.fiexd{position:sticky !important;z-index:999}
+.navLayout{min-height:calc(100vh - 185px - 785px) !important}
+.bk-container .right{background:#fff;padding:24px 0}
+.bk-container .top-tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;text-align:center;font-size:12px;color:#FF5B00;line-height:18px;background:-o-linear-gradient(left,rgba(255,255,255,0.1) 0%,rgba(225,86,22,0.1) 51%,rgba(255,255,255,0.1) 100%);background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0.1)),color-stop(51%,rgba(225,86,22,0.1)),to(rgba(255,255,255,0.1)));background:linear-gradient(90deg,rgba(255,255,255,0.1) 0%,rgba(225,86,22,0.1) 51%,rgba(255,255,255,0.1) 100%)}
+.max-width{width:100% !important}
+.valide-form{width:680px;margin:40px auto 0}
+.valide-form .el-input .el-input__inner{height:36px;line-height:34px;border-radius:2px}
+.valide-form .el-select .el-select__caret{line-height:36px}
+.valide-form .el-form--label-top .el-form-item__label{color:#627386;line-height:32px;padding:0}
+.valide-form .el-form--label-top .el-form-item__label span{color:#FFB496}
+.valide-form .el-form-item{margin-bottom:24px}
+.valide-form .el-form-item.is-required{margin-bottom:32px}
+.valide-form .el-textarea .el-input__count{line-height:initial}
+.valide-form .bk-label{font-size:14px;color:#4A4F58;font-weight:bold;margin:16px 0 8px;position:relative}
+.valide-form .bk-label .bk-info-add{position:absolute;font-size:12px;color:#FF5B00;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-decoration:underline;cursor:pointer}
+.valide-form .bk-label span,.valide-form .bk-label i{font-weight:normal;font-style:normal}
+.valide-form .bk-label em{color:#f56c6c;font-style:normal}
+.valide-form .bk-label i{color:#FFB496}
+.valide-form .bk-status{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:24px;-moz-column-gap:24px;column-gap:24px}
+.valide-form .bk-literature-list{margin-bottom:32px}
+.valide-form .bk-literature-list li{margin-top:16px}
+.valide-form .bk-literature-list li:first-child{margin-top:0}
+.valide-form .bk-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:32px;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
+.valide-form .bk-control button{width:230px;height:48px;border:1px solid #FF5B00;text-align:center;border-radius:2px;font-size:18px;cursor:pointer}
+.valide-form .bk-control .bk-back{background:#FFE6DC;color:#FF5B00}
+.valide-form .bk-control .bk-confirm{background:#FF5B00;color:#FFFFFF}
+.valide-form .bk-form-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.valide-form .bk-form-item .bk-section{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-left:16px}
+.valide-form .bk-form-item .bk-section span{color:#FF5B00;text-decoration:none;font-size:12px;white-space:nowrap;cursor:pointer;line-height:initial}
+.valide-form .bk-form-item .bk-section .delete{position:absolute;top:0;right:-8px;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
+.valide-form .el-input{position:relative}
+.valide-form .el-input .bk-toolbar{position:absolute;top:0;left:0;font-size:14px;padding:6px 18px;background:#fff;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);border:1px solid #EEEEEE;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:initial;cursor:pointer;color:#9AA5B5;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.valide-form .el-input .bk-toolbar::after{content:"[1]"}
+.valide-form .el-input .bk-bubble{position:absolute;right:0;top:0;min-width:20px;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);height:20px;line-height:20px;border-radius:10px;background:#D7DCE4;color:#fff;font-size:14px;text-align:center;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}
+.valide-form .el-input .bk-mask{position:fixed;width:100vw;height:100vh;left:0;top:0;z-index:1}
+.valide-form .el-input .bk-literature{position:absolute;bottom:0;left:0;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);z-index:2;width:96%;background:#fff;border:1px solid #EEEEEE}
+.valide-form .bk-literature-list li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
+.valide-form .el-input .bk-literature li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;line-height:36px;padding:0 16px;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
+.valide-form .bk-literature-list li .bk-ref-control,.valide-form .el-input .bk-literature li .bk-ref-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px}
+.valide-form .bk-literature-list li .edit,.valide-form .bk-literature-list li .delete,.valide-form .el-input .bk-literature li .edit,.valide-form .el-input .bk-literature li .delete{display:block;width:18px;height:18px;background:url("/img/encyclopedia/assets/pc-icon-edit.png") no-repeat center;background-size:18px;cursor:pointer}
+.valide-form .bk-literature-list li .delete,.valide-form .el-input .bk-literature li .delete{background-image:url("/img/encyclopedia/assets/pc-icon-delete.png")}
+.valide-form .el-input .bk-input{line-height:initial;height:initial;padding-top:8px;padding-bottom:8px}
+.valide-form .bk-form-item-group{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
+.valide-form .bk-form-item-group .el-form-item:first-child{width:30%;-ms-flex-negative:0;flex-shrink:0}
+.valide-form .bk-form-item-group .el-form-item:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-negative:0;flex-shrink:0}
+.valide-form .bk-form-item-group .bk-info-remove{position:absolute;right:0;top:12px;-webkit-transform:translateX(140%);-ms-transform:translateX(140%);transform:translateX(140%);color:#F94B4B;font-size:12px;cursor:pointer}
+.bk-file-upload{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.bk-file-upload .bk-upload{position:relative;width:92px;height:92px;border:1px dashed #E2E7EF;font-size:14px;color:#9AA5B5;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:initial;cursor:pointer}
+.bk-file-upload .bk-upload div:first-child{font-size:40px;font-weight:lighter}
+.bk-file-upload .bk-upload div:last-child{font-size:14px}
+.bk-file-upload .bk-file-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
+.bk-file-upload .bk-file-wrap li{position:relative;width:90px;height:90px;border:1px dashed #E2E7EF}
+.bk-file-upload .bk-file-wrap span{position:absolute;right:0;top:0;z-index:1;width:20px;height:20px;background:#F94B4B;text-align:center;line-height:20px;color:#fff;font-size:14px;cursor:pointer}
+.bk-file-upload .bk-file-wrap img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}
+.bk-file-upload .bk-file-wrap video{display:block;width:100%;height:100%}
+.bk-dialog .mask{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);z-index:1000}
+.bk-dialog .bk-dialog-container{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:750px;height:526px;background:#fff;z-index:1001;-webkit-box-sizing:border-box;box-sizing:border-box;padding:32px 0 32px 32px}
+.bk-dialog .bk-dialog-container .bk-dialog-close{position:absolute;width:24px;height:24px;font-size:32px;right:24px;top:16px;text-align:center;line-height:24px;color:#9AA5B5;font-weight:lighter;cursor:pointer}
+.bk-dialog .bk-dialog-container .bk-dialog-content{height:350px;overflow-y:auto;padding-right:32px}
+.bk-dialog .bk-tab{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:56px;-moz-column-gap:56px;column-gap:56px;margin-bottom:36px}
+.bk-dialog .bk-tab .bk-tab-item{font-size:16px;color:#22272E;border-bottom:3px solid #fff;padding-bottom:2px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.bk-dialog .bk-tab .bk-tab-item.active{border-color:#FF5B00}
+.bk-dialog .bk-literature-list li{margin-top:10px;background:#F5F5F5;color:#999999;font-size:14px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;line-height:36px;padding:0 16px}
+.bk-dialog .bk-literature-list li:first-child{margin-top:0}
+.bk-dialog .bk-literature-list li a{color:#22272E}
+.bk-dialog .bk-literature-list li a:hover{text-decoration:underline;color:#FF5B00}
+.bk-dialog .bk-literature-list li a:hover i{background-image:url("/img/encyclopedia/assets/pc-icon-link-hover.png")}
+.bk-dialog .bk-literature-list li i{display:inline-block;vertical-align:middle;width:18px;height:18px;background-image:url("/img/encyclopedia/assets/pc-icon-link.png");background-repeat:no-repeat;background-position:center;background-size:18px;cursor:pointer}
+.bk-dialog .bk-literature-list li>i{background-image:url("/img/encyclopedia/assets/pc-icon-img.png")}
+.bk-dialog .bk-literature-list li>i:hover{background-image:url("/img/encyclopedia/assets/pc-icon-img-hover.png")}
+.bk-dialog .bk-dialog-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px;margin-top:20px}
+.bk-dialog .bk-dialog-footer button{width:80px;height:30px;text-align:center;line-height:28px;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+.bk-dialog .bk-dialog-footer .bk-cancel{border:1px solid #B8BFCA;color:#22272E;background:#fff}
+.bk-dialog .bk-dialog-footer .bk-confirm{background:#FF5B00;color:#fff}
+.scapegoat.hover{background-color:#ddd}
+.bk-agreement-mask{top:0;left:0;position:fixed;z-index:1000;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
+.bk-agreement{position:fixed;z-index:1001;width:750px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:#fff}
+.bk-agreement .bk-header{position:relative;height:64px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#FFF6F2}
+.bk-agreement .bk-header span{font-size:18px;color:#22272E;font-weight:bold}
+.bk-agreement .bk-header i{position:absolute;width:24px;height:24px;font-size:16px;color:#9AA5B5;right:16px;top:16px;line-height:24px;text-align:center}
+.bk-agreement .bk-desc{font-size:14px;color:#999999;line-height:24px;text-align:center;margin:32px 0 0;padding-bottom:16px}
+.bk-agreement .bk-desc a{color:#FF5B00}
+.bk-agreement .bk-content{height:450px;overflow-y:auto;padding:0 40px}
+.bk-agreement .bk-content h2{position:relative;font-size:14px;color:#22272E;margin-bottom:16px;margin-top:32px}
+.bk-agreement .bk-content h2::before{content:"";display:block;width:4px;height:12px;background:#FF5B00;position:absolute;top:50%;left:0;-webkit-transform:translate(-250%,-40%);-ms-transform:translate(-250%,-40%);transform:translate(-250%,-40%)}
+.bk-agreement .bk-content p{color:#666666;line-height:24px;margin:12px 0}
+.bk-agreement .bk-content p span{color:#22272E}
+.bk-agreement .bk-control{padding:40px 0;text-align:center}
+.bk-agreement .bk-control button{font-size:16px;color:#fff;width:295px;height:50px;background:#FF5B00;border-radius:4px;cursor:pointer}
+.bk-agreement .bk-control .bk-link {margin-top: 10px;}
+.bk-agreement .bk-control .bk-link input[type="checkbox"] {margin-right: 10px;}

src/main/resources/static/css/supplier-login/login.css

@@ -1,1702 +1,1713 @@
-html {
-    /*scroll-behavior: smooth;*/
-    scroll-padding-top: 7vh;
-}
-body{
-    width: 100vw;
-    height: 100vh;
-}
-#scrollTop {
-    display: none !important;
-}
-[v-cloak] {
-    opacity: 0;
-}
-.text_info {
-    width: 100vw;
-    height: 100%;
-    box-sizing: border-box;
-    overflow-y: scroll;
-}
-.text_info .text_info_contain {
-    height: auto;
-    padding: 10vh 24vw;
-    box-sizing: border-box;
-    width: 100%;
-    background: #fff;
-}
-.text_info .text_info_contain p {
-    font-size: 16px;
-    line-height: 30px;
-    color: #777;
-}
-.username {
-    color: #FF5B00;
-    position: relative;
-    cursor: pointer;
-    box-sizing: border-box;
-    height: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.username::after {
-    content: '\276F';
-    font-weight: normal;
-    position: absolute;
-    right: -14px;
-    top: 0;
-    transform: rotate(90deg);
-    transition: .3s;
-}
-.username:hover {
-    border-bottom: 1px solid;
-}
-.username:hover::after{
-    transform: rotate(270deg);
-}
-.username .el-popover__reference-wrapper .el-button--text {
-    color: #FF5B00;
-}
-.el-popover {
-    padding: 5px !important;
-    min-width: 90px !important;
-}
-.el-popover .cShow {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-}
-.el-popover .cShow .a_cm {
-    color: #333;
-}
-.el-popover__reference{
-    font-size: 0.8vw;
-}
-.a_cm {
-    padding: 10px;
-}
-.login_a:hover {
-    color: white;
-}
-.slide_icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    position: fixed;
-    right: 1vw;
-    bottom: 90px;
-    background: #FF5B00;
-    border-radius: 4px;
-    padding: 4px;
-    height: auto;
-    z-index: 999;
-}
-.slide_icon .slide_icon_item {
-    width: 100%;
-    height: 65px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    color: #FFFFFF;
-    font-size: 14px;
-    cursor: pointer;
-    padding: 0.4vw 0;
-    box-sizing: border-box;
-}
-.slide_icon_item:nth-child(1){
-    background: url(/img/supplier-login/float/d.png) center no-repeat;
-    background-position: top;
-}
-.slide_icon_item:nth-child(3){
-    background: url(/img/supplier-login/float/z.png) center no-repeat;
-}
-.slide_icon_item:nth-child(2){
-    border-top: 1px solid rgb(255,255,255, 0.3);
-    border-bottom: 1px solid rgb(255,255,255, 0.3);
-    background: url(/img/supplier-login/float/w.png) center no-repeat;
-    background-position: top;
-}
-.tooltip {
-    background: #FFFFFF;
-    box-shadow: 0px 4px 16px 0px rgba(51,51,51,0.12);
-    border-radius: 4px;
-    z-index: 999;
-    position: fixed;
-    transition: .3s;
-    display: flex;
-    justify-content: space-around;
-    flex-direction: column;
-    right: 90px;
-}
-
-.slide_icon .slide_icon_item .tooltip_1{
-    width: 170px;
-    height: 64px;
-    padding: 10px;
-    text-align: center;
-    display: none;
-    opacity: 0;
-}
-.slide_icon .slide_icon_item .tooltip_1 .day {
-    color: #666666;
-    font-size: 16px;
-}
-.slide_icon .slide_icon_item .tooltip_1 .phone_number {
-    color: #FF5B00;
-    font-size: 20px;
-}
-.slide_icon .slide_icon_item .tooltip_1::after {
-    content: '';
-    height: 0;
-    width: 0;
-    border: 10px solid transparent;
-    border-left: 15px solid white;
-    display: block;
-    position: absolute;
-    right: -20px;
-    bottom: 0;
-}
-.slide_icon .slide_icon_item .tooltip_2::after {
-    content: '';
-    height: 0;
-    width: 0;
-    border: 10px solid transparent;
-    border-left: 15px solid white;
-    display: block;
-    position: absolute;
-    right: -20px;
-    top: 0;
-    z-index: -1;
-}
-.slide_icon .slide_icon_item .tooltip_2{
-    width: 150px;
-    height: 150px;
-    display: none;
-    opacity: 0;
-}
-.slide_icon .slide_icon_phone:hover .tooltip_1 {
-    opacity: 1;
-    display: flex;
-}
-.slide_icon .slide_icon_qrcode:hover .tooltip_2 {
-    opacity: 1;
-    display: flex;
-}
-.slide_icon_item .slide_icon_phone .slide_icon_text {
-    color:#666666;
-}
-.slide_icon .slide_icon_item .slide_icon_phone .slid_phonenumber {
-    font-size: 1vw;
-    color: #FF5B00;
-}
-.login_header{
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    height: 7vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: #fff;
-    z-index: 999;
-}
-.login_header_container{
-    width: 95vw;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.img_logo {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-}
-.img_logo .logo {
-    width: 5.5vw;
-    height: 2.5vw;
-    background: url("/img/supplier-login/logo.png") no-repeat;
-    background-size: 100% 100%;
-}
-.text {
-    font-size: 1.2vw;
-    font-weight: 400;
-    color: #272727;
-    margin-left: 10px;
-}
-.header_link{
-    align-items: center;
-    position: relative;
-    height: 100%;
-    display: flex;
-    overflow: hidden;
-}
-.header_link .nav_link {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    width: 6vw;
-    height: 100%;
-    transition: .3s;
-}
-.header_link .nav_link .nav_link_item{
-    width: 1.2vw;
-    height: 0.2vh;
-    background: #FF5B00;
-    border-radius: 8px;
-    margin-bottom: 1vh;
-}
-.header_link .header_link_itme {
-    cursor: pointer;
-    font-size: 0.84vw;
-    width: 6vw;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1;
-}
-.header_link .header_link_itme:hover{
-    color: #FF5B00;
-    transform: scale(1.1);
-}
-.header_link_itme:nth-child(1):hover ~ .nav_link {
-    left: 0vw !important;
-}
-.header_link_itme:nth-child(2):hover ~ .nav_link {
-    left: 6vw !important;
-}
-.header_link_itme:nth-child(3):hover ~ .nav_link {
-    left: 12vw !important;
-}
-.header_link_itme:nth-child(4):hover ~ .nav_link {
-    left: 18vw !important;
-}
-.header_link_itme:nth-child(5):hover ~ .nav_link {
-    left: 24vw !important;
-}
-.header_link_itme:nth-child(6):hover ~ .nav_link {
-    left: 30vw !important;
-}
-.header_link_itme:nth-child(7):hover ~ .nav_link {
-    left: 36vw !important;
-}
-.header_link_itme:nth-child(8):hover ~ .nav_link {
-    left: 49vw !important;
-}
-.isActiveLink {
-    color: #FF5B00;
-    transform: scale(1.1);
-}
-.login_header_container .iphone {
-    width: 12vw;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 5%;
-}
-.login_header_container .iphone div:nth-child(1){
-    width: 1.875vw;
-    height: 1.875vw;
-    background: url(/img/supplier-login/iPhone.png) no-repeat;
-    background-size: contain;
-    background-position: center;
-}
-.login_header_container .iphone div:nth-child(2) {
-    color: #FF5B00;
-    font-size: 1vw;
-    margin-left: 0.26vw;
-    font-weight: bold;
-    white-space: nowrap;
-}
-.login_header_container .login_regist {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 8vw;
-    height: 100%;
-}
-.login_header_container .login_regist div {
-    cursor: pointer;
-}
-.login_header_container .login_regist div:nth-child(1):hover {
-    border: 1px solid #FF5B00;
-}
-.login_header_container .login_regist div:nth-child(1):hover a {
-    color: #FF5B00;
-}
-.login_header_container .login_regist div:nth-child(2) {
-    border: none;
-}
-.login_header_container .login_regist .login_btn{
-    width: 40%;
-    font-size: 0.7vw;
-    border: 1px solid #ccc;
-    text-align: center;
-    padding: 0.2vw;
-}
-#login_content {
-    position: relative;
-    width: 100vw;
-}
-#fullpage {
-    width: 100vw;
-    scroll-behavior: smooth;
-    transition: all 0.8s ease;
-}
-#fullpage .page {
-    width: 100vw;
-    scroll-snap-align: start;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
-    padding-bottom: 4vw;
-}
-.page #positionTab {
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-#fullpage #zeroPage {
-    height: auto;
-    padding-top: 7vh;
-}
-#zeroPage .el-carousel__container {
-    height: 26.562vw;
-}
-#zeroPage .el-carousel__container .el-icon-arrow-right::before {
-    content: "\276D";
-}
-#zeroPage .el-carousel__container .el-icon-arrow-left::before {
-    content: "\276C";
-}
-.el-carousel__item:nth-child(1) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-#zeroPage .banner01 {
-    width: 100%;
-    height: 100%;
-}
-#zeroPage .banner01 .left {
-    height: 155px;
-    width: 640px;
-    background: url(/img/supplier-login/01-banner/banner-02-left.png) no-repeat;
-    background-size: contain;
-    background-position: right;
-}
-#zeroPage .banner01 .right {
-    height: 377px;
-    width: 459px;
-    background: url(/img/supplier-login/01-banner/banner-01-right.png) no-repeat;
-    background-size: contain;
-}
-#zeroPage .banner02 {
-    background: url("/img/supplier-login/banner-2/banner-02.png") no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-position: center;
-}
-#zeroPage .banner02 .left {
-    height: 45%;
-    width: 50%;
-    background: url(/img/supplier-login/banner-2/banner-02-left.png) no-repeat;
-    background-size: contain;
-    background-position: right;
-}
-#zeroPage .banner02 .right {
-    height: 70%;
-    width: 40%;
-    background: url(/img/supplier-login/banner-2/banner-02-right.png) no-repeat;
-    background-size: contain;
-}
-.el-carousel__item:nth-child(2) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: url("/img/supplier-login/01-banner/banner-01.png");
-}
-.el-carousel__indicator--horizontal .el-carousel__button {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: #ccc;
-    opacity: 1;
-}
-.el-carousel__indicator--horizontal.is-active .el-carousel__button{
-    width: 6px;
-    height: 6px;
-    background: #FF5B00;
-    border-radius: 50%;
-    opacity: 1;
-}
-.footTop {
-    margin-top: 0 !important;
-}
-#zeroPage {
-    background-color: #fff;
-}
-#zeroPage .server {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100vw;
-    margin-top: 4vw;
-    box-sizing: border-box;
-}
-.server .server_1,
-.server .server_2,
-.server .server_3 {
-    height: 23.958vw;
-    width: 20.312vw;
-    position: relative;
-}
-#zeroPage .server .box {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-    -webkit-transition: ease-in-out 600ms;
-    -o-transition: ease-in-out 600ms;
-    transition: .5s;
-}
-#zeroPage .server .tourist_bg,
-#zeroPage .server .sale_bg,
-#zeroPage .server .operate_bg {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    font-size: 0.938vw;
-    padding: 3.125vw;
-    box-sizing: border-box;
-}
-#zeroPage .server .operate,
-#zeroPage .server .tourist,
-#zeroPage .server .sale {
-    width: 20.833vw;
-    height: 100%;
-    transition: .5s;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    font-size: 0.938vw;
-    padding: 1.562vw;
-    box-sizing: border-box;
-    background: linear-gradient(0deg, #FF5B00, #FF9300);
-    -webkit-transform: rotateY(-180deg);
-    transform: rotateY(-180deg);
-    color: #fff;
-    white-space: nowrap;
-}
-#zeroPage .server .tourist_logo {
-    width: 5.208vw;
-    height: 5.208vw;
-    background: url("/img/supplier-login/cycle/-11.png") no-repeat;
-    background-size: cover;
-}
-#zeroPage .server .tourist_bg_logo {
-    background: url("/img/supplier-login/cycle/1.png") no-repeat;
-    width: 8.333vw;
-    height: 8.333vw;
-    background-size: cover;
-}
-#zeroPage .server .tourist_bg_title {
-    color: black;
-}
-#zeroPage .server .tourist_title {
-    color: #fff;
-}
-#zeroPage .server .server_1:hover .tourist_bg{
-    -webkit-transform: rotateY(180deg) !important;
-    transform: rotateY(180deg) !important;
-}
-#zeroPage .server .server_1:hover .tourist {
-    -webkit-transform: rotateY(0deg) !important;
-    transform: rotateY(0deg) !important;
-}
-#zeroPage .server .server_2:hover .operate_bg{
-    -webkit-transform: rotateY(180deg) !important;
-    transform: rotateY(180deg) !important;
-}
-#zeroPage .server .server_2:hover .operate {
-    -webkit-transform: rotateY(0deg) !important;
-    transform: rotateY(0deg) !important;
-}
-#zeroPage .server .server_3:hover .sale_bg{
-    -webkit-transform: rotateY(180deg) !important;
-    transform: rotateY(180deg) !important;
-}
-#zeroPage .server .server_3:hover .sale {
-    -webkit-transform: rotateY(0deg) !important;
-    transform: rotateY(0deg) !important;
-}
-#zeroPage .server .operate_logo {
-    background: url("/img/supplier-login/cycle/-22.png") no-repeat;
-    width: 5.208vw;
-    height: 5.208vw;
-    background-size: cover;
-}
-#zeroPage .server .operate_bg_logo {
-    background: url("/img/supplier-login/cycle/2.png") no-repeat;
-    width: 8.333vw;
-    height: 8.333vw;
-    background-size: cover;
-}
-#zeroPage .server .operate_bg_title {
-    color: black;
-}
-#zeroPage .server .all_cont {
-    font-size: 0.833vw;
-    box-sizing: border-box;
-    text-align: center;
-}
-#zeroPage .server .sale_logo {
-    background: url("/img/supplier-login/cycle/-33.png") no-repeat;
-    width: 5.208vw;
-    height: 5.208vw;
-    background-size: cover;
-}
-#zeroPage .server .sale_bg_logo {
-    background: url("/img/supplier-login/cycle/3.png") no-repeat;
-    width: 8.333vw;
-    height: 8.333vw;
-    background-size: cover;
-}
-#zeroPage .server .sale_bg_title {
-    color: black;
-}
-#firstPage {
-    background: url("/img/supplier-login/selection/select_bg.png") no-repeat;
-    background-size: cover;
-}
-#firstPage .selection {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 2vw;
-}
-#firstPage .selection .selection_item{
-    padding-top: 2vw;
-    box-sizing: border-box;
-    transition: .3s;
-    height: 34.688vw;
-}
-#firstPage .selection .selection_item:hover {
-    padding-top: 0;
-}
-#firstPage .selection .selection_item:hover .select_btn {
-    background-color: #FF5B00;
-    color: white;
-}
-#firstPage .selection .selection_item:nth-child(2){
-    margin: 2vh;
-}
-#firstPage .selection_item .selection_item_contain {
-    width: 20.417vw;
-    height: 33.646vw;
-    background-color: #fff;
-}
-#firstPage .selection_item .selection_item_contain .contain_bg_01 {
-    width: 100%;
-    height: 6.250vw;
-    background: url("/img/supplier-login/selection/select_01.png") no-repeat;
-    background-size: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #FFFFFF;
-    font-weight: bold;
-    font-size: 2.083vw;
-}
-#firstPage .selection_item .selection_item_contain .contain_bg_02 {
-    width: 100%;
-    height: 6.250vw;
-    background: url("/img/supplier-login/selection/select_02.png") no-repeat;
-    background-size: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #FFFFFF;
-    font-weight: bold;
-    font-size: 2.083vw;
-}
-#firstPage .selection_item .selection_item_contain .contain_bg_03 {
-    width: 100%;
-    height: 6.250vw;
-    background: url("/img/supplier-login/selection/select_03.png") no-repeat;
-    background-size: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #FFFFFF;
-    font-weight: bold;
-    font-size: 2.083vw;
-}
-#firstPage .selection_item_contain .bg1_text {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 0.938vw;
-    padding: 2.5vw;
-    box-sizing: border-box;
-    height: 27.396vw;
-}
-.bg1_contain {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    font-size: 0.8vw;
-    height: 3.5vh;
-    white-space: nowrap;
-}
-.square_icon {
-    width: 0.2vw;
-    height: 0.2vw;
-    border: 1px solid #B2B2B2;
-    margin: 0 0.5vw;
-    transform: rotate(45deg);
-}
-.text_contain {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 14.385vw;
-}
-.select_btn {
-    width: 100%;
-    height: 3vw;
-    border: 1px solid #E2E2E2;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    cursor: pointer;
-}
-.Title {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    flex-direction: column;
-    width: 100%;
-    height: 7vw;
-    margin-top: 3vw;
-}
-.Title .text {
-    font-size: 1.8vw;
-}
-.Title .title {
-    font-size: 0.9vw;
-}
-#secondPage .operationa{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 3vw;
-}
-#secondPage .operationa_contain {
-    width: 48.958vw;
-    height: 29.688vw;
-    position: relative;
-}
-#secondPage .operationa_contain .bg2{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: url("/img/supplier-login/oprate/bg_1.png") no-repeat;
-    background-size: cover;
-}
-#secondPage .operationa_contain .bg3{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: url("/img/supplier-login/oprate/author/bg_2.png") no-repeat;
-    background-size: cover;
-}
-#secondPage .operationa_contain .bg1 {
-    position: absolute;
-    left: 0;
-    top: 0.521vw;
-    width: 97.8%;
-    height: 90%;
-    background: url(/img/supplier-login/oprate/bg_2.png) no-repeat;
-    background-size: contain;
-    background-position: right;
-}
-#secondPage .operationa_contain .bg4 {
-    left: 0.312vw;
-    top: 0.729vw;
-    width: 70%;
-    height: 100%;
-    background: url(/img/supplier-login/oprate/bg_1.png) no-repeat;
-    background-size: contain;
-    position: absolute;
-    z-index: -1;
-}
-.operationa_contain .online_store {
-    width: 20.833vw;
-    height: 3.646vw;
-    position: absolute;
-    display: flex;
-    align-items: center;
-    left: 3.906vw;
-    top: 2.344vw;
-    border-bottom: 2px solid #FFCEAF;
-}
-.operationa_contain .online_store .online_logo {
-    width: 3.229vw;
-    height: 100%;
-    border-bottom: 6px solid #FFC39A;
-    border-radius: 4px;
-    background: url(/img/supplier-login/oprate/house.png) no-repeat;
-    background-size: contain;
-    background-position: top;
-}
-.online_title {
-    font-size: 1.458vw;
-    font-weight: bold;
-    margin-left: 1.042vw;
-}
-.operationa_contain .author_active {
-    width: 20.833vw;
-    height: 3.646vw;
-    position: absolute;
-    display: flex;
-    align-items: center;
-    right: 3.906vw;
-    top: 2.344vw;
-    border-bottom: 2px solid #FFCEAF;
-    flex-direction: row-reverse;
-}
-.operationa_contain .author_active .online_logo {
-    width: 3.229vw;
-    height: 100%;
-    border-bottom: 6px solid #FFC39A;
-    border-radius: 4px;
-    background: url(/img/supplier-login/oprate/z.png) no-repeat;
-    background-size: contain;
-    background-position: top;
-}
-.operationa_contain .online {
-    width: 19.948vw;
-    height: 2.76vw;
-    position: absolute;
-    display: flex;
-    align-items: center;
-    left: 2.917vw;
-    top: 1.927vw;
-}
-.operationa_contain .online .online_logo{
-    width: 3.229vw;
-    height: 100%;
-    border-radius: 4px;
-    background: url(/img/supplier-login/oprate/house.png) no-repeat;
-    background-size: contain;
-    background-position: top;
-}
-.operationa_contain .author {
-    width: 11.562vw;
-    height: 3.385vw;
-    position: absolute;
-    display: flex;
-    align-items: center;
-    right: 2.084vw;
-    top: 1.042vw;
-}
-.operationa_contain .author .author_logo {
-    height: 3.385vw;
-    width: 3.385vw;
-    background: url(/img/supplier-login/oprate/z.png) no-repeat;
-    background-size: contain;
-}
-.operationa_contain .author .author_title {
-    font-size: 1.458vw;
-    color: #FFFFFF;
-}
-.operationa_contain .contain {
-    width: 35.938vw;
-    height: 20.833vw;
-    position: absolute;
-    left: 6.25vw;
-    top: 6.927vw;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: column;
-}
-.operationa_contain .contain .contain_logo {
-    width: 100%;
-    height: 7.812vw;
-    background: url(/img/supplier-login/oprate/title.png) no-repeat;
-    background-size: contain;
-    background-position: center;
-}
-.operationa_contain .contain .contain_list {
-    width: 100%;
-    height: 10.417vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.operationa_contain .contain .contain_list .list_item {
-    width: 10.417vw;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    border: 2px solid white;
-    justify-content: space-around;
-    align-items: center;
-    background: #FDF0E9;
-    box-shadow: 0px 6px 50px 0px rgba(255, 91, 0, 0.24);
-    border-radius: 0.833vw;
-    padding: 1.042vw;
-    box-sizing: border-box;
-}
-.operationa_contain .contain .contain_list .list_item:nth-child(2){
-    margin: 0 1%;
-}
-.operationa_contain .contain .contain_list .list_item:nth-child(1) div:nth-child(1) {
-    width: 4.167vw;
-    height: 2.604vw;
-    background: url(/img/supplier-login/oprate/p.png) no-repeat;
-    background-size: contain;
-    background-position: center;
-}
-.operationa_contain .contain .contain_list .list_item:nth-child(2) div:nth-child(1) {
-    width: 4.167vw;
-    height: 2.604vw;
-    background: url(/img/supplier-login/oprate/l.png) no-repeat;
-    background-size: contain;
-    background-position: center;
-}
-.operationa_contain .contain .contain_list .list_item:nth-child(3) div:nth-child(1) {
-    width: 4.167vw;
-    height: 2.604vw;
-    background: url(/img/supplier-login/oprate/s.png) no-repeat;
-    background-size: contain;
-    background-position: center;
-}
-.operationa_contain .athor_contain {
-    width: 35.938vw;
-    height: 20.833vw;
-    position: absolute;
-    left: 6.25vw;
-    top: 6.927vw;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: column;
-}
-.operationa_contain .athor_contain .athor_contain_logo {
-    width: 100%;
-    height: 7.812vw;
-    background: url(/img/supplier-login/oprate/author/logo.png) no-repeat;
-    background-size: contain;
-    background-position: center;
-}
-.operationa_contain .athor_contain .athor_contain_list {
-    width: 100%;
-    height: 10.417vw;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column;
-}
-.athor_contain_list .list_item {
-    width: 97%;
-    border: 1px solid #FFC9A9;
-    border-radius: 2.604vw;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 27%;
-}
-.athor_contain_list .list_item:nth-child(1) .list_item_logo  {
-    background: url(/img/supplier-login/oprate/author/02.png) no-repeat;
-    background-size: contain;
-    background-position: center;
-    width: 2.188vw;
-    height: 2.604vw;
-    position: absolute;
-    left: 0.521vw;
-    top: 50%;
-    transform: translate(0, -50%);
-}
-.athor_contain_list .list_item:nth-child(2) .list_item_logo  {
-    background: url(/img/supplier-login/oprate/author/03.png) no-repeat;
-    background-size: contain;
-    background-position: center;
-    width: 2.188vw;
-    height: 2.604vw;
-    position: absolute;
-    left: 0.521vw;
-    top: 50%;
-    transform: translate(0, -50%);
-}
-.athor_contain_list .list_item:nth-child(3) .list_item_logo  {
-    background: url(/img/supplier-login/oprate/author/04.png) no-repeat;
-    background-size: contain;
-    background-position: center;
-    width: 2.188vw;
-    height: 2.604vw;
-    position: absolute;
-    left: 0.521vw;
-    top: 50%;
-    transform: translate(0, -50%);
-}
-
-.athor_contain_list .list_item .text_contain{
-    width: 80%;
-    height: 100%;
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: row;
-    color: #FFC9A9;
-}
-.athor_contain_list .list_item .text_contain .text_contain_item {
-    font-size: 0.833vw;
-    font-weight: bold;
-}
-.athor_contain_list .list_item .text_contain .text_contain_item2 {
-    width: 1px;
-    height: 1.042vw;
-    background: #ffe2d3;
-    margin: 0 0.521vw;
-}
-.athor_contain_list .list_item .text_contain .text_contain_item3 {
-    font-size: 0.833vw;
-}
-#thirdPage {
-    background: #fff;
-}
-.pageInner {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    margin-top: 10vw;
-}
-.pageInner .container {
-    width: 62.5vw;
-    height: 20vw;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-}
-.pageInner .thirdPage_container_contant {
-    position: absolute;
-    width: 100%;
-    height: 5vw;
-    left: 0;
-    top: -6vw;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.pageInner .thirdPage_container_contant .container_title {
-    width: 33%;
-    height: 100%;
-    border-bottom: 1px solid #FF5B00;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    font-weight: bold;
-    font-size: 1.5vw;
-    color: #FF5B00;
-    opacity: 0;
-}
-.pageInner .container .container_item {
-    height: 100%;
-    width: 18%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-}
-.container_item .container_item_active .container_item_hover {
-    width: 100%;
-    height: 50%;
-    display: flex;
-    position: absolute;
-    flex-direction: column;
-    font-size: 0.8vw;
-    color: #202020;
-    transition: .3s;
-    justify-content: space-around;
-    align-items: center;
-    padding: 1vw 0;
-    box-sizing: border-box;
-}
-.container_item .container_item_active .container_item_hover2 {
-    width: 100%;
-    height: 50%;
-    display: flex;
-    position: absolute;
-    flex-direction: column;
-    font-size: 0.8vw;
-    color: #202020;
-    transition: .3s;
-    justify-content: space-around;
-    align-items: center;
-    padding: 1vw 0;
-    box-sizing: border-box;
-    bottom: 0;
-}
-.container_item .container_item_active .item_title {
-    display: none;
-    font-size: 1.5vw;
-    color: #FF5B00;
-    font-weight: bold;
-    width: 80%;
-}
-.container_item .container_item_active .item_contant {
-    display: none;
-    color: #666666;
-    font-size: 0.938vw;
-    width: 80%;
-}
-.container_item .container_item_active .item_logo {
-    width: 4vw;
-    height: 4vw;
-}
-.container_item .container_item_active .item_logo_box {
-    width: 80%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-#item_logo_1 {
-    background: url(/img/supplier-login/05-page/信.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_2 {
-    background: url(/img/supplier-login/05-page/矩.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_3 {
-    background: url(/img/supplier-login/05-page/正.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_4 {
-    background: url(/img/supplier-login/05-page/SEO.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_5 {
-    background: url(/img/supplier-login/05-page/CRM.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_6 {
-    background: url(/img/supplier-login/05-page/认.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_7 {
-    background: url(/img/supplier-login/05-page/美.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_8 {
-    background: url(/img/supplier-login/05-page/私.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_9 {
-    background: url(/img/supplier-login/05-page/分.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_10 {
-    background: url(/img/supplier-login/05-page/会.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_11 {
-    background: url(/img/supplier-login/05-page/金.png) center no-repeat;
-    background-size: contain;
-}
-#item_logo_12 {
-    background: url(/img/supplier-login/05-page/交.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active {
-    height: 50%;
-    width: 100%;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_1 {
-    background: url(/img/supplier-login/05-page/slide/01.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_2 {
-    background: url(/img/supplier-login/05-page/slide/02.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_3 {
-    background: url(/img/supplier-login/05-page/slide/03.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_4 {
-    background: url(/img/supplier-login/05-page/slide/04.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_5 {
-    background: url(/img/supplier-login/05-page/slide/05.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_6 {
-    background: url(/img/supplier-login/05-page/slide/06.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_7 {
-    background: url(/img/supplier-login/05-page/slide/07.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_8 {
-    background: url(/img/supplier-login/05-page/slide/08.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_9 {
-    background: url(/img/supplier-login/05-page/slide/09.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_10 {
-    background: url(/img/supplier-login/05-page/slide/10.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_11 {
-    background: url(/img/supplier-login/05-page/slide/11.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover #item_logo_12 {
-    background: url(/img/supplier-login/05-page/slide/12.png) center no-repeat;
-    background-size: contain;
-}
-#thirdPage .container_item .container_item_active:hover .container_item_hover {
-    background: #F7F7F7 !important;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 111;
-}
-#thirdPage .container_item .container_item_active:hover .container_item_hover2 {
-    background: #F7F7F7 !important;
-    height: 100%;
-    left: 0;
-    z-index: 111;
-}
-#thirdPage .container_item .container_item_active:hover .item_logo_box {
-    justify-content: end;
-}
-#thirdPage .container_item .container_item_active:hover .item_logo {
-    width: 5.2vw;
-    height: 5.2vw;
-}
-#thirdPage .container_item .container_item_active:hover .item_title {
-    display: block !important;
-}
-#thirdPage .container_item .container_item_active:hover .item_title_p {
-    display: none !important;
-}
-#thirdPage .container_item .container_item_active:hover .item_contant {
-    display: block !important;
-}
-#thirdPage .container_item .container_item_active:hover .container_title:nth-child(1){
-    display: flex !important;
-}
-#fourPage .pageInner_contain {
-    width: 80%;
-    height: 30vw;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-#fourPage .pageInner_contain .nextChange {
-    width: 40px;
-    height: 48px;
-    border: 1px solid #E2E2E2;
-    border-radius: 2px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #E2E2E2;
-    cursor: pointer;
-}
-#fourPage .pageInner_contain .nextChange:hover{
-    border: 1px solid #FF5B00;
-    color: #FF5B00;
-}
-#fourPage .pageInner_contain .isActiveNext{
-    border: 1px solid #FF5B00;
-    color: #FF5B00;
-}
-#fourPage .el-carousel--horizontal {
-    width: 90%;
-}
-#fourPage .el-carousel__arrow{
-    display: none;
-}
-#fourPage .el-carousel__item {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    box-sizing: border-box;
-}
-#fourPage .el-carousel__item .four_logo_1 {
-    width: 50%;
-    height: 80%;
-}
-#fourPage .el-carousel__item .logo_text {
-    width: 45%;
-    height: 80%;
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-    overflow: hidden;
-}
-#fourPage .el-carousel__item .logo_text .logo_title {
-    font-size: 1.25vw;
-    color: black;
-    font-weight: bold;
-    margin-bottom: 2vw;
-}
-#fourPage .el-carousel__item .logo_text .analysis {
-    font-size: 0.9vw;
-    line-height: 2vw;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 9;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-#fivePage {
-    background: url(/img/supplier-login/07-caimei/bg.png) no-repeat;
-    background-size: 100% 100%;
-}
-#fivePage .inner_contain {
-    width: 100%;
-    margin-top: 4vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-#fivePage .inner_contain .inner {
-    width: 64%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column;
-}
-#fivePage .inner_contain .inner .caimei_introduction {
-    color: white;
-    font-size: 0.938vw;
-    width: 62.5vw;
-    height: auto;
-    padding: 2vw;
-    background-color: rgba(255,255,255, 0.2);
-    box-sizing: border-box;
-    line-height: 2.083vw;
-    margin-bottom: 5vw;
-}
-#fivePage .inner_contain .inner .caimei_report {
-    width: 90%;
-    height: 55%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
-.caimei_report .report_item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: column;
-    height: 100%;
-    width: 20%;
-}
-.caimei_report .report_item .report_logo {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.6vw;
-    width: 12vw;
-    height: 9vw;
-    background: url(/img/supplier-login/07-caimei/cirle.png) no-repeat center;
-    background-size: contain;
-    font-weight: bold;
-    color: white;
-}
-.caimei_report .report_item .report_title {
-    font-size: 0.8vw;
-    color: #fff;
-}
-.caimei_report .report_item .report_line{
-    display: flex;
-    flex-direction: column;
-    justify-content: end;
-    align-items: center;
-}
-.caimei_report .report_item .report_line .box1 {
-    padding: 0.52vw 1px;
-    height: 5.2vw;
-}
-.caimei_report .report_item .report_line .card4 {
-    background-image: linear-gradient(#fff 35%, rgba(255,255,255,0) 0%);
-    background-position: left;
-    background-size: 1px 10px;
-    background-repeat: repeat-y;
-}
-.caimei_report .report_item .report_line .container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-}
-.caimei_report .report_item .report_line .container .box {
-    width: 20px;
-    height: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.caimei_report .report_item .report_line .container .box span {
-    position: absolute;
-    box-sizing: border-box;
-    border: none;
-    background: #FFFFFF;
-    border-radius: 50%;
-    animation: animate 1s linear infinite;
-    animation-delay: calc(0.5s * var(--i))
-}
-#sixPage {
-    height: auto !important;
-}
-#sixPage .contant_init {
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    background: #fff;
-}
-#sixPage .community {
-    width: 62.5vw;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 2vw;
-    flex-direction: column;
-}
-.contant_init {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.community .community_video{
-    width: 100%;
-    height: 45%;
-    font-size: 1vw;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-}
-.community .community_article {
-    width: 100%;
-    height: 45%;
-    font-size: 1vw;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-}
-.community_title {
-    padding: 1% 0;
-    font-size: 1vw;
-}
-.community .community_list {
-    width: 62.5vw;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    align-items: center;
-    overflow: hidden;
-    grid-row-gap: 0.521vw;
-}
-.community_list .video_list_item {
-    width: 14.583vw;
-    height: 13.542vw;
-    box-sizing: border-box;
-    padding-top: 5px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    transition: .2s;
-    cursor: pointer;
-}
-.community_list .article_list_item {
-    width: 14.583vw;
-    height: 13.542vw;
-    box-sizing: border-box;
-    padding-top: 5px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    transition: .2s;
-    cursor: pointer;
-}
-.article_list_item .article_list_item_content {
-    height: 100%;
-    width: 100%;
-    border: 1px solid #EAEAEA;
-    box-sizing: border-box;
-    color: #202020;
-}
-.video_list_item .video_list_item_content {
-    height: 100%;
-    width: 100%;
-    border: 1px solid #EAEAEA;
-    box-sizing: border-box;
-    color: #202020;
-    position: relative;
-}
-.video_list_item .video_list_item_content .player_bg {
-    position: absolute;
-    width: 100%;
-    height: 60%;
-    box-sizing: border-box;
-    left: 0;
-    top: 0;
-    background: rgba(24, 23, 23, 0.4);
-    display: none;
-    justify-content: center;
-    align-items: center;
-    transition: .2s;
-    z-index: 11;
-}
-.video_list_item_content .video_player {
-    width: 100%;
-    height: 60%;
-    box-sizing: border-box;
-    overflow: hidden;
-}
-.article_list_item_content .article_bg {
-    width: 100%;
-    height: 60%;
-    box-sizing: border-box;
-    overflow: hidden;
-}
-.video_list_item_content .video_title {
-    width: 100%;
-    height: 5.208vw;
-    box-sizing: border-box;
-    font-size: 0.938vw;
-    align-items: center;
-    padding: 1.042vw;
-    line-height: 1.979vw;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-.article_list_item_content .article_text {
-    width: 100%;
-    height: 40%;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: column;
-    font-size: 0.7vw;
-    color: #808080;
-}
-.article_list_item_content .text_title {
-    color: #202020;
-    font-size: 1vw;
-    width: 100%;
-    box-sizing: border-box;
-    border-left: 3px solid #FF5B00;
-    padding: 0 4%;
-}
-.video_list_item:hover {
-    padding: 0 0 5px 0;
-}
-.video_list_item:hover .video_list_item_content {
-    box-shadow: 0px 6px 35px 0px rgba(255,157,102,0.12);
-    color: #FF5B00;
-}
-.video_list_item:hover .player_bg {
-    display: flex;
-}
-.article_list_item:hover {
-    padding: 0 0 5px 0;
-}
-.article_list_item:hover .article_list_item_content {
-    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
-    color: #FF5B00 !important;
-}
-.article_list_item:hover .text_title {
-    color: #FF5B00 !important;
-}
-@keyframes animate {
-    0% {
-        width: 0;
-        height: 0;
-    }
-
-    50% {
-        opacity: 1;
-    }
-
-    100% {
-        width: 50px;
-        height: 50px;
-        opacity: 0;
-    }
-}
-.cm_video_player {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(24, 23, 23, 0.5);
-    display: none;
-    z-index: 999;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-#seven {
-    height: auto !important;
-}
-.videoClose {
-    width: 40px;
-    height: 40px;
-    cursor: pointer;
-    margin-bottom: -20px;
-    margin-right: -20px;
-    z-index: 1;
-}
-.community_content {
-    padding: 0 4%;
-    width: 100%;
-    height: 2.083vw;
-    overflow: hidden;
-    white-space: normal;
-    font-size: 0.729vw;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    box-sizing: border-box;
-}
-.close {
-    width: 60%;
-    display: flex;
-    justify-content: flex-end;
-}
-.sulotionBtn {
-    width: 260px;
-}
-.solutionDiag .solutioncontent .title_1 {
-    color: #272727;
-    font-size: 24px;
-    text-align: center;
-    margin-bottom: 24px;
-    font-weight: Bold;
-}
-.solutionDiag .solutioncontent .title_2 {
-    text-align: center;
-    color: #4A4F58;
-    font-size: 16px;
-    margin-bottom: 48px;
-    white-space: nowrap;
-}
-.solutionDiag .solutioncontent {
-    padding: 40px 70px 20px 70px;
-    background: url("https://static.caimei365.com/app/img/icon/supplier-pc.png") no-repeat;
-}
-.solutionDiag .solutioncontent .el-select {
-    width: 100%;
-}
-.solutionDiag .el-dialog__header {
-    padding: 0 !important;
-}
-.solutionDiag .el-dialog__body {
-    padding: 0 !important;
-}
-.solutionDiag .el-dialog__close::before {
-    content: "\2716";
-}
-.solutionDiag .el-icon-arrow-up:before {
-    content: url(/img/supplier-login/arrow-down.png);
-}
-.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
-    display: none !important;
-}
-.el-select-dropdown.is-multiple .el-select-dropdown__item {
-    padding-left: 40px;
-}
-.el-select-dropdown.is-multiple .el-select-dropdown__item::before {
-    position: absolute;
-    top: 4px;
-    left: 10px;
-    transform: translateY(0);
-    font-family: element-icons;
-    content: "";
-    font-size: 12px;
-    font-weight: 700;
-    -webkit-font-smoothing: antialiased;
-    width: 14px;
-    height: 14px;
-    border: 1px solid #E2E2E2;
-}
-.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::before {
-    transform: translateY(0) scale(1.5);
-    background: url("https://static.caimei365.com/app/img/icon/icon-checked.png") center no-repeat;
-    background-size: contain;
-    border: none;
-}
-.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
-    color: #FF5B00;
-}
-.el-select-dropdown__item {
-    height: auto !important;
-    white-space: normal !important;
-    line-height: 24px !important;
-}
-.el-select-dropdown.is-multiple .el-select-dropdown__item {
-    padding-right: 0 !important;
-}
-.select_contian {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px;
-}
-.select_contian .select_contian_btn {
-    width: 88px;
-    background: #FF5B00;
-    color: white;
-}
+html {
+    /*scroll-behavior: smooth;*/
+    scroll-padding-top: 7vh;
+}
+body{
+    width: 100vw;
+    height: 100vh;
+}
+#scrollTop {
+    display: none !important;
+}
+[v-cloak] {
+    opacity: 0;
+}
+.text_info {
+    width: 100vw;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-y: scroll;
+}
+.text_info .text_info_contain {
+    height: auto;
+    padding: 10vh 24vw;
+    box-sizing: border-box;
+    width: 100%;
+    background: #fff;
+}
+.text_info .text_info_contain p {
+    font-size: 16px;
+    line-height: 30px;
+    color: #777;
+}
+.username {
+    color: #FF5B00;
+    position: relative;
+    cursor: pointer;
+    box-sizing: border-box;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.username::after {
+    content: '\276F';
+    font-weight: normal;
+    position: absolute;
+    right: -14px;
+    top: 0;
+    transform: rotate(90deg);
+    transition: .3s;
+}
+.username:hover {
+    border-bottom: 1px solid;
+}
+.username:hover::after{
+    transform: rotate(270deg);
+}
+.username .el-popover__reference-wrapper .el-button--text {
+    color: #FF5B00;
+}
+.el-popover {
+    padding: 5px !important;
+    min-width: 90px !important;
+}
+.el-popover .cShow {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.el-popover .cShow .a_cm {
+    color: #333;
+}
+.el-popover__reference{
+    font-size: 0.8vw;
+}
+.a_cm {
+    padding: 10px;
+}
+.login_a:hover {
+    color: white;
+}
+.slide_icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position: fixed;
+    right: 1vw;
+    bottom: 90px;
+    background: #FF5B00;
+    border-radius: 4px;
+    padding: 4px;
+    height: auto;
+    z-index: 999;
+}
+.slide_icon .slide_icon_item {
+    width: 100%;
+    height: 65px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    color: #FFFFFF;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 0.4vw 0;
+    box-sizing: border-box;
+}
+.slide_icon_item:nth-child(1){
+    background: url(/img/supplier-login/float/d.png) center no-repeat;
+    background-position: top;
+}
+.slide_icon_item:nth-child(3){
+    background: url(/img/supplier-login/float/z.png) center no-repeat;
+}
+.slide_icon_item:nth-child(2){
+    border-top: 1px solid rgb(255,255,255, 0.3);
+    border-bottom: 1px solid rgb(255,255,255, 0.3);
+    background: url(/img/supplier-login/float/w.png) center no-repeat;
+    background-position: top;
+}
+.tooltip {
+    background: #FFFFFF;
+    box-shadow: 0px 4px 16px 0px rgba(51,51,51,0.12);
+    border-radius: 4px;
+    z-index: 999;
+    position: fixed;
+    transition: .3s;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    right: 90px;
+}
+
+.slide_icon .slide_icon_item .tooltip_1{
+    width: 170px;
+    height: 64px;
+    padding: 10px;
+    text-align: center;
+    display: none;
+    opacity: 0;
+}
+.slide_icon .slide_icon_item .tooltip_1 .day {
+    color: #666666;
+    font-size: 16px;
+}
+.slide_icon .slide_icon_item .tooltip_1 .phone_number {
+    color: #FF5B00;
+    font-size: 20px;
+}
+.slide_icon .slide_icon_item .tooltip_1::after {
+    content: '';
+    height: 0;
+    width: 0;
+    border: 10px solid transparent;
+    border-left: 15px solid white;
+    display: block;
+    position: absolute;
+    right: -20px;
+    bottom: 0;
+}
+.slide_icon .slide_icon_item .tooltip_2::after {
+    content: '';
+    height: 0;
+    width: 0;
+    border: 10px solid transparent;
+    border-left: 15px solid white;
+    display: block;
+    position: absolute;
+    right: -20px;
+    top: 0;
+    z-index: -1;
+}
+.slide_icon .slide_icon_item .tooltip_2{
+    width: 150px;
+    height: 150px;
+    display: none;
+    opacity: 0;
+}
+.slide_icon .slide_icon_phone:hover .tooltip_1 {
+    opacity: 1;
+    display: flex;
+}
+.slide_icon .slide_icon_qrcode:hover .tooltip_2 {
+    opacity: 1;
+    display: flex;
+}
+.slide_icon_item .slide_icon_phone .slide_icon_text {
+    color:#666666;
+}
+.slide_icon .slide_icon_item .slide_icon_phone .slid_phonenumber {
+    font-size: 1vw;
+    color: #FF5B00;
+}
+.login_header{
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    height: 7vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #fff;
+    z-index: 999;
+}
+.login_header_container{
+    width: 95vw;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.img_logo {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+.img_logo .logo {
+    width: 5.5vw;
+    height: 2.5vw;
+    background: url("/img/supplier-login/logo.png") no-repeat;
+    background-size: 100% 100%;
+}
+.text {
+    font-size: 1.2vw;
+    font-weight: 400;
+    color: #272727;
+    margin-left: 10px;
+}
+.header_link{
+    align-items: center;
+    position: relative;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+}
+.header_link .nav_link {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    width: 6vw;
+    height: 100%;
+    transition: .3s;
+}
+.header_link .nav_link .nav_link_item{
+    width: 1.2vw;
+    height: 0.2vh;
+    background: #FF5B00;
+    border-radius: 8px;
+    margin-bottom: 1vh;
+}
+.header_link .header_link_itme {
+    cursor: pointer;
+    font-size: 0.84vw;
+    width: 6vw;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+}
+.header_link .header_link_itme:hover{
+    color: #FF5B00;
+    transform: scale(1.1);
+}
+.header_link_itme:nth-child(1):hover ~ .nav_link {
+    left: 0vw !important;
+}
+.header_link_itme:nth-child(2):hover ~ .nav_link {
+    left: 6vw !important;
+}
+.header_link_itme:nth-child(3):hover ~ .nav_link {
+    left: 12vw !important;
+}
+.header_link_itme:nth-child(4):hover ~ .nav_link {
+    left: 18vw !important;
+}
+.header_link_itme:nth-child(5):hover ~ .nav_link {
+    left: 24vw !important;
+}
+.header_link_itme:nth-child(6):hover ~ .nav_link {
+    left: 30vw !important;
+}
+.header_link_itme:nth-child(7):hover ~ .nav_link {
+    left: 36vw !important;
+}
+.header_link_itme:nth-child(8):hover ~ .nav_link {
+    left: 49vw !important;
+}
+.isActiveLink {
+    color: #FF5B00;
+    transform: scale(1.1);
+}
+.login_header_container .iphone {
+    width: 12vw;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5%;
+}
+.login_header_container .iphone div:nth-child(1){
+    width: 1.875vw;
+    height: 1.875vw;
+    background: url(/img/supplier-login/iPhone.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.login_header_container .iphone div:nth-child(2) {
+    color: #FF5B00;
+    font-size: 1vw;
+    margin-left: 0.26vw;
+    font-weight: bold;
+    white-space: nowrap;
+}
+.login_header_container .login_regist {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 8vw;
+    height: 100%;
+}
+.login_header_container .login_regist div {
+    cursor: pointer;
+}
+.login_header_container .login_regist div:nth-child(1):hover {
+    border: 1px solid #FF5B00;
+}
+.login_header_container .login_regist div:nth-child(1):hover a {
+    color: #FF5B00;
+}
+.login_header_container .login_regist div:nth-child(2) {
+    border: none;
+}
+.login_header_container .login_regist .login_btn{
+    width: 40%;
+    font-size: 0.7vw;
+    border: 1px solid #ccc;
+    text-align: center;
+    padding: 0.2vw;
+}
+#login_content {
+    position: relative;
+    width: 100vw;
+}
+#fullpage {
+    width: 100vw;
+    scroll-behavior: smooth;
+    transition: all 0.8s ease;
+}
+#fullpage .page {
+    width: 100vw;
+    scroll-snap-align: start;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    padding-bottom: 4vw;
+}
+.page #positionTab {
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+#fullpage #zeroPage {
+    height: auto;
+    padding-top: 7vh;
+}
+#zeroPage .el-carousel__container {
+    height: 26.562vw;
+}
+#zeroPage .el-carousel__container .el-icon-arrow-right::before {
+    content: "\276D";
+}
+#zeroPage .el-carousel__container .el-icon-arrow-left::before {
+    content: "\276C";
+}
+.el-carousel__item:nth-child(1) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#zeroPage .banner01 {
+    width: 100%;
+    height: 100%;
+}
+#zeroPage .banner01 .left {
+    height: 155px;
+    width: 640px;
+    background: url(/img/supplier-login/01-banner/banner-02-left.png) no-repeat;
+    background-size: contain;
+    background-position: right;
+}
+#zeroPage .banner01 .right {
+    height: 377px;
+    width: 459px;
+    background: url(/img/supplier-login/01-banner/banner-01-right.png) no-repeat;
+    background-size: contain;
+}
+#zeroPage .banner02 {
+    background: url("/img/supplier-login/banner-2/banner-02.png") no-repeat;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-position: center;
+}
+#zeroPage .banner02 .left {
+    height: 45%;
+    width: 50%;
+    background: url(/img/supplier-login/banner-2/banner-02-left.png) no-repeat;
+    background-size: contain;
+    background-position: right;
+}
+#zeroPage .banner02 .right {
+    height: 70%;
+    width: 40%;
+    background: url(/img/supplier-login/banner-2/banner-02-right.png) no-repeat;
+    background-size: contain;
+}
+.el-carousel__item:nth-child(2) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url("/img/supplier-login/01-banner/banner-01.png");
+}
+.el-carousel__indicator--horizontal .el-carousel__button {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #ccc;
+    opacity: 1;
+}
+.el-carousel__indicator--horizontal.is-active .el-carousel__button{
+    width: 6px;
+    height: 6px;
+    background: #FF5B00;
+    border-radius: 50%;
+    opacity: 1;
+}
+.footTop {
+    margin-top: 0 !important;
+}
+#zeroPage {
+    background-color: #fff;
+}
+#zeroPage .server {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    margin-top: 4vw;
+    box-sizing: border-box;
+}
+.server .server_1,
+.server .server_2,
+.server .server_3 {
+    height: 23.958vw;
+    width: 20.312vw;
+    position: relative;
+}
+#zeroPage .server .box {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transition: ease-in-out 600ms;
+    -o-transition: ease-in-out 600ms;
+    transition: .5s;
+}
+#zeroPage .server .tourist_bg,
+#zeroPage .server .sale_bg,
+#zeroPage .server .operate_bg {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 0.938vw;
+    padding: 3.125vw;
+    box-sizing: border-box;
+}
+#zeroPage .server .operate,
+#zeroPage .server .tourist,
+#zeroPage .server .sale {
+    width: 20.833vw;
+    height: 100%;
+    transition: .5s;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 0.938vw;
+    padding: 1.562vw;
+    box-sizing: border-box;
+    background: linear-gradient(0deg, #FF5B00, #FF9300);
+    -webkit-transform: rotateY(-180deg);
+    transform: rotateY(-180deg);
+    color: #fff;
+    white-space: nowrap;
+}
+#zeroPage .server .tourist_logo {
+    width: 5.208vw;
+    height: 5.208vw;
+    background: url("/img/supplier-login/cycle/-11.png") no-repeat;
+    background-size: cover;
+}
+#zeroPage .server .tourist_bg_logo {
+    background: url("/img/supplier-login/cycle/1.png") no-repeat;
+    width: 8.333vw;
+    height: 8.333vw;
+    background-size: cover;
+}
+#zeroPage .server .tourist_bg_title {
+    color: black;
+}
+#zeroPage .server .tourist_title {
+    color: #fff;
+}
+#zeroPage .server .server_1:hover .tourist_bg{
+    -webkit-transform: rotateY(180deg) !important;
+    transform: rotateY(180deg) !important;
+}
+#zeroPage .server .server_1:hover .tourist {
+    -webkit-transform: rotateY(0deg) !important;
+    transform: rotateY(0deg) !important;
+}
+#zeroPage .server .server_2:hover .operate_bg{
+    -webkit-transform: rotateY(180deg) !important;
+    transform: rotateY(180deg) !important;
+}
+#zeroPage .server .server_2:hover .operate {
+    -webkit-transform: rotateY(0deg) !important;
+    transform: rotateY(0deg) !important;
+}
+#zeroPage .server .server_3:hover .sale_bg{
+    -webkit-transform: rotateY(180deg) !important;
+    transform: rotateY(180deg) !important;
+}
+#zeroPage .server .server_3:hover .sale {
+    -webkit-transform: rotateY(0deg) !important;
+    transform: rotateY(0deg) !important;
+}
+#zeroPage .server .operate_logo {
+    background: url("/img/supplier-login/cycle/-22.png") no-repeat;
+    width: 5.208vw;
+    height: 5.208vw;
+    background-size: cover;
+}
+#zeroPage .server .operate_bg_logo {
+    background: url("/img/supplier-login/cycle/2.png") no-repeat;
+    width: 8.333vw;
+    height: 8.333vw;
+    background-size: cover;
+}
+#zeroPage .server .operate_bg_title {
+    color: black;
+}
+#zeroPage .server .all_cont {
+    font-size: 0.833vw;
+    box-sizing: border-box;
+    text-align: center;
+}
+#zeroPage .server .sale_logo {
+    background: url("/img/supplier-login/cycle/-33.png") no-repeat;
+    width: 5.208vw;
+    height: 5.208vw;
+    background-size: cover;
+}
+#zeroPage .server .sale_bg_logo {
+    background: url("/img/supplier-login/cycle/3.png") no-repeat;
+    width: 8.333vw;
+    height: 8.333vw;
+    background-size: cover;
+}
+#zeroPage .server .sale_bg_title {
+    color: black;
+}
+#firstPage {
+    background: url("/img/supplier-login/selection/select_bg.png") no-repeat;
+    background-size: cover;
+}
+#firstPage .selection {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2vw;
+}
+#firstPage .selection .selection_item{
+    padding-top: 2vw;
+    box-sizing: border-box;
+    transition: .3s;
+    height: 34.688vw;
+}
+#firstPage .selection .selection_item:hover {
+    padding-top: 0;
+}
+#firstPage .selection .selection_item:hover .select_btn {
+    background-color: #FF5B00;
+    color: white;
+}
+#firstPage .selection .selection_item:nth-child(2){
+    margin: 2vh;
+}
+#firstPage .selection_item .selection_item_contain {
+    width: 20.417vw;
+    height: 33.646vw;
+    background-color: #fff;
+}
+#firstPage .selection_item .selection_item_contain .contain_bg_01 {
+    width: 100%;
+    height: 6.250vw;
+    background: url("/img/supplier-login/selection/select_01.png") no-repeat;
+    background-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size: 2.083vw;
+}
+#firstPage .selection_item .selection_item_contain .contain_bg_02 {
+    width: 100%;
+    height: 6.250vw;
+    background: url("/img/supplier-login/selection/select_02.png") no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size: 2.083vw;
+}
+#firstPage .selection_item .selection_item_contain .contain_bg_03 {
+    width: 100%;
+    height: 6.250vw;
+    background: url("/img/supplier-login/selection/select_03.png") no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size: 2.083vw;
+}
+#firstPage .selection_item_contain .bg1_text {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.938vw;
+    padding: 2.5vw;
+    box-sizing: border-box;
+    height: 27.396vw;
+}
+.bg1_contain {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: 0.8vw;
+    height: 3.5vh;
+    white-space: nowrap;
+}
+.square_icon {
+    width: 0.2vw;
+    height: 0.2vw;
+    border: 1px solid #B2B2B2;
+    margin: 0 0.5vw;
+    transform: rotate(45deg);
+}
+.text_contain {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 14.385vw;
+}
+.select_btn {
+    width: 100%;
+    height: 3vw;
+    border: 1px solid #E2E2E2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.Title {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: column;
+    width: 100%;
+    height: 7vw;
+    margin-top: 3vw;
+}
+.Title .text {
+    font-size: 1.8vw;
+}
+.Title .title {
+    font-size: 0.9vw;
+}
+#secondPage .operationa{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 3vw;
+}
+#secondPage .operationa_contain {
+    width: 48.958vw;
+    height: 29.688vw;
+    position: relative;
+}
+#secondPage .operationa_contain .bg2{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: url("/img/supplier-login/oprate/bg_1.png") no-repeat;
+    background-size: cover;
+}
+#secondPage .operationa_contain .bg3{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: url("/img/supplier-login/oprate/author/bg_2.png") no-repeat;
+    background-size: cover;
+}
+#secondPage .operationa_contain .bg1 {
+    position: absolute;
+    left: 0;
+    top: 0.521vw;
+    width: 97.8%;
+    height: 90%;
+    background: url(/img/supplier-login/oprate/bg_2.png) no-repeat;
+    background-size: contain;
+    background-position: right;
+}
+#secondPage .operationa_contain .bg4 {
+    left: 0.312vw;
+    top: 0.729vw;
+    width: 70%;
+    height: 100%;
+    background: url(/img/supplier-login/oprate/bg_1.png) no-repeat;
+    background-size: contain;
+    position: absolute;
+    z-index: -1;
+}
+.operationa_contain .online_store {
+    width: 20.833vw;
+    height: 3.646vw;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    left: 3.906vw;
+    top: 2.344vw;
+    border-bottom: 2px solid #FFCEAF;
+}
+.operationa_contain .online_store .online_logo {
+    width: 3.229vw;
+    height: 100%;
+    border-bottom: 6px solid #FFC39A;
+    border-radius: 4px;
+    background: url(/img/supplier-login/oprate/house.png) no-repeat;
+    background-size: contain;
+    background-position: top;
+}
+.online_title {
+    font-size: 1.458vw;
+    font-weight: bold;
+    margin-left: 1.042vw;
+}
+.operationa_contain .author_active {
+    width: 20.833vw;
+    height: 3.646vw;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    right: 3.906vw;
+    top: 2.344vw;
+    border-bottom: 2px solid #FFCEAF;
+    flex-direction: row-reverse;
+}
+.operationa_contain .author_active .online_logo {
+    width: 3.229vw;
+    height: 100%;
+    border-bottom: 6px solid #FFC39A;
+    border-radius: 4px;
+    background: url(/img/supplier-login/oprate/z.png) no-repeat;
+    background-size: contain;
+    background-position: top;
+}
+.operationa_contain .online {
+    width: 19.948vw;
+    height: 2.76vw;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    left: 2.917vw;
+    top: 1.927vw;
+}
+.operationa_contain .online .online_logo{
+    width: 3.229vw;
+    height: 100%;
+    border-radius: 4px;
+    background: url(/img/supplier-login/oprate/house.png) no-repeat;
+    background-size: contain;
+    background-position: top;
+}
+.operationa_contain .author {
+    width: 11.562vw;
+    height: 3.385vw;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    right: 2.084vw;
+    top: 1.042vw;
+}
+.operationa_contain .author .author_logo {
+    height: 3.385vw;
+    width: 3.385vw;
+    background: url(/img/supplier-login/oprate/z.png) no-repeat;
+    background-size: contain;
+}
+.operationa_contain .author .author_title {
+    font-size: 1.458vw;
+    color: #FFFFFF;
+}
+.operationa_contain .contain {
+    width: 35.938vw;
+    height: 20.833vw;
+    position: absolute;
+    left: 6.25vw;
+    top: 6.927vw;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+.operationa_contain .contain .contain_logo {
+    width: 100%;
+    height: 7.812vw;
+    background: url(/img/supplier-login/oprate/title.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .contain .contain_list {
+    width: 100%;
+    height: 10.417vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.operationa_contain .contain .contain_list .list_item {
+    width: 10.417vw;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border: 2px solid white;
+    justify-content: space-around;
+    align-items: center;
+    background: #FDF0E9;
+    box-shadow: 0px 6px 50px 0px rgba(255, 91, 0, 0.24);
+    border-radius: 0.833vw;
+    padding: 1.042vw;
+    box-sizing: border-box;
+}
+.operationa_contain .contain .contain_list .list_item:nth-child(2){
+    margin: 0 1%;
+}
+.operationa_contain .contain .contain_list .list_item:nth-child(1) div:nth-child(1) {
+    width: 4.167vw;
+    height: 2.604vw;
+    background: url(/img/supplier-login/oprate/p.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .contain .contain_list .list_item:nth-child(2) div:nth-child(1) {
+    width: 4.167vw;
+    height: 2.604vw;
+    background: url(/img/supplier-login/oprate/l.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .contain .contain_list .list_item:nth-child(3) div:nth-child(1) {
+    width: 4.167vw;
+    height: 2.604vw;
+    background: url(/img/supplier-login/oprate/s.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .athor_contain {
+    width: 35.938vw;
+    height: 20.833vw;
+    position: absolute;
+    left: 6.25vw;
+    top: 6.927vw;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+.operationa_contain .athor_contain .athor_contain_logo {
+    width: 100%;
+    height: 7.812vw;
+    background: url(/img/supplier-login/oprate/author/logo.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .athor_contain .athor_contain_list {
+    width: 100%;
+    height: 10.417vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+}
+.athor_contain_list .list_item {
+    width: 97%;
+    border: 1px solid #FFC9A9;
+    border-radius: 2.604vw;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 27%;
+}
+.athor_contain_list .list_item:nth-child(1) .list_item_logo  {
+    background: url(/img/supplier-login/oprate/author/02.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 2.188vw;
+    height: 2.604vw;
+    position: absolute;
+    left: 0.521vw;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+.athor_contain_list .list_item:nth-child(2) .list_item_logo  {
+    background: url(/img/supplier-login/oprate/author/03.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 2.188vw;
+    height: 2.604vw;
+    position: absolute;
+    left: 0.521vw;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+.athor_contain_list .list_item:nth-child(3) .list_item_logo  {
+    background: url(/img/supplier-login/oprate/author/04.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 2.188vw;
+    height: 2.604vw;
+    position: absolute;
+    left: 0.521vw;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.athor_contain_list .list_item .text_contain{
+    width: 80%;
+    height: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-direction: row;
+    color: #FFC9A9;
+}
+.athor_contain_list .list_item .text_contain .text_contain_item {
+    font-size: 0.833vw;
+    font-weight: bold;
+}
+.athor_contain_list .list_item .text_contain .text_contain_item2 {
+    width: 1px;
+    height: 1.042vw;
+    background: #ffe2d3;
+    margin: 0 0.521vw;
+}
+.athor_contain_list .list_item .text_contain .text_contain_item3 {
+    font-size: 0.833vw;
+}
+#thirdPage {
+    background: #fff;
+}
+.pageInner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-top: 10vw;
+}
+.pageInner .container {
+    width: 62.5vw;
+    height: 20vw;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+}
+.pageInner .thirdPage_container_contant {
+    position: absolute;
+    width: 100%;
+    height: 5vw;
+    left: 0;
+    top: -6vw;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.pageInner .thirdPage_container_contant .container_title {
+    width: 33%;
+    height: 100%;
+    border-bottom: 1px solid #FF5B00;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    font-weight: bold;
+    font-size: 1.5vw;
+    color: #FF5B00;
+    opacity: 0;
+}
+.pageInner .container .container_item {
+    height: 100%;
+    width: 18%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+.container_item .container_item_active .container_item_hover {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    font-size: 0.8vw;
+    color: #202020;
+    transition: .3s;
+    justify-content: space-around;
+    align-items: center;
+    padding: 1vw 0;
+    box-sizing: border-box;
+}
+.container_item .container_item_active .container_item_hover2 {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    font-size: 0.8vw;
+    color: #202020;
+    transition: .3s;
+    justify-content: space-around;
+    align-items: center;
+    padding: 1vw 0;
+    box-sizing: border-box;
+    bottom: 0;
+}
+.container_item .container_item_active .item_title {
+    display: none;
+    font-size: 1.5vw;
+    color: #FF5B00;
+    font-weight: bold;
+    width: 80%;
+}
+.container_item .container_item_active .item_contant {
+    display: none;
+    color: #666666;
+    font-size: 0.938vw;
+    width: 80%;
+}
+.container_item .container_item_active .item_logo {
+    width: 4vw;
+    height: 4vw;
+}
+.container_item .container_item_active .item_logo_box {
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#item_logo_1 {
+    background: url(/img/supplier-login/05-page/信.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_2 {
+    background: url(/img/supplier-login/05-page/矩.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_3 {
+    background: url(/img/supplier-login/05-page/正.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_4 {
+    background: url(/img/supplier-login/05-page/SEO.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_5 {
+    background: url(/img/supplier-login/05-page/CRM.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_6 {
+    background: url(/img/supplier-login/05-page/认.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_7 {
+    background: url(/img/supplier-login/05-page/美.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_8 {
+    background: url(/img/supplier-login/05-page/私.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_9 {
+    background: url(/img/supplier-login/05-page/分.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_10 {
+    background: url(/img/supplier-login/05-page/会.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_11 {
+    background: url(/img/supplier-login/05-page/金.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_12 {
+    background: url(/img/supplier-login/05-page/交.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active {
+    height: 50%;
+    width: 100%;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_1 {
+    background: url(/img/supplier-login/05-page/slide/01.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_2 {
+    background: url(/img/supplier-login/05-page/slide/02.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_3 {
+    background: url(/img/supplier-login/05-page/slide/03.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_4 {
+    background: url(/img/supplier-login/05-page/slide/04.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_5 {
+    background: url(/img/supplier-login/05-page/slide/05.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_6 {
+    background: url(/img/supplier-login/05-page/slide/06.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_7 {
+    background: url(/img/supplier-login/05-page/slide/07.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_8 {
+    background: url(/img/supplier-login/05-page/slide/08.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_9 {
+    background: url(/img/supplier-login/05-page/slide/09.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_10 {
+    background: url(/img/supplier-login/05-page/slide/10.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_11 {
+    background: url(/img/supplier-login/05-page/slide/11.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_12 {
+    background: url(/img/supplier-login/05-page/slide/12.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active:hover .container_item_hover {
+    background: #F7F7F7 !important;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 111;
+}
+#thirdPage .container_item .container_item_active:hover .container_item_hover2 {
+    background: #F7F7F7 !important;
+    height: 100%;
+    left: 0;
+    z-index: 111;
+}
+#thirdPage .container_item .container_item_active:hover .item_logo_box {
+    justify-content: end;
+}
+#thirdPage .container_item .container_item_active:hover .item_logo {
+    width: 5.2vw;
+    height: 5.2vw;
+}
+#thirdPage .container_item .container_item_active:hover .item_title {
+    display: block !important;
+}
+#thirdPage .container_item .container_item_active:hover .item_title_p {
+    display: none !important;
+}
+#thirdPage .container_item .container_item_active:hover .item_contant {
+    display: block !important;
+}
+#thirdPage .container_item .container_item_active:hover .container_title:nth-child(1){
+    display: flex !important;
+}
+#fourPage .pageInner_contain {
+    width: 80%;
+    height: 30vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+#fourPage .pageInner_contain .nextChange {
+    width: 40px;
+    height: 48px;
+    border: 1px solid #E2E2E2;
+    border-radius: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #E2E2E2;
+    cursor: pointer;
+}
+#fourPage .pageInner_contain .nextChange:hover{
+    border: 1px solid #FF5B00;
+    color: #FF5B00;
+}
+#fourPage .pageInner_contain .isActiveNext{
+    border: 1px solid #FF5B00;
+    color: #FF5B00;
+}
+#fourPage .el-carousel--horizontal {
+    width: 90%;
+}
+#fourPage .el-carousel__arrow{
+    display: none;
+}
+#fourPage .el-carousel__item {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    box-sizing: border-box;
+}
+#fourPage .el-carousel__item .four_logo_1 {
+    width: 50%;
+    height: 80%;
+}
+#fourPage .el-carousel__item .logo_text {
+    width: 45%;
+    height: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    overflow: hidden;
+}
+#fourPage .el-carousel__item .logo_text .logo_title {
+    font-size: 1.25vw;
+    color: black;
+    font-weight: bold;
+    margin-bottom: 2vw;
+}
+#fourPage .el-carousel__item .logo_text .analysis {
+    font-size: 0.9vw;
+    line-height: 2vw;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 9;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+#fivePage {
+    background: url(/img/supplier-login/07-caimei/bg.png) no-repeat;
+    background-size: 100% 100%;
+}
+#fivePage .inner_contain {
+    width: 100%;
+    margin-top: 4vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#fivePage .inner_contain .inner {
+    width: 64%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+}
+#fivePage .inner_contain .inner .caimei_introduction {
+    color: white;
+    font-size: 0.938vw;
+    width: 62.5vw;
+    height: auto;
+    padding: 2vw;
+    background-color: rgba(255,255,255, 0.2);
+    box-sizing: border-box;
+    line-height: 2.083vw;
+    margin-bottom: 5vw;
+}
+#fivePage .inner_contain .inner .caimei_report {
+    width: 90%;
+    height: 55%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.caimei_report .report_item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+    width: 20%;
+}
+.caimei_report .report_item .report_logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.6vw;
+    width: 12vw;
+    height: 9vw;
+    background: url(/img/supplier-login/07-caimei/cirle.png) no-repeat center;
+    background-size: contain;
+    font-weight: bold;
+    color: white;
+}
+.caimei_report .report_item .report_title {
+    font-size: 0.8vw;
+    color: #fff;
+}
+.caimei_report .report_item .report_line{
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+}
+.caimei_report .report_item .report_line .box1 {
+    padding: 0.52vw 1px;
+    height: 5.2vw;
+}
+.caimei_report .report_item .report_line .card4 {
+    background-image: linear-gradient(#fff 35%, rgba(255,255,255,0) 0%);
+    background-position: left;
+    background-size: 1px 10px;
+    background-repeat: repeat-y;
+}
+.caimei_report .report_item .report_line .container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+}
+.caimei_report .report_item .report_line .container .box {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.caimei_report .report_item .report_line .container .box span {
+    position: absolute;
+    box-sizing: border-box;
+    border: none;
+    background: #FFFFFF;
+    border-radius: 50%;
+    animation: animate 1s linear infinite;
+    animation-delay: calc(0.5s * var(--i))
+}
+#sixPage {
+    height: auto !important;
+}
+#sixPage .contant_init {
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+}
+#sixPage .community {
+    width: 62.5vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2vw;
+    flex-direction: column;
+}
+.contant_init {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.community .community_video{
+    width: 100%;
+    height: 45%;
+    font-size: 1vw;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+.community .community_article {
+    width: 100%;
+    height: 45%;
+    font-size: 1vw;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+.community_title {
+    padding: 1% 0;
+    font-size: 1vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.community_title a {
+    cursor: pointer;
+    color: #cccccc;
+    font-size: 0.8vw;
+}
+.community_title a:hover {
+    color: #FF5B00;
+}
+.community .community_list {
+    width: 62.5vw;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    align-items: center;
+    overflow: hidden;
+    grid-row-gap: 0.521vw;
+}
+.community_list .video_list_item {
+    width: 14.583vw;
+    height: 13.542vw;
+    box-sizing: border-box;
+    padding-top: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    transition: .2s;
+    cursor: pointer;
+}
+.community_list .article_list_item {
+    width: 14.583vw;
+    height: 13.542vw;
+    box-sizing: border-box;
+    padding-top: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    transition: .2s;
+    cursor: pointer;
+}
+.article_list_item .article_list_item_content {
+    height: 100%;
+    width: 100%;
+    border: 1px solid #EAEAEA;
+    box-sizing: border-box;
+    color: #202020;
+}
+.video_list_item .video_list_item_content {
+    height: 100%;
+    width: 100%;
+    border: 1px solid #EAEAEA;
+    box-sizing: border-box;
+    color: #202020;
+    position: relative;
+}
+.video_list_item .video_list_item_content .player_bg {
+    position: absolute;
+    width: 100%;
+    height: 60%;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    background: rgba(24, 23, 23, 0.4);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    transition: .2s;
+    z-index: 11;
+}
+.video_list_item_content .video_player {
+    width: 100%;
+    height: 60%;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.article_list_item_content .article_bg {
+    width: 100%;
+    height: 60%;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.video_list_item_content .video_title {
+    width: 100%;
+    height: 5.208vw;
+    box-sizing: border-box;
+    font-size: 0.938vw;
+    align-items: center;
+    padding: 1.042vw;
+    line-height: 1.979vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.article_list_item_content .article_text {
+    width: 100%;
+    height: 40%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+    font-size: 0.7vw;
+    color: #808080;
+}
+.article_list_item_content .text_title {
+    color: #202020;
+    font-size: 1vw;
+    width: 100%;
+    box-sizing: border-box;
+    border-left: 3px solid #FF5B00;
+    padding: 0 4%;
+}
+.video_list_item:hover {
+    padding: 0 0 5px 0;
+}
+.video_list_item:hover .video_list_item_content {
+    box-shadow: 0px 6px 35px 0px rgba(255,157,102,0.12);
+    color: #FF5B00;
+}
+.video_list_item:hover .player_bg {
+    display: flex;
+}
+.article_list_item:hover {
+    padding: 0 0 5px 0;
+}
+.article_list_item:hover .article_list_item_content {
+    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
+    color: #FF5B00 !important;
+}
+.article_list_item:hover .text_title {
+    color: #FF5B00 !important;
+}
+@keyframes animate {
+    0% {
+        width: 0;
+        height: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    100% {
+        width: 50px;
+        height: 50px;
+        opacity: 0;
+    }
+}
+.cm_video_player {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(24, 23, 23, 0.5);
+    display: none;
+    z-index: 999;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+#seven {
+    height: auto !important;
+}
+.videoClose {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    margin-bottom: -20px;
+    margin-right: -20px;
+    z-index: 1;
+}
+.community_content {
+    padding: 0 4%;
+    width: 100%;
+    height: 2.083vw;
+    overflow: hidden;
+    white-space: normal;
+    font-size: 0.729vw;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    box-sizing: border-box;
+}
+.close {
+    width: 60%;
+    display: flex;
+    justify-content: flex-end;
+}
+.sulotionBtn {
+    width: 260px;
+}
+.solutionDiag .solutioncontent .title_1 {
+    color: #272727;
+    font-size: 24px;
+    text-align: center;
+    margin-bottom: 24px;
+    font-weight: Bold;
+}
+.solutionDiag .solutioncontent .title_2 {
+    text-align: center;
+    color: #4A4F58;
+    font-size: 16px;
+    margin-bottom: 48px;
+    white-space: nowrap;
+}
+.solutionDiag .solutioncontent {
+    padding: 40px 70px 20px 70px;
+    background: url("https://static.caimei365.com/app/img/icon/supplier-pc.png") no-repeat;
+}
+.solutionDiag .solutioncontent .el-select {
+    width: 100%;
+}
+.solutionDiag .el-dialog__header {
+    padding: 0 !important;
+}
+.solutionDiag .el-dialog__body {
+    padding: 0 !important;
+}
+.solutionDiag .el-dialog__close::before {
+    content: "\2716";
+}
+.solutionDiag .el-icon-arrow-up:before {
+    content: url(/img/supplier-login/arrow-down.png);
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
+    display: none !important;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item {
+    padding-left: 40px;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item::before {
+    position: absolute;
+    top: 4px;
+    left: 10px;
+    transform: translateY(0);
+    font-family: element-icons;
+    content: "";
+    font-size: 12px;
+    font-weight: 700;
+    -webkit-font-smoothing: antialiased;
+    width: 14px;
+    height: 14px;
+    border: 1px solid #E2E2E2;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::before {
+    transform: translateY(0) scale(1.5);
+    background: url("https://static.caimei365.com/app/img/icon/icon-checked.png") center no-repeat;
+    background-size: contain;
+    border: none;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+    color: #FF5B00;
+}
+.el-select-dropdown__item {
+    height: auto !important;
+    white-space: normal !important;
+    line-height: 24px !important;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item {
+    padding-right: 0 !important;
+}
+.select_contian {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+}
+.select_contian .select_contian_btn {
+    width: 88px;
+    background: #FF5B00;
+    color: white;
+}

src/main/resources/static/css/supplier-login/more-h5.css

@@ -0,0 +1,136 @@
+#More {
+    margin-top: 7vh;
+    background: #FFFFFF;
+}
+#More .bg-More {
+    width: 100%;
+    height: 51vw;
+}
+#More .contain {
+    width: 100%;
+    padding: 0 4vw;
+    box-sizing: border-box;
+}
+.contain .content-tab {
+    padding: 7vw 0;
+    display: flex;
+    align-items: center;
+}
+.contain .content-tab .tab {
+    margin-right: 8vw;
+    color: #666666;
+    font-size: 4.4vw;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+.contain .content-tab .tab.active {
+    color: #333333;
+    font-weight: bold;
+    border-bottom: 2px solid #FF5B00;
+    height: 7vw;
+}
+.contain .grid-content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 4vw;
+    grid-row-gap: 4vw;
+}
+.grid-content .com-video,
+.grid-content .article{
+    width: 43.6vw;
+    height: 42.8vw;
+    border: 1px solid #E2E2E2;
+}
+.grid-content .com-video .item-video,
+.grid-content .article .item-article{
+    height: 100%;
+    overflow: hidden;
+}
+.grid-content .com-video .video-bg,
+.grid-content .article .article-bg{
+    height: 24.4vw;
+}
+.grid-content .com-video .video-bg img {
+    height: 100%;
+    width: 100%;
+}
+.grid-content .com-video .video-content {
+    font-size: 3.6vw;
+    line-height: 6.4vw;
+    padding: 4.5vw 2.5vw;
+    height: calc(100% - 24.4vw);
+    width: 100%;
+    color: #333333;
+}
+.grid-content .article .article-content {
+    height: calc(100% - 24.4vw);
+    padding-top: 2.9vw;
+}
+.grid-content .article .article-content .title {
+    font-size: 3.6vw;
+    border-left: 0.5vw solid #FF5B00;
+    padding-left: 2vw;
+    box-sizing: border-box;
+}
+.grid-content .article .article-content .content {
+    font-size: 2.7vw;
+    color: #666666;
+    padding: 2vw 2vw 0 2vw;
+    line-height: 4vw;
+}
+.text-line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    box-sizing: border-box;
+}
+.el-image {
+    height: 100%;
+    width: 100%;
+}
+.page {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4vw 0;
+}
+.content .article {
+    height: 33.2vw;
+    box-sizing: border-box;
+    padding: 4vw 0;
+    display: flex;
+    cursor: pointer;
+    border-bottom: 2px solid #E2E2E2;
+}
+.content .article .art-bg {
+    width: 38.8vw;
+    height: 25.2vw;
+    margin-right: 2.3vw;
+    box-sizing: border-box;
+}
+.el-image {
+    width: 100%;
+    height: 100%;
+}
+.pageWrapTramp { text-align:center;padding:8vw 0;background: #fff;display: flex; }
+.pageWrapTramp a { box-sizing:border-box;display:inline-block;width: 5.8vw;height: 5.8vw;line-height: 5.8vw;border: 1px solid #EBECEF;font-size: 3vw;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}
+.pageWrapTramp a.on { background:#FF5B00;color:#fff;border:1px solid #FF5B00 }
+.pageWrapTramp a:hover { color:#FF5B00 }
+.pageWrapTramp a.on:hover { color:#fff;opacity:.8 }
+.pageWrapTramp a.btn { width:auto;color:#FF5B00;background:none;border:none }
+.pageWrapTramp .prev:before { content:'\276E' }
+.pageWrapTramp .next:before { content:'\276F' }
+.pageWrapTramp span {
+    display: inline-block;
+    height: 5.8vw;
+    line-height: 5.8vw;
+    margin: 0 5px;
+    color: #93979F;
+    font-size: 3vw;
+}
+.pageWrapTramp b { color:#2D3036;font-weight:normal }
+.pageWrapTramp input { box-sizing: border-box;width: 11.6vw;height: 5.8vw;line-height: 5.8vw;font-size: 3vw;border: 1px solid #EBECEF;outline:none;border-radius:2px;text-align:center}

src/main/resources/static/css/supplier-login/more-pc.css

@@ -0,0 +1,152 @@
+#More {
+    margin-top: 7vh;
+    background: #FFFFFF;
+}
+#More .bg-More {
+    width: 100%;
+    height: 26.6vw;
+}
+#More .contain {
+    width: 100%;
+    padding: 0 18.8vw;
+    box-sizing: border-box;
+}
+.contain .content-tab {
+    padding: 2.1vw 0;
+    display: flex;
+    align-items: center;
+}
+.contain .content-tab .tab {
+    margin-right: 3vw;
+    color: #666666;
+    font-size: 1vw;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+.contain .content-tab .tab.active {
+    color: #272727;
+    font-weight: bold;
+    border-bottom: 2px solid #FF5B00;
+    height: 1.6vw;
+}
+.contain .grid-content {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-column-gap: 1.5vw;
+    grid-row-gap: 2vw;
+}
+.grid-content .com-video,
+.grid-content .article{
+    width: 14.3vw;
+    height: 15.3vw;
+    padding-top: 1vw;
+    box-sizing: border-box;
+    transition: all 0.3s;
+}
+.grid-content .com-video .item-video,
+.grid-content .article .item-article{
+    width: 100%;
+    height: 14.3vw;
+    border: 1px solid #E2E2E2;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    cursor: pointer;
+}
+.grid-content .com-video:hover,
+.grid-content .article:hover{
+    padding-top: 0;
+}
+.grid-content .com-video:hover .item-video,
+.grid-content .article:hover .item-article{
+    border: 1px solid #FF9D66;
+    box-shadow: 0px 3px 10px 0px rgba(255,157,102,0.12);
+}
+.grid-content .com-video:hover .video-content,
+.grid-content .article:hover .article-content,
+.grid-content .article:hover .article-content .title{
+    color: #FF5B00;
+}
+.grid-content .com-video .video-bg,
+.grid-content .article .article-bg {
+    height: 8.2vw;
+}
+.grid-content .com-video .video-bg img,
+.grid-content .article .article-bg img{
+    height: 100%;
+    width: 100%;
+}
+.grid-content .com-video .video-content {
+    font-size: 1vw;
+    line-height: 1.8vw;
+    padding: 1.7vw 0.6vw;
+    height: calc(100% - 9.2vw);
+    width: 100%;
+}
+.grid-content .article .article-content {
+    height: calc(100% - 8.2vw);
+    width: 100%;
+    padding-top: 0.8vw;
+}
+.grid-content .article .article-content .title {
+    font-size: 0.9vw;
+    color: #202020;
+    padding-left: 0.8vw;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    border-left: 2px solid #FF5B00;
+}
+.grid-content .article .article-content .content {
+    color: #808080;
+    padding: 1.2vw 0.8vw 0 0.8vw;
+    font-size: 0.7vw;
+}
+.text-line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    box-sizing: border-box;
+}
+.el-image {
+    width: 100%;
+    height: 100%;
+}
+.page {display: flex;flex-direction: row-reverse;padding: 4vw 18.8vw 0 0;}
+.pageWrapTramp { text-align:center;padding:20px 0 36px;background: #fff;display: flex; }
+.pageWrapTramp a { box-sizing:border-box;display:inline-block;width:40px;height:40px;line-height:40px;border:1px solid #EBECEF;font-size:16px;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}
+.pageWrapTramp a.on { background:#FF5B00;color:#fff;border:1px solid #FF5B00 }
+.pageWrapTramp a:hover { color:#FF5B00 }
+.pageWrapTramp a.on:hover { color:#fff;opacity:.8 }
+.pageWrapTramp a.btn { width:auto;color:#FF5B00;background:none;border:none }
+.pageWrapTramp .prev:before { content:'\276E' }
+.pageWrapTramp .next:before { content:'\276F' }
+.pageWrapTramp span { display:inline-block;height:40px;line-height:40px;margin:0 5px;color:#93979F }
+.pageWrapTramp b { color:#2D3036;font-weight:normal }
+.pageWrapTramp input { box-sizing:border-box;width:80px;height:40px;line-height:40px;font-size:16px;border:1px solid #EBECEF;outline:none;border-radius:2px;text-align:center}
+.cm_video_player {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(24, 23, 23, 0.5);
+    display: none;
+    z-index: 999;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.videoClose {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    margin-bottom: -20px;
+    margin-right: -20px;
+    z-index: 1;
+}
+.close {
+    width: 60%;
+    display: flex;
+    justify-content: flex-end;
+}

src/main/resources/static/js/product/detail.js

@@ -1,806 +1,806 @@
-var productDetail = new Vue({
-    el: "#productDetail",
-    mixins: [beautyArchiveDetailMixin,cmSysVitaMixins,productMixins,supportMixins],
-    data: {
-        showProduct: false,
-        productId: 0,
-        typeId:0,
-        userId: 0,
-        identity:0,
-        number: 0,
-        productStock: 0,
-        pcActType: 0,
-        images: [],
-        priceObj: {
-            actStatus: 0,
-            ladderPriceFlag: 0,
-            minBuyNumber: 1,
-            price: 0,
-            costPrice: 0,
-            priceFlag: 3,
-            productId: 0,
-            promotions: '',
-            step: 1,
-            supplierId: 0,
-            userIdentity: 0 //2-会员机构；3-供应商；4-普通机构
-        },
-        product:{},// 商品信息
-        promotions: {},//促销活动信息
-        promotionsId: 0,//活动id
-        addStatus: true,
-        recommendType: 0,//相关推荐类型 0自动选择; 1手动推荐
-        recommendPage: 1,
-        recommends: [],
-        parameters: [],
-        tabsIndex: 0,
-        disabledText: '',
-        isNoneDisabled: false,
-        isServiceInfo: false,
-        isTrainingMethod: false,
-        isQualificationImg: false,
-        productTypeName: "",
-        beautyActFlag: '',
-        trainingMethodText: '',
-        trainingType: '',
-        isShowPopup: false,
-        currentTab: 1,
-        listQuery:{
-            source:1,
-            userId:0,
-            productId:0,
-            pageNum:1,
-            pageSize:30,
-        },
-        couponParam: {// 获取弹窗优惠券领取参数
-            userId: 0,
-            productId: 0,
-            status: 1,
-            source: 1
-        },
-        isCouponEmpty: false,
-        isProductChecked:false,
-        productCoupon: [], 							// 优惠券
-        productCouponList: [],						// 优惠券弹窗列表
-        collectionType:false,                       // 商品收藏状态
-        supportingList:[],
-        productDetailChose:2,
-        defaultSupportingList:[],
-        isShowSupportingList:false,
-        isShowMoreButton:false,
-        totalPrice:0,  // 勾选配套商品总价格
-        totalNumber:0, // 勾选配套商品总数量
-        isShowCaimeiShop:false,
-        isHideButton:false,
-        returnGoodsStutas: false, // 当前商品是否为特殊商品
-        helpContent: '' // 退货提示
-    },
-    filters: {
-        TypeFormat: function (value) {
-            switch (value) {
-                case 0:
-                    return '活动券';
-                    break;
-                case 1:
-                    return '品类券';
-                    break;
-                case 2:
-                    return '用户专享券';
-                    break;
-                case 3:
-                    return '店铺券';
-                    break;
-                case 4:
-                    return '新用户券';
-                    break;
-            }
-        },
-        NumFormat:function(value) {
-            return Number(value).toFixed(2);
-        }
-    },
-    methods: {
-        // 是否显示vip标签价格
-        // showVipPriceTag: function(product){
-        //     return (product.priceFlag !== 1 && product.svipProductFlag === 1 && ((GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG === 1) || GLOBAL_USER_IDENTITY === 2));
-        // },
-        PromotionsFormat:function(promo){//促销活动类型数据处理
-            if(promo!=null){
-                if(promo.type == 1 && promo.mode == 1){
-                    return true
-                }else{
-                    return false
-                }
-            }
-            return false
-        },
-        getCommodityCombinationList: function () {// 获取收藏商品列表
-            var _self = this;
-            ProductApi.getCommodityCombinationList(_self.listQuery,function (response) {
-                if (response.code === 0 ) {
-                    var data = response.data;
-                    if(data.results.length > 0 ){
-                        var list = data.results.map((el,index)=>{
-                            el.isChecked = false;
-                            el.isSkuPopup = false;
-                            el.number = el.minBuyNumber;
-                            return el;
-                        });
-                        _self.supportingList = list;
-                        _self.defaultSupportingList = _self.supportingList.slice(0,5);
-                        if(_self.supportingList.length > 5 ){
-                            _self.isShowMoreButton = true;
-                        }
-                    }else{
-                        _self.supportingList = [];
-                    }
-                }else {
-                    CAIMEI.Alert(response.msg, '确定');
-                }
-            });
-        },
-        // getImages: function () {
-        //     var _self = this;
-        //     if (!this.productId) {
-        //         return;
-        //     }
-        //     ProductApi.GetProductDdtailsImages({productId: _self.productId}, function (response) {
-        //         if (response.code === 0 && response.data) {
-        //             _self.images = response.data;
-        //             setTimeout(function () {
-        //                 if (isPC) {
-        //                     var magnifier = new ImageMagnifier(
-        //                         '#imgShown .smallImage li',
-        //                         '#imgShown .bigImage',
-        //                         '#imgShown .zoomImage',
-        //                         '#imgShown .mask',
-        //                         '#imgShown .zoom',
-        //                         "on"
-        //                     ).init();
-        //                 } else {
-        //                     var swiper = new Swiper('#swiperImage', {
-        //                         loop: true,
-        //                         autoplay: {
-        //                             delay: 2000,
-        //                             disableOnInteraction: false
-        //                         },
-        //                         pagination: {
-        //                             el: '.swiper-pagination',
-        //                             type: 'fraction'
-        //                         }
-        //                     });
-        //                 }
-        //             }, 500);
-        //         }
-        //     });
-        // },
-        getProductDetails: function () {
-            var _self = this;
-            ProductApi.GetProductDdtails({userId: GLOBAL_USER_ID, productId: _self.productId,typeId:_self.typeId}, function (response) {
-                if (response.code == 0) {
-                    var product = response.data;
-                    _self.product = response.data;
-                    // 设置统计商品详情标签
-                    _self.cmSysParams.pageLabel = _self.handleSysPgeLabe(response.data);
-                    console.log('pageLabel',_self.cmSysParams.pageLabel)
-                    _self.pcActType = product.pcActType;
-                    _self.productStock = product.stock;
-                    _self.addParams.skuId = product.skus[0].skuId;
-                    _self.isDetailsBtnDisable = product.skus[0].stock === 0;
-                    _self.ladderList = product.skus[0].ladderPriceList ? product.skus[0].ladderPriceList : [];
-                    _self.beautyActFlag = product.beautyActFlag;
-                    _self.productTypeName = product.typeName;
-                    _self.recommendType = product.recommendType ? product.recommendType : 0;
-                    _self.archiveId = product.archiveId; // 保存资料列表id
-                    _self.productDetailChose = product.productDetailChose; // 同会员机构显示商品详情
-                    _self.returnGoodsStutas = product.returnGoodsStutas === 2 // 当前商品是否为特殊商品 1不是 2是
-                    _self.helpContent = product.helpContent
-                    if(product.shopType == 2){
-                        _self.isShowCaimeiShop = true
-                    }
-                    if (product.userLike && product.userLike == 1) {// 商品收藏
-                        _self.collectionType = true
-                    } else {
-                        _self.collectionType = false
-                    }
-                    if (product.productDetail.orderInfo != '' && product.productDetail.serviceInfo != '') {
-                        _self.isServiceInfo = true;
-                    }
-                    if(product.qualificationImg){//商品会员
-                        _self.isQualificationImg = true
-                    }else{
-                        _self.isQualificationImg = false
-                    }
-                    if (product.commodityType === 2 && product.trainingMethod) {
-                        _self.isTrainingMethod = true;
-                        _self.trainingMethodText = product.trainingMethod === 1 ? '线上培训' : '线下培训';
-                        _self.trainingType = product.trainingType === 1 ? '￥' + product.trainingFee : '售价已包含';
-                    }
-                    if (product.saleOutFlag === 1 || product.validFlag === 3 || product.validFlag === 9 || product.validFlag === 0 || product.validFlag === 10) {
-                        _self.isNoneDisabled = true;
-                    } else {
-                        _self.isNoneDisabled = false;
-                    }
-                    if (product.validFlag === 3) {
-                        _self.disabledText = '下架'
-                    }
-                    if (product.validFlag === 10) {
-                        _self.disabledText = '停售'
-                    }
-                    if (product.validFlag === 9 || product.validFlag === 0) {
-                        _self.disabledText = '失效'
-                    }
-                    if (product.saleOutFlag === 1 || product.validFlag !== 3 ) {
-                        _self.disabledText = '售罄'
-                    }
-                    _self.handleShowProductType(product.commodityDetailsFlag);
-                    _self.getRecommends();
-                    _self.getProdcutArchiveDetails();  //获取资料列表
-                    // 获取路由hash标识，设置默认展开tab
-                    var str = CAIMEI.getUrlParam('open');
-                    if (str === 'caimei365' && _self.archiveId > 0) {
-                        _self.tabsIndex = 4;
-                        $('body').css({height: '100vh', overflow: 'hidden'})
-                        setTimeout(()=>{
-                            $('body').css({height: '', overflow: ''})
-                            $('html, body').animate({ scrollTop: $('.tabTit').offset().top - $('#globalHead').height() - 50 });
-                        }, 1000);
-                    }
-                } else {
-                    console.log('<===Error===>',response.msg)
-                }
-            })
-        },
-        handleSysPgeLabe(pro){// 设置统计标签
-            let pageLabel = '';
-            if(pro.relatedLabels){
-                return pro.relatedLabels
-            }else{
-                if(pro.tinyTypeName){
-                    pageLabel = pro.tinyTypeName
-                }else if(!pro.tinyTypeName && pro.smallTypeName){
-                    pageLabel = pro.smallTypeName
-                }else{
-                    pageLabel = pro.bigTypeName
-                }
-                return `${pageLabel}-${pro.brandName?pro.brandName:''}`
-            }
-        },
-        handleShowProductType: function (flag = ''){
-            // 根据商品详情可见度显示弹窗 flag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见
-            let showModal = false;
-            const flagMap = {
-                '2': true,
-                '3': true,
-                '4': true
-            }
-            const textMap = {
-                '2': '该商品仅限已注册机构查看，请注册机构账户后继续查看。有采美账号的，请直接登录',
-                '3': '该商品仅限会员机构查看，请注册会员机构后继续查看。有采美账号的，请直接登录。',
-                '4': '该商品仅限医美类机构查看，请注册医美机构后继续查看。有采美账号的，请直接登录。',
-                '34': '该商品仅限会员机构查看，请升级为会员机构后继续查看。',
-                '44': '该商品仅限医美类机构查看，请升级为医美机构后继续查看。',
-                '42': '该商品仅限医美类机构查看，您暂无权限。您可去机构资料页面查看机构类型。'
-            }
-            const code = flag === 4 && GLOBAL_USER_IDENTITY === 2 && GLOBAL_CLUB_TYPE !== 1 ? '42' : `${flag}${GLOBAL_USER_IDENTITY}`
-            if (GLOBAL_USER_ID === 0) {
-                showModal = flagMap[flag];
-                this.showProsPopup(showModal,textMap[flag],'去注册/登录','/login.html')
-                return
-            }
-            if(GLOBAL_VIP_FLAG === 1){ return; }
-            if (flag === 3 && GLOBAL_USER_IDENTITY === 4) {
-                showModal = true
-                this.showProsPopup(showModal,textMap[code],'去升级','/user/setting/upgrade.html')
-                return
-            }
-            if (flag === 4 && GLOBAL_USER_IDENTITY === 4) {
-                showModal = true
-                this.showProsPopup(showModal,textMap[code],'去升级','/user/setting/upgrade.html')
-                return
-            }
-            if (flag === 4 && GLOBAL_USER_IDENTITY=== 2 && GLOBAL_CLUB_TYPE !== 1) {
-                showModal = true
-                this.showProsPopup(showModal,textMap[code],'去查看资料','/user/setting/information.html')
-                return
-            }
-        },
-        showProsPopup:function (showFlag,content,confitmBtnText,href) {// 商品详情限制弹窗
-            if(showFlag){
-                CAIMEI.Popup({
-                    content: `<div class="payAlert"><p>${content}</p></div>`,
-                    confitmBtnText: confitmBtnText,
-                    cancelBtnText: '关闭',
-                    closeIcon:false
-                },function(){
-                    // 确定
-                    window.location.href = href;
-                },function(){
-                    // 关闭
-                    if(window.history.length === 1){
-                        window.location.href="/index.html";
-                        window.close();
-                    }else{
-                        window.history.go(-1);
-                    }
-                });
-            }
-        },
-        getProductPrice () {//获取商品价格
-            var _self = this;
-            if (this.productId === 0) {return;}
-            ProductApi.GetProductDdtailsPrice({ userId: GLOBAL_USER_ID,productId: this.productId }, function (response) {
-                if (response.code === 0 && response.data) {
-                    _self.priceObj = response.data;
-                    _self.number = response.data.minBuyNumber;
-                    _self.addParams.skuId = response.data.skuId;
-                    if (response.data.actStatus === 1) {
-                        _self.promotions = response.data.promotions;
-                        _self.promotionsId = response.data.promotions.id;
-                    }
-                    if(_self.userId === 0 || GLOBAL_USER_IDENTITY === 2 || GLOBAL_USER_IDENTITY === 4){
-                        _self.isShowSupportingList = true;
-                    }
-                }
-            });
-        },
-        ladderPrice () {//获取商品阶梯价格
-            var _self = this;
-            if (!this.productId) {
-                return;
-            }
-            ProductApi.GetProductDdtailsLadderPrice({productId: _self.productId}, function (response) {
-                if (response.code === 0 && response.data) {
-                    _self.ladderList = response.data;
-                    _self.numberResize();
-                }
-            });
-        },
-        // getParameters: function () {//获取商品参数
-        //     var _self = this;
-        //     if (!this.productId) {
-        //         return;
-        //     }
-        //     ProductApi.GetProductDdtailsParameter({productId: _self.productId}, function (response) {
-        //         if (response.code === 0 && response.data) {
-        //             _self.parameters = response.data;
-        //             console.log(_self.parameters)
-        //         }
-        //     });
-        // },
-        toggleThisLadder: function (event) {
-            var el = event.currentTarget;
-            if ($(el).hasClass("on")) {
-                $(el).removeClass("on").siblings('.mFixed').hide();
-                if (!isPC) {
-                    looseBody();
-                }
-            } else {
-                $(el).addClass("on").siblings('.mFixed').show();
-                if (!isPC) {
-                    fixedBody();
-                }
-            }
-        },
-        hideThisLadder: function (event) {
-            var el = event.currentTarget;
-            $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
-            if (!isPC) {
-                looseBody();
-            }
-        },
-        numberSub: function () {
-            this.number -= this.priceObj.step;
-            console.log('number', this.number)
-            this.numberResize();
-        },
-        numberAdd: function () {
-            this.number += this.priceObj.step;
-            console.log('number', this.number)
-            this.numberResize();
-
-        },
-        numberChange: function () {
-            this.number = Math.ceil(this.number / this.priceObj.step) * this.priceObj.step;
-            this.numberResize();
-
-        },
-        numberResize: function () {
-            var _self = this;
-            if (this.number < this.priceObj.minBuyNumber) {
-                this.number = this.priceObj.minBuyNumber;
-            }
-            if (this.number > this.productStock) {
-                this.number = this.productStock;
-            }
-            // if (this.priceObj.ladderPriceFlag) {
-            //     this.ladderList.forEach(function (ladder) {
-            //         if (_self.number >= ladder.buyNum) {
-            //             _self.priceObj.price = ladder.buyPrice;
-            //         }
-            //     });
-            // }
-            console.log('number', this.number)
-        },
-        handleCollection:function (){// 收藏操作
-            var _self = this;
-            console.log('_self.userId',_self.userId)
-            if (_self.userId > 0) {
-                ProductApi.getProductUserLike({userId: _self.userId, productId: _self.productId}, function (response) {
-                    if (response.code === 0 && response.data) {
-                        _self.collectionType = !_self.collectionType
-                        CAIMEI.dialog(response.data,false);
-                    } else {
-                        CAIMEI.Alert(response.msg, '确定', false);
-                    }
-                });
-            }else{
-                _self.toLogin();
-            }
-        },
-        toLogin: function () {
-            setBeforeUrl();
-            window.location.href = '/login.html';
-        },
-        toUpgrade: function () {
-            setBeforeUrl();
-            window.location.href = '/user/setting/upgrade.html';
-        },
-        getRecommends: function () {
-            var _self = this;
-            if (!this.productId) {
-                return;
-            }
-            ProductApi.GetProductDdtailsRecommend(
-                {
-                    productId: _self.productId,
-                    recommendType: _self.recommendType,
-                    userId: _self.userId
-                },
-                function (response) {
-                    if (response.code === 0 && response.data) {
-                        if (response.data.length > 0) {
-                            _self.recommends = response.data;
-                            _self.recommendPage = isPC ? Math.ceil(response.data.length / 7) : Math.ceil(response.data.length / 3);
-                            setTimeout(function () {
-                                if (isPC) {
-                                    $('#productRecommend').slide({
-                                        mainCell: ".swiper-wrapper",
-                                        titCell: ".swiper-pagination span",
-                                        effect: "leftLoop",
-                                        interTime: 3000,
-                                        autoPlay: true,
-                                        scroll: 7,
-                                        vis: 7,
-                                        trigger: "mouseover"
-                                    });
-                                } else {
-                                    var swiper = new Swiper('#productRecommend', {
-                                        slidesPerView: 3,
-                                        spaceBetween: 0,
-                                        autoplay: {
-                                            delay: 3000,
-                                            disableOnInteraction: false
-                                        },
-                                        pagination: {
-                                            el: '.swiper-pagination'
-                                        }
-                                    });
-                                }
-                            }, 500);
-                        }
-                    }
-                });
-        },
-        queryProductDetilsCoupons: function() {// 初始化商品详情优惠券信息
-            var _self = this;
-            ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
-                if (response.code == 0) {
-                    var data = response.data;
-                    if (isPC) {
-                        _self.productCoupon = response.data.list.splice(0, 3);
-                    } else {
-                        _self.productCoupon = response.data.list.splice(0, 2);
-                    }
-                } else {
-                    console.log('获取优惠券列表失败');
-                }
-            })
-        },
-        queryPopupCoupons: function () {// 获取弹窗优惠券列表
-            var _self = this;
-            ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
-                if (response.code == 0) {
-                    var data = response.data;
-                    if (data.couponList && data.couponList.length > 0) {
-                        _self.productCouponList = data.couponList;
-                        _self.isCouponEmpty = false;
-                        console.log('有优惠券')
-                        console.log(_self.productCouponList)
-                    } else {
-                        console.log('没有优惠券')
-                        _self.isCouponEmpty = true;
-                    }
-                } else {
-                    console.log('获取优惠券列表失败')
-                }
-            })
-        },
-        toDeductCoupon:function (coupon) {// 点击购买按钮事件处理
-            var  _self = this;
-            console.log(coupon)
-            if(_self.listQuery.userId == 0){
-                window.location.href='/login.html';
-            }else{
-                ProductApi.CreatePayCouponBeans({userId:_self.couponParam.userId, couponId:coupon.couponId, source:2}, function (response) {
-                    if(response.code == 0){
-                        CAIMEI.dialog('抵扣成功',true,function () {
-                            setTimeout(function(){
-                                _self.currentTab = 2;
-                                _self.couponParam.status = 2;
-                                _self.queryPopupCoupons();
-                            },200)
-                        });
-                    }else{
-                        CAIMEI.Alert(response.msg, '确定', false);
-                    }
-                })
-            }
-        },
-        receiveCoupon: function (coupon) {// 点击领取优惠券
-            var _self = this;
-            ProductApi.ReceiveCoupon({
-                userId: _self.couponParam.userId,
-                couponId: coupon.couponId,
-                source: 2
-            }, function (response) {
-                if (response.code == 0) {
-                    _self.currentTab = 2;
-                    _self.couponParam.status = 2;
-                    _self.queryPopupCoupons();
-                } else {
-                    CAIMEI.Alert(response.msg, '确定', false);
-                }
-            })
-        },
-        queryCouponTabs: function (value) {// 切换优惠券
-            var _self = this;
-            _self.currentTab = _self.couponParam.status = value;
-            _self.queryPopupCoupons();
-        },
-        showPopup: function () {// 显示优惠券弹窗
-            var _self = this;
-            if (_self.userId > 0) {
-                _self.productCouponList = [];
-                _self.currentTab = 1;
-                _self.couponParam.status = 1;
-                _self.queryPopupCoupons();
-                _self.isShowPopup = true;
-            } else {
-                window.location.href = '/login.html';
-            }
-        },
-        hidePopup: function () {// 隐藏优惠券弹窗
-            var _self = this;
-            _self.isShowPopup = false;
-        },
-        detailsClicktab: function (index) {
-            var _self = this;
-            _self.tabsIndex = index;
-            if (index !== 4) return;
-            // 只有当前用户权限为0,并且未初始化时初始化图片预览
-            if (_self.permission === 0) {
-                setTimeout(function () {
-                    _self.initPreviewImage()
-                })
-            }
-        },
-        supportingNumberSub: function(pros){// 配套商品数量减减
-            var _self = this;
-            if (pros.number <= pros.minBuyNumber) {
-                pros.number = pros.minBuyNumber
-                return
-            } else {
-                if (pros.step === 2) {
-                    pros.number -= pros.minBuyNumber
-                } else {
-                    pros.number--
-                }
-            }
-            _self.numberChange(pros);
-        },
-        supportingNumberAdd: function(pros){  // 配套商品数量加加
-            var _self = this;
-            if (pros.step === 2) {
-                pros.number += pros.minBuyNumber
-            } else {
-                pros.number++
-            }
-            _self.numberChange(pros);
-        },
-        supportingNumberChange: function(pros){ // 配套商品数量输入
-            var _self = this;
-            pros.number = Math.ceil(pros.number/pros.step)*pros.step;
-            _self.numberChange(pros);
-        },
-        numberChange: function(pros){
-            var _self = this;
-            if(pros.ladderPriceFlag){
-                pros.ladderPrices.forEach(function(ladder){
-                    if(pros.number>=ladder.buyNum){
-                        pros.price = ladder.buyPrice;
-                        pros.originalPrice = ladder.buyPrice;
-                    }
-                });
-            }
-            // 计算价格
-            if(this.listQuery.userId>0){
-                this.calculatetTtalPrice();
-            }
-        },
-        calculatetTtalPrice: function () { // 计算配套商品总价格
-            var _self = this;
-            var totalPrice = 0;
-            var totalNumber = 0;
-            _self.supportingList.forEach(function (pros) {
-                if(pros.isChecked){
-                    pros.totalPrice = pros.number*pros.price;
-                    totalNumber+= pros.number
-                }else{
-                    pros.totalPrice = 0;
-                }
-                totalPrice += pros.totalPrice;
-            })
-            _self.totalPrice = totalPrice;
-            _self.totalNumber = totalNumber;
-        },
-        checkedSoperv:function (pros) {// 勾选配套商品
-            console.log(pros)
-            var _self = this;
-            var goodsCheckedLength = 0;
-            pros.isChecked = !pros.isChecked
-            _self.supportingList.forEach(el => {
-                if(el.isChecked) {
-                    goodsCheckedLength++;
-                }
-            })
-            if(goodsCheckedLength>0){
-                _self.isProductChecked = true
-            }else{
-                _self.isProductChecked = false
-            }
-            if(this.listQuery.userId>0){
-                this.calculatetTtalPrice();
-            }
-        },
-        toBuyCoupon:function (coupon) {// 点击购买按钮事件处理
-            var _self = this;
-            ProductApi.createCouponRecord({userId:_self.listQuery.userId, couponId:coupon.couponId}, function (response) {
-                if(response.code == 0){
-                    let couponRecordId = response.data.couponRecordId
-                    window.location.href = '/pay/caimei-hlbpay.html?pageType=3&couponId='+coupon.couponId+'&couponRecordId='+couponRecordId;
-                }else{
-                    if(response.code == -1){//个人机构不能购买
-                        CAIMEI.Alert('该优惠券仅限医美机构购买，请升级为医美机构后再次购买。', '去升级', true, function(){
-                            window.location.href = "/user/setting/upgrade.html";
-                        });
-                    }else if(response.code == -2){//会员机构不是医美机构不能购买
-                        CAIMEI.dialog('该优惠券仅限医美机构购买',false,function () {});
-                    }else{
-                        CAIMEI.Alert(response.msg, '确定', false);
-                    }
-                }
-            })
-        },
-        showSupportingMore:function () {
-            var _self = this;
-            _self.isShowMoreButton = false;
-            _self.defaultSupportingList = _self.supportingList;
-        },
-        // 是否显示vip标签价格
-        showVipPriceTag: function(pros){
-            //非会员
-            // if(GLOBAL_VIP_FLAG !== 1) return false;
-            // 商品所有机构可见
-            if(pros.priceFlag === 0  && pros.svipProductFlag === 1 ) return true;
-            // 商品价格仅会员机构可见
-            if(pros.priceFlag === 2  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2) return true;
-            // 商品价格仅医美机构可见
-            if(pros.priceFlag === 3  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 &&  GLOBAL_CLUB_TYPE === 1) return true;
-            // 其它
-            return false;
-        },
-    },
-    created: function () {
-        this.productId = this.couponParam.productId = this.addParams.productId = this.listQuery.productId =  this.handleProsId = $("#productId").val();
-        this.cmSysParams.pageType = 6;
-        this.cmSysParams.productId = this.productId;
-        this.typeId = $("#typeId").val();
-        console.log('typeId', this.typeId)
-        this.userId = this.couponParam.userId = this.listQuery.userId = GLOBAL_USER_ID;
-        // this.getImages();
-        // identity: 0个人，1协销，2会员机构，3供应商，4普通机构
-        // visibility：3:所有人可见，2:普通机构可见，1:会员机构可见 4:仅医美机构可见
-        // var visible = $("#productVisibility").val() * 1;
-        // console.log('visible',visible)
-        // var identity = GLOBAL_USER_IDENTITY;
-        // console.log('identity',identity)
-        // this.showProduct = visible === 3 || visible == 4 || identity === 1 || identity === 2 || (identity === 4 && visible === 2);
-        // if (!this.showProduct) {
-        //     window.location.href = "/404.html?error=未查询到该商品";
-        // }
-    },
-    mounted: function () {
-        this.userId = this.couponParam.userId = this.addParams.userId = GLOBAL_USER_ID;
-        this.getProductDetails();
-        this.getProductPrice();
-        // this.getParameters();
-        this.queryProductDetilsCoupons();
-        this.getCommodityCombinationList();
-        console.log('GLOBAL_CLUB_TYPE',GLOBAL_CLUB_TYPE)
-        const tabsIndex = window.location.search.split('=')[1]
-        if (tabsIndex) {
-            this.tabsIndex = tabsIndex
-        }
-        setTimeout(() => {
-            const cate_import = document.getElementById('category-import')
-            if (cate_import) {
-                cate_import.scrollIntoView({ behavior: "smooth" })
-            }
-        }, 500)
-        // $('.productInfo').slide({
-        //     mainCell:".tabCon"
-        //     ,titCell:".tabTit span"
-        //     ,trigger: "click"
-        // });
-        setTimeout(function () {
-            if (isPC) {
-                var magnifier = new ImageMagnifier(
-                    '#imgShown .smallImage li',
-                    '#imgShown .bigImage',
-                    '#imgShown .zoomImage',
-                    '#imgShown .mask',
-                    '#imgShown .zoom',
-                    "on"
-                ).init();
-            } else {
-                var swiper = new Swiper('#swiperImage', {
-                    loop: true,
-                    autoplay: {
-                        delay: 2000,
-                        disableOnInteraction: false
-                    },
-                    pagination: {
-                        el: '.swiper-pagination',
-                        type: 'fraction'
-                    }
-                });
-            }
-        }, 500);
-        setTimeout(function () {
-            if (isPC) {
-                $('#productRecommend').slide({
-                    mainCell: ".swiper-wrapper",
-                    titCell: ".swiper-pagination span",
-                    effect: "leftLoop",
-                    interTime: 3000,
-                    autoPlay: true,
-                    scroll: 7,
-                    vis: 7,
-                    trigger: "mouseover"
-                });
-            } else {
-                var swiper = new Swiper('#productRecommend', {
-                    slidesPerView: 3,
-                    spaceBetween: 0,
-                    autoplay: {
-                        delay: 3000,
-                        disableOnInteraction: false
-                    },
-                    pagination: {
-                        el: '.swiper-pagination'
-                    }
-                });
-            }
-        }, 500);
-    }
-});
+var productDetail = new Vue({
+    el: "#productDetail",
+    mixins: [beautyArchiveDetailMixin,cmSysVitaMixins,productMixins,supportMixins],
+    data: {
+        showProduct: false,
+        productId: 0,
+        typeId:0,
+        userId: 0,
+        identity:0,
+        number: 0,
+        productStock: 0,
+        pcActType: 0,
+        images: [],
+        priceObj: {
+            actStatus: 0,
+            ladderPriceFlag: 0,
+            minBuyNumber: 1,
+            price: 0,
+            costPrice: 0,
+            priceFlag: 3,
+            productId: 0,
+            promotions: '',
+            step: 1,
+            supplierId: 0,
+            userIdentity: 0 //2-会员机构；3-供应商；4-普通机构
+        },
+        product:{},// 商品信息
+        promotions: {},//促销活动信息
+        promotionsId: 0,//活动id
+        addStatus: true,
+        recommendType: 0,//相关推荐类型 0自动选择; 1手动推荐
+        recommendPage: 1,
+        recommends: [],
+        parameters: [],
+        tabsIndex: 0,
+        disabledText: '',
+        isNoneDisabled: false,
+        isServiceInfo: false,
+        isTrainingMethod: false,
+        isQualificationImg: false,
+        productTypeName: "",
+        beautyActFlag: '',
+        trainingMethodText: '',
+        trainingType: '',
+        isShowPopup: false,
+        currentTab: 1,
+        listQuery:{
+            source:1,
+            userId:0,
+            productId:0,
+            pageNum:1,
+            pageSize:30,
+        },
+        couponParam: {// 获取弹窗优惠券领取参数
+            userId: 0,
+            productId: 0,
+            status: 1,
+            source: 1
+        },
+        isCouponEmpty: false,
+        isProductChecked:false,
+        productCoupon: [], 							// 优惠券
+        productCouponList: [],						// 优惠券弹窗列表
+        collectionType:false,                       // 商品收藏状态
+        supportingList:[],
+        productDetailChose:2,
+        defaultSupportingList:[],
+        isShowSupportingList:false,
+        isShowMoreButton:false,
+        totalPrice:0,  // 勾选配套商品总价格
+        totalNumber:0, // 勾选配套商品总数量
+        isShowCaimeiShop:false,
+        isHideButton:false,
+        returnGoodsStutas: false, // 当前商品是否为特殊商品
+        helpContent: '' // 退货提示
+    },
+    filters: {
+        TypeFormat: function (value) {
+            switch (value) {
+                case 0:
+                    return '活动券';
+                    break;
+                case 1:
+                    return '品类券';
+                    break;
+                case 2:
+                    return '用户专享券';
+                    break;
+                case 3:
+                    return '店铺券';
+                    break;
+                case 4:
+                    return '新用户券';
+                    break;
+            }
+        },
+        NumFormat:function(value) {
+            return Number(value).toFixed(2);
+        }
+    },
+    methods: {
+        // 是否显示vip标签价格
+        // showVipPriceTag: function(product){
+        //     return (product.priceFlag !== 1 && product.svipProductFlag === 1 && ((GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG === 1) || GLOBAL_USER_IDENTITY === 2));
+        // },
+        PromotionsFormat:function(promo){//促销活动类型数据处理
+            if(promo!=null){
+                if(promo.type == 1 && promo.mode == 1){
+                    return true
+                }else{
+                    return false
+                }
+            }
+            return false
+        },
+        getCommodityCombinationList: function () {// 获取收藏商品列表
+            var _self = this;
+            ProductApi.getCommodityCombinationList(_self.listQuery,function (response) {
+                if (response.code === 0 ) {
+                    var data = response.data;
+                    if(data.results.length > 0 ){
+                        var list = data.results.map((el,index)=>{
+                            el.isChecked = false;
+                            el.isSkuPopup = false;
+                            el.number = el.minBuyNumber;
+                            return el;
+                        });
+                        _self.supportingList = list;
+                        _self.defaultSupportingList = _self.supportingList.slice(0,5);
+                        if(_self.supportingList.length > 5 ){
+                            _self.isShowMoreButton = true;
+                        }
+                    }else{
+                        _self.supportingList = [];
+                    }
+                }else {
+                    CAIMEI.Alert(response.msg, '确定');
+                }
+            });
+        },
+        // getImages: function () {
+        //     var _self = this;
+        //     if (!this.productId) {
+        //         return;
+        //     }
+        //     ProductApi.GetProductDdtailsImages({productId: _self.productId}, function (response) {
+        //         if (response.code === 0 && response.data) {
+        //             _self.images = response.data;
+        //             setTimeout(function () {
+        //                 if (isPC) {
+        //                     var magnifier = new ImageMagnifier(
+        //                         '#imgShown .smallImage li',
+        //                         '#imgShown .bigImage',
+        //                         '#imgShown .zoomImage',
+        //                         '#imgShown .mask',
+        //                         '#imgShown .zoom',
+        //                         "on"
+        //                     ).init();
+        //                 } else {
+        //                     var swiper = new Swiper('#swiperImage', {
+        //                         loop: true,
+        //                         autoplay: {
+        //                             delay: 2000,
+        //                             disableOnInteraction: false
+        //                         },
+        //                         pagination: {
+        //                             el: '.swiper-pagination',
+        //                             type: 'fraction'
+        //                         }
+        //                     });
+        //                 }
+        //             }, 500);
+        //         }
+        //     });
+        // },
+        getProductDetails: function () {
+            var _self = this;
+            ProductApi.GetProductDdtails({userId: GLOBAL_USER_ID, productId: _self.productId,typeId:_self.typeId}, function (response) {
+                if (response.code == 0) {
+                    var product = response.data;
+                    _self.product = response.data;
+                    // 设置统计商品详情标签
+                    _self.cmSysParams.pageLabel = _self.handleSysPgeLabe(response.data);
+                    console.log('pageLabel',_self.cmSysParams.pageLabel)
+                    _self.pcActType = product.pcActType;
+                    _self.productStock = product.stock;
+                    _self.addParams.skuId = product.skus[0].skuId;
+                    _self.isDetailsBtnDisable = product.skus[0].stock === 0;
+                    _self.ladderList = product.skus[0].ladderPriceList ? product.skus[0].ladderPriceList : [];
+                    _self.beautyActFlag = product.beautyActFlag;
+                    _self.productTypeName = product.typeName;
+                    _self.recommendType = product.recommendType ? product.recommendType : 0;
+                    _self.archiveId = product.archiveId; // 保存资料列表id
+                    _self.productDetailChose = product.productDetailChose; // 同会员机构显示商品详情
+                    _self.returnGoodsStutas = product.returnGoodsStutas === 2 // 当前商品是否为特殊商品 1不是 2是
+                    _self.helpContent = product.helpContent
+                    if(product.shopType == 2){
+                        _self.isShowCaimeiShop = true
+                    }
+                    if (product.userLike && product.userLike == 1) {// 商品收藏
+                        _self.collectionType = true
+                    } else {
+                        _self.collectionType = false
+                    }
+                    if (product.productDetail.orderInfo != '' && product.productDetail.serviceInfo != '') {
+                        _self.isServiceInfo = true;
+                    }
+                    if(product.qualificationImg){//商品会员
+                        _self.isQualificationImg = true
+                    }else{
+                        _self.isQualificationImg = false
+                    }
+                    if (product.commodityType === 2 && product.trainingMethod) {
+                        _self.isTrainingMethod = true;
+                        _self.trainingMethodText = product.trainingMethod === 1 ? '线上培训' : '线下培训';
+                        _self.trainingType = product.trainingType === 1 ? '￥' + product.trainingFee : '售价已包含';
+                    }
+                    if (product.saleOutFlag === 1 || product.validFlag === 3 || product.validFlag === 9 || product.validFlag === 0 || product.validFlag === 10) {
+                        _self.isNoneDisabled = true;
+                    } else {
+                        _self.isNoneDisabled = false;
+                    }
+                    if (product.validFlag === 3) {
+                        _self.disabledText = '下架'
+                    }
+                    if (product.validFlag === 10) {
+                        _self.disabledText = '停售'
+                    }
+                    if (product.validFlag === 9 || product.validFlag === 0) {
+                        _self.disabledText = '失效'
+                    }
+                    if (product.saleOutFlag === 1 || product.validFlag !== 3 ) {
+                        _self.disabledText = '售罄'
+                    }
+                    _self.handleShowProductType(product.commodityDetailsFlag);
+                    _self.getRecommends();
+                    _self.getProdcutArchiveDetails();  //获取资料列表
+                    // 获取路由hash标识，设置默认展开tab
+                    var str = CAIMEI.getUrlParam('open');
+                    if (str === 'caimei365' && _self.archiveId > 0) {
+                        _self.tabsIndex = 4;
+                        $('body').css({height: '100vh', overflow: 'hidden'})
+                        setTimeout(()=>{
+                            $('body').css({height: '', overflow: ''})
+                            $('html, body').animate({ scrollTop: $('.tabTit').offset().top - $('#globalHead').height() - 50 });
+                        }, 1000);
+                    }
+                } else {
+                    console.log('<===Error===>',response.msg)
+                }
+            })
+        },
+        handleSysPgeLabe(pro){// 设置统计标签
+            let pageLabel = '';
+            if(pro.relatedLabels){
+                return pro.relatedLabels
+            }else{
+                if(pro.tinyTypeName){
+                    pageLabel = pro.tinyTypeName
+                }else if(!pro.tinyTypeName && pro.smallTypeName){
+                    pageLabel = pro.smallTypeName
+                }else{
+                    pageLabel = pro.bigTypeName
+                }
+                return `${pageLabel}-${pro.brandName?pro.brandName:''}`
+            }
+        },
+        handleShowProductType: function (flag = ''){
+            // 根据商品详情可见度显示弹窗 flag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见
+            let showModal = false;
+            const flagMap = {
+                '2': true,
+                '3': true,
+                '4': true
+            }
+            const textMap = {
+                '2': '该商品仅限已注册机构查看，请注册机构账户后继续查看。有采美账号的，请直接登录',
+                '3': '该商品仅限会员机构查看，请注册会员机构后继续查看。有采美账号的，请直接登录。',
+                '4': '该商品仅限医美类机构查看，请注册医美机构后继续查看。有采美账号的，请直接登录。',
+                '34': '该商品仅限会员机构查看，请升级为会员机构后继续查看。',
+                '44': '该商品仅限医美类机构查看，请升级为医美机构后继续查看。',
+                '42': '该商品仅限医美类机构查看，您暂无权限。您可去机构资料页面查看机构类型。'
+            }
+            const code = flag === 4 && GLOBAL_USER_IDENTITY === 2 && GLOBAL_CLUB_TYPE !== 1 ? '42' : `${flag}${GLOBAL_USER_IDENTITY}`
+            if (GLOBAL_USER_ID === 0) {
+                showModal = flagMap[flag];
+                this.showProsPopup(showModal,textMap[flag],'去注册/登录','/login.html')
+                return
+            }
+            if(GLOBAL_VIP_FLAG === 1){ return; }
+            if (flag === 3 && GLOBAL_USER_IDENTITY === 4) {
+                showModal = true
+                this.showProsPopup(showModal,textMap[code],'去升级','/user/setting/upgrade.html')
+                return
+            }
+            if (flag === 4 && GLOBAL_USER_IDENTITY === 4) {
+                showModal = true
+                this.showProsPopup(showModal,textMap[code],'去升级','/user/setting/upgrade.html')
+                return
+            }
+            if (flag === 4 && GLOBAL_USER_IDENTITY=== 2 && GLOBAL_CLUB_TYPE !== 1) {
+                showModal = true
+                this.showProsPopup(showModal,textMap[code],'去查看资料','/user/setting/information.html')
+                return
+            }
+        },
+        showProsPopup:function (showFlag,content,confitmBtnText,href) {// 商品详情限制弹窗
+            if(showFlag){
+                CAIMEI.Popup({
+                    content: `<div class="payAlert"><p>${content}</p></div>`,
+                    confitmBtnText: confitmBtnText,
+                    cancelBtnText: '关闭',
+                    closeIcon:false
+                },function(){
+                    // 确定
+                    window.location.href = href;
+                },function(){
+                    // 关闭
+                    if(window.history.length === 1){
+                        window.location.href="/index.html";
+                        window.close();
+                    }else{
+                        window.history.go(-1);
+                    }
+                });
+            }
+        },
+        getProductPrice () {//获取商品价格
+            var _self = this;
+            if (this.productId === 0) {return;}
+            ProductApi.GetProductDdtailsPrice({ userId: GLOBAL_USER_ID,productId: this.productId }, function (response) {
+                if (response.code === 0 && response.data) {
+                    _self.priceObj = response.data;
+                    _self.number = response.data.minBuyNumber;
+                    _self.addParams.skuId = response.data.skuId;
+                    if (response.data.actStatus === 1) {
+                        _self.promotions = response.data.promotions;
+                        _self.promotionsId = response.data.promotions.id;
+                    }
+                    if(_self.userId === 0 || GLOBAL_USER_IDENTITY === 2 || GLOBAL_USER_IDENTITY === 4){
+                        _self.isShowSupportingList = true;
+                    }
+                }
+            });
+        },
+        ladderPrice () {//获取商品阶梯价格
+            var _self = this;
+            if (!this.productId) {
+                return;
+            }
+            ProductApi.GetProductDdtailsLadderPrice({productId: _self.productId}, function (response) {
+                if (response.code === 0 && response.data) {
+                    _self.ladderList = response.data;
+                    _self.numberResize();
+                }
+            });
+        },
+        // getParameters: function () {//获取商品参数
+        //     var _self = this;
+        //     if (!this.productId) {
+        //         return;
+        //     }
+        //     ProductApi.GetProductDdtailsParameter({productId: _self.productId}, function (response) {
+        //         if (response.code === 0 && response.data) {
+        //             _self.parameters = response.data;
+        //             console.log(_self.parameters)
+        //         }
+        //     });
+        // },
+        toggleThisLadder: function (event) {
+            var el = event.currentTarget;
+            if ($(el).hasClass("on")) {
+                $(el).removeClass("on").siblings('.mFixed').hide();
+                if (!isPC) {
+                    looseBody();
+                }
+            } else {
+                $(el).addClass("on").siblings('.mFixed').show();
+                if (!isPC) {
+                    fixedBody();
+                }
+            }
+        },
+        hideThisLadder: function (event) {
+            var el = event.currentTarget;
+            $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
+            if (!isPC) {
+                looseBody();
+            }
+        },
+        numberSub: function () {
+            this.number -= this.priceObj.step;
+            console.log('number', this.number)
+            this.numberResize();
+        },
+        numberAdd: function () {
+            this.number += this.priceObj.step;
+            console.log('number', this.number)
+            this.numberResize();
+
+        },
+        numberChange: function () {
+            this.number = Math.ceil(this.number / this.priceObj.step) * this.priceObj.step;
+            this.numberResize();
+
+        },
+        numberResize: function () {
+            var _self = this;
+            if (this.number < this.priceObj.minBuyNumber) {
+                this.number = this.priceObj.minBuyNumber;
+            }
+            if (this.number > this.productStock) {
+                this.number = this.productStock;
+            }
+            // if (this.priceObj.ladderPriceFlag) {
+            //     this.ladderList.forEach(function (ladder) {
+            //         if (_self.number >= ladder.buyNum) {
+            //             _self.priceObj.price = ladder.buyPrice;
+            //         }
+            //     });
+            // }
+            console.log('number', this.number)
+        },
+        handleCollection:function (){// 收藏操作
+            var _self = this;
+            console.log('_self.userId',_self.userId)
+            if (_self.userId > 0) {
+                ProductApi.getProductUserLike({userId: _self.userId, productId: _self.productId}, function (response) {
+                    if (response.code === 0 && response.data) {
+                        _self.collectionType = !_self.collectionType
+                        CAIMEI.dialog(response.data,false);
+                    } else {
+                        CAIMEI.Alert(response.msg, '确定', false);
+                    }
+                });
+            }else{
+                _self.toLogin();
+            }
+        },
+        toLogin: function () {
+            setBeforeUrl();
+            window.location.href = '/login.html';
+        },
+        toUpgrade: function () {
+            setBeforeUrl();
+            window.location.href = '/user/setting/upgrade.html';
+        },
+        getRecommends: function () {
+            var _self = this;
+            if (!this.productId) {
+                return;
+            }
+            ProductApi.GetProductDdtailsRecommend(
+                {
+                    productId: _self.productId,
+                    recommendType: _self.recommendType,
+                    userId: _self.userId
+                },
+                function (response) {
+                    if (response.code === 0 && response.data) {
+                        if (response.data.length > 0) {
+                            _self.recommends = response.data;
+                            _self.recommendPage = isPC ? Math.ceil(response.data.length / 7) : Math.ceil(response.data.length / 3);
+                            setTimeout(function () {
+                                if (isPC) {
+                                    $('#productRecommend').slide({
+                                        mainCell: ".swiper-wrapper",
+                                        titCell: ".swiper-pagination span",
+                                        effect: "leftLoop",
+                                        interTime: 3000,
+                                        autoPlay: true,
+                                        scroll: 7,
+                                        vis: 7,
+                                        trigger: "mouseover"
+                                    });
+                                } else {
+                                    var swiper = new Swiper('#productRecommend', {
+                                        slidesPerView: 3,
+                                        spaceBetween: 0,
+                                        autoplay: {
+                                            delay: 3000,
+                                            disableOnInteraction: false
+                                        },
+                                        pagination: {
+                                            el: '.swiper-pagination'
+                                        }
+                                    });
+                                }
+                            }, 500);
+                        }
+                    }
+                });
+        },
+        queryProductDetilsCoupons: function() {// 初始化商品详情优惠券信息
+            var _self = this;
+            ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
+                if (response.code == 0) {
+                    var data = response.data;
+                    if (isPC) {
+                        _self.productCoupon = response.data.list.splice(0, 3);
+                    } else {
+                        _self.productCoupon = response.data.list.splice(0, 2);
+                    }
+                } else {
+                    console.log('获取优惠券列表失败');
+                }
+            })
+        },
+        queryPopupCoupons: function () {// 获取弹窗优惠券列表
+            var _self = this;
+            ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
+                if (response.code == 0) {
+                    var data = response.data;
+                    if (data.couponList && data.couponList.length > 0) {
+                        _self.productCouponList = data.couponList;
+                        _self.isCouponEmpty = false;
+                        console.log('有优惠券')
+                        console.log(_self.productCouponList)
+                    } else {
+                        console.log('没有优惠券')
+                        _self.isCouponEmpty = true;
+                    }
+                } else {
+                    console.log('获取优惠券列表失败')
+                }
+            })
+        },
+        toDeductCoupon:function (coupon) {// 点击购买按钮事件处理
+            var  _self = this;
+            console.log(coupon)
+            if(_self.listQuery.userId == 0){
+                window.location.href='/login.html';
+            }else{
+                ProductApi.CreatePayCouponBeans({userId:_self.couponParam.userId, couponId:coupon.couponId, source:2}, function (response) {
+                    if(response.code == 0){
+                        CAIMEI.dialog('抵扣成功',true,function () {
+                            setTimeout(function(){
+                                _self.currentTab = 2;
+                                _self.couponParam.status = 2;
+                                _self.queryPopupCoupons();
+                            },200)
+                        });
+                    }else{
+                        CAIMEI.Alert(response.msg, '确定', false);
+                    }
+                })
+            }
+        },
+        receiveCoupon: function (coupon) {// 点击领取优惠券
+            var _self = this;
+            ProductApi.ReceiveCoupon({
+                userId: _self.couponParam.userId,
+                couponId: coupon.couponId,
+                source: 2
+            }, function (response) {
+                if (response.code == 0) {
+                    _self.currentTab = 2;
+                    _self.couponParam.status = 2;
+                    _self.queryPopupCoupons();
+                } else {
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        queryCouponTabs: function (value) {// 切换优惠券
+            var _self = this;
+            _self.currentTab = _self.couponParam.status = value;
+            _self.queryPopupCoupons();
+        },
+        showPopup: function () {// 显示优惠券弹窗
+            var _self = this;
+            if (_self.userId > 0) {
+                _self.productCouponList = [];
+                _self.currentTab = 1;
+                _self.couponParam.status = 1;
+                _self.queryPopupCoupons();
+                _self.isShowPopup = true;
+            } else {
+                window.location.href = '/login.html';
+            }
+        },
+        hidePopup: function () {// 隐藏优惠券弹窗
+            var _self = this;
+            _self.isShowPopup = false;
+        },
+        detailsClicktab: function (index) {
+            var _self = this;
+            _self.tabsIndex = index;
+            if (index !== 4) return;
+            // 只有当前用户权限为0,并且未初始化时初始化图片预览
+            if (_self.permission === 0) {
+                setTimeout(function () {
+                    _self.initPreviewImage()
+                })
+            }
+        },
+        supportingNumberSub: function(pros){// 配套商品数量减减
+            var _self = this;
+            if (pros.number <= pros.minBuyNumber) {
+                pros.number = pros.minBuyNumber
+                return
+            } else {
+                if (pros.step === 2) {
+                    pros.number -= pros.minBuyNumber
+                } else {
+                    pros.number--
+                }
+            }
+            _self.numberChange(pros);
+        },
+        supportingNumberAdd: function(pros){  // 配套商品数量加加
+            var _self = this;
+            if (pros.step === 2) {
+                pros.number += pros.minBuyNumber
+            } else {
+                pros.number++
+            }
+            _self.numberChange(pros);
+        },
+        supportingNumberChange: function(pros){ // 配套商品数量输入
+            var _self = this;
+            pros.number = Math.ceil(pros.number/pros.step)*pros.step;
+            _self.numberChange(pros);
+        },
+        numberChange: function(pros){
+            var _self = this;
+            if(pros.ladderPriceFlag){
+                pros.ladderPrices.forEach(function(ladder){
+                    if(pros.number>=ladder.buyNum){
+                        pros.price = ladder.buyPrice;
+                        pros.originalPrice = ladder.buyPrice;
+                    }
+                });
+            }
+            // 计算价格
+            if(this.listQuery.userId>0){
+                this.calculatetTtalPrice();
+            }
+        },
+        calculatetTtalPrice: function () { // 计算配套商品总价格
+            var _self = this;
+            var totalPrice = 0;
+            var totalNumber = 0;
+            _self.supportingList.forEach(function (pros) {
+                if(pros.isChecked){
+                    pros.totalPrice = pros.number*pros.price;
+                    totalNumber+= pros.number
+                }else{
+                    pros.totalPrice = 0;
+                }
+                totalPrice += pros.totalPrice;
+            })
+            _self.totalPrice = totalPrice;
+            _self.totalNumber = totalNumber;
+        },
+        checkedSoperv:function (pros) {// 勾选配套商品
+            console.log(pros)
+            var _self = this;
+            var goodsCheckedLength = 0;
+            pros.isChecked = !pros.isChecked
+            _self.supportingList.forEach(el => {
+                if(el.isChecked) {
+                    goodsCheckedLength++;
+                }
+            })
+            if(goodsCheckedLength>0){
+                _self.isProductChecked = true
+            }else{
+                _self.isProductChecked = false
+            }
+            if(this.listQuery.userId>0){
+                this.calculatetTtalPrice();
+            }
+        },
+        toBuyCoupon:function (coupon) {// 点击购买按钮事件处理
+            var _self = this;
+            ProductApi.createCouponRecord({userId:_self.listQuery.userId, couponId:coupon.couponId}, function (response) {
+                if(response.code == 0){
+                    let couponRecordId = response.data.couponRecordId
+                    window.location.href = '/pay/caimei-hlbpay.html?pageType=3&couponId='+coupon.couponId+'&couponRecordId='+couponRecordId;
+                }else{
+                    if(response.code == -1){//个人机构不能购买
+                        CAIMEI.Alert('该优惠券仅限医美机构购买，请升级为医美机构后再次购买。', '去升级', true, function(){
+                            window.location.href = "/user/setting/upgrade.html";
+                        });
+                    }else if(response.code == -2){//会员机构不是医美机构不能购买
+                        CAIMEI.dialog('该优惠券仅限医美机构购买',false,function () {});
+                    }else{
+                        CAIMEI.Alert(response.msg, '确定', false);
+                    }
+                }
+            })
+        },
+        showSupportingMore:function () {
+            var _self = this;
+            _self.isShowMoreButton = false;
+            _self.defaultSupportingList = _self.supportingList;
+        },
+        // 是否显示vip标签价格
+        showVipPriceTag: function(pros){
+            //非会员
+            // if(GLOBAL_VIP_FLAG !== 1) return false;
+            // 商品所有机构可见
+            if(pros.priceFlag === 0  && pros.svipProductFlag === 1 ) return true;
+            // 商品价格仅会员机构可见
+            if(pros.priceFlag === 2  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2) return true;
+            // 商品价格仅医美机构可见
+            if(pros.priceFlag === 3  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 &&  GLOBAL_CLUB_TYPE === 1) return true;
+            // 其它
+            return false;
+        },
+    },
+    created: function () {
+        this.productId = this.couponParam.productId = this.addParams.productId = this.listQuery.productId =  this.handleProsId = $("#productId").val();
+        this.cmSysParams.pageType = 6;
+        this.cmSysParams.productId = this.productId;
+        this.typeId = $("#typeId").val();
+        console.log('typeId', this.typeId)
+        this.userId = this.couponParam.userId = this.listQuery.userId = GLOBAL_USER_ID;
+        // this.getImages();
+        // identity: 0个人，1协销，2会员机构，3供应商，4普通机构
+        // visibility：3:所有人可见，2:普通机构可见，1:会员机构可见 4:仅医美机构可见
+        // var visible = $("#productVisibility").val() * 1;
+        // console.log('visible',visible)
+        // var identity = GLOBAL_USER_IDENTITY;
+        // console.log('identity',identity)
+        // this.showProduct = visible === 3 || visible == 4 || identity === 1 || identity === 2 || (identity === 4 && visible === 2);
+        // if (!this.showProduct) {
+        //     window.location.href = "/404.html?error=未查询到该商品";
+        // }
+    },
+    mounted: function () {
+        this.userId = this.couponParam.userId = this.addParams.userId = GLOBAL_USER_ID;
+        this.getProductDetails();
+        this.getProductPrice();
+        // this.getParameters();
+        this.queryProductDetilsCoupons();
+        this.getCommodityCombinationList();
+        console.log('GLOBAL_CLUB_TYPE',GLOBAL_CLUB_TYPE)
+        const tabsIndex = window.location.search.split('tabsIndex=')[1]
+        if (tabsIndex) {
+            this.tabsIndex = tabsIndex
+        }
+        setTimeout(() => {
+            const cate_import = document.getElementById('category-import')
+            if (cate_import) {
+                cate_import.scrollIntoView({ behavior: "smooth" })
+            }
+        }, 500)
+        // $('.productInfo').slide({
+        //     mainCell:".tabCon"
+        //     ,titCell:".tabTit span"
+        //     ,trigger: "click"
+        // });
+        setTimeout(function () {
+            if (isPC) {
+                var magnifier = new ImageMagnifier(
+                    '#imgShown .smallImage li',
+                    '#imgShown .bigImage',
+                    '#imgShown .zoomImage',
+                    '#imgShown .mask',
+                    '#imgShown .zoom',
+                    "on"
+                ).init();
+            } else {
+                var swiper = new Swiper('#swiperImage', {
+                    loop: true,
+                    autoplay: {
+                        delay: 2000,
+                        disableOnInteraction: false
+                    },
+                    pagination: {
+                        el: '.swiper-pagination',
+                        type: 'fraction'
+                    }
+                });
+            }
+        }, 500);
+        setTimeout(function () {
+            if (isPC) {
+                $('#productRecommend').slide({
+                    mainCell: ".swiper-wrapper",
+                    titCell: ".swiper-pagination span",
+                    effect: "leftLoop",
+                    interTime: 3000,
+                    autoPlay: true,
+                    scroll: 7,
+                    vis: 7,
+                    trigger: "mouseover"
+                });
+            } else {
+                var swiper = new Swiper('#productRecommend', {
+                    slidesPerView: 3,
+                    spaceBetween: 0,
+                    autoplay: {
+                        delay: 3000,
+                        disableOnInteraction: false
+                    },
+                    pagination: {
+                        el: '.swiper-pagination'
+                    }
+                });
+            }
+        }, 500);
+    }
+});

src/main/resources/static/js/supplier-center/encyclopedia/edit.js

@@ -1,789 +1,819 @@
-const ImageUpload = {
-    name: 'file-upload',
-    template: `
-        <div>
-            <input type="file" v-show="false" ref="fileInput" @change="handleFileChange" accept=".png,.jpg,.jpeg,.gif,.mp4"/>
-            <div class="bk-file-upload">
-                <template v-if="limit > list.length">
-                    <div class="bk-upload" @click="handleChooseFile"><div>+</div><div>添加图片</div></div>
-                </template>
-                <ul class="bk-file-wrap" v-if="list.length > 0">
-                    <template v-for="(item, index) in list">
-                        <li :key="index">
-                            <span @click="handleRemove(item)">×</span>
-                            <img :src="item.url" v-if="isImage(item)"/>
-                            <video :src="item.url" v-else></video>
-                        </li>
-                    </template>
-                </ul>
-            </div>
-        </div>
-    `,
-    props: {
-        limit: {
-            type: Number,
-            default: 1
-        },
-        list: {
-            type: Array,
-            default: () => []
-        }
-    },
-    data() {
-        return {
-            fileList: []
-        }
-    },
-    methods: {
-        isImage(file) {
-            return file.type.indexOf('image') > -1
-        },
-        handleChooseFile() {
-            this.$refs.fileInput.click();
-        },
-        handleRemove(file) {
-            this.$emit('remove', file)
-        },
-        generageRowfile(file) {
-            return {
-                uuid: uuidv4(),
-                fileName: file.name,
-                size: file.size,
-                type: file.type,
-                file: file,
-                percentage: 0,
-                status: -1, // 0 上次失败 1 上传成功 2 上传中 -1 待上传
-                response: null,
-                url: '',
-                checkpoint: null
-            }
-        },
-        handleFileChange(e) {
-            const self = this
-            let flag = true
-            this.fileList = Array.from(e.target.files).map(function (file) {
-                if (file.size > 1024 * 1024 * 50) {
-                    CAIMEI.dialog('请上传50MB以内的图片或视频', false);
-                    flag = false
-                }
-                return self.generageRowfile(file)
-            })
-            if (!flag) return
-            this.onUploadFile(this.fileList)
-        },
-        // 文件上传成功
-        onUploadSuccess(file, response, url) {
-            file.response = response
-            file.status = 1
-            file.url = url
-            this.$emit('upload-success', this.fileList)
-        },
-        // 文件上传失败
-        onUploadError(file, error) {
-            file.response = error
-            file.status = 0
-            this.$emit('upload-error', this.fileList)
-        },
-        // 文件上传进度条
-        onProgress(file, response) {
-            const {p, cpt, res} = response
-            file.percentage = p * 100
-            file.checkpoint = cpt
-            file.response = res
-            file.status = 2
-            this.$emit('upload-progress', this.fileList)
-        },
-        // 上传文件
-        onUploadFile(fileList) {
-            upload(fileList, {
-                success: this.onUploadSuccess,
-                faild: this.onUploadError,
-                progress: this.onProgress
-            })
-        }
-    }
-}
-
-var markCount = 0
-
-function validateWebsite(rule, value, callback){
-    if(/[a-zA-z]+:\/\/[^\s]*/.test(value)){
-        callback()
-    }else{
-        callback(new Error('请输入合法的网址'))
-    }
-}
-
-function validateTimeStr(rule, value, callback){
-    if(/^\d{4}-\d{1,2}-\d{1,2}/.test(value)){
-        callback()
-    }else{
-        callback(new Error('时间格式不合法（示例：1970-01-01）'))
-    }
-}
-
-/**
- * 根据阿拉伯数字返回对应的中文数字，支持到千
- * @param {Number} num 阿拉伯数字
- */
-function getChineseNum4(num) {
-    let result = ''
-    let unit = ['', '十', '百', '千']
-    let unitIndex = 0
-    while (num > 0) {
-        let temp = num % 10
-        if (temp > 0) {
-            result = getChineseNum1(temp) + unit[unitIndex] + result
-        }
-        num = Math.floor(num / 10)
-        unitIndex++
-    }
-    return result
-}
-
-/**
- * 根据阿拉伯数字返回对应的中文数字，支持到一
- * @param {Number} num 阿拉伯数字
- */
-function getChineseNum1(num) {
-    let result = ''
-    let unit = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
-    if (num > 0 && num < 10) {
-        result = unit[num - 1]
-    }
-    return result
-}
-
-function initReferenceData(){
-    return {
-        id: 1,
-        ctrlId: '', // 关联id
-        /* （网络资料） */
-        referenceType: 1, // '参考类型资料（1.网络；2.著作；3.其他）'
-        website: '',
-        articleName: '',
-        websiteName: '',
-        publishTimeStr: '',
-        acitationTimeStr: '',
-        /* 著作资料）*/
-        author: '',
-        workName: '',
-        publicationPlace: '',
-        press: '',
-        publicationYearStr: '',
-        acitationWeb: '',
-        /* （其他资料） */
-        referenceDescription: '',
-        imageDescription: '',
-        imageUrl: '',
-        entryId: '',
-        entryType: ''
-    }
-}
-
-const edit = new Vue({
-    el: '#edit',
-    components: {
-        [contentEdit.name]: contentEdit,
-        [ImageUpload.name]: ImageUpload
-    },
-    filters: {
-        reference(data) {
-            if (data.referenceType === 1) return data.articleName
-            if (data.referenceType === 2) return data.author + '.' + data.workName
-            return data.referenceDescription + '.' + data.imageDescription
-        }
-    },
-    data: {
-        isPC: window.innerWidth > 768,
-        referenceType: 1, // 添加 | 引用参考资料类型
-        referenceDialog: false, // 参考资料表单弹窗
-        referenceEditType: 'add', // 参考资料编辑类型 add 添加 edit 编辑
-        contentEdit: null, // 编辑器
-        showAgreement: false,
-        // 提交表单数据
-        formData: {
-            shopId:'',
-            id: '', // 词条id
-            name: '', // 词条名称
-            alias: '', // 义项名
-            discription: '', // 词条概述
-            image: '', // 头图地址
-            typeId: '', // 分类id
-            seoKeyword: '', // seo关键字
-            labelIds: [], // 标签库
-            status: 0, // 状态0保存草稿箱  1已发布
-            infoList: [], //  信息栏集合
-            referenceList: [], // 参考资料集合
-            textInfoList: [],
-            imageList: [], // 概述图册集合
-            videoList: [], // 视频集合
-        },
-        // 提交表单校验
-        rules: {
-            name: [{required: true, message: '词条名称不能为空', trigger: ['blur']}],
-            alias: [{required: true, message: '义项名不能为空', trigger: ['change']}],
-            discription: [{required: true, message: '词条概述不能为空', trigger: ['change']}],
-            img: [{required: true, message: '请上传词条头图', trigger: ['change']}],
-            typeId: [{required: true, message: '请选择词条分类', trigger: ['change']}],
-            status: [{required: true, message: '请选择词条发布状态', trigger: ['change']}],
-        },
-        // 参考资料信息表单
-        referenceData: initReferenceData(),
-        // 参考资料表单规则校验
-        referenceRule: {
-            referenceType: [{required: true, message: '请选择参考类型资料', trigger: ['change']}],
-            website: [
-                {required: true, message: '请输入网址', trigger: ['blur']},
-                { validator: validateWebsite, trigger: 'blur' }
-            ],
-            articleName: [{required: true, message: '请输入文章名字', trigger: ['blur']}],
-            websiteName: [{required: true, message: '请输入网站名称', trigger: ['blur']}],
-            author: [{required: true, message: '请输入作者名称', trigger: ['blur']}],
-            workName: [{required: true, message: '请输入著作名', trigger: ['blur']}],
-            press: [{required: true, message: '请输入出版社', trigger: ['blur']}],
-            publicationYearStr: [{required: true, message: '请输入出版年', trigger: ['blur']}],
-            referenceDescription: [{required: true, message: '请输入参考资料说明', trigger: ['blur']}],
-        },
-        // 上传文件列表
-        fileList: [],
-        // 上传封面列表
-        coverList: [],
-        //词条类型列表
-        typeList: [],
-        // 敏感词校验数据
-        formValidate: {},
-        referenceImageList: [],
-        labelList: [],
-        remoteLoading: false,
-        validTime: null,
-    },
-    created() {
-        this.formData.id = CAIMEI.getUrlParam('id') || ''
-        this.fetchTypeList()
-        this.fetchQueryKeywordList()
-        // 如果是编辑就获取表单数据
-        if(this.formData.id){
-            this.fetchEntryData()
-        }else{
-            this.showAgreement = true
-            this.initFormDataList()
-        }
-    },
-    mounted(){
-        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
-        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
-        this.initAutoInput('.seo-auto-input', 'seoKeyword')
-    },
-    watch: {
-        referenceDialog(val) {
-            if (val) {
-                setTimeout(() => {
-                    this.onFocused()
-                }, 500)
-            }
-        },
-    },
-    methods: {
-        onFocused(val = 300) {
-            setTimeout(() => {
-                this.validTime = null
-                console.log(111)
-                clearTimeout(this.validTime)
-            }, val)
-        },
-        onBlured(val = 200) {
-            setTimeout(() => {
-                this.isFocus = true
-                this.validFormRule()
-                console.log(222)
-            }, val)
-        },
-        // 自动保存校验
-        validFormRule() {
-            this.$refs.ruleForm.validate(valid => {
-                if (valid) {
-                    this.validTime = null
-                    clearTimeout(this.validTime)
-                    this.validTime = setTimeout(() => {
-                        if (this.validTime) {
-                            this.handleConfirm_new()
-                        }
-                        clearTimeout(this.validTime)
-                        this.validTime = null
-                    }, 2000)
-                }
-            })
-        },
-        handlerDiscrip() {
-            this.onFocused()
-        },
-        handlerTypeId() {
-            this.onBlured()
-        },
-        changeVisible($event) {
-            if ($event) {
-                this.onFocused()
-            } else {
-                this.onBlured()
-            }
-        },
-        // 获取表单数据
-        fetchEntryData(){
-            const self = this
-            shopBikeApi.FetchEntryDetail({id: this.formData.id}, function(res){
-                self.initFormData(res.data)
-            })
-        },
-        // 初始化表单数据
-        initFormData(data){
-            for (const key in this.formData) {
-                if(data.hasOwnProperty(key)){
-                    if(key === 'labelIds' && data[key]){
-                        this.formData[key] = data[key].split(',').map(v => parseInt(v));
-                    }else{
-                        this.formData[key] = data[key]
-                    }
-                }
-            }
-            const imageList = this.formData.imageList.map(item =>{
-                return {url: item.image, type: 'image'}
-            })
-            const videoList = this.formData.videoList.map(item =>{
-                return {fileName: item.fileName, uuid: item.ossName, url: item.url, type: 'video'}
-            })
-            this.fileList = [...imageList, ...videoList]
-            if(this.formData.image){
-                this.coverList = [{ url: this.formData.image, type: 'image' }]
-            }
-            const infoSize = 4 - this.formData.infoList.length
-            const textInfoSize = 4 - this.formData.textInfoList.length
-            this.initFormDataList( infoSize, textInfoSize)
-            window.markCount = this.formData.referenceList.length
-        },
-
-        // 获取图片列表
-        filterImageList(fileList) {
-            const imageList = fileList.filter(file => file.type.indexOf('image') > -1)
-            return imageList.map(file => ({entryId: '', image: file.url}))
-        },
-        // 获取视频列表
-        filterVideoList(fileList) {
-            const imageList = fileList.filter(file => file.type.indexOf('video') > -1)
-            return imageList.map(file => ({
-                entryId: '',
-                fileTitle: file.fileName,
-                fileName: file.fileName,
-                ossName: file.uuid,
-                ossUrl: file.url
-            }))
-        },
-        // 提交表单
-        async handleConfirm() {
-            try {
-                if(this.showAgreement){
-                    CAIMEI.dialog('请先阅读编辑须知协议', false);
-                    return
-                }
-                this.formData.shopId = GLOBAL_SHOP_ID
-                this.formData.imageList = this.filterImageList(this.fileList)
-                this.formData.videoList = this.filterVideoList(this.fileList)
-                await this.$refs.ruleForm.validate()
-                const params = {
-                    shopId: this.formData.shopId,
-                    id: this.formData.id, // 词条id
-                    name: this.formData.name, // 词条名称
-                    alias: this.formData.alias, // 义项名
-                    discription: this.formData.discription, // 词条概述
-                    image: this.formData.image, // 头图地址
-                    typeId: this.formData.typeId, // 分类id
-                    seoKeyword: this.formData.seoKeyword, // seo关键字
-                    status: this.formData.status, // 状态0保存草稿箱  1已发布
-                    infoListStr: JSON.stringify(this.formData.infoList), //  信息栏集合
-                    referenceListStr:JSON.stringify(this.formData.referenceList), // 参考资料集合
-                    textInfoListStr: JSON.stringify(this.formData.textInfoList),
-                    imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
-                    videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
-                    labelIds: this.formData.labelIds ? this.formData.labelIds.join(',') : '' // 关联标签库列表
-                };
-                this.sensitiveWordsValidate(params)
-            } catch (e) {
-                console.log(e)
-                this.socrllToErrorWord()
-            }
-        },
-        // 提交表单
-        async handleConfirm_new() {
-            try {
-                if(this.showAgreement){
-                    CAIMEI.dialog('请先阅读编辑须知协议', false);
-                    return
-                }
-                this.formData.shopId = GLOBAL_SHOP_ID
-                this.formData.imageList = this.filterImageList(this.fileList)
-                this.formData.videoList = this.filterVideoList(this.fileList)
-                await this.$refs.ruleForm.validate()
-                const params = {
-                    shopId: this.formData.shopId,
-                    id: this.formData.id, // 词条id
-                    name: this.formData.name, // 词条名称
-                    alias: this.formData.alias, // 义项名
-                    discription: this.formData.discription, // 词条概述
-                    image: this.formData.image, // 头图地址
-                    typeId: this.formData.typeId, // 分类id
-                    seoKeyword: this.formData.seoKeyword, // seo关键字
-                    status: this.formData.status, // 状态0保存草稿箱  1已发布
-                    infoListStr: JSON.stringify(this.formData.infoList), //  信息栏集合
-                    referenceListStr:JSON.stringify(this.formData.referenceList), // 参考资料集合
-                    textInfoListStr: JSON.stringify(this.formData.textInfoList),
-                    imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
-                    videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
-                    labelIds: this.formData.labelIds ? this.formData.labelIds.join(',') : '' // 关联标签库列表
-                };
-                this.sensitiveWordsValidate_new(params)
-            } catch (e) {
-                console.log(e)
-                this.socrllToErrorWord()
-            }
-        },
-        /// 确定提交
-        onReallySave(params) {
-            const self = this
-            shopBikeApi.SaveEntrySumbit(params, function (res) {
-                CAIMEI.dialog('词条保存成功', false);
-                setTimeout(function () {
-                    self.handleBack()
-                }, 500)
-            })
-        },
-
-        // 提交表单
-        async handlePreview() {
-            try {
-                if(this.showAgreement){
-                    CAIMEI.dialog('请先阅读编辑须知协议', false);
-                    return
-                }
-                this.formData.shopId = GLOBAL_SHOP_ID
-                this.formData.imageList = this.filterImageList(this.fileList)
-                this.formData.videoList = this.filterVideoList(this.fileList)
-                await this.$refs.ruleForm.validate()
-                const params = {
-                    shopId: this.formData.shopId,
-                    id: this.formData.id, // 词条id
-                    name: this.formData.name, // 词条名称
-                    alias: this.formData.alias, // 义项名
-                    discription: this.formData.discription, // 词条概述
-                    image: this.formData.image, // 头图地址
-                    typeId: this.formData.typeId, // 分类id
-                    seoKeyword: this.formData.seoKeyword, // seo关键字
-                    status: this.formData.status, // 状态0保存草稿箱  1已发布
-                    infoListStr: JSON.stringify(this.formData.infoList), //  信息栏集合
-                    referenceListStr:JSON.stringify(this.formData.referenceList), // 参考资料集合
-                    textInfoListStr: JSON.stringify(this.formData.textInfoList),
-                    imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
-                    videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
-                    labelIds: this.formData.labelIds ? this.formData.labelIds.join(',') : '' // 关联标签库列表
-                };
-                console.log(params)
-                // 删除之前的数据
-                if(window.localStorage.getItem('form')) {
-                    window.localStorage.removeItem('form')
-                }
-                window.localStorage.setItem('form', JSON.stringify(params))
-                // this.previewSensitiveWordsValidate()
-                window.open('/supplier/encyclopedia/preview.html');
-            } catch (e) {
-                console.log(e)
-                this.socrllToErrorWord()
-            }
-        },
-        // 获取词条分类
-        fetchTypeList() {
-            const slef = this
-            shopBikeApi.FetchTypeList(function (res) {
-                slef.typeList = res.data
-            })
-        },
-
-        // 初始化表单列表项数据
-        initFormDataList(infoSize = 4, textInfoSize = 4) {
-            for (let i = 0; i < infoSize; i++) {
-                this.formData.infoList.push(this.genereateInfo())
-            }
-            for (let i = 1; i < textInfoSize; i++) {
-                this.formData.textInfoList.push(this.genereateTextInfo(i))
-            }
-        },
-
-        // ref dialog 隐藏
-        handleRefDialogClose() {
-            this.referenceData = initReferenceData()
-            this.$refs.referenceForm.clearValidate()
-            this.referenceDialog = false
-            this.referenceType = 1
-        },
-        // 提交确定ref
-        async handleConfirmReference() {
-            try {
-                await this.$refs.referenceForm.validate()
-                if (this.referenceEditType === 'add') {
-                    markCount+=1
-                    this.referenceData.ctrlId = this.contentEdit.parcel()
-                    this.formData.referenceList.push(deepClone(this.referenceData))
-                } else {
-                    const index = this.formData.referenceList.findIndex(ref => ref.ctrlId === this.referenceData.ctrlId);
-                    this.formData.referenceList.splice(index, 1, deepClone(this.referenceData))
-                }
-                this.referenceEditType = 'add'
-                this.referenceData = initReferenceData()
-                this.$refs.referenceForm.clearValidate()
-                this.referenceDialog = false
-                this.onBlured()
-            } catch (e) {
-                console.log(e)
-            }
-        },
-        handleSelectReference(item, index) {
-            this.referenceDialog = false
-            this.contentEdit.parcel(item.ctrlId, index+1)
-        },
-        handleReferenceTypeChange(value){
-            this.$refs.referenceForm.resetFields()
-            this.referenceData.referenceType = value
-        },
-        // ref tab 切换
-        handleTabChange(index) {
-            this.referenceType = index;
-        },
-        // 新增参考资料，从已有参考资料选取
-        handleToolbarClick(e) {
-            this.contentEdit = e
-            this.referenceDialog = true
-        },
-        // 参考资料修改
-        handleReferenceEdit(item) {
-            this.referenceEditType = 'edit'
-            this.referenceData = {
-                ...this.referenceType,
-                ...item
-            }
-            this.referenceDialog = true
-            if(this.referenceData.imageUrl){
-                this.referenceImageList = [{ url: this.referenceData.imageUrl, type: 'image' }]
-            }
-            console.log(1111)
-        },
-        // 参考资料删除
-        handleReferenceDelete(item) {
-            this.formData.referenceList = this.formData.referenceList.filter(ref => ref.ctrlId !== item.ctrlId)
-        },
-        // 信息栏数据
-        genereateInfo() {
-            return {
-                entryId: '',
-                infoName: '',
-                infoContent: '',
-                infoNamePlaceHolder: ''
-            }
-        },
-        //
-        getInfoNamePlaceHolder(index){
-            const text = ['中文名', '别名', '英文名', '尺寸']
-            return text[index]
-        },
-        // 新增信息栏
-        handleInfoAdd() {
-            this.formData.infoList.push(this.genereateInfo())
-            this.onFocused()
-        },
-        // 删除信息栏
-        handleInfoRemove(index) {
-            this.formData.infoList.splice(index, 1)
-            this.onFocused(0)
-            this.onBlured(0)
-        },
-        // 正文目录数据
-        genereateTextInfo(type, index) {
-            let placeholderList = ['一级标题', '二级标题', '内容']
-            let prefixList = [getChineseNum4(index), ]
-            let dictionaryContentPrefix = getChineseNum4(index)
-            return {
-                id: '',
-                entryId: '',
-                dictionaryContent: '',
-                dictionaryType: type,
-                referenceId: '',
-                textType: '',
-                parentId: '',
-                placeholder: placeholderList[type - 1]
-            }
-        },
-        // 添加正文目录
-        handleAddTextInfo(index, type) {
-            this.formData.textInfoList.splice(index + 1, 0, this.genereateTextInfo(type, index + 1))
-            this.onFocused()
-        },
-        // 删除正文目录
-        handleRemoveTextInfo(index, type) {
-            this.formData.textInfoList.splice(index, 1)
-            this.onFocused(0)
-            this.onBlured(0)
-        },
-        // 文件上传成功
-        handleUploadSuccess(fileList) {
-            this.fileList = [...this.fileList, ...fileList]
-            this.onBlured()
-        },
-        // 文件移除
-        handleFileRemove(file) {
-            this.fileList = this.fileList.filter(item => item.uuid !== file.uuid);
-            this.onFocused()
-            this.onBlured()
-        },
-        // 封面上传成功
-        handleCoverUploadSuccess(fileList) {
-            this.coverList = fileList
-            this.formData.image = fileList[0].url
-            this.onBlured()
-        },
-        // 封面删除
-        handleCoverRemove(file) {
-            this.formData.image = ''
-            this.coverList = this.coverList.filter(item => item.uuid !== file.uuid);
-            this.onFocused()
-            this.onBlured()
-        },
-        // 资料图片上传
-        handleReferenceImageUploadSuccess(fileList){
-            this.referenceImageList = fileList
-            this.referenceData.imageUrl = fileList[0].url
-        },
-        handleReferenceImageRemove(){
-            this.referenceImageList = []
-            this.referenceData.imageUrl = ''
-        },
-        // 返回文章列表页面
-        handleBack() {
-            window.open('/supplier/encyclopedia/list.html', 'supplier-entry-list');
-            window.close();
-        },
-        // 敏感词校验
-        sensitiveWordsValidate(params) {
-            const whiteList = [];
-            const self = this;
-            SupplierApi.ShopBaikeProductWordsValidate({checkPoint: 2}, function (res) {
-                let flag = true
-                for (const key in params) {
-                    if (!whiteList.includes(key)) {
-                        const target = JSON.stringify(params[key])
-                        const bool = new RegExp(res.data, 'g').test(target)
-                        if (bool) {
-                            const value = self.matchWords(target, res.data)
-                            self.$set(self.formValidate, key, value)
-                            flag = false
-                        } else {
-                            self.$set(self.formValidate, key, '')
-                        }
-                    }
-                }
-                if (flag) return self.onReallySave(params)
-                console.log(self.formValidate)
-                const tip = '当前发布内容存在敏感词，已为您标记在输入框下方，请修改后，再进行保存发布，强行保存发布将会导致审核不通过！'
-                self.$confirm(tip, '提示', {confirmButtonText: '保存', cancelButtonText: '取消'}).then(function () {
-                    self.onReallySave(params)
-                }).catch(function () {
-                    self.socrllToErrorWord() // 滚动到提示处
-                })
-            })
-        },
-        // 敏感词校验
-        sensitiveWordsValidate_new(params) {
-            const whiteList = [];
-            const self = this;
-            SupplierApi.ShopBaikeProductWordsValidate({checkPoint: 2}, function (res) {
-                let flag = true
-                for (const key in params) {
-                    if (!whiteList.includes(key)) {
-                        const target = JSON.stringify(params[key])
-                        const bool = new RegExp(res.data, 'g').test(target)
-                        if (bool) {
-                            const value = self.matchWords(target, res.data)
-                            self.$set(self.formValidate, key, value)
-                            flag = false
-                        } else {
-                            self.$set(self.formValidate, key, '')
-                        }
-                    }
-                }
-                if (flag) return self.onReallySave_new(params)
-                console.log(self.formValidate)
-                const tip = '当前发布内容存在敏感词，已为您标记在输入框下方，请修改后，再进行保存发布，强行保存发布将会导致审核不通过！'
-                self.$confirm(tip, '提示', {confirmButtonText: '保存', cancelButtonText: '取消'}).then(function () {
-                    self.onReallySave_new(params)
-                }).catch(function () {
-                    self.socrllToErrorWord() // 滚动到提示处
-                })
-            })
-        },
-        onReallySave_new(params) {
-            shopBikeApi.SaveEntrySumbit(params, (res) => {
-                CAIMEI.dialog('自动保存成功', false);
-                this.onFocused()
-            })
-        },
-        // 匹配敏感词
-        matchWords(word, validate) {
-            const list = []
-            const matcher = word.matchAll(new RegExp(validate, 'g'))
-            let done = false
-            while (!done) {
-                const item = matcher.next()
-                done = item.done
-                if (item.value) {
-                    list.push(item.value[0])
-                }
-            }
-            return list.join(',')
-        },
-
-        socrllToErrorWord() {
-            this.$nextTick(() => {
-                const scrollTop = $('.el-form-item__error').eq(0).parents('.el-form-item').offset().top
-                $('body,html').animate({
-                    scrollTop: scrollTop - $('#globalHead').height() - 60
-                }, 800)
-            })
-        },
-
-        async fetchQueryKeywordList(keyword){
-            try {
-                this.remoteLoading = true
-                const res = await PublicApi.fetchLabelKeywordList({keyword: keyword});
-                this.labelList = res.data
-                this.remoteLoading = false
-            }catch (e){
-                console.log(e);
-            }
-        },
-
-        initAutoInput(el, variable){
-            const self = this
-            new AutoComplete({
-                el: el,
-                callback:async function(keyword){
-                    try {
-                        const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
-                        if(!res.data) return [];
-                        return res.data.map(item => item.keyword);
-                    } catch (e) {
-                        console.log(e);
-                    }
-                },
-                itemClick: function (keyword) {
-                    self.formData[variable] = keyword
-                }
-            });
-        },
-    }
-})
+const ImageUpload = {
+    name: 'file-upload',
+    template: `
+        <div>
+            <input type="file" v-show="false" ref="fileInput" @change="handleFileChange" accept=".png,.jpg,.jpeg,.gif,.mp4"/>
+            <div class="bk-file-upload">
+                <template v-if="limit > list.length">
+                    <div class="bk-upload" @click="handleChooseFile"><div>+</div><div>{{ text }}</div></div>
+                </template>
+                <ul class="bk-file-wrap" v-if="list.length > 0">
+                    <template v-for="(item, index) in list">
+                        <li :key="index">
+                            <span @click="handleRemove(item)">×</span>
+                            <img :src="item.url" v-if="isImage(item)"/>
+                            <video :src="item.url" v-else></video>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+        </div>
+    `,
+    props: {
+        limit: {
+            type: Number,
+            default: 1
+        },
+        list: {
+            type: Array,
+            default: () => []
+        },
+        text: {
+            type: String,
+            default: () => '添加图片'
+        }
+    },
+    data() {
+        return {
+            fileList: []
+        }
+    },
+    methods: {
+        isImage(file) {
+            return file.type.indexOf('image') > -1
+        },
+        handleChooseFile() {
+            this.$refs.fileInput.click();
+        },
+        handleRemove(file) {
+            this.$emit('remove', file)
+        },
+        generageRowfile(file) {
+            return {
+                uuid: uuidv4(),
+                fileName: file.name,
+                size: file.size,
+                type: file.type,
+                file: file,
+                percentage: 0,
+                status: -1, // 0 上次失败 1 上传成功 2 上传中 -1 待上传
+                response: null,
+                url: '',
+                checkpoint: null
+            }
+        },
+        handleFileChange(e) {
+            const self = this
+            let flag = true
+            this.fileList = Array.from(e.target.files).map(function (file) {
+                if (file.size > 1024 * 1024 * 50) {
+                    CAIMEI.dialog('请上传50MB以内的图片或视频', false);
+                    flag = false
+                }
+                return self.generageRowfile(file)
+            })
+            if (!flag) return
+            this.onUploadFile(this.fileList)
+        },
+        // 文件上传成功
+        onUploadSuccess(file, response, url) {
+            file.response = response
+            file.status = 1
+            file.url = url
+            this.$emit('upload-success', this.fileList)
+        },
+        // 文件上传失败
+        onUploadError(file, error) {
+            file.response = error
+            file.status = 0
+            this.$emit('upload-error', this.fileList)
+        },
+        // 文件上传进度条
+        onProgress(file, response) {
+            const {p, cpt, res} = response
+            file.percentage = p * 100
+            file.checkpoint = cpt
+            file.response = res
+            file.status = 2
+            this.$emit('upload-progress', this.fileList)
+        },
+        // 上传文件
+        onUploadFile(fileList) {
+            upload(fileList, {
+                success: this.onUploadSuccess,
+                faild: this.onUploadError,
+                progress: this.onProgress
+            })
+        }
+    }
+}
+
+var markCount = 0
+
+function validateWebsite(rule, value, callback){
+    if(/[a-zA-z]+:\/\/[^\s]*/.test(value)){
+        callback()
+    }else{
+        callback(new Error('请输入合法的网址'))
+    }
+}
+
+function validateTimeStr(rule, value, callback){
+    if(/^\d{4}-\d{1,2}-\d{1,2}/.test(value)){
+        callback()
+    }else{
+        callback(new Error('时间格式不合法（示例：1970-01-01）'))
+    }
+}
+
+/**
+ * 根据阿拉伯数字返回对应的中文数字，支持到千
+ * @param {Number} num 阿拉伯数字
+ */
+function getChineseNum4(num) {
+    let result = ''
+    let unit = ['', '十', '百', '千']
+    let unitIndex = 0
+    while (num > 0) {
+        let temp = num % 10
+        if (temp > 0) {
+            result = getChineseNum1(temp) + unit[unitIndex] + result
+        }
+        num = Math.floor(num / 10)
+        unitIndex++
+    }
+    return result
+}
+
+/**
+ * 根据阿拉伯数字返回对应的中文数字，支持到一
+ * @param {Number} num 阿拉伯数字
+ */
+function getChineseNum1(num) {
+    let result = ''
+    let unit = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
+    if (num > 0 && num < 10) {
+        result = unit[num - 1]
+    }
+    return result
+}
+
+function initReferenceData(){
+    return {
+        id: 1,
+        ctrlId: '', // 关联id
+        /* （网络资料） */
+        referenceType: 1, // '参考类型资料（1.网络；2.著作；3.其他）'
+        website: '',
+        articleName: '',
+        websiteName: '',
+        publishTimeStr: '',
+        acitationTimeStr: '',
+        /* 著作资料）*/
+        author: '',
+        workName: '',
+        publicationPlace: '',
+        press: '',
+        publicationYearStr: '',
+        acitationWeb: '',
+        /* （其他资料） */
+        referenceDescription: '',
+        imageDescription: '',
+        imageUrl: '',
+        entryId: '',
+        entryType: ''
+    }
+}
+
+const edit = new Vue({
+    el: '#edit',
+    components: {
+        [contentEdit.name]: contentEdit,
+        [ImageUpload.name]: ImageUpload
+    },
+    filters: {
+        reference(data) {
+            if (data.referenceType === 1) return data.articleName
+            if (data.referenceType === 2) return data.author + '.' + data.workName
+            return data.referenceDescription + '.' + data.imageDescription
+        }
+    },
+    data: {
+        isPC: window.innerWidth > 768,
+        referenceType: 1, // 添加 | 引用参考资料类型
+        referenceDialog: false, // 参考资料表单弹窗
+        referenceEditType: 'add', // 参考资料编辑类型 add 添加 edit 编辑
+        contentEdit: null, // 编辑器
+        showAgreement: false,
+        // 提交表单数据
+        formData: {
+            shopId:'',
+            id: '', // 词条id
+            name: '', // 词条名称
+            alias: '', // 义项名
+            discription: '', // 词条概述
+            image: '', // 头图地址
+            banner: '', // banner 图片地址
+            typeId: '', // 分类id
+            seoKeyword: '', // seo关键字
+            labelIds: [], // 标签库
+            status: 0, // 状态0保存草稿箱  1已发布
+            infoList: [], //  信息栏集合
+            referenceList: [], // 参考资料集合
+            textInfoList: [],
+            imageList: [], // 概述图册集合
+            videoList: [], // 视频集合
+        },
+        // 提交表单校验
+        rules: {
+            name: [{required: true, message: '词条名称不能为空', trigger: ['blur']}],
+            alias: [{required: true, message: '义项名不能为空', trigger: ['change']}],
+            discription: [{required: true, message: '词条概述不能为空', trigger: ['change']}],
+            banner: [{required: true, message: 'banner图不能为空', trigger: ['change']}],
+            img: [{required: true, message: '请上传词条头图', trigger: ['change']}],
+            typeId: [{required: true, message: '请选择词条分类', trigger: ['change']}],
+            status: [{required: true, message: '请选择词条发布状态', trigger: ['change']}],
+        },
+        // 参考资料信息表单
+        referenceData: initReferenceData(),
+        // 参考资料表单规则校验
+        referenceRule: {
+            referenceType: [{required: true, message: '请选择参考类型资料', trigger: ['change']}],
+            website: [
+                {required: true, message: '请输入网址', trigger: ['blur']},
+                { validator: validateWebsite, trigger: 'blur' }
+            ],
+            articleName: [{required: true, message: '请输入文章名字', trigger: ['blur']}],
+            websiteName: [{required: true, message: '请输入网站名称', trigger: ['blur']}],
+            author: [{required: true, message: '请输入作者名称', trigger: ['blur']}],
+            workName: [{required: true, message: '请输入著作名', trigger: ['blur']}],
+            press: [{required: true, message: '请输入出版社', trigger: ['blur']}],
+            publicationYearStr: [{required: true, message: '请输入出版年', trigger: ['blur']}],
+            referenceDescription: [{required: true, message: '请输入参考资料说明', trigger: ['blur']}],
+        },
+        // 上传文件列表
+        fileList: [],
+        // 上传封面列表
+        coverList: [],
+        // banner 图片
+        bannerList: [],
+        //词条类型列表
+        typeList: [],
+        // 敏感词校验数据
+        formValidate: {},
+        referenceImageList: [],
+        labelList: [],
+        remoteLoading: false,
+        validTime: null,
+        isCheck:false
+    },
+    created() {
+        this.formData.id = CAIMEI.getUrlParam('id') || ''
+        this.fetchTypeList()
+        this.fetchQueryKeywordList()
+        // 如果是编辑就获取表单数据
+        if(this.formData.id){
+            this.fetchEntryData()
+        }else{
+            this.showAgreement = true
+            this.initFormDataList()
+        }
+    },
+    mounted(){
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+        this.initAutoInput('.seo-auto-input', 'seoKeyword')
+    },
+    watch: {
+        referenceDialog(val) {
+            if (val) {
+                setTimeout(() => {
+                    this.onFocused()
+                }, 500)
+            }
+        },
+    },
+    methods: {
+        onFocused(val = 300) {
+            setTimeout(() => {
+                this.validTime = null
+                console.log(111)
+                clearTimeout(this.validTime)
+            }, val)
+        },
+        onBlured(val = 200) {
+            setTimeout(() => {
+                this.isFocus = true
+                this.validFormRule()
+                console.log(222)
+            }, val)
+        },
+        // 自动保存校验
+        validFormRule() {
+            this.$refs.ruleForm.validate(valid => {
+                if (valid) {
+                    this.validTime = null
+                    clearTimeout(this.validTime)
+                    this.validTime = setTimeout(() => {
+                        if (this.validTime) {
+                            this.handleConfirm_new()
+                        }
+                        clearTimeout(this.validTime)
+                        this.validTime = null
+                    }, 2000)
+                }
+            })
+        },
+        handlerDiscrip() {
+            this.onFocused()
+        },
+        handlerTypeId() {
+            this.onBlured()
+        },
+        changeVisible($event) {
+            if ($event) {
+                this.onFocused()
+            } else {
+                this.onBlured()
+            }
+        },
+        // 获取表单数据
+        fetchEntryData(){
+            const self = this
+            shopBikeApi.FetchEntryDetail({id: this.formData.id}, function(res){
+                self.initFormData(res.data)
+            })
+        },
+        // 初始化表单数据
+        initFormData(data){
+            for (const key in this.formData) {
+                if(data.hasOwnProperty(key)){
+                    if(key === 'labelIds' && data[key]){
+                        this.formData[key] = data[key].split(',').map(v => parseInt(v));
+                    }else{
+                        this.formData[key] = data[key]
+                    }
+                }
+            }
+            const imageList = this.formData.imageList.map(item =>{
+                return {url: item.image, type: 'image'}
+            })
+            const videoList = this.formData.videoList.map(item =>{
+                return {fileName: item.fileName, uuid: item.ossName, url: item.url, type: 'video'}
+            })
+            this.fileList = [...imageList, ...videoList]
+            if(this.formData.image){
+                this.coverList = [{ url: this.formData.image, type: 'image' }]
+            }
+            const infoSize = 4 - this.formData.infoList.length
+            const textInfoSize = 4 - this.formData.textInfoList.length
+            this.initFormDataList( infoSize, textInfoSize)
+            window.markCount = this.formData.referenceList.length
+        },
+
+        // 获取图片列表
+        filterImageList(fileList) {
+            const imageList = fileList.filter(file => file.type.indexOf('image') > -1)
+            return imageList.map(file => ({entryId: '', image: file.url}))
+        },
+        // 获取视频列表
+        filterVideoList(fileList) {
+            const imageList = fileList.filter(file => file.type.indexOf('video') > -1)
+            return imageList.map(file => ({
+                entryId: '',
+                fileTitle: file.fileName,
+                fileName: file.fileName,
+                ossName: file.uuid,
+                ossUrl: file.url
+            }))
+        },
+        // 提交表单
+        async handleConfirm() {
+            try {
+                if(this.showAgreement){
+                    CAIMEI.dialog('请先阅读编辑须知协议', false);
+                    return
+                }
+                this.formData.shopId = GLOBAL_SHOP_ID
+                this.formData.imageList = this.filterImageList(this.fileList)
+                this.formData.videoList = this.filterVideoList(this.fileList)
+                await this.$refs.ruleForm.validate()
+                const params = {
+                    shopId: this.formData.shopId,
+                    id: this.formData.id, // 词条id
+                    name: this.formData.name, // 词条名称
+                    alias: this.formData.alias, // 义项名
+                    discription: this.formData.discription, // 词条概述
+                    image: this.formData.image, // 头图地址
+                    typeId: this.formData.typeId, // 分类id
+                    seoKeyword: this.formData.seoKeyword, // seo关键字
+                    status: this.formData.status, // 状态0保存草稿箱  1已发布
+                    infoListStr: JSON.stringify(this.formData.infoList), //  信息栏集合
+                    referenceListStr:JSON.stringify(this.formData.referenceList), // 参考资料集合
+                    textInfoListStr: JSON.stringify(this.formData.textInfoList),
+                    imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
+                    videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
+                    labelIds: this.formData.labelIds ? this.formData.labelIds.join(',') : '' // 关联标签库列表
+                };
+                this.sensitiveWordsValidate(params)
+            } catch (e) {
+                console.log(e)
+                this.socrllToErrorWord()
+            }
+        },
+        // 提交表单
+        async handleConfirm_new() {
+            try {
+                if(this.showAgreement){
+                    CAIMEI.dialog('请先阅读编辑须知协议', false);
+                    return
+                }
+                this.formData.shopId = GLOBAL_SHOP_ID
+                this.formData.imageList = this.filterImageList(this.fileList)
+                this.formData.videoList = this.filterVideoList(this.fileList)
+                await this.$refs.ruleForm.validate()
+                const params = {
+                    shopId: this.formData.shopId,
+                    id: this.formData.id, // 词条id
+                    name: this.formData.name, // 词条名称
+                    alias: this.formData.alias, // 义项名
+                    discription: this.formData.discription, // 词条概述
+                    image: this.formData.image, // 头图地址
+                    typeId: this.formData.typeId, // 分类id
+                    seoKeyword: this.formData.seoKeyword, // seo关键字
+                    status: this.formData.status, // 状态0保存草稿箱  1已发布
+                    infoListStr: JSON.stringify(this.formData.infoList), //  信息栏集合
+                    referenceListStr:JSON.stringify(this.formData.referenceList), // 参考资料集合
+                    textInfoListStr: JSON.stringify(this.formData.textInfoList),
+                    imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
+                    videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
+                    labelIds: this.formData.labelIds ? this.formData.labelIds.join(',') : '' // 关联标签库列表
+                };
+                this.sensitiveWordsValidate_new(params)
+            } catch (e) {
+                console.log(e)
+                this.socrllToErrorWord()
+            }
+        },
+        /// 确定提交
+        onReallySave(params) {
+            const self = this
+            shopBikeApi.SaveEntrySumbit(params, function (res) {
+                CAIMEI.dialog('词条保存成功', false);
+                setTimeout(function () {
+                    self.handleBack()
+                }, 500)
+            })
+        },
+
+        // 提交表单
+        async handlePreview() {
+            try {
+                if(this.showAgreement){
+                    CAIMEI.dialog('请先阅读编辑须知协议', false);
+                    return
+                }
+                this.formData.shopId = GLOBAL_SHOP_ID
+                this.formData.imageList = this.filterImageList(this.fileList)
+                this.formData.videoList = this.filterVideoList(this.fileList)
+                await this.$refs.ruleForm.validate()
+                const params = {
+                    shopId: this.formData.shopId,
+                    id: this.formData.id, // 词条id
+                    name: this.formData.name, // 词条名称
+                    alias: this.formData.alias, // 义项名
+                    discription: this.formData.discription, // 词条概述
+                    image: this.formData.image, // 头图地址
+                    typeId: this.formData.typeId, // 分类id
+                    seoKeyword: this.formData.seoKeyword, // seo关键字
+                    status: this.formData.status, // 状态0保存草稿箱  1已发布
+                    infoListStr: JSON.stringify(this.formData.infoList), //  信息栏集合
+                    referenceListStr:JSON.stringify(this.formData.referenceList), // 参考资料集合
+                    textInfoListStr: JSON.stringify(this.formData.textInfoList),
+                    imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
+                    videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
+                    labelIds: this.formData.labelIds ? this.formData.labelIds.join(',') : '' // 关联标签库列表
+                };
+                console.log(params)
+                // 删除之前的数据
+                if(window.localStorage.getItem('form')) {
+                    window.localStorage.removeItem('form')
+                }
+                window.localStorage.setItem('form', JSON.stringify(params))
+                // this.previewSensitiveWordsValidate()
+                window.open('/supplier/encyclopedia/preview.html');
+            } catch (e) {
+                console.log(e)
+                this.socrllToErrorWord()
+            }
+        },
+        // 获取词条分类
+        fetchTypeList() {
+            const slef = this
+            shopBikeApi.FetchTypeList(function (res) {
+                slef.typeList = res.data
+            })
+        },
+
+        // 初始化表单列表项数据
+        initFormDataList(infoSize = 4, textInfoSize = 4) {
+            for (let i = 0; i < infoSize; i++) {
+                this.formData.infoList.push(this.genereateInfo())
+            }
+            for (let i = 1; i < textInfoSize; i++) {
+                this.formData.textInfoList.push(this.genereateTextInfo(i))
+            }
+        },
+
+        // ref dialog 隐藏
+        handleRefDialogClose() {
+            this.referenceData = initReferenceData()
+            this.$refs.referenceForm.clearValidate()
+            this.referenceDialog = false
+            this.referenceType = 1
+        },
+        // 提交确定ref
+        async handleConfirmReference() {
+            try {
+                await this.$refs.referenceForm.validate()
+                if (this.referenceEditType === 'add') {
+                    markCount+=1
+                    this.referenceData.ctrlId = this.contentEdit.parcel()
+                    this.formData.referenceList.push(deepClone(this.referenceData))
+                } else {
+                    const index = this.formData.referenceList.findIndex(ref => ref.ctrlId === this.referenceData.ctrlId);
+                    this.formData.referenceList.splice(index, 1, deepClone(this.referenceData))
+                }
+                this.referenceEditType = 'add'
+                this.referenceData = initReferenceData()
+                this.$refs.referenceForm.clearValidate()
+                this.referenceDialog = false
+                this.onBlured()
+            } catch (e) {
+                console.log(e)
+            }
+        },
+        handleSelectReference(item, index) {
+            this.referenceDialog = false
+            this.contentEdit.parcel(item.ctrlId, index+1)
+        },
+        handleReferenceTypeChange(value){
+            this.$refs.referenceForm.resetFields()
+            this.referenceData.referenceType = value
+        },
+        // ref tab 切换
+        handleTabChange(index) {
+            this.referenceType = index;
+        },
+        // 新增参考资料，从已有参考资料选取
+        handleToolbarClick(e) {
+            this.contentEdit = e
+            this.referenceDialog = true
+        },
+        // 参考资料修改
+        handleReferenceEdit(item) {
+            this.referenceEditType = 'edit'
+            this.referenceData = {
+                ...this.referenceType,
+                ...item
+            }
+            this.referenceDialog = true
+            if(this.referenceData.imageUrl){
+                this.referenceImageList = [{ url: this.referenceData.imageUrl, type: 'image' }]
+            }
+            console.log(1111)
+        },
+        // 参考资料删除
+        handleReferenceDelete(item) {
+            this.formData.referenceList = this.formData.referenceList.filter(ref => ref.ctrlId !== item.ctrlId)
+        },
+        // 信息栏数据
+        genereateInfo() {
+            return {
+                entryId: '',
+                infoName: '',
+                infoContent: '',
+                infoNamePlaceHolder: ''
+            }
+        },
+        //
+        getInfoNamePlaceHolder(index){
+            const text = ['中文名', '别名', '英文名', '尺寸']
+            return text[index]
+        },
+        // 新增信息栏
+        handleInfoAdd() {
+            this.formData.infoList.push(this.genereateInfo())
+            this.onFocused()
+        },
+        // 删除信息栏
+        handleInfoRemove(index) {
+            this.formData.infoList.splice(index, 1)
+            this.onFocused(0)
+            this.onBlured(0)
+        },
+        // 正文目录数据
+        genereateTextInfo(type, index) {
+            let placeholderList = ['一级标题', '二级标题', '内容']
+            let prefixList = [getChineseNum4(index), ]
+            let dictionaryContentPrefix = getChineseNum4(index)
+            return {
+                id: '',
+                entryId: '',
+                dictionaryContent: '',
+                dictionaryType: type,
+                referenceId: '',
+                textType: '',
+                parentId: '',
+                placeholder: placeholderList[type - 1]
+            }
+        },
+        // 添加正文目录
+        handleAddTextInfo(index, type) {
+            this.formData.textInfoList.splice(index + 1, 0, this.genereateTextInfo(type, index + 1))
+            this.onFocused()
+        },
+        // 删除正文目录
+        handleRemoveTextInfo(index, type) {
+            this.formData.textInfoList.splice(index, 1)
+            this.onFocused(0)
+            this.onBlured(0)
+        },
+        // 文件上传成功
+        handleUploadSuccess(fileList) {
+            this.fileList = [...this.fileList, ...fileList]
+            this.onBlured()
+        },
+        // 文件移除
+        handleFileRemove(file) {
+            this.fileList = this.fileList.filter(item => item.uuid !== file.uuid);
+            this.onFocused()
+            this.onBlured()
+        },
+        // 封面上传成功
+        handleCoverUploadSuccess(fileList) {
+            this.coverList = fileList
+            this.formData.image = fileList[0].url
+            this.onBlured()
+        },
+        // 封面删除
+        handleCoverRemove(file) {
+            this.formData.image = ''
+            this.coverList = this.coverList.filter(item => item.uuid !== file.uuid);
+            this.onFocused()
+            this.onBlured()
+        },
+        // banner上传成功
+        handleBannerUploadSuccess(fileList) {
+            this.bannerList = fileList
+            this.formData.banner = fileList[0].url
+            this.onBlured()
+        },
+        // 封面删除
+        handleBannerRemove(file) {
+            this.formData.banner = ''
+            this.bannerList = this.bannerList.filter(item => item.uuid !== file.uuid);
+            this.onFocused()
+            this.onBlured()
+        },
+        // 资料图片上传
+        handleReferenceImageUploadSuccess(fileList){
+            this.referenceImageList = fileList
+            this.referenceData.imageUrl = fileList[0].url
+        },
+        handleReferenceImageRemove(){
+            this.referenceImageList = []
+            this.referenceData.imageUrl = ''
+        },
+        // 返回文章列表页面
+        handleBack() {
+            window.open('/supplier/encyclopedia/list.html', 'supplier-entry-list');
+            window.close();
+        },
+        // 敏感词校验
+        sensitiveWordsValidate(params) {
+            const whiteList = [];
+            const self = this;
+            SupplierApi.ShopBaikeProductWordsValidate({checkPoint: 2}, function (res) {
+                let flag = true
+                for (const key in params) {
+                    if (!whiteList.includes(key)) {
+                        const target = JSON.stringify(params[key])
+                        const bool = new RegExp(res.data, 'g').test(target)
+                        if (bool) {
+                            const value = self.matchWords(target, res.data)
+                            self.$set(self.formValidate, key, value)
+                            flag = false
+                        } else {
+                            self.$set(self.formValidate, key, '')
+                        }
+                    }
+                }
+                if (flag) return self.onReallySave(params)
+                console.log(self.formValidate)
+                const tip = '当前发布内容存在敏感词，已为您标记在输入框下方，请修改后，再进行保存发布，强行保存发布将会导致审核不通过！'
+                self.$confirm(tip, '提示', {confirmButtonText: '保存', cancelButtonText: '取消'}).then(function () {
+                    self.onReallySave(params)
+                }).catch(function () {
+                    self.socrllToErrorWord() // 滚动到提示处
+                })
+            })
+        },
+        // 敏感词校验
+        sensitiveWordsValidate_new(params) {
+            const whiteList = [];
+            const self = this;
+            SupplierApi.ShopBaikeProductWordsValidate({checkPoint: 2}, function (res) {
+                let flag = true
+                for (const key in params) {
+                    if (!whiteList.includes(key)) {
+                        const target = JSON.stringify(params[key])
+                        const bool = new RegExp(res.data, 'g').test(target)
+                        if (bool) {
+                            const value = self.matchWords(target, res.data)
+                            self.$set(self.formValidate, key, value)
+                            flag = false
+                        } else {
+                            self.$set(self.formValidate, key, '')
+                        }
+                    }
+                }
+                if (flag) return self.onReallySave_new(params)
+                console.log(self.formValidate)
+                const tip = '当前发布内容存在敏感词，已为您标记在输入框下方，请修改后，再进行保存发布，强行保存发布将会导致审核不通过！'
+                self.$confirm(tip, '提示', {confirmButtonText: '保存', cancelButtonText: '取消'}).then(function () {
+                    self.onReallySave_new(params)
+                }).catch(function () {
+                    self.socrllToErrorWord() // 滚动到提示处
+                })
+            })
+        },
+        onReallySave_new(params) {
+            shopBikeApi.SaveEntrySumbit(params, (res) => {
+                CAIMEI.dialog('自动保存成功', false);
+                this.onFocused()
+            })
+        },
+        // 匹配敏感词
+        matchWords(word, validate) {
+            const list = []
+            const matcher = word.matchAll(new RegExp(validate, 'g'))
+            let done = false
+            while (!done) {
+                const item = matcher.next()
+                done = item.done
+                if (item.value) {
+                    list.push(item.value[0])
+                }
+            }
+            return list.join(',')
+        },
+
+        socrllToErrorWord() {
+            this.$nextTick(() => {
+                const scrollTop = $('.el-form-item__error').eq(0).parents('.el-form-item').offset().top
+                $('body,html').animate({
+                    scrollTop: scrollTop - $('#globalHead').height() - 60
+                }, 800)
+            })
+        },
+
+        async fetchQueryKeywordList(keyword){
+            try {
+                this.remoteLoading = true
+                const res = await PublicApi.fetchLabelKeywordList({keyword: keyword});
+                this.labelList = res.data
+                this.remoteLoading = false
+            }catch (e){
+                console.log(e);
+            }
+        },
+
+        initAutoInput(el, variable){
+            const self = this
+            new AutoComplete({
+                el: el,
+                callback:async function(keyword){
+                    try {
+                        const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
+                        if(!res.data) return [];
+                        return res.data.map(item => item.keyword);
+                    } catch (e) {
+                        console.log(e);
+                    }
+                },
+                itemClick: function (keyword) {
+                    self.formData[variable] = keyword
+                }
+            });
+        },
+        // 点击协议
+        handlerShowAgreement () {
+            if (this.isCheck) {
+                this.showAgreement = false
+            } else {
+                CAIMEI.dialog('请阅读及勾选《采美百科用户服务协议》');
+            }
+        }
+    }
+})

src/main/resources/static/js/supplier-login/components/content-article.js

@@ -0,0 +1,41 @@
+const comArticle = {
+    name: 'comArticle',
+    props: {
+        content: {
+            type: String,
+            default: () => ''
+        },
+        id: {
+            type: Number,
+            default: () => 0
+        },
+        title: {
+            type: String,
+            default: () => ''
+        },
+        image: {
+            type: String,
+            default: () => ''
+        }
+    },
+    template:
+        `
+        <div class="article">
+            <div class="item-article">
+                <div class="article-bg">
+                    <el-image :src="image"></el-image>
+                </div>
+                <div class="article-content">
+                    <div class="title">{{ title }}</div>
+                    <div class="content text-line">{{ splitContent }}</div>
+                </div>
+            </div>
+        </div>
+    `,
+    computed: {
+        splitContent () {
+            if (this.content) return this.content.replace(/<[^>]+>/g, '').replace(/[ ]|[&nbsp;]/g, '')
+            else return ''
+        },
+    },
+}

src/main/resources/static/js/supplier-login/components/content-video.js

@@ -0,0 +1,28 @@
+const comVideo = {
+    name: 'comVideo',
+    props: {
+        content: {
+            type: String,
+            default: () => ''
+        },
+        id: {
+            type: Number,
+            default: () => 0
+        },
+        image: {
+            type: String,
+            default: () => ''
+        }
+    },
+    template:
+    `
+        <div class="com-video">
+            <div class="item-video">
+                <div class="video-bg">
+                    <el-image :src="image"></el-image>
+                </div>
+                <div class="video-content text-line">{{content}}</div>
+            </div>
+        </div>
+    `
+}

src/main/resources/static/js/supplier-login/more.js

@@ -0,0 +1,108 @@
+new Vue({
+    el: "#More",
+    components: {
+        comVideo,
+        comArticle
+    },
+    data: {
+        contentList: [
+            {
+                id: 0,
+                title: '美业企谈'
+            },
+            {
+                id: 1,
+                title: '干货知识'
+            }
+        ],
+        active: 0,
+        dataList: [],
+        params: {
+            pageSize: 10,
+            pageNum: 1
+        },
+        total: 1,
+        pageInput: ''
+    },
+    mounted () {
+        this.handlerActiveData()
+        this.handlerDataList()
+    },
+    computed: {
+        templateRowsNum () {
+            if (this.isPC) return Math.ceil(this.dataList.length / 4)
+            else return Math.ceil(this.dataList.length / 2)
+        },
+        pageTotal () {
+            let total = Math.ceil(this.total / this.params.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn () {
+            let total = Math.ceil(this.total / this.params.pageSize);
+            total = total > 0 ? total : 1;
+            let index = this.params.pageNum, arr = [];
+            if (total <= 6) {
+                for (let i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        },
+        isPC () {
+            return window.innerWidth > 768
+        }
+    },
+    methods: {
+        handlerDataList () {
+            const source = this.isPC ? 1 : 2
+            SupplierApi.supplierLoading(Object.assign(this.params, { source }),({ data }) => {
+                this.dataList = this.active === 0 ? data.landing.filter(e => e.type === '2') : data.landing.filter(e => e.type === '3')
+            })
+        },
+        handlerActiveTab ($event) {
+            this.active = $event.id
+            this.handlerDataList()
+        },
+        handlerVideo ($event) {
+            const src = $event.cmBrandFiles[0].ossUrl
+            if (src) {
+                this.playerOn(src)
+            }
+        },
+        handlerActiveData () {
+            const query = window.location.search.split('?')[1].split('=')
+            this[query[0]] = Number(query[1])
+        },
+        handlerArticle ($event) {
+            this.textInfo($event.id)
+        },
+        // 页码链接处理
+        paginationUrl (pageNum) {
+            this.params.pageNum = pageNum
+            this.handlerDataList()
+        },
+        checkNum () {},
+        // 播放器
+        playerOff() {
+            this.$refs.Myplayer.style.display = 'none'
+            this.$refs.cm_player.pause()
+        },
+        playerOn(src) {
+            this.$refs.Myplayer.style.display = 'flex'
+            this.$refs.cm_player.src = src
+            this.$refs.cm_player.play()
+        },
+        textInfo (id) {
+            const textInfoForm = this.dataList.filter(item => item.id === id)
+            this.textContent = textInfoForm[0]
+            if (localStorage.getItem('text_info_from')) {
+                localStorage.removeItem('text_info_from')
+            }
+            localStorage.setItem('text_info_from', JSON.stringify(this.textContent))
+            window.location.href = '/supplier-login/text_info.html'
+        },
+    }
+})

src/main/resources/templates/activity/beautyTopic.html

@@ -1,826 +1,826 @@
-<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="viewport" content="width=device-width, initial-scale=1.0"/>
-    <!--    <meta name="keywords" content="美业采购商城，美业信息平台，美业采购顾问，美业采购咨询，美容产品，美容仪器，医美产品，医美器械，二手仪器，美业正品联盟">-->
-    <!--    <meta name="description"-->
-    <!--          content="采美365网是一家专注于医美生美的B2B采购平台，拥有各类医疗器械资质和进出口资质，聚集全球众多知名供应商，上架丰富的医美生美产品和仪器，一站式解决美容机构的采购需求">-->
-    <link href="/css/activity/normalize.css" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="/css/activity/swiper.min.css"/>
-    <link th:href="@{/css/activity/beautyTopic.css(v=${version})}" rel="stylesheet" type="text/css">
-</head>
-<body ontouchstart>
-<input type="hidden" th:value="${coreServer}" id="coreServer">
-<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"
-                                            />
-                                            <img
-                                                    width="100%"
-                                                    height="100%"
-                                                    :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
-                                                    alt="/banner.jpg"
-                                                    v-else
-                                            />
-                                        </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"
-                                            />
-                                            <img
-                                                    width="100%"
-                                                    height="100%"
-                                                    :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
-                                                    alt="/banner.jpg"
-                                                    v-else
-                                            />
-                                        </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="/product-7963.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="/product-7963.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 class="cm-footer">
-        <img src="/img/activity/pc_bottom.png" alt=""/>
-        <p>——&nbsp;&nbsp;由采美网提供技术支持&nbsp;&nbsp;——</p>
-    </div>
-</div>
-<!-- 引入js文件 -->
-<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.6.0.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></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="@{/lib/vue2.6.12.min.js}"></script>
-<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/mixins/router.config.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic.js(v=${version})}"></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="viewport" content="width=device-width, initial-scale=1.0"/>
+    <!--    <meta name="keywords" content="美业采购商城，美业信息平台，美业采购顾问，美业采购咨询，美容产品，美容仪器，医美产品，医美器械，二手仪器，美业正品联盟">-->
+    <!--    <meta name="description"-->
+    <!--          content="采美365网是一家专注于医美生美的B2B采购平台，拥有各类医疗器械资质和进出口资质，聚集全球众多知名供应商，上架丰富的医美生美产品和仪器，一站式解决美容机构的采购需求">-->
+    <link href="/css/activity/normalize.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="/css/activity/swiper.min.css"/>
+    <link th:href="@{/css/activity/beautyTopic.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body ontouchstart>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<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" v-if="floorList.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>
+                    <!-- 普通列表 -->
+                    <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"
+                                            />
+                                            <img
+                                                    width="100%"
+                                                    height="100%"
+                                                    :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
+                                                    alt="/banner.jpg"
+                                                    v-else
+                                            />
+                                        </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"
+                                            />
+                                            <img
+                                                    width="100%"
+                                                    height="100%"
+                                                    :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
+                                                    alt="/banner.jpg"
+                                                    v-else
+                                            />
+                                        </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)) && (floorList.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>
+                    <!-- 列表式 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) && (floorList.length > 1)">
+                                <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)) && (floorList.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>
+                    <!-- 列表式 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="/product-7963.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="/product-7963.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 class="cm-footer">
+        <img src="/img/activity/pc_bottom.png" alt=""/>
+        <p>——&nbsp;&nbsp;由采美网提供技术支持&nbsp;&nbsp;——</p>
+    </div>
+</div>
+<!-- 引入js文件 -->
+<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.6.0.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></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="@{/lib/vue2.6.12.min.js}"></script>
+<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/mixins/router.config.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic.js(v=${version})}"></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>

src/main/resources/templates/article/components/article-drawer.html

@@ -1,111 +1,114 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
-<head>
-  <meta charset="UTF-8">
-  <link th:href="@{/css/article/drawer-footer.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">
-  <div id="drawer-footer" th:if="${isSelectInfo}">
-    <div class="hot-recommend" v-if="recommend.list && recommend.list.length > 0">
-      <div class="hot-recommend-title">
-        <div>热门推荐</div>
-        <div>
-          <a></a>
-        </div>
-      </div>
-      <div class="hot-recommend-content">
-        <div class="hot-recommend-content-item" v-for="item in recommend.list">
-          <div>
-            <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-              <img :src="item.image"/>
-            </a>
-          </div>
-          <div>
-            <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-              <p class="shuoming" v-html="item.title"></p>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="hot-recommend" th:if="${#arrays.length(productSellNumbers)} > 0">
-      <div class="hot-recommend-title">
-        <div>你可能感兴趣的商品</div>
-        <div>
-          <a href="/product/list.html">更多 ></a>
-        </div>
-      </div>
-      <div class="hot-recommend-content">
-        <div class="hot-recommend-content-item" th:each="product: ${productSellNumbers}">
-          <div>
-            <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
-              <img th:src="${product.image}" style="width: 100%;height: 100%;object-fit: contain;" />
-            </a>
-          </div>
-          <div>
-            <a th:text="${product.name}" th:href="'/product-'+${product.id}+'.html'" target="_blank"></a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="hot-recommend" th:if="${#arrays.length(archiveFiles)} > 0">
-      <div class="hot-recommend-title">
-        <div>您可能感兴趣的美业资料</div>
-        <div>
-          <a href="/info/articlerecommendation-0-1.html?isDocument">更多 ></a>
-        </div>
-      </div>
-      <div class="hot-recommend-content">
-        <div class="hot-recommend-content-item" th:each="file: ${archiveFiles}">
-          <div>
-            <a href="javascript:void(0)" target="_blank" th:onclick="handleFileUrl([[${file.productId}]])">
-              <img src="/img/article/PC--pdf.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'pdf')}">
-              <img src="/img/info/PC-doc.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'doc')}">
-              <img src="/img/info/PC-ppt.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'ppt')}">
-            </a>
-          </div>
-          <div>
-            <a th:text="${file.fileName}" target="_blank" href="javascript:void(0)" th:onclick="handleFileUrl([[${file.productId}]])"></a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-<!--    广告-->
-<div class="advertisement" th:if="${#arrays.length(ads)} > 0 and ${isSelectInfo}">
-  <a class="advertisement-link" th:each="ad : ${ads}" th:href="${ad.link}">
-    <img th:src="${ad.image}" th:alt="${ad.title}" class="advertisement-img"/>
-  </a>
-</div>
-<!--相关阅读-->
-<div class="related-Reading bg-filter" id="related-Reading" th:if="${isDetail} and ${#arrays.length(articles) > 0}">
-  <div class="related-content">
-    <div class="related-content-title">相关阅读</div>
-    <div class="related-content-close">&#10006</div>
-    <div class="related-content-item">
-      <div class="reading-content" th:each="item : ${articles}">
-        <a th:href="'/info/detail-'+${item.id}+'-1.html'" target="_blank">
-          <img th:src="${item.image}"/>
-        </a>
-        <div class="content-text">
-          <a th:href="'/info/detail-'+${item.id}+'-1.html'" class="content-title" target="_blank" th:text="${item.title}"></a>
-          <div class="content-icon">
-            <div class="icon-recommend">
-              <div></div>
-              <div>推荐</div>
-            </div>
-            <div class="icon-group">
-              <div class="icon-pv"></div>
-              <div class="icon-text" th:text="${item.pv}"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="UTF-8">
+  <link th:href="@{/css/article/drawer-footer.css(v=${version})}" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="drawer-footer">
+  <div class="drawer-footer"  th:if="${isSelectInfo}">
+    <div class="hot-recommend" v-if="recommend.list && recommend.list.length > 0">
+      <div class="hot-recommend-title">
+        <div>热门推荐</div>
+        <div>
+          <a></a>
+        </div>
+      </div>
+      <div class="hot-recommend-content">
+        <div class="hot-recommend-content-item" v-for="item in recommend.list">
+          <div>
+            <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+              <img :src="item.image"/>
+            </a>
+          </div>
+          <div>
+            <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+              <p class="shuoming" v-html="item.title"></p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="hot-recommend" th:if="${#arrays.length(productSellNumbers)} > 0">
+      <div class="hot-recommend-title">
+        <div>你可能感兴趣的商品</div>
+        <div>
+          <a href="/product/list.html">更多 ></a>
+        </div>
+      </div>
+      <div class="hot-recommend-content">
+        <div class="hot-recommend-content-item" th:each="product: ${productSellNumbers}">
+          <div>
+            <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+              <img th:src="${product.image}" style="width: 100%;height: 100%;object-fit: contain;" />
+            </a>
+          </div>
+          <div>
+            <a th:text="${product.name}" th:href="'/product-'+${product.id}+'.html'" target="_blank"></a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="hot-recommend" th:if="${#arrays.length(archiveFiles)} > 0">
+      <div class="hot-recommend-title">
+        <div>您可能感兴趣的美业资料</div>
+        <div>
+          <a href="/info/articlerecommendation-0-1.html?isDocument">更多 ></a>
+        </div>
+      </div>
+      <div class="hot-recommend-content">
+        <div class="hot-recommend-content-item" th:each="file: ${archiveFiles}">
+          <div>
+            <a href="javascript:void(0)" target="_blank" th:onclick="handleFileUrl([[${file.productId}]])">
+              <img src="/img/article/PC--pdf.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'pdf')}">
+              <img src="/img/info/PC-doc.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'doc')}">
+              <img src="/img/info/PC-ppt.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'ppt')}">
+            </a>
+          </div>
+          <div>
+            <a th:text="${file.fileName}" target="_blank" href="javascript:void(0)" th:onclick="handleFileUrl([[${file.productId}]])"></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--    广告-->
+  <div class="advertisement" th:if="${#arrays.length(ads)} > 0 and ${isSelectInfo}">
+    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+      <van-swipe-item class="advertisement-link" th:each="ad : ${ads}">
+        <a th:href="${ad.link}">
+          <img th:src="${ad.image}" th:alt="${ad.title}" class="advertisement-img"/>
+        </a>
+      </van-swipe-item>
+    </van-swipe>
+  </div>
+  <!--相关阅读-->
+  <div class="related-Reading bg-filter" id="related-Reading" th:if="${isDetail} and ${#arrays.length(articles) > 0}">
+    <div class="related-content">
+      <div class="related-content-title">相关阅读</div>
+      <div class="related-content-close">&#10006</div>
+      <div class="related-content-item">
+        <div class="reading-content" th:each="item : ${articles}">
+          <a th:href="'/info/detail-'+${item.id}+'-1.html'" target="_blank">
+            <img th:src="${item.image}"/>
+          </a>
+          <div class="content-text">
+            <a th:href="'/info/detail-'+${item.id}+'-1.html'" class="content-title" target="_blank" th:text="${item.title}"></a>
+            <div class="content-icon">
+              <div class="icon-recommend">
+                <div></div>
+                <div>推荐</div>
+              </div>
+              <div class="icon-group">
+                <div class="icon-pv"></div>
+                <div class="icon-text" th:text="${item.pv}"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

src/main/resources/templates/article/components/article-link.html

@@ -17,5 +17,5 @@
     <link th:href="@{/css/article/article.css(v=${version})}" rel="stylesheet" type="text/css">
     <!--element ui 样式表-->
     <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css"/>
-    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
+    <link rel="stylesheet" href="/lib/vant-ui/index.css"/>
 

src/main/resources/templates/article/components/article-sidebar.html

@@ -1,82 +1,84 @@
-<html xmlns:th="http://www.w3.org/1999/xhtml" >
-<div class="other" id="articleSide" v-cloak th:if="${isSelectInfo}">
-<!--    &lt;!&ndash;侧边栏Ross广告图&ndash;&gt;-->
-<!--    <div v-if="isPC && isRossShow" class="article-right-ross" :class="isRossShow ? 'show' : 'none'">-->
-<!--        <a href="/supplier-1378.html" v-if="isPC"><img src="/img/ross/ross-image@1x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a>-->
-<!--    </div>-->
-    <div v-if="isPC && recommend.list && recommend.list.length > 0" class="recommend">
-        <p class="classify readerSify">
-            热门推荐
-            <span class="nextPreBtn">
-                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
-                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>
-            </span>
-        </p>
-        <div class="row" v-for="item in recommend.list">
-            <div class="new-img xiao">
-                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                    <img :src="item.image"/>
-                </a>
-            </div>
-            <div class="new-blurb xiao">
-                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                    <p class="shuoming" v-html="item.title"></p>
-                </a>
-            </div>
-        </div>
-    </div>
-    <div v-if="isPC" class="recommend" th:if="${#arrays.length(productSellNumbers)} > 0">
-        <p class="classify readerSify">
-            你可能感兴趣的商品
-            <span class="more-product">
-<!--                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>-->
-<!--                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>-->
-                <a href="/product/list.html">更多 ></a>
-            </span>
-        </p>
-        <div class="row" th:each="product: ${productSellNumbers}" >
-            <div class="new-img xiao">
-                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
-                    <img th:src="${product.image}"/>
-                </a>
-            </div>
-            <div class="new-blurb xiao">
-                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
-                    <p class="shuoming" th:text="${product.name}"></p>
-                </a>
-            </div>
-        </div>
-    </div>
-    <div v-if="isPC" class="recommend" th:if="${#arrays.length(archiveFiles)} > 0">
-        <p class="classify readerSify">
-            您可能感兴趣的美业资料
-            <span class="more-product">
-<!--                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>-->
-<!--                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>-->
-                <a href="/info/articlerecommendation-0-1.html?isDocument">更多 ></a>
-            </span>
-        </p>
-        <div class="row" th:each="file: ${archiveFiles}">
-            <div class="new-img xiao">
-                <a href="javascript:void(0);" th:onclick="handleFileUrl([[${file.productId}]])" target="_blank">
-                    <img src="/img/article/PC--pdf.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'pdf')}">
-                    <img src="/img/info/PC-doc.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'doc')}">
-                    <img src="/img/info/PC-ppt.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'ppt')}">
-                </a>
-            </div>
-            <div class="new-blurb xiao">
-                <a target="_blank" href="javascript:void(0);" th:onclick="handleFileUrl([[${file.productId}]])">
-                    <p class="shuoming" th:text="${file.fileName}"></p>
-                </a>
-            </div>
-        </div>
-    </div>
-    <div v-if="isPC" class="tui">
-<!--        <a v-for="ad in adList" href="javascript:void(0);" class="tui-img" @click="clickAD(ad.id,ad.link)">-->
-<!--            <img :src="ad.image" alt="ad.title"/>-->
-<!--        </a>-->
-        <a th:each="ad : ${ads}" class="tui-img" th:href="${ad.link}" @click="clickAD(ad.id,ad.link)">
-            <img th:src="${ad.image}" th:alt="${ad.title}" />
-        </a>
-    </div>
-</div>
+<html xmlns:th="http://www.w3isRossShow.org/1999/xhtml">
+<div class="other" id="articleSide" v-cloak th:if="${isSelectInfo}">
+    <!--    &lt;!&ndash;侧边栏Ross广告图&ndash;&gt;-->
+    <!--    <div v-if="isPC && isRossShow" class="article-right-ross" :class="isRossShow ? 'show' : 'none'">-->
+    <!--        <a href="/supplier-1378.html" v-if="isPC"><img src="/img/ross/ross-image@1x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a>-->
+    <!--    </div>-->
+    <div v-if="isPC && recommend.list && recommend.list.length > 0" class="recommend">
+        <p class="classify readerSify">
+            热门推荐
+            <span class="nextPreBtn">
+                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
+                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>
+            </span>
+        </p>
+        <div class="row" v-for="item in recommend.list">
+            <div class="new-img xiao">
+                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                    <img :src="item.image"/>
+                </a>
+            </div>
+            <div class="new-blurb xiao">
+                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                    <p class="shuoming" v-html="item.title"></p>
+                </a>
+            </div>
+        </div>
+    </div>
+    <div v-if="isPC" class="recommend" th:if="${#arrays.length(productSellNumbers)} > 0">
+        <p class="classify readerSify">
+            你可能感兴趣的商品
+            <span class="more-product">
+<!--                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>-->
+                <!--                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>-->
+                <a href="/product/list.html">更多 ></a>
+            </span>
+        </p>
+        <div class="row" th:each="product: ${productSellNumbers}" >
+            <div class="new-img xiao">
+                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+                    <img th:src="${product.image}"/>
+                </a>
+            </div>
+            <div class="new-blurb xiao">
+                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+                    <p class="shuoming" th:text="${product.name}"></p>
+                </a>
+            </div>
+        </div>
+    </div>
+    <div v-if="isPC" class="recommend" th:if="${#arrays.length(archiveFiles)} > 0">
+        <p class="classify readerSify">
+            您可能感兴趣的美业资料
+            <span class="more-product">
+<!--                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>-->
+                <!--                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>-->
+                <a href="/info/articlerecommendation-0-1.html?isDocument">更多 ></a>
+            </span>
+        </p>
+        <div class="row" th:each="file: ${archiveFiles}">
+            <div class="new-img xiao">
+                <a href="javascript:void(0);" th:onclick="handleFileUrl([[${file.productId}]])" target="_blank">
+                    <img src="/img/article/PC--pdf.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'pdf')}">
+                    <img src="/img/info/PC-doc.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'doc')}">
+                    <img src="/img/info/PC-ppt.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'ppt')}">
+                </a>
+            </div>
+            <div class="new-blurb xiao">
+                <a target="_blank" href="javascript:void(0);" th:onclick="handleFileUrl([[${file.productId}]])">
+                    <p class="shuoming" th:text="${file.fileName}"></p>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+<div v-if="isPC" class="other" th:if="${isSelectInfo}">
+    <el-carousel :autoplay="true" :height="isPC ? '343px' : '61.6vw'" :interval="3000">
+        <el-carousel-item th:each="ad : ${ads}" class="tui-img">
+            <a class="tui-img" th:href="${ad.link}" @click="clickAD(ad.id,ad.link)">
+                <img th:src="${ad.image}" th:alt="${ad.title}">
+            </a>
+        </el-carousel-item>
+    </el-carousel>
+</div>
+</html>

src/main/resources/templates/article/list.html

@@ -5,6 +5,7 @@
     <title>信息平台</title>
     <template th:replace="article/components/article-link"></template>
     <template th:replace="components/analysis"></template>
+    <link rel="stylesheet" href="/lib/element-ui/index.css" type="text/css"/>
 </head>
 <body class="home listData">
 <div class="cm-modal"></div>
@@ -23,24 +24,53 @@
         </span>
     </div>
 </div>
-<div class="info-banner AppBanner" th:if="${isSearch} and ${articleImages}">
-    <div class="banner" th:each="type: ${articleImages}" th:if="${type.levelType} == 1 and ${type.headAppBanner}" >
-        <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">
-            <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" />
-        </a>
-        <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>
-    </div>
-    <div class="sider-banner">
-        <div th:each="type: ${articleImages}" th:if="${type.levelType} == 2 and ${type.headAppBanner}" >
-            <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">
-                <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" />
-            </a>
-            <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>
+
+<!--<template th:replace="article/components/article-swiper"></template>-->
+<!--    <div class="banner" th:each="type: ${articleImages}" th:if="${type.levelType} == 1 and ${type.headAppBanner}" >-->
+<!--        <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">-->
+<!--            <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" />-->
+<!--        </a>-->
+<!--        <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>-->
+<!--    </div>-->
+<!--    <div class="sider-banner">-->
+<!--        <div th:each="type: ${articleImages}" th:if="${type.levelType} == 2 and ${type.headAppBanner}" >-->
+<!--            <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">-->
+<!--                <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" />-->
+<!--            </a>-->
+<!--            <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>-->
+<!--        </div>-->
+<!--    </div>-->
+<!--</div>-->
+<!--主体内容-->
+<div class="content clearfix" id="ArticleContent" v-cloak>
+    <div class="info-banner AppBanner" th:if="${isSearch} and ${articleImages}">
+        <div class="banner">
+            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+                <van-swipe-item>1</van-swipe-item>
+                <van-swipe-item>2</van-swipe-item>
+                <van-swipe-item>3</van-swipe-item>
+                <van-swipe-item>4</van-swipe-item>
+            </van-swipe>
+        </div>
+        <div class="sider-banner">
+            <div class="sider-banner-1">
+                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+                    <van-swipe-item>1</van-swipe-item>
+                    <van-swipe-item>2</van-swipe-item>
+                    <van-swipe-item>3</van-swipe-item>
+                    <van-swipe-item>4</van-swipe-item>
+                </van-swipe>
+            </div>
+            <div class="sider-banner-2">
+                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+                    <van-swipe-item>1</van-swipe-item>
+                    <van-swipe-item>2</van-swipe-item>
+                    <van-swipe-item>3</van-swipe-item>
+                    <van-swipe-item>4</van-swipe-item>
+                </van-swipe>
+            </div>
         </div>
     </div>
-</div>
-<!--主体内容-->
-<div class="content clearfix" id="ArticleContent">
     <!--侧边栏Ross广告图-->
     <div class="mainData">
         <div class="new-list" id="articleList" v-cloak>
@@ -55,20 +85,49 @@
                 <div class="h5-notice-more"><a href="/info/articlerecommendation-3-1.html?isNotice">更多 ></a></div>
             </div>
             <div class="info-banner PcBanner" th:if="${isSearch} and ${articleImages}">
-                <div class="banner" th:each="type: ${articleImages}" th:if="${type.levelType} == 1 and ${type.headPcBanner}" >
-                    <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">
-                        <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />
-                    </a>
-                    <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>
+                <div class="banner">
+                    <el-carousel :autoplay="true" show-indicators="false">
+                        <el-carousel-item v-for="(item, index) in 5" :key="index">
+                            <a target="_blank">
+                                {{item}}
+                            </a>
+                        </el-carousel-item>
+                    </el-carousel>
                 </div>
                 <div class="sider-banner">
-                    <div th:each="type: ${articleImages}" th:if="${type.levelType} == 2 and ${type.headPcBanner}">
-                        <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">
-                            <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />
-                        </a>
-                        <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>
+                    <div>
+                        <el-carousel :autoplay="true" show-indicators="false">
+                            <el-carousel-item v-for="(item, index) in 5" :key="index">
+                                <a target="_blank">
+                                    {{item}}
+                                </a>
+                            </el-carousel-item>
+                        </el-carousel>
+                    </div>
+                    <div>
+                        <el-carousel :autoplay="true" show-indicators="false">
+                            <el-carousel-item v-for="(item, index) in 5" :key="index">
+                                <a target="_blank">
+                                    {{item}}
+                                </a>
+                            </el-carousel-item>
+                        </el-carousel>
                     </div>
                 </div>
+<!--                <div class="banner" th:each="type: ${articleImages}" th:if="${type.levelType} == 1 and ${type.headPcBanner}" >-->
+<!--                    <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">-->
+<!--                        <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />-->
+<!--                    </a>-->
+<!--                    <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>-->
+<!--                </div>-->
+<!--                <div class="sider-banner">-->
+<!--                    <div th:each="type: ${articleImages}" th:if="${type.levelType} == 2 and ${type.headPcBanner}">-->
+<!--                        <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">-->
+<!--                            <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />-->
+<!--                        </a>-->
+<!--                        <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>-->
+<!--                    </div>-->
+<!--                </div>-->
             </div>
             <!--    精选文章推荐-->
             <div class="featured-Articles" id="featured-Articles" th:if="${isSearch} and ${#arrays.length(infoSelected)} > 0">
@@ -138,7 +197,7 @@
             <div class="listData-select-title" th:if="${isSearch}">
                 <div class="search-select">
                     <div class="select-new" :class="params.sortType === 1 ? 'now-search-select' : '' " @click="selectListNew(1)">最新</div>
-                    <div class="select-earliest" :class="params.sortType === 2 ? 'now-search-select' : '' " @click="selectListNew(2)">最早</div>
+                    <div class="select-earliest" :class="params.sortType === 2 ? 'now-search-select' : '' " @click="selectListNew(2)">最热</div>
                 </div>
             </div>
             <div v-if="listData && listData.length>0" class="dataRousce">
@@ -241,9 +300,8 @@
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" src="/lib/datapicker/moment-2.29.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/datapicker/jquery.daterangepicker.js"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
 <script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
-<script type="text/javascript" src="/lib/element-ui/vant.min.js"></script>
+<script type="text/javascript" src="/lib/vant-ui/vant.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>

src/main/resources/templates/document/beauty-archive.html

@@ -1,110 +1,117 @@
-<!DOCTYPE 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>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>美业资料</title>
-    <link th:href="@{/css/document/beauty-archive.css(v=${version})}" rel="stylesheet" type="text/css">
-</head>
-<body>
-<input type="hidden" th:value="${coreServer}" id="coreServer">
-
-<div id="beautyArchive" v-cloak>
-
-    <!--顶部-->
-    <div class="cm-mobile-fixed">
-        <div class="cm-topbar">
-            <div class="cm-container cm-clearfix">
-                <div class="cm-fl cm-title" v-if="isPC">美业资料</div>
-                <div class="cm-fr">
-                    <div class="cm-search auto-input">
-                        <input class="cm-keyword" v-model="keyword" placeholder="请输入商品名称/供应商名" @keyup.enter="handleSearch(keyword)" type="text"/>
-                        <a href="javascript:void(0)" @click="handleSearch(keyword)" class="cm-search-btn icon"></a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!--tabs区域-->
-        <div class="cm-container cm-tabs" v-if="!openSearch">
-            <div class="cm-tab-item" :class="{ on: currentTab === index }" v-for="(tab, index) in tabList" :key="index"
-                 @click="tabClick(tab.id, index)" v-html="tab.name">
-            </div>
-        </div>
-    </div>
-    <div class="cm-container cm-tab-content">
-        <div :style="{paddingTop : openSearch ? '12vw' : '26vw',}" v-if="!isPC"></div>
-        <div class="cm-search-info" v-if="isPC && openSearch">为您找到相关结果<span v-html="total"></span>条</div>
-        <div class="cm-list">
-            <!--列表为空-->
-            <div class="cm-empty" :class="isPC ? 'cm-empty-pc' : 'cm-empty-h5'" v-if="productList.length == 0">
-                <img src="https://static.caimei365.com/app/img/icon2/PC-empty.png" v-if="isPC"/>
-                <img src="https://static.caimei365.com/app/img/icon2/H5-empty.png" v-else/>
-                <span>暂无资料~</span>
-            </div>
-            <!--列表不为空-->
-            <template v-for="(product, index) in productList">
-                <div class="cm-section cm-clearfix " :class="{'no-border': index === 0}" :key="index"
-                     @click="handleToDetail(product)">
-                    <div class="cm-fl cm-cover">
-                        <img :src="product.productImage ? product.productImage : '/img/base/placeholder.png'" :alt="product.shopName">
-                    </div>
-                    <div class="cm-fl cm-content">
-                        <div class="cm-title" v-if="openSearch" v-html="formatTitle(product.productName)"></div>
-                        <div class="cm-title" v-html="product.productName" v-else></div>
-                        <div class="cm-param">
-                            <span>供应商：</span>
-                            <span v-html="product.shopName || '暂无'"></span>
-                        </div>
-                        <div class="cm-param">
-                            <span>商品属性：</span>
-                            <span>{{ product.productType | productType }}</span>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </div>
-        <!-- H5加载更多 -->
-        <div class="cm-loading" v-if="!isPC  && productList.length>0">
-            <span class="cm-action" v-if="listLoading"></span>
-            <span class="cm-text" v-else>{{ loadingText }}</span>
-        </div>
-        <!-- PC分页 -->
-        <div v-if="isPC && totalPage > 1" class="pageWrap cm-clearfix">
-            <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)"
-               href="javascript:void(0);"></a>
-            <template v-for="n in pagination">
-                <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);">{{n}}</a>
-                <span v-else>···</span>
-            </template>
-            <a v-if="listQuery.pageNum < total" class="next" @click="toPagination(listQuery.pageNum*1+1)"
-               href="javascript:void(0);"></a>
-            <span>共<b v-text="totalPage > 1 ? totalPage : 1"></b>页</span>
-            <span>跳至</span>
-            <input v-model="jumpPageSize">
-            <span>页</span>&nbsp;
-            <a class="btn" href="javascript:void(0);" @click="toPagination(jumpPageSize)">点击跳转</a>
-        </div>
-        <!--listLoaidng动画-->
-        <div v-if="listLoading" class="loading">
-            <img src="/img/base/loading.gif">
-        </div>
-    </div>
-<!--    :class="{'cm-fixed-bottom':productList.length <= 2 }"  -->
-</div>
-
-<template th:replace="document/components/beautyIndustry-footer"></template>
-
-<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.6.0.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></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/mixins/router.config.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/beautyArchive.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/auto-input.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/document/beauty-archive.js(v=${version})}"></script>
-
-</body>
-</html>
+<!DOCTYPE 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>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>美业资料</title>
+    <link th:href="@{/css/document/beauty-archive.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+
+<div id="beautyArchive" v-cloak>
+    <!--顶部-->
+    <div class="cm-mobile-fixed">
+        <div class="cm-topbar">
+            <div class="head-back">
+                <div class="head">
+                    <div class="head-logo"></div>
+                    <div class="text">
+                        <a href="/info/center-3-1.html">信息平台</a>
+                    </div>
+                </div>
+            </div>
+            <div class="cm-container cm-clearfix">
+                <div class="cm-fl cm-title" v-if="isPC">美业资料</div>
+                <div class="cm-fr">
+                    <div class="cm-search auto-input">
+                        <input class="cm-keyword" v-model="keyword" placeholder="请输入商品名称/供应商名" @keyup.enter="handleSearch(keyword)" type="text"/>
+                        <a href="javascript:void(0)" @click="handleSearch(keyword)" class="cm-search-btn icon"></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--tabs区域-->
+        <div class="cm-container cm-tabs" v-if="!openSearch">
+            <div class="cm-tab-item" :class="{ on: currentTab === index }" v-for="(tab, index) in tabList" :key="index"
+                 @click="tabClick(tab.id, index)" v-html="tab.name">
+            </div>
+        </div>
+    </div>
+    <div class="cm-container cm-tab-content">
+        <div :style="{paddingTop : openSearch ? '12vw' : '26vw',}" v-if="!isPC"></div>
+        <div class="cm-search-info" v-if="isPC && openSearch">为您找到相关结果<span v-html="total"></span>条</div>
+        <div class="cm-list">
+            <!--列表为空-->
+            <div class="cm-empty" :class="isPC ? 'cm-empty-pc' : 'cm-empty-h5'" v-if="productList.length == 0">
+                <img src="https://static.caimei365.com/app/img/icon2/PC-empty.png" v-if="isPC"/>
+                <img src="https://static.caimei365.com/app/img/icon2/H5-empty.png" v-else/>
+                <span>暂无资料~</span>
+            </div>
+            <!--列表不为空-->
+            <template v-for="(product, index) in productList">
+                <div class="cm-section cm-clearfix " :class="{'no-border': index === 0}" :key="index"
+                     @click="handleToDetail(product)">
+                    <div class="cm-fl cm-cover">
+                        <img :src="product.productImage ? product.productImage : '/img/base/placeholder.png'" :alt="product.shopName">
+                    </div>
+                    <div class="cm-fl cm-content">
+                        <div class="cm-title" v-if="openSearch" v-html="formatTitle(product.productName)"></div>
+                        <div class="cm-title" v-html="product.productName" v-else></div>
+                        <div class="cm-param">
+                            <span>供应商：</span>
+                            <span v-html="product.shopName || '暂无'"></span>
+                        </div>
+                        <div class="cm-param">
+                            <span>商品属性：</span>
+                            <span>{{ product.productType | productType }}</span>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+        <!-- H5加载更多 -->
+        <div class="cm-loading" v-if="!isPC  && productList.length>0">
+            <span class="cm-action" v-if="listLoading"></span>
+            <span class="cm-text" v-else>{{ loadingText }}</span>
+        </div>
+        <!-- PC分页 -->
+        <div v-if="isPC && totalPage > 1" class="pageWrap cm-clearfix">
+            <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)"
+               href="javascript:void(0);"></a>
+            <template v-for="n in pagination">
+                <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);">{{n}}</a>
+                <span v-else>···</span>
+            </template>
+            <a v-if="listQuery.pageNum < total" class="next" @click="toPagination(listQuery.pageNum*1+1)"
+               href="javascript:void(0);"></a>
+            <span>共<b v-text="totalPage > 1 ? totalPage : 1"></b>页</span>
+            <span>跳至</span>
+            <input v-model="jumpPageSize">
+            <span>页</span>&nbsp;
+            <a class="btn" href="javascript:void(0);" @click="toPagination(jumpPageSize)">点击跳转</a>
+        </div>
+        <!--listLoaidng动画-->
+        <div v-if="listLoading" class="loading">
+            <img src="/img/base/loading.gif">
+        </div>
+    </div>
+<!--    :class="{'cm-fixed-bottom':productList.length <= 2 }"  -->
+</div>
+
+<template th:replace="document/components/beautyIndustry-footer"></template>
+
+<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.6.0.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></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/mixins/router.config.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/beautyArchive.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/auto-input.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/document/beauty-archive.js(v=${version})}"></script>
+
+</body>
+</html>

src/main/resources/templates/encyclopedia/detail.html

@@ -50,7 +50,7 @@
             </div>
             <div class="only-mobile bk-relevant">
                 <div class="bk-album">
-                    <div class="bk-title">透明质酸的概述图册</div>
+                    <div class="bk-title"><span th:text="*{name}"></span>的概述图册</div>
                     <div class="bk-album-list">
                         <div class="bk-album-item" th:each="item : *{imageList}">
                             <img th:src="${item.image}" th:if="${item.type == 1}">

src/main/resources/templates/index.html

@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css" />
     <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css" />
     <!--vant css-->
-    <link rel="stylesheet" href="/lib/vant/index.css" />
+    <link rel="stylesheet" href="/lib/vant-ui/index.css" />
     <template th:replace="components/analysis"></template>
 </head>
 <body>
@@ -651,7 +651,7 @@
     <!-- 引入底部 -->
     <template th:replace="components/footer"></template>
     <template th:replace="components/foot-link"></template>
-    <script type="text/javascript" src="/lib/vant/vant.min.js"></script>
+    <script type="text/javascript" src="/lib/vant-ui/vant.min.js"></script>
     <script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></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/mixins/cmsMixins.js(v=${version})}"></script>

src/main/resources/templates/product/detail.html

@@ -1,910 +1,910 @@
-
-<!DOCTYPE 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 th:text="'采美365网-'+${product.name}">采美365网-商品详情</title>
-    <meta name="referrer" content="no-referrer">
-    <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/product/detail.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet"
-          type="text/css">
-    <link th:href="@{/css/product/detail.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet"
-          type="text/css">
-    <link rel="stylesheet" type="text/css" href="/lib/css/viewer.min.css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-
-<!-- 商品详情 -->
-<div id="productDetail" v-cloak>
-    <input type="hidden" th:value="${productId}" id="productId">
-    <input type="hidden" th:value="${typeId}" id="typeId">
-    <input type="hidden" th:value="${product?.stock}" id="productStock">
-    <input type="hidden" th:value="${product?.visibility}" id="productVisibility">
-    <div class="wrap">
-        <div class="productBox clear">
-            <div class="imageBox" id="imgShown" th:object="${product}">
-                <div class="cm-product-cover-tag"  v-if="pcActType === 1"></div>
-                <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
-                <div v-if="isPC" class="bigImage">
-                    <img th:src="${images[0]}">
-                    <span class="mask"></span>
-<!--                    <span class="cm-product-cover-tag" v-if="isPC && pcActType === 1">云上美博会</span>-->
-                </div>
-                <div id="swiperImage" class="smallImage swiper-container">
-                    <ul class="swiper-wrapper clear">
-                        <li class="swiper-slide mfc" th:each="img : ${images}">
-                            <img th:src="${img}">
-<!--                            <span class="cm-product-cover-tag" v-if="!isPC && pcActType === 1">云上美博会</span>-->
-<!--                            <span class="cm-product-cover-tag" v-if="!isPC && pcActType === 1"></span>-->
-                        </li>
-                    </ul>
-                    <div class="swiper-pagination mfc"></div>
-                </div>
-                <div v-if="isPC" class="zoomImage">
-                    <div class="zoom">
-                        <img th:src="${images[0]}">
-                    </div>
-                </div>
-            </div>
-            <div class="detailBox" th:object="${product}">
-                <div class="product-collection" @click="handleCollection">
-                    <img :src="collectionType ? '/img/account/icon-collection@2x.png' : '/img/account/icon-collection-none@2x.png'"
-                         alt="">
-                    <p>{{ collectionType ? '已收藏' : '收藏' }}</p>
-                </div>
-                <div class="crumbss">
-                    <span v-text="'所属分类：'+productTypeName"></span>
-                </div>
-                <div class="Beautyfair">
-                    <span class="tag" v-if="beautyActFlag==1">美博会</span>
-                    <h1 class="title" th:text="*{name}">商品名称</h1>
-                </div>
-                <p class="tags">
-                    <span th:each="tag: *{tagList}" th:text="${tag}"></span>
-                </p>
-                <div class="detail" v-if="!isNoneDisabled">
-                    <div class="WeChat" v-if="isPC">
-                        <i class="icon"></i>微信客服
-                        <div class="WechatBg"><img src="/img/base/Wecha.png">
-                            <p>扫码添加采美微信客服咨询更快捷</p></div>
-                    </div>
-                    <div class="row price"><span class="l">会员价：</span>
-                        <!--登录-->
-                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
-                            <em v-if="priceObj.priceFlag==1" v-text="'￥价格未公开'"></em>
-                            <!--仅会员可见 -->
-                            <em v-else-if="priceObj.priceFlag==2 && GLOBAL_USER_IDENTITY == 4 && GLOBAL_VIP_FLAG!=1" class="red" v-text="'￥会员可见'"></em>
-                            <!--仅医美机构可见 -->
-                            <em v-else-if="priceObj.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)" class="red" v-text="'￥仅医美机构可见'"></em>
-                            <!--SVIP时的划线价格-->
-                            <!--满足条件：只有开通会员才显示划线价格-->
-                            <em v-else-if="GLOBAL_VIP_FLAG === 1 && priceObj.svipProductFlag === 1">
-                                <del v-text="'￥'+parseFloat(priceObj.originalPrice).toFixed(2)"></del>
-                            </em>
-                            <!--可见价格 -->
-                            <template v-else-if="(priceObj.priceFlag==0 && GLOBAL_USER_IDENTITY!=3) || GLOBAL_USER_IDENTITY ==2 || (GLOBAL_USER_IDENTITY==3 && priceObj.shopId==GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
-                                <em v-if="priceObj.actStatus==1 && promotions && promotions.type==1 && promotions.mode==1" class="p">
-                                    <del v-text="'￥'+parseFloat(priceObj.originalPrice).toFixed(2)"></del>
-                                </em>
-                                <em v-else class="p price">￥{{ priceObj.price | NumFormat }}</em>
-                            </template>
-                            <!--隐藏价格 -->
-                            <em v-else>￥<i th:attr="class=${'icon mIcon i'+product.priceGrade}"></i></em>
-                            <!--SVIP会员标签-->
-                            <div class="svip-tag" v-if="priceObj.svipProductFlag == 1">
-                                <div class="svip-icon">SVIP</div>
-                                <!-- !价格未公开 && ((个人机构 + SVIP) || 资质机构 ) 可查看价格 -->
-                                <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
-                                (priceObj.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
-                                (GLOBAL_USER_IDENTITY === 3 && priceObj.shopId==GLOBAL_SHOP_ID) ||
-                                GLOBAL_VIP_FLAG === 1">
-                                    <div class="svip-price" v-if="showVipPriceTag(priceObj)">
-                                        <span v-html="priceObj.svipPriceTag"></span>
-                                    </div>
-                                </template>
-                            </div>
-                        </template>
-                        <!--未登录-->
-                        <template v-else>
-                            <em>￥<i class="icon mIcon" id="priceGrade"></i></em>
-                            <!--SVIP会员标签 有svip会员价-->
-                            <div class="svip-tag" v-if="priceObj.svipProductFlag == 1">
-                                <div class="svip-icon">SVIP</div>
-                            </div>
-                        </template>
-                    </div>
-                    <template
-                            v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0 && priceObj.normalPrice>0 && ((priceObj.priceFlag==0 && priceObj.userIdentity!=3) || (priceObj.priceFlag==2 && priceObj.userIdentity==2) || (priceObj.priceFlag==3 && GLOBAL_CLUB_TYPE==1) || (priceObj.userIdentity==3 && priceObj.shopId==GLOBAL_SHOP_ID || GLOBAL_VIP_FLAG === 1))">
-                        <div class="row"><span class="l">市场价：</span>
-                            <em>
-                                <del v-text="'￥'+priceObj.normalPrice.toFixed(2)"></del>
-                            </em>
-                        </div>
-                    </template>
-                    <div class="row actStatus"
-                         v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0 && priceObj.actStatus==1 || ladderList.length >0">
-                        <span class="l">促销：</span>
-                        <template
-                                v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0 && ((priceObj.priceFlag==0 && priceObj.userIdentity!=3) || (priceObj.priceFlag==2 && priceObj.userIdentity==2) || (priceObj.priceFlag==3 && GLOBAL_CLUB_TYPE==1) || (priceObj.userIdentity==3 && priceObj.shopId==GLOBAL_SHOP_ID || GLOBAL_VIP_FLAG === 1))">
-                            <!-- 阶梯价 -->
-                            <div v-if="ladderList.length >0" class="priceTag">
-                                <i class="tag icon mIcon" @click="toggleThisLadder($event)">阶梯价格</i>
-                                <div class="ladder mFixed">
-                                    <span>
-                                        <em class="t"><i>价格</i><i>起订量</i></em>
-                                        <em v-for="l in ladderList">
-                                            <i class="p">￥{{ l.buyPrice | NumFormat }}</i>
-                                            <i v-text="l.numRange"></i>
-                                        </em>
-                                        <em @click="hideThisLadder($event)" class="close">了解</em>
-                                    </span>
-                                </div>
-                            </div>
-                            <!-- 促销活动 -->
-                            <div v-if="priceObj.actStatus==1 && promotions" class="priceTag">
-                                <i v-if="promotions.type==1 && promotions.mode==1 && priceObj.priceFlag!=1"
-                                   @click="toggleThisLadder($event)" class="tag icon mIcon"
-                                   v-text="promotions.name+'：¥'+toFloat(priceObj.price)"></i>
-                                <i v-else class="tag icon mIcon" @click="toggleThisLadder($event)"
-                                   v-text="promotions.name"></i>
-                                <div class="promotion mFixed">
-                                    <div>
-                                        <p class="t">
-                                            <em v-if="promotions.type==1 && promotions.mode==1"
-                                                v-text="priceObj.priceFlag==1?'价格未公开':(promotions.name+'：¥'+toFloat(promotions.touchPrice))"></em>
-                                            <em v-if="promotions.mode==2"
-                                                v-text="promotions.name+'，满 ¥'+toFloat(promotions.touchPrice)+' 减 ¥'+toFloat(promotions.reducedPrice)"></em>
-                                            <em v-if="promotions.mode==3"
-                                                v-text="promotions.name+'，满 ¥'+toFloat(promotions.touchPrice)+' 赠送商品'"></em>
-                                        </p>
-                                        <p>促销时间：<em v-if="promotions.status==1">不限时</em><em v-else
-                                                                                            v-text="promotions.beginTime.substr(0,10)+' ~ '+promotions.endTime.substr(0,10)"></em>
-                                        </p>
-                                        <p v-if="promotions.type==2" class="r"><a class="more"
-                                                                                  :href="'/product/promotions.html?id='+promotions.id">更多凑单商品>>></a>
-                                        </p>
-                                        <template v-if="promotions.mode==3">
-                                            <p>赠品：</p>
-                                            <p>
-                                                <span v-for="g in promotions.giftList" class="p">
-                                                    <img :src="g.image">
-                                                    <span v-text="g.name"></span>
-                                                    <span v-text="'× '+g.number"></span>
-                                                </span>
-                                            </p>
-                                        </template>
-                                        <p class="c"><a class="close" @click="hideThisLadder($event)"
-                                                        href="JavaScript:void(0);">了解</a></p>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                        <!-- 登录 -->
-                        <template v-else>
-                            <div v-if="priceObj.ladderPriceFlag==1 || priceObj.actStatus==1" class="priceTag">
-                                <i v-if="priceObj.ladderPriceFlag==1" class="tag icon mIcon"
-                                   @click="toggleThisLadder($event)">阶梯价格</i>
-                                <i v-if="priceObj.actStatus==1" class="tag icon mIcon" @click="toggleThisLadder($event)"
-                                   v-text="promotions?promotions.name:''"></i>
-                                <div class="promotion mFixed">
-                                    <div v-if="!GLOBAL_USER_ID">
-                                        <p v-if="priceObj.ladderPriceFlag==1"><em @click="toLogin">登录</em>，享受阶梯价格优惠</p>
-                                        <p v-if="priceObj.actStatus==1"><em @click="toLogin">登录</em>，参与促销活动</p>
-                                        <p class="c"><a class="close" @click="hideThisLadder($event)"
-                                                        href="JavaScript:void(0);">了解</a></p>
-                                    </div>
-                                    <div v-else>
-                                        <p v-if="priceObj.ladderPriceFlag==1 && priceObj.userIdentity==4"><em
-                                                @click="toUpgrade">升级会员</em>，享受阶梯价格优惠</p>
-                                        <p v-if="priceObj.actStatus==1 && priceObj.userIdentity==4"><em
-                                                @click="toUpgrade">升级会员</em>，参与促销活动</p>
-                                        <p class="c"><a class="close" @click="hideThisLadder($event)"
-                                                        href="JavaScript:void(0);">了解</a></p>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                    <div class="row" v-if="productCoupon.length>0">
-                        <span class="l">优惠券：</span>
-                        <span class="coupon-tags">
-                            <em class="couponTag" v-for="(coupon, index) in productCoupon" :key="index"
-                                v-text="'满'+coupon.touchPrice+'减'+coupon.couponAmount"></em>
-                            <em class="couponTag-more" @click="showPopup">更多></em>
-                        </span>
-                    </div>
-                    <div th:if="not${#strings.isEmpty(product.brandName)}" class="row"><span class="l">品牌：</span><em
-                            th:text="*{brandName}"></em></div>
-                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                        <div class="row">
-                            <span class="l">包装规格：</span>
-                            <div class="unit-tags">
-                                <span class="unitTags" @click="handleChoisSku(sku,index)" v-for="(sku, index) in priceObj.skus" :key="index" :class="skuIndex === index ? 'active':''">
-                                    {{ sku.unit }}
-                                    <i class="tips" v-if="sku.stock ===0">缺货</i>
-                                </span>
-                            </div>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div class="row">
-                            <span class="l">包装规格：</span>
-                            <div class="unit-tags">
-                                <span class="unitTags" th:attr="data-grade=${sku.priceGrade}" th:each="sku,skuStat:*{skus}" th:if="${not #strings.isEmpty(product.skus)}">
-                                    <span th:text="${sku.unit}"></span>
-                                    <i class="tips" th:if="${sku.stock == 0}">缺货</i>
-                                </span>
-                            </div>
-                        </div>
-                    </template>
-                    <div class="row" th:if="not${#strings.isEmpty(product.productCode)}"><span
-                            class="l">商品编码：</span><em th:text="*{productCode}"></em></div>
-                    <div class="row"><span class="l">库存：</span>
-                        <em id="prosductStock" th:text="*{stock}"></em>
-                    </div>
-                    <div class="row"><span class="l">起订量：</span>
-                        <em id="proMinBuyNumber" th:text="*{minBuyNumber}"></em>
-                    </div>
-                    <div v-show="GLOBAL_USER_ID && GLOBAL_USER_ID>0" class="row"><span class="l">采购量：</span>
-                        <span class="number">
-                            <em class="sub" @click="numberSub">-</em>
-                            <input type="number" :value="number" v-model="number" maxlength='6'
-                                   @change="numberChange">
-                            <em class="add" @click="numberAdd">+</em>
-                        </span>
-                        <input type="hidden" th:value="*{step}">
-                    </div>
-                    <hr>
-                    <div class="row"><span class="l">服务：</span>
-                        <em class="ser icon mIcon">无忧退货</em>
-                        <em class="ser icon mIcon">快速退款</em>
-                        <em class="ser icon mIcon">正品保证</em>
-                    </div>
-                </div>
-                <div v-else class="none-details" :class="isNoneDisabled ? 'show':''">
-                    <img class="none-image" src="/img/base/icon-none.svg" alt="">
-                    <p class="none-text">此商品已{{disabledText}},请浏览以下推荐商品~</p>
-                    <p class="none-text">咨询类似商品，请联系客服!</p>
-                </div>
-                <div v-if="!isPC" class="wechatH5 btnBox"><img src="/img/base/wechat.h5.png" style="padding: 2.7vw 0">
-                </div>
-                <template v-if="!isHideButton">
-                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                        <div class="btnBox" v-if="priceObj.priceFlag==2 && priceObj.userIdentity==4 && GLOBAL_VIP_FLAG !== 1">
-                            <a class="upgrade" href="/user/setting/upgrade.html"
-                               onclick="_czc.push(['_trackEvent','商品详情','点击','升级查看价格','','Um_Event_ProductUpgrade'])">升级会员查看价格</a>
-                        </div>
-                        <div class="btnBox"
-                             v-else-if="(priceObj.priceFlag==0 && priceObj.userIdentity!=3) ||
-                                    (priceObj.priceFlag==2 && priceObj.userIdentity==2) ||
-                                    (priceObj.priceFlag==2 && GLOBAL_VIP_FLAG === 1) ||
-                                    (priceObj.priceFlag==3 && GLOBAL_CLUB_TYPE === 1)">
-
-                            <a href="javascript:void(0);" class="cart icon"  :class="isDetailsBtnDisable ? 'disable' : ''" @click='handleAddShopCart' v-if="!isNoneDisabled"
-                               onclick="_czc.push(['_trackEvent','商品详情','点击','加入购物车','','Um_Event_ProductAddCart'])">加入购物车</a>
-                            <a href="javascript:void(0);" class="buy" :class="isDetailsBtnDisable ? 'disable' : ''" @click="handleBuyNowSubmit" v-if="!isNoneDisabled"
-                               onclick="_czc.push(['_trackEvent','商品详情','点击','立即购买','','Um_Event_ProductBuyConfirm'])">立即购买</a>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div class="btnBox">
-                            <a href="javascript:void(0);" class="upgrade" @click="toLogin" v-if="!isNoneDisabled"
-                               onclick="_czc.push(['_trackEvent','商品详情','点击','登录查看价格','','Um_Event_ProductLoginPrice'])">登录查看价格</a>
-                        </div>
-                    </template>
-                </template>
-            </div>
-        </div>
-        <!--配套商品区域-->
-        <div class="wrap" v-if="!isNoneDisabled && isShowSupportingList && defaultSupportingList.length>0">
-            <div class="product-supporting">
-                <!--PC-->
-                <template v-if="isPC">
-                    <div class="product-supporting-title">配套商品</div>
-                    <div class="product-supporting-content">
-                        <div class="product-supporting-td">
-                            <p class="td-1">商品图片</p>
-                            <p class="td-2">商品名称</p>
-                            <p class="td-3">规格</p>
-                            <p class="td-4">价格</p>
-                            <p class="td-5">采购量</p>
-                            <p class="td-6">选择</p>
-                        </div>
-                        <div class="product-supporting-pro">
-                            <div class="product-supporting-list" v-for="(pros,index) in defaultSupportingList" :class="index == 0 ? 'active' : ''">
-                                <div class="tr tr-1">
-                                    <a :href="'/product-'+pros.productId+'.html'" target="_blank">
-                                        <img class="smalltype" src="/img/base/icon-smalltype@2x.png" alt="" v-if="pros.productType == 2">
-                                        <img class="images" :src="pros.image" :alt="pros.name">
-                                    </a>
-                                </div>
-                                <div class="tr tr-2">
-                                    <a :href="'/product-'+pros.productId+'.html'" target="_blank">
-                                        <p v-html="pros.name"></p>
-                                    </a>
-                                </div>
-                                <div class="tr tr-3">
-                                     <div class="sku-popup" @click="handleShowPopup(pros,index)">
-                                        <p class="sku-text" v-text="pros.unit"></p>
-                                        <div class="sku-icon"><i class="icon"></i></div>
-                                    </div>
-                                    <div class="sku-popup-viw" v-if="currentIndex === index && showSkuPopup">
-                                        <div class="sku-title">
-                                            <div class="sku-image"><img :src="handlePros.image" :alt="handlePros.name"></div>
-                                            <div class="sku-price">
-                                                <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
-                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                                                    <!--0公开价格 1不公开价格 2仅对会员机构公开-->
-                                                    <div class="main_price_unde" v-if="handlePros.priceFlag==1">￥价格未公开</div>
-                                                    <!--机构价仅会员可见 && 用户是普通机构-->
-                                                    <div class="main_price_unde" v-else-if="handlePros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
-                                                        ￥会员可见
-                                                    </div>
-                                                    <!--机构价仅会员可见 && 用户是普通机构-->
-                                                    <div class="main_price_unde" v-else-if="handlePros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
-                                                        ￥仅医美机构可见
-                                                    </div>
-                                                    <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
-                                                    <template
-                                                            v-else-if="GLOBAL_USER_IDENTITY === 2 || (handlePros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && pros.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
-                                                        <div class="main_price_show"
-                                                             :class="{none: PromotionsFormat(handlePros.promotions) || (handlePros.svipProductFlag === 1 && showVipPriceTag(handlePros))}">
-                                                            ￥{{ (PromotionsFormat(handlePros.promotions) || showVipPriceTag(handlePros) ? handlePros.originalPrice :
-                                                            handlePros.price ) | NumFormat }}
-                                                        </div>
-                                                    </template>
-                                                    <!--供应商除自己的商品外，也显示价格等级-->
-                                                    <div class="price_grade" v-else><span class="bold">￥</span><i
-                                                            :class="'icon mIcon i'+handlePros.priceGrade"></i></div>
-                                                    <div class="price_text_tag clear">
-                                                        <p class="couponTag" v-if="handlePros.couponsLogo">优惠券</p>
-                                                        <template v-if="handlePros.svipProductFlag === 1">
-                                                            <div class="svip-tag">
-                                                                <div class="svip-icon">SVIP</div>
-                                                                <template v-if="showVipPriceTag(handlePros)">
-                                                                    <div class="svip-price">
-                                                                        <span v-html="handlePros.svipPriceTag"></span>
-                                                                    </div>
-                                                                </template>
-                                                            </div>
-                                                        </template>
-                                                        <template v-else>
-                                                            <p class="listTag" v-if="handlePros.actStatus==1">{{handlePros.promotions.name}}
-                                                                <span v-if="handlePros.priceFlag != 1 && PromotionsFormat(handlePros.promotions)">:￥{{handlePros.price | NumFormat}}</span>
-                                                            </p>
-                                                        </template>
-                                                    </div>
-                                                </template>
-                                                <template v-else>
-                                                    <div class="price_grade"><i :class="'icon mIcon i'+handlePros.priceGrade"></i></div>
-                                                    <div class="price_text_tag">
-                                                        <p class="couponTag" v-if="handlePros.couponsLogo">优惠券</p>
-                                                        <template v-if="handlePros.svipProductFlag === 1">
-                                                            <div class="svip-tag">
-                                                                <div class="svip-icon">SVIP</div>
-                                                            </div>
-                                                        </template>
-                                                        <template v-else>
-                                                            <p class="listTag" v-if="handlePros.actStatus==1">{{handlePros.promotions.name}}</p>
-                                                        </template>
-                                                    </div>
-                                                </template>
-                                            </div>
-                                        </div>
-                                        <div class="sku-h1">规格:</div>
-                                        <div class="sku-unit">
-                                                <span class="unitTags" @click="handleSupportingChoisSku(pros,sku,index)" v-for="(sku, index) in handlePros.skus" :key="index" :class="skuSupportingIndex === index ? 'active':''">
-                                                    {{ sku.unit }}
-                                                    <i class="tips" v-if="sku.stock ===0">缺货</i>
-                                                </span>
-                                        </div>
-                                        <div class="sku-button">
-                                            <div class="sku-button-center">
-                                                <a class="sku-btn cancel" href="javascript:void(0);" @click="handleSkuCancel(pros)">取消</a>
-                                                <a class="sku-btn confirm" :class="isbtnDisable ? 'disable' : ''" href="javascript:void(0);" @click="handleSkuConfirm(pros)">确定</a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="tr tr-4">
-                                    <div class="price">
-                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
-                                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                                            <!--0公开价格 1不公开价格 2仅对会员机构公开-->
-                                            <div class="main_price_unde" v-if="pros.priceFlag==1">￥价格未公开</div>
-                                            <!--机构价仅会员可见 && 用户是普通机构-->
-                                            <div class="main_price_unde" v-else-if="pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
-                                                ￥会员可见
-                                            </div>
-                                            <!--机构价仅会员可见 && 用户是普通机构-->
-                                            <div class="main_price_unde" v-else-if="pros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
-                                                ￥仅医美机构可见
-                                            </div>
-                                            <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
-                                            <template
-                                                    v-else-if="GLOBAL_USER_IDENTITY === 2 || (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && pros.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
-                                                <div class="main_price_show"
-                                                     :class="{none: PromotionsFormat(pros.promotions) || (pros.svipProductFlag === 1 && showVipPriceTag(pros))}">
-                                                    ￥{{ (PromotionsFormat(pros.promotions) || showVipPriceTag(pros) ? pros.originalPrice :
-                                                    pros.price ) | NumFormat }}
-                                                </div>
-                                            </template>
-                                            <!--供应商除自己的商品外，也显示价格等级-->
-                                            <div class="price_grade" v-else><span class="bold">￥</span><i
-                                                    :class="'icon mIcon i'+pros.priceGrade"></i></div>
-                                            <div class="price_text_tag clear">
-                                                <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
-                                                <template v-if="pros.svipProductFlag === 1">
-                                                    <div class="svip-tag">
-                                                        <div class="svip-icon">SVIP</div>
-                                                        <template v-if="showVipPriceTag(pros)">
-                                                            <div class="svip-price">
-                                                                <span v-html="pros.svipPriceTag"></span>
-                                                            </div>
-                                                        </template>
-                                                    </div>
-                                                </template>
-                                                <template v-else>
-                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}
-                                                        <span v-if="pros.priceFlag != 1 && PromotionsFormat(pros.promotions)">:￥{{pros.price | NumFormat}}</span>
-                                                    </p>
-                                                </template>
-                                            </div>
-                                        </template>
-                                        <template v-else>
-                                            <div class="price_grade"><i :class="'icon mIcon i'+pros.priceGrade"></i></div>
-                                            <div class="price_text_tag">
-                                                <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
-                                                <template v-if="pros.svipProductFlag === 1">
-                                                    <div class="svip-tag">
-                                                        <div class="svip-icon">SVIP</div>
-                                                    </div>
-                                                </template>
-                                                <template v-else>
-                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
-                                                </template>
-                                            </div>
-                                        </template>
-                                    </div>
-                                </div>
-                                <div class="tr tr-5">
-                                    <span class="number">
-                                        <em class="sub" @click="supportingNumberSub(pros)">-</em>
-                                        <input type="number" :value="pros.number" v-model="pros.number" @change="supportingNumberChange(pros)">
-                                        <em class="add" @click="supportingNumberAdd(pros)">+</em>
-                                    </span>
-                                </div>
-                                <div class="tr tr-6">
-                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                                        <template v-if="pros.priceFlag == 1 || (pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4) || GLOBAL_USER_IDENTITY == 3">
-                                            <div class="checked-box">
-                                                <p>不可选择</p>
-                                            </div>
-                                        </template>
-                                        <template v-else>
-                                            <div class="checked-box" @click="checkedSoperv(pros)">
-                                                <input class="check" type="checkbox" @change="" v-model="pros.isChecked">
-                                            </div>
-                                        </template>
-                                    </template>
-                                    <template v-else>
-                                        <div class="checked-box">
-                                            <p>不可选择</p>
-                                        </div>
-                                    </template>
-                                </div>
-                            </div>
-                            <div class="product-supporting-more" v-if="isShowMoreButton">
-                                <div class="more" @click="showSupportingMore">
-                                    <i class="icon mIcon"></i>
-                                    查看更多
-                                </div>
-                            </div>
-                        </div>
-                        <div class="product-supporting-button">
-                            <div class="product-supporting-total">
-                                <p>共 <span class="ore">{{ totalNumber }}</span>件商品，合计:<span class="red">￥{{ totalPrice | NumFormat }}元</span></p>
-                            </div>
-                            <div class="product-supporting-btn">
-                                <div class="btn buy" @click="handleSupportingSubmit('buy')">立即购买</div>
-                                <div class="btn add" @click="handleSupportingSubmit('add')">加入购物车</div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-                <!--H5-->
-                <template v-else>
-                    <div class="product-supporting-title">配套商品({{ supportingList.length }})</div>
-                    <div class="product-supporting-content">
-                        <a :href="'/product/product-supporting.html?productId='+productId">
-                            <div class="product-supporting-list" v-for="(pros,index) in defaultSupportingList" :key="index" v-if="index<3">
-                                <img :src="pros.image" :alt="pros.name">
-                            </div>
-                            <div class="product-supporting-more">
-                                <i class="icon mIcon"></i>
-                            </div>
-                        </a>
-                    </div>
-                </template>
-            </div>
-        </div>
-        <!--相关推荐区域-->
-        <div v-if="!GLOBAL_USER_ID" class="recommendBox" th:if="${lists.size()>0}">
-            <div class="hd">相关推荐</div>
-            <div id="productRecommend" class="swiper-container">
-                <ul class="swiper-wrapper" v-cloak>
-                    <li class="swiper-slide mfc" th:each="p : ${lists}">
-                        <div class="item">
-                            <a class="image" th:href="'/product-'+${p.id}+'.html'" target="_blank">
-                                <img th:src="${p.image}" th:alt="${p.name}"
-                                     onerror="javascript:this.src='/img/base/placeholder.png';">
-                                <span th:html="${p.name}"></span>
-                            </a>
-                        </div>
-                    </li>
-                    <!--<li class="swiper-slide  defaulImg" v-for="(item,index) in recommendIndex">
-                       <div class="item">
-                            <a href="javascript:0" class="image">
-                                <img src="/img/base/placeholder.png" alt="">
-                            </a>
-                     </div>
-                    </li>-->
-                </ul>
-                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
-            </div>
-        </div>
-        <div class="recommendBox" v-if="GLOBAL_USER_ID && recommends.length>0">
-            <div class="hd">相关推荐</div>
-            <div id="productRecommend" class="swiper-container">
-                <ul class="swiper-wrapper" v-cloak>
-                    <li class="swiper-slide mfc" v-for="p in recommends">
-                        <div class="item">
-                            <a class="image" :href="'/product-'+p.productId+'.html'" target="_blank">
-                                <img :src="p.image" :alt="p.name"
-                                     onerror="javascript:this.src='/img/base/placeholder.png';">
-                                <span v-html="p.name"></span>
-                            </a>
-                        </div>
-                    </li>
-                    <!--<li class="swiper-slide  defaulImg" v-for="(item,index) in recommendIndex">
-                       <div class="item">
-                            <a href="javascript:0" class="image">
-                                <img src="/img/base/placeholder.png" alt="">
-                            </a>
-                     </div>
-                    </li>-->
-                </ul>
-                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
-            </div>
-        </div>
-    </div>
-    <div class="wrap clear">
-        <div v-if="!isPC" class="mShopBox">
-            <a th:href="@{'/supplier-'+${product.shopId}+'.html'}">
-                <span class="name"><em th:text="${product.shopTitle}"></em><i th:if="not${#strings.isEmpty(product.license)}" class="icon mIcon shop"></i></span>
-                <span>经营范围：<em th:text="${product.businessScope}"></em></span>
-                <span>所在地区：<em th:text="${product.shopAddress}"></em></span>
-                <span>满意度：<em><i th:each="i:${#numbers.sequence(1,5)}" class="mIcon heart"></i></em></span>
-            </a>
-        </div>
-        <!-- 特殊商品退货须知 -->
-        <div class="return-instructions" v-if="!isPC && returnGoodsStutas">
-            <div class="hd">特殊商品退货须知</div>
-            <div class="bd" v-html="helpContent"></div>
-        </div>
-        <div class="productInfo">
-            <div class="tabTit">
-                <span :class="tabsIndex == 0 ? 'on' : ''" @click="detailsClicktab(0)">商品详情</span>
-                <span :class="tabsIndex == 1 ? 'on' : ''" th:if="${null!=params && params.size()>0}" v-if="!isNoneDisabled" @click="detailsClicktab(1)">相关参数</span>
-                <span :class="tabsIndex == 2 ? 'on' : ''" v-if="isServiceInfo && !isNoneDisabled" @click="detailsClicktab(2)">服务项目</span>
-                <span :class="tabsIndex == 3 ? 'on' : ''" v-if="isTrainingMethod" @click="detailsClicktab(3)">培训方案</span>
-                <span v-if="archiveId !== 0" :class="tabsIndex == 4 ? 'on' : ''" @click="detailsClicktab(4)">相关资料</span>
-                <span :class="tabsIndex == 5 ? 'on' : ''" v-if="isQualificationImg" @click="detailsClicktab(5)">商品资质</span>
-                <!--<span>评价</span>-->
-            </div>
-            <div class="tabCon">
-                <div class="item" v-if="tabsIndex == 0">
-                    <template v-if="isNoneDisabled">
-                        <p>暂无商品信息</p>
-                    </template>
-                    <template v-else>
-                        <template v-if="productDetailChose == 1">
-                            <div th:utext="${product.detailInfo}"></div>
-                        </template>
-                        <template v-else>
-                            <template v-if="GLOBAL_USER_ID>0 && ( GLOBAL_USER_IDENTITY === 2 || GLOBAL_USER_IDENTITY === 3)">
-                                <div th:utext="${product.detailInfo}"></div>
-                            </template>
-                            <template v-else-if="GLOBAL_USER_ID == 0 || GLOBAL_USER_ID>0 && ( GLOBAL_USER_IDENTITY === 4)">
-                                <div th:utext="*{#strings.isEmpty(product.commonDetailInfo)}? '若要查看更多产品信息，请注册机构会员，如有疑问请联系客服。' : *{product.commonDetailInfo}"></div>
-                            </template>
-                        </template>
-                    </template>
-                </div>
-                <div class="item" v-if="tabsIndex == 1">
-                    <table>
-                        <tr th:each="pa : ${params}">
-                            <td th:text="${pa.name}"></td>
-                            <td th:text="${pa.content}"></td>
-                        </tr>
-                    </table>
-                </div>
-                <div class="item" v-if="tabsIndex == 2">
-                    <div><p class="tl">订购方案:</p></div>
-                    <div th:utext="${product.orderInfo}"></div>
-                    <div><p class="tl">服务详情:</p></div>
-                    <div th:utext="${product.serviceInfo}"></div>
-                </div>
-                <div class="item" v-if="tabsIndex == 3">
-                    <div><p class="tl">培训方式: <span class="sm" v-text="trainingMethodText"></span></p></div>
-                    <div><p class="tl">培训费用: <span class="sm" v-text="trainingType"></span></p></div>
-                </div>
-                <!-- 资料列表 -->
-                <div class="item cm-database" v-if="archiveId !== 0 && tabsIndex == 4">
-                    <!-- 提示 -->
-                    <div class="cm-goLogin" v-if="TipStatus">
-                        <span v-text="TipStatus.text"></span>
-                        <span v-text="TipStatus.btn" v-if="TipStatus.btn" @click="handleClickToPage(TipStatus.redirect)"></span>
-                    </div>
-                    <!-- 图片区域 -->
-                    <div class="cm-category cm-image">
-                        <div class="cm-category-title">图片资料</div>
-                        <div class="cm-content">
-                            <div class="cm-none" v-if="imageArchiveList.length <= 0">暂无相关资料</div>
-                            <template v-else>
-                                <div class="cm-section" v-for="(item, index) in imageArchiveList" :key="index">
-                                    <div class="cm-title" v-html="item.title"></div>
-                                    <div class="cm-time">{{ item.addTime | formatTime }} </div>
-                                    <div class="cm-detail  clear cm-images" :class="{'cm-one':item.imageNum === 1,'cm-two':item.imageNum === 2,'cm-list':item.imageNum>2   }">
-                                        <!--可查看图片列表-->
-                                        <template v-if="item.imageList">
-                                            <div class="cm-img-box" @click="handleShowImage(i, item.imageList, item)" v-for="(image, i) in formatImage(item.imageList)" :key="i">
-                                                <img :src="image.imageUrl"/>
-                                            </div>
-                                        </template>
-                                        <!--不可查看图片列表 默认图片-->
-                                        <template v-else>
-                                            <div class="cm-img-box" @click="handleShowImage(i, item.imageList)" v-for="(image, i) in item.imageNum" :key="i">
-                                                <img :src="defaultImage" width="100%" height="100%">
-                                            </div>
-                                        </template>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                    <!-- 视频区域 -->
-                    <div class="cm-category">
-                        <div class="cm-category-title" id="category-import">视频资料</div>
-                        <div class="cm-content">
-                            <div class="cm-none" v-if="videoArchiveList.length<=0">暂无相关资料</div>
-                            <template v-else>
-                                <div class="cm-section" v-for="(item, index) in videoArchiveList" :key="index">
-                                    <div class="cm-title" v-html="item.title"></div>
-                                    <div class="cm-time">{{ item.addTime | formatTime }}</div>
-                                    <div class="cm-detail clear">
-                                        <div class="cm-video-box">
-                                            <span class="cm-player-btn" @click="handleShowPlayer(item.fileUrl, 'video'+index, item)"></span>
-                                            <video :src="item.fileUrl && item.fileUrl" :class="'video'+index" :poster="item.fileUrl ? '' : videoCover ">
-                                                您的浏览器不支持Video标签。
-                                            </video>
-                                        </div>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                        <!-- 弹出播放窗口 -->
-                        <div class="cm-player" v-if="showVideoDialog" @click="handleClosePlayer">
-                            <span class="cm-player-btn" @click.stop="handlePlayer" v-if="!isPlayer"></span>
-                            <video id="realPlayer" controls ref="videoRef" autoplay>
-                                <source :src="currentVideoUrl" type="video/mp4">
-                                您的浏览器不支持Video标签。
-                            </video>
-                        </div>
-                    </div>
-                    <!-- 文件区域 -->
-                    <div class="cm-category cm-file">
-                        <div class="cm-category-title">文件资料</div>
-                        <div class="cm-content">
-                            <div class="cm-none" v-if="fileArchiveList.length<=0">暂无相关资料</div>
-                            <template v-else>
-                                <div class="clear cm-section" v-for="(item, index) in fileArchiveList">
-                                    <div class="cm-cover">
-                                        <img src="/img/info/PC-pdf.png" v-if="/\.pdf/.test(item.fileName)">
-                                        <img src="/img/info/PC-doc.png" v-else-if="/\.doc/.test(item.fileName)">
-                                        <img src="/img/info/PC-ppt.png" v-else>
-                                    </div>
-                                    <div class="cm-detail">
-                                        <div class="cm-title" v-html="item.title"></div>
-                                        <div class="cm-row clear">
-                                            <span class="cm-time">{{ item.addTime | formatTime }}</span>
-                                            <span class="cm-view" v-if="permission === 0" @click="handlePreviewOffice(item)">预览文件</span>
-                                            <span class="cm-view" v-else  @click="fileContentPreview(item)">预览文件</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                </div>
-                <div class="item" v-if="tabsIndex == 5">
-                    <div class="product-qualificationTable" v-if="product.qualificationNo">
-                        <table border="1">
-                            <tr>
-                                <td>证书编号</td>
-                                <td>产品名称</td>
-                                <td>详情</td>
-                            </tr>
-                            <tr>
-                                <td>{{ product.qualificationNo }}</td>
-                                <td>{{ product.productName }}</td>
-                                <td>
-                                    <a target="_blank" :href="product.qualificationLink">查看</a>
-                                </td>
-                            </tr>
-                        </table>
-                    </div>
-                    <div class="product-qualificationImg">
-                        <img :src="product.qualificationImg" alt="">
-                    </div>
-                </div>
-                <!--                <div class="item">-->
-                <!--                <div style="text-align: left;margin: 10px 0">-->
-                <!--                        <span>商品评分：</span>-->
-                <!--                        <i th:each="i:${#numbers.sequence(1,5)}" class="icon mIcon comment"></i>-->
-                <!--                        <span class="comment-right">评价（）</span>-->
-                <!--                    </div>-->
-                <!--                    <div class="pingjia">-->
-                <!--                        <input type="text" class="commtext"   placeholder="对已购商品进行评论！"/>-->
-                <!--                        <button>评价</button>-->
-                <!--                    </div>-->
-                <!--                    <p class="comment">该商品暂无评价!</p>-->
-                <!--                </div>-->
-
-            </div>
-        </div>
-        <div v-if="isPC" class="rgt">
-            <div class="shopBox">
-                <div class="hd">供应商信息</div>
-                <div class="bd">
-                    <a href="javascript:void(0);">
-                        <div class="name"><span th:text="${product.shopTitle}"></span><i
-                                th:if="not${#strings.isEmpty(product.license)}" class="icon shop"></i></div>
-                    </a>
-                    <template v-if="!isShowCaimeiShop">
-                        <template th:if="not${#strings.isEmpty(product.businessScope)}">
-                            <div class="tit">经营范围：</div>
-                            <div class="con" th:text="${product.businessScope}"></div>
-                        </template>
-                        <template th:if="not${#strings.isEmpty(product.shopAddress)}">
-                            <div class="tit">所在地区：</div>
-                            <div class="con" th:text="${product.shopAddress}"></div>
-                        </template>
-                        <div class="tit">满意度：<i th:each="i:${#numbers.sequence(1,5)}" class="icon heart"></i></div>
-                        <a th:href="@{'/supplier-'+ ${product.shopId} +'.html'}" class="btn"
-                           onclick="_czc.push(['_trackEvent','商品详情','点击','查看主页','','Um_Event_ProductShopHome'])">查看主页</a>
-                    </template>
-                </div>
-            </div>
-            <div class="contact section">
-                <div class="hd">联系方式</div>
-                <div class="bd">
-                    <div>采美客服（转接供应商）</div>
-                    <div>电话：</div>
-                    <div>0755-22907771</div>
-                    <div>153-3885-1365</div>
-                </div>
-            </div>
-            <!-- 特殊商品退货须知 -->
-            <div class="return-instructions section" v-if="returnGoodsStutas">
-                <div class="hd">特殊商品退货须知</div>
-                <div class="bd" v-html="helpContent"></div>
-            </div>
-        </div>
-        <!--优惠券弹窗-->
-        <template v-if="GLOBAL_USER_ID>0">
-            <div class="coupon-popup" v-show="isShowPopup" :class="isShowPopup ? 'show' : 'hide'">
-                <div class="coupon-popup-model-content">
-                    <div class="title"><p>优惠券</p><i class="icon mIcon" @click="hidePopup"></i></div>
-                    <div class="coupon-popup-main">
-                        <div class="coupon-popup-tabs">
-                            <div class="popup-tabs-cell" :class="currentTab == 1 ? 'active' : ''"
-                                 @click="queryCouponTabs(1)"><span>未领取</span></div>
-                            <div class="popup-tabs-cell" :class="currentTab == 2 ? 'active' : ''"
-                                 @click="queryCouponTabs(2)"><span>已领取</span></div>
-                        </div>
-                        <div class="coupon-popup-content">
-                            <div class="empty" v-if="isCouponEmpty">
-                                <img src="/img/account/icon-coupon-empty@2x.png">
-                                <div class="msg"><p>暂无可领的优惠券</p></div>
-                            </div>
-                            <div class="coupon-popup-scroll" v-else>
-                                <div class="coupon-list-cell" v-for="(coupon, index) in productCouponList" :key="index"
-                                     :class="currentTab == 2 ? 'none' : ''">
-                                    <div class="coupon-list-le">
-                                        <div class="coupon-list-money">
-                                            <p>￥<span class="maxMoney">{{ coupon.couponAmount }}</span><span
-                                                    class="minMoney">满{{ coupon.touchPrice }}可用</span></p>
-                                        </div>
-                                        <div class="coupon-list-name">
-                                            <p v-if="coupon.couponType == 0">
-                                                {{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品' }}
-                                            </p>
-                                            <p v-if="coupon.couponType == 1">
-                                                {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
-                                            </p>
-                                            <p v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</p>
-                                            <p v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</p>
-                                        </div>
-                                        <div class="coupon-list-time"> {{ coupon.startDate }} - {{ coupon.endDate }}</div>
-                                    </div>
-                                    <div class="coupon-list-ri">
-
-                                        <template v-if="coupon.couponBtnType == 0">
-                                            <template v-if="coupon.couponPayWay == 2">
-                                                <div class="buy" @click="toDeductCoupon(coupon)"
-                                                     id="coupon-exchange-coupon"
-                                                     onclick="_czc.push(['_trackEvent','商品详情','优惠券采美豆兑换','优惠券兑换按钮点击',1,'coupon-exchange-coupon'])">
-                                                    <p>{{ coupon.moneyCouponPrice }}采美豆</p>
-                                                    <p>兑换</p>
-                                                </div>
-                                            </template>
-                                            <template v-else-if="coupon.couponPayWay == 1">
-                                                <div class="buy" @click="toBuyCoupon(coupon)"
-                                                     id="coupon-buy-coupon"
-                                                     onclick="_czc.push(['_trackEvent','商品详情','优惠券购买按钮点击','优惠券购买按钮点击',1,'coupon-buy-coupon'])">
-                                                    <p>￥{{ coupon.moneyCouponPrice }}</p>
-                                                    <p>购买</p>
-                                                </div>
-                                            </template>
-                                            <template v-else>
-                                            <span class="none"
-                                                  @click="receiveCoupon(coupon)"
-                                                  id="coupon-receive"
-                                                  onclick="_czc.push(['_trackEvent','商品详情','优惠券领取按钮点击','优惠券领取按钮点击',1,'coupon-receive'])">领取
-                                            </span>
-                                            </template>
-                                        </template>
-                                        <span v-if="coupon.couponBtnType == 1">已领取</span>
-                                    </div>
-                                    <template v-if="coupon.moneyCouponFlag == 1">
-                                        <div class="coupon-tags" v-if="coupon.moneyCouponType == 1">意向{{ coupon.couponType | TypeFormat }}</div>
-                                        <div class="coupon-tags"  v-else>定向{{ coupon.couponType | TypeFormat }}</div>
-                                    </template>
-                                    <template v-else>
-                                        <div class="coupon-tags">{{ coupon.couponType | TypeFormat }}</div>
-                                    </template>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </template>
-    </div>
-    <!--Ross 弹窗-->
-    <template v-if="showRossHtml">
-        <template th:replace="components/ross-advert"></template>
-    </template>
-</div>
-
-<!-- 引入底部 -->
-<template th:replace="components/footer"></template>
-<template th:replace="components/foot-link"></template>
-<script src="/lib/datapicker/moment-2.29.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/magnifier.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></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/common/serviceapi/shopping.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/beautyArchive.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/document/beautyArchiveDetailMixin.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/product/mixins/supportMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/product/mixins/productMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/product/detail.js(v=${version})}"></script>
-</body>
-</html>
+
+<!DOCTYPE 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 th:text="'采美365网-'+${product.name}">采美365网-商品详情</title>
+    <meta name="referrer" content="no-referrer">
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/product/detail.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet"
+          type="text/css">
+    <link th:href="@{/css/product/detail.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet"
+          type="text/css">
+    <link rel="stylesheet" type="text/css" href="/lib/css/viewer.min.css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 商品详情 -->
+<div id="productDetail" v-cloak>
+    <input type="hidden" th:value="${productId}" id="productId">
+    <input type="hidden" th:value="${typeId}" id="typeId">
+    <input type="hidden" th:value="${product?.stock}" id="productStock">
+    <input type="hidden" th:value="${product?.visibility}" id="productVisibility">
+    <div class="wrap">
+        <div class="productBox clear">
+            <div class="imageBox" id="imgShown" th:object="${product}">
+                <div class="cm-product-cover-tag"  v-if="pcActType === 1"></div>
+                <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
+                <div v-if="isPC" class="bigImage">
+                    <img th:src="${images[0]}">
+                    <span class="mask"></span>
+<!--                    <span class="cm-product-cover-tag" v-if="isPC && pcActType === 1">云上美博会</span>-->
+                </div>
+                <div id="swiperImage" class="smallImage swiper-container">
+                    <ul class="swiper-wrapper clear">
+                        <li class="swiper-slide mfc" th:each="img : ${images}">
+                            <img th:src="${img}">
+<!--                            <span class="cm-product-cover-tag" v-if="!isPC && pcActType === 1">云上美博会</span>-->
+<!--                            <span class="cm-product-cover-tag" v-if="!isPC && pcActType === 1"></span>-->
+                        </li>
+                    </ul>
+                    <div class="swiper-pagination mfc"></div>
+                </div>
+                <div v-if="isPC" class="zoomImage">
+                    <div class="zoom">
+                        <img th:src="${images[0]}">
+                    </div>
+                </div>
+            </div>
+            <div class="detailBox" th:object="${product}">
+                <div class="product-collection" @click="handleCollection">
+                    <img :src="collectionType ? '/img/account/icon-collection@2x.png' : '/img/account/icon-collection-none@2x.png'"
+                         alt="">
+                    <p>{{ collectionType ? '已收藏' : '收藏' }}</p>
+                </div>
+                <div class="crumbss">
+                    <span v-text="'所属分类：'+productTypeName"></span>
+                </div>
+                <div class="Beautyfair">
+                    <span class="tag" v-if="beautyActFlag==1">美博会</span>
+                    <h1 class="title" th:text="*{name}">商品名称</h1>
+                </div>
+                <p class="tags">
+                    <span th:each="tag: *{tagList}" th:text="${tag}"></span>
+                </p>
+                <div class="detail" v-if="!isNoneDisabled">
+                    <div class="WeChat" v-if="isPC">
+                        <i class="icon"></i>微信客服
+                        <div class="WechatBg"><img src="/img/base/Wecha.png">
+                            <p>扫码添加采美微信客服咨询更快捷</p></div>
+                    </div>
+                    <div class="row price"><span class="l">会员价：</span>
+                        <!--登录-->
+                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                            <em v-if="priceObj.priceFlag==1" v-text="'￥价格未公开'"></em>
+                            <!--仅会员可见 -->
+                            <em v-else-if="priceObj.priceFlag==2 && GLOBAL_USER_IDENTITY == 4 && GLOBAL_VIP_FLAG!=1" class="red" v-text="'￥会员可见'"></em>
+                            <!--仅医美机构可见 -->
+                            <em v-else-if="priceObj.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)" class="red" v-text="'￥仅医美机构可见'"></em>
+                            <!--SVIP时的划线价格-->
+                            <!--满足条件：只有开通会员才显示划线价格-->
+                            <em v-else-if="GLOBAL_VIP_FLAG === 1 && priceObj.svipProductFlag === 1">
+                                <del v-text="'￥'+parseFloat(priceObj.originalPrice).toFixed(2)"></del>
+                            </em>
+                            <!--可见价格 -->
+                            <template v-else-if="(priceObj.priceFlag==0 && GLOBAL_USER_IDENTITY!=3) || GLOBAL_USER_IDENTITY ==2 || (GLOBAL_USER_IDENTITY==3 && priceObj.shopId==GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                                <em v-if="priceObj.actStatus==1 && promotions && promotions.type==1 && promotions.mode==1" class="p">
+                                    <del v-text="'￥'+parseFloat(priceObj.originalPrice).toFixed(2)"></del>
+                                </em>
+                                <em v-else class="p price">￥{{ priceObj.price | NumFormat }}</em>
+                            </template>
+                            <!--隐藏价格 -->
+                            <em v-else>￥<i th:attr="class=${'icon mIcon i'+product.priceGrade}"></i></em>
+                            <!--SVIP会员标签-->
+                            <div class="svip-tag" v-if="priceObj.svipProductFlag == 1">
+                                <div class="svip-icon">SVIP</div>
+                                <!-- !价格未公开 && ((个人机构 + SVIP) || 资质机构 ) 可查看价格 -->
+                                <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
+                                (priceObj.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                (GLOBAL_USER_IDENTITY === 3 && priceObj.shopId==GLOBAL_SHOP_ID) ||
+                                GLOBAL_VIP_FLAG === 1">
+                                    <div class="svip-price" v-if="showVipPriceTag(priceObj)">
+                                        <span v-html="priceObj.svipPriceTag"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </template>
+                        <!--未登录-->
+                        <template v-else>
+                            <em>￥<i class="icon mIcon" id="priceGrade"></i></em>
+                            <!--SVIP会员标签 有svip会员价-->
+                            <div class="svip-tag" v-if="priceObj.svipProductFlag == 1">
+                                <div class="svip-icon">SVIP</div>
+                            </div>
+                        </template>
+                    </div>
+                    <template
+                            v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0 && priceObj.normalPrice>0 && ((priceObj.priceFlag==0 && priceObj.userIdentity!=3) || (priceObj.priceFlag==2 && priceObj.userIdentity==2) || (priceObj.priceFlag==3 && GLOBAL_CLUB_TYPE==1) || (priceObj.userIdentity==3 && priceObj.shopId==GLOBAL_SHOP_ID || GLOBAL_VIP_FLAG === 1))">
+                        <div class="row"><span class="l">市场价：</span>
+                            <em>
+                                <del v-text="'￥'+priceObj.normalPrice.toFixed(2)"></del>
+                            </em>
+                        </div>
+                    </template>
+                    <div class="row actStatus"
+                         v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0 && priceObj.actStatus==1 || ladderList.length >0">
+                        <span class="l">促销：</span>
+                        <template
+                                v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0 && ((priceObj.priceFlag==0 && priceObj.userIdentity!=3) || (priceObj.priceFlag==2 && priceObj.userIdentity==2) || (priceObj.priceFlag==3 && GLOBAL_CLUB_TYPE==1) || (priceObj.userIdentity==3 && priceObj.shopId==GLOBAL_SHOP_ID || GLOBAL_VIP_FLAG === 1))">
+                            <!-- 阶梯价 -->
+                            <div v-if="ladderList.length >0" class="priceTag">
+                                <i class="tag icon mIcon" @click="toggleThisLadder($event)">阶梯价格</i>
+                                <div class="ladder mFixed">
+                                    <span>
+                                        <em class="t"><i>价格</i><i>起订量</i></em>
+                                        <em v-for="l in ladderList">
+                                            <i class="p">￥{{ l.buyPrice | NumFormat }}</i>
+                                            <i v-text="l.numRange"></i>
+                                        </em>
+                                        <em @click="hideThisLadder($event)" class="close">了解</em>
+                                    </span>
+                                </div>
+                            </div>
+                            <!-- 促销活动 -->
+                            <div v-if="priceObj.actStatus==1 && promotions" class="priceTag">
+                                <i v-if="promotions.type==1 && promotions.mode==1 && priceObj.priceFlag!=1"
+                                   @click="toggleThisLadder($event)" class="tag icon mIcon"
+                                   v-text="promotions.name+'：¥'+toFloat(priceObj.price)"></i>
+                                <i v-else class="tag icon mIcon" @click="toggleThisLadder($event)"
+                                   v-text="promotions.name"></i>
+                                <div class="promotion mFixed">
+                                    <div>
+                                        <p class="t">
+                                            <em v-if="promotions.type==1 && promotions.mode==1"
+                                                v-text="priceObj.priceFlag==1?'价格未公开':(promotions.name+'：¥'+toFloat(promotions.touchPrice))"></em>
+                                            <em v-if="promotions.mode==2"
+                                                v-text="promotions.name+'，满 ¥'+toFloat(promotions.touchPrice)+' 减 ¥'+toFloat(promotions.reducedPrice)"></em>
+                                            <em v-if="promotions.mode==3"
+                                                v-text="promotions.name+'，满 ¥'+toFloat(promotions.touchPrice)+' 赠送商品'"></em>
+                                        </p>
+                                        <p>促销时间：<em v-if="promotions.status==1">不限时</em><em v-else
+                                                                                            v-text="promotions.beginTime.substr(0,10)+' ~ '+promotions.endTime.substr(0,10)"></em>
+                                        </p>
+                                        <p v-if="promotions.type==2" class="r"><a class="more"
+                                                                                  :href="'/product/promotions.html?id='+promotions.id">更多凑单商品>>></a>
+                                        </p>
+                                        <template v-if="promotions.mode==3">
+                                            <p>赠品：</p>
+                                            <p>
+                                                <span v-for="g in promotions.giftList" class="p">
+                                                    <img :src="g.image">
+                                                    <span v-text="g.name"></span>
+                                                    <span v-text="'× '+g.number"></span>
+                                                </span>
+                                            </p>
+                                        </template>
+                                        <p class="c"><a class="close" @click="hideThisLadder($event)"
+                                                        href="JavaScript:void(0);">了解</a></p>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                        <!-- 登录 -->
+                        <template v-else>
+                            <div v-if="priceObj.ladderPriceFlag==1 || priceObj.actStatus==1" class="priceTag">
+                                <i v-if="priceObj.ladderPriceFlag==1" class="tag icon mIcon"
+                                   @click="toggleThisLadder($event)">阶梯价格</i>
+                                <i v-if="priceObj.actStatus==1" class="tag icon mIcon" @click="toggleThisLadder($event)"
+                                   v-text="promotions?promotions.name:''"></i>
+                                <div class="promotion mFixed">
+                                    <div v-if="!GLOBAL_USER_ID">
+                                        <p v-if="priceObj.ladderPriceFlag==1"><em @click="toLogin">登录</em>，享受阶梯价格优惠</p>
+                                        <p v-if="priceObj.actStatus==1"><em @click="toLogin">登录</em>，参与促销活动</p>
+                                        <p class="c"><a class="close" @click="hideThisLadder($event)"
+                                                        href="JavaScript:void(0);">了解</a></p>
+                                    </div>
+                                    <div v-else>
+                                        <p v-if="priceObj.ladderPriceFlag==1 && priceObj.userIdentity==4"><em
+                                                @click="toUpgrade">升级会员</em>，享受阶梯价格优惠</p>
+                                        <p v-if="priceObj.actStatus==1 && priceObj.userIdentity==4"><em
+                                                @click="toUpgrade">升级会员</em>，参与促销活动</p>
+                                        <p class="c"><a class="close" @click="hideThisLadder($event)"
+                                                        href="JavaScript:void(0);">了解</a></p>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="row" v-if="productCoupon.length>0">
+                        <span class="l">优惠券：</span>
+                        <span class="coupon-tags">
+                            <em class="couponTag" v-for="(coupon, index) in productCoupon" :key="index"
+                                v-text="'满'+coupon.touchPrice+'减'+coupon.couponAmount"></em>
+                            <em class="couponTag-more" @click="showPopup">更多></em>
+                        </span>
+                    </div>
+                    <div th:if="not${#strings.isEmpty(product.brandName)}" class="row"><span class="l">品牌：</span><em
+                            th:text="*{brandName}"></em></div>
+                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                        <div class="row">
+                            <span class="l">包装规格：</span>
+                            <div class="unit-tags">
+                                <span class="unitTags" @click="handleChoisSku(sku,index)" v-for="(sku, index) in priceObj.skus" :key="index" :class="skuIndex === index ? 'active':''">
+                                    {{ sku.unit }}
+                                    <i class="tips" v-if="sku.stock ===0">缺货</i>
+                                </span>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="row">
+                            <span class="l">包装规格：</span>
+                            <div class="unit-tags">
+                                <span class="unitTags" th:attr="data-grade=${sku.priceGrade}" th:each="sku,skuStat:*{skus}" th:if="${not #strings.isEmpty(product.skus)}">
+                                    <span th:text="${sku.unit}"></span>
+                                    <i class="tips" th:if="${sku.stock == 0}">缺货</i>
+                                </span>
+                            </div>
+                        </div>
+                    </template>
+                    <div class="row" th:if="not${#strings.isEmpty(product.productCode)}"><span
+                            class="l">商品编码：</span><em th:text="*{productCode}"></em></div>
+                    <div class="row"><span class="l">库存：</span>
+                        <em id="prosductStock" th:text="*{stock}"></em>
+                    </div>
+                    <div class="row"><span class="l">起订量：</span>
+                        <em id="proMinBuyNumber" th:text="*{minBuyNumber}"></em>
+                    </div>
+                    <div v-show="GLOBAL_USER_ID && GLOBAL_USER_ID>0" class="row"><span class="l">采购量：</span>
+                        <span class="number">
+                            <em class="sub" @click="numberSub">-</em>
+                            <input type="number" :value="number" v-model="number" maxlength='6'
+                                   @change="numberChange">
+                            <em class="add" @click="numberAdd">+</em>
+                        </span>
+                        <input type="hidden" th:value="*{step}">
+                    </div>
+                    <hr>
+                    <div class="row"><span class="l">服务：</span>
+                        <em class="ser icon mIcon">无忧退货</em>
+                        <em class="ser icon mIcon">快速退款</em>
+                        <em class="ser icon mIcon">正品保证</em>
+                    </div>
+                </div>
+                <div v-else class="none-details" :class="isNoneDisabled ? 'show':''">
+                    <img class="none-image" src="/img/base/icon-none.svg" alt="">
+                    <p class="none-text">此商品已{{disabledText}},请浏览以下推荐商品~</p>
+                    <p class="none-text">咨询类似商品，请联系客服!</p>
+                </div>
+                <div v-if="!isPC" class="wechatH5 btnBox"><img src="/img/base/wechat.h5.png" style="padding: 2.7vw 0">
+                </div>
+                <template v-if="!isHideButton">
+                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                        <div class="btnBox" v-if="priceObj.priceFlag==2 && priceObj.userIdentity==4 && GLOBAL_VIP_FLAG !== 1">
+                            <a class="upgrade" href="/user/setting/upgrade.html"
+                               onclick="_czc.push(['_trackEvent','商品详情','点击','升级查看价格','','Um_Event_ProductUpgrade'])">升级会员查看价格</a>
+                        </div>
+                        <div class="btnBox"
+                             v-else-if="(priceObj.priceFlag==0 && priceObj.userIdentity!=3) ||
+                                    (priceObj.priceFlag==2 && priceObj.userIdentity==2) ||
+                                    (priceObj.priceFlag==2 && GLOBAL_VIP_FLAG === 1) ||
+                                    (priceObj.priceFlag==3 && GLOBAL_CLUB_TYPE === 1)">
+
+                            <a href="javascript:void(0);" class="cart icon"  :class="isDetailsBtnDisable ? 'disable' : ''" @click='handleAddShopCart' v-if="!isNoneDisabled"
+                               onclick="_czc.push(['_trackEvent','商品详情','点击','加入购物车','','Um_Event_ProductAddCart'])">加入购物车</a>
+                            <a href="javascript:void(0);" class="buy" :class="isDetailsBtnDisable ? 'disable' : ''" @click="handleBuyNowSubmit" v-if="!isNoneDisabled"
+                               onclick="_czc.push(['_trackEvent','商品详情','点击','立即购买','','Um_Event_ProductBuyConfirm'])">立即购买</a>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="btnBox">
+                            <a href="javascript:void(0);" class="upgrade" @click="toLogin" v-if="!isNoneDisabled"
+                               onclick="_czc.push(['_trackEvent','商品详情','点击','登录查看价格','','Um_Event_ProductLoginPrice'])">登录查看价格</a>
+                        </div>
+                    </template>
+                </template>
+            </div>
+        </div>
+        <!--配套商品区域-->
+        <div class="wrap" v-if="!isNoneDisabled && isShowSupportingList && defaultSupportingList.length>0">
+            <div class="product-supporting">
+                <!--PC-->
+                <template v-if="isPC">
+                    <div class="product-supporting-title">配套商品</div>
+                    <div class="product-supporting-content">
+                        <div class="product-supporting-td">
+                            <p class="td-1">商品图片</p>
+                            <p class="td-2">商品名称</p>
+                            <p class="td-3">规格</p>
+                            <p class="td-4">价格</p>
+                            <p class="td-5">采购量</p>
+                            <p class="td-6">选择</p>
+                        </div>
+                        <div class="product-supporting-pro">
+                            <div class="product-supporting-list" v-for="(pros,index) in defaultSupportingList" :class="index == 0 ? 'active' : ''">
+                                <div class="tr tr-1">
+                                    <a :href="'/product-'+pros.productId+'.html'" target="_blank">
+                                        <img class="smalltype" src="/img/base/icon-smalltype@2x.png" alt="" v-if="pros.productType == 2">
+                                        <img class="images" :src="pros.image" :alt="pros.name">
+                                    </a>
+                                </div>
+                                <div class="tr tr-2">
+                                    <a :href="'/product-'+pros.productId+'.html'" target="_blank">
+                                        <p v-html="pros.name"></p>
+                                    </a>
+                                </div>
+                                <div class="tr tr-3">
+                                     <div class="sku-popup" @click="handleShowPopup(pros,index)">
+                                        <p class="sku-text" v-text="pros.unit"></p>
+                                        <div class="sku-icon"><i class="icon"></i></div>
+                                    </div>
+                                    <div class="sku-popup-viw" v-if="currentIndex === index && showSkuPopup">
+                                        <div class="sku-title">
+                                            <div class="sku-image"><img :src="handlePros.image" :alt="handlePros.name"></div>
+                                            <div class="sku-price">
+                                                <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                    <!--0公开价格 1不公开价格 2仅对会员机构公开-->
+                                                    <div class="main_price_unde" v-if="handlePros.priceFlag==1">￥价格未公开</div>
+                                                    <!--机构价仅会员可见 && 用户是普通机构-->
+                                                    <div class="main_price_unde" v-else-if="handlePros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                                        ￥会员可见
+                                                    </div>
+                                                    <!--机构价仅会员可见 && 用户是普通机构-->
+                                                    <div class="main_price_unde" v-else-if="handlePros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                                        ￥仅医美机构可见
+                                                    </div>
+                                                    <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                                                    <template
+                                                            v-else-if="GLOBAL_USER_IDENTITY === 2 || (handlePros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && pros.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                                                        <div class="main_price_show"
+                                                             :class="{none: PromotionsFormat(handlePros.promotions) || (handlePros.svipProductFlag === 1 && showVipPriceTag(handlePros))}">
+                                                            ￥{{ (PromotionsFormat(handlePros.promotions) || showVipPriceTag(handlePros) ? handlePros.originalPrice :
+                                                            handlePros.price ) | NumFormat }}
+                                                        </div>
+                                                    </template>
+                                                    <!--供应商除自己的商品外，也显示价格等级-->
+                                                    <div class="price_grade" v-else><span class="bold">￥</span><i
+                                                            :class="'icon mIcon i'+handlePros.priceGrade"></i></div>
+                                                    <div class="price_text_tag clear">
+                                                        <p class="couponTag" v-if="handlePros.couponsLogo">优惠券</p>
+                                                        <template v-if="handlePros.svipProductFlag === 1">
+                                                            <div class="svip-tag">
+                                                                <div class="svip-icon">SVIP</div>
+                                                                <template v-if="showVipPriceTag(handlePros)">
+                                                                    <div class="svip-price">
+                                                                        <span v-html="handlePros.svipPriceTag"></span>
+                                                                    </div>
+                                                                </template>
+                                                            </div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <p class="listTag" v-if="handlePros.actStatus==1">{{handlePros.promotions.name}}
+                                                                <span v-if="handlePros.priceFlag != 1 && PromotionsFormat(handlePros.promotions)">:￥{{handlePros.price | NumFormat}}</span>
+                                                            </p>
+                                                        </template>
+                                                    </div>
+                                                </template>
+                                                <template v-else>
+                                                    <div class="price_grade"><i :class="'icon mIcon i'+handlePros.priceGrade"></i></div>
+                                                    <div class="price_text_tag">
+                                                        <p class="couponTag" v-if="handlePros.couponsLogo">优惠券</p>
+                                                        <template v-if="handlePros.svipProductFlag === 1">
+                                                            <div class="svip-tag">
+                                                                <div class="svip-icon">SVIP</div>
+                                                            </div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <p class="listTag" v-if="handlePros.actStatus==1">{{handlePros.promotions.name}}</p>
+                                                        </template>
+                                                    </div>
+                                                </template>
+                                            </div>
+                                        </div>
+                                        <div class="sku-h1">规格:</div>
+                                        <div class="sku-unit">
+                                                <span class="unitTags" @click="handleSupportingChoisSku(pros,sku,index)" v-for="(sku, index) in handlePros.skus" :key="index" :class="skuSupportingIndex === index ? 'active':''">
+                                                    {{ sku.unit }}
+                                                    <i class="tips" v-if="sku.stock ===0">缺货</i>
+                                                </span>
+                                        </div>
+                                        <div class="sku-button">
+                                            <div class="sku-button-center">
+                                                <a class="sku-btn cancel" href="javascript:void(0);" @click="handleSkuCancel(pros)">取消</a>
+                                                <a class="sku-btn confirm" :class="isbtnDisable ? 'disable' : ''" href="javascript:void(0);" @click="handleSkuConfirm(pros)">确定</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="tr tr-4">
+                                    <div class="price">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                            <!--0公开价格 1不公开价格 2仅对会员机构公开-->
+                                            <div class="main_price_unde" v-if="pros.priceFlag==1">￥价格未公开</div>
+                                            <!--机构价仅会员可见 && 用户是普通机构-->
+                                            <div class="main_price_unde" v-else-if="pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                                ￥会员可见
+                                            </div>
+                                            <!--机构价仅会员可见 && 用户是普通机构-->
+                                            <div class="main_price_unde" v-else-if="pros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                                ￥仅医美机构可见
+                                            </div>
+                                            <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                                            <template
+                                                    v-else-if="GLOBAL_USER_IDENTITY === 2 || (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && pros.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                                                <div class="main_price_show"
+                                                     :class="{none: PromotionsFormat(pros.promotions) || (pros.svipProductFlag === 1 && showVipPriceTag(pros))}">
+                                                    ￥{{ (PromotionsFormat(pros.promotions) || showVipPriceTag(pros) ? pros.originalPrice :
+                                                    pros.price ) | NumFormat }}
+                                                </div>
+                                            </template>
+                                            <!--供应商除自己的商品外，也显示价格等级-->
+                                            <div class="price_grade" v-else><span class="bold">￥</span><i
+                                                    :class="'icon mIcon i'+pros.priceGrade"></i></div>
+                                            <div class="price_text_tag clear">
+                                                <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
+                                                <template v-if="pros.svipProductFlag === 1">
+                                                    <div class="svip-tag">
+                                                        <div class="svip-icon">SVIP</div>
+                                                        <template v-if="showVipPriceTag(pros)">
+                                                            <div class="svip-price">
+                                                                <span v-html="pros.svipPriceTag"></span>
+                                                            </div>
+                                                        </template>
+                                                    </div>
+                                                </template>
+                                                <template v-else>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}
+                                                        <span v-if="pros.priceFlag != 1 && PromotionsFormat(pros.promotions)">:￥{{pros.price | NumFormat}}</span>
+                                                    </p>
+                                                </template>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <div class="price_grade"><i :class="'icon mIcon i'+pros.priceGrade"></i></div>
+                                            <div class="price_text_tag">
+                                                <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
+                                                <template v-if="pros.svipProductFlag === 1">
+                                                    <div class="svip-tag">
+                                                        <div class="svip-icon">SVIP</div>
+                                                    </div>
+                                                </template>
+                                                <template v-else>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </template>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </div>
+                                <div class="tr tr-5">
+                                    <span class="number">
+                                        <em class="sub" @click="supportingNumberSub(pros)">-</em>
+                                        <input type="number" :value="pros.number" v-model="pros.number" @change="supportingNumberChange(pros)">
+                                        <em class="add" @click="supportingNumberAdd(pros)">+</em>
+                                    </span>
+                                </div>
+                                <div class="tr tr-6">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <template v-if="pros.priceFlag == 1 || (pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4) || GLOBAL_USER_IDENTITY == 3">
+                                            <div class="checked-box">
+                                                <p>不可选择</p>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <div class="checked-box" @click="checkedSoperv(pros)">
+                                                <input class="check" type="checkbox" @change="" v-model="pros.isChecked">
+                                            </div>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="checked-box">
+                                            <p>不可选择</p>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                            <div class="product-supporting-more" v-if="isShowMoreButton">
+                                <div class="more" @click="showSupportingMore">
+                                    <i class="icon mIcon"></i>
+                                    查看更多
+                                </div>
+                            </div>
+                        </div>
+                        <div class="product-supporting-button">
+                            <div class="product-supporting-total">
+                                <p>共 <span class="ore">{{ totalNumber }}</span>件商品，合计:<span class="red">￥{{ totalPrice | NumFormat }}元</span></p>
+                            </div>
+                            <div class="product-supporting-btn">
+                                <div class="btn buy" @click="handleSupportingSubmit('buy')">立即购买</div>
+                                <div class="btn add" @click="handleSupportingSubmit('add')">加入购物车</div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <!--H5-->
+                <template v-else>
+                    <div class="product-supporting-title">配套商品({{ supportingList.length }})</div>
+                    <div class="product-supporting-content">
+                        <a :href="'/product/product-supporting.html?productId='+productId">
+                            <div class="product-supporting-list" v-for="(pros,index) in defaultSupportingList" :key="index" v-if="index<3">
+                                <img :src="pros.image" :alt="pros.name">
+                            </div>
+                            <div class="product-supporting-more">
+                                <i class="icon mIcon"></i>
+                            </div>
+                        </a>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <!--相关推荐区域-->
+        <div v-if="!GLOBAL_USER_ID" class="recommendBox" th:if="${lists.size()>0}">
+            <div class="hd">相关推荐</div>
+            <div id="productRecommend" class="swiper-container">
+                <ul class="swiper-wrapper" v-cloak>
+                    <li class="swiper-slide mfc" th:each="p : ${lists}">
+                        <div class="item">
+                            <a class="image" th:href="'/product-'+${p.id}+'.html'" target="_blank">
+                                <img th:src="${p.image}" th:alt="${p.name}"
+                                     onerror="javascript:this.src='/img/base/placeholder.png';">
+                                <span th:html="${p.name}"></span>
+                            </a>
+                        </div>
+                    </li>
+                    <!--<li class="swiper-slide  defaulImg" v-for="(item,index) in recommendIndex">
+                       <div class="item">
+                            <a href="javascript:0" class="image">
+                                <img src="/img/base/placeholder.png" alt="">
+                            </a>
+                     </div>
+                    </li>-->
+                </ul>
+                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+            </div>
+        </div>
+        <div class="recommendBox" v-if="GLOBAL_USER_ID && recommends.length>0">
+            <div class="hd">相关推荐</div>
+            <div id="productRecommend" class="swiper-container">
+                <ul class="swiper-wrapper" v-cloak>
+                    <li class="swiper-slide mfc" v-for="p in recommends">
+                        <div class="item">
+                            <a class="image" :href="'/product-'+p.productId+'.html'" target="_blank">
+                                <img :src="p.image" :alt="p.name"
+                                     onerror="javascript:this.src='/img/base/placeholder.png';">
+                                <span v-html="p.name"></span>
+                            </a>
+                        </div>
+                    </li>
+                    <!--<li class="swiper-slide  defaulImg" v-for="(item,index) in recommendIndex">
+                       <div class="item">
+                            <a href="javascript:0" class="image">
+                                <img src="/img/base/placeholder.png" alt="">
+                            </a>
+                     </div>
+                    </li>-->
+                </ul>
+                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+            </div>
+        </div>
+    </div>
+    <div class="wrap clear">
+        <div v-if="!isPC" class="mShopBox">
+            <a th:href="@{'/supplier-'+${product.shopId}+'.html'}">
+                <span class="name"><em th:text="${product.shopTitle}"></em><i th:if="not${#strings.isEmpty(product.license)}" class="icon mIcon shop"></i></span>
+                <span>经营范围：<em th:text="${product.businessScope}"></em></span>
+                <span>所在地区：<em th:text="${product.shopAddress}"></em></span>
+                <span>满意度：<em><i th:each="i:${#numbers.sequence(1,5)}" class="mIcon heart"></i></em></span>
+            </a>
+        </div>
+        <!-- 特殊商品退货须知 -->
+        <div class="return-instructions" v-if="!isPC && returnGoodsStutas">
+            <div class="hd">特殊商品退货须知</div>
+            <div class="bd" v-html="helpContent"></div>
+        </div>
+        <div class="productInfo">
+            <div class="tabTit">
+                <span :class="tabsIndex == 0 ? 'on' : ''" @click="detailsClicktab(0)">商品详情</span>
+                <span :class="tabsIndex == 1 ? 'on' : ''" th:if="${null!=params && params.size()>0}" v-if="!isNoneDisabled" @click="detailsClicktab(1)">相关参数</span>
+                <span :class="tabsIndex == 2 ? 'on' : ''" v-if="isServiceInfo && !isNoneDisabled" @click="detailsClicktab(2)">服务项目</span>
+                <span :class="tabsIndex == 3 ? 'on' : ''" v-if="isTrainingMethod" @click="detailsClicktab(3)">培训方案</span>
+                <span v-if="archiveId !== 0" :class="tabsIndex == 4 ? 'on' : ''" @click="detailsClicktab(4)">相关资料</span>
+                <span :class="tabsIndex == 5 ? 'on' : ''" v-if="isQualificationImg" @click="detailsClicktab(5)">商品资质</span>
+                <!--<span>评价</span>-->
+            </div>
+            <div class="tabCon">
+                <div class="item" v-if="tabsIndex == 0">
+                    <template v-if="isNoneDisabled">
+                        <p>暂无商品信息</p>
+                    </template>
+                    <template v-else>
+                        <template v-if="productDetailChose == 1">
+                            <div th:utext="${product.detailInfo}"></div>
+                        </template>
+                        <template v-else>
+                            <template v-if="GLOBAL_USER_ID>0 && ( GLOBAL_USER_IDENTITY === 2 || GLOBAL_USER_IDENTITY === 3)">
+                                <div th:utext="${product.detailInfo}"></div>
+                            </template>
+                            <template v-else-if="GLOBAL_USER_ID == 0 || GLOBAL_USER_ID>0 && ( GLOBAL_USER_IDENTITY === 4)">
+                                <div th:utext="*{#strings.isEmpty(product.commonDetailInfo)}? '若要查看更多产品信息，请注册机构会员，如有疑问请联系客服。' : *{product.commonDetailInfo}"></div>
+                            </template>
+                        </template>
+                    </template>
+                </div>
+                <div class="item" v-if="tabsIndex == 1">
+                    <table>
+                        <tr th:each="pa : ${params}">
+                            <td th:text="${pa.name}"></td>
+                            <td th:text="${pa.content}"></td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="item" v-if="tabsIndex == 2">
+                    <div><p class="tl">订购方案:</p></div>
+                    <div th:utext="${product.orderInfo}"></div>
+                    <div><p class="tl">服务详情:</p></div>
+                    <div th:utext="${product.serviceInfo}"></div>
+                </div>
+                <div class="item" v-if="tabsIndex == 3">
+                    <div><p class="tl">培训方式: <span class="sm" v-text="trainingMethodText"></span></p></div>
+                    <div><p class="tl">培训费用: <span class="sm" v-text="trainingType"></span></p></div>
+                </div>
+                <!-- 资料列表 -->
+                <div class="item cm-database" v-if="archiveId !== 0 && tabsIndex == 4">
+                    <!-- 提示 -->
+                    <div class="cm-goLogin" v-if="TipStatus">
+                        <span v-text="TipStatus.text"></span>
+                        <span v-text="TipStatus.btn" v-if="TipStatus.btn" @click="handleClickToPage(TipStatus.redirect)"></span>
+                    </div>
+                    <!-- 图片区域 -->
+                    <div class="cm-category cm-image">
+                        <div class="cm-category-title">图片资料</div>
+                        <div class="cm-content">
+                            <div class="cm-none" v-if="imageArchiveList.length <= 0">暂无相关资料</div>
+                            <template v-else>
+                                <div class="cm-section" v-for="(item, index) in imageArchiveList" :key="index">
+                                    <div class="cm-title" v-html="item.title"></div>
+                                    <div class="cm-time">{{ item.addTime | formatTime }} </div>
+                                    <div class="cm-detail  clear cm-images" :class="{'cm-one':item.imageNum === 1,'cm-two':item.imageNum === 2,'cm-list':item.imageNum>2   }">
+                                        <!--可查看图片列表-->
+                                        <template v-if="item.imageList">
+                                            <div class="cm-img-box" @click="handleShowImage(i, item.imageList, item)" v-for="(image, i) in formatImage(item.imageList)" :key="i">
+                                                <img :src="image.imageUrl"/>
+                                            </div>
+                                        </template>
+                                        <!--不可查看图片列表 默认图片-->
+                                        <template v-else>
+                                            <div class="cm-img-box" @click="handleShowImage(i, item.imageList)" v-for="(image, i) in item.imageNum" :key="i">
+                                                <img :src="defaultImage" width="100%" height="100%">
+                                            </div>
+                                        </template>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <!-- 视频区域 -->
+                    <div class="cm-category">
+                        <div class="cm-category-title">视频资料</div>
+                        <div class="cm-content">
+                            <div class="cm-none" v-if="videoArchiveList.length<=0" id="category-import">暂无相关资料</div>
+                            <template v-else>
+                                <div class="cm-section" v-for="(item, index) in videoArchiveList" :key="index">
+                                    <div class="cm-title" v-html="item.title"></div>
+                                    <div class="cm-time">{{ item.addTime | formatTime }}</div>
+                                    <div class="cm-detail clear">
+                                        <div class="cm-video-box">
+                                            <span class="cm-player-btn" @click="handleShowPlayer(item.fileUrl, 'video'+index, item)"></span>
+                                            <video :src="item.fileUrl && item.fileUrl" :class="'video'+index" :poster="item.fileUrl ? '' : videoCover " :id="(videoArchiveList.length === index + 1) ? 'category-import' : ''">
+                                                您的浏览器不支持Video标签。
+                                            </video>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                        <!-- 弹出播放窗口 -->
+                        <div class="cm-player" v-if="showVideoDialog" @click="handleClosePlayer">
+                            <span class="cm-player-btn" @click.stop="handlePlayer" v-if="!isPlayer"></span>
+                            <video id="realPlayer" controls ref="videoRef" autoplay>
+                                <source :src="currentVideoUrl" type="video/mp4">
+                                您的浏览器不支持Video标签。
+                            </video>
+                        </div>
+                    </div>
+                    <!-- 文件区域 -->
+                    <div class="cm-category cm-file">
+                        <div class="cm-category-title">文件资料</div>
+                        <div class="cm-content">
+                            <div class="cm-none" v-if="fileArchiveList.length<=0">暂无相关资料</div>
+                            <template v-else>
+                                <div class="clear cm-section" v-for="(item, index) in fileArchiveList">
+                                    <div class="cm-cover">
+                                        <img src="/img/info/PC-pdf.png" v-if="/\.pdf/.test(item.fileName)">
+                                        <img src="/img/info/PC-doc.png" v-else-if="/\.doc/.test(item.fileName)">
+                                        <img src="/img/info/PC-ppt.png" v-else>
+                                    </div>
+                                    <div class="cm-detail">
+                                        <div class="cm-title" v-html="item.title"></div>
+                                        <div class="cm-row clear">
+                                            <span class="cm-time">{{ item.addTime | formatTime }}</span>
+                                            <span class="cm-view" v-if="permission === 0" @click="handlePreviewOffice(item)">预览文件</span>
+                                            <span class="cm-view" v-else  @click="fileContentPreview(item)">预览文件</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+                <div class="item" v-if="tabsIndex == 5">
+                    <div class="product-qualificationTable" v-if="product.qualificationNo">
+                        <table border="1">
+                            <tr>
+                                <td>证书编号</td>
+                                <td>产品名称</td>
+                                <td>详情</td>
+                            </tr>
+                            <tr>
+                                <td>{{ product.qualificationNo }}</td>
+                                <td>{{ product.productName }}</td>
+                                <td>
+                                    <a target="_blank" :href="product.qualificationLink">查看</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="product-qualificationImg">
+                        <img :src="product.qualificationImg" alt="">
+                    </div>
+                </div>
+                <!--                <div class="item">-->
+                <!--                <div style="text-align: left;margin: 10px 0">-->
+                <!--                        <span>商品评分：</span>-->
+                <!--                        <i th:each="i:${#numbers.sequence(1,5)}" class="icon mIcon comment"></i>-->
+                <!--                        <span class="comment-right">评价（）</span>-->
+                <!--                    </div>-->
+                <!--                    <div class="pingjia">-->
+                <!--                        <input type="text" class="commtext"   placeholder="对已购商品进行评论！"/>-->
+                <!--                        <button>评价</button>-->
+                <!--                    </div>-->
+                <!--                    <p class="comment">该商品暂无评价!</p>-->
+                <!--                </div>-->
+
+            </div>
+        </div>
+        <div v-if="isPC" class="rgt">
+            <div class="shopBox">
+                <div class="hd">供应商信息</div>
+                <div class="bd">
+                    <a href="javascript:void(0);">
+                        <div class="name"><span th:text="${product.shopTitle}"></span><i
+                                th:if="not${#strings.isEmpty(product.license)}" class="icon shop"></i></div>
+                    </a>
+                    <template v-if="!isShowCaimeiShop">
+                        <template th:if="not${#strings.isEmpty(product.businessScope)}">
+                            <div class="tit">经营范围：</div>
+                            <div class="con" th:text="${product.businessScope}"></div>
+                        </template>
+                        <template th:if="not${#strings.isEmpty(product.shopAddress)}">
+                            <div class="tit">所在地区：</div>
+                            <div class="con" th:text="${product.shopAddress}"></div>
+                        </template>
+                        <div class="tit">满意度：<i th:each="i:${#numbers.sequence(1,5)}" class="icon heart"></i></div>
+                        <a th:href="@{'/supplier-'+ ${product.shopId} +'.html'}" class="btn"
+                           onclick="_czc.push(['_trackEvent','商品详情','点击','查看主页','','Um_Event_ProductShopHome'])">查看主页</a>
+                    </template>
+                </div>
+            </div>
+            <div class="contact section">
+                <div class="hd">联系方式</div>
+                <div class="bd">
+                    <div>采美客服（转接供应商）</div>
+                    <div>电话：</div>
+                    <div>0755-22907771</div>
+                    <div>153-3885-1365</div>
+                </div>
+            </div>
+            <!-- 特殊商品退货须知 -->
+            <div class="return-instructions section" v-if="returnGoodsStutas">
+                <div class="hd">特殊商品退货须知</div>
+                <div class="bd" v-html="helpContent"></div>
+            </div>
+        </div>
+        <!--优惠券弹窗-->
+        <template v-if="GLOBAL_USER_ID>0">
+            <div class="coupon-popup" v-show="isShowPopup" :class="isShowPopup ? 'show' : 'hide'">
+                <div class="coupon-popup-model-content">
+                    <div class="title"><p>优惠券</p><i class="icon mIcon" @click="hidePopup"></i></div>
+                    <div class="coupon-popup-main">
+                        <div class="coupon-popup-tabs">
+                            <div class="popup-tabs-cell" :class="currentTab == 1 ? 'active' : ''"
+                                 @click="queryCouponTabs(1)"><span>未领取</span></div>
+                            <div class="popup-tabs-cell" :class="currentTab == 2 ? 'active' : ''"
+                                 @click="queryCouponTabs(2)"><span>已领取</span></div>
+                        </div>
+                        <div class="coupon-popup-content">
+                            <div class="empty" v-if="isCouponEmpty">
+                                <img src="/img/account/icon-coupon-empty@2x.png">
+                                <div class="msg"><p>暂无可领的优惠券</p></div>
+                            </div>
+                            <div class="coupon-popup-scroll" v-else>
+                                <div class="coupon-list-cell" v-for="(coupon, index) in productCouponList" :key="index"
+                                     :class="currentTab == 2 ? 'none' : ''">
+                                    <div class="coupon-list-le">
+                                        <div class="coupon-list-money">
+                                            <p>￥<span class="maxMoney">{{ coupon.couponAmount }}</span><span
+                                                    class="minMoney">满{{ coupon.touchPrice }}可用</span></p>
+                                        </div>
+                                        <div class="coupon-list-name">
+                                            <p v-if="coupon.couponType == 0">
+                                                {{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品' }}
+                                            </p>
+                                            <p v-if="coupon.couponType == 1">
+                                                {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
+                                            </p>
+                                            <p v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</p>
+                                            <p v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</p>
+                                        </div>
+                                        <div class="coupon-list-time"> {{ coupon.startDate }} - {{ coupon.endDate }}</div>
+                                    </div>
+                                    <div class="coupon-list-ri">
+
+                                        <template v-if="coupon.couponBtnType == 0">
+                                            <template v-if="coupon.couponPayWay == 2">
+                                                <div class="buy" @click="toDeductCoupon(coupon)"
+                                                     id="coupon-exchange-coupon"
+                                                     onclick="_czc.push(['_trackEvent','商品详情','优惠券采美豆兑换','优惠券兑换按钮点击',1,'coupon-exchange-coupon'])">
+                                                    <p>{{ coupon.moneyCouponPrice }}采美豆</p>
+                                                    <p>兑换</p>
+                                                </div>
+                                            </template>
+                                            <template v-else-if="coupon.couponPayWay == 1">
+                                                <div class="buy" @click="toBuyCoupon(coupon)"
+                                                     id="coupon-buy-coupon"
+                                                     onclick="_czc.push(['_trackEvent','商品详情','优惠券购买按钮点击','优惠券购买按钮点击',1,'coupon-buy-coupon'])">
+                                                    <p>￥{{ coupon.moneyCouponPrice }}</p>
+                                                    <p>购买</p>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                            <span class="none"
+                                                  @click="receiveCoupon(coupon)"
+                                                  id="coupon-receive"
+                                                  onclick="_czc.push(['_trackEvent','商品详情','优惠券领取按钮点击','优惠券领取按钮点击',1,'coupon-receive'])">领取
+                                            </span>
+                                            </template>
+                                        </template>
+                                        <span v-if="coupon.couponBtnType == 1">已领取</span>
+                                    </div>
+                                    <template v-if="coupon.moneyCouponFlag == 1">
+                                        <div class="coupon-tags" v-if="coupon.moneyCouponType == 1">意向{{ coupon.couponType | TypeFormat }}</div>
+                                        <div class="coupon-tags"  v-else>定向{{ coupon.couponType | TypeFormat }}</div>
+                                    </template>
+                                    <template v-else>
+                                        <div class="coupon-tags">{{ coupon.couponType | TypeFormat }}</div>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+    <!--Ross 弹窗-->
+    <template v-if="showRossHtml">
+        <template th:replace="components/ross-advert"></template>
+    </template>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script src="/lib/datapicker/moment-2.29.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/magnifier.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></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/common/serviceapi/shopping.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/beautyArchive.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/document/beautyArchiveDetailMixin.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/mixins/supportMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/mixins/productMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/detail.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier-center/encyclopedia/edit.html

@@ -1,354 +1,360 @@
-<!DOCTYPE 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>采美365网-采美百科-我的词条</title>
-    <meta charset="UTF-8">
-    <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
-    <!--element ui 样式表-->
-    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css"/>
-    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
-    <link th:href="@{/css/supplier-center/encyclopedia/edit.css(v=${version})}" rel="stylesheet" type="text/css">
-</head>
-<body>
-<input type="hidden" th:value="${ossBucket}" id="ossBucket">
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-
-<div id="edit" class="bk-container" v-cloak>
-    <div class="navLayout">
-        <div class="top-row">
-            <div class="crumbs">
-                <span>我的采美</span>
-                <span>&gt;</span>
-                <span>采美百科</span>
-                <span>&gt;</span>
-                <span>词条编辑</span>
-            </div>
-        </div>
-        <div class="wrap clear">
-            <!--左侧导航-->
-            <template th:replace="supplier-center/components/tableft"></template>
-            <div class="right " >
-                <div class="top-tip">温馨提示：在采美百科发布词条能提升您的品牌关键词在搜索中的曝光率。（注：未填写的信息项将不会显示在词条页）</div>
-                <div class="valide-form">
-                    <el-form :rules="rules" :model="formData" ref="ruleForm" label-position="top">
-                        <el-form-item label="词条名称：" prop="name">
-                            <el-input v-model="formData.name" placeholder="请输入词条名称" @focus="onFocused" @blur="onBlured"></el-input>
-                            <div class="el-form-item__error" v-if="formValidate.name">敏感词：{{formValidate.name}}</div>
-                        </el-form-item>
-                        <el-form-item label="义项名：" prop="alias">
-                            <content-edit
-                                    :reference-list="formData.referenceList"
-                                    @reference-edit="handleReferenceEdit"
-                                    @toolbar="handleToolbarClick"
-                                    v-model="formData.alias"
-                            ></content-edit>
-                            <el-input v-model="formData.alias" placeholder="请输入义项名，简要说明该事物区别于同名事物的显著特征"
-                                      v-show="false"></el-input>
-                            <div class="el-form-item__error" v-if="formValidate.alias">敏感词：{{formValidate.alias}}</div>
-                        </el-form-item>
-                        <el-form-item label="词条概述：" prop="discription">
-                            <content-edit
-                                    :reference-list="formData.referenceList"
-                                    @reference-edit="handleReferenceEdit"
-                                    @toolbar="handleToolbarClick"
-                                    v-model="formData.discription"
-                            ></content-edit>
-                            <el-input v-model="formData.discription" placeholder="请输入词条概述" v-show="false"></el-input>
-                            <div class="el-form-item__error" v-if="formValidate.discription">敏感词：{{formValidate.discription}}</div>
-                        </el-form-item>
-                        <el-form-item>
-                            <label class="el-form-item__label">概述图册：<span>（注：未上传图片将不会显示在词条页上，最多上传6张）</span></label>
-                            <input type="file" v-show="false"/>
-                            <file-upload @upload-success="handleUploadSuccess" @remove="handleFileRemove" :list="fileList" :limit="6" @click.native="handlerDiscrip"></file-upload>
-                        </el-form-item>
-                        <!-- 信息栏 -->
-                        <div class="bk-label">信息栏<span></span><span class="bk-info-add" @click="handleInfoAdd">增加信息项</span></div>
-                        <div class="bk-form-item-group" v-for="(item, index) in formData.infoList" :key="index">
-                            <span class="bk-info-remove" v-if="formData.infoList.length > 4" @click="handleInfoRemove(index)">删除</span>
-                            <el-form-item>
-                                <el-input v-model="item.infoName" :placeholder="getInfoNamePlaceHolder(index)" @focus="onFocused" @blur="onBlured"></el-input>
-                                <div class="el-form-item__error" v-if="formValidate.infoList">敏感词：{{formValidate.infoList}}</div>
-                            </el-form-item>
-                            <el-form-item>
-                                <content-edit
-                                        v-model="item.infoContent"
-                                        :reference-list="formData.referenceList"
-                                        @reference-edit="handleReferenceEdit"
-                                        @toolbar="handleToolbarClick">
-                                </content-edit>
-                                <el-input v-model="item.infoContent" v-show="false"></el-input>
-                                <div class="el-form-item__error" v-if="formValidate.referenceList">敏感词：{{formValidate.referenceList}}</div>
-                            </el-form-item>
-                        </div>
-                        <!-- 正文 -->
-                        <div class="bk-label">正文<span>（点击侧边按钮即可在文本框后新增内容）</span></div>
-                        <el-form-item v-for="(item, index) in formData.textInfoList" :key="index">
-                            <div class="bk-form-item">
-                                <template v-if="item.dictionaryType !== 3">
-                                    <el-input v-model="item.dictionaryContent" :placeholder="item.placeholder" @focus="onFocused" @blur="onBlured"></el-input>
-                                </template>
-                                <template v-else>
-                                    <content-edit
-                                            v-model="item.dictionaryContent"
-                                            :reference-list="formData.referenceList"
-                                            :placeholder="item.placeholder"
-                                            @reference-edit="handleReferenceEdit"
-                                            @toolbar="handleToolbarClick">
-                                    </content-edit>
-                                </template>
-                                <div class="bk-section">
-                                    <span @click="handleAddTextInfo(index, 1)">+一级标题</span>
-                                    <span @click="handleAddTextInfo(index, 2)">+二级标题</span>
-                                    <span @click="handleAddTextInfo(index, 3)">+内容</span>
-                                    <span class="delete" @click="handleRemoveTextInfo(index)" v-if="formData.textInfoList.length > 3">删除</span>
-                                </div>
-                            </div>
-                            <div class="el-form-item__error" v-if="formValidate.textInfoList">敏感词：{{formValidate.textInfoList}}</div>
-                        </el-form-item>
-                        <!-- 参考资料 -->
-                        <div class="bk-label">参考资料</div>
-                        <ul class="bk-literature-list">
-                            <li v-for="(item, index) in formData.referenceList">
-                                <div><span>[{{index+1}}]</span><span>{{item | reference}}</span></div>
-                                <div class="bk-ref-control">
-                                    <span class="edit" @click="handleReferenceEdit(item)"></span>
-                                    <span class="delete" @click="handleReferenceDelete(item)"></span>
-                                </div>
-                            </li>
-                        </ul>
-                        <div class="bk-label"><em>*</em>头图<i>（建议图片尺寸210px*210px，并上传白底图片）</i></div>
-                        <el-form-item prop="image">
-                            <el-input v-show="false" v-model="formData.image"></el-input>
-                            <file-upload @click.native="handlerDiscrip" @upload-success="handleCoverUploadSuccess" @remove="handleCoverRemove" :list="coverList"></file-upload>
-                        </el-form-item>
-                        <el-form-item label="分类：" prop="typeId">
-                            <el-select class="max-width" v-model="formData.typeId" @click.native="handlerDiscrip" @change="handlerTypeId">
-                                <template v-for="item in typeList">
-                                    <el-option :label="item.name" :value="item.typeId"></el-option>
-                                </template>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="SEO关键词：">
-                            <el-input v-model="formData.seoKeyword" placeholder="例如：面膜" class="seo-auto-input"  @focus="onFocused" @blur="onBlured"></el-input>
-                            <div class="el-form-item__error" v-if="formValidate.seoKeyword">敏感词：{{formValidate.seoKeyword}}</div>
-                        </el-form-item>
-                        <!-- 关联标签库 -->
-                        <el-form-item label="关联标签库" prop="labelIds" class="mint-filter">
-                            <el-select
-                                    v-model="formData.labelIds"
-                                    multiple
-                                    placeholder="请选择标签"
-                                    class="max-width"
-                                    :multiple-limit="6"
-                                    clearable
-                                    filterable
-                                    remote
-                                    reserve-keyword
-                                    :remote-method="fetchQueryKeywordList"
-                                    :loading="remoteLoading"
-                                    @visible-change="changeVisible"
-                            >
-                                <el-option v-for="item in labelList" :key="item.id" :label="item.keyword" :value="item.id"></el-option>
-                            </el-select>
-                            <div class="mint-message" v-if="formValidate.labelIds">{{formValidate.labelIds}}</div>
-                        </el-form-item>
-                        <el-form-item prop="status">
-                            <div class="bk-status">
-                                <label class="el-form-item__label">状态：</label>
-                                <el-radio-group v-model="formData.status">
-                                    <el-radio :label="1">发布</el-radio>
-                                    <el-radio :label="0">存草稿</el-radio>
-                                </el-radio-group>
-                            </div>
-                        </el-form-item>
-                        <el-form-item>
-                        </el-form-item>
-                    </el-form>
-                    <div class="bk-control">
-                        <button class="bk-back" @click="handleBack">返回</button>
-                        <button class="bk-confirm" @click="handleConfirm">提交</button>
-                        <button class="bk-confirm" @click="handlePreview">预览</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="bk-dialog" v-if="referenceDialog">
-        <div class="mask"></div>
-        <div class="bk-dialog-container">
-            <div class="bk-dialog-close" @click="handleRefDialogClose">×</div>
-            <div class="bk-tab">
-                <div class="bk-tab-item" :class="{active: referenceType === 1}" @click="handleTabChange(1)">添加参考资料</div>
-                <div class="bk-tab-item" :class="{active: referenceType === 2}" @click="handleTabChange(2)">引用已有资料</div>
-            </div>
-            <div class="bk-dialog-content">
-                <el-form label-width="110px" ref="referenceForm" :model="referenceData" :rules="referenceRule"  v-show="referenceType === 1">
-                    <el-form-item label="参考资料类型">
-                        <el-select class="max-width" v-model="referenceData.referenceType" @change="handleReferenceTypeChange">
-                            <el-option label="网络资料" :value="1"></el-option>
-                            <el-option label="著作资料" :value="2"></el-option>
-                            <el-option label="其它资料" :value="3"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <template v-if="referenceData.referenceType === 1">
-                        <el-form-item label="输入网址" prop="website">
-                            <el-input placeholder="请以http(s)://开头" v-model="referenceData.website"></el-input>
-                        </el-form-item>
-                        <el-form-item label="文章名字" prop="articleName">
-                            <el-input placeholder="请输入文章名字" v-model="referenceData.articleName"></el-input>
-                        </el-form-item>
-                        <el-form-item label="网站名称" prop="websiteName">
-                            <el-input placeholder="请输入网站名称，如新华网" v-model="referenceData.websiteName"></el-input>
-                        </el-form-item>
-                        <el-form-item label="发表日期" prop="publishTimeStr">
-                            <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.publishTimeStr" type="date" placeholder="请选择出版日期"></el-date-picker>
-                            <!-- <el-input placeholder="发表日期（示例：1970-01-01）" v-model="referenceData.publishTimeStr"></el-input> -->
-                        </el-form-item>
-                        <el-form-item label="引文日期" prop="acitationTimeStr">
-                            <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.acitationTimeStr" type="date" placeholder="请选择出版日期"></el-date-picker>
-                            <!-- <el-input placeholder="引文日期（示例：1970-01-01）" v-model="referenceData.acitationTimeStr"></el-input> -->
-                        </el-form-item>
-                    </template>
-                    <template v-if="referenceData.referenceType === 2">
-                        <el-form-item label="作者" prop="author">
-                            <el-input placeholder="请输入作者名称，多个作者使用英文半角都好分割" v-model="referenceData.author"></el-input>
-                        </el-form-item>
-                        <el-form-item label="著作名" prop="workName">
-                            <el-input placeholder="请输入著作名" v-model="referenceData.workName"></el-input>
-                        </el-form-item>
-                        <el-form-item label="出版地" prop="publicationPlace">
-                            <el-input placeholder="请输入出版地信息" v-model="referenceData.publicationPlace"></el-input>
-                        </el-form-item>
-                        <el-form-item label="出版社" prop="press">
-                            <el-input placeholder="请输入出版社名称" v-model="referenceData.press"></el-input>
-                        </el-form-item>
-                        <el-form-item label="出版年" prop="publicationYearStr">
-                            <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.publicationYearStr" type="date" placeholder="请选择出版日期"></el-date-picker>
-                            <!-- <el-input placeholder="请输入出版日期（示例：1970-01-01）" v-model="referenceData.publicationYearStr"></el-input> -->
-                        </el-form-item>
-                        <el-form-item label="引文页码" prop="acitationWeb">
-                            <el-input placeholder="请输入引用著作的页码，如100-121" v-model="referenceData.acitationWeb"></el-input>
-                        </el-form-item>
-                    </template>
-                    <template v-if="referenceData.referenceType === 3">
-                        <el-form-item label="参考资料说明" prop="referenceDescription">
-                            <el-input type="textarea" rows="4" placeholder="请输入其他类型参考资料" v-model="referenceData.referenceDescription"></el-input>
-                        </el-form-item>
-                        <el-form-item label="图片描述" prop="imageDescription">
-                            <el-input placeholder="请输入其他类型参考资料的具体描述" v-model="referenceData.imageDescription"></el-input>
-                        </el-form-item>
-                        <el-form-item label="图片上传" prop="imageUrl">
-                            <el-input v-show="false" v-model="referenceData.imageUrl"></el-input>
-                            <file-upload @upload-success="handleReferenceImageUploadSuccess" @remove="handleReferenceImageRemove" :list="referenceImageList"></file-upload>
-                        </el-form-item>
-                    </template>
-                </el-form>
-                <ul class="bk-literature-list" v-show="referenceType === 2">
-                    <template v-for="(item, index) in formData.referenceList">
-                        <li :key="item.ctrlId" @click="handleSelectReference(item, index)"><span>[{{index+1}}]</span><span>{{item | reference}}</span></li>
-                    </template>
-                </ul>
-            </div>
-            <div class="bk-dialog-footer">
-                <button class="bk-cancel" @click="handleRefDialogClose">取消</button>
-                <button class="bk-confirm" @click="handleConfirmReference">确定</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- 采美百科协议 -->
-    <template v-if="showAgreement">
-        <div class="bk-agreement-mask"></div>
-        <div class="bk-agreement">
-            <div class="bk-header">
-                <span>创建词条引导</span>
-            </div>
-            <div class="bk-desc">
-                欢迎进入创建词条引导，为便于您更好的通过审核，请务必确保您已知晓百科词条的编辑须知，如有<br />疑问，您可以<a href="/help/1019.html">点此</a>求助采美工作人员。
-            </div>
-            <div class="bk-content">
-                <h2>声明</h2>
-                <div>
-                    <p><span>在正式创建词条前，首先请你承诺：</span></p>
-                    <p>1．不在百科添加广告性质的内容， 如联系方式，官方网站链接等；</p>
-                    <p>2．不在百科编写涉及反动，违法犯罪，色情，暴力的内容；</p>
-                    <p>3．不在百科编写虚假的、捏造的、恶搞的、缺乏根据的内容；</p>
-                    <p>4．不侵犯他人合理权益；</p>
-                    <p>5．接受违反以上规则时，百科账号会被封禁的结果。</p>
-                </div>
-                <h2>词条名</h2>
-                <div>
-                    <p><span>成功创建词条的首要条件是了解一些基础知识！</span></p>
-                    <p>· 什么是词条？</p>
-                    <p>词条指的是对于单一事物内容的介绍，例如技术，成分等。每个词条都有属于自己的名称，你可以通过搜索词条的名称来找到它们。已有词条重名？创建多义词！与已有词条意义相同？反馈同义词！</p>
-                    <p>· 什么是规范的词条名？</p>
-                    <p>采美百科规范的词条名是一个专有名词，请使用正式的全称或最广为人知的常见名。例如：皮秒激光美容、光子嫩肤、线粒体、葡聚糖等</p>
-                </div>
-                <h2>主题</h2>
-                <div>
-                    <p>恭喜你已经完成了创建词条的第一步！现在想一想你要创建的词条属于什么类型？选择正确的类型，精确定位你的创建难点所在！</p>
-                    <p>产品成分类词条：如玻尿酸钠、葡聚糖、虎杖等</p>
-                    <p>产品技术词条：如射频、皮秒、808半导体激光技术、透热疗法、448KHz、LDM水滴提升等</p>
-                </div>
-                <h2>词条创建要求</h2>
-                <div>
-                    <p><span>1、描述客观</span></p>
-                    <p>
-                        描述事物时以事实为依据不加入感情色彩，不掺杂个人的好恶。百科词条是客观内容的集合，只站在第三
-                        方立场，以事实说话。例如，某篮球运动员某一场的投篮命中率较差，一般的表述是命中率低，甚至使用
-                        “打铁”之类的贬义词。而这样的表述模糊不清，多少算低，多少算高各有标准；同时也会造成支持者和
-                        反对者的口水战。所以直接把赛事数据列出，是高是低各自评说即可。另外在筛选内容时，也要保证公正
-                        客观，尤其对于争议性内容，保留多方观点并附以可靠的参考资料，是处理争议内容较为可取的做法。
-                    </p>
-                    <p><span>2、修饰适当</span></p>
-                    <p>
-                        百科词条提倡用语“客观”，在一般性的叙述中（区别于引用原文的引述）尽量少的使用形容词和程度副
-                        词（最XXXX、十分XXX……）。
-                    </p>
-                    <p><span>3、参考资料要有效</span></p>
-                    <p>
-                        参考资料是正文内容客观的另一种表现形式。词条某条内容，光靠“说”自己客观是不够的，应以可信有
-                        效的参考资料作为佐证来源，才能证明该内容是否已获得公众知晓或认可。特色词条应该保证一半以上的
-                        信息点都是有可靠来源的（由科学百科权威认证的特色词条，应确保词条正文中（含概述）每个目录模块
-                        中都有至少一条权威参考资料）。这里的有来源不是要求一字一句的复制粘贴，而是“内容虽经必要提炼、
-                        整理，但却不失原意”。例如前述的两个姜文词条中的文段，整理后的内容要素和观点依然来自参考资料，
-                        并没有增减其原意。
-                    </p>
-                    <p>
-                        可靠的来源一般包括文献、书籍等出版物、主流媒体发布的消息、政府或公众机构官网发布的内容等。关
-                        于可靠的来源的具体定义，请参阅百度百科：参考资料。
-                    </p>
-                    <p>
-                        如“牛顿第一运动定律”词条中，定律内容、发现者、适用范围等都是必不可少的重要内容，这些部分的
-                        缺失会导致读者对词条内容的错误认识。
-                    </p>
-                </div>
-                <div class="bk-control">
-                    <button @click="showAgreement=false">我已阅读并知晓</button>
-                    <div class="bk-link"><a href="/help/1042.html">《采美百科用户服务协议》</a></div>
-                </div>
-            </div>
-        </div>
-    </template>
-</div>
-
-<!-- 引入底部 -->
-<template th:replace="components/footer"></template>
-<template th:replace="components/foot-link"></template>
-<script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/uuidv4.min.js}"></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/supplier.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/shopBaike.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/oss-upload.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/components/content-edit/content-edit.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/components/content-edit/index.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/edit.js(v=${version})}"></script>
-</body>
-</html>
+<!DOCTYPE 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>采美365网-采美百科-我的词条</title>
+    <meta charset="UTF-8">
+    <meta name="referrer" content="never">
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css"/>
+    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
+    <link th:href="@{/css/supplier-center/encyclopedia/edit.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<input type="hidden" th:value="${ossBucket}" id="ossBucket">
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<div id="edit" class="bk-container" v-cloak>
+    <div class="navLayout">
+        <div class="top-row">
+            <div class="crumbs">
+                <span>我的采美</span>
+                <span>&gt;</span>
+                <span>采美百科</span>
+                <span>&gt;</span>
+                <span>词条编辑</span>
+            </div>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="supplier-center/components/tableft"></template>
+            <div class="right " >
+                <div class="top-tip">温馨提示：在采美百科发布词条能提升您的品牌关键词在搜索中的曝光率。（注：未填写的信息项将不会显示在词条页）</div>
+                <div class="valide-form">
+                    <el-form :rules="rules" :model="formData" ref="ruleForm" label-position="top">
+                        <el-form-item label="词条名称：" prop="name">
+                            <el-input v-model="formData.name" placeholder="请输入词条名称" @focus="onFocused" @blur="onBlured"></el-input>
+                            <div class="el-form-item__error" v-if="formValidate.name">敏感词：{{formValidate.name}}</div>
+                        </el-form-item>
+                        <el-form-item label="义项名：" prop="alias">
+                            <content-edit
+                                    :reference-list="formData.referenceList"
+                                    @reference-edit="handleReferenceEdit"
+                                    @toolbar="handleToolbarClick"
+                                    v-model="formData.alias"
+                            ></content-edit>
+                            <el-input v-model="formData.alias" placeholder="请输入义项名，简要说明该事物区别于同名事物的显著特征"
+                                      v-show="false"></el-input>
+                            <div class="el-form-item__error" v-if="formValidate.alias">敏感词：{{formValidate.alias}}</div>
+                        </el-form-item>
+                        <el-form-item label="词条概述：" prop="discription">
+                            <content-edit
+                                    :reference-list="formData.referenceList"
+                                    @reference-edit="handleReferenceEdit"
+                                    @toolbar="handleToolbarClick"
+                                    v-model="formData.discription"
+                            ></content-edit>
+                            <el-input v-model="formData.discription" placeholder="请输入词条概述" v-show="false"></el-input>
+                            <div class="el-form-item__error" v-if="formValidate.discription">敏感词：{{formValidate.discription}}</div>
+                        </el-form-item>
+                        <div class="bk-label"><em>*</em>banner<i>（建议图片尺寸210px*210px，并上传白底图片）</i></div>
+                        <el-form-item prop="banner" class="banner">
+                            <el-input v-show="false" v-model="formData.banner"></el-input>
+                            <file-upload @click.native="handlerDiscrip" @upload-success="handleBannerUploadSuccess" @remove="handleBannerRemove" :list="bannerList"></file-upload>
+                        </el-form-item>
+                        <el-form-item>
+                            <label class="el-form-item__label">概述图册：<span>（注：未上传图片将不会显示在词条页上，最多上传6张）</span></label>
+                            <el-input v-show="false" v-model="formData.image"></el-input>
+                            <file-upload @upload-success="handleUploadSuccess" text="添加图片或视频" @remove="handleFileRemove" :list="fileList" :limit="6" @click.native="handlerDiscrip"></file-upload>
+                        </el-form-item>
+                        <!-- 信息栏 -->
+                        <div class="bk-label">信息栏<span></span><span class="bk-info-add" @click="handleInfoAdd">增加信息项</span></div>
+                        <div class="bk-form-item-group" v-for="(item, index) in formData.infoList" :key="index">
+                            <span class="bk-info-remove" v-if="formData.infoList.length > 4" @click="handleInfoRemove(index)">删除</span>
+                            <el-form-item>
+                                <el-input v-model="item.infoName" :placeholder="getInfoNamePlaceHolder(index)" @focus="onFocused" @blur="onBlured"></el-input>
+                                <div class="el-form-item__error" v-if="formValidate.infoList">敏感词：{{formValidate.infoList}}</div>
+                            </el-form-item>
+                            <el-form-item>
+                                <content-edit
+                                        v-model="item.infoContent"
+                                        :reference-list="formData.referenceList"
+                                        @reference-edit="handleReferenceEdit"
+                                        @toolbar="handleToolbarClick">
+                                </content-edit>
+                                <el-input v-model="item.infoContent" v-show="false"></el-input>
+                                <div class="el-form-item__error" v-if="formValidate.referenceList">敏感词：{{formValidate.referenceList}}</div>
+                            </el-form-item>
+                        </div>
+                        <!-- 正文 -->
+                        <div class="bk-label">正文<span>（点击侧边按钮即可在文本框后新增内容）</span></div>
+                        <el-form-item v-for="(item, index) in formData.textInfoList" :key="index">
+                            <div class="bk-form-item">
+                                <template v-if="item.dictionaryType !== 3">
+                                    <el-input v-model="item.dictionaryContent" :placeholder="item.placeholder" @focus="onFocused" @blur="onBlured"></el-input>
+                                </template>
+                                <template v-else>
+                                    <content-edit
+                                            v-model="item.dictionaryContent"
+                                            :reference-list="formData.referenceList"
+                                            :placeholder="item.placeholder"
+                                            @reference-edit="handleReferenceEdit"
+                                            @toolbar="handleToolbarClick">
+                                    </content-edit>
+                                </template>
+                                <div class="bk-section">
+                                    <span @click="handleAddTextInfo(index, 1)">+一级标题</span>
+                                    <span @click="handleAddTextInfo(index, 2)">+二级标题</span>
+                                    <span @click="handleAddTextInfo(index, 3)">+内容</span>
+                                    <span class="delete" @click="handleRemoveTextInfo(index)" v-if="formData.textInfoList.length > 3">删除</span>
+                                </div>
+                            </div>
+                            <div class="el-form-item__error" v-if="formValidate.textInfoList">敏感词：{{formValidate.textInfoList}}</div>
+                        </el-form-item>
+                        <!-- 参考资料 -->
+                        <div class="bk-label">参考资料</div>
+                        <ul class="bk-literature-list">
+                            <li v-for="(item, index) in formData.referenceList">
+                                <div><span>[{{index+1}}]</span><span>{{item | reference}}</span></div>
+                                <div class="bk-ref-control">
+                                    <span class="edit" @click="handleReferenceEdit(item)"></span>
+                                    <span class="delete" @click="handleReferenceDelete(item)"></span>
+                                </div>
+                            </li>
+                        </ul>
+                        <div class="bk-label"><em>*</em>头图<i>（建议图片尺寸210px*210px，并上传白底图片）</i></div>
+                        <el-form-item prop="image">
+                            <el-input v-show="false" v-model="formData.image"></el-input>
+                            <file-upload @click.native="handlerDiscrip" @upload-success="handleCoverUploadSuccess" @remove="handleCoverRemove" :list="coverList"></file-upload>
+                        </el-form-item>
+                        <el-form-item label="分类：" prop="typeId">
+                            <el-select class="max-width" v-model="formData.typeId" @click.native="handlerDiscrip" @change="handlerTypeId">
+                                <template v-for="item in typeList">
+                                    <el-option :label="item.name" :value="item.typeId"></el-option>
+                                </template>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="SEO关键词：">
+                            <el-input v-model="formData.seoKeyword" placeholder="例如：面膜" class="seo-auto-input"  @focus="onFocused" @blur="onBlured"></el-input>
+                            <div class="el-form-item__error" v-if="formValidate.seoKeyword">敏感词：{{formValidate.seoKeyword}}</div>
+                        </el-form-item>
+                        <!-- 关联标签库 -->
+                        <el-form-item label="关联标签库" prop="labelIds" class="mint-filter">
+                            <el-select
+                                    v-model="formData.labelIds"
+                                    multiple
+                                    placeholder="请选择标签"
+                                    class="max-width"
+                                    :multiple-limit="6"
+                                    clearable
+                                    filterable
+                                    remote
+                                    reserve-keyword
+                                    :remote-method="fetchQueryKeywordList"
+                                    :loading="remoteLoading"
+                                    @visible-change="changeVisible"
+                            >
+                                <el-option v-for="item in labelList" :key="item.id" :label="item.keyword" :value="item.id"></el-option>
+                            </el-select>
+                            <div class="mint-message" v-if="formValidate.labelIds">{{formValidate.labelIds}}</div>
+                        </el-form-item>
+                        <el-form-item prop="status">
+                            <div class="bk-status">
+                                <label class="el-form-item__label">状态：</label>
+                                <el-radio-group v-model="formData.status">
+                                    <el-radio :label="1">发布</el-radio>
+                                    <el-radio :label="0">存草稿</el-radio>
+                                </el-radio-group>
+                            </div>
+                        </el-form-item>
+                        <el-form-item>
+                        </el-form-item>
+                    </el-form>
+                    <div class="bk-control">
+                        <button class="bk-back" @click="handleBack">返回</button>
+                        <button class="bk-confirm" @click="handleConfirm">提交</button>
+                        <button class="bk-confirm" @click="handlePreview">预览</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="bk-dialog" v-if="referenceDialog">
+        <div class="mask"></div>
+        <div class="bk-dialog-container">
+            <div class="bk-dialog-close" @click="handleRefDialogClose">×</div>
+            <div class="bk-tab">
+                <div class="bk-tab-item" :class="{active: referenceType === 1}" @click="handleTabChange(1)">添加参考资料</div>
+                <div class="bk-tab-item" :class="{active: referenceType === 2}" @click="handleTabChange(2)">引用已有资料</div>
+            </div>
+            <div class="bk-dialog-content">
+                <el-form label-width="110px" ref="referenceForm" :model="referenceData" :rules="referenceRule"  v-show="referenceType === 1">
+                    <el-form-item label="参考资料类型">
+                        <el-select class="max-width" v-model="referenceData.referenceType" @change="handleReferenceTypeChange">
+                            <el-option label="网络资料" :value="1"></el-option>
+                            <el-option label="著作资料" :value="2"></el-option>
+                            <el-option label="其它资料" :value="3"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <template v-if="referenceData.referenceType === 1">
+                        <el-form-item label="输入网址" prop="website">
+                            <el-input placeholder="请以http(s)://开头" v-model="referenceData.website"></el-input>
+                        </el-form-item>
+                        <el-form-item label="文章名字" prop="articleName">
+                            <el-input placeholder="请输入文章名字" v-model="referenceData.articleName"></el-input>
+                        </el-form-item>
+                        <el-form-item label="网站名称" prop="websiteName">
+                            <el-input placeholder="请输入网站名称，如新华网" v-model="referenceData.websiteName"></el-input>
+                        </el-form-item>
+                        <el-form-item label="发表日期" prop="publishTimeStr">
+                            <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.publishTimeStr" type="date" placeholder="请选择出版日期"></el-date-picker>
+                            <!-- <el-input placeholder="发表日期（示例：1970-01-01）" v-model="referenceData.publishTimeStr"></el-input> -->
+                        </el-form-item>
+                        <el-form-item label="引文日期" prop="acitationTimeStr">
+                            <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.acitationTimeStr" type="date" placeholder="请选择出版日期"></el-date-picker>
+                            <!-- <el-input placeholder="引文日期（示例：1970-01-01）" v-model="referenceData.acitationTimeStr"></el-input> -->
+                        </el-form-item>
+                    </template>
+                    <template v-if="referenceData.referenceType === 2">
+                        <el-form-item label="作者" prop="author">
+                            <el-input placeholder="请输入作者名称，多个作者使用英文半角都好分割" v-model="referenceData.author"></el-input>
+                        </el-form-item>
+                        <el-form-item label="著作名" prop="workName">
+                            <el-input placeholder="请输入著作名" v-model="referenceData.workName"></el-input>
+                        </el-form-item>
+                        <el-form-item label="出版地" prop="publicationPlace">
+                            <el-input placeholder="请输入出版地信息" v-model="referenceData.publicationPlace"></el-input>
+                        </el-form-item>
+                        <el-form-item label="出版社" prop="press">
+                            <el-input placeholder="请输入出版社名称" v-model="referenceData.press"></el-input>
+                        </el-form-item>
+                        <el-form-item label="出版年" prop="publicationYearStr">
+                            <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.publicationYearStr" type="date" placeholder="请选择出版日期"></el-date-picker>
+                            <!-- <el-input placeholder="请输入出版日期（示例：1970-01-01）" v-model="referenceData.publicationYearStr"></el-input> -->
+                        </el-form-item>
+                        <el-form-item label="引文页码" prop="acitationWeb">
+                            <el-input placeholder="请输入引用著作的页码，如100-121" v-model="referenceData.acitationWeb"></el-input>
+                        </el-form-item>
+                    </template>
+                    <template v-if="referenceData.referenceType === 3">
+                        <el-form-item label="参考资料说明" prop="referenceDescription">
+                            <el-input type="textarea" rows="4" placeholder="请输入其他类型参考资料" v-model="referenceData.referenceDescription"></el-input>
+                        </el-form-item>
+                        <el-form-item label="图片描述" prop="imageDescription">
+                            <el-input placeholder="请输入其他类型参考资料的具体描述" v-model="referenceData.imageDescription"></el-input>
+                        </el-form-item>
+                        <el-form-item label="图片上传" prop="imageUrl">
+                            <el-input v-show="false" v-model="referenceData.imageUrl"></el-input>
+                            <file-upload @upload-success="handleReferenceImageUploadSuccess" @remove="handleReferenceImageRemove" :list="referenceImageList"></file-upload>
+                        </el-form-item>
+                    </template>
+                </el-form>
+                <ul class="bk-literature-list" v-show="referenceType === 2">
+                    <template v-for="(item, index) in formData.referenceList">
+                        <li :key="item.ctrlId" @click="handleSelectReference(item, index)"><span>[{{index+1}}]</span><span>{{item | reference}}</span></li>
+                    </template>
+                </ul>
+            </div>
+            <div class="bk-dialog-footer">
+                <button class="bk-cancel" @click="handleRefDialogClose">取消</button>
+                <button class="bk-confirm" @click="handleConfirmReference">确定</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 采美百科协议 -->
+    <template v-if="showAgreement">
+        <div class="bk-agreement-mask"></div>
+        <div class="bk-agreement">
+            <div class="bk-header">
+                <span>创建词条引导</span>
+            </div>
+            <div class="bk-desc">
+                欢迎进入创建词条引导，为便于您更好的通过审核，请务必确保您已知晓百科词条的编辑须知，如有<br />疑问，您可以<a href="/help/1019.html">点此</a>求助采美工作人员。
+            </div>
+            <div class="bk-content">
+                <h2>声明</h2>
+                <div>
+                    <p><span>在正式创建词条前，首先请你承诺：</span></p>
+                    <p>1．不在百科添加广告性质的内容， 如联系方式，官方网站链接等；</p>
+                    <p>2．不在百科编写涉及反动，违法犯罪，色情，暴力的内容；</p>
+                    <p>3．不在百科编写虚假的、捏造的、恶搞的、缺乏根据的内容；</p>
+                    <p>4．不侵犯他人合理权益；</p>
+                    <p>5．接受违反以上规则时，百科账号会被封禁的结果。</p>
+                </div>
+                <h2>词条名</h2>
+                <div>
+                    <p><span>成功创建词条的首要条件是了解一些基础知识！</span></p>
+                    <p>· 什么是词条？</p>
+                    <p>词条指的是对于单一事物内容的介绍，例如技术，成分等。每个词条都有属于自己的名称，你可以通过搜索词条的名称来找到它们。已有词条重名？创建多义词！与已有词条意义相同？反馈同义词！</p>
+                    <p>· 什么是规范的词条名？</p>
+                    <p>采美百科规范的词条名是一个专有名词，请使用正式的全称或最广为人知的常见名。例如：皮秒激光美容、光子嫩肤、线粒体、葡聚糖等</p>
+                </div>
+                <h2>主题</h2>
+                <div>
+                    <p>恭喜你已经完成了创建词条的第一步！现在想一想你要创建的词条属于什么类型？选择正确的类型，精确定位你的创建难点所在！</p>
+                    <p>产品成分类词条：如玻尿酸钠、葡聚糖、虎杖等</p>
+                    <p>产品技术词条：如射频、皮秒、808半导体激光技术、透热疗法、448KHz、LDM水滴提升等</p>
+                </div>
+                <h2>词条创建要求</h2>
+                <div>
+                    <p><span>1、描述客观</span></p>
+                    <p>
+                        描述事物时以事实为依据不加入感情色彩，不掺杂个人的好恶。百科词条是客观内容的集合，只站在第三
+                        方立场，以事实说话。例如，某篮球运动员某一场的投篮命中率较差，一般的表述是命中率低，甚至使用
+                        “打铁”之类的贬义词。而这样的表述模糊不清，多少算低，多少算高各有标准；同时也会造成支持者和
+                        反对者的口水战。所以直接把赛事数据列出，是高是低各自评说即可。另外在筛选内容时，也要保证公正
+                        客观，尤其对于争议性内容，保留多方观点并附以可靠的参考资料，是处理争议内容较为可取的做法。
+                    </p>
+                    <p><span>2、修饰适当</span></p>
+                    <p>
+                        百科词条提倡用语“客观”，在一般性的叙述中（区别于引用原文的引述）尽量少的使用形容词和程度副
+                        词（最XXXX、十分XXX……）。
+                    </p>
+                    <p><span>3、参考资料要有效</span></p>
+                    <p>
+                        参考资料是正文内容客观的另一种表现形式。词条某条内容，光靠“说”自己客观是不够的，应以可信有
+                        效的参考资料作为佐证来源，才能证明该内容是否已获得公众知晓或认可。特色词条应该保证一半以上的
+                        信息点都是有可靠来源的（由科学百科权威认证的特色词条，应确保词条正文中（含概述）每个目录模块
+                        中都有至少一条权威参考资料）。这里的有来源不是要求一字一句的复制粘贴，而是“内容虽经必要提炼、
+                        整理，但却不失原意”。例如前述的两个姜文词条中的文段，整理后的内容要素和观点依然来自参考资料，
+                        并没有增减其原意。
+                    </p>
+                    <p>
+                        可靠的来源一般包括文献、书籍等出版物、主流媒体发布的消息、政府或公众机构官网发布的内容等。关
+                        于可靠的来源的具体定义，请参阅百度百科：参考资料。
+                    </p>
+                    <p>
+                        如“牛顿第一运动定律”词条中，定律内容、发现者、适用范围等都是必不可少的重要内容，这些部分的
+                        缺失会导致读者对词条内容的错误认识。
+                    </p>
+                </div>
+                <div class="bk-control">
+                    <button @click="handlerShowAgreement">我已阅读并知晓</button>
+                    <div class="bk-link"><input v-model="isCheck" type="checkbox" class="check"/><a href="/help/1042.html">《采美百科用户服务协议》</a></div>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/uuidv4.min.js}"></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/supplier.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/shopBaike.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/oss-upload.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/components/content-edit/content-edit.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/components/content-edit/index.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/edit.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier_login/index.html

@@ -436,7 +436,7 @@
             <div class="contant_init">
                 <div class="community">
                     <div class="community_video">
-                        <div class="community_title">美业企谈</div>
+                        <div class="community_title">美业企谈<a href="/supplier/attractionMore.html?active=0">更多></a></div>
                         <div class="community_list" v-cloak v-if="isPC">
                             <div class="video_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in videoList" :key="item.id" @click="playerOn(item.cmBrandFiles[0].ossUrl)" v-if="item.pcStatus == '1'">
                                 <div class="video_list_item_content">
@@ -467,7 +467,7 @@
                         </div>
                     </div>
                     <div class="community_article">
-                        <div class="community_title">干货知识</div>
+                        <div class="community_title">干货知识<a href="/supplier/attractionMore.html?active=1">更多></a></div>
                         <div class="community_list" v-if="isPC" v-cloak>
                             <div class="article_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in articelList" :key="item.id" @click="textInfo(item.id)" v-if="item.pcStatus == '1'">
                                 <div class="article_list_item_content">

src/main/resources/templates/supplier_login/more.html

@@ -0,0 +1,63 @@
+<!DOCTYPE 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 " xmlns="http://www.w3.org/1999/html">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="referrer" content="never">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" />
+  <meta name="format-detection" content="telephone=yes" />
+  <link th:href="@{/css/supplier-login/more-h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+  <link th:href="@{/css/supplier-login/more-pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+  <title>美业参谋</title>
+</head>
+
+<body>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<input type="hidden" th:value="${agent}" id="userAgent">
+<div id="More" v-cloak>
+  <el-image :src="isPC ? 'https://static.caimei365.com/app/img/supplier-login/growth/pc-banner.png' : 'https://static.caimei365.com/app/img/supplier-login/growth/banner.png'" class="bg-More"></el-image>
+  <div class="contain">
+    <div class="content-tab">
+      <div :class="item.id === active ? 'active' : ''" class="tab" v-for="item in contentList" :key="item.id" @click="handlerActiveTab(item)">{{ item.title }}</div>
+    </div>
+    <div class="grid-content" v-if="active === 0" :style="{gridTemplateRows: `repeat(${templateRowsNum}, 1fr)`}">
+      <com-video v-for="item in dataList" :key="item.id" :content="item.title" @click.native="handlerVideo(item)" :id="item.id" :image="isPC ? item.headPcBanner : item.headAppBanner"/>
+    </div>
+    <div class="grid-content" v-else :style="{gridTemplateRows: `repeat(${templateRowsNum}, 1fr)`}">
+      <com-article v-for="item in dataList" :key="item.id" :content="item.content" :title="item.title" @click.native="handlerArticle(item)" :id="item.id" :image="isPC ? item.headPcBanner : item.headAppBanner"/>
+    </div>
+    <div class="cm_video_player" ref="Myplayer">
+      <div class="close"><el-image @click="playerOff" src="https://static.caimei365.com/app/img/supplier-login/close.png" class="videoClose"></el-image></div>
+      <video controls ref="cm_player" id="myVideo" width="60%" webkit-playsinline="true" playsinline="true">
+        <source type="video/mp4">
+        您的浏览器不支持Video标签。
+      </video>
+    </div>
+  </div>
+  <!--分页-->
+  <div class="page">
+    <div v-if="pageTotal > 0" class="pageWrapTramp">
+      <a v-if="params.pageNum > 1" class="prev" @click="paginationUrl(params.pageNum * 1 - 1)"></a>
+      <div v-for="n in showPageBtn">
+        <a v-if="n" :class="{'on':(n === params.pageNum)}" @click="paginationUrl(n)" v-text="n"></a>
+        <span v-else>···</span>
+      </div>
+      <a v-if="params.pageNum < pageTotal" class="next" @click="paginationUrl(params.pageNum * 1 + 1)"></a>
+      <span>共<b v-text="pageTotal > 1 ? pageTotal : 1"></b>页</span>
+      <span>跳至</span>
+      <input v-model="pageInput" @blur="checkNum()"/>
+      <span>页</span>&nbsp;
+      <a class="btn" @click="paginationUrl(pageInput)">点击跳转</a>
+    </div>
+  </div>
+</div>
+
+<template th:replace="/supplier_login/supplier-head"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/components/content-video.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/components/content-article.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/more.js(v=${version})}"></script>
+</body>
+</html>
+

src/main/resources/templates/supplier_login/supplier-head.html

@@ -0,0 +1,92 @@
+<!DOCTYPE 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 " xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" />
+    <meta name="format-detection" content="telephone=yes" />
+    <title>美业参谋</title>
+    <link rel="canonical" href="https://www.caimei365.com/" />
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/index/index_new.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/index/index_new.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/supplier-login/text_info.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/supplier-login/login-h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css" />
+    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
+    <!--    <template th:replace="components/analysis"></template>-->
+</head>
+
+<body>
+<div id="login_content" ref="login_content" v-cloak>
+    <div class="login_header">
+        <div class="login_header_container">
+            <div class="img_logo" @click="goToIndex">
+                <div class="logo" style="background-size: contain"></div>
+                <div class="text">美业参谋</div>
+            </div>
+            <div class="header_link" v-cloak>
+                <a ref="link_item" @click="H5link(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
+                    {{item.title}}
+                </a>
+                <div class="nav_link" ref="nav_link_item">
+                    <div class="nav_link_item"></div>
+                </div>
+            </div>
+            <div style="display: flex;justify-content: center;align-items: center">
+                <div class="iphone">
+                    <div></div>
+                    <div>153-3889-7365</div>
+                </div>
+                <div v-if="userInfo && userInfo.userIdentity === 3 && isPC" v-cloak class="username">
+                    <el-popover placement="bottom" width="50" trigger="hover" v-if="isPC">
+                        <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
+                            <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
+                            <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
+                            <a class="a_cm" href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                        </div>
+                        <el-button slot="reference" type="text" style="font-size: 0.8vw;">{{userInfo.name}}</el-button>
+                    </el-popover>
+                </div>
+                <div v-if="!isPC && userInfo" class="H5_header">
+                    <div class="H5_username" @click="hideAction">
+                        <img src="/img/supplier-login/H5/userdefault.png" style="width: 5vw;height: 5vw" />
+                    </div>
+                    <div style="color: #FF5B00;font-size: 3.6vw;margin: 0 3.6vw;">菜单</div>
+                    <img src="/img/supplier-login/H5/openMenu.png" @click="openDrawn" v-if="!drawer" style="width: 3.2vw;height: 3.2vw" />
+                    <img src="/img/supplier-login/H5/close.png" v-else @click="openDrawn" style="width: 3.2vw;height: 3.2vw" />
+                </div>
+                <div class="login_regist" v-if="!userInfo">
+                    <div class="login_btn"><a rel="nofollow" href="/supplier/register.html">注册</a></div>
+                    <div class="login_btn" style="background: #FF5B00;"><a class="login_a" style="color:white" href="/supplierlogin.html" rel="nofollow">登录</a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="text_info" style="background: #fff;">
+        <!-- 底部区域 end -->
+        <template th:replace="components/footer" v-if="isPC"></template>
+        <template th:replace="components/foot-link" v-if="isPC"></template>
+    </div>
+    <!--  抽屉  -->
+    <el-drawer :visible.sync="drawer" v-if="!isPC">
+        <div class="drawer_box" @click="H5link(item)" v-for="item in activeLinks" :key="item.id">{{item.title}}</div>
+    </el-drawer>
+    <!--    底部选项   -->
+    <van-action-sheet v-model="cShow" :actions="supplierActions" @select="onSelect" v-if="userInfo.userIdentity === 3" />
+    <van-action-sheet v-model="cShow" :actions="userActions" @select="onSelect" v-if="userInfo.userIdentity === 2 || userInfo.userIdentity === 4" />
+</div>
+
+
+<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
+<script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
+<script type="text/javascript" src="/lib/element-ui/vant.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/text_info.js(v=${version})}"></script>
+</body>
+
+</html>

src/main/resources/templates/supplier_login/text_info.html

@@ -1,93 +1,93 @@
-<!DOCTYPE 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 " xmlns="http://www.w3.org/1999/html">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" />
-    <meta name="format-detection" content="telephone=yes" />
-    <title>美业参谋</title>
-    <link rel="canonical" href="https://www.caimei365.com/" />
-    <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/index/index_new.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/index/index_new.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/supplier-login/text_info.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/supplier-login/login-h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
-    <!--element ui 样式表-->
-    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css" />
-    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
-    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
-    <!--    <template th:replace="components/analysis"></template>-->
-</head>
-
-<body>
-    <div id="login_content" ref="login_content">
-        <div class="login_header">
-            <div class="login_header_container">
-                <div class="img_logo" @click="goToIndex">
-                    <div class="logo" style="background-size: contain"></div>
-                    <div class="text">美业参谋</div>
-                </div>
-                <div class="header_link" v-cloak>
-                    <a ref="link_item" @click="H5link(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
-          {{item.title}}
-        </a>
-                    <div class="nav_link" ref="nav_link_item">
-                        <div class="nav_link_item"></div>
-                    </div>
-                </div>
-                <div style="display: flex;justify-content: center;align-items: center">
-                    <div class="iphone">
-                        <div></div>
-                        <div>153-3889-7365</div>
-                    </div>
-                    <div v-if="userInfo && userInfo.userIdentity === 3 && isPC" v-cloak class="username">
-                        <el-popover placement="bottom" width="50" trigger="hover" v-if="isPC">
-                            <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
-                                <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
-                                <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
-                                <a class="a_cm" href="javascript:void(0);" @click="userLogOut()">退出登录</a>
-                            </div>
-                            <el-button slot="reference" type="text" style="font-size: 0.8vw;">{{userInfo.name}}</el-button>
-                        </el-popover>
-                    </div>
-                    <div v-if="!isPC && userInfo" class="H5_header">
-                        <div class="H5_username" @click="hideAction">
-                            <img src="/img/supplier-login/H5/userdefault.png" style="width: 5vw;height: 5vw" />
-                        </div>
-                        <div style="color: #FF5B00;font-size: 3.6vw;margin: 0 3.6vw;">菜单</div>
-                        <img src="/img/supplier-login/H5/openMenu.png" @click="openDrawn" v-if="!drawer" style="width: 3.2vw;height: 3.2vw" />
-                        <img src="/img/supplier-login/H5/close.png" v-else @click="openDrawn" style="width: 3.2vw;height: 3.2vw" />
-                    </div>
-                    <div class="login_regist" v-if="!userInfo">
-                        <div class="login_btn"><a rel="nofollow" href="/supplier/register.html">注册</a></div>
-                        <div class="login_btn" style="background: #FF5B00;"><a class="login_a" style="color:white" href="/supplierlogin.html" rel="nofollow">登录</a></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="text_info" v-if="!showContent" style="background: #fff;">
-            <div class="text_info_contain" v-html="JSON.parse(localStorage.getItem('text_info_from')).content"></div>
-            <!-- 底部区域 end -->
-            <template th:replace="components/footer" v-if="isPC"></template>
-            <template th:replace="components/foot-link" v-if="isPC"></template>
-        </div>
-        <!--  抽屉  -->
-        <el-drawer :visible.sync="drawer" v-if="!isPC">
-            <div class="drawer_box" @click="H5link(item)" v-for="item in activeLinks" :key="item.id">{{item.title}}</div>
-        </el-drawer>
-        <!--    底部选项   -->
-        <van-action-sheet v-model="cShow" :actions="supplierActions" @select="onSelect" v-if="userInfo.userIdentity === 3" />
-        <van-action-sheet v-model="cShow" :actions="userActions" @select="onSelect" v-if="userInfo.userIdentity === 2 || userInfo.userIdentity === 4" />
-    </div>
-
-
-    <script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
-    <script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
-    <script type="text/javascript" src="/lib/element-ui/vant.min.js"></script>
-    <script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/text_info.js(v=${version})}"></script>
-</body>
-
-</html>
+<!DOCTYPE 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 " xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" />
+    <meta name="format-detection" content="telephone=yes" />
+    <title>美业参谋</title>
+    <link rel="canonical" href="https://www.caimei365.com/" />
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/index/index_new.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/index/index_new.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/supplier-login/text_info.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/supplier-login/login-h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css" />
+    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
+    <!--    <template th:replace="components/analysis"></template>-->
+</head>
+
+<body>
+    <div id="login_content" ref="login_content">
+        <div class="login_header">
+            <div class="login_header_container">
+                <div class="img_logo" @click="goToIndex">
+                    <div class="logo" style="background-size: contain"></div>
+                    <div class="text">美业参谋</div>
+                </div>
+                <div class="header_link" v-cloak>
+                    <a ref="link_item" @click="H5link(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
+          {{item.title}}
+        </a>
+                    <div class="nav_link" ref="nav_link_item">
+                        <div class="nav_link_item"></div>
+                    </div>
+                </div>
+                <div style="display: flex;justify-content: center;align-items: center">
+                    <div class="iphone">
+                        <div></div>
+                        <div>153-3889-7365</div>
+                    </div>
+                    <div v-if="userInfo && userInfo.userIdentity === 3 && isPC" v-cloak class="username">
+                        <el-popover placement="bottom" width="50" trigger="hover" v-if="isPC">
+                            <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
+                                <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
+                                <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
+                                <a class="a_cm" href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                            </div>
+                            <el-button slot="reference" type="text" style="font-size: 0.8vw;">{{userInfo.name}}</el-button>
+                        </el-popover>
+                    </div>
+                    <div v-if="!isPC && userInfo" class="H5_header">
+                        <div class="H5_username" @click="hideAction">
+                            <img src="/img/supplier-login/H5/userdefault.png" style="width: 5vw;height: 5vw" />
+                        </div>
+                        <div style="color: #FF5B00;font-size: 3.6vw;margin: 0 3.6vw;">菜单</div>
+                        <img src="/img/supplier-login/H5/openMenu.png" @click="openDrawn" v-if="!drawer" style="width: 3.2vw;height: 3.2vw" />
+                        <img src="/img/supplier-login/H5/close.png" v-else @click="openDrawn" style="width: 3.2vw;height: 3.2vw" />
+                    </div>
+                    <div class="login_regist" v-if="!userInfo">
+                        <div class="login_btn"><a rel="nofollow" href="/supplier/register.html">注册</a></div>
+                        <div class="login_btn" style="background: #FF5B00;"><a class="login_a" style="color:white" href="/supplierlogin.html" rel="nofollow">登录</a></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="text_info" v-if="!showContent" style="background: #fff;">
+            <div class="text_info_contain" v-html="JSON.parse(localStorage.getItem('text_info_from')).content"></div>
+            <!-- 底部区域 end -->
+            <template th:replace="components/footer" v-if="isPC"></template>
+            <template th:replace="components/foot-link" v-if="isPC"></template>
+        </div>
+        <!--  抽屉  -->
+        <el-drawer :visible.sync="drawer" v-if="!isPC">
+            <div class="drawer_box" @click="H5link(item)" v-for="item in activeLinks" :key="item.id">{{item.title}}</div>
+        </el-drawer>
+        <!--    底部选项   -->
+        <van-action-sheet v-model="cShow" :actions="supplierActions" @select="onSelect" v-if="userInfo.userIdentity === 3" />
+        <van-action-sheet v-model="cShow" :actions="userActions" @select="onSelect" v-if="userInfo.userIdentity === 2 || userInfo.userIdentity === 4" />
+    </div>
+
+
+    <script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
+    <script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
+    <script type="text/javascript" src="/lib/element-ui/vant.min.js"></script>
+    <script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/text_info.js(v=${version})}"></script>
+</body>
+
+</html>