视频连线

frontend/src/pages/auth/login.vue

@@ -80,8 +80,17 @@
           <view class="oauth-line"></view>
         </view>
         <view class="oauth-buttons">
-          <button class="oauth-btn oauth-wechat" :disabled="oauthLoading" @tap="oauthLogin('wechat')">微信登录</button>
+          <button class="oauth-btn oauth-wechat" :disabled="oauthLoading" @tap="oauthLogin('wechat')">
-          <button class="oauth-btn oauth-qq" :disabled="oauthLoading" @tap="oauthLogin('qq')">QQ登录</button>
+            <view class="oauth-icon oauth-icon-wechat">
+              <view class="wechat-bubble wechat-bubble-large"></view>
+              <view class="wechat-bubble wechat-bubble-small"></view>
+            </view>
+            <text>微信登录</text>
+          </button>
+          <button class="oauth-btn oauth-qq" :disabled="oauthLoading" @tap="oauthLogin('qq')">
+            <text class="oauth-icon oauth-icon-qq">Q</text>
+            <text>QQ登录</text>
+          </button>
         </view>
       </view>
 
@@ -433,6 +442,10 @@ export default {
   font-size: 28rpx;
   color: #FFFFFF;
   border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
 }
 
 .oauth-btn::after {
@@ -447,6 +460,49 @@ export default {
   background-color: #12B7F5;
 }
 
+.oauth-icon {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.94);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22rpx;
+  font-weight: 700;
+  line-height: 36rpx;
+}
+
+.oauth-icon-wechat {
+  position: relative;
+  color: #07C160;
+}
+
+.oauth-icon-qq {
+  color: #12B7F5;
+}
+
+.wechat-bubble {
+  position: absolute;
+  border-radius: 50%;
+  background-color: #07C160;
+}
+
+.wechat-bubble-large {
+  width: 18rpx;
+  height: 14rpx;
+  left: 8rpx;
+  top: 10rpx;
+}
+
+.wechat-bubble-small {
+  width: 14rpx;
+  height: 11rpx;
+  right: 7rpx;
+  bottom: 9rpx;
+  border: 2rpx solid #FFFFFF;
+}
+
 /* ---- 底部链接 ---- */
 .link-row {
   display: flex;