美博会

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

@@ -1,4 +1,9 @@
 @media screen and (min-width:768px) {
+#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
+#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#recommendBox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:28px;opacity:1;}
+.Beautyfair-page .swiper-wrapper{height: 612px ;overflow: hidden}
 .special .banner{width: 100%;height: 510px;}
 .special .banner img{width: 100%;height: 100%;}
 .special .content{width: 100%;height: auto;}
@@ -71,11 +76,7 @@
 .bg_icon{text-align: right}
 .bg_icon .icon{width: 50px;height: 50px;display: inline-block;}
 .bg_icon .icon:before{width: 50px;height: 50px;background-position: -187px -545px;cursor: pointer;}
-#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
-#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
-#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
-#recommendBox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:28px;opacity:1;}
-.Beautyfair-page .swiper-wrapper{height: 612px ;overflow: hidden}
+.special .content .left-box .Beautyfair-page .list.VIP a{cursor: auto}
 }
 @media screen and (max-width:768px) {
  	#recommendBox{width: calc(100%);height:120vw;overflow:hidden;position:relative;padding: 1vw}
@@ -84,7 +85,7 @@
     #recommendBox .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#E15616;border-radius:.3vw}
     #recommendBox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
 	.special .banner{width: 100%;height: 80vw;}
-	.special .banner img {width: 100%;height: 100%;}
+	/*.special .banner img {width: 100%;height: 100%;}*/
 	.special .content {width: 100%;height: auto;}
 	.special .content .right-box {width: 93.6vw;height: 32vw;padding: 3.2vw;}
 	.special .content .right-box .right-coupon{width: 100%;height: 100%;}

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

@@ -159,5 +159,5 @@ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appear
                 #f9c023 0%,
                 #f83600 100%);
         border-radius: 0px 10px 0px 0px;
-        margin-top: 6px;
+        margin-top: 8px;
 }

src/main/resources/static/css/user-center/dashboard.css

@@ -124,7 +124,7 @@ li{list-style:none}
     .user-content .user-main .new-list:before{content:'\25CF';color:#9aa5b5;position:absolute;left:0}
     .user-content .user-main .new-list .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#4a4f58}
     .user-content .user-main .new-list .time{color:#9aa5b5}
-    .user-content.coupon{width: 100%;height: 32vw}
+    .user-content.coupon{width: 100%;height: 32vw;background: none}
     .user-content.coupon .coupon_img{width: 100%;height: 100%;}
 
 

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

@@ -3,6 +3,8 @@ var beautytopic = new Vue({
     data:{
         listLoading:true,
          productList:[],
+         bannerPC:'/img/Beautyfair/banner-PC.jpg',
+         bannerH5:'/img/Beautyfair/banner-H5.jpg',
          Descriptors:[
              {descriptext:'光子嫩肤的黄金标准——美国高端技术品牌',shopId:1172},//科医人
              {descriptext:'专注于细胞治疗的西班牙高端技术品牌',shopId:''},//INDIBA
@@ -38,11 +40,11 @@ var beautytopic = new Vue({
             {PCimage:'/img/Beautyfair/exhibitor/pc/GMS.jpg',H5image:'/img/Beautyfair/exhibitor/h5/GMS.jpg',link:'/supplier/index.html?id=1193'}//GMS
          ],
          liveList:[//现场直击
-            {name:'采美LIVE带你体验美博会现场氛围',image:'/img/Beautyfair/live/CF.jpg',link:''},
-            {name:'探访美博会采美合作展位上',image:'/img/Beautyfair/live/CFS.jpg',link:''},
-            {name:'探访美博会采美合作展位下',image:'/img/Beautyfair/live/CFX.jpg',link:''},
-            {name:'探访VIP品牌INDIBA体验点',image:'/img/Beautyfair/live/INDIBA.jpg',link:''},
-            {name:'探访VIP品牌科医人体验点',image:'/img/Beautyfair/live/keyiren.jpg',link:''}
+            {name:'采美LIVE带你体验美博会现场氛围',image:'/img/Beautyfair/live/CF.jpg',link:'https://wx.vzan.com/live/tvchat-1161018290?shareuid=87139484&v=1614932881980'},
+            {name:'探访美博会采美合作展位上',image:'/img/Beautyfair/live/CFS.jpg',link:'https://wx.vzan.com/live/tvchat-37012015?shareuid=87139484&v=1614932922051'},
+            {name:'探访美博会采美合作展位下',image:'/img/Beautyfair/live/CFX.jpg',link:'https://wx.vzan.com/live/tvchat-1843812438?shareuid=87139484&v=1614932956164'},
+            {name:'探访VIP品牌INDIBA体验点',image:'/img/Beautyfair/live/INDIBA.jpg',link:'https://wx.vzan.com/live/tvchat-257628422?shareuid=87139484&v=1614932814028'},
+            {name:'探访VIP品牌科医人体验点',image:'/img/Beautyfair/live/keyiren.jpg',link:'https://wx.vzan.com/live/tvchat-1947728484?shareuid=87139484&v=1614932848613'}
          ],
          List:[
              {PCimage: '/img/Beautyfair/zwt/pc/GMS.jpg',H5image:'/img/Beautyfair/zwt/h5/GMS.jpg',ame:'GMS',num:'B区 12.2馆C31'},
@@ -101,7 +103,6 @@ var beautytopic = new Vue({
         ReturnNewFlootData:function(listA,listB){
 				var NewArray = [];
 				listA.forEach(function (item,index) {
-				    console.log(index)
                     for (var i=0;i < listB.length; i++){
                         if( item.shopId == listB[i].shopId ){
 							NewArray.push(Object.assign(item,listB[i]))
@@ -119,13 +120,13 @@ var beautytopic = new Vue({
         }
         ProductApi.GetbeautyProduct({userId:_this.userId},function (res) {
             if (res.code==0){
+                _this.listLoading = false;
                 _this.productList = res.data;
                 _this.productList = _this.ReturnNewFlootData(res.data,_this.Descriptors);
                setTimeout(function(){
                 // 图片懒加载
                 $("img[data-original]").lazyload();
             },500);
-             _this.listLoading = false;
             }
         });
 

src/main/resources/templates/index.html

@@ -897,7 +897,7 @@
         <div class="Popup" v-if="showflag" :class="showflag?'show':''">
             <div class="show_popup">
                 <div class="bg_icon" @click="closepopup"><i class="icon mIcon"></i></div>
-                <div class="bg_img" @click="zhuanti"><img src="/img/Beautyfair/youhui.png" v-if="isPC"><img src="/img/Beautyfair/youhui.h5.png" v-else></div>
+                <div class="bg_img" @click="zhuanti"><img src="/img/Beautyfair/youhui-pc.png" v-if="isPC"><img src="/img/Beautyfair/youhui.h5.png" v-else></div>
             </div>
         </div>
     </template>

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

@@ -11,18 +11,19 @@
 <template th:replace="components/header"></template>
 <!--美博会专题-->
     <div class="special" id="beautytopic">
-    		<div v-if="listLoading" class="loading">
+			<div v-if="listLoading" class="loading">
                 <img src="/img/base/loading.gif">
             </div>
             <template v-else>
-			<div class="banner"><img src="/img/Beautyfair/banner-PC.jpg" v-if="isPC"><img src="/img/Beautyfair/banner-H5.jpg" v-else/></div>
 			<div class="content">
+				<div class="banner"><img :src="bannerPC" v-if="isPC"><img :src="bannerH5" v-else/></div>
 				<div class="inner">
 				<div class="right-box">
 						<div class="right-coupon" @click="inletFn">
 							<a href="javascript:0;">
 								<div class="right_item_title" v-if="isPC">优惠券</div>
-								<img src="https://img-b.caimei365.com/group1/M00/03/1D/Cmgy61__7xeALuLSAAEzetR0-ac547.jpg" class="right_item_img"/>
+								<img src="/img/Beautyfair/inlet-pc.png" class="right_item_img" v-if="isPC"/>
+								<img src="/img/Beautyfair/inlet-h5.jpg" class="right_item_img" v-else/>
 							</a>
 						</div>
 					</div>
@@ -32,7 +33,7 @@
 								<h1>VIP品牌线下体验</h1>
 								<p>高新科技品牌尽在采美</p>
 							</div>
-							 <div class="list">
+							 <div class="list VIP">
 								 <a v-for="(item,index) in VipList" href="javascript:0" ><img :src="item.PCimage" v-if="isPC"/><img  :src="item.H5image" v-else/></a>
 							 </div>
 						</div>
@@ -54,7 +55,7 @@
 								<p>采美云逛展带你体验另样平行世界</p>
 							</div>
 							 <div class="list live">
-								 <a v-for="(item,index) in liveList" :href="item.link"  ><img  :src="item.image" /><div class="page_main_text"><p>{{item.name}}</p></div></a>
+								 <a v-for="(item,index) in liveList" :href="item.link" target="_blank" ><img  :src="item.image" /><div class="page_main_text"><p>{{item.name}}</p></div></a>
 							 </div>
 						</div>
 						<div class="Beautyfair-page">

src/main/resources/templates/user-center/Beautyfair.html

@@ -8,12 +8,13 @@
 </head>
 <style>
 @media screen and (min-width:768px) {
-     #coupon{margin-top: 50px;}
 
 }
 @media screen and (max-width:768px) {
     .container{width: 100%;height: 100%}
     .container img{width: 100%;height: 100%}
+    #coupon{position: relative}
+    .crumbs{position: absolute;top: 5%;left: 45%;color: #fff;font-size: 3.4vw;}
 }
 
 
@@ -24,6 +25,9 @@
 
 <!--优惠券-->
     <div id="coupon">
+        <div class="crumbs">
+            <span>{{name}}</span>
+        </div>
         <div class="navLayout"  v-cloak>
             <div class="wrap clear">
                  <!--左侧导航-->
@@ -43,7 +47,14 @@
 <script>
     var coupon = new Vue({
       el:'#coupon',
-      data:{},
+      data:{
+        name:''
+      },
+      mounted:function () {
+        if(globalUserData){
+            this.name = globalUserData.userName;
+        }
+      }
     })
 
 </script>

src/main/resources/templates/user-center/dashboard.html

@@ -102,7 +102,8 @@
                     </div>
                     <div class=" user-content coupon">
                         <a href="/user/beautyfair.html">
-                            <img src="https://img.caimei365.com/group1/M00/03/E7/Cmis21__8PWAIwVFAAFDC-LzNbM213.jpg" class="coupon_img"/>
+                            <img src="/img/Beautyfair/activty-pc.jpg" class="coupon_img" v-if="isPC"/>
+                            <img src="/img/Beautyfair/activty-h5.png" class="coupon_img" v-else>
                         </a>
 		            </div>
                     <div class="user-content">