更新用户登录功能

miniprogram/pages/user-login/user-login.wxml

@@ -1,8 +1,104 @@
-<view class="avatar-box">
-  <t-avatar class="avatar-example" image="{{image}}"  size="100px"/>
-</view>
+<view class="login-container">
 
-<view class="button">
-  <t-button theme="primary" size="large" block open-type="getPhoneNumber" getphonenumber="wxPhone">授权手机号登录</t-button>
-  <t-button size="large" block>手机号登录</t-button>
+
+  <view class="custom-nav">
+        <view class="back-btn" bindtap="onBack">
+          <t-icon name="arrow-left" size="48rpx" data-name="{{item}}" bind:click="onIconTap" />
+        </view>
+    </view>
+    <!-- 装饰性背景元素 -->
+    <view class="bg-decoration bg-decoration-1"></view>
+    <view class="bg-decoration bg-decoration-2"></view>
+
+    <!-- 登录卡片 -->
+    <view class="login-card">
+        <!-- 顶部品牌区域 -->
+        <view class="brand-area">
+            <view class="brand-icon">
+                <icon type="success" size="36" color="#3B82F6"></icon>
+            </view>
+            <text class="brand-title">欢迎回来</text>
+            <text class="brand-desc">请登录您的账号继续使用</text>
+        </view>
+
+        <!-- 头像区域 -->
+        <view class="avatar-area">
+            <view class="avatar-wrapper">
+                <image 
+                    class="avatar" 
+                    src="http://localhost:9005/system/login/微信截图_20250807220916.png" 
+                    mode="widthFix"
+                    lazy-load
+                ></image>
+                <view class="avatar-edit">
+                    <icon type="camera" size="16" color="#fff"></icon>
+                </view>
+            </view>
+        </view>
+
+        <!-- 登录按钮区域 -->
+        <view class="button-group">
+            <!-- 微信授权登录按钮 -->
+            <button 
+                class="login-btn wechat-btn" 
+                hover-class="btn-hover"
+                open-type="getPhoneNumber" bindgetphonenumber="wxPhone"
+            >
+                <icon class="btn-icon" type="success" size="20"></icon>
+                <text class="btn-text">微信授权登录</text>
+            </button>
+            <t-toast id="t-toast" />
+
+            <!-- 手机号登录按钮 -->
+            <button 
+                class="login-btn phone-btn" 
+                bindtap="goPhoneLogin"
+                hover-class="btn-hover"
+            >
+                <icon class="btn-icon" type="phone" size="20"></icon>
+                <text class="btn-text">手机号登录</text>
+            </button>
+        </view>
+
+        <!-- 其他登录方式 -->
+        <view class="other-login">
+            <view class="divider">
+                <view class="divider-line"></view>
+                <text class="divider-text">其他登录方式</text>
+                <view class="divider-line"></view>
+            </view>
+            
+            <view class="other-buttons">
+                <button 
+                    class="other-btn" 
+                    hover-class="other-btn-hover"
+                    bindtap="loginWithQQ"
+                >
+                    <icon type="qq" size="24"></icon>
+                </button>
+                <button 
+                    class="other-btn" 
+                    hover-class="other-btn-hover"
+                    bindtap="loginWithWeibo"
+                >
+                    <icon type="weibo" size="24"></icon>
+                </button>
+                <button 
+                    class="other-btn" 
+                    hover-class="other-btn-hover"
+                    bindtap="loginWithEmail"
+                >
+                    <icon type="mail" size="24"></icon>
+                </button>
+            </view>
+        </view>
+
+        <!-- 底部链接 -->
+        <view class="footer">
+            <text class="footer-text">登录即表示同意我们的</text>
+            <navigator url="/pages/agreement/agreement" class="footer-link">用户协议</navigator>
+            <text class="footer-text">和</text>
+            <navigator url="/pages/privacy/privacy" class="footer-link">隐私政策</navigator>
+        </view>
+    </view>
 </view>