首页优惠banner

src/main/resources/static/css/index/index_new.h5.css

@@ -100,9 +100,12 @@
   color: #999999;
   font-size: 2.8vw;
  }
- .section_coupundle{ width: 100%; height: 15vw; margin: 1vw 0;box-sizing: border-box;padding: 0 3vw;}
- .section_coupundle a{ width: 100%; height: 15vw;margin: 0 auto; display: block;}
- .section_coupundle a img{ width: 100%; height: 15vw;display: block;border-radius:1vw;overflow: hidden;}
+ .section_coupundle{ width: 100%; height: auto; margin: 1vw 0;box-sizing: border-box;padding: 0 3vw;}
+ .section_coupundle.hide{ display: none;}
+ .section_coupundle .section_coupundle_inner{ width:100%; height: auto; margin: 0 auto;position: relative;}
+ .section_coupundle .section_coupundle_close{ width:6vw;height: 6vw; background: url("/img/base/icon-close@2x.png") no-repeat;background-size: cover;position: absolute;right: -2vw;top: -2vw; }
+ .section_coupundle a{ width: 100%; height: auto;margin: 0 auto; display: block;}
+ .section_coupundle a img{ width: 100%; height: auto;display: block;border-radius:1vw;overflow: hidden;}
   /*公告*/
  #new-container{height: 8vw;background-color: #F5F5F5;padding:0 3.2vw 0 3.2vw;box-sizing: border-box;}
  #new-container .inner{width: 100%;height: 100%;background: url("/img/base/icon-newbgh5@2x.png");background-size: cover;box-sizing: border-box;padding:0 3vw;border-radius: 2vw;}

src/main/resources/static/css/index/index_new.pc.css

@@ -150,8 +150,12 @@ li{list-style:none;}
     border: 1px solid #FE452D;
 }
 .section_coupundle{ width: 100%; height: 100px; float: left;margin: 5px 0;}
+.section_coupundle.hide{ display: none;}
+.section_coupundle .section_coupundle_inner{ width:1184px; height: 100px; margin: 0 auto;position: relative;}
+.section_coupundle .section_coupundle_close{ width:30px;height: 30px;cursor: pointer;background: url("/img/base/icon-close@2x.png") no-repeat;background-size: cover;position: absolute;right: -16px;top: -15px; }
 .section_coupundle a{ width: 1184px; height: 100px;margin: 0 auto; display: block;}
 .section_coupundle a img{ width: 1184px; height: 100px;display: block;border-radius: 4px;overflow: hidden;}
+
 /*公告*/
 #new-container{height: 48px;background: url("/img/base/icon-newbg@2x.png");background-size: cover;}
 #new-container .new-list{float: left;}

src/main/resources/static/js/index.js

@@ -16,7 +16,8 @@ var homeData = new Vue({
         homePageFloor:[],//楼层
         quickoperaList: [], // 快捷运营入口列表
         dropScreenShow:false,
-        isCmPopup:false
+        isCmPopup:false,
+        isCloseCoupon:true
     },
     filters: {
 
@@ -407,6 +408,9 @@ var homeData = new Vue({
             if ($event.jumpLink) {
                 window.open($event.jumpLink)
             }
+        },
+        handleCloseClick(){// 关闭优惠券宣传banner
+            this.isCloseCoupon = false
         }
     },
     created: function() {

src/main/resources/templates/index.html

@@ -123,10 +123,17 @@
             </el-carousel-item>
         </el-carousel>
     </div>
-    <div class="section_coupundle">
-        <a href="/user/coupon-collection.html ">
-            <img src="https://m.360buyimg.com/babel/jfs/t20270402/241416/14/6455/32949/660b7f39Fdc8ca9dc/462908a310122c92.jpg" alt="" class="section_coupundle_img">
-        </a>
+    <div class="section_coupundle" :class="isCloseCoupon ? 'show' : 'hide'">
+        <div class="section_coupundle_inner">
+            <a href="/user/coupon-collection.html " v-if="isPC">
+                <img src="https://static.caimei365.com/app/img/bg/coupun_banner_pc@2x.jpg" alt="" class="section_coupundle_img">
+            </a>
+            <a href="/user/coupon-collection.html " v-else>
+                <img src="https://static.caimei365.com/app/img/bg/coupun_banner_h5@2x.jpg" alt="" class="section_coupundle_img">
+            </a>
+            <div class="section_coupundle_close" @click="handleCloseClick"></div>
+        </div>
+
     </div>
     <!--首页楼层主体数据-->
     <div class="section_container">