updated:信息中心、百科小版本优化

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

@@ -110,7 +110,7 @@ public class EncyclopediaController extends BaseController {
         List<BaikeHotSearch> hotSeracherWords=productService.getHotWords();
         model.addAttribute("hotSeracherWords", hotSeracherWords);
         model.addAttribute("baikeproduct", baikeproduct);
-        System.out.println("baikeproduct" + baikeproduct);
+        System.out.println("baikeproduct=" + baikeproduct);
         //分类集合
         List<BaikeTypeVo> typeList = productService.geTypeList();
         model.addAttribute("TypeList", typeList);

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

@@ -377,7 +377,7 @@ a{color:#333;text-decoration:none}
 .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
 .swiper-slide .slide-template-2, .swiper-slide .slide-template-26 {height: 45vw;}
 .swiper-slide .slide-template-1 {height: 35vw;}
-.swiper-slide .slide-template-2 img {height: 20vw; width: 100%;}
+.swiper-slide .slide-template-2 img {height: 100%; width: 100%;position: absolute;}
 .swiper-slide .slide-template-1 img {height: 16vw; width: 100%;}
 .swiper-slide .slide-template-26 img {height: 100%;position: absolute;}
 .slide-template-2-img {position: relative;background: #fff;}
@@ -740,7 +740,7 @@ a{color:#333;text-decoration:none}
 .swiper-slide .slide-template-9 {height: 738px;}
 .swiper-slide .slide-template-9 img,.swiper-slide .slide-template-28 img,.swiper-slide .slide-template-30 img,.swiper-slide .slide-template-32 img,.swiper-slide .slide-template-26 img {position: absolute;height: 100%}
 .swiper-slide .slide-template-22,.swiper-slide .slide-template-26,.swiper-slide .slide-template-28, .swiper-slide .slide-template-30, .swiper-slide .slide-template-32 {height: 562px;}
-.slide-template-2-img {position: relative;}
+.slide-template-2-img {position: relative;}  .swiper-slide .slide-template-2 img {height: 100%; width: 100%;position: absolute;}
 }
 @media (min-width:1200px){
 .cm-container{width:1140px}

src/main/resources/static/css/encyclopedia/detail.css

@@ -1,120 +1,120 @@
-.scapegoat{color: #F57C40 !important;}
-@media screen and (min-width:768px){main{background:#FAFAFA}
-    img.scapegoat{vertical-align: -4px;margin:0 2px; cursor: pointer;}
-    .bk-banner{height:320px;position:relative;z-index:10;overflow:hidden}
-    .bk-banner img{display:block;height:320px;position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
-    .bk-banner .bk-container{position:relative}
-    .bk-banner .bk-name{position:absolute;font-size:32px;color:#756863;font-weight:bold;left:0;top:40px}
-    .bk-detail{position:relative;z-index:20;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 32px;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:14px;color:#333}
-    .bk-detail-left{width:835px}
-    .bk-detail-left .bk-name{font-size:18px}
-    .bk-detail-left .bk-overview{color:#999999;margin-top:16px;white-space: pre-wrap;line-height: 24px;}
-    .bk-detail-left .bk-information{display:table;margin-top:48px;margin-bottom:48px;width:100%}
-    .bk-detail-left .bk-information .bk-row{display:table-row}
-    .bk-detail-left .bk-information .bk-row .bk-label{display:table-cell;font-weight:bold;color:#9AA5B5;border-bottom:1px dashed #BEBEBE;padding:18px 0 10px;white-space:nowrap;}
-    .bk-detail-left .bk-information .bk-row .bk-content{font-size:14px;display:table-cell;border-bottom:1px dashed #BEBEBE;padding:18px 10px 10px}
-    .bk-detail-left .bk-section .bk-section-content{line-height: 1.8;white-space: pre-wrap;}
-    .bk-detail-left .bk-section .bk-title{position:relative;margin-top:40px;margin-bottom:24px}
-    .bk-detail-left .bk-section .bk-title h2{background:#fff;font-size:22px;display:inline-block;font-weight:normal;position:relative;z-index:20;padding-right:16px}
-    .bk-detail-left .bk-section .bk-title::before{position:absolute;content:"";display:block;width:12px;height:24px;left:-32px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background:#FF9D63}
-    .bk-detail-left .bk-section .bk-title .line{position:absolute;display:block;width:100%;height:1px;background:#E6E6E6;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:0;z-index:10}
-    .bk-detail-left .bk-section p{text-indent:2em;line-height:26px;text-align:justify}
-    .bk-detail-left .bk-section h3{font-size:18px;margin-bottom:16px;margin-top:32px;font-weight:normal}
-    .bk-literature{margin-top:66px}
-    .bk-literature .bk-title{font-size:18px}
-    .bk-literature .bk-title .line{height:1px;background:#BEBEBE;margin-top:16px}
-    .bk-literature .bk-literature-list{margin-top:24px}
-    .bk-literature .bk-literature-list li{font-size:14px;color:#999999;margin-top:14px;line-height:24px}
-    .bk-literature .bk-literature-list li em{font-style: normal;}
-    .bk-literature .bk-literature-list li i{display: inline-block;width: 16px; height: 16px; background:#F7F7F7 url("/img/encyclopedia/assets/pc-icon-arrowup.png") no-repeat center; background-size: 12px; cursor: pointer; }
-    .bk-literature .bk-literature-list li a{color: #333;}
-    .bk-literature .bk-literature-list li a.link::after{content: ""; display: inline-block; width: 16px;height: 16px; background: url("/img/encyclopedia/assets/pc-icon-link.png") no-repeat center; background-size: 16px;}
-    .bk-literature .bk-literature-list li a.image::after{content: ""; display: inline-block; width: 16px;height: 16px; background: url("/img/encyclopedia/assets/pc-icon-img.png") no-repeat center; background-size: 16px;}
-    .bk-literature .bk-literature-list li a:after{margin: 0 2px}
-    .bk-literature .bk-literature-list li i,
-    .bk-literature .bk-literature-list li a:after{vertical-align: -3px}
-    .bk-literature .bk-literature-list li a.link:hover{color: #F57C40; text-decoration: underline}
-    .bk-literature .bk-literature-list li a.link:hover::after{background-image: url("/img/encyclopedia/assets/pc-icon-link-hover.png")}
-    .bk-literature .bk-literature-list li a.image:hover::after{background-image: url("/img/encyclopedia/assets/pc-icon-img-hover.png")}
-    .bk-literature .bk-literature-list li i:hover{ background-image:url("/img/encyclopedia/assets/pc-icon-arrowup-hover.png")}
-    .bk-pv{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right;background:#fff;margin-top:24px;-webkit-column-gap:32px;-moz-column-gap:32px;column-gap:32px}
-    .bk-pv .bk-pv-item{font-size:12px;color:#999999}
-    .bk-remarks{font-size: 12px; color: #999; margin-top: 24px}
-    .bk-detail-right .bk-album,.bk-detail-right .bk-company{width:280px;height:280px;background:#FAFAFA;margin-bottom:25px}
-    .bk-detail-right .bk-album img,.bk-detail-right .bk-company img{display:block;width:280px;height:220px}
-    .bk-detail-right .bk-album video{display:block;width:280px;height:220px}
-    .bk-detail-right .bk-album .swiper-container{height:220px}
-    .bk-detail-right .bk-album .swiper-container .swiper-slide{position: relative}
-    .bk-detail-right .bk-album .bk-play{width: 48px;height: 48px;background: url("/img/activity/pc-palyer.png") no-repeat center; background-size: 48px;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);
-        cursor: pointer;}
-    .bk-detail-right .bk-album .bk-title,.bk-detail-right .bk-company .bk-title{font-size:18px;color:#333;text-align:center;line-height:58px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #DEDEDE;border-top-style:dashed}
-    .bk-detail-right .bk-directory{width:280px;background:#FAFAFA;-webkit-box-sizing:border-box;box-sizing:border-box;padding:32px 24px;margin-top:100px;position:sticky;top:280px}
-    .bk-detail-right .bk-directory .bk-title{font-size:18px;font-weight:bold;margin-bottom:24px}
-    .bk-detail-right .bk-directory .bk-content{max-height:360px;overflow-y:auto}
-    .bk-detail-right .bk-directory .bk-content ul li a{font-size:14px;margin-bottom:16px;display:block;color:#666666}
-    .bk-detail-right .bk-directory .bk-content > ul > li > a{font-weight:bold;color:#333}
-    .bk-detail-right .bk-directory .bk-content > ul > li > ul li{padding-left:24px;position:relative;color:#666666}
-    .bk-detail-right .bk-directory .bk-content > ul > li > ul li:before{position:absolute;content:'●';left:10px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
-    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
-    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
-    .video-popup .content{width: 944px;height: 642px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #f1f1f1;}
-    .video-popup .content video{width: 100%;height: 100%;display: block;}
-    .video-popup .close {position: absolute;right: 15px;top: 15px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
-}
-
-@media screen and (max-width:768px){.bk-banner{height:3.4rem;position:relative;z-index:10;overflow:hidden}
-    img.scapegoat{vertical-align: -4px;margin:0 2px; cursor: pointer;}
-    .bk-banner img{display:block;height:3.4rem;position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
-    .bk-detail{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:0.28rem;line-height:0.48rem;background:#F5F5F5}
-    .bk-entry-name{padding:0.4rem 0.32rem 0.32rem;background:#fff}
-    .bk-entry-name .bk-name{font-size:0.36rem;font-weight:bold}
-    .bk-detail-left .bk-name{font-size:0.36rem;font-weight:bold;padding:0 0.32rem;background:#fff}
-    .bk-detail-left .bk-overview{color:#999999;padding:0.24rem 0.32rem 0;background:#fff;white-space: pre-wrap;}
-    .bk-detail-left .bk-information{position:relative;width:100%;padding:0.56rem 0.32rem  0.48rem;display:table;margin-bottom:0.16rem;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
-    .bk-detail-left .bk-information .bk-row{display:table-row}
-    .bk-detail-left .bk-information .bk-row .bk-label{color:#9AA5B5;display:table-cell;padding:0.16rem 0.4rem 0.16rem 0}
-    .bk-detail-left .bk-information .bk-row .bk-content{display:table-cell;padding:0.16rem 0}
-    .bk-detail-left .bk-section{position:relative;padding:0.48rem 0.32rem;background:#fff;margin-bottom:0.16rem;}
-    .bk-detail-left .bk-section .bk-title{position:relative;margin-bottom:0.32rem}
-    .bk-detail-left .bk-section .bk-title h2{font-size:0.36rem;position:relative;z-index:20}
-    .bk-detail-left .bk-section .bk-section-content{line-height: 1.8;text-align:justify;white-space: pre-wrap;}
-    .bk-detail-left .bk-section h3{font-size:0.32rem;margin-bottom:0.32rem;margin-top:0.4rem;font-weight:normal}
-    .bk-literature{padding:0.4rem 0.32rem;background:#fff}
-    .bk-literature .bk-title{font-size:0.36rem;font-weight:bold;margin-bottom:0.32rem}
-    .bk-literature .bk-literature-list li{margin-top:0.1rem;font-size:0.26rem;color:#999999}
-    .bk-pv{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right;background:#fff;padding:0 0.32rem 0.4rem;-webkit-column-gap:0.48rem;-moz-column-gap:0.48rem;column-gap:0.48rem}
-    .bk-pv .bk-pv-item{font-size:0.24rem;color:#999999}
-    .bk-remarks{font-size: 0.24rem; color: #999; padding: 0.4rem 0.32rem; background: #fff;}
-    .bk-relevant{background:#fff;padding:0.4rem 0 0;position:sticky;top:-6.15rem;z-index:60}
-    .bk-relevant .bk-album .bk-title{font-size:0.36rem;font-weight:bold;padding:0 0.32rem}
-    .bk-relevant .bk-album .bk-album-list{display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;height:3.2rem;margin-top:0.32rem;margin-bottom:0.4rem;-webkit-column-gap:0.24rem;-moz-column-gap:0.24rem;column-gap:0.24rem}
-    .bk-relevant .bk-album .bk-album-list::-webkit-scrollbar{width:0;height:0;background-color:#f5f5f5}
-    .bk-relevant .bk-album .bk-album-list::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:0}
-    .bk-relevant .bk-album .bk-album-list .bk-album-item{-ms-flex-negative:0;flex-shrink:0;width:4.2rem;height:3.2rem;position: relative;}
-    .bk-relevant .bk-album .bk-album-list .bk-album-item:first-child{margin-left:0.32rem}
-    .bk-relevant .bk-album .bk-album-list .bk-album-item:last-child{margin-right:0.32rem}
-    .bk-relevant .bk-album .bk-album-list .bk-album-item img{display:block;width:100%;height:100%}
-    .bk-relevant .bk-album .bk-album-list .bk-album-item video{display:block;width:100%;height:100%}
-    .bk-detail-right .bk-album .bk-play{width: 0.64rem;height: 0.64rem;background: url("/img/activity/pc-palyer.png") no-repeat center; background-size: 0.64rem;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%)}
-    .bk-relevant .bk-company{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:1.6rem;padding:0 0.2rem;margin:0 0.32rem 0.8rem;-webkit-box-sizing:border-box;box-sizing:border-box;border:0.01rem solid #DEDEDE;border-radius:0.08rem;background:#FAFAFA}
-    .bk-relevant .bk-company .bk-cover{width:1.2rem;height:1.2rem;border-radius:0.08rem;border:0.01rem solid #DEDEDE}
-    .bk-relevant .bk-company .bk-cover img{display:block;width:100%;height:100%}
-    .bk-relevant .bk-company .bk-title{font-size:0.26rem;margin-left:0.28rem}
-    .bk-relevant .bk-directory{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;height:1.2rem;background:#F7F7F7}
-    .bk-relevant .bk-directory .bk-title{font-size:0.28rem;color:#999999;margin-left:0.32rem}
-    .bk-relevant .bk-directory .bk-title span{margin:0 0.24rem}
-    .bk-relevant .bk-directory .bk-directory-list{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;overflow-y:auto;-webkit-column-gap:0.24rem;-moz-column-gap:0.24rem;column-gap:0.24rem;-ms-flex-wrap:nowrap;flex-wrap:nowrap}
-    .bk-relevant .bk-directory .bk-directory-list::-webkit-scrollbar{width:0;height:0;background-color:#f5f5f5}
-    .bk-relevant .bk-directory .bk-directory-list::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:0}
-    .bk-relevant .bk-directory .bk-directory-list li{-ms-flex-negative:0;flex-shrink:0}
-    .bk-relevant .bk-directory .bk-directory-list li a{display:block;height:0.6rem;color:#333333;font-size:0.28rem;padding:0 0.16rem;line-height:0.6rem;background:#fff}
-    .bk-relevant .bk-directory .bk-directory-list li:last-child{margin-right:0.32rem}
-    .bk-literature .bk-literature-list li em{font-style: normal;}
-    .bk-literature .bk-literature-list li a.link{color: #F57C40; text-decoration: underline}
-    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
-    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
-    .video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
-    .video-popup .content video{width: 100%;height: 100%;display: block;}
-    .video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
-
-}
+.scapegoat{color: #F57C40 !important;}
+@media screen and (min-width:768px){main{background:#FAFAFA}
+    img.scapegoat{vertical-align: -4px;margin:0 2px; cursor: pointer;}
+    .bk-banner{height:320px;position:relative;z-index:10;overflow:hidden}
+    .bk-banner img{display:block;height:320px;position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width: 100%;object-fit: cover;}
+    .bk-banner .bk-container{position:relative}
+    .bk-banner .bk-name{position:absolute;font-size:32px;color:#756863;font-weight:bold;left:0;top:40px}
+    .bk-detail{position:relative;z-index:20;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 32px;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:14px;color:#333}
+    .bk-detail-left{width:835px}
+    .bk-detail-left .bk-name{font-size:18px}
+    .bk-detail-left .bk-overview{color:#999999;margin-top:16px;white-space: pre-wrap;line-height: 24px;}
+    .bk-detail-left .bk-information{display:table;margin-top:48px;margin-bottom:48px;width:100%}
+    .bk-detail-left .bk-information .bk-row{display:table-row}
+    .bk-detail-left .bk-information .bk-row .bk-label{display:table-cell;font-weight:bold;color:#9AA5B5;border-bottom:1px dashed #BEBEBE;padding:18px 0 10px;white-space:nowrap;}
+    .bk-detail-left .bk-information .bk-row .bk-content{font-size:14px;display:table-cell;border-bottom:1px dashed #BEBEBE;padding:18px 10px 10px}
+    .bk-detail-left .bk-section .bk-section-content{line-height: 1.8;white-space: pre-wrap;}
+    .bk-detail-left .bk-section .bk-title{position:relative;margin-top:40px;margin-bottom:24px}
+    .bk-detail-left .bk-section .bk-title h2{background:#fff;font-size:22px;display:inline-block;font-weight:normal;position:relative;z-index:20;padding-right:16px}
+    .bk-detail-left .bk-section .bk-title::before{position:absolute;content:"";display:block;width:12px;height:24px;left:-32px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background:#FF9D63}
+    .bk-detail-left .bk-section .bk-title .line{position:absolute;display:block;width:100%;height:1px;background:#E6E6E6;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:0;z-index:10}
+    .bk-detail-left .bk-section p{text-indent:2em;line-height:26px;text-align:justify}
+    .bk-detail-left .bk-section h3{font-size:18px;margin-bottom:16px;margin-top:32px;font-weight:normal}
+    .bk-literature{margin-top:66px}
+    .bk-literature .bk-title{font-size:18px}
+    .bk-literature .bk-title .line{height:1px;background:#BEBEBE;margin-top:16px}
+    .bk-literature .bk-literature-list{margin-top:24px}
+    .bk-literature .bk-literature-list li{font-size:14px;color:#999999;margin-top:14px;line-height:24px}
+    .bk-literature .bk-literature-list li em{font-style: normal;}
+    .bk-literature .bk-literature-list li i{display: inline-block;width: 16px; height: 16px; background:#F7F7F7 url("/img/encyclopedia/assets/pc-icon-arrowup.png") no-repeat center; background-size: 12px; cursor: pointer; }
+    .bk-literature .bk-literature-list li a{color: #333;}
+    .bk-literature .bk-literature-list li a.link::after{content: ""; display: inline-block; width: 16px;height: 16px; background: url("/img/encyclopedia/assets/pc-icon-link.png") no-repeat center; background-size: 16px;}
+    .bk-literature .bk-literature-list li a.image::after{content: ""; display: inline-block; width: 16px;height: 16px; background: url("/img/encyclopedia/assets/pc-icon-img.png") no-repeat center; background-size: 16px;}
+    .bk-literature .bk-literature-list li a:after{margin: 0 2px}
+    .bk-literature .bk-literature-list li i,
+    .bk-literature .bk-literature-list li a:after{vertical-align: -3px}
+    .bk-literature .bk-literature-list li a.link:hover{color: #F57C40; text-decoration: underline}
+    .bk-literature .bk-literature-list li a.link:hover::after{background-image: url("/img/encyclopedia/assets/pc-icon-link-hover.png")}
+    .bk-literature .bk-literature-list li a.image:hover::after{background-image: url("/img/encyclopedia/assets/pc-icon-img-hover.png")}
+    .bk-literature .bk-literature-list li i:hover{ background-image:url("/img/encyclopedia/assets/pc-icon-arrowup-hover.png")}
+    .bk-pv{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right;background:#fff;margin-top:24px;-webkit-column-gap:32px;-moz-column-gap:32px;column-gap:32px}
+    .bk-pv .bk-pv-item{font-size:12px;color:#999999}
+    .bk-remarks{font-size: 12px; color: #999; margin-top: 24px}
+    .bk-detail-right .bk-album,.bk-detail-right .bk-company{width:280px;height:280px;background:#FAFAFA;margin-bottom:25px}
+    .bk-detail-right .bk-album img,.bk-detail-right .bk-company img{display:block;width:280px;height:220px}
+    .bk-detail-right .bk-album video{display:block;width:280px;height:220px}
+    .bk-detail-right .bk-album .swiper-container{height:220px}
+    .bk-detail-right .bk-album .swiper-container .swiper-slide{position: relative}
+    .bk-detail-right .bk-album .bk-play{width: 48px;height: 48px;background: url("/img/activity/pc-palyer.png") no-repeat center; background-size: 48px;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);
+        cursor: pointer;}
+    .bk-detail-right .bk-album .bk-title,.bk-detail-right .bk-company .bk-title{font-size:18px;color:#333;text-align:center;line-height:58px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #DEDEDE;border-top-style:dashed}
+    .bk-detail-right .bk-directory{width:280px;background:#FAFAFA;-webkit-box-sizing:border-box;box-sizing:border-box;padding:32px 24px;margin-top:100px;position:sticky;top:280px}
+    .bk-detail-right .bk-directory .bk-title{font-size:18px;font-weight:bold;margin-bottom:24px}
+    .bk-detail-right .bk-directory .bk-content{max-height:360px;overflow-y:auto}
+    .bk-detail-right .bk-directory .bk-content ul li a{font-size:14px;margin-bottom:16px;display:block;color:#666666}
+    .bk-detail-right .bk-directory .bk-content > ul > li > a{font-weight:bold;color:#333}
+    .bk-detail-right .bk-directory .bk-content > ul > li > ul li{padding-left:24px;position:relative;color:#666666}
+    .bk-detail-right .bk-directory .bk-content > ul > li > ul li:before{position:absolute;content:'●';left:10px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
+    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+    .video-popup .content{width: 944px;height: 642px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #f1f1f1;}
+    .video-popup .content video{width: 100%;height: 100%;display: block;}
+    .video-popup .close {position: absolute;right: 15px;top: 15px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
+}
+
+@media screen and (max-width:768px){.bk-banner{height:3.4rem;position:relative;z-index:10;overflow:hidden}
+    img.scapegoat{vertical-align: -4px;margin:0 2px; cursor: pointer;}
+    .bk-banner img{display:block;height:3.4rem;position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width: 100%;object-fit: cover;}
+    .bk-detail{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:0.28rem;line-height:0.48rem;background:#F5F5F5}
+    .bk-entry-name{padding:0.4rem 0.32rem 0.32rem;background:#fff}
+    .bk-entry-name .bk-name{font-size:0.36rem;font-weight:bold}
+    .bk-detail-left .bk-name{font-size:0.36rem;font-weight:bold;padding:0 0.32rem;background:#fff}
+    .bk-detail-left .bk-overview{color:#999999;padding:0.24rem 0.32rem 0;background:#fff;white-space: pre-wrap;}
+    .bk-detail-left .bk-information{position:relative;width:100%;padding:0.56rem 0.32rem  0.48rem;display:table;margin-bottom:0.16rem;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .bk-detail-left .bk-information .bk-row{display:table-row}
+    .bk-detail-left .bk-information .bk-row .bk-label{color:#9AA5B5;display:table-cell;padding:0.16rem 0.4rem 0.16rem 0}
+    .bk-detail-left .bk-information .bk-row .bk-content{display:table-cell;padding:0.16rem 0}
+    .bk-detail-left .bk-section{position:relative;padding:0.48rem 0.32rem;background:#fff;margin-bottom:0.16rem;}
+    .bk-detail-left .bk-section .bk-title{position:relative;margin-bottom:0.32rem}
+    .bk-detail-left .bk-section .bk-title h2{font-size:0.36rem;position:relative;z-index:20}
+    .bk-detail-left .bk-section .bk-section-content{line-height: 1.8;text-align:justify;white-space: pre-wrap;}
+    .bk-detail-left .bk-section h3{font-size:0.32rem;margin-bottom:0.32rem;margin-top:0.4rem;font-weight:normal}
+    .bk-literature{padding:0.4rem 0.32rem;background:#fff}
+    .bk-literature .bk-title{font-size:0.36rem;font-weight:bold;margin-bottom:0.32rem}
+    .bk-literature .bk-literature-list li{margin-top:0.1rem;font-size:0.26rem;color:#999999}
+    .bk-pv{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right;background:#fff;padding:0 0.32rem 0.4rem;-webkit-column-gap:0.48rem;-moz-column-gap:0.48rem;column-gap:0.48rem}
+    .bk-pv .bk-pv-item{font-size:0.24rem;color:#999999}
+    .bk-remarks{font-size: 0.24rem; color: #999; padding: 0.4rem 0.32rem; background: #fff;}
+    .bk-relevant{background:#fff;padding:0.4rem 0 0;position:sticky;top:-6.15rem;z-index:60}
+    .bk-relevant .bk-album .bk-title{font-size:0.36rem;font-weight:bold;padding:0 0.32rem}
+    .bk-relevant .bk-album .bk-album-list{display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;height:3.2rem;margin-top:0.32rem;margin-bottom:0.4rem;-webkit-column-gap:0.24rem;-moz-column-gap:0.24rem;column-gap:0.24rem}
+    .bk-relevant .bk-album .bk-album-list::-webkit-scrollbar{width:0;height:0;background-color:#f5f5f5}
+    .bk-relevant .bk-album .bk-album-list::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:0}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item{-ms-flex-negative:0;flex-shrink:0;width:4.2rem;height:3.2rem;position: relative;}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item:first-child{margin-left:0.32rem}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item:last-child{margin-right:0.32rem}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item img{display:block;width:100%;height:100%}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item video{display:block;width:100%;height:100%}
+    .bk-detail-right .bk-album .bk-play{width: 0.64rem;height: 0.64rem;background: url("/img/activity/pc-palyer.png") no-repeat center; background-size: 0.64rem;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%)}
+    .bk-relevant .bk-company{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:1.6rem;padding:0 0.2rem;margin:0 0.32rem 0.8rem;-webkit-box-sizing:border-box;box-sizing:border-box;border:0.01rem solid #DEDEDE;border-radius:0.08rem;background:#FAFAFA}
+    .bk-relevant .bk-company .bk-cover{width:1.2rem;height:1.2rem;border-radius:0.08rem;border:0.01rem solid #DEDEDE}
+    .bk-relevant .bk-company .bk-cover img{display:block;width:100%;height:100%}
+    .bk-relevant .bk-company .bk-title{font-size:0.26rem;margin-left:0.28rem}
+    .bk-relevant .bk-directory{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;height:1.2rem;background:#F7F7F7}
+    .bk-relevant .bk-directory .bk-title{font-size:0.28rem;color:#999999;margin-left:0.32rem}
+    .bk-relevant .bk-directory .bk-title span{margin:0 0.24rem}
+    .bk-relevant .bk-directory .bk-directory-list{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;overflow-y:auto;-webkit-column-gap:0.24rem;-moz-column-gap:0.24rem;column-gap:0.24rem;-ms-flex-wrap:nowrap;flex-wrap:nowrap}
+    .bk-relevant .bk-directory .bk-directory-list::-webkit-scrollbar{width:0;height:0;background-color:#f5f5f5}
+    .bk-relevant .bk-directory .bk-directory-list::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:0}
+    .bk-relevant .bk-directory .bk-directory-list li{-ms-flex-negative:0;flex-shrink:0}
+    .bk-relevant .bk-directory .bk-directory-list li a{display:block;height:0.6rem;color:#333333;font-size:0.28rem;padding:0 0.16rem;line-height:0.6rem;background:#fff}
+    .bk-relevant .bk-directory .bk-directory-list li:last-child{margin-right:0.32rem}
+    .bk-literature .bk-literature-list li em{font-style: normal;}
+    .bk-literature .bk-literature-list li a.link{color: #F57C40; text-decoration: underline}
+    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+    .video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
+    .video-popup .content video{width: 100%;height: 100%;display: block;}
+    .video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
+
+}

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

@@ -386,7 +386,7 @@ a{color:#333;text-decoration:none}
     .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
     .swiper-slide .slide-template-2, .swiper-slide .slide-template-26 {height: 45vw;}
     .swiper-slide .slide-template-1 {height: 35vw;}
-    .swiper-slide .slide-template-2 img {height: 20vw; width: 100%;}
+    .swiper-slide .slide-template-2 img {height: 100%; width: 100%;position: absolute;}
     .swiper-slide .slide-template-1 img {height: 16vw; width: 100%;}
     .swiper-slide .slide-template-26 img {height: 100%;position: absolute;}
     .slide-template-2-img {position: relative;background: #fff;}
@@ -749,7 +749,8 @@ a{color:#333;text-decoration:none}
     .swiper-slide .slide-template-9 {height: 738px;}
     .swiper-slide .slide-template-9 img,.swiper-slide .slide-template-28 img,.swiper-slide .slide-template-30 img,.swiper-slide .slide-template-32 img,.swiper-slide .slide-template-26 img {position: absolute;height: 100%}
     .swiper-slide .slide-template-22,.swiper-slide .slide-template-26,.swiper-slide .slide-template-28, .swiper-slide .slide-template-30, .swiper-slide .slide-template-32 {height: 562px;}
-    .slide-template-2-img {position: relative;}
+    .slide-template-2-img {position: relative;background: #fff;}
+    .swiper-slide .slide-template-2 img {height: 100%; width: 100%;position: absolute;}
 }
 @media (min-width:1200px){
     .cm-container{width:1140px}

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

@@ -359,12 +359,15 @@ const edit = new Vue({
                 return {url: item.image, type: 'image'}
             })
             const videoList = this.formData.videoList.map(item =>{
-                return {fileName: item.fileName, uuid: item.ossName, url: item.url, type: 'video'}
+                return {fileName: item.fileName, uuid: item.ossName, url: item.ossUrl, type: 'video'}
             })
             this.fileList = [...imageList, ...videoList]
             if(this.formData.image){
                 this.coverList = [{ url: this.formData.image, type: 'image' }]
             }
+            if(this.formData.banner){
+                this.bannerList = [{ url: this.formData.banner, type: 'image' }]
+            }
             const infoSize = 4 - this.formData.infoList.length
             const textInfoSize = 4 - this.formData.textInfoList.length
             this.initFormDataList( infoSize, textInfoSize)

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

@@ -1,103 +1,104 @@
-function directory(container, flag = true) {
-    const section = $('.bk-section')
-    section.find('h2').each(function (index, item) {
-        const fristTitle = 'heading-' + (index + 1);
-        const fristTitleItem = $('<li></li>');
-        const a = $('<a></a>')
-        const text = flag ? (index + 1) + '、' + $(item).text() : $(item).text();
-        a.text(text)
-        a.attr('href', 'javascript:void(0)')
-        a.attr('data-id', fristTitle)
-        fristTitleItem.append(a)
-        $(container).append(fristTitleItem)
-        $(item).attr('id', fristTitle)
-        if (flag) {
-            let subTitle = $('<ul></ul>')
-            fristTitleItem.append(subTitle)
-            $(item).parent().nextUntil('.bk-title').each(function (i, el) {
-                if (el.nodeName !== 'H3') return
-                const subTitleItem = $('<li></li>')
-                const a = $('<a></a>')
-                a.text($(el).text())
-                a.attr('href', 'javascript:void(0)')
-                a.attr('data-id', fristTitle + i)
-                subTitleItem.append(a)
-                subTitle.append(subTitleItem)
-                $(el).attr('id', fristTitle + i)
-            })
-        }
-    })
-}
-$(function () {
-    directory('#bk-directory-pc', true)
-    directory('#bk-directory-mobile', false)
-    $('.bk-directory-list').find('a').on('click', function () {
-        const id = '#' + $(this).attr('data-id');
-        const scrollTop = innerWidth > 768 ? $(id).offset().top - $('header').height() : $(id).offset().top - $('header').height() - $('.bk-directory').height();
-        $("html, body").animate({
-            scrollTop: scrollTop
-        }, {duration: 500, easing: "swing"});
-        return false;
-    })
-
-    $('img.scapegoat').on('click', function () {
-        const id = $(this).attr('data-ctrid')
-        $("html, body").animate({
-            scrollTop: $('#' + id).offset().top
-        }, {duration: 500, easing: "swing"});
-    })
-
-    $('.bk-literature-list i').on('click', function(){
-        const id = $(this).parent('li').attr('id')
-        if(!id) return
-        const selector = '[data-ctrid=' + id + ']'
-        $("html, body").animate({
-            scrollTop: $(selector).eq(0).offset().top - 150
-        }, {duration: 500, easing: "swing"});
-    })
-
-    // 视频播放
-    $('.bk-album .bk-play').on('click', function(){
-        const videoUrl = $(this).siblings('video').attr('src');
-        $('#video-popup video').attr('src', videoUrl);
-        $('#video-popup').show();
-    })
-    $('#video-popup .close').on('click', function(){
-        $(this).parents('#video-popup').hide();
-    });
-})
-var bkPage = new Vue({
-    el: "#bk-page-container",
-    mixins: [cmSysVitaMixins],
-    data: {
-        relatedLabels:'',
-        previewFormData:{}, // preview 预览数据
-    },
-    methods: {
-
-    },
-    created() {
-        this.cmSysParams.pageType = 68;
-        this.relatedLabels = $("#relatedLabels").val()?$("#relatedLabels").val():"";
-        console.log('relatedLabels',this.relatedLabels)
-        if(this.relatedLabels){
-            this.cmSysParams.pageLabel =  this.relatedLabels
-        }else{
-            this.cmSysParams.pageLabel =  $('.bk-name').text();
-        }
-        console.log('pageLabel',this.cmSysParams.pageLabel)
-        // 获取数据进行预览
-        this.previewFormData = JSON.parse(window.localStorage.getItem('form'))
-        // 格式化数据
-        for (let key in this.previewFormData){
-            if (key.includes('Str')) {
-                this.previewFormData[key] = JSON.parse(this.previewFormData[key])
-            }
-        }
-        console.log(this.previewFormData)
-    },
-    mounted () {
-    },
-    destroyed() {
-    }
-});
+function directory(container, flag = true) {
+    const section = $('.bk-section')
+    section.find('h2').each(function (index, item) {
+        const fristTitle = 'heading-' + (index + 1);
+        const fristTitleItem = $('<li></li>');
+        const a = $('<a></a>')
+        const text = flag ? (index + 1) + '、' + $(item).text() : $(item).text();
+        a.text(text)
+        a.attr('href', 'javascript:void(0)')
+        a.attr('data-id', fristTitle)
+        fristTitleItem.append(a)
+        $(container).append(fristTitleItem)
+        $(item).attr('id', fristTitle)
+        if (flag) {
+            let subTitle = $('<ul></ul>')
+            fristTitleItem.append(subTitle)
+            $(item).parent().nextUntil('.bk-title').each(function (i, el) {
+                if (el.nodeName !== 'H3') return
+                const subTitleItem = $('<li></li>')
+                const a = $('<a></a>')
+                a.text($(el).text())
+                a.attr('href', 'javascript:void(0)')
+                a.attr('data-id', fristTitle + i)
+                subTitleItem.append(a)
+                subTitle.append(subTitleItem)
+                $(el).attr('id', fristTitle + i)
+            })
+        }
+    })
+}
+$(function () {
+    directory('#bk-directory-pc', true)
+    directory('#bk-directory-mobile', false)
+    $('.bk-directory-list').find('a').on('click', function () {
+        const id = '#' + $(this).attr('data-id');
+        const scrollTop = innerWidth > 768 ? $(id).offset().top - $('header').height() : $(id).offset().top - $('header').height() - $('.bk-directory').height();
+        $("html, body").animate({
+            scrollTop: scrollTop
+        }, {duration: 500, easing: "swing"});
+        return false;
+    })
+
+    $('img.scapegoat').on('click', function () {
+        const id = $(this).attr('data-ctrid')
+        $("html, body").animate({
+            scrollTop: $('#' + id).offset().top
+        }, {duration: 500, easing: "swing"});
+    })
+
+    $('.bk-literature-list i').on('click', function(){
+        const id = $(this).parent('li').attr('id')
+        if(!id) return
+        const selector = '[data-ctrid=' + id + ']'
+        $("html, body").animate({
+            scrollTop: $(selector).eq(0).offset().top - 150
+        }, {duration: 500, easing: "swing"});
+    })
+
+    // 视频播放
+    $('.bk-album .bk-play').on('click', function(){
+        const videoUrl = $(this).siblings('video').attr('src');
+        $('#video-popup video').attr('src', videoUrl);
+        $('#video-popup').show();
+    })
+    $('#video-popup .close').on('click', function(){
+        $(this).parents('#video-popup').hide();
+    });
+})
+var bkPage = new Vue({
+    el: "#bk-page-container",
+    mixins: [cmSysVitaMixins],
+    data: {
+        relatedLabels:'',
+        previewFormData:{}, // preview 预览数据
+    },
+    methods: {
+
+    },
+    created() {
+        this.cmSysParams.pageType = 68;
+        this.relatedLabels = $("#relatedLabels").val()?$("#relatedLabels").val():"";
+        console.log('relatedLabels',this.relatedLabels)
+        if(this.relatedLabels){
+            this.cmSysParams.pageLabel =  this.relatedLabels
+        }else{
+            this.cmSysParams.pageLabel =  $('.bk-name').text();
+        }
+        console.log('pageLabel',this.cmSysParams.pageLabel)
+        // 获取数据进行预览
+        this.previewFormData = JSON.parse(window.localStorage.getItem('form'))
+        // 格式化数据
+        for (let key in this.previewFormData){
+            if (key.includes('Str')) {
+                this.previewFormData[key] = JSON.parse(this.previewFormData[key])
+            }
+        }
+        this.previewFormData.assignList = [...this.previewFormData.imageListStr, ...this.previewFormData.videoListStr]
+        console.log(this.previewFormData)
+    },
+    mounted () {
+    },
+    destroyed() {
+    }
+});

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

@@ -503,7 +503,7 @@
                                          :key="item_index">
                                         <div :class="'slide-template-' + floorData.floorContent.templateType" class="template-rows-2" :style="{display: 'grid', gridTemplateRows: 'repeat(2, 1fr)', gridTemplateColumns: `repeat(${gridTemplateColumns[floorData.floorContent.templateType]}, 1fr)`, gridGap: '16px'}">
                                             <template v-for="i in item" :key="i.id" v-if="fetchTemplate([1,2,9,26,28],floorData.floorContent.templateType)">
-                                                <div class="slide-template-2-img" @click="handleClick(i)">
+                                                <div class="slide-template-2-img hover-class" @click="handleClick(i)">
                                                     <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="150px"/>
                                                     <div class="has-player"
                                                          v-if="floorData.floorContent.templateClassify == 4"></div>

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

@@ -22,8 +22,8 @@
 
 <main id="bk-page-container">
     <div class="bk-banner">
-        <img th:src="${baikeproduct.banner}" alt="采美百科" class="only-pc"/> //  || '/img/encyclopedia/assets/pc-banner-detail.png'
-        <img th:src="${baikeproduct.banner}" alt="采美百科" class="only-mobile"/> //  || '/img/encyclopedia/assets/h5-banner-detail.png'
+        <img th:src="!(${baikeproduct.banner} eq null) ? ${baikeproduct.banner} : '/img/encyclopedia/assets/pc-banner-detail.png'" alt="采美百科" class="only-pc"/>
+        <img th:src="!(${baikeproduct.banner} eq null) ? ${baikeproduct.banner} : '/img/encyclopedia/assets/h5-banner-detail.png'" alt="采美百科" class="only-mobile"/>
         <div class="bk-container only-pc">
             <div class="bk-name" th:text="${baikeproduct.name}"></div>
         </div>
@@ -52,7 +52,7 @@
             <div class="only-mobile bk-relevant">
                 <div class="bk-album">
                     <div class="bk-title"><span th:text="*{name}"></span>的概述图册</div>
-                    <div class="bk-album-list">
+                    <div class="bk-album-list" th:if="*{#lists.size(imageList) ne 0}">
                         <div class="bk-album-item" th:each="item : *{imageList}">
                             <img th:src="${item.image}" th:if="${item.type == 1}">
                             <video th:src="${item.videoUrl}" th:if="${item.type == 2}"></video>
@@ -80,7 +80,7 @@
                     <div class="bk-section-content" th:if="${item.dictionaryType == 3}" th:utext="${item.dictionaryContent}"></div>
                 </th:block>
             </div>
-            <div class="bk-literature">
+            <div class="bk-literature" th:if="*{#lists.size(referenceList) ne 0}">
                 <div class="bk-title">
                     <div>参考资料</div>
                     <div class="line"></div>

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

@@ -507,7 +507,7 @@
                        :key="item_index">
                     <div :class="'slide-template-' + floorData.floorContent.templateType" class="template-rows-2" :style="{display: 'grid', gridTemplateRows: 'repeat(2, 1fr)', gridTemplateColumns: `repeat(${gridTemplateColumns[floorData.floorContent.templateType]}, 1fr)`, gridGap: '16px'}">
                       <template v-for="i in item" :key="i.id" v-if="fetchTemplate([1,2,9,26,28],floorData.floorContent.templateType)">
-                        <div class="slide-template-2-img" @click="handleClick(i)">
+                        <div class="slide-template-2-img hover-class" @click="handleClick(i)">
                           <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="150px"/>
                           <div class="has-player"
                                v-if="floorData.floorContent.templateClassify == 4"></div>
@@ -516,7 +516,7 @@
                       <template v-for="i in item" :key="i.id" v-if="fetchTemplate([30,32],floorData.floorContent.templateType)" @click="onPlayVideo(i.link)">
                         <div class="slide-template-2-img" @click="handleClick(i)">
                           <img :src="isMobile ? i.appletsImage : i.image" width="100%" height="150px"/>
-                          <div class="has-player"
+                          <div class="has-player hover-class"
                                v-if="floorData.floorContent.templateClassify == 4"></div>
                         </div>
                       </template>

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

@@ -116,7 +116,7 @@
                         </el-form-item>
                         <!-- 参考资料 -->
                         <div class="bk-label">参考资料</div>
-                        <ul class="bk-literature-list">
+                        <ul class="bk-literature-list" v-if="formData.referenceList.length > 0">
                             <li v-for="(item, index) in formData.referenceList">
                                 <div><span>[{{index+1}}]</span><span>{{item | reference}}</span></div>
                                 <div class="bk-ref-control">

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

@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css"/>
   <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
   <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}">
-  <link rel="stylesheet" th:href="@{/css/encyclopedia/preview.css(v=${version})}">
+  <link rel="stylesheet" th:href="@{/css/encyclopedia/detail.css(v=${version})}">
   <template th:replace="article/components/article-link"></template>
   <meta name="keywords" th:content="${article?.keyword}">
   <meta name="description" th:content="${article?.recommendContent}">
@@ -58,18 +58,18 @@
       </div>
       <div class="only-mobile bk-relevant">
         <div class="bk-album">
-          <div class="bk-title">透明质酸的概述图册</div>
+          <div class="bk-title">{{previewFormData.name}}的概述图册</div>
           <div class="bk-album-list">
-            <div class="bk-album-item" v-for="item,index in previewFormData.imageListStr">
-              <img :src="item.image" v-if="item.type == 1">
-              <video :src="item.videoUrl" v-if="item.type == 2"></video>
-              <span class="bk-play" v-if="item.type == 2"></span>
+            <div class="bk-album-item" v-for="item,index in previewFormData.assignList">
+              <img :src="item.image" v-if="item.image">
+              <video :src="item.ossUrl" v-if="item.ossUrl"></video>
+              <span class="bk-play" v-if="item.ossUrl"></span>
             </div>
           </div>
         </div>
         <div class="bk-company">
-          <div class="bk-cover"><img src="https://picsum.photos/280/220?random=4"></div>
-          <div class="bk-title">上海品辉医疗科技有限公司</div>
+          <div class="bk-cover"><img :src="JSON.parse(window.localStorage.getItem('userInfo')).shopLogo ? JSON.parse(window.localStorage.getItem('userInfo')).shopLogo : '/img/base/placeholder.png'"></div>
+          <div class="bk-title">{{JSON.parse(window.localStorage.getItem('userInfo')).name}}</div>
         </div>
         <div class="bk-directory">
           <div class="bk-title">导航<span>></span></div>
@@ -128,10 +128,10 @@
       <div class="bk-album">
         <div class="swiper-container" id="album">
           <div class="swiper-wrapper">
-            <div class="swiper-slide" v-for="(item,index) in previewFormData.imageListStr" :key="index">
-              <img :src="item.image" v-if="item.type == 1">
-              <video :src="item.videoUrl" v-if="item.type == 2"></video>
-              <span class="bk-play" v-if="item.type == 2"></span>
+            <div class="swiper-slide" v-for="(item,index) in previewFormData.assignList" :key="index">
+              <img :src="item.image" v-if="item.image">
+              <video :src="item.ossUrl" v-if="item.ossUrl"></video>
+              <span class="bk-play" v-if="item.ossUrl"></span>
             </div>
           </div>
           <div class="swiper-pagination"></div>
@@ -140,7 +140,7 @@
       </div>
       <div class="bk-company">
         <img :src="JSON.parse(window.localStorage.getItem('userInfo')).shopLogo ? JSON.parse(window.localStorage.getItem('userInfo')).shopLogo : '/img/base/placeholder.png'">
-        <div class="bk-title">{{JSON.parse(window.localStorage.getItem('userInfo')).name || '上海品辉医疗科技有限公司'}}</div>
+        <div class="bk-title">{{JSON.parse(window.localStorage.getItem('userInfo')).name}}</div>
       </div>
       <div class="bk-directory">
         <div class="bk-title">文章目录</div>