正品联盟页面采美声明添加

src/main/resources/static/css/product/qualityauthorize.css

@@ -30,7 +30,8 @@ ul{margin:0;padding:0;list-style-type:none}
 .product-desc .default-box{padding:10px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
 .product-desc .dls{color:#999}
 .product-desc .statement a{color:#bc1724}
-.product-desc .statement a::after{content:'?';display:inline-block;width:14px;height:14px;text-align:center;line-height:16px;font-size:14px;border:1px solid #bc1724;border-radius:50%;margin-left:5px}
+.product-desc .statement a .icon-wenhao{font-weight: bold;margin-left: 5px}
+/*.product-desc .statement a::after{content:'?';display:inline-block;width:14px;height:14px;text-align:center;line-height:16px;font-size:14px;border:1px solid #bc1724;border-radius:50%;margin-left:5px}*/
 .product-desc p{margin:30px 0}
 .product-params{width:1184px;margin:16px auto 0;padding:25px;background:#FFFFFF;-webkit-box-sizing:border-box;box-sizing:border-box}
 .product-params .title{position:relative;padding-bottom:10px;border-bottom:1px solid #eee;-webkit-box-sizing:border-box;box-sizing:border-box}
@@ -54,7 +55,7 @@ ul{margin:0;padding:0;list-style-type:none}
 .statementModel .title{padding:15px 20px;background:#f1f1f1;font-size:18px}
 .statementModel .close{position:absolute;right:20px;top:10px;display:block;width:30px;height:30px;background:url(/img/quality/icon-close.png) no-repeat center;cursor:pointer}
 .statementModel .close:hover{background-image:url(/img/quality/icon-close-hover.png)}
-.statementModel .content{padding:15px;height:296px;overflow-y:scroll}
+.statementModel .content{padding:15px;height:296px;overflow-y:scroll;line-height: 1.8;text-align: justify;text-indent: 2em}
 .float-zplm{position:fixed;z-index:99;bottom:16%;right:2%;width:90px}
 .float-zplm img{width:100%}
 .close{position:absolute;display:block;width:32px;height:32px;background:url(/img/quality/mb-close.png) no-repeat center;cursor:pointer;z-index:999;background-size:32px;right:0;top:-50px}
@@ -76,7 +77,8 @@ ul{margin:0;padding:0;list-style-type:none}
 .product-desc h3{background:-o-linear-gradient(left,#101010,#404040);background:-webkit-gradient(linear,left top,right top,from(#101010),to(#404040));background:linear-gradient(to right,#101010,#404040);color:#fefefe;padding:4vw;font-size:4.4vw}
 .product-desc .pink-box{padding:3.2vw 4vw;background:rgb(251,241,242);color:#bc1724;line-height:8vw}
 .product-desc .default-box{width:92.3vw;margin:0 auto;padding:3.2vw 0;border-bottom:0.4vw solid #eee;line-height:8vw}
-.product-desc .statement a{display:block;padding-right:20px;width:23.6vw;background:url(/img/quality/icon-statement.png) no-repeat center;background-size:3.8vw;background-position-x:16vw}
+.product-desc .statement a{display:block;padding-right:20px;width:23.6vw;}
+.product-desc .statement a .icon-wenhao{font-weight: bold;margin-left: 5px;}
 .product-desc p{padding:3.2vw 4vw;line-height:6vw}
 .product-desc .sn-number{padding:3.2vw 0;background:#f5f5f5}
 .product-desc .sn-number .item-row{background:rgb(251,241,242);padding:3.2vw 4vw}
@@ -94,7 +96,7 @@ ul{margin:0;padding:0;list-style-type:none}
 .statementModel .model{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:86vw;height:128vw;border-radius:4px;background:#fff}
 .statementModel .title{padding:4vw 5vw;background:#f1f1f1;font-size:4.6vw;text-align:center}
 .statementModel .close{position:absolute;right:0;top:-10vw;display:block;width:8.2vw;height:8.2vw;background:url(/img/quality/mb-close.png) no-repeat center;background-size:8.2vw;cursor:pointer}
-.statementModel .content{padding:4vw;height:100vw;overflow-y:scroll}
+.statementModel .content{padding:4vw;height:100vw;overflow-y:scroll;line-height: 1.8;text-align: justify;text-indent: 2em;}
 .float-zplm{position:fixed;z-index:99;bottom:30vw;right:3.4vw;width:15.7vw}
 .float-zplm img{width:100%}
 .close{position:absolute;display:block;width:7.2vw;height:7.2vw;background:url(/img/quality/mb-close.png) no-repeat center;cursor:pointer;z-index:999;background-size:7.2vw;right:0;top:-11.5vw}
@@ -115,3 +117,25 @@ to{opacity:0}
 50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
 to{opacity:0}
 }
+
+@font-face {font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_2466631_xct76hehlhc.eot?t=1617677320008'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_2466631_xct76hehlhc.eot?t=1617677320008#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANIAAsAAAAABuwAAAL6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBeIIBATYCJAMICwYABCAFhG0HMBsnBhEVlClkXyTYnD24tgJVfeZWhGDmcRfFUCmL2UvWCFQafBMPfGvpn905gqC6S0qk+iILBBJI1SGB0DGmRA6NuKHL/dz8F0hxvMbmQL70qQly1JgC8ViccPc/pwUX4fveVZiQ7PPICuh+wpd3uZKDjY2ZkFNmc6RImHbGHmq9BsCYBfY/h0ubXmDzA+Uy17KoF2C8NcAx1x3ZHcgB+C3Da12Kh7yfgKIeY4RpvkgGyYvIsICwadhvIvmCUxT1SF6QbZgbhQtI+eRk8obz0e+H/8aGPIlMiuQs2ujtIJN+F2hMeqBlqEgE1nJ66ItIMQaRsKzRuECaBMdIFd1gNIhjZQZ+g1ZLqoWj/vOELJJeBg1gPhOLsx81PQER2hdh56QLiG2wTU+9W/buMnp/nv5e+fFm/PladjpHY/rT8FXLfy7RsP48+ba8f3rlhbE2t+NN6fqxbDrsN+8OdOu84Q2Q0v3bW2t/6PnDgHRSHk5yOicne0BwOuDkPS1kFdZ3wklZW2emXu+RzaDeqN5rzGw2toxCAHgvCg3oDbhGo4Kf1awXWSqNTt+/3aTvFE/+mjeVnrRa/a9BUZMevf2tOT6wzY7upZ4fvoC++CxkEmidIrHzd/+N4WPS2VXyuPOlCL5Nr7nI3joiw8zkb8oU+LmsgWXR4xBJ8pRMbEosytklAN2waEGs7X5MlXa9iT7IF1g6JHKakMobgozYMZBR0gdZeaaJUDRaZXFJB5YXYgGj3CEI6l4hUdUPqbp3ZMT+QEa3K2TVQx6KVoSONUuGBU+byrgU3MDqCN6aYsU0osWZfXS24ZLznIgwRk49D1i6WY5UMEZeYkK6c2wRBYopgjI6DMOQIGHycS26K5KUDEM1fZO+piijmYqhJYE2wMoR8KyRmJLVhVb5+T7k2AotcUdJl3oMsZTXObDozAHIijAeVPIoj6R2HDYhFKAwEgFlpEchDRKQNPfyoTWhcyf4EyUGrqSGCvXtxdHfrYEiIksC7ZbKbsfYXVImAwAA') format('woff2'),
+  url('//at.alicdn.com/t/font_2466631_xct76hehlhc.woff?t=1617677320008') format('woff'),
+  url('//at.alicdn.com/t/font_2466631_xct76hehlhc.ttf?t=1617677320008') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('//at.alicdn.com/t/font_2466631_xct76hehlhc.svg?t=1617677320008#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-wenhao:before {
+  content: "\e71d";
+}
+

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

@@ -16,7 +16,9 @@ var qualityAuthorize = new Vue({
         statementContent:'',
         //控制授权证书是否弹出
         isShowSqBookModal:false,
-        sqBookModal:''
+        sqBookModal:'',
+        cmContent:'',
+        isCmComtent:false
     },
     filters:{
         snCode:function (code) {
@@ -46,10 +48,17 @@ var qualityAuthorize = new Vue({
         openStatementDialog:function(flag){
             if(flag === 1){
             //代理声明
+                this.isCmComtent = false;
                 this.statementContent = this.parameters.statementContent
             }else{
             //采美声明
-                this.statementContent = '采美声明！'
+                this.isCmComtent = true;
+                this.cmContent = `
+                <p>目前，在市面上经常发现不少伪劣医疗美容产品/仪器，让众多的消费者无法辨别产品/仪器的真假，并且给品牌方及品牌代理商造成不少困扰</p>
+                <p>为了提高消费者对产品/仪器的可信度。由彩美信息技术有限公司发起并提供技术支持，且得到各品牌与代理商的认可及授权后，共同打造正品
+                联盟平台。将产品/仪器的品牌授牌信息纳入到正品联盟平台。消费者可通过授权牌上二维码扫码得知该产品/仪器的品牌授权信息。通过这些信
+                息即可得知产品/仪器的真假，是否为品牌以及品牌代理商授权过的正品，从而解决消费者与品牌/品牌代理商的困扰。</p>
+                `;
             }
             this.showStatement = true;
         },

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

@@ -44,9 +44,9 @@
                         <div class="item-row"><span class="dls">代理商：</span><span>{{parameters.agentName}}</span></div>
                         <div class="item-row statement">
                             <!-- 链接 -->
-                            <a :href="parameters.statementLink" v-if="parameters.statementType === 2">代理声明</a>
+                            <a :href="parameters.statementLink" v-if="parameters.statementType === 2">代理声明<i class="iconfont icon-wenhao"></i></a>
                             <!-- 弹窗 -->
-                            <a href="#" @click.prevent="openStatementDialog(1)" v-else>代理声明</a></div>
+                            <a href="#" @click.prevent="openStatementDialog(1)" v-else>代理声明<i class="iconfont icon-wenhao"></i></a></div>
                     </div>
                     <p>该仪器由{{parameters.agentName ? parameters.agentName : parameters.brandName}}授予{{parameters.authParty}}正品拥有</p>
                     <div class="pink-box sn-number">
@@ -86,9 +86,10 @@
         <div class="statementModel" v-show="showStatement" style="display: none">
             <div class="model"><i class="close" @click="closeStatementModel"></i>
                 <!-- 标题 -->
-                <div class="title">代理声明</div>
+                <div class="title">{{isCmComtent?'采美声明':'代理声明'}}</div>
                 <!-- 内容 -->
-                <div class="content">{{statementContent}}</div>
+                <div class="content" v-if="!isCmComtent">{{statementContent}}</div>
+                <div class="content" v-html="cmContent" else></div>
             </div>
         </div>
         <div class="float-zplm"><a target="_blank" href="https://www-b.caimei365.com/topic.html?type=6&name=%E6%AD%A3%E5%93%81%E8%81%94%E7%9B%9F"><img src="/img/quality/float-img.png"></a></div>