美博会弹窗新增

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

@@ -354,6 +354,9 @@ a{color:#333;text-decoration:none}
 .cm-entry .cm-icon-content{position:absolute;width:75.1vw;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
 .cm-entry .cm-icon-content img{width:100%}
 .cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:6.45vw;height:6.45vw;right:5vw;top:-8vw;background:url(/img/activity/pc_close.png) no-repeat center center;background-size:6.4vw}
+.cm-entry .cm-icon-content .btn{display: block;width: 10vw;height: 10vw;background: #666;position: absolute;right: 8vw;z-index: 999;cursor: pointer;opacity: 0;}
+.cm-entry .cm-icon-content .btn1{top: 24vw;}
+.cm-entry .cm-icon-content .btn2{top: 47.5vw;}
 .cm-footer{padding:4vw 0 2vw;background-color:#4a4f58;text-align:center;color:#fff;font-size:2.4vw;overflow:hidden}
 .cm-footer img{width:12vw}
 .banner-container{position:relative;width:100vw;height:45vw;background:pink;overflow:hidden}
@@ -698,6 +701,9 @@ a{color:#333;text-decoration:none}
 .cm-entry .cm-icon-content{width: 400px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
 .cm-entry .cm-icon-content img{display: block; width: 100%;}
 .cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:32px;height:32px;right:20px;top:-40px;background:url(/img/activity/pc_close.png) no-repeat center center}
+.cm-entry .cm-icon-content .btn{display: block;width: 60px;height: 60px;background: #666;position: absolute;right: 40px;z-index: 999;cursor: pointer;opacity: 0;}
+.cm-entry .cm-icon-content .btn1{top: 122px;}
+.cm-entry .cm-icon-content .btn2{top: 250px;}
 .banner-container{position:relative;height:480px;background:pink;overflow:hidden}
 .banner-container .banner{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
 .banner-container .cm-container{height:100%}

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

@@ -1,4 +1,61 @@
-.container {
+body {
+    background-color: f5f5f5;
+}
+
+.banner-container {
+    position: relative;
+    width: 100%;
+    height: 480px;
+    overflow: hidden;
+}
+
+.banner-container .cm-container {
+    position: absolute;
+    width: 1920px;
+    height: 480px;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+}
+
+.cm-content {
     width: 1200px;
-    margin: 0 auto;
+    margin: 0 auto 80px;
+    background: #fff;
+}
+
+.cm-content img {
+    width: 100%;
+}
+
+
+.cm-footer {
+    background: #4a4f58;
+    padding: 28px;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+}
+
+.cm-content-h5 {
+    display: none;
+}
+.cm-content-h5 img{
+    display: block;
+    width: 100%;
+}
+
+@media (max-width: 1200px) {
+    .cm-content {
+        width: 850px !important;
+    }
+}
+
+@media (max-width: 760px) {
+    .cm-content-h5 {
+        display: block;
+    }
+    .banner-container,.cm-content{
+        display: none !important;
+    }
 }

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

@@ -5,6 +5,7 @@ var activeApp = (function () {
         mixins: [swiperMixin, showMoreMixin],
         data: {
             isMobile: window.innerWidth < 992,
+            showCouponEntry: false,
             isActive: true,
             isRequest: true,
             isLoading: true,
@@ -263,6 +264,11 @@ var activeApp = (function () {
                 console.log('窗口resize事件注册完毕...');
             }
             ,
+            // 优惠券入口
+            handleToggleCoupon: function handleToggleCoupon(flag){
+                this.showCouponEntry = flag;
+                this.isActive = false;
+            },
             //    初始化用户信息
             initUserInfo: function initUserInfo() {
                 var userInfo = localStorage.getItem('userInfo');

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

@@ -90,7 +90,7 @@
                                                         {{pros.name}}
                                                     </div>
                                                     <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
-<!--                                                        <span class="cm-tag color2" v-if="pros.product.couponsLogo">优惠券</span>-->
+                                                        <!--                                                        <span class="cm-tag color2" v-if="pros.product.couponsLogo">优惠券</span>-->
                                                         <span class="cm-tag color3" v-if="pros.listType == 2">{{ pros.label }}</span>
                                                     </div>
                                                     <div class="cm-prodcut-price h24">
@@ -247,7 +247,7 @@
                                                     {{pros.name}}
                                                 </div>
                                                 <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
-<!--                                                     <span class="cm-tag color3" v-if="pros.product.couponsLogo">优惠券</span>-->
+                                                    <!--                                                     <span class="cm-tag color3" v-if="pros.product.couponsLogo">优惠券</span>-->
                                                     <span class="cm-tag color2" v-if="pros.listType == 2">{{ pros.label }}</span>
                                                 </div>
                                                 <div class="cm-prodcut-price h24">
@@ -756,7 +756,8 @@
                 <div class="cm-tooltop">
                     <div class="cm-tooltop-content cm-tooltop-2 cm-clearfix">
                         <div class="cm-item cm-left">
-                            <img width="108" height="108" src="https://static.caimei365.com/app/img/icon2/cm_wechat_01.png" alt=""/>
+                            <img width="108" height="108"
+                                 src="https://static.caimei365.com/app/img/icon2/cm_wechat_01.png" alt=""/>
                             <span>展会咨询微信</span>
                         </div>
                         <div class="cm-left line"></div>
@@ -773,14 +774,29 @@
     <div class="cm-entry" v-show="activityEntryVisiable && isActive">
         <div class="cm-icon-content">
             <span class="cm-close" @click="handleToggleActive(false)"></span>
-            <a id="entry" target="_blank" href="/user/coupon-collection.html"
-               onclick="_czc.push(['_trackEvent','云上美博会','点击','红包优惠券','1','entry'])">
+            <div @click="handleToggleCoupon(true)">
                 <img src="/img/activity/pc_entry.png" alt="" v-if="!isMobile"/>
                 <img src="/img/activity/h5_entry.png" alt="" v-else/>
+            </div>
+            <!--            <a id="entry" target="_blank" href="/user/coupon-collection.html"-->
+            <!--               onclick="_czc.push(['_trackEvent','云上美博会','点击','红包优惠券','1','entry'])">-->
+            <!--                -->
 
-            </a>
+            <!--            </a>-->
         </div>
     </div>
+
+    <div class="cm-entry" v-show="showCouponEntry">
+        <div class="cm-icon-content">
+            <a href="/product-6898.html" target="_blank"><span class="btn btn1"></span></a>
+            <a href="/product/couponExp.html" target="_blank"><span class="btn btn2"></span></a>
+            <span class="cm-close" @click="handleToggleCoupon(false)"></span>
+            <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>
+            <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>
+        </div>
+    </div>
+
+
     <!-- 返回顶部 -->
     <div class="cm-to-top" id="cm-to-top" v-show="showScrollTop">
         <span class="cm-icon-bar"></span>

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

@@ -4,8 +4,8 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>优惠券说明</title>
-    <link href="https://www-b.caimei365.com/css/activity/normalize.css" rel="stylesheet" type="text/css">
-    <link href="https://www-b.caimei365.com/css/activity/couponExp.css?v=20210831-100013" rel="stylesheet"
+    <link href="/css/activity/normalize.css" rel="stylesheet" type="text/css">
+    <link href="/css/activity/couponExp.css?v=20210831-100013" rel="stylesheet"
           type="text/css">
 </head>
 
@@ -19,22 +19,16 @@
             </div>
         </div>
     </div>
-    <div class="container">
-        <dl>
-            <dt>使用规则：</dt>
-            <dd>千元代金券礼包内含有11张价值1000元的平台通用券，分别是5张50元代金券（满500减50），3张100元代金券（满1000减100），3张150代金券（满1500减150）。</dd>
-            <dt>参与方式：</dt>
-            <dd>采美美博会期间，采美会员在采美平台购买任意商品满6000元即赠送价值1000元的代金券。</dd>
-            <dt>活动时间：</dt>
-            <dd>2021年9月4日至2021年9月8日</dd>
-            <dt>使用时间：</dt>
-            <dd>2021年9月4日至2021年12月8日</dd>
-            <dt>使用规则：</dt>
-            <dd>1.一个订单只能使用一张代金券。</dd>
-            <dd>2.代金券适用于采美任意平台商品。</dd>
-            <dt>注意事项：</dt>
-            <dd>1.赠送的代金券过期使用无效，请您在有效期内使用</dd>
-        </dl>
+    <div class="cm-content">
+        <img src="https://static.caimei365.com/app/img/icon2/couponExp-content.jpg" alt="">
+    </div>
+
+    <div class="cm-content-h5">
+        <img src="https://static.caimei365.com/app/img/icon2/couponExp-content-h5.jpg" alt="">
+    </div>
+
+    <div class="cm-footer">
+        ——采美信息技术有限有限公司提供技术支持——
     </div>
 </div>
 </body>