h5详情订阅按钮细节调整

src/views/report/Detail.vue

@@ -187,7 +187,7 @@ function handleGoTestRisk(){
 //跳转购买
 function goPrimary(){
   wx.miniProgram.reLaunch({
-    url: `/pages-order/payPage/index?id=${productId.value}`
+    url: `/pages-order/payPage/index?id=${productId}`
   })
 }
 </script>
@@ -367,16 +367,11 @@ function goPrimary(){
   <div class="no-auth-wrap" v-else-if="!isSubscribe && !isFree">
     <div class="opcity-box"></div>
     <div class="content-box subscribe-box">
-      <img class="icon subscribe" src="@/assets/imgs/lock.png" alt="" />
-      <div class="text" v-if="subscribeStatus==='expired'">您的权限已过期<br>若需继续查看可点击【立即订阅】</div>
-      <div class="text" v-if="subscribeStatus==='unSubscribe'">您暂无阅读权限<br>若感兴趣请点击【立即订阅】</div>
-      <!-- <div class="text" v-if="subscribeStatus==='unMatch'">您的风险等级无法查看此内容<br>请查看其他内容</div> -->
-      <!-- <t-button
-        theme="primary"
-        block
-        @click="handleGoTestRisk"
-        >风险测评</t-button
-      > -->
+      <div class="icon-box">
+        <img class="icon subscribe" src="@/assets/imgs/lock.png" alt="" />
+        <div class="text" v-if="subscribeStatus==='expired'">您的权限已过期<br>若需继续查看可点击【立即订阅】</div>
+        <div class="text" v-if="subscribeStatus==='unSubscribe'">您暂无阅读权限<br>若感兴趣请点击【立即订阅】</div>
+      </div>
       <div class="pay-btn">
           <div class="pay-btn-confirm">
               <div class="pay-btn-money">
@@ -386,6 +381,7 @@ function goPrimary(){
               <t-button
                 class="btn"
                 theme="primary"
+                shape="round"
                 block
                 @click="goPrimary"
                 >提交订单</t-button>
@@ -598,18 +594,23 @@ function goPrimary(){
     width: 100%;
   }
   .subscribe {
-    width: 50%;
+    width: 200px;
+    height: 200px;
     margin-bottom: 30px;
   }
+  .icon-box {
+    margin-bottom: 120px;
+  }
   .pay-btn {
     width: 100%;
     margin: 0 auto;
     background-color: #fff;
     border-radius: 16px;
-    padding: 60px 40px 40px 40px;
+    padding: 40px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    border-top: #C0C0C0 1px solid;
     // position: absolute;
     // bottom: 0;
     .pay-btn-cancel {
@@ -636,18 +637,8 @@ function goPrimary(){
             }
         }
         .btn {
-          
           width: 40%;
-          border-radius: 80px;
         }
-        // button {
-        //     margin: 0;
-        //     width: 268px;
-        //     height: 80px;
-        //     line-height: 80px;
-        //     border-radius: 80px;
-        //     background-color: #0078E8;
-        // }
     }
   }
 }

src/views/report/PDF.vue

@@ -120,7 +120,7 @@ function handleGoTestRisk(){
 //跳转购买
 function goPrimary(){
   wx.miniProgram.reLaunch({
-    url: `/pages-order/payPage/index?id=${productId.value}`
+    url: `/pages-order/payPage/index?id=${productId}`
   })
 }
 </script>
@@ -213,16 +213,11 @@ function goPrimary(){
   <div class="no-auth-wrap" v-else-if="!isSubscribe && !isFree">
     <div class="opcity-box"></div>
     <div class="content-box subscribe-box">
-      <img class="icon subscribe" src="@/assets/imgs/lock.png" alt="" />
-      <div class="text" v-if="subscribeStatus==='expired'">您的权限已过期<br>若需继续查看可点击【立即订阅】</div>
-      <div class="text" v-if="subscribeStatus==='unSubscribe'">您暂无阅读权限<br>若感兴趣请点击【立即订阅】</div>
-      <!-- <div class="text" v-if="subscribeStatus==='unMatch'">您的风险等级无法查看此内容<br>请查看其他内容</div> -->
-      <!-- <t-button
-        theme="primary"
-        block
-        @click="handleGoTestRisk"
-        >风险测评</t-button
-      > -->
+      <div class="icon-box">
+        <img class="icon subscribe" src="@/assets/imgs/lock.png" alt="" />
+        <div class="text" v-if="subscribeStatus==='expired'">您的权限已过期<br>若需继续查看可点击【立即订阅】</div>
+        <div class="text" v-if="subscribeStatus==='unSubscribe'">您暂无阅读权限<br>若感兴趣请点击【立即订阅】</div>
+      </div>
       <div class="pay-btn">
           <div class="pay-btn-confirm">
               <div class="pay-btn-money">
@@ -232,6 +227,7 @@ function goPrimary(){
               <t-button
                 class="btn"
                 theme="primary"
+                shape="round"
                 block
                 @click="goPrimary"
                 >提交订单</t-button>
@@ -376,18 +372,23 @@ function goPrimary(){
     width: 100%;
   }
   .subscribe {
-    width: 50%;
+    width: 200px;
+    height: 200px;
     margin-bottom: 30px;
   }
+  .icon-box {
+    margin-bottom: 120px;
+  }
   .pay-btn {
     width: 100%;
     margin: 0 auto;
     background-color: #fff;
     border-radius: 16px;
-    padding: 80px 40px 40px 40px;
+    padding: 40px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    border-top: #C0C0C0 1px solid;
     // position: absolute;
     // bottom: 0;
     .pay-btn-cancel {
@@ -414,18 +415,8 @@ function goPrimary(){
             }
         }
         .btn {
-          
           width: 40%;
-          border-radius: 80px;
         }
-        // button {
-        //     margin: 0;
-        //     width: 268px;
-        //     height: 80px;
-        //     line-height: 80px;
-        //     border-radius: 80px;
-        //     background-color: #0078E8;
-        // }
     }
   }
 }