2

rc-busness/pages/personal/userpay.vue

@@ -2,6 +2,7 @@
   <div>
     <Myheader></Myheader>
     <div class="rc-main">
+      <div class="online" style="height:3px;width:93%;margin:0 auto;background:#DDDDDD;margin-top:0.23rem"></div>
       <div class="rc-hearder">
         <div class="rc-userpay">
          <div class="paysucess">
@@ -18,6 +19,7 @@
             <i>{{ userinformation }}</i>
           </div>
           </div>
+          <div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
           <div class="rc-usermaina">
     <div class="rc-title" id="qrcode" ref="qrcode" >
      </div> 
@@ -28,6 +30,7 @@
           <span>请选择支付方式</span>
         </div>
 
+ <div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
         <div class="paystype">
           <div
             class="payAlipay"
@@ -172,6 +175,7 @@ text: e// 设置二维码内容或跳转地址
          display: flex;
          align-items: center;
          justify-content: center;
+         display: none;
   }
   .rc-userpay{
     display: none;
@@ -190,9 +194,13 @@ text: e// 设置二维码内容或跳转地址
       font-size: 26px;
     }
   .rc-title{
+    display: flex;
+    margin-top: 30px;
+    display: none;
      img{
        width: 96px;
        height: 96px;
+       margin-left: 40px;
 
      }
   }
@@ -232,6 +240,7 @@ color: #E1001A;
 }
   .rc-main {
     width: 100%;
+    margin-top: 24%;
     .paysucess{
         display: none;
     }
@@ -251,7 +260,11 @@ color: #E1001A;
         flex-direction: column;
         justify-content: center;
         .rc-all{
-          display: none;
+          height: 96px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+          // display: none;
         }
         .rc-payprice {
           display: flex;
@@ -293,7 +306,9 @@ color: #E1001A;
       }
 
       .rc-paystype {
-        margin-top: 53px;
+             height:64px;
+             display: flex;
+             align-items: center;
         span {
           font-size: 16px;
 
@@ -336,6 +351,13 @@ color: #E1001A;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1920px) {
+    .rc-usermaina{
+         width: 100%;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         display: block;
+  }
 
     /deep/.el-dialog {
  width: 440px;
@@ -362,6 +384,7 @@ color: #E1001A;
     position: absolute;
     left: 50%;
     margin-left: -75px;
+    display: block;
     top: 59%;
      img{
        width: 96px;