优惠券

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

@@ -26,7 +26,10 @@ li{list-style:none}
 .productBox .detailBox .row>em.p{font-weight:bold;}
 .productBox .detailBox .row>em.ser{color:#93979F;display:inline-block;width: 24%}
 .productBox .detailBox .row>em.ser:before{content:'\2713';display:inline-block;width:3.4vw;height:3.4vw;text-align:center;line-height:3.4vw;font-size:3.4vw;background:#E15616;border-radius:1.7vw;color:#FFF;margin-right:1.4vw}
-.productBox .detailBox .row .coupon-tags{display: inline-block;}
+.productBox .detailBox .row .coupon-tags{display: inline-block;box-sizing: border-box;line-height: 5vw;}
+.productBox .detailBox .row .couponTag{padding: 0 2vw;border: .27vw solid #f94b4b;background: #fff1eb;font-size: 2.8vw;float: left;height: 4.2vw;line-height: 4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 1vw;}
+.productBox .detailBox .row .coupon-tags>em{font-style:normal;display: inline-block;margin-right: 8px;}
+.productBox .detailBox .row .coupon-tags>em.couponTag-more{color: #4a4f58;cursor: pointer;}
 .productBox .detailBox .row .coupon-tags>em{font-style:normal;display: inline-block;}
 .productBox .detailBox .price .icon{display:inline-block;font-size:0;height:5vw;line-height:5vw;vertical-align:text-bottom;}
 .productBox .detailBox .price .icon:before{width:11vw;height:5vw;}
@@ -76,28 +79,34 @@ li{list-style:none}
 .tabCon .item div p.tl{line-height:8vw;text-align: left; font-weight: bold;}
 .productInfo .comment{color:#93979F;padding:5vw 0;    margin-right: 25px;position: relative}
 .productBox .detailBox .row .l{display: inline-block;min-width: 14.5vw;text-align-last: justify;vertical-align: top}
-.icon.comment:before{
-     width: 6.7vw;
-    height: 6.7vw;
-    background-position: 0px -33px;
-    position: absolute;
-    top:4vw;
-}
+.icon.comment:before{width: 6.7vw;height: 6.7vw;background-position: 0px -33px;position: absolute;top:4vw;}
 .comment-right{float: right}
 .noprice{color: #e15616;font-size: 3vw}
 .noprice .mIcon::before{width: 5vw;height: 4vw;background-position: -48.2vw -69.2vw;position: relative;top: 1vw}
-.Beautyfair .tag{
-        width: 11.3vw;
-        height: 4.3vw;
-        line-height: 4.3vw;
-        font-size: 2.8vw;
-        float: left;
-        margin-right: 1.3vw;
-        text-align: center;
-        color: #FFFFFF !important;
-        background-image: linear-gradient(270deg,
-                #f9c023 0%,
-                #f83600 100%);
-        border-radius: 0px 2.7vw 0px 0px;
-        margin-top: 1vw;
-}
+.Beautyfair .tag{width: 11.3vw;height: 4.3vw;line-height: 4.3vw;font-size: 2.8vw;float: left;margin-right: 1.3vw;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 2.7vw 0px 0px;margin-top: 1vw;}
+/*优惠券弹窗*/
+.coupon-popup{width:100%;height:100%;position:fixed;bottom:0;left:0;background-color:rgba(0,0,0,.4);z-index: 99999;}
+.coupon-popup .model-content{width:100%;height:106.7vw;position:absolute;bottom:0;left:0;right:0;bottom:0;background-color:#FFFFFF;margin:auto;border-radius:2px;box-sizing:border-box}
+.coupon-popup .title{width:100%;height:11vw;float:left;box-sizing:border-box;position:relative;padding:2.3vw 0;background-color: #f8f8f8;}
+.coupon-popup .title p{font-size:3.4vw;line-height:6.4vw;text-align:center;color:#333333;font-weight: bold;}
+.coupon-popup .title .icon{width:6.4vw;height:6.4vw;display:block;position:absolute;right:0;top:0;cursor:pointer;padding:10px}
+.coupon-popup .title .icon:before{width:6.4vw;height:6.4vw;background-position:-33.6vw 0;}
+.coupon-popup .coupon-popup-main{width:100%;height:95.7vw;box-sizing:border-box;padding:0 3.5vw;float:left;}
+.coupon-popup .coupon-popup-tabs{width: 100%;height: 11vw;box-sizing: border-box;border-bottom: 1px solid #efefef;float: left;}
+.coupon-popup .popup-tabs-cell{width: 50%; float: left;box-sizing: border-box;padding: 0 18.1vw;}
+.coupon-popup .popup-tabs-cell span{display: block;line-height: 11vw;height: 11vw;font-size: 3.4vw;color: #333;cursor: pointer;box-sizing: border-box;text-align: center;}
+.coupon-popup .popup-tabs-cell.active span{color: #E15621;border-bottom: 1px solid #E15621;}
+.coupon-popup .coupon-popup-content{width:100%;height:84.7vw;box-sizing:border-box;padding: 4vw 0;float: left;}
+.coupon-popup .coupon-popup-scroll{width:100%;height:100%;box-sizing:border-box;float:left;overflow:hidden;overflow-y:auto}
+.coupon-popup .coupon-list-cell{width: 93.1vw;height: 33vw;float: left;margin: 0 0 2.4vw 0;position: relative;border-radius: 1vw;}
+.coupon-popup .coupon-list-cell .coupon-list-le{width: 77.6vw;height: 33vw;float: left;box-sizing: border-box;padding: 6.8vw 3.7vw 3.3vw 3.7vw;}
+.coupon-popup .coupon-list-cell .coupon-list-money{width: 100%;height:10vw;line-height: 10vw;color: #f94b4b;font-size: 3vw;text-align: left; }
+.coupon-popup .coupon-list-cell .coupon-list-money .maxMoney{font-size: 7.2vw;margin-right: 2.4vw;}
+.coupon-popup .coupon-list-cell .coupon-list-money.none, .coupon-list-cell .coupon-list-name.none, .coupon-list-cell .coupon-list-time.none{color: #FFF;}
+.coupon-popup .coupon-list-cell .coupon-list-name{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #333333;font-size: 3.4vw;text-align: left;margin-top: 4vw;}
+.coupon-popup .coupon-list-cell .coupon-list-time{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #999999;font-size: 2.4vw;text-align: left;}
+.coupon-popup .coupon-list-cell .coupon-list-ri{width: 15.5vw;height: 33vw;float: left;box-sizing: border-box;padding: 11.8vw 6vw;font-size:3.4vw;color: #FFF;cursor: pointer;}
+.coupon-popup .coupon-list-cell .coupon-list-ri.none{padding: 9.5vw 6vw;}
+.coupon-popup .coupon-list-cell .coupon-tags{height: 4.8vw;line-height: 4.8vw;text-align: center;background-color: #f94b4b;color: #FFF;border-radius: 1.6vw 0 1.6vw 0;position: absolute;top: 0;left: 0;padding: 0 1.5vw;font-size: 3vw;}
+.coupon-popup .coupon-list-cell{background: url("/img/account/icon-coupon-uesb@h52x.png") no-repeat;background-size: cover;}
+

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

@@ -150,18 +150,28 @@ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appear
 .WechatBg{background: url(/img/base/Wechat.bg.png) no-repeat left top;width: 174px;height: 218px;position: absolute;right: -150px;top: -20px;opacity: 0}
 .WechatBg img{margin: 18px auto 10px;width: 132px;height: 132px;}
 .WechatBg p{font-size: 12px;text-align: center;width: 120px;margin: auto;}
-.Beautyfair .tag{
-        width: 44px;
-        height: 18px;
-        line-height: 18px;
-        font-size: 12px;
-        float: left;
-        margin-right: 5px;
-        text-align: center;
-        color: #FFFFFF !important;
-        background-image: linear-gradient(270deg,
-                #f9c023 0%,
-                #f83600 100%);
-        border-radius: 0px 10px 0px 0px;
-        margin-top: 8px;
-}
+.Beautyfair .tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;float: left;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: 8px;}
+/*优惠券弹窗*/
+.coupon-popup{width:100%;height:100%;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.4);z-index: 99999;}
+.coupon-popup .model-content{width:540px;height:492px;position:absolute;top:0;left:0;right:0;bottom:0;background-color:#FFFFFF;margin:auto;border-radius:2px;box-sizing:border-box}
+.coupon-popup .title{width:100%;height:50px;float:left;box-sizing:border-box;position:relative;padding:0 24px;background-color: #f8f8f8;}
+.coupon-popup .title p{font-size:16px;line-height:50px;text-align:left;color:#333333;float:left;font-weight: bold;}
+.coupon-popup .title .icon{width:16px;height:16px;display:block;position:absolute;right:0;top:0;cursor:pointer;padding:10px}
+.coupon-popup .title .icon:before{width:16px;height:16px;background-position:-318px 0}
+.coupon-popup .coupon-popup-main{width:100%;height:442px;box-sizing:border-box;padding:0 40px;float:left;}
+.coupon-popup .coupon-popup-tabs{width: 100%;height: 57px;box-sizing: border-box;border-bottom: 1px solid #efefef;float: left;}
+.coupon-popup .popup-tabs-cell{width: 230px; float: left;box-sizing: border-box;padding: 0 91px;}
+.coupon-popup .popup-tabs-cell span{display: block;line-height: 57px;height: 57px;font-size: 16px;color: #333;cursor: pointer;box-sizing: border-box;text-align: center;}
+.coupon-popup .popup-tabs-cell.active span{color: #E15621;border-bottom: 1px solid #E15621;}
+.coupon-popup .coupon-popup-content{width:100%;height:385px;box-sizing:border-box;padding: 16px 0;float: left;}
+.coupon-popup .coupon-popup-scroll{width:100%;height:100%;box-sizing:border-box;padding:0 45px;float:left;overflow:hidden;overflow-y:auto}
+.coupon-popup .coupon-list-cell{width: 369px;height: 148px;float: left;margin-bottom:24px;position: relative;background: url("/img/account/icon-coupon-uesb@2x.png") no-repeat;background-size: cover;}
+.coupon-popup .coupon-list-cell .coupon-list-le{width: 299px;height: 148px;float: left;box-sizing: border-box;padding: 24px 14px 12px 14px;}
+.coupon-popup .coupon-list-cell .coupon-list-money{width: 100%;height: 56px;line-height: 56px;color: #f94b4b;font-size: 14px;text-align: left;}
+.coupon-popup .coupon-list-cell .coupon-list-money .maxMoney{font-size: 40px;margin-right: 8px;}
+.coupon-popup .coupon-list-cell .coupon-list-name{width: 100%;height: 22px;line-height: 22px;color: #333333;font-size: 14px;text-align: left;margin-top: 13px;}
+.coupon-popup .coupon-list-cell .coupon-list-time{width: 100%;height: 22px;line-height: 22px;color: #999999;font-size: 12px;text-align: left;}
+.coupon-popup .coupon-list-cell .coupon-list-ri{width: 70px;height: 148px;float: left;box-sizing: border-box;padding: 54px 27px;font-size: 16px;color: #FFF;cursor: pointer;}
+.coupon-popup .coupon-list-cell .coupon-list-ri.none{padding: 45px 27px;}
+.coupon-popup .coupon-list-cell .coupon-tags{height: 24px;line-height: 24px;text-align: center;border-radius: 8px 0 8px 0;position: absolute;top: 0;left: 0;padding: 0 10px;background-color: #f94b4b;color: #FFF;}
+

src/main/resources/static/css/shopping/shopping.css

@@ -83,9 +83,12 @@ li{list-style:none}
     .summaryWrap .summary .left,.summaryWrap .summary .right{display:inline}
     .summaryWrap .summary .left .item:first-child{float:left}
     .summaryWrap .summary .item{display:inline-block;margin-right:32px;position:relative}
+    .summaryWrap .summary .item.priceTotal{float: right;margin-right: 0;}
+    .summaryWrap .summary .item p.priceTotal-t{height: 32px;font-size: 16px;display: inline-block;width: 100%;float: left;text-align: left;line-height: 30px;}
+    .summaryWrap .summary .item p.priceTotal-b{height: 18px;font-size: 14px;display: inline-block;width: 100%;float: left;text-align: left;line-height: 18px;}
     .summaryWrap .summary .check{width:14px;height:14px;line-height:14px;vertical-align:top;margin:18px 16px 0 16px}
     .summaryWrap .summary .delete{margin-left:16px;color:#f55c5c}
-    .summaryWrap .summary .submit{display:inline-block;width:232px;height:50px;line-height:50px;text-align:center;background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);border-radius:2px;color:#FFF}
+    .summaryWrap .summary .submit{display:inline-block;width:232px;height:50px;line-height:50px;text-align:center;background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);border-radius:2px;color:#FFF;float: right;}
     .summaryWrap .summary .submit.dis{background:#999;}
     .summaryWrap.fixed{position:fixed;bottom:0;left:0;margin:0;z-index:99999;box-shadow:20px 20px 102px rgba(0,0,0,0.1)}
     .summaryWrap .summary .back{color:#f55c5c}
@@ -237,9 +240,12 @@ li{list-style:none}
     .summaryWrap .summary em{font-style:normal}
     .summaryWrap .summary .left{height:9.4vw;line-height:9.4vw}
     .summaryWrap .summary .right{height:11.2vw;line-height:11.2vw}
+    .summaryWrap .summary .item.priceTotal{float: left;margin-left: 11vw;}
+    .summaryWrap .summary .item p.priceTotal-t{height: 6.6vw;font-size: 3.4vw;display: inline-block;width: 100%;float: left;text-align: left;line-height:6.6vw;}
+    .summaryWrap .summary .item p.priceTotal-b{height: 4.6vw;font-size: 3vw;display: inline-block;width: 100%;float: left;text-align: left;line-height: 4.6vw;}
     .summaryWrap .summary .check{width:3.5vw;height:3.5vw;line-height:3.5vw;vertical-align:top;margin:3vw 3vw 0 3.3vw}
     .summaryWrap .summary .delete{width:12vw;height:6vw;line-height:6vw;display:inline-block;text-align:center;color:#f55c5c}
-    .summaryWrap .summary .submit{display:inline-block;width:30.4vw;height:11.2vw;line-height:11.2vw;text-align:center;background-color:#e15616;border-radius:2px;color:#FFF}
+    .summaryWrap .summary .submit{display:inline-block;width:30.4vw;height:11.2vw;line-height:11.2vw;text-align:center;background-color:#e15616;border-radius:2px;color:#FFF;float: right;}
     .summaryWrap.fixed{position:fixed;bottom:0;left:0;margin:0;z-index:99999;box-shadow:20px 20px 102px rgba(0,0,0,0.1)}
     .priceTotal{position:relative;text-align:right;margin-left:6.8vw;height:10.6vw;line-height:18vw;display:inline-block;}
     .priceTotal em{color:#f55c5c}

src/main/resources/static/css/user-center/account/coupon-collection.css

@@ -4,7 +4,6 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
-    /*采美豆右侧*/
     .coupon-title{width: 1184px;margin: 0 auto;box-sizing: border-box;height: 60px;padding: 0 24px;padding-top: 16px;line-height: 44px;}
     .coupon-title .coupon-name{float: left;font-size: 16px;color: #4a4f58;font-weight: bold;}
     .coupon-title .coupon-name-use{float: right;font-size: 14px;color: #627386;cursor: pointer;}
@@ -24,35 +23,28 @@ li{list-style:none}
     .coupon-list-cell .coupon-tags{height: 24px;line-height: 24px;text-align: center;border-radius: 8px 0 8px 0;position: absolute;top: 0;left: 0;padding: 0 10px;background-color: #f94b4b;color: #FFF;}
     .empty{width: 100%;float: left;}
     .empty img{width: 180px;height: 180px;}
-
 }
 
 /**
 * 移动端
 */
 @media screen and (max-width:768px){
-    .beans-header{width:100%;height:28vw;box-sizing:border-box;padding:4vw 8vw;background:url("/img/account/icon-beans-bg.png")no-repeat;background-size: cover;}
-    .beans-header-l{float: left;line-height: 10vw;color: #FFFFFF;font-size:3.2vw;}
-    .beans-header-l span{display: inline-block;width: 100%;height: 10vw;float: left;}
-    .beans-header-l span.big{font-size: 7.2vw;font-weight: bold;}
-    .beans-header-r{float: right;line-height:20vw;}
-    .beans-header-r a{color: #FFFFFF;font-size: 3vw;}
-    .beans-header-r a .icon{width:4vw;height:4vw;display: block;float: right;margin-left: 1vw;}
-    .beans-header-r a .icon:before{width:4vw;height:4vw;background-position:-44.6vw -78.3vw;}
-    .beans-container{width: 100%;min-height: 50vw;background-color: #FFFFFF;margin-top:2vw;}
-    .coupon-content-tabs{width: 100%;height: auto;box-sizing: border-box;padding:0 3.4vw;}
-    .coupon-content-tabs .tabs-main{width: 100%;height:100%;border-bottom: 1px solid #e2e7ef;box-sizing: border-box;padding-top: 6.4vw;position: relative;float: left;}
-    .coupon-content-tabs .time-tabs{width:100%;height:9.6vw;float: left;margin-top: 3.6vw;}
-    .coupon-content-tabs .time-tabs-cell{width: 33.3%;height: 100%;float: left;text-align: center;font-size: 4vw;color: #22272e;line-height: 9.6vw;display: block;}
-    .coupon-content-tabs .time-tabs-cell.active{color: #E15616;font-weight: bold;}
-
-    .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.4vw;float: left;}
-    .beans-content-list .beans-list-cell{width: 100%;height: 10.7vw;box-sizing: border-box;float: left;margin-bottom: 6.4vw;}
-    .beans-content-list .list-cell-left{width: 50%;height: 10.7vw;float: left;text-align: left;}
-    .beans-content-list p{width: 100%;height: 4.7vw;float: left;line-height:  4.7vw;font-size: 3.6vw;color: #22272e;margin-bottom: 2vw;}
-    .beans-content-list p.none{color: #627386;font-size: 3.2vw;line-height: 4.2vw;}
-    .beans-content-list p.blod{font-weight: bold;line-height: 4.2vw;}
-    .beans-content-list .list-cell-right{width: 50%;height:10.7vw;float: right;text-align: right;}
+    .coupon-title{width: 100%;margin: 0 auto;box-sizing: border-box;height:10.8vw;padding: 0 3.4vw;line-height: 10.8vw;}
+    .coupon-title .coupon-name{float: left;font-size: 3.7vw;color: #4a4f58;font-weight: bold;}
+    .coupon-title .coupon-name-use{float: right;font-size: 3vw;color: #627386;cursor: pointer;}
+    .coupon-container{width: 100%;min-height: 500px;background-color: #FFFFFF;}
+    .coupon-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.45vw;}
+    .coupon-list-cell{width: 93.1vw;height: 33vw;float: left;margin: 0 0 2.4vw 0;position: relative;border-radius: 1vw;}
+    .coupon-list-cell .coupon-list-le{width: 77.6vw;height: 33vw;float: left;box-sizing: border-box;padding: 6.8vw 3.7vw 3.3vw 3.7vw;}
+    .coupon-list-cell .coupon-list-money{width: 100%;height:10vw;line-height: 10vw;color: #f94b4b;font-size: 3vw;text-align: left; }
+    .coupon-list-cell .coupon-list-money .maxMoney{font-size: 7.2vw;margin-right: 2.4vw;}
+    .coupon-list-cell .coupon-list-money.none, .coupon-list-cell .coupon-list-name.none, .coupon-list-cell .coupon-list-time.none{color: #FFF;}
+    .coupon-list-cell .coupon-list-name{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #333333;font-size: 3.4vw;text-align: left;margin-top: 4vw;}
+    .coupon-list-cell .coupon-list-time{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #999999;font-size: 2.4vw;text-align: left;}
+    .coupon-list-cell .coupon-list-ri{width: 15.5vw;height: 33vw;float: left;box-sizing: border-box;padding: 11.8vw 6vw;font-size:3.4vw;color: #FFF;cursor: pointer;}
+    .coupon-list-cell .coupon-list-ri.none{padding: 9.5vw 6vw;}
+    .coupon-list-cell .coupon-tags{height: 4.8vw;line-height: 4.8vw;text-align: center;background-color: #f94b4b;color: #FFF;border-radius: 1.6vw 0 1.6vw 0;position: absolute;top: 0;left: 0;padding: 0 1.5vw;font-size: 3vw;}
+    .coupon-list-cell{background: url("/img/account/icon-coupon-uesb@h52x.png") no-repeat;background-size: cover;}
     .empty{width: 100%;float: left;}
     .empty img{width: 36vw;height: 36vw;}
 

src/main/resources/static/css/user-center/account/coupon-exchange.css

@@ -22,25 +22,13 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
-    .beans-header{width:100%;height:28vw;box-sizing:border-box;padding:4vw 8vw;background:url("/img/account/icon-beans-bg.png")no-repeat;background-size: cover;}
-    .beans-header-l{float: left;line-height: 10vw;color: #FFFFFF;font-size:3.2vw;}
-    .beans-header-l span{display: inline-block;width: 100%;height: 10vw;float: left;}
-    .beans-header-l span.big{font-size: 7.2vw;font-weight: bold;}
-    .beans-header-r{float: right;line-height:20vw;}
-    .beans-header-r a{color: #FFFFFF;font-size: 3vw;}
-    .beans-header-r a .icon{width:4vw;height:4vw;display: block;float: right;margin-left: 1vw;}
-    .beans-header-r a .icon:before{width:4vw;height:4vw;background-position:-44.6vw -78.3vw;}
-    .beans-container{width: 100%;min-height: 50vw;background-color: #FFFFFF;margin-top:2vw;}
-
-    .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.4vw;float: left;}
-    .beans-content-list .beans-list-cell{width: 100%;height: 10.7vw;box-sizing: border-box;float: left;margin-bottom: 6.4vw;}
-    .beans-content-list .list-cell-left{width: 50%;height: 10.7vw;float: left;text-align: left;}
-    .beans-content-list p{width: 100%;height: 4.7vw;float: left;line-height:  4.7vw;font-size: 3.6vw;color: #22272e;margin-bottom: 2vw;}
-    .beans-content-list p.none{color: #627386;font-size: 3.2vw;line-height: 4.2vw;}
-    .beans-content-list p.blod{font-weight: bold;line-height: 4.2vw;}
-    .beans-content-list .list-cell-right{width: 50%;height:10.7vw;float: right;text-align: right;}
-    .empty{width: 100%;float: left;}
-    .empty img{width: 36vw;height: 36vw;}
-
+    .coupon-container{width: 100%;min-height: 40vw;background-color: #FFFFFF;}
+    .coupon-content{width: 100%;height: auto;box-sizing: border-box;padding:3.3vw}
+    .coupon-input{width: 100%;height: 11.2vw;box-sizing: border-box;margin-bottom: 8.8vw;}
+    .coupon-input .input{width: 69.4vw;height: 11.2vw;box-sizing: border-box;border: 1px solid #b8bfca;padding: 0 3.6vw;border-radius: 0.5vw;}
+    .coupon-input .coupon-btn{width: 21.4vw;height:11.2vw;box-sizing: border-box;border-radius: 0.5vw;line-height: 11.2vw;display: block;font-size: 3vw;text-align: center;color: #FFF;background: #E15621;float: right;}
+    .coupon-text{width: 100%;height: auto;color: #4a4f58;}
+    .coupon-text h1{width: 100%;height: auto;font-size: 3.4vw;line-height: 7.2vw;text-align: left;font-weight: normal;}
+    .coupon-text p{width: 100%;height: auto;font-size: 2.4vw;line-height:5vw;text-align: left;}
 }
 

src/main/resources/static/css/user-center/account/coupon.css

@@ -41,28 +41,30 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
-    .beans-header{width:100%;height:28vw;box-sizing:border-box;padding:4vw 8vw;background:url("/img/account/icon-beans-bg.png")no-repeat;background-size: cover;}
-    .beans-header-l{float: left;line-height: 10vw;color: #FFFFFF;font-size:3.2vw;}
-    .beans-header-l span{display: inline-block;width: 100%;height: 10vw;float: left;}
-    .beans-header-l span.big{font-size: 7.2vw;font-weight: bold;}
-    .beans-header-r{float: right;line-height:20vw;}
-    .beans-header-r a{color: #FFFFFF;font-size: 3vw;}
-    .beans-header-r a .icon{width:4vw;height:4vw;display: block;float: right;margin-left: 1vw;}
-    .beans-header-r a .icon:before{width:4vw;height:4vw;background-position:-44.6vw -78.3vw;}
-    .beans-container{width: 100%;min-height: 50vw;background-color: #FFFFFF;margin-top:2vw;}
-    .coupon-content-tabs{width: 100%;height: auto;box-sizing: border-box;padding:0 3.4vw;}
-    .coupon-content-tabs .tabs-main{width: 100%;height:100%;border-bottom: 1px solid #e2e7ef;box-sizing: border-box;padding-top: 6.4vw;position: relative;float: left;}
-    .coupon-content-tabs .time-tabs{width:100%;height:9.6vw;float: left;margin-top: 3.6vw;}
-    .coupon-content-tabs .time-tabs-cell{width: 33.3%;height: 100%;float: left;text-align: center;font-size: 4vw;color: #22272e;line-height: 9.6vw;display: block;}
-    .coupon-content-tabs .time-tabs-cell.active{color: #E15616;font-weight: bold;}
-
-    .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.4vw;float: left;}
-    .beans-content-list .beans-list-cell{width: 100%;height: 10.7vw;box-sizing: border-box;float: left;margin-bottom: 6.4vw;}
-    .beans-content-list .list-cell-left{width: 50%;height: 10.7vw;float: left;text-align: left;}
-    .beans-content-list p{width: 100%;height: 4.7vw;float: left;line-height:  4.7vw;font-size: 3.6vw;color: #22272e;margin-bottom: 2vw;}
-    .beans-content-list p.none{color: #627386;font-size: 3.2vw;line-height: 4.2vw;}
-    .beans-content-list p.blod{font-weight: bold;line-height: 4.2vw;}
-    .beans-content-list .list-cell-right{width: 50%;height:10.7vw;float: right;text-align: right;}
+    .coupon-container{width: 100%;min-height: 50vw;background-color: #FFFFFF;margin-top:2vw;}
+    .coupon-content-tabs{width: 100%;height: 11.7vw;box-sizing: border-box;padding:4.2vw 0 0 0;}
+    .coupon-content-tabs .tabs-main{width: 100%;height:100%;border-bottom: 1px solid #e2e7ef;box-sizing: border-box;position: relative;}
+    .coupon-content-tabs .time-tabs{width: 100%;height:7.5vw;float: left;box-sizing: border-box;padding: 0 2.4vw;}
+    .coupon-content-tabs .time-tabs-cell{width: 33.3%;height: 100%;float: left;text-align: center;font-size: 4vw;color: #22272e;line-height:7.5vw;display: block;}
+    .coupon-content-tabs .time-tabs-cell.active{color: #E15616;border-bottom: 1px solid #E15621;box-sizing: border-box;}
+    .coupon-content-tabs .time-btn{float: right;}
+    .coupon-content-tabs .time-btn a{display: inline-block;float: left;text-align: center;font-size: 14px;color: #627386;line-height: 46px;margin-left: 24px;}
+    .coupon-content-tabs .time-btn a:hover{color: #E15621;}
+    .coupon-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.45vw;}
+    .coupon-list-cell{width: 93.1vw;height: 33vw;float: left;margin: 0 0 2.4vw 0;position: relative;border-radius: 1vw;}
+    .coupon-list-cell .coupon-list-le{width: 77.6vw;height: 33vw;float: left;box-sizing: border-box;padding: 6.8vw 3.7vw 3.3vw 3.7vw;}
+    .coupon-list-cell .coupon-list-money{width: 100%;height:10vw;line-height: 10vw;color: #f94b4b;font-size: 3vw;text-align: left; }
+    .coupon-list-cell .coupon-list-money .maxMoney{font-size: 7.2vw;margin-right: 2.4vw;}
+    .coupon-list-cell .coupon-list-money.none, .coupon-list-cell .coupon-list-name.none, .coupon-list-cell .coupon-list-time.none{color: #FFF;}
+    .coupon-list-cell .coupon-list-name{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #333333;font-size: 3.4vw;text-align: left;margin-top: 4vw;}
+    .coupon-list-cell .coupon-list-time{width: 100%;height: 4.8vw;line-height: 4.8vw;color: #999999;font-size: 2.4vw;text-align: left;}
+    .coupon-list-cell .coupon-list-ri{width: 15.5vw;height: 33vw;float: left;box-sizing: border-box;padding: 9.5vw 6vw;font-size:3.4vw;color: #FFF;cursor: pointer;}
+    .coupon-list-cell .coupon-list-ri.none{cursor: default;}
+    .coupon-list-cell .coupon-tags{height: 4.8vw;line-height: 4.8vw;text-align: center;border-radius: 1.6vw 0 1.6vw 0;position: absolute;top: 0;left: 0;padding: 0 1.5vw;font-size: 3vw;}
+    .coupon-list-cell .coupon-tags.used{background-color: #f94b4b;color: #FFF;}
+    .coupon-list-cell .coupon-tags.none{background-color: #dbdbdb;color: #FFF;}
+    .coupon-list-cell.used{background: url("/img/account/icon-coupon-uesb@h52x.png") no-repeat;background-size: cover;}
+    .coupon-list-cell.none{background: url("/img/account/icon-coupon-none@h52x.png") no-repeat;background-size: cover;}
     .empty{width: 100%;float: left;}
     .empty img{width: 36vw;height: 36vw;}
 

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

@@ -36,7 +36,125 @@ var productDetail = new Vue({
         productTypeName:"",
         beautyActFlag:'',
         trainingMethodText:'',
-        trainingType:''
+        trainingType:'',
+        isShowPopup:true,
+        currentTab:0,
+        dataList:[
+            {
+                maxMoney:5000,
+                minMoney:1000,
+                couponType:1,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+            },
+            {
+                maxMoney:2000,
+                minMoney:200,
+                couponType:2,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:2,
+                couponBtnType:0,
+                status:1,
+            },
+            {
+                maxMoney:4000,
+                minMoney:800,
+                couponType:3,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:3,
+                couponBtnType:0,
+                status:2,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:0,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:1,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:4,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:1,
+                couponBtnType:0,
+                status:2,
+            },
+            {
+                maxMoney:6000,
+                minMoney:1000,
+                couponType:5,
+                couponTime:'2021.06.28~2021.07.28',
+                couponText:'华熙生物技术有限公司',
+                useType:2,
+                couponBtnType:0,
+                status:1,
+            }
+        ],
+    },
+    filters: {
+        TypeFormat:function(value) {
+            switch (value) {
+                case 1:
+                    return  '活动券';
+                    break;
+                case 2:
+                    return  '品类券';
+                    break;
+                case 3:
+                    return  '店铺券';
+                    break;
+                case 4:
+                    return  '专享券';
+                    break;
+                case 5:
+                    return  '新用户券';
+                    break;
+            }
+        },
+        TypeFormatText:function(value) {
+            switch (value) {
+                case 1:
+                    return  '全商城商品通用';
+                    break;
+                case 2:
+                    return  '仅限购买仪器类商品';
+                    break;
+                case 3:
+                    return  '仅可购买店铺';
+                    break;
+            }
+        }
     },
     computed: {},
     methods: {
@@ -49,12 +167,12 @@ var productDetail = new Vue({
                     setTimeout(function(){
                         if (isPC) {
                             var magnifier = new ImageMagnifier(
-                                '#imgShown .smallImage li'
-                                ,'#imgShown .bigImage'
-                                ,'#imgShown .zoomImage'
-                                ,'#imgShown .mask'
-                                ,'#imgShown .zoom'
-                                ,"on"
+                                '#imgShown .smallImage li',
+                                '#imgShown .bigImage',
+                                '#imgShown .zoomImage',
+                                '#imgShown .mask',
+                                '#imgShown .zoom',
+                                "on"
                             ).init();
                         } else {
                             var swiper = new Swiper('#swiperImage', {
@@ -201,6 +319,10 @@ var productDetail = new Vue({
         toUpgrade: function() {
             setBeforeUrl();
             window.location.href = '/user/setting/upgrade.html';
+        },
+        queryCouponTabs:function (value){
+            var _self = this;
+            _self.currentTab = value;
         },
 		addShopCart: function(){ //加入购物车
 		    var _self = this;
@@ -261,6 +383,14 @@ var productDetail = new Vue({
                 }
             });
         },
+        showPopup:function(){// 显示优惠券弹窗
+            var _self = this;
+            _self.isShowPopup = true;
+        },
+        hidePopup:function(){// 隐藏优惠券弹窗
+            var _self = this;
+            _self.isShowPopup = false;
+        },
         detailsClicktab:function(index){
             var _self = this;
             _self.tabsIndex = index;

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

@@ -144,8 +144,7 @@
                         <span class="coupon-tags">
                             <em class="couponTag">满50000减400</em>
                             <em class="couponTag">满50000减400</em>
-                            <em class="couponTag">满50000减400</em>
-                            <em class="couponTag-more">更多></em>
+                            <em class="couponTag-more" @click="showPopup">更多></em>
                         </span>
                     </div>
                     <div th:if="not${#strings.isEmpty(product.brandName)}" class="row"><span class="l">品牌</span><i>：</i><em th:text="*{brandName}"></em></div>
@@ -300,6 +299,40 @@
                 </div>
             </div>
         </div>
+        <!--优惠券弹窗-->
+        <div class="coupon-popup" v-show="isShowPopup">
+            <div class="model-content">
+                <div class="title"><p>优惠券</p><i class="icon mIcon" @click="hidePopup"></i></div>
+                <div class="coupon-popup-main">
+                    <div class="coupon-popup-tabs">
+                        <div class="popup-tabs-cell" :class="currentTab == 0 ? 'active' : ''" @click="queryCouponTabs(0)"><span>未领取</span></div>
+                        <div class="popup-tabs-cell" :class="currentTab == 1 ? 'active' : ''" @click="queryCouponTabs(1)"><span>已领取</span></div>
+                    </div>
+                    <div class="coupon-popup-content">
+                        <div class="coupon-popup-scroll">
+                            <div class="coupon-list-cell" v-for="(coupon, index) in dataList" :key="index">
+                                <div class="coupon-list-le">
+                                    <div class="coupon-list-money">
+                                        <p>￥<span class="maxMoney">{{ coupon.maxMoney }}</span><span class="minMoney">满{{ coupon.minMoney }}可用</span></p>
+                                    </div>
+                                    <div class="coupon-list-name">
+                                        <p v-if="coupon.useType == 1">{{ coupon.useType | TypeFormatText }}</p>
+                                        <p v-if="coupon.useType == 2">{{ coupon.useType | TypeFormatText }}</p>
+                                        <p v-if="coupon.useType == 3">{{ coupon.useType | TypeFormatText }}{{ coupon.couponText }}的商品</p>
+                                    </div>
+                                    <div class="coupon-list-time">{{ coupon.couponTime }}</div>
+                                </div>
+                                <div class="coupon-list-ri" :class="coupon.couponBtnType == 1 ? 'none' : ''">
+                                    <span v-if="coupon.couponBtnType == 0" @click="receiveCoupon(coupon)">领取</span>
+                                    <span v-if="coupon.couponBtnType == 1">去使用</span>
+                                </div>
+                                <div class="coupon-tags">{{ coupon.couponType | TypeFormat }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 

src/main/resources/templates/shopping/cart.html

@@ -55,7 +55,7 @@
                     </a>
                     <!--店铺促销-->
                     <div class="price">
-                        <div v-if="supplier.promotions" class="priceTag">
+                        <div v-if="supplier.promotions" class="priceTag" style="float: left;">
                             <i @click="toggleThisLadder($event)" class="tag icon mIcon" v-text="supplier.promotions.name"></i>
                             <div class="promotion mFixed">
                                 <div>
@@ -78,6 +78,7 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="couponTag" style="float: left;margin-left: 10px;">领券</div>
                     </div>
                 </div>
                 <div class="cartItem clear"  v-for="cart in supplier.cartList" >
@@ -199,11 +200,12 @@
                 <div class="item">商品种类：<em v-text="kindCount"></em></div>
                 <div class="item">商品数量：<em v-text="totalCount"></em></div>
             </div>
-            <div class="right mfbt">
-                <div  :class="reducedPrice>0?'item priceTotal':'item'">合计：<em>¥{{totalPrice | NumFormat}}</em>
-                    <span v-if="reducedPrice>0" class="dl"><del>¥{{originalPrice | NumFormat}}</del><em>减¥{{reducedPrice | NumFormat}}</em></span>
-                </div>
+            <div class="right">
                 <a class="submit" href="javascript:void(0);" @click="submitCart()" onclick="_czc.push(['_trackEvent','购物车去结算','点击','去结算','','Um_Event_CartConfirmOrder'])">去结算</a>
+                <div  :class="reducedPrice>0?'item priceTotal':'item'">
+                    <p class="priceTotal-t">合计：<em>¥{{totalPrice | NumFormat}}</em></p>
+                    <p class="priceTotal-b" v-if="reducedPrice>0"><em>共减¥{{reducedPrice | NumFormat}}</em></p>
+                </div>
             </div>
         </div>
     </div>

src/main/resources/templates/user-center/account/coupon.html

@@ -28,7 +28,7 @@
           <img src="/img/base/loading.gif">
         </div>
         <div class="coupon-container clear" v-else>
-          <div class="coupon-content-tabs clearfix">
+          <div class="coupon-content-tabs clear">
             <div class="tabs-main">
               <div class="time-tabs">
                 <div   class="time-tabs-cell"