更改快捷登录样式

pages4/login/login.vue

@@ -126,21 +126,19 @@
       </view>
       <!-- #ifdef MP-WEIXIN -->
       <view class="wxBtn">
+        <view class="wxBtn_title">
+          <view class="line"></view>
+          <view class="text">手机号快捷登录</view>
+          <view class="line"></view>
+        </view>
         <button
           type="default"
           open-type="getPhoneNumber"
           @getphonenumber="wxLogin"
-          class="wxloginBtn"
-        ></button>
-        <view
-          style="
-            text-align: center;
-            color: #999999;
-            font-size: 24rpx;
-            margin-top: 10rpx;
-          "
-          >微信快捷登录</view
+          class="wxloginBtn fl_c"
         >
+          <image mode="widthFix" src="/static/icon_phone.png"></image>
+        </button>
       </view>
       <!-- #endif -->
     </view>
@@ -613,6 +611,35 @@ export default {
   bottom: 10%;
   width: 100%;
   left: 0;
+  .wxBtn_title {
+    display: flex; //生成浏览器兼容性代码
+    width: 70%;
+    margin: 0 auto 48rpx;
+    .line {
+      flex: 1;
+      position: relative;
+      top: -16rpx;
+      border-bottom: 2rpx solid #d9d9d9;
+    }
+    .text {
+      padding: 0 28rpx;
+      font-size: 28rpx;
+      color: #666666;
+    }
+  }
+  .wxloginBtn {
+    margin: 0 auto;
+    width: 100rpx;
+    height: 100rpx;
+    background: #66c8f9;
+    border-radius: 50%;
+    border: none;
+    padding: 0;
+    image {
+      width: 64rpx;
+      height: 64rpx;
+    }
+  }
 }
 /deep/ .wxBtn button::after {
   border: none;
@@ -634,15 +661,6 @@ export default {
   }
 }
 
-.wxloginBtn {
-  margin: 0 auto;
-  background: url("/static/loginBtn.png") no-repeat;
-  background-size: 100% 100%;
-  border: none;
-  width: 100rpx;
-  height: 100rpx;
-}
-
 /deep/page {
   background-color: #ffffff;
   height: 100%;