Explorar el Código

vip订阅周期弹窗样式

TANGSHIZHE hace 5 años
padre
commit
427b29f6fa

+ 12 - 3
src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/css/vip_index_new.css

@@ -269,7 +269,7 @@
   display: flex;
   align-items: center;
   padding: 0.18rem 0.3rem;
-  border-bottom: 1px solid #cecece;
+  /* border-bottom: 1px solid #cecece; */
 }
 
 .vip-footer .footer-preview-container .clause-box a {
@@ -280,11 +280,20 @@
   display: flex;
   align-items: center;
   padding: 0 0.3rem;
-  height: 0.94rem;
+  height: 0.76rem;
   font-size: 0.26rem;
   color: #686868;
 }
 
+.vip-footer .footer-preview-container .preview-content .billing-list-btn {
+  color: #9B9CA3;
+}
+
+.vip-footer .footer-preview-container .preview-content .billing-mon {
+  font-size: 0.32rem;
+  color: #FB483D;
+}
+
 .vip-footer .footer-preview-container .preview-content {
   flex: 1;
   display: flex;
@@ -298,7 +307,7 @@
 
 .vip-footer .footer-preview-container .preview-content .billing-price {
   font-size: 0.4rem;
-  color: #1d1d1d;
+  color: #FB483D;
 }
 
 .vip-footer .footer-button-group {

+ 3 - 2
src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/css/vip_introduce.css

@@ -171,9 +171,9 @@
 .vip_introduce .menu {
    position: fixed;
    width: 100%;
-   height: .94rem;
+   /* height: .94rem; */
    bottom: 0;
-   line-height: .94rem;
+   /* line-height: .94rem; */
 }
 
 .vip_introduce .menu:after {
@@ -204,4 +204,5 @@
 .vip_introduce .menu .subscribe_btn {
   background-color: #2CB7CA;
   color: #fff;
+  line-height: 0.8rem;
 }

+ 30 - 10
src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/css/vip_purchase.css

@@ -38,7 +38,7 @@
 .bottom_button .left_btn {
   color: #2cb7ca;
   background-color: #fff;
-  border-top: 1px solid #e0e0e0;
+  /* border-top: 1px solid #e0e0e0; */
 }
 
 .bottom_button .right_btn {
@@ -381,11 +381,11 @@
 
 .radio-form {
   margin: 0;
-  padding: .17rem .05rem;
+  padding: .17rem .32rem;
   font-size: .26rem;
   background: transparent;
-  border-top: 1px solid #e0e0e0;
-  border-bottom: 1px solid #e0e0e0;
+  /* border-top: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e0e0e0; */
 }
 
 .radio-form .weui-cell {
@@ -397,7 +397,7 @@
 } */
 
 .radio-form .read {
-  font-size: .26rem;
+  font-size: .24rem;
 }
 
 .radio-form .read a {
@@ -578,15 +578,27 @@
 .vip_purchase .fixed-bottom-box .price {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  padding: .12rem .12rem;
+  justify-content: space-between;
+  padding: 0 .32rem;
+}
+
+.vip_purchase .fixed-bottom-box .price .billing-list-btn .billing-mon{
+  font-size: .32rem;
+  color: #FB483D;
+}
+.vip_purchase .fixed-bottom-box .price .billing-list-btn .billing-price{
+  font-size: .4rem;
+  color: #FB483D;
+  font-weight: 600;
 }
 
-.vip_purchase .fixed-bottom-box .price span {
-  text-decoration: line-through;
+.vip_purchase .fixed-bottom-box .price .billing-total {
+  font-size: .24rem;
+  color: #9B9CA3;
+  /* text-decoration: line-through;
   font-size: .26rem;
   color: #888;
-  margin-right: .18rem;
+  margin-right: .18rem; */
 }
 
 .vip_purchase .fixed-bottom-box .price strong {
@@ -594,6 +606,14 @@
   color: #1d1d1d;
 }
 
+.weui-cells:before {
+  border-top: 0;
+}
+
+.weui-cells:after {
+  border-bottom: 0;
+}
+
 .vip_purchase .form-btn {
   display: flex;
   align-items: center;

+ 3 - 2
src/jfw/modules/app/src/web/templates/vipsubscribe/trial_info.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}"/>
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/css/trial_info.css?v={{Msg "seo" "version"}}">
+    <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/appbutton.css?v={{Msg "seo" "version"}}3" >
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/layout.css?v={{Msg "seo" "version"}}"/>
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/font.css?v={{Msg "seo" "version"}}"/>
 </head>
@@ -80,9 +81,9 @@
                 </div>
             </div>
         </form>
-        <div class="trial_btn">
+        <div class="trial_btn j-footer">
             <!-- 未完善个人信息展示的按钮 type类型为submit-->
-            <button class="btn" type="submit">立即免费试用</button>
+            <button class="btn j-button" type="submit">立即免费试用</button>
             <!-- 已完善过个人信息 展示的按钮 type类型为button -->
         </div>
     </div>

+ 15 - 11
src/jfw/modules/app/src/web/templates/vipsubscribe/vip_index_new.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/css/base2.css?v={{Msg "seo" "version"}}"/>
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}"/>
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/css/vip_index_new.css?v={{Msg "seo" "version"}}">
+    <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/appbutton.css?v={{Msg "seo" "version"}}3" >
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/layout.css?v={{Msg "seo" "version"}}"/>
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/font.css?v={{Msg "seo" "version"}}"/>
     <style>
@@ -213,28 +214,31 @@
         <!-- 升级 -->
         <div class="vip-footer upgrade">
             <div class="footer-preview-container">
-                <div class="clause-box">
-                    <span class="checkbox"></span>
-                    <span class="clause-read" style="flex: 1">我已阅读,理解并接受<a onclick="toRead()">《剑鱼标讯线上购买与服务条款》</a></span>
-                </div>
                 <div class="price-preview">
                     <span class="preview-label">价格:</span>
                     <span class="preview-content">
                         <span class="billing-list-btn"></span>
-                        <span class="billing-price">¥366.50</span>
+                        <div class="billing-list-price">
+                            <span class="billing-mon">¥</span>
+                            <span class="billing-price">366.50</span>
+                        </div>
                     </span>
                 </div>
+                <div class="clause-box">
+                    <span class="checkbox"></span>
+                    <span class="clause-read" style="flex: 1">我已阅读,理解并接受<a onclick="toRead()">《剑鱼标讯线上购买与服务条款》</a></span>
+                </div>
             </div>
-            <div class="footer-button-group">
-                <button class="button-l reset">取消</button>
-                <button class="button-r confirm" disabled>立即升级</button>
+            <div class="footer-button-group j-button-group">
+                <button class="button-l reset j-button-cancel1">取消</button>
+                <button class="button-r confirm j-button-confirm1" disabled>立即升级</button>
             </div>
         </div>
         <!-- 修改 -->
         <div class="vip-footer modify">
-            <div class="footer-button-group">
-                <button class="button-l reset">取消</button>
-                <button class="button-r confirm">保存修改</button>
+            <div class="footer-button-group j-button-group">
+                <button class="button-l reset j-button-cancel1">取消</button>
+                <button class="button-r confirm j-button-confirm1">保存修改</button>
             </div>
         </div>
     </div>

+ 9 - 2
src/jfw/modules/app/src/web/templates/vipsubscribe/vip_introduce.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}"/>
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/css/vip_introduce.css?v={{Msg "seo" "version"}}">
+    <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/appbutton.css?v={{Msg "seo" "version"}}3" >
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/layout.css?v={{Msg "seo" "version"}}"/>
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/font.css?v={{Msg "seo" "version"}}"/>
 </head>
@@ -136,9 +137,15 @@
         </div>
         <div class="menu">
             {{if not .T.notShowTrial }}
-                <a onclick="window.location.replace('/jyapp/vipsubscribe/trialInfo')" class="try_btn">试用7天</a>
+            <div class="j-button-group">
+                <a onclick="window.location.replace('/jyapp/vipsubscribe/trialInfo')" class="try_btn j-button-cancel1">试用7天</a>
+                <a onclick="window.location.replace('/jyapp/vipsubscribe/vipsubscribe_new')" class="subscribe_btn j-button-confirm1">去订阅</a>
+            </div>
+            {{else}}
+            <div class="j-footer" style="width: 100%;">
+                <a onclick="window.location.replace('/jyapp/vipsubscribe/vipsubscribe_new')" class="subscribe_btn j-button">去订阅</a>
+            </div>
             {{end}}
-            <a onclick="window.location.replace('/jyapp/vipsubscribe/vipsubscribe_new')" class="subscribe_btn">去订阅</a>
         </div>
     </div>
 </div>

+ 13 - 8
src/jfw/modules/app/src/web/templates/vipsubscribe/vip_purchase.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/vipsubscribe/css/vip_purchase.css?v={{Msg "seo" "version"}}">
+    <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/appbutton.css?v={{Msg "seo" "version"}}3" >
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/layout.css?v={{Msg "seo" "version"}}"/>
     <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/jyapp/css/font.css?v={{Msg "seo" "version"}}"/>
     <style>
@@ -157,6 +158,14 @@
                 </div>
             </div>
             <div class="fixed-bottom-box">
+                <div class="price">
+                    <span class="billing-total">合计:</span>
+                    <!-- <strong>&yen;1,300.00</strong> -->
+                    <div class="billing-list-btn">
+                        <span class="billing-mon">&yen;</span>
+                        <strong class="billing-price">5.80</strong>
+                    </div>
+                </div>
                 <div class="weui-cells weui-cells_checkbox radio-form">
                     <label class="weui-cell weui-check__label" for="buy">
                         <div class="weui-cell__hd">
@@ -173,12 +182,8 @@
                         </div>
                     </label>
                 </div>
-                <div class="price">
-                    <!-- <strong>&yen;1,300.00</strong> -->
-                    <strong>&yen;5.80</strong>
-                </div>
-                <div class="form-btn">
-                    <button class="btn enter" disabled id="payHandle">去支付</button>
+                <div class="form-btn j-footer">
+                    <button class="btn enter j-button" disabled id="payHandle">去支付</button>
                 </div>
             </div>
             <!-- 选择行业 -->
@@ -482,11 +487,11 @@
                         //var price = getsubVipOrderPrice(this.areaSelect, this.industrySelect, time, this.price);
                         var showPrice = formatMoney(price);
                         if (flag === 1) {
-                            $('.price strong').text('¥' + showPrice);
+                            $('.price strong').text(showPrice);
                         } else if (flag === 2) {
                             $('.computed_price').html('¥' + showPrice);
                         } else {
-                            $('.price strong').text('¥' + showPrice);
+                            $('.price strong').text(showPrice);
                             $('.computed_price').html('¥' + showPrice);
                         }
 

+ 117 - 9
src/web/staticres/css/wxbutton.css

@@ -1,12 +1,3 @@
-/* .j-button-group{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: 1.32rem!important;
-    padding: 0.16rem 0.32rem 0.16rem;
-    background-color: #fff;
-} */
 .j-button-group{
   display: flex;
   justify-content: space-between;
@@ -103,4 +94,121 @@ border-radius: 0.16rem;
   background: #2cb7ca;
   font-size: .36rem;
   color: #fff;
+}
+
+
+/* 订阅周期弹窗样式 */
+
+.sub_limit {
+  border-radius: 0.16rem;
+}
+.sub_limit .box_hd{
+  height: 1.28rem!important;
+  border-radius: 0.16rem;
+  background: #fff!important;
+  border-bottom: 0!important;
+}
+
+.sub_limit .box_hd .cancel{
+  /* background-image: url(/web/images/wxqc.png); */
+  background-size: 100% 100%;
+  z-index: 9999999;
+}
+
+.sub_limit .box_hd h3{
+  font-size: .4rem!important;
+}
+.sub_limit .box_bd .computed{
+  width: 100%;
+  padding: 0 .36rem!important;
+  /* border-bottom: 0!important; */
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.sub_limit .box_bd .computed .computed_price{
+  padding: 0!important;
+  border-bottom: 0!important;
+  font-weight: bold;
+  font-size: .4rem;
+  color: #FB483D;
+}
+
+.sub_limit .box_bd .computed .computed_mon{
+  font-weight: 500;
+  font-size: .32rem;
+  color: #FB483D;
+}
+
+.sub_limit .box_bd .bd_select .weui-cell__bd p{
+  font-size: .26rem;
+  color: #171826;
+}
+
+.sub_limit .box_bd .bd_select #number_box_month{
+  border-radius: 0.4rem;
+  background: #F5F6F7;
+  padding: 0.04rem;
+}
+
+.sub_limit .box_bd .bd_select .number_box .weui-btn{
+  border-radius: 0.4rem;
+  background: #fff;
+}
+
+.sub_limit .box_bd .bd_select .number_box .weui-btn[disabled]{
+  opacity: 1;
+}
+
+.sub_limit .box_bd .bd_select .number_box .month_number{
+  font-size: .36rem;
+  color: #171826;
+}
+
+.sub_limit .box_bd .bd_select .number_box .year_number{
+  width: 2.08rem;
+  border-radius: .08rem;
+  color:#5F5E64;
+  font-size: .32rem;
+  font-weight: 500;
+  border: 0;
+}
+
+.j-button-select {
+  padding: 6px 12px;
+  color: #5F5E64;
+  font-size: 14px;
+  background: #F5F6F7;
+  border-radius: 4px;
+}
+.j-button-select.active {
+  position: relative;
+  color: #2ABED1;
+  background: #E8FAFD;
+}
+.j-button-select.active::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background: url(/images/icon-check.png);
+  width: .28rem;
+  height: .28rem;
+  background-size: 100% 100%;
+}
+
+.jy_icon.decrease:before,
+.jy_icon.increase:before,
+.jy_icon.increase:after {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    content: '';
+    width: 0.4rem;
+    height: 0.04rem;
+    background-color: #C0C4CC!important;
+    transform: translate(-50%, -50%);
+}
+.jy_icon.increase:after {
+  transform: translate(-50%, -50%) rotate(90deg);
 }

+ 1 - 1
src/web/staticres/css/wxsearch.css

@@ -2016,7 +2016,7 @@ body{
 #entsearchPage .bottom_btn{
 	border-top: 1px solid #ccc;
 	width: 100%;
-	height: 45px;
+	/* height: 45px; */
 	display: block;
 	line-height: 45px;
 	position: fixed;

BIN
src/web/staticres/images/icon-check.png


+ 36 - 14
src/web/staticres/vipsubscribe/css/vip_purchase.css

@@ -38,7 +38,7 @@
 .bottom_button .left_btn {
     color: #2cb7ca;
     background-color: #fff;
-    border-top: 1px solid #e0e0e0;
+    /* border-top: 1px solid #e0e0e0; */
 }
 
 .bottom_button .right_btn {
@@ -381,11 +381,11 @@
 
 .radio-form {
     margin: 0;
-    padding: .17rem .05rem;
+    padding: .17rem .32rem;
     font-size: .26rem;
     background: transparent;
-    border-top: 1px solid #e0e0e0;
-    border-bottom: 1px solid #e0e0e0;
+    /* border-top: 1px solid #e0e0e0;
+    border-bottom: 1px solid #e0e0e0; */
 }
 
 .radio-form .weui-cell {
@@ -397,7 +397,7 @@
 } */
 
 .radio-form .read {
-    font-size: .26rem;
+    font-size: .24rem;
 }
 
 .radio-form .read a {
@@ -578,15 +578,27 @@
 .vip_purchase .fixed-bottom-box .price {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
-    padding: .12rem .12rem;
+    justify-content: space-between;
+    padding: 0 .32rem;
+}
+
+.vip_purchase .fixed-bottom-box .price .billing-list-btn .billing-mon{
+    font-size: .32rem;
+    color: #FB483D;
+}
+.vip_purchase .fixed-bottom-box .price .billing-list-btn .billing-price{
+    font-size: .4rem;
+    color: #FB483D;
+    font-weight: 600;
 }
 
-.vip_purchase .fixed-bottom-box .price span {
-    text-decoration: line-through;
+.vip_purchase .fixed-bottom-box .price .billing-total {
+    font-size: .24rem;
+    color: #9B9CA3;
+    /* text-decoration: line-through;
     font-size: .26rem;
     color: #888;
-    margin-right: .18rem;
+    margin-right: .18rem; */
 }
 
 .vip_purchase .fixed-bottom-box .price strong {
@@ -594,6 +606,14 @@
     color: #1d1d1d;
 }
 
+.weui-cells:before {
+    border-top: 0;
+  }
+  
+  .weui-cells:after {
+    border-bottom: 0;
+  }
+
 .vip_purchase .form-btn {
     display: flex;
     align-items: center;
@@ -777,16 +797,18 @@
 }
 
 .vip_purchase .time_cycle .number_box span.year_number {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 2rem;
-    height: .8rem;
-    line-height: .8rem;
+    height: .72rem;
     background-color: #F5F4F9;
     border: 1px solid #e0e0e0;
 }
 
 .vip_purchase .time_cycle .number_box span.year_number.active {
-    color: #fff;
-    background-color: #2cb7ca;
+    color: #2ABED1;
+    background-color: #E8FAFD;
 }
 
 .choose_item .show_time {

+ 9 - 2
src/web/templates/weixin/vipsubscribe/vip_introduce.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
     <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" href="/vipsubscribe/css/vip_introduce.css?v={{Msg "seo" "version"}}">
+    <link rel="stylesheet" href="{{Msg "seo" "cdn"}}/css/wxbutton.css?v={{Msg "seo" "version"}}5">
 </head>
 <body>
     <div class="vip_introduce">
@@ -127,9 +128,15 @@
         </div>
         <div class="menu">
             {{if not .T.notShowTrial }}
-            <a onclick="window.location.replace('/front/vipsubscribe/trialInfo')" class="try_btn">试用7天</a>
+            <div class="j-button-group">
+                <a onclick="window.location.replace('/front/vipsubscribe/trialInfo')" class="try_btn j-button-cancel1">试用7天</a>
+                <a onclick="window.location.replace('/weixin/pay/vipsubscribe_new')"  class="subscribe_btn j-button-confirm1">去订阅</a>
+            </div>
+            {{else}}
+            <div class="j-footer" style="width: 100%;">
+                <a onclick="window.location.replace('/weixin/pay/vipsubscribe_new')"  class="subscribe_btn j-button">去订阅</a>
+            </div>
             {{end}}
-            <a onclick="window.location.replace('/weixin/pay/vipsubscribe_new')"  class="subscribe_btn">去订阅</a>
         </div>
     </div>
     {{include "/common/weixin.html"}}

+ 30 - 19
src/web/templates/weixin/vipsubscribe/vip_purchase.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" href="/vipsubscribe/css/vip_purchase.css?v={{Msg "seo" "version"}}">
+    <link rel="stylesheet" href="{{Msg "seo" "cdn"}}/css/wxbutton.css?v={{Msg "seo" "version"}}5">
 </head>
 <body>
 <div>
@@ -141,6 +142,15 @@
             </div>
         </div>
         <div class="fixed-bottom-box">
+            <div class="price">
+                <!-- <strong>&yen;1,300.00</strong> -->
+                <span class="billing-total">合计:</span>
+                <!-- <strong>&yen;1,300.00</strong> -->
+                <div class="billing-list-btn">
+                    <span class="billing-mon">&yen;</span>
+                    <strong class="billing-price">5.80</strong>
+                </div>
+            </div>
             <div class="weui-cells weui-cells_checkbox radio-form">
                 <label class="weui-cell weui-check__label" for="buy">
                     <div class="weui-cell__hd">
@@ -157,22 +167,20 @@
                     </div>
                 </label>
             </div>
-            <div class="price">
-                <!-- <strong>&yen;1,300.00</strong> -->
-                <strong>&yen;5.80</strong>
-            </div>
-            <div class="form-btn">
-                <button class="btn enter" disabled id="payHandle">去支付</button>
+            <div class="form-btn j-footer">
+                <button class="btn enter j-button" disabled id="payHandle">去支付</button>
             </div>
         </div>
 
         <!-- 选择行业 -->
         <div class="js_dialog time_cycle" id="time_cycle" style="display: none;">
             <div class="weui-mask"></div>
-            <div class="box">
+            <div class="box sub_limit">
                 <div class="box_hd">
-                    <h3>订阅周期</h3>
-                    <span class="cancel">取消</span>
+                    <h3>选择订阅周期</h3>
+                    <span class="cancel">
+                        <img src="/images/wxqc.png" alt="" style="width: 0.36rem;">
+                    </span>
                 </div>
                 <div class="box_bd">
                     <!-- <div class="tips monthly_tips" style="display: none">
@@ -182,7 +190,10 @@
                             1-2年5折,3年4折
                         </div> -->
                     <!--<div class="tips profit_tips" style="display: none">已选择10个月,建议“按年订阅”</div>-->
-                    <div class="computed_price"></div>
+                    <div class="computed">
+                        <span class="computed_mon">¥</span>
+                        <div class="computed_price"></div>
+                    </div>
                     <div class="bd_select">
                         <div class="weui-cells weui-cells_checkbox choose-form">
                             <label class="weui-cell weui-check__label monthly_label" for="monthly">
@@ -218,15 +229,15 @@
                                 </div>
                             </label>
                             <div class="number_box" id="number_box_year" style="border: 0;">
-                                <span class="year_number" data-id="1">1年</span>
-                                <span class="year_number" data-id="2">2年</span>
-                                <span class="year_number" data-id="3">3年</span>
+                                <span class="year_number j-button-select" data-id="1">1年</span>
+                                <span class="year_number j-button-select" data-id="2">2年</span>
+                                <span class="year_number j-button-select" data-id="3">3年</span>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="form-btn">
-                    <button class="btn enter" id="enter_period">确认</button>
+                <div class="form-btn j-footer">
+                    <button class="btn enter j-button" id="enter_period">确认</button>
                 </div>
             </div>
         </div>
@@ -514,12 +525,12 @@
                     //var price = getsubVipOrderPrice(this.areaSelect, this.industrySelect, time, this.price);
                     var showPrice = formatMoney(price);
                     if (flag === 1) {
-                        $('.price strong').text('¥' + showPrice);
+                        $('.price strong').text(showPrice);
                     } else if (flag === 2) {
-                        $('.computed_price').html('¥' + showPrice);
+                        $('.computed_price').html(showPrice);
                     } else {
-                        $('.price strong').text('¥' + showPrice);
-                        $('.computed_price').html('¥' + showPrice);
+                        $('.price strong').text(showPrice);
+                        $('.computed_price').html(showPrice);
                     }
 
                 }