修改页面

src/main/resources/static/css/base/floor.css

@@ -41,6 +41,7 @@
 .section_page .page_main_price .main_price_none.sec{margin-top:25px}
 .section_page .page_main_price .main_price_none .listTag{margin:0}
 .section_page .page_main_price .price_grade,.section_page .page_main_price .price_grade_shop,.section_page .page_main_price .price_grade_club{float:left;margin:0;height:22px;line-height:22px;color:#4A4F58;font-style:normal;font-size:14px}
+.section_page .page_main_price .price_grade{float: unset}
 .section_page .page_main_price .price_grade span,.section_page .page_main_price .price_grade_shop span,.section_page .page_main_price .price_grade_club span{display:inline-block;float:left}
 .section_page .page_main_price .icon:before{width:67px;height:22px}
 .section_page .page_main_price .price_grade_1:before{background-position:0 -714px}
@@ -48,6 +49,8 @@
 .section_page .page_main_price .price_grade_3:before{background-position:0 -774px}
 .section_page .page_main_price .price_grade_4:before{background-position:0 -804px}
 .section_page .page_main_price .price_grade_5:before{background-position:0 -834px}
+
+
 .section_page .section_page_more{width:100%;height:32px;margin-top:16px;float:left;display:none}
 .section_page .section_page_more.show{display:block}
 .section_page .section_page_more .more{width:98px;height:32px;line-height:32px;font-size:14px;margin:0 auto;border-radius:2px;border:1px solid #cccccc;color:#909090;text-align:left;transition:all 0.2s;cursor:pointer;padding-left:15px;box-sizing:border-box;position:relative}
@@ -137,4 +140,4 @@
 #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}
 #recommendBox .swiper-wrapper{height:inherit}
-}
+}

src/main/resources/static/css/pay/caimei-pay.css

@@ -22,6 +22,15 @@
     .pay-title .title-right{float: right;height: 40px;}
     .pay-title .title-right .time{width: 172px;height: 40px;padding-left: 62px;background: url("/img/pay/icon-time.png")no-repeat;background-size: cover;box-sizing: border-box;}
     .pay-title .title-right .time span{width: 24px;height: 24px;display: block;margin: 8px 5px;float: left;font-size: 16px;line-height: 24px;text-align: center;color: #FFFFFF;}
+    .pay-svip{margin-top:24px}
+    .pay-svip+.pay-method .method-title{background:#F5F5F5 !important}
+    .pay-svip .pay-svip-title{padding:0 0 16px 16px;font-size:16px;font-weight:400;color:#2D3036}
+    .pay-svip .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:1184px;height:78px;padding-left:112px;padding-right:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:url(https://static.caimei365.com/app/img/svip/pc-cm-svip-bg-03.png) no-repeat center;background-size:1184px 78px}
+    .pay-svip .pay-svip-detail{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
+    .pay-svip .pay-svip-detail .tit{font-size:16px;font-weight:400;color:#4E4539;padding-bottom:4px}
+    .pay-svip .pay-svip-detail .pay-amount{margin-left:18px;font-size:28px;font-weight:bold;color:#4E4539}
+    .pay-svip .pay-svip-detail .pay-amount > span{font-size:12px;vertical-align:0}
+    .pay-svip .svip-indent{padding-top:24px;font-size:16px;font-weight:bold;color:#4E4539}
     .pay-goods .good-top{width: 100%;float: left;box-sizing: border-box;}
     .pay-goods .good-top .good-top-inner{width: 100%;height: 55px;padding: 0 20px;float: left;border-bottom: 1px solid #F7F7F7;box-sizing: border-box;}
     .pay-goods .good-top .bot-left{float: right;height: 24px;line-height: 24px;font-size: 12px;padding: 16px 0 15px 0;color: #999999;cursor: pointer;}

src/main/resources/static/css/pay/caimei-paycash.css

@@ -37,6 +37,15 @@ input::-webkit-outer-spin-button {
     .pay-title .pay-input .input-text{font-size: 18px;color: #333333;}
     .pay-title .pay-input .input-text span{font-size: 14px;}
     .pay-title .pay-input .input{width: 215px;height: 34px;display: inline-block;font-size: 14px;line-height: 34px;padding: 0 10px;border: 1px solid #EBEBEB;border-radius: 5px;}
+    .pay-svip{margin-top:24px}
+    .pay-svip+.pay-method .method-title{background:#F5F5F5 !important}
+    .pay-svip .pay-svip-title{padding:0 0 16px 16px;font-size:16px;font-weight:400;color:#2D3036}
+    .pay-svip .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:1184px;height:78px;padding-left:112px;padding-right:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:url(https://static.caimei365.com/app/img/svip/pc-cm-svip-bg-03.png) no-repeat center;background-size:1184px 78px}
+    .pay-svip .pay-svip-detail{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
+    .pay-svip .pay-svip-detail .tit{font-size:16px;font-weight:400;color:#4E4539;padding-bottom:4px}
+    .pay-svip .pay-svip-detail .pay-amount{margin-left:18px;font-size:28px;font-weight:bold;color:#4E4539}
+    .pay-svip .pay-svip-detail .pay-amount > span{font-size:12px;vertical-align:0}
+    .pay-svip .svip-indent{padding-top:24px;font-size:16px;font-weight:bold;color:#4E4539}
     .pay-ment{width: 100%;height: auto;float: left;background: #FFFFFF;margin-top: 7px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
     .pay-ment .pay-record{width: 100%;height: auto;float: left;background: #FFFFFF;padding: 10px 0;box-sizing:border-box;}
     .pay-ment .pay-record .record-title{width: 100%;padding: 0 20px;background: #FFFFFF;line-height: 44px;font-size: 16px;color: #333333;text-align: left;box-sizing:border-box;}
@@ -127,6 +136,14 @@ input::-webkit-outer-spin-button {
     .pay-title .pay-input{white-space:nowrap}
     .pay-title .pay-input p{display:inline-block}
     .pay-title .pay-input input{outline:none;box-sizing:border-box;width:100%;height:7vw;line-height:5vw;padding:1vw 0;text-indent:1.2em;font-size:3.4vw;text-align:left;background-color:#ffffff;border-radius:2px;border:solid 1px #b8bfca}
+    .pay-svip{padding-top:4vw;background:#fff}
+    .pay-svip .pay-svip-title{padding:0 0 2.7vw 3.3vw;font-size:3.7vw;font-weight:400;color:#2D3036}
+    .pay-svip .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100vw;height:20.6vw;padding-left:17vw;padding-right:3.2vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:url(https://static.caimei365.com/app/img/svip/h5-cm-svip-bg-03.png) no-repeat center;background-size:100vw 20.6vw}
+    .pay-svip .pay-svip-detail{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
+    .pay-svip .pay-svip-detail .tit{font-size:2.6vw;font-weight:400;color:#4E4539;padding-bottom:0.4vw}
+    .pay-svip .pay-svip-detail .pay-amount{margin-left:1.7vw;font-size:5.6vw;font-weight:bold;color:#4E4539}
+    .pay-svip .pay-svip-detail .pay-amount > span{font-size:2.4vw;vertical-align:0}
+    .pay-svip .svip-indent{padding-top:8vw;font-size:2.8vw;font-weight:bold;color:#4E4539}
     .record-title,.method-title{font-size:3.7vw;color:#22272e;line-height:8vw}
     .pay-method-tab{padding-top:1.5vw;border-bottom:1px solid #EBEBEB;color:#22272e}
     .pay-method-tab .item{display:block;box-sizing:border-box;height:9vw;line-height:9vw;padding:0 5vw;border:1px solid transparent;font-size:3.4vw;margin-bottom:-1px}

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

@@ -16,79 +16,23 @@ li{list-style:none}
     .sortBox li.down:after{border-top-color:#E15616}
     .sortBox li.down:before{border-bottom-color:#E15616;opacity:.3}
     .productList{width:1184px;margin:0 auto;box-sizing:border-box}
-    .productList .productItem {
-        width: 184px;
-        height: 268px;
-        float: left;
-        background: #fff;
-        position: relative;
-        margin: 0 16px 16px 0;
-        overflow: hidden;
-        float: left;
-    }
-    .productList .productItem:nth-child(6n){margin-right: 0;}
-    .productList .productItem img {
-        width: 100%;
-        height: 164px;
-    }
-    .productList .productItem .name{
-        display: block;
-        padding: 0 8px;
-        margin-top: 8px;
-        height: 40px;
-        line-height: 21px;
-        vertical-align: middle;
-        word-break: break-all;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-inline-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical
-    }
-    .productItem .price{
-        border: 0;
-        box-sizing: border-box;
-        padding: 0 8px;
-        height: 54px;
-        width: 100%;
-    }
-    .productItem .price .icon:before{
-        width: 63px;
-    }
-    .productItem .price .icon.i5:before {
-        background-position: -2px -832px;
-    }
-    .productItem .price .icon.i1:before {
-        background-position: -2px -712px;
-    }
-    .productItem .price .icon.i2:before {
-        background-position: -2px -742px;
-    }
-    .productItem .price .icon.i3:before {
-        background-position: -2px -772px;
-    }
-    .productItem .price .icon.i4:before {
-        background-position: -2px -802px;
-    }
-    .listTag{
-        margin: 12px 8px 0 0;
-        padding: 0 2px;
-    }
-    .productItem .image .icon{
-        position: inherit;
-    }
-    .sortBox li.on, .sortBox li.up, .sortBox li.down {
-        background: #FFE6DC;
-        color: #E15616;
-    }
-    .empty{
-        margin-top: 32px;
-        background: #fff;
-    }
-    .empty p{
-        color: #909090;
-        font-size: 14px;
-    }
+    .productList .productItem{width:184px;height:268px;float:left;background:#fff;position:relative;margin:0 16px 16px 0;overflow:hidden;float:left}
+    .productList .productItem:nth-child(6n){margin-right:0}
+    .productList .productItem img{width:100%;height:164px}
+    .productList .productItem .name{display:block;padding:0 8px;margin-top:8px;height:40px;line-height:21px;vertical-align:middle;word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .productItem .price{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 8px;height:54px;width:100%}
+    .productItem .price .icon:before{width:63px}
+    .productItem .price .icon.i5:before{background-position:-2px -832px}
+    .productItem .price .icon.i1:before{background-position:-2px -712px}
+    .productItem .price .icon.i2:before{background-position:-2px -742px}
+    .productItem .price .icon.i3:before{background-position:-2px -772px}
+    .productItem .price .icon.i4:before{background-position:-2px -802px}
+    .listTag{margin:12px 8px 0 0;padding:0 2px}
+    .productItem .image .icon{position:inherit}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}
+    .empty{margin-top:32px;background:#fff}
+    .empty p{color:#909090;font-size:14px}
+
     .productItem .price em{font-weight: normal}
     .productItem .price em.bold{font-weight: bold}
     .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin-top: 3px;}
@@ -106,8 +50,11 @@ li{list-style:none}
     .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:24px;line-height:24px;padding:0 10px;background:#FFF}
     .productItem .name span.tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;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: 2px;}
 
-
-
+    .productItem .price .svip-tag{width:100%;height:22px;letter-spacing:0}
+    .productItem .price .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:36px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+    .productItem .price .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .productItem .price .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:4px;margin-left:-26px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
+    .productItem .price .svip-tag .svip-price span{color: #333}
 }
 /**
 * 移动端

src/main/resources/static/css/user-center/member/member-record.css

@@ -14,46 +14,29 @@
 .vip-bar>div>a.link{font-size:14px;color:#55331D}
 .vip-bar>div>a.btn{width:104px;height:36px;background:-webkit-gradient(linear,right top,left top,from(#585658),to(#323031));background:-o-linear-gradient(right,#585658 0%,#323031 100%);background:linear-gradient(270deg,#585658 0%,#323031 100%);border-radius:2px;line-height:36px;text-align:center;font-size:16px;color:#F0CB72}
 /*记录列表*/
-    .record-list {
-        width: 100%;
-        background: #fff;
-        box-sizing: border-box;
-        padding: 0 24px;
-    }
-    .record-list .record{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        padding: 24px 0;
-        box-sizing: border-box;
-        border-top:1px solid #E2E7EF;
-    }
-    .record-list .record:first-child{
-        border-top: 0;
-    }
-    .record-list .record .desc{
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-    }
-    .record-list .record .desc>span:first-child{
-        font-size: 16px;
-        font-weight: 400;
-        color: #22272E;
-    }
-    .record-list .record .desc>span:last-child{
-        font-size: 14px;
-        font-weight: 400;
-        color: #627386;
-        margin-top: 12px;
-    }
-    .record-list .record .amount span{
-        font-size: 16px;
-        font-weight: 400;
-        color: #E15616;
-    }
+.record-list{width:100%;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 24px}
+.record-list .record{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:24px 0;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #E2E7EF}
+.record-list .record:first-child{border-top:0}
+.record-list .record .desc{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
+.record-list .record .desc>span:first-child{font-size:16px;font-weight:400;color:#22272E}
+.record-list .record .desc>span:last-child{font-size:14px;font-weight:400;color:#627386;margin-top:12px}
+.record-list .record .amount span{font-size:16px;font-weight:400;color:#E15616}
+/*续费弹窗*/
+.renew-popup{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:540px;height:424px;background:#FFFFFF;opacity:1;border-radius:2px;z-index:9999}
+.renew-popup .popup-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:50px;padding:0 16px 0 24px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:16px;font-weight:bold;color:#4A4F58;opacity:1;border-bottom:1px solid #E2E7EF}
+.renew-popup .popup-title .close{color: #d4d4d4;font-size:30px;font-weight:400;cursor:pointer}
+.renew-popup .combo-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
+.renew-popup .combo-list>div:first-child{margin-top:37px}
+.renew-popup .combo-list>div:last-child{margin-top:56px}
+/*遮罩*/
+.mask{content:"";display:block;position:fixed;width:100vw;height:100vh;background:#333333;opacity:0.7;left:0;top:0;z-index:9998}
+/*确认支付 立即支付弹窗*/
+.payment-confirm-popup{position:fixed;top:50%;left:50%;z-index:99999;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:338px;height:168px;padding:16px;background:#FFFFFF;opacity:1;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.payment-confirm-popup .popup-title{padding-bottom:16px;font-size:16px;font-weight:bold;color:#4A4F58}
+.payment-confirm-popup .popup-title .close{position:absolute;right:16px;top:4px;color:#d4d4d4;font-size:30px;font-weight:400;cursor:pointer}
+.payment-confirm-popup .content{font-size:14px;font-weight:400;line-height:24px;color:#22272E;opacity:1}
+.payment-confirm-popup .popup-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:48px}
+.payment-confirm-popup .popup-btn .confirm-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:104px;height:32px;background:#E15616;opacity:1;border-radius:2px;font-size:14px;font-weight:400;color:#FFFFFF}
 }
 
 /*h5*/
@@ -68,5 +51,41 @@
 .vip-bar .right-box a{display:block}
 .vip-bar .right-box a.link{font-size:2.8vw;color:#55331D}
 .vip-bar .right-box a.btn{width:19.2vw;height:7.2vw;background:-webkit-gradient(linear,right top,left top,from(#585658),to(#323031));background:-o-linear-gradient(right,#585658 0%,#323031 100%);background:linear-gradient(270deg,#585658 0%,#323031 100%);border-radius:2px;line-height:7.2vw;text-align:center;font-size:3.2vw;color:#F0CB72;margin-top:2.4vw}
-
+/*记录列表*/
+.record-list{padding:0 3.2vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff}
+.record-list .record{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:3.2vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #B8BFCA}
+.record-list .record:first-child{border-top:0}
+.record-list .record:first-child{border-top:0}
+.record-list .record .desc{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
+.record-list .record .desc > span:first-child{font-size:3.6vw;font-weight:400;color:#22272E}
+.record-list .record .desc > span:last-child{font-size:2.8vw;font-weight:400;color:#627386;margin-top:2vw}
+.record-list .record .amount span{font-size:3.8vw;font-weight:400;color:#E15616}
+/*续费弹窗*/
+.renew-popup{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:74.6vw;height:72.8vw;background:#fff;-webkit-box-shadow:0px 10px 20px rgba(0,0,0,0.16);box-shadow:0px 10px 20px rgba(0,0,0,0.16);opacity:1;border-radius:1.2vw;z-index:9999}
+.renew-popup .popup-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4.8vw 4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:3.6vw;font-weight:bold;color:#4A4F58;opacity:1}
+.renew-popup .popup-title .close{position:absolute;right:2.4vw;top:1vw;font-size:7vw;font-weight:normal;cursor:pointer}
+.renew-popup .combo-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
+.renew-popup .combo-list>div:first-child{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;width:100%;margin-top:5.8vw}
+.renew-popup .combo-list>div:last-child{width:100%;margin-top:8vw}
+.renew-popup .combo-list .combo{width:20.6vw;height:22.4vw}
+.renew-popup .combo-list .combo.recommend::after{width:8vw;height:4vw;line-height:4vw;top:-1.55vw}
+.renew-popup .combo-list .combo .how-mounts{font-size:3.2vw}
+.renew-popup .combo-list .combo .price{font-size:3.9vw;padding:1.2vw 0}
+.renew-popup .combo-list .combo .price i{font-size:2.6vw}
+.renew-popup .combo-list .combo .average{font-size:2.6vw}
+.renew-popup .combo-list .pay-btn{width:66.6vw;height:9.9vw;font-size:3.2vw}
+.renew-popup .combo-list .pay-btn.plain{margin-top:3.3vw}
+/*遮罩*/
+.mask{content:"";display:block;position:fixed;width:100vw;height:100vh;background:#333333;opacity:0.7;left:0;top:0;z-index:9998}
+/*确认支付，立即支付弹窗*/
+.payment-confirm-popup{position:fixed;top:50%;left:50%;z-index:99999;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:74.6vw;height:46vw;padding:4.4vw;background:#FFFFFF;opacity:1;border-radius:1.2vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.payment-confirm-popup .popup-title{padding-bottom:3.2vw;padding-top:2.4vw;font-size:3.8vw;font-weight:bold;color:#4A4F58}
+.payment-confirm-popup .popup-title .close{position:absolute;right:3.2vw;top:1.2vw;color:#d4d4d4;font-size:5.6vw;font-weight:400;cursor:pointer}
+.payment-confirm-popup .content{font-size:3.6vw;font-weight:400;line-height:6.4vw;color:#22272E;opacity:1}
+.payment-confirm-popup .popup-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:10.4vw}
+.payment-confirm-popup .popup-btn .confirm-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:66.6vw;height:9.9vw;background:#E15616;opacity:1;border-radius:2px;font-size:14px;font-weight:400;color:#FFFFFF}
+/*加载更多*/
+.show-more{width:100vw;margin:2.4vw 0;text-align:center}
+.show-more .more-btn{display:inline-block;width:20vw;height:6vw;font-size:3vw;line-height:6vw;border:1px solid #ccc}
+.show-more .more-btn::after{content:'';width:4vw;height:2.4vw;display:inline-block;background:url(/img/base/icon_m.png) no-repeat;background-size:100vw auto;background-position:-51.5vw -2vw}
 }

src/main/resources/templates/index.html

@@ -203,6 +203,13 @@
                                                             </template>
                                                         </template>
                                                     </div>
+                                                    <!--超级会员价格标签-->
+                                                    <div class="svip-tag">
+                                                        <div class="svip-icon">SVIP</div>
+                                                        <div class="svip-price">
+                                                            <span>￥</span><span>3000</span>
+                                                        </div>
+                                                    </div>
                                                 </template>
                                                 <!-- 二手商品 -->
                                                 <template v-else>

src/main/resources/templates/pay/caimei-pay.html

@@ -29,7 +29,7 @@
                 </div>
             </div>
             <!-- 维沙 -->
-             <template v-if="organizeId === 3">
+            <template v-if="organizeId === 3">
                 <div class="pay-goods">
                     <div class="good-top">
                         <div class="good-top-inner ws">
@@ -76,6 +76,19 @@
                     </div>
                 </div>
             </template>
+            <!--购买会员-->
+            <template v-else-if="true">
+                <div class="pay-svip">
+                    <div class="pay-svip-title">购买超级会员</div>
+                    <div class="content">
+                        <div class="pay-svip-detail">
+                            <div class="tit">支付金额</div>
+                            <div class="pay-amount"><span>￥</span>6000.00</div>
+                        </div>
+                        <div class="svip-indent">套餐12个月</div>
+                    </div>
+                </div>
+            </template>
             <!-- 采美 -->
             <template v-else>
                 <div class="pay-goods">

src/main/resources/templates/pay/caimei-paycash.html

@@ -11,7 +11,7 @@
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 <div id="payContainer" class="pay-container clear" v-cloak>
-    <div class="wrap">
+    <div class="wrap" v-if="pageType !== '2'">
         <div class="pageTitle">
             <div class="step">
                 <span class="prev">我的购物车</span>
@@ -23,6 +23,7 @@
     </div>
     <div class="container">
         <div class="pay-content clear" >
+            <!--二手支付-->
             <template v-if="pageType === '1'">
                 <div class="pay-title">
                     <div class="title-money big">
@@ -30,6 +31,20 @@
                     </div>
                 </div>
             </template>
+            <!--购买会员-->
+            <template v-else-if="pageType === '2'">
+                <div class="pay-svip">
+                    <div class="pay-svip-title">购买超级会员</div>
+                    <div class="content">
+                        <div class="pay-svip-detail">
+                            <div class="tit">支付金额</div>
+                            <div class="pay-amount"><span>￥</span>6000.00</div>
+                        </div>
+                        <div class="svip-indent">套餐12个月</div>
+                    </div>
+                </div>
+            </template>
+            <!--普通订单-->
             <template v-else>
                 <div class="pay-title">
                     <div class="title-money big">
@@ -51,7 +66,7 @@
                     </div>
                 </div>
             </template>
-            <div class="pay-ment"  v-if="pageType != '1'">
+            <div class="pay-ment"  v-if="pageType != '1' && pageType != '2'">
                 <div class="pay-record">
                     <div class="record-title">支付记录</div>
                     <div class="record-content clear" id="discernReceipt">

src/main/resources/templates/pay/caimei-paymobile.html

@@ -24,9 +24,10 @@
             <div class="pay-codecontent">
                 <div class="pay-amount">
                     <div class="pay-amount-text">
+                        <p v-if="pageType == '2'">超级会员套餐：12个月 </p>
                         <p>交易金额: <span>￥{{payAmount | NumFormat}}</span> </p>
                         <p>收款方: <span>深圳市采美信息技术有限公司</span> </p>
-                        <p v-if="pageType!='1' ">订单号: <span>{{orderNo}}</span> </p>
+                        <p v-if="pageType!='1' && pageType!='2'">订单号: <span>{{orderNo}}</span> </p>
                     </div>
                     <div class="pay-amount-icon"><img src="/img/pay/icon-pay@2x.png" alt=""></div>
                 </div>
@@ -51,9 +52,10 @@
             <div class="pay-codecontent">
                 <div class="pay-amount">
                     <div class="pay-amount-text">
+                        <p v-if="pageType == '2'">超级会员套餐：12个月 </p>
                         <p>交易金额: <span>￥{{payAmount | NumFormat}}</span> </p>
                         <p>收款方: <span>深圳市采美信息技术有限公司</span> </p>
-                        <p v-if="pageType!='1' ">订单号: <span>{{orderNo}}</span> </p>
+                        <p v-if="pageType!='1' && pageType!='2'">订单号: <span>{{orderNo}}</span> </p>
                     </div>
                     <div class="pay-amount-icon"><img src="/img/pay/icon-pay@2x.png" alt=""></div>
                 </div>

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

@@ -124,11 +124,22 @@
                             <template v-else>
                                 <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.shopId==GLOBAL_SHOP_ID)">
                                     <div class="price_text_tag">
-<!--                                        <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
-                                        <p class="listTag" v-if="p.actStatus==1">
-                                            {{p.promotions.name}}
-                                            <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:￥{{p.price | NumFormat}}</span>
-                                        </p>
+                                        <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                                        <!--超级会员价格标签-->
+                                        <template v-if="p.actStatus==1 && true">
+                                            <div class="svip-tag">
+                                                <div class="svip-icon btr">SVIP</div>
+                                                <div class="svip-price">
+                                                    <span>￥</span><span>3000</span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <p class="listTag" v-if="p.actStatus==1">
+                                                {{p.promotions.name}}
+                                                <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:￥{{p.price | NumFormat}}</span>
+                                            </p>
+                                        </template>
                                     </div>
                                     <div class="main_price_show" :class="PromotionsFormat(p.promotions) ? 'none' : ''">
                                         ￥{{ (PromotionsFormat(p.promotions) ? p.originalPrice : p.price ) | NumFormat }}
@@ -136,15 +147,31 @@
                                 </template>
                                 <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
                                     <div class="price_text_tag">
-<!--                                        <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
-                                        <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                        <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                                        <!--超级会员价格标签-->
+                                        <template v-if="p.actStatus==1 && true">
+                                            <div class="svip-tag">
+                                                <div class="svip-icon">SVIP</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                        </template>
                                     </div>
                                     <div class="main_price_unde">￥会员可见</div>
                                 </template>
                                 <template v-else>
                                     <div class="price_text_tag">
-<!--                                        <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
-                                        <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                        <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                                        <!--超级会员价格标签-->
+                                        <template v-if="p.actStatus==1 && true">
+                                            <div class="svip-tag">
+                                                <div class="svip-icon">SVIP</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                        </template>
                                     </div>
                                     <div class="price_grade"><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
                                 </template>
@@ -152,11 +179,20 @@
                         </template>
                         <template v-else>
                             <div class="price_text_tag ">
-<!--                                <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
-                                <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                                <!--超级会员价格标签-->
+                                <template v-if="p.actStatus==1 && true">
+                                    <div class="svip-tag">
+                                        <div class="svip-icon">SVIP</div>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                </template>
                             </div>
                             <div class="price_grade "><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
                         </template>
+
                     </div>
                 </a>
             </li>

src/main/resources/templates/user-center/member/member-record.html

@@ -26,7 +26,7 @@
             <div class="right">
                 <!--会员信息-->
                 <div class="vip-bar">
-                    <div class="left-box row1">
+                    <div class="left-box row2">
                         <!--未开通-->
                         <template v-if="true">
                             <span>采美·超级会员</span>
@@ -98,15 +98,8 @@
             </div>
         </div>
     </div>
-    <!--底部支付按钮 仅未开通和到期显示-->
-    <div class="pay-amount-bottom">
-        <div>
-            <div class="pay-btn plain"><a href="">抵扣480000个采美豆开通</a></div>
-            <div class="pay-btn"><a href="">立即支付4800元开通</a></div>
-        </div>
-    </div>
     <!--遮罩-->
-    <div class="mask"></div>
+    <div class="mask" v-if="false"></div>
     <!--续费弹窗-->
     <div class="renew-popup" v-if="false">
         <div class="popup-title">超级会员套餐<span class="close">&times;</span></div>
@@ -126,12 +119,11 @@
         </div>
     </div>
     <!--立即支付弹窗-->
-    <div class="payment-confirm-popup">
+    <div class="payment-confirm-popup" v-if="false">
         <div class="popup-title">请在您新打开的页面上完成付款！<span class="close">&times;</span></div>
         <div class="content">完成付款后请点击下面的按钮</div>
         <div class="popup-btn"><a href="" class="confirm-btn">已完成支付</a></div>
     </div>
-
 </div>