Merge remote-tracking branch 'origin/developer' into developerB

# Conflicts:
#	src/main/resources/static/css/product/detail.pc.css
#	src/main/resources/static/js/product/detail.js
#	src/main/resources/templates/product/detail.html

src/main/java/com/caimei/www/controller/authorized/document/DocumentController.java

@@ -16,7 +16,10 @@ public class DocumentController extends BaseController {
     private static final String DOCUMENT_PDFDETAILS = "document/pdfdetails";
     /** 更多资料 */
     private static final String DOCUMENT_MORECONTENT= "document/more-content";
-
+    /** 美业资料 */
+    private static final String BEAUTY_ARCHIVE = "document/beauty-archive";
+    /** 美业资料自定义页面 */
+    private static final String BEAUTY_ARCHIVE_DETAIL = "document/beauty-archive-detail";
 
     /** 资料库登录 */
     @GetMapping("/document/login.html")
@@ -47,4 +50,14 @@ public class DocumentController extends BaseController {
     public String orderSettlement() {
         return DOCUMENT_MORECONTENT;
     }
+
+    /** 美业资料 */
+    @GetMapping("/document/beauty-archive.html")
+    public String productArchiveList() {
+        return BEAUTY_ARCHIVE;
+    }
+
+    /** 美业资料 */
+    @GetMapping("/document/archive-detail.html")
+    public String productArchiveDetail() { return BEAUTY_ARCHIVE_DETAIL; }
 }

src/main/resources/config/dev/application-dev.yml

@@ -5,10 +5,10 @@ spring:
   datasource:
     #本地连接数据库
     #driverClassName: com.mysql.jdbc.Driver
-    #url: jdbc:mysql://192.168.2.100:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
-    #username: developer
-    #password: 05bZ/OxTB:X+yd%1
-    #测试连接数据库
+#    url: jdbc:mysql://192.168.2.100:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+#    username: developer
+#    password: 05bZ/OxTB:X+yd%1
+#    测试连接数据库
     url: jdbc:mysql://120.79.25.27:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
     username: developer
     password: J5p3tgOVazNl4ydf
@@ -55,7 +55,7 @@ logging:
 caimei:
   siteEnv: 0 #网站环境，（2：正式环境，1：测试环境，0：开发环境）
   spiServer: https://spi-b.caimei365.com
-#  spiServer: http://192.168.2.68:8008
+#  spiServer: http://192.168.2.68:18002
   coreServer: https://core-b.caimei365.com
 #  coreServer: http://192.168.2.68:18002
   imageDomain: https://img-b.caimei365.com

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

@@ -0,0 +1,174 @@
+/*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}
+
+/*图片预览背景*/
+.viewer-backdrop{z-index:13140 !important;background:#000 !important}
+.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){
+body::-webkit-scrollbar{width:10px;height:10px;background-color:#F6F6F6;}
+body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);border-radius:2px;background-color:#F6F6F6}
+body::-webkit-scrollbar-thumb{border-radius:2px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#93979F}
+body{padding-top: 72px;padding-bottom: 60px;}
+.loading{height: 90vh}
+.cm-container{ width: 1200px;margin: 0 auto;position: relative;}
+.mobile-bar{display: none;}
+.jconfirm-content{overflow: hidden !important;}
+#beautyArchiveDetail{position: relative}
+/*顶部区域*/
+.cm-topbar{background:#E15616;height:72px;position: fixed;width: 100%;top: 0;z-index: 9999}
+.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}
+/*资料样式*/
+.cm-database{text-align:initial;margin-top: 16px;background: #fff;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 24px;}
+/*去登陆*/
+.cm-goLogin {width: 100%;position: fixed;bottom: 0;left: 0;z-index: 99;background:#FFE6DC;}
+.cm-goLogin .cm-content{height:56px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 32px;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;}
+.cm-goLogin .cm-content span:nth-child(1){font-size:16px;color:#E15616;line-height:56px}
+.cm-goLogin .cm-content span:nth-child(2){width:80px;height:35px;background:#E15616;border-radius:2px;color:#fff;font-size: 16px;text-align: center;line-height: 35px;cursor: pointer;}
+
+.cm-database .cm-category .cm-category-title{padding-bottom:16px;font-size:16px;font-weight:bold;color:#4A4F58;border-bottom:1px solid #E2E7EF}
+.cm-database .cm-category .cm-content{margin:24px 0 40px}
+.cm-database .cm-category .cm-content .cm-section{margin-bottom:28px;padding-bottom:32px;border-bottom:1px solid #E2E7EF}
+.cm-database .cm-category .cm-content .cm-section:last-child{margin-bottom:0;border-bottom:0;padding-bottom:0}
+.cm-database .cm-category .cm-content .cm-none{font-size:16px;color:#4A4F58}
+.cm-database .cm-category .cm-content .cm-title{display:-webkit-box;max-height:48px;font-size:16px;line-height:1.5;color:#4A4F58;word-break:break-all;text-align:justify;-webkit-box-orient:vertical;white-space:normal;-webkit-line-clamp:2;overflow:hidden}
+.cm-database .cm-category .cm-content .cm-time{margin:16px 0 8px;font-size:14px;color:#9AA5B5}
+.cm-database .cm-category .cm-content .cm-detail img{ display:block;max-width:unset; max-height: unset;}
+.cm-database .cm-category .cm-content .cm-detail .cm-img-box{ border-radius:2px;margin:16px 16px 0 0;cursor:pointer;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
+.cm-database .cm-category .cm-content .cm-detail.cm-list .cm-img-box{width:270px;height:270px;float:left}
+.cm-database .cm-category .cm-content .cm-detail.cm-list .cm-img-box:nth-child(4n){margin-right:0}
+.cm-database .cm-category .cm-content .cm-detail.cm-list .cm-img-box img{display:block;width:100%;height:100%}
+.cm-database .cm-category .cm-content .cm-detail.cm-one .cm-img-box{max-width:800px;max-height:800px;display: block;}
+.cm-database .cm-category .cm-content .cm-detail.cm-two .cm-img-box{width: 400px;height: 400px;float: left;}
+
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box{position:relative;width:832px;height:480px}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box .cm-player-btn{cursor:pointer;position:absolute;z-index:9;width:64px;height:64px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:url(/img/info/PC-player.png) no-repeat center}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box video{width:100%;height:100%;background:#000}
+.cm-database .cm-category .cm-player{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:100vw;height:100vh;position:fixed;z-index:9999;top:0;left:0;background:rgba(0,0,0,1)}
+.cm-database .cm-category .cm-player .cm-player-btn{cursor:pointer;position:absolute;z-index:9;width:64px;height:64px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:url(/img/info/PC-player.png) no-repeat center}
+.cm-database .cm-category .cm-player video{background:#000}
+.cm-database .cm-category.cm-file .cm-content .cm-title{height: 48px;}
+.cm-database .cm-category.cm-file .cm-content .cm-cover{width:72px;height:72px;overflow:hidden}
+.cm-database .cm-category.cm-file .cm-content .cm-detail{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;margin-left:16px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row{margin:16px 0 8px;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;}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row .cm-time{margin:0;font-size:14px;color:#9AA5B5}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row .cm-view{width:64px;font-size:16px;font-weight:400;color:#E15616;cursor:pointer}
+.cm-database .cm-category.cm-file .cm-content .cm-section{padding-bottom:0;border-bottom:0;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}
+/*顶部商品简介*/
+.cm-header{background: #fff;margin-top: 16px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 24px;}
+.cm-header .cm-cover{float:left;width:120px;height:120px;border:1px solid #E1E1E1;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.cm-header .cm-cover img{display:block;width:100%;height:inherit}
+.cm-header .cm-content{float: left;width:1032px;padding-left:16px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-header .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-header .cm-content .cm-title span{color: #E15616} /*搜索结果的标题用span标签包裹*/
+.cm-header .cm-content .cm-param{margin-top: 8px;font-size:16px;color:#4A4F58}
+.cm-header .cm-content .cm-param span:nth-child(1){color:#9AA5B5}
+}
+
+/*移动端样式*/
+@media screen and (max-width: 768px) {
+body{padding-bottom: 12vw}
+#beautyArchiveDetail{position: relative}
+.loading{background: #F5F5F5}
+.cm-topbar{display: none;}
+/*资料样式*/
+.cm-database{width:100vw;text-align:initial;background:#F7F7F7;overflow:hidden}
+/*去登陆*/
+.cm-goLogin {width: 100%;position: fixed;bottom: 0;z-index: 99;background:#FFE6DC;}
+.cm-goLogin .cm-content{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;padding:0 3.3vw;height:11.8vw;-webkit-box-sizing: border-box;box-sizing: border-box}
+.cm-goLogin .cm-content span:nth-child(1){font-size:3.6vw;color:#E15616;line-height:11.8vw}
+.cm-goLogin .cm-content span:nth-child(2){width:16.8vw;height:6.3vw;background:#E15616;border-radius:0.4vw;font-size:3.6vw;color:#fff;text-align:center;line-height:6.3vw}
+.cm-database .cm-category{margin:2vw 0 0;background:#fff;padding:0 3.3vw;overflow:hidden}
+.cm-database .cm-category .cm-category-title{margin-top:3.3vw;padding-bottom:3.3vw;font-size:4vw;font-weight:bold;color:#4A4F58;border-bottom:1px solid #E2E7EF}
+.cm-database .cm-category .cm-content{margin:4vw 0 6.4vw}
+.cm-database .cm-category .cm-content .cm-none{font-size:3.6vw;color:#4A4F58}
+.cm-database .cm-category .cm-content .cm-section{}
+.cm-database .cm-category .cm-content .cm-section .cm-title{display:-webkit-box;line-height:1.5;font-size:3.6vw;color:#4A4F58;word-break:break-all;text-align:justify;}
+.cm-database .cm-category .cm-content .cm-section .cm-time{margin:2.4vw 0 4vw;font-size:3vw;color:#9AA5B5}
+.cm-database .cm-category .cm-content .cm-section .cm-detail .cm-img-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 2.4vw 2.4vw 0;border:1px solid #E1E1E1;border-radius:2px;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-database .cm-category .cm-content .cm-section .cm-detail .cm-img-box img{display:block;}
+.cm-database .cm-category .cm-content .cm-section .cm-detail .cm-img-box:nth-child(4n){margin-right:0}
+.cm-database .cm-category .cm-content .cm-detail.cm-list .cm-img-box{float:left;width:21.2vw;height:21.2vw;}
+.cm-database .cm-category .cm-content .cm-detail.cm-list .cm-img-box:nth-child(4n){margin-right:0}
+.cm-database .cm-category .cm-content .cm-detail.cm-list .cm-img-box img{display:block;width:100%;height:100%}
+.cm-database .cm-category .cm-content .cm-detail.cm-one .cm-img-box{max-width:80vw;max-height:80vw;display: block;}
+.cm-database .cm-category .cm-content .cm-detail.cm-two .cm-img-box{width: 40vw;height: 40vw;float: left;}
+.cm-database .cm-category .cm-content .cm-detail.cm-one .cm-img-box img{max-width: 80vw !important; max-height: 80vw !important;}
+
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box{position:relative;width:93.4vw;height:56.8vw}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box video{width:100%;height:100%;background:#000}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box .cm-player-btn{cursor:pointer;position:absolute;z-index:9;width:10vw;height:10vw;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:url(/img/info/H5-plalyer.png) no-repeat center;background-size:10vw 10vw}
+.cm-database .cm-category .cm-player{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:100vw;height:100vh;position:fixed;z-index:10000;top:0;left:0;background:rgba(0,0,0,1)}
+.cm-database .cm-category .cm-player .cm-player-btn{display:none;cursor:pointer;position:absolute;z-index:9;width:10vw;height:10vw;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:url(/img/info/H5-plalyer.png) no-repeat center;background-size:10vw 10vw}
+.cm-database .cm-category .cm-player video{width:100vw;background:#000}
+
+.cm-database .cm-category.cm-file .cm-content .cm-title{-webkit-box-orient:vertical;height:11.4vw;white-space:normal;-webkit-line-clamp:2;overflow:hidden}
+.cm-database .cm-category.cm-file .cm-content .cm-cover{float:left;width:11.4vw;height:11.4vw;overflow:hidden}
+.cm-database .cm-category.cm-file .cm-content .cm-cover img{display: block;width: 100%;height: 100%;}
+.cm-database .cm-category.cm-file .cm-content .cm-detail{float:left;width:74.5vw;margin-left:3vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row{margin:3.4vw 0 0}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row .cm-time{margin:0;float:left;font-size:3vw;color:#9AA5B5}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row .cm-view{float:right;font-size:3.6vw;font-weight:400;color:#E15616;cursor:pointer}
+.cm-database .cm-category.cm-file .cm-content .cm-section{padding:3vw 0;border-bottom:1px solid #F0F0F0}
+.cm-database .cm-category.cm-file .cm-content .cm-section:first-child{padding-top:0}
+.cm-database .cm-category.cm-file .cm-content .cm-section:last-child{padding-bottom:0;border-bottom:0}
+/*顶部商品简介*/
+.cm-header{background: #fff}
+.cm-header .cm-cover{width:100vw;height:100vw;-webkit-box-sizing: border-box;box-sizing: border-box;}
+.cm-header .cm-cover img{display:block;width:100%;height:100%}
+.cm-header .cm-content{width:100vw;padding:3.2vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-header .cm-section.no-border{border:0}
+.cm-header .cm-content .cm-title{display:-webkit-box;max-height:11vw;margin-bottom:2.8vw;font-size:3.6vw;color:#4A4F58;line-height:1.5;word-break:break-all;text-align:justify}
+.cm-header .cm-content .cm-param{font-size:3vw;font-weight:400;color:#4A4F58;margin-top:1.6vw}
+.cm-header .cm-content .cm-param span:nth-child(1){color:#9AA5B5}
+}

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

@@ -0,0 +1,160 @@
+/*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:#E15616;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:#E15616;color:#E15616}
+.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: #E15616} /*搜索结果的标题用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:#E15616}
+/*搜索*/
+.cm-search-info{height:24px;padding:24px 0 0 24px;font-size:18px;color:#4A4F58}
+.cm-search-info span{color:#E15616}
+/*加载更多*/
+.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:#e15616;color:#fff;border:1px solid #e15616}
+.pageWrap a:hover{color:#E15616}
+.pageWrap a.on:hover{color:#fff;opacity:.8}
+.pageWrap a.btn{width:auto;color:#E15616;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 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:#E15616;color:#E15616}
+.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: #E15616} /*搜索结果的标题用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/product/detail.h5.css

@@ -120,3 +120,39 @@ li{list-style:none}
 .coupon-popup .coupon-list-cell{background: url("/img/account/icon-coupon-uesb@h52x.png") no-repeat;background-size: cover;}
 .coupon-popup .coupon-list-cell.none{background: url("/img/account/icon-coupon-received@h52x.png") no-repeat;background-size: cover;}
 
+/*资料样式*/
+.cm-database{width:100vw;margin-left:-3.3vw;margin-top:-1.2vw;text-align:initial;background:#F7F7F7;overflow:hidden}
+/*去登陆*/
+.cm-goLogin{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;padding:0 3.3vw;height:11.8vw;background:#FFE6DC}
+.cm-goLogin span:nth-child(1){font-size:3.6vw;color:#E15616;line-height:11.8vw}
+.cm-goLogin span:nth-child(2){width:16.8vw;height:6.3vw;background:#E15616;border-radius:0.4vw;font-size:3.6vw;color:#fff;text-align:center;line-height:6.3vw}
+.cm-database .cm-category{margin:2vw 0 0;background:#fff;padding:0 3.3vw;overflow:hidden}
+.cm-database .cm-category .cm-category-title{margin-top:3.3vw;padding-bottom:3.3vw;font-size:4vw;font-weight:bold;color:#4A4F58;border-bottom:1px solid #E2E7EF}
+.cm-database .cm-category .cm-content{margin:4vw 0 6.4vw}
+.cm-database .cm-category .cm-content .cm-none{font-size:3.6vw;color:#4A4F58}
+.cm-database .cm-category .cm-content .cm-section{}
+.cm-database .cm-category .cm-content .cm-section .cm-title{display:-webkit-box;height:10.3vw;line-height:1.5;font-size:3.6vw;color:#4A4F58;word-break:break-all;text-align:justify;-webkit-box-orient:vertical;white-space:normal;-webkit-line-clamp:2;overflow:hidden}
+.cm-database .cm-category .cm-content .cm-section .cm-time{margin:2.4vw 0 4vw;font-size:3vw;color:#9AA5B5}
+.cm-database .cm-category .cm-content .cm-section .cm-detail .cm-img-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;float:left;width:21.2vw;height:21.2vw;margin:0 2.4vw 2.4vw 0;border:1px solid #E1E1E1;border-radius:2px;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-database .cm-category .cm-content .cm-section .cm-detail .cm-img-box img{display:block;width:100%;height:100%}
+.cm-database .cm-category .cm-content .cm-section .cm-detail .cm-img-box:nth-child(4n){margin-right:0}
+.cm-database .cm-category .cm-content .cm-detail.cm-only-one .cm-img-box{max-width:80vw;max-height:80vw;margin-top:2.4vw;overflow:hidden}
+.cm-database .cm-category .cm-content .cm-detail.cm-only-one .cm-img-box img{display:block}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box{position:relative;width:93.4vw;height:56.8vw}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box video{width:100%;height:100%;background:#000}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box .cm-player-btn{cursor:pointer;position:absolute;z-index:9;width:10vw;height:10vw;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:url(/img/info/H5-plalyer.png) no-repeat center;background-size:10vw 10vw}
+.cm-database .cm-category .cm-player{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:100vw;height:100vh;position:fixed;z-index:10000;top:0;left:0;background:rgba(0,0,0,1)}
+.cm-database .cm-category .cm-player .cm-player-btn{display:none;cursor:pointer;position:absolute;z-index:9;width:10vw;height:10vw;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:url(/img/info/H5-plalyer.png) no-repeat center;background-size:10vw 10vw}
+.cm-database .cm-category .cm-player video{width:100vw;background:#000}
+.cm-database .cm-category.cm-file .cm-content .cm-cover{float:left;width:11.4vw;height:11.4vw;overflow:hidden}
+.cm-database .cm-category.cm-file .cm-content .cm-detail{float:left;width:74.5vw;margin-left:3vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row{margin:3.4vw 0 0}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row .cm-time{margin:0;float:left;font-size:3vw;color:#9AA5B5}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row .cm-view{float:right;font-size:3.6vw;font-weight:400;color:#E15616;cursor:pointer}
+.cm-database .cm-category.cm-file .cm-content .cm-section{padding:3vw 0;border-bottom:1px solid #F0F0F0}
+.cm-database .cm-category.cm-file .cm-content .cm-section:first-child{padding-top:0}
+.cm-database .cm-category.cm-file .cm-content .cm-section:last-child{padding-bottom:0;border-bottom:0}
+.viewer-backdrop{z-index:13140 !important;background:#000 !important}
+
+/*图片预览背景*/
+.viewer-backdrop{z-index:13140 !important;background:#000 !important}

src/main/resources/static/css/product/detail.pc.css

@@ -185,3 +185,40 @@ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appear
 .coupon-popup .coupon-list-cell .coupon-list-ri span.none{padding: 54px 27px;color: #FFFFFF;}
 .coupon-popup .coupon-list-cell .coupon-tags{height: 24px;line-height: 24px;text-align: center;border-radius: 8px 0 8px 0;position: absolute;top: 0;left: 0;padding: 0 10px;background-color: #f94b4b;color: #FFF;}
 
+/*资料样式*/
+.cm-database{text-align:initial}
+/*去登陆*/
+.cm-goLogin{width:884px;height:56px;margin-left:-16px;margin-bottom: 16px;background:#FFE6DC;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 32px;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}
+.cm-goLogin span:nth-child(1){font-size:16px;color:#E15616;line-height:56px}
+.cm-goLogin span:nth-child(2){width:80px;height:35px;background:#E15616;border-radius:2px;color:#fff;font-size: 16px;text-align: center;line-height: 35px;cursor: pointer;}
+.cm-database .cm-category .cm-category-title{padding-bottom:16px;font-size:16px;font-weight:bold;color:#4A4F58;border-bottom:1px solid #E2E7EF}
+.cm-database .cm-category .cm-content{margin:24px 0 40px}
+.cm-database .cm-category .cm-content .cm-section{margin-bottom:28px;padding-bottom:32px;border-bottom:1px solid #E2E7EF}
+.cm-database .cm-category .cm-content .cm-section:last-child{margin-bottom:0;border-bottom:0;padding-bottom:0}
+.cm-database .cm-category .cm-content .cm-none{font-size:16px;color:#4A4F58}
+.cm-database .cm-category .cm-content .cm-title{display:-webkit-box;max-height:48px;font-size:16px;line-height:1.5;color:#4A4F58;word-break:break-all;text-align:justify;}
+.cm-database .cm-category .cm-content .cm-time{margin:16px 0 8px;font-size:14px;color:#9AA5B5}
+.cm-database .cm-category .cm-content .cm-detail img{ display:block;max-width:unset; max-height: unset;}
+.cm-database .cm-category .cm-content .cm-detail .cm-img-box{ border-radius:2px;margin:16px 16px 0 0;cursor:pointer;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
+.cm-database .cm-category .cm-content .cm-detail.cm-list .cm-img-box{width:200px;height:200px;float:left}
+.cm-database .cm-category .cm-content .cm-detail.cm-list .cm-img-box:nth-child(4n){margin-right:0}
+.cm-database .cm-category .cm-content .cm-detail.cm-list .cm-img-box img{display:block;width:100%;height:100%}
+.cm-database .cm-category .cm-content .cm-detail.cm-one .cm-img-box{max-width:600px;max-height:600px;display: block;}
+.cm-database .cm-category .cm-content .cm-detail.cm-one .cm-img-box img{display: block;max-width: 600px;max-height: 600px;}
+.cm-database .cm-category .cm-content .cm-detail.cm-two .cm-img-box{width: 300px;height: 300px;float: left;}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box{position:relative;width:832px;height:480px}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box .cm-player-btn{cursor:pointer;position:absolute;z-index:9;width:64px;height:64px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:url(/img/info/PC-player.png) no-repeat center}
+.cm-database .cm-category .cm-content .cm-detail .cm-video-box video{width:100%;height:100%;background:#000}
+.cm-database .cm-category .cm-player{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:100vw;height:100vh;position:fixed;z-index:999;top:0;left:0;background:rgba(0,0,0,1)}
+.cm-database .cm-category .cm-player .cm-player-btn{cursor:pointer;position:absolute;z-index:9;width:64px;height:64px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:url(/img/info/PC-player.png) no-repeat center}
+.cm-database .cm-category .cm-player video{background:#000}
+.cm-database .cm-category.cm-file .cm-content .cm-title{ height:48px;-webkit-box-orient:vertical;white-space:normal;-webkit-line-clamp:2;overflow:hidden}
+.cm-database .cm-category.cm-file .cm-content .cm-cover{float:left;width:72px;height:72px;overflow:hidden}
+.cm-database .cm-category.cm-file .cm-content .cm-detail{float:left;width:764px;margin-left:16px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row{margin:16px 0 8px}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row .cm-time{margin:0;float:left;font-size:14px;color:#9AA5B5}
+.cm-database .cm-category.cm-file .cm-content .cm-detail .cm-row .cm-view{float:right;width:64px;font-size:16px;font-weight:400;color:#E15616;cursor:pointer}
+.cm-database .cm-category.cm-file .cm-content .cm-section{padding-bottom:0;border-bottom:0}
+
+/*图片预览背景*/
+.viewer-backdrop{z-index:13140 !important;background:#000 !important}

src/main/resources/static/js/common/ajax.service.js

@@ -52,7 +52,7 @@ var Http = {
                     def.resolve(res);
                 }
             }, function(error) {
-                console.log('网络请求超时，请重试~')
+                console.log('网络请求超时，请重试~');
                 def.reject(error);
             });
             return def;

src/main/resources/static/js/common/serviceapi/beautyArchive.service.js

@@ -0,0 +1,39 @@
+// 美业资料库列表
+var BeautyArchiveApi = {
+    //获取资料库商品列表
+    GetArchiveProduct: function (params, callback) {//资料库获取详情
+        Http.AjaxService({
+            url: '/commodity/product/archive',
+            type: 'GET',
+            data: params,
+            json: false,
+            isHost: true,
+        }).then(function (res) {
+            callback(res);
+        });
+    },
+    //获取商品资料列表
+    GetProdcutArchiveDetails: function (params, callback) {//资料库获取详情
+        Http.AjaxService({
+            url: '/commodity/product/archive/detail',
+            type: 'GET',
+            data: params,
+            json: false,
+            isHost: true,
+        }).then(function (res) {
+            callback(res);
+        });
+    },
+    //采美豆抵扣
+    SearchArchiveByBeans: function (params, callback) {
+        Http.AjaxService({
+            url: '/user/club/archive/deduction',
+            type: 'POST',
+            data: params,
+            json: false,
+            isHost: true,
+        }).then(function (res) {
+            callback(res);
+        });
+    }
+};

src/main/resources/static/js/common/serviceapi/document.service.js

@@ -91,5 +91,5 @@ var DocumentApi = {
             .then(function(res){
                 callback(res);
             });
-        },
+        }
 };

src/main/resources/static/js/document/beauty-archive-detail.js

@@ -0,0 +1,17 @@
+var isPC = $(window).width() > 768;
+$(window).on('resize', function () {
+    var change = $(window).width() > 768;
+    if (isPC === change) return;
+    window.location.reload();
+});
+
+var beautyArchiveDetail = new Vue({
+    el: '#beautyArchiveDetail',
+    mixins: [beautyArchiveDetailMixin],
+    created: function () {
+        // 获取路由hash标识，设置默认展开tab
+        this.archiveId = CAIMEI.getUrlParam('id');
+        this.getProdcutArchiveDetails();
+    },
+});
+

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

@@ -0,0 +1,181 @@
+var isPC = $(window).width() > 768;
+var clientWidth = $(window).width() ;
+$(window).on('resize', function () {
+    var change = $(window).width() > 768;
+    clientWidth = $(window).width();
+    if (isPC === change) return;
+    window.location.reload();
+});
+
+//美业资料库列表
+var beautyArchive = new Vue({
+    el: '#beautyArchive',
+    data: {
+        listLoading: false,
+        total: 0, // 商品总数
+        totalPage: 0,// 分页数
+        jumpPageSize: '',
+        listQuery: {
+            keyword: '', //查询关键词
+            productType: 0, //商品类型 0 全部 1 仪器 2 产品
+            pageNum: 1,
+            pageSize: 10
+        },
+        keyword: '',
+        productList: [],  //商品列表
+        hasNextPage: false,
+        showPageBtn: 6,
+        openSearch: false, //开启搜索
+        currentTab: 0,
+        tabList: [{
+            id: 0,
+            name: '全部'
+        }, {
+            id: 1,
+            name: '产品'
+        }, {
+            id: 2,
+            name: '仪器'
+        }]
+    },
+    watch: {
+        keyword: function (val) {
+            if (val) return;
+            this.openSearch = false;
+            this.listQuery.keyword = '';
+            this.getList();
+        }
+    },
+    mounted() {
+        this.getList();
+    },
+    computed: {
+        loadingText: function () {
+            return this.hasNextPage ? '上滑加载更多' : '没有更多了';
+        },
+        pagination: function () {
+            var index = this.listQuery.pageNum, arr = [];
+            if (this.totalPage <= 6) {
+                for (var i = 1; i <= this.totalPage; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) {
+                return [1, 2, 3, 4, 5, 0, this.totalPage];
+            }
+            if (index >= this.totalPage - 2) {
+                return [1, 0, this.totalPage - 4, this.totalPage - 3, this.totalPage - 2, this.totalPage - 1, this.totalPage];
+            }
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, this.totalPage];
+        }
+    },
+    filters: {
+        productType: function (val) {
+            if (val === 1) {
+                return '产品';
+            }
+            if (val === 2) {
+                return '仪器';
+            }
+            return '未知';
+        }
+    },
+    methods: {
+        //页码跳转
+        toPagination: function (pageNum) {
+            if (pageNum > this.totalPage || pageNum <= 0) {
+                return this.jumpPageSize = '';
+            }
+            this.listQuery.pageNum = parseInt(pageNum);
+            this.getList(); //获取列表
+        },
+        //获取商品列表
+        getList: function () {
+            const _that = this;
+            _that.listLoading = true;
+            BeautyArchiveApi.GetArchiveProduct(this.listQuery, function (res) {
+                if (res.code !== 0) return console.log('请求失败');
+                _that.hasNextPage = res.data.hasNextPage;
+                _that.listQuery.pageNum = res.data.pageNum;
+                _that.listQuery.pageSize = res.data.pageSize;
+                _that.total = res.data.totalRecord;
+                _that.totalPage = res.data.totalPage;
+                if (isPC) {
+                    _that.productList = res.data.results;
+                } else {
+                    _that.productList = _that.productList.concat(res.data.results);
+                }
+                _that.listLoading = false;
+                _that.windowScroll();
+            })
+        },
+        //tab切换
+        tabClick: function (productType, index) {
+            this.currentTab = index;
+            this.listQuery.pageNum = 1;
+            this.listQuery.productType = productType;
+            this.productList = [];
+            this.getList();
+        },
+        // 高亮文字
+        formatTitle: function(val){
+            var reg = new RegExp(this.listQuery.keyword, 'g');
+            var str = '<span>' + this.listQuery.keyword + '</span>';
+            return val.replace(reg, str);
+        },
+        //搜索
+        handleSearch: function (keyword) {
+            this.listQuery.keyword = keyword;
+            this.listQuery.pageNum = 1;
+            this.productList = [];
+            this.openSearch = true;
+            this.getList();
+            console.log(this.listQuery.keyword);
+        },
+        //跳转到商品详情
+        handleToDetail: function (product) {
+            var url = '';
+            if(!product.archiveId) {
+                window.location.href = '/404.html'
+            }
+            if (product.redirectType === 1) {
+                url = '/product-' + product.productId + '.html?open=caimei365';
+            } else if (product.redirectType === 2) {
+                url = '/document/archive-detail.html' + '?id=' + product.archiveId;
+            } else {
+                return;
+            }
+            window.open(url, '_blank');
+        },
+        //打开新窗口
+        openWindow: function (url) {
+            window.open(url, '_blank');
+        },
+        //窗口滚动事件
+        windowScroll: function () {
+            if (isPC) return;
+            var _that = this;
+            $(function () {
+                $(window).scroll(function () {
+                    clearTimeout(window.scrollTimer);
+                    window.scrollTimer = setTimeout(function () {
+                        var scorllTop = $(window).scrollTop();
+                        var contentHeight = $('body').height();
+                        var clientHeight = $(window).height();
+                        if (contentHeight - scorllTop - 10 <= clientHeight) {
+                            if(!_that.hasNextPage) return;
+                            _that.listQuery.pageNum ++;
+                            _that.getList();
+                        }
+                    }, 200);
+                });
+            });
+        }
+    }
+});
+
+
+
+
+

src/main/resources/static/js/document/beautyArchiveDetailMixin.js

@@ -0,0 +1,246 @@
+//商品资料库vue混入对象
+
+var beautyArchiveDetailMixin = {
+    data: {
+        listLoading: false,
+        //用户信息相关
+        permission: 5, //用户权限  0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
+        //页面配置
+        archiveId: '',  //资料列表id
+        currentVideoUrl: '', //正在播放的视频链接（上一个播放的的视频）
+        currentVideo: '',
+        showVideoDialog: false,
+        isPlayer: false, //是否正在播放
+        imageGroup: {},
+        keyword: '',
+        imageArchiveList: [],  // 图片资料列表
+        videoArchiveList: [], // 视频资料列表
+        fileArchiveList: [], // 文件资料列表
+        defaultImage: 'https://static.caimei365.com/app/img/icon2/PC-default.png',  // 默认图片
+        videoCover: 'https://static.caimei365.com/app/img/icon2/video-cover.png', //默认视频封面
+        archiveProductInfo: {}
+    },
+    filters: {
+        // 时间格式化
+        formatTime: function (val) {
+            return moment(new Date(val)).format('YYYY-MM-DD hh:mm:ss');
+        }
+    },
+    computed: {
+        //资料查看状态提示
+        TipStatus: function () {
+            // 资料权限
+            var statusText = [
+                false,
+                {text: '请登录后查看！', btn: '去登录', redirect: '/login.html'},
+                {text: '请升级成为会员机构后方可查看！', btn: '去升级', redirect: '/user/setting/upgrade.html'},
+                {text: '请升级成为医美会员机构后方可查看！', btn: '去升级', redirect: '/user/setting/upgrade.html'},
+                {text: '需抵扣100采美豆方可查看！', btn: '去查看', redirect: 10},
+                {text: '无权限查看！', btn: '确认'}
+            ];
+            // 0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
+            return statusText[this.permission];
+        }
+    },
+    methods: {
+        // 图片点击事件
+        handleShowImage: function () {
+            if (this.checkPermission() !== 0) return;
+        },
+        //初始化预览图片配置
+        initPreviewImage: function () {
+            var imageGroup = {};
+            var imageEls = document.querySelectorAll('.cm-images');
+            if(imageEls.length <= 0) return;
+            imageEls.forEach(function (imageEl, index) {
+                imageGroup['cm-images-' + index] = new Viewer(imageEl);
+            });
+            this.imageGroup = imageGroup;
+            console.log('初始化图片预览成功')
+        },
+        //显示视频播放窗口
+        handleShowPlayer: function (url) {
+            var _self = this;
+            if (this.checkPermission() !== 0) return;
+            //暂停上一个正在播放的播放器
+            this.currentVideoUrl = url;
+            this.isPlayer = true;
+            this.showVideoDialog = true;
+            setTimeout(function(){
+                // var video = this.$refs.videoRef;
+                _self.currentVideo = document.querySelector('#realPlayer');
+                _self.currentVideo.addEventListener('pause', function () {
+                    _self.isPlayer = false;
+                    console.log('暂停播放');
+                });
+                _self.currentVideo.addEventListener('ended', function () {
+                    _self.isPlayer = false;
+                    console.log('播放结束');
+                });
+                _self.currentVideo.addEventListener('error', function () {
+                    _self.isPlayer = false;
+                    console.log('播放错误');
+                });
+                _self.currentVideo.addEventListener('play', function () {
+                    _self.isPlayer = true;
+                    console.log('开始播放');
+                });
+            })
+        },
+        //隐藏视频播放窗口
+        handleClosePlayer: function () {
+            this.$refs.videoRef.pause();
+            this.currentVideoUrl = '';
+            this.showVideoDialog = false;
+            this.isPlayer = false;
+        },
+        //播放视频
+        handlePlayer: function () {
+            if (!this.isPlayer) this.currentVideo.play();
+        },
+        //预览office文件 word ppt pdf
+        handlePreviewOffice: function (file) {
+            if (this.checkPermission() !== 0) return;
+            var index = file.fileName.lastIndexOf('.');
+            var suffix = file.fileName.substring(index);
+            if (suffix === '.doc' || suffix === '.ppt' || suffix === '.pptx' || suffix === '.docx') {
+                // 如果是 doc 或 ppt 直接打开链接预览
+                // window.open(file.fileUrl, '_black') // 下载
+                window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(file.fileUrl), '_black') // 下载
+                // https://view.officeapps.live.com/op/view.aspx?src=
+            } else if (suffix === '.pdf') {
+                // 如果是 pdf 需要跳转到预览页面并设置type为1，src为pdf预览链接
+                window.open(file.fileUrl, '_blank');
+            } else {
+                CAIMEI.Popup({
+                    content: suffix + '类型文件暂时无法预览',
+                    confitmBtnText: '确定',
+                    cancelBtnText: '取消'
+                }, function () {
+                }, function () {
+                });
+            }
+        },
+        openFile: function(url){
+            var a = document.createElement('a');
+            a.href = url + '&random=' + Math.random();
+            a.setAttribute('target', '_blank');
+            document.body.appendChild(a);
+            a.click();
+            document.removeChild(a);
+        },
+        /*
+        * 下一步操作 链接跳转 支付支付采美豆
+        * redirect:
+        *   链接： 链接跳转
+        *   10:   支付采美豆
+        * */
+        handleClickToPage: function (redirect) {
+            var _self = this;
+            if (typeof redirect == "string") {
+                // 跳转链接
+                return window.open(redirect, '_blank');
+            }
+            if (redirect === 10) {
+                // 调用接口
+                CAIMEI.Popup({
+                    content: '确认使用采美豆',
+                    confitmBtnText: '确定',
+                    cancelBtnText: '取消'
+                }, function () {
+                    _self.SearchArchiveByBeans()
+                }, function () {
+                });
+            }
+        },
+        //用户权限配置 操作前拦截：预览图片，播放视频，预览文件的拦截
+        checkPermission: function () {
+            //permission:查看权限:0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
+            var _self = this;
+            // 如果 TipStatus 返回false 就放行
+            if (!_self.TipStatus) return 0;
+            CAIMEI.Popup({
+                content: _self.TipStatus.text,
+                confitmBtnText: _self.TipStatus.btn,
+                cancelBtnText: '取消'
+            }, function () {
+                // 确认 执行 下一步  链接跳转 支付支付采美豆
+                _self.handleClickToPage(_self.TipStatus.redirect);
+            }, function () {
+            });
+            return -1;
+        },
+        //采美豆抵扣查看资料
+        SearchArchiveByBeans: function () {
+            BeautyArchiveApi.SearchArchiveByBeans({
+                userId: GLOBAL_USER_ID,
+                archiveId: this.archiveId
+            }, function (res) {
+                if (res.code) return CAIMEI.dialog(res.msg);
+                // 支付采美豆成功，刷新页面
+                CAIMEI.dialog(res.msg, true, function () {
+                        window.location.reload();
+                    }
+                );
+            });
+        },
+        // 对图片列表格式化处理
+        formatImage: function (list) {
+            var resultList = [];
+            for (var i = 0; i < list.length; i++) {
+                var imageUrl = list[i];
+                var index = imageUrl.indexOf('?');
+                var size = imageUrl.substring(index + 1).replace(/\&|\=/g, '-').split('-');
+                var width = parseInt(size[1]);
+                var height = parseInt(size[3]);
+                var style = '';
+                if (list.length > 1) {
+                    if (width >= height) {
+                        style = 'height:100%;width:auto;max-width:unset;';
+                    } else {
+                        style = 'width:100%;height: auto;max-width:unset;';
+                    }
+                }
+                if (list.length === 1) {
+                    if (width >= height) {
+                        style = 'max-width:800px;height:auto';
+                    } else {
+                        style = 'max-height:800px;width:auto';
+                    }
+                }
+                resultList.push({
+                    imageUrl: imageUrl,
+                    style: style
+                })
+            }
+            return resultList;
+        },
+        //获取资料列表
+        getProdcutArchiveDetails: function () {
+            const _self = this;
+            _self.listLoading = true;
+            if (this.archiveId === 0) return;
+            BeautyArchiveApi.GetProdcutArchiveDetails({
+                userId: GLOBAL_USER_ID,
+                archiveId: this.archiveId
+            }, function (res) {
+                if (res.code !== 0) return false;
+                _self.imageArchiveList = res.data.imageArchiveList;
+                _self.videoArchiveList = res.data.videoArchiveList;
+                _self.fileArchiveList = res.data.fileArchiveList;
+                _self.permission = res.data.permission;
+                _self.archiveProductInfo.productImage = res.data.productImage;
+                _self.archiveProductInfo.productName = res.data.productName;
+                _self.archiveProductInfo.productType = res.data.productType;
+                _self.archiveProductInfo.shopName = res.data.shopName;
+                _self.listLoading = false;
+                // 只有当前用户权限为0时初始化图片预览
+                if (_self.permission === 0) {
+                    setTimeout(function () {
+                        _self.initPreviewImage()
+                    })
+                }
+            })
+        }
+    }
+};

src/main/resources/static/js/document/pdfdetails.js

@@ -1,39 +1,54 @@
 var documentList = new Vue({
     el: "#documentList",
     data: {
-        pdfId:0,
-        ossArchive:{},
+        pdfId: 0,
+        type:'',
+        fileUrl: '',
+        ossArchive: {},
         ossArchivePdf: {},
     },
-    computed: {
-
-    },
+    computed: {},
     methods: {
-        GetDocumentDataDetailsInfo:function(){//查询资料详情
+        GetDocumentDataDetailsInfo: function () {//查询资料详情
             var _self = this;
-            DocumentApi.GetDocumentDataDetails({pdfId:_self.pdfId},function(response){
-                if(response.code == 0){
+            DocumentApi.GetDocumentDataDetails({pdfId: _self.pdfId}, function (response) {
+                if (response.code == 0) {
                     var data = response.data;
                     _self.ossArchive = data.ossArchive;
                     _self.ossArchivePdf = data.ossArchivePdf;
                     var pdfh5 = new Pdfh5('#pdfMedia', {
-                        pdfurl:  _self.ossArchivePdf.url
+                        pdfurl: _self.ossArchivePdf.url
                     });
-                }else{
+                } else {
                     CAIMEI.Alert(response.msg, '确定', false);
                 }
             })
         },
-        PdfDetails:function(){//跳转
+        PdfDetails: function () {//跳转
             var _self = this;
-            location.href = '/document/pdfdetails.html?id='+_self.ossArchivePdf.id
+            location.href = '/document/pdfdetails.html?id=' + _self.ossArchivePdf.id
+        },
+        makedPdf: function(){
+            var pdfh5 = new Pdfh5('#pdfMedia', {
+                pdfurl: this.fileUrl
+            });
+            //监听完成事件
+            pdfh5.on('complete', function(status, msg, time) {
+                console.log('状态：' + status + '，信息：' + msg + '，耗时：' + time + '毫秒，总页数：' + this.totalNum);
+            })
         }
-    },
-    created: function () {
-
     },
     mounted: function () {
         this.pdfId = CAIMEI.getUrlParam('id');
-        this.GetDocumentDataDetailsInfo();
+        this.type = CAIMEI.getUrlParam('type');
+        var index = window.location.href.indexOf('src=');
+        this.fileUrl = window.location.href.substring(index + 4);
+        // this.fileUrl = CAIMEI.getUrlParam('src');
+        if (this.type === '1') {
+            this.makedPdf();
+        } else {
+            // 原来的
+            this.GetDocumentDataDetailsInfo();
+        }
     }
 });

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

@@ -1,5 +1,6 @@
 var productDetail = new Vue({
     el: "#productDetail",
+    mixins: [beautyArchiveDetailMixin],
     data: {
         showProduct: false,
         productId: 0,
@@ -21,67 +22,68 @@ var productDetail = new Vue({
             supplierId: 0,
             userIdentity: 0 //2-会员机构；3-供应商；4-普通机构
         },
-        ladderList:[],//阶梯价
-        promotions:{},//促销活动信息
-        promotionsId:0,//活动id
+        ladderList: [],//阶梯价
+        promotions: {},//促销活动信息
+        promotionsId: 0,//活动id
         addStatus: true,
         recommendType: 0,//相关推荐类型 0自动选择; 1手动推荐
         recommendPage: 1,
         recommends: [],
         parameters: [],
-        tabsIndex:0,
-        disabledText:'',
-        isNoneDisabled:false,
-        isServiceInfo:false,
-        isTrainingMethod:false,
-        productTypeName:"",
-        beautyActFlag:'',
-        trainingMethodText:'',
-        trainingType:'',
-        isShowPopup:false,
-        currentTab:1,
-        couponParam:{// 获取弹窗优惠券领取参数
-            userId:0,
-            productId:0,
-            status:1,
-            source:1
+        tabsIndex: 0,
+        disabledText: '',
+        isNoneDisabled: false,
+        isServiceInfo: false,
+        isTrainingMethod: false,
+        productTypeName: "",
+        beautyActFlag: '',
+        trainingMethodText: '',
+        trainingType: '',
+        isShowPopup: false,
+        currentTab: 1,
+        couponParam: {// 获取弹窗优惠券领取参数
+            userId: 0,
+            productId: 0,
+            status: 1,
+            source: 1
         },
-        isCouponEmpty:false,
-        productCoupon:[], 							// 优惠券
-        productCouponList:[],						// 优惠券弹窗列表
+        isCouponEmpty: false,
+        productCoupon: [], 							// 优惠券
+        productCouponList: [],						// 优惠券弹窗列表
         collectionType:false,                       // 商品收藏状态
 
     },
     filters: {
-        TypeFormat:function(value) {
+        TypeFormat: function (value) {
             switch (value) {
                 case 0:
-                    return  '活动券';
+                    return '活动券';
                     break;
                 case 1:
-                    return  '品类券';
+                    return '品类券';
                     break;
                 case 2:
-                    return  '用户专享券';
+                    return '用户专享券';
                     break;
                 case 3:
-                    return  '店铺券';
+                    return '店铺券';
                     break;
                 case 4:
-                    return  '新用户券';
+                    return '新用户券';
                     break;
             }
         }
     },
-    computed: {},
     methods: {
-        getImages: function(){
+        getImages: function () {
             var _self = this;
-            if(!this.productId){return;}
-            ProductApi.GetProductDdtailsImages({productId: _self.productId},function (response) {
+            if (!this.productId) {
+                return;
+            }
+            ProductApi.GetProductDdtailsImages({productId: _self.productId}, function (response) {
                 if (response.code === 0 && response.data) {
                     _self.images = response.data;
-                    setTimeout(function(){
+                    setTimeout(function () {
                         if (isPC) {
                             var magnifier = new ImageMagnifier(
                                 '#imgShown .smallImage li',
@@ -93,7 +95,7 @@ var productDetail = new Vue({
                             ).init();
                         } else {
                             var swiper = new Swiper('#swiperImage', {
-                                loop : true,
+                                loop: true,
                                 autoplay: {
                                     delay: 2000,
                                     disableOnInteraction: false
@@ -104,127 +106,149 @@ var productDetail = new Vue({
                                 }
                             });
                         }
-                    },500);
+                    }, 500);
                 }
             });
         },
-        getProductDetails:function(){
+        getProductDetails: function () {
             var _self = this;
-            ProductApi.GetProductDdtails({userId:GLOBAL_USER_ID,productId:_self.productId},function (response) {
-                if(response.code == 0){
+            ProductApi.GetProductDdtails({userId: GLOBAL_USER_ID, productId: _self.productId}, function (response) {
+                if (response.code == 0) {
                     var product = response.data;
+                    _self.pcActType = product.pcActType;
                     _self.beautyActFlag = product.beautyActFlag;
                     _self.productTypeName = product.typeName;
-                    _self.pcActType = product.pcActType;
                     _self.recommendType = product.recommendType ? product.recommendType : 0;
-                    if(product.productDetail.orderInfo!='' && product.productDetail.serviceInfo!=''){
+                    _self.archiveId = product.archiveId; // 保存资料列表id
+                    if (product.productDetail.orderInfo != '' && product.productDetail.serviceInfo != '') {
                         _self.isServiceInfo = true;
                     }
-                    if(product.commodityType == 2 && product.trainingMethod){
+                    if (product.commodityType == 2 && product.trainingMethod) {
                         _self.isTrainingMethod = true;
                         _self.trainingMethodText = product.trainingMethod == 1 ? '线上培训' : '线下培训';
-                        _self.trainingType = product.trainingType == 1 ? '￥'+product.trainingFee : '售价已包含';
+                        _self.trainingType = product.trainingType == 1 ? '￥' + product.trainingFee : '售价已包含';
                     }
-                    if(product.validFlag == 3 || product.validFlag == 9 || product.validFlag == 0 ||  product.validFlag == 10 || product.stock == 0 ){
+                    if (product.validFlag == 3 || product.validFlag == 9 || product.validFlag == 0 || product.validFlag == 10 || product.stock == 0) {
                         _self.isNoneDisabled = true;
-                    }else{
+                    } else {
                         _self.isNoneDisabled = false;
                     }
-                    if(product.validFlag ==3){
+                    if (product.validFlag == 3) {
                         _self.disabledText = '下架'
                     }
-                    if(product.validFlag ==10){
+                    if (product.validFlag == 10) {
                         _self.disabledText = '停售'
                     }
-                    if(product.validFlag ==9 || product.validFlag ==0){
+                    if (product.validFlag == 9 || product.validFlag == 0) {
                         _self.disabledText = '失效'
                     }
-                    if(product.stock == 0 && product.validFlag !=3){
+                    if (product.stock == 0 && product.validFlag != 3) {
                         _self.disabledText = '售罄'
                     }
                     _self.getRecommends();
-                }else{
+                    _self.getProdcutArchiveDetails();  //获取资料列表
+                    // 获取路由hash标识，设置默认展开tab
+                    var str = CAIMEI.getUrlParam('open');
+                    if (str === 'caimei365' && _self.archiveId > 0) {
+                        _self.tabsIndex = 4;
+                    }
+                } else {
                     CAIMEI.Alert(response.msg, '确定', false);
                 }
             })
         },
-        getProductPrice:function(){//获取商品价格
+        getProductPrice: function () {//获取商品价格
             var _self = this;
-            if(_self.productId ===0){return;}
-            ProductApi.GetProductDdtailsPrice({ userId: GLOBAL_USER_ID,productId: _self.productId},function (response) {
+            if (_self.productId === 0) {
+                return;
+            }
+            ProductApi.GetProductDdtailsPrice({
+                userId: GLOBAL_USER_ID,
+                productId: _self.productId
+            }, function (response) {
                 if (response.code === 0 && response.data) {
                     _self.priceObj = response.data;
                     _self.number = response.data.minBuyNumber;
-                    if(response.data.ladderPriceFlag===1){
+                    if (response.data.ladderPriceFlag === 1) {
                         _self.ladderPrice();
                     }
-                    if(response.data.actStatus==1){
-                        _self.promotions =  response.data.promotions;
+                    if (response.data.actStatus == 1) {
+                        _self.promotions = response.data.promotions;
                         _self.promotionsId = response.data.promotions.id;
                     }
                 }
             });
         },
-        ladderPrice:function(){//获取商品阶梯价格
+        ladderPrice: function () {//获取商品阶梯价格
             var _self = this;
-            if(!this.productId){return;}
-            ProductApi.GetProductDdtailsLadderPrice({ productId: _self.productId },function (response) {
+            if (!this.productId) {
+                return;
+            }
+            ProductApi.GetProductDdtailsLadderPrice({productId: _self.productId}, function (response) {
                 if (response.code === 0 && response.data) {
-                    _self.ladderList =response.data;
+                    _self.ladderList = response.data;
                     _self.numberResize();
                 }
             });
         },
-        getParameters: function(){//获取商品参数
+        getParameters: function () {//获取商品参数
             var _self = this;
-            if(!this.productId){return;}
-            ProductApi.GetProductDdtailsParameter({ productId: _self.productId},function (response) {
+            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){
+        toggleThisLadder: function (event) {
             var el = event.currentTarget;
-            if($(el).hasClass("on")){
+            if ($(el).hasClass("on")) {
                 $(el).removeClass("on").siblings('.mFixed').hide();
-                if(!isPC){looseBody();}
-            }else{
+                if (!isPC) {
+                    looseBody();
+                }
+            } else {
                 $(el).addClass("on").siblings('.mFixed').show();
-                if(!isPC){fixedBody();}
+                if (!isPC) {
+                    fixedBody();
+                }
             }
         },
-        hideThisLadder: function(event){
+        hideThisLadder: function (event) {
             var el = event.currentTarget;
             $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
-            if(!isPC){looseBody();}
+            if (!isPC) {
+                looseBody();
+            }
         },
-        numberSub: function(){
+        numberSub: function () {
             this.number -= this.priceObj.step;
             this.numberResize();
         },
-        numberAdd: function(){
+        numberAdd: function () {
             this.number += this.priceObj.step;
             this.numberResize();
 
         },
-        numberChange: function(){
-            this.number = Math.ceil(this.number/this.priceObj.step)*this.priceObj.step;
+        numberChange: function () {
+            this.number = Math.ceil(this.number / this.priceObj.step) * this.priceObj.step;
             this.numberResize();
 
         },
-        numberResize: function(){
+        numberResize: function () {
             var _self = this;
-            if (this.number<this.priceObj.minBuyNumber){
+            if (this.number < this.priceObj.minBuyNumber) {
                 this.number = this.priceObj.minBuyNumber;
             }
-            if (this.number>this.productStock){
+            if (this.number > this.productStock) {
                 this.number = this.productStock;
             }
-            if(this.priceObj.ladderPriceFlag){
-                this.ladderList.forEach(function(ladder){
-                    if(_self.number>=ladder.buyNum){
+            if (this.priceObj.ladderPriceFlag) {
+                this.ladderList.forEach(function (ladder) {
+                    if (_self.number >= ladder.buyNum) {
                         _self.priceObj.price = ladder.buyPrice;
                     }
                 });
@@ -233,32 +257,34 @@ var productDetail = new Vue({
         handleCollection:function (){
             this.collectionType = !this.collectionType
         },
-        toLogin: function() {
+        toLogin: function () {
             setBeforeUrl();
             window.location.href = '/login.html';
         },
-        toUpgrade: function() {
+        toUpgrade: function () {
             setBeforeUrl();
             window.location.href = '/user/setting/upgrade.html';
         },
-		addShopCart: function(){ //加入购物车
-		    var _self = this;
-		    if(this.addStatus){
-		        _self.addStatus = false;
-                addShoppingCart(this.userId, this.productId, this.number,function(){
+        addShopCart: function () { //加入购物车
+            var _self = this;
+            if (this.addStatus) {
+                _self.addStatus = false;
+                addShoppingCart(this.userId, this.productId, this.number, function () {
                     _self.addStatus = true;
                 });
-		    }
-		},
-        buyNowSubmit: function(){
-            if(this.productId && this.number){
+            }
+        },
+        buyNowSubmit: function () {
+            if (this.productId && this.number) {
                 // type:（1购物车提交[对应表cm_cart]，2直接购买提交, 3协销下单）
-                window.location.href = '/shopping/confirm.html?type=2&id='+this.productId+'&count='+this.number;
+                window.location.href = '/shopping/confirm.html?type=2&id=' + this.productId + '&count=' + this.number;
             }
         },
-        getRecommends: function(){
+        getRecommends: function () {
             var _self = this;
-            if(!this.productId){return;}
+            if (!this.productId) {
+                return;
+            }
             ProductApi.GetProductDdtailsRecommend(
                 {
                     productId: _self.productId,
@@ -266,110 +292,121 @@ var productDetail = new Vue({
                     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);
+                    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(){// 初始化商品详情优惠券信息
-            var  _self = this;
+        queryProductDetilsCoupons() {// 初始化商品详情优惠券信息
+            var _self = this;
             ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
-                if(response.code == 0){
+                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);
+                    if (isPC) {
+                        _self.productCoupon = response.data.list.splice(0, 3);
+                    } else {
+                        _self.productCoupon = response.data.list.splice(0, 2);
                     }
-                }else{
+                } else {
                     console.log('获取优惠券列表失败');
                 }
             })
         },
-        queryPopupCoupons:function(){// 获取弹窗优惠券列表
-            var  _self = this;
+        queryPopupCoupons: function () {// 获取弹窗优惠券列表
+            var _self = this;
             ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
-                if(response.code == 0){
+                if (response.code == 0) {
                     var data = response.data;
-                    if(data.couponList && data.couponList.length >0){
+                    if (data.couponList && data.couponList.length > 0) {
                         _self.productCouponList = data.couponList;
                         _self.isCouponEmpty = false;
                         console.log('有优惠券')
                         console.log(_self.productCouponList)
-                    }else{
+                    } else {
                         console.log('没有优惠券')
                         _self.isCouponEmpty = true;
                     }
-                }else{
+                } else {
                     console.log('获取优惠券列表失败')
                 }
             })
         },
-        receiveCoupon:function(coupon){// 点击领取优惠券
-            var  _self = this;
-            ProductApi.ReceiveCoupon({userId:_self.couponParam.userId, couponId:coupon.couponId, source:1}, function (response) {
-                if(response.code == 0){
+        receiveCoupon: function (coupon) {// 点击领取优惠券
+            var _self = this;
+            ProductApi.ReceiveCoupon({
+                userId: _self.couponParam.userId,
+                couponId: coupon.couponId,
+                source: 1
+            }, function (response) {
+                if (response.code == 0) {
                     _self.currentTab = 2;
                     _self.couponParam.status = 2;
                     _self.queryPopupCoupons();
-                }else{
+                } else {
                     CAIMEI.Alert(response.msg, '确定', false);
                 }
             })
         },
-        queryCouponTabs:function (value){// 切换优惠券
+        queryCouponTabs: function (value) {// 切换优惠券
             var _self = this;
             _self.currentTab = _self.couponParam.status = value;
             _self.queryPopupCoupons();
         },
-        showPopup:function(){// 显示优惠券弹窗
+        showPopup: function () {// 显示优惠券弹窗
             var _self = this;
-            if(_self.userId>0){
+            if (_self.userId > 0) {
                 _self.productCouponList = [];
                 _self.currentTab = 1;
                 _self.couponParam.status = 1;
                 _self.queryPopupCoupons();
                 _self.isShowPopup = true;
-            }else{
-                window.location.href='/login.html';
+            } else {
+                window.location.href = '/login.html';
             }
         },
-        hidePopup:function(){// 隐藏优惠券弹窗
+        hidePopup: function () {// 隐藏优惠券弹窗
             var _self = this;
             _self.isShowPopup = false;
         },
-        detailsClicktab:function(index){
+        detailsClicktab: function (index) {
             var _self = this;
             _self.tabsIndex = index;
+            if (index !== 4) return;
+            // 只有当前用户权限为0,并且未初始化时初始化图片预览
+            if (_self.permission === 0) {
+                setTimeout(function () {
+                    _self.initPreviewImage()
+                })
+            }
         }
     },
     created: function () {
@@ -378,19 +415,19 @@ var productDetail = new Vue({
         this.getImages();
         // identity: 0个人，1协销，2会员机构，3供应商，4普通机构
         // visibility：3:所有人可见，2:普通机构可见，1:会员机构可见
-        var visible = $("#productVisibility").val()*1;
+        var visible = $("#productVisibility").val() * 1;
         var identity = GLOBAL_USER_IDENTITY;
         this.showProduct = visible === 3 || identity === 1 || identity === 2 || (identity === 4 && visible === 2);
-        if(!this.showProduct) {
+        if (!this.showProduct) {
             window.location.href = "/404.html?error=未查询到该商品";
         }
     },
     mounted: function () {
-        this.userId = this.couponParam.userId = GLOBAL_USER_ID;
         this.getProductDetails();
         this.getProductPrice();
         this.getParameters();
         this.queryProductDetilsCoupons();
+
         // $('.productInfo').slide({
         //     mainCell:".tabCon"
         //     ,titCell:".tabTit span"

src/main/resources/static/js/user-center/account/beans.js

@@ -69,7 +69,8 @@ var orderPage = new Vue({
                     9:'抵用退回',
                     10:'抵用运费',
                     11:'退款回收',
-                    12:'登录奖励'
+                    12:'登录奖励',
+                    13:'查看商品资料'
                 };
             Object.keys(stateTextObject).forEach(function(key){
                 if(key == state){

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

@@ -12,6 +12,7 @@
             <div>
                 <a class="home" href="/" target="_blank">商城</a>
                 <a th:each="type: *{articleType}" th:text="${type.name}" th:href="'/info/center-'+${type.id}+'-1.html'" th:class="${typeId==type.id}?'typeBtn current':'typeBtn'" th:typeId="${type.id}"></a>
+                <a class="typeBtn" href="/document/beauty-archive.html" target="_blank">美业资料</a>
             </div>
         </div>
         <!--搜索-->

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

@@ -0,0 +1,160 @@
+<!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>
+    <template th:replace="components/head-link"></template>
+    <link rel="stylesheet" type="text/css" href="/lib/css/viewer.min.css">
+    <link th:href="@{/css/document/beauty-archive-detail.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<div class="mobile-bar">
+    <template th:replace="components/header"></template>
+</div>
+<div id="beautyArchiveDetail" v-cloak>
+    <!--listLoaidng动画-->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <!-- 顶部tab -->
+    <div class="cm-topbar" v-if="isPC">
+        <div class="cm-container cm-clearfix">
+            <div class="cm-fl cm-title">美业资料</div>
+            <div class="cm-fr">
+                <!--                <div class="cm-search">-->
+                <!--                    <input class="cm-keyword" v-model="keyword" placeholder="请输入商品名称/供应商名" type="text"/>-->
+                <!--                    <a href="javascript:void(0)" @click="handleSearch(keyword)" class="cm-search-btn icon"></a>-->
+                <!--                </div>-->
+            </div>
+        </div>
+    </div>
+    <template v-if="!listLoading">
+        <!--顶部产品介绍-->
+        <div class="cm-header cm-container cm-clearfix">
+            <div class="cm-cover">
+                <img :src="archiveProductInfo.productImage ? archiveProductInfo.productImage : '/img/base/placeholder.png'" alt="">
+            </div>
+            <div class="cm-content">
+                <div class="cm-title" v-html="archiveProductInfo.productName"></div>
+                <div class="cm-param">
+                    <span>供应商：</span>
+                    <span>{{ archiveProductInfo.shopName  || '暂无' }}</span>
+                </div>
+                <div class="cm-param">
+                    <span>商品属性：</span>
+                    <span>{{archiveProductInfo.productType === 1 ? '商品' : '仪器' }}</span>
+                </div>
+            </div>
+        </div>
+        <!--登录按钮-->
+        <div class="cm-goLogin" v-if="TipStatus">
+            <div class="cm-content cm-container">
+                <span v-text="TipStatus.text"></span>
+                <span v-text="TipStatus.btn" v-if="TipStatus.btn" @click="handleClickToPage(TipStatus.redirect)"></span>
+            </div>
+        </div>
+        <!--资料信息-->
+        <div class="cm-database cm-container">
+            <!-- 图片区域 -->
+            <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>
+                            <!-- cm-only-one -->
+                            <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"
+                                         v-for="(image, i) in formatImage(item.imageList)"
+                                         :key="i">
+                                        <img :src="image.imageUrl || defaultImage" :style="image.style"/>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <div class="cm-img-box" @click="handleShowImage" 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">暂无相关资料</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)"></span>
+                                    <video :src="item.fileUrl && item.fileUrl"
+                                           :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="cm-section clear" 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">
+                                    <span class="cm-time">{{ item.addTime | formatTime }}</span>
+                                    <span class="cm-view" @click="handlePreviewOffice(item)">预览文件</span>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>
+<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.5.1.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>
+<template th:replace="components/foot-link"></template>
+<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/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/document/beauty-archive-detail.js(v=${version})}"></script>
+
+</body>
+</html>

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

@@ -0,0 +1,108 @@
+<!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="${spiServer}" id="spiServer">
+<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">
+                        <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.5.1.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/beautyArchive.service.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/document/components/beautyIndustry-footer.html

@@ -0,0 +1,23 @@
+<div class="foot">
+    <div class="footer">
+        <p>
+            <span>
+                <img class="icp" src="/img/base/icon-icp@2x.png" alt="粤B1-20160129 备案号 ">
+                粤B1-20160129 备案号
+                <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow" style="color:#FFF;text-decoration:underline;">粤ICP备14019824号</a>
+            </span>
+            <span>
+                <a href="https://static.caimei365.com/www/ppzs/互联网药品信息服务资格证.jpg" target="_blank" rel="nofollow" style="color:#FFF;text-decoration:underline;">互联网药品信息服务资格证编号(粤)-非经营性-2021-0339</a>
+            </span>
+            <span>中华人民共和国增值电信业务经营许可证</span>
+        </p>
+        <p>
+            <span>Copyright © 2015-2021 CAIMEI365.com All Rights Reserved.</span><span>深圳市采美网络信息有限公司</span>
+            <span>
+                <!-- CNZZ统计 start -->
+                <script type="text/javascript">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"));</script><span id="cnzz_stat_icon_1279558759"><a href="https://www.cnzz.com/stat/website.php?web_id=1279558759" target="_blank" title="站长统计"><img border="0" hspace="0" vspace="0" src="https://icon.cnzz.com/img/pic.gif"></a></span><script src="https://s9.cnzz.com/z_stat.php?id=1279558759&amp;show=pic" type="text/javascript"></script><script src="https://c.cnzz.com/core.php?web_id=1279558759&amp;show=pic&amp;t=z" charset="utf-8" type="text/javascript"></script>
+            <!-- CNZZ统计 start -->
+            </span>
+        </p>
+    </div>
+</div>

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

@@ -8,6 +8,7 @@
           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>
@@ -25,13 +26,13 @@
                 <div v-if="isPC" class="bigImage">
                     <img :src="images[0]">
                     <span class="mask"></span>
-                    <span class="cm-product-cover-tag" v-if="pcActType === 1 && isPC">云上美博会</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" v-for="img in images">
                             <img :src="img">
-                            <span class="cm-product-cover-tag" v-if="pcActType === 0 && !isPC">云上美博会</span>
+                            <span class="cm-product-cover-tag" v-if="!isPC && pcActType === 1">云上美博会</span>
                         </li>
                     </ul>
                     <div class="swiper-pagination mfc"></div>
@@ -263,8 +264,7 @@
     <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 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>
@@ -273,12 +273,10 @@
         <div class="productInfo">
             <div class="tabTit">
                 <span :class="tabsIndex == 0 ? 'on' : ''" @click="detailsClicktab(0)">商品详情</span>
-                <span :class="tabsIndex == 1 ? 'on' : ''" v-if="parameters.length>0 && !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 :class="tabsIndex == 1 ? 'on' : ''" v-if="parameters.length>0 && !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>评价</span>-->
             </div>
             <div class="tabCon">
@@ -308,6 +306,93 @@
                     <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" 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" 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">暂无相关资料</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)"></span>
+                                            <video :src="item.fileUrl && item.fileUrl" :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" @click="handlePreviewOffice(item)">预览文件</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
                 <!--                <div class="item">-->
                 <!--                <div style="text-align: left;margin: 10px 0">-->
                 <!--                        <span>商品评分：</span>-->
@@ -406,9 +491,12 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/magnifier.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" 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/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/product/detail.js(v=${version})}"></script>
 </body>
 </html>