style: 美化登录页面

src/pages/login/index.vue

@@ -1,57 +1,75 @@
 <template>
-  <view class="login-page">
+  <view class="login-container">
-    <view class="logo">
+    <!-- 背景装饰 -->
-      <text class="logo-text">🏠</text>
+    <view class="bg-decoration">
-      <text class="app-name">建材销售管家</text>
+      <view class="circle circle-1"></view>
+      <view class="circle circle-2"></view>
+      <view class="circle circle-3"></view>
     </view>
     
-    <!-- 手机号登录 -->
+    <!-- Logo区域 -->
-    <view class="login-form">
+    <view class="logo-section">
-      <view class="form-item">
+      <view class="logo-wrapper">
+        <text class="logo-icon">🏠</text>
+      </view>
+      <text class="app-title">建材销售管家</text>
+      <text class="app-subtitle">高效 · 便捷 · 专业</text>
+    </view>
+
+    <!-- 登录表单 -->
+    <view class="form-section">
+      <view class="input-group">
+        <view class="input-wrapper">
+          <text class="input-icon">📱</text>
           <input 
             class="input" 
             type="number" 
             v-model="phone" 
             placeholder="请输入手机号" 
             maxlength="11"
+            placeholder-class="placeholder"
           />
         </view>
-      <view class="form-item">
+      </view>
+      
+      <view class="input-group">
+        <view class="input-wrapper">
+          <text class="input-icon">🔒</text>
           <input 
             class="input" 
             type="number" 
             v-model="code" 
             placeholder="请输入验证码" 
             maxlength="6"
+            placeholder-class="placeholder"
           />
-        <button 
+          <view 
             class="code-btn" 
-          :disabled="countdown > 0" 
+            :class="{ disabled: countdown > 0 }" 
             @click="sendCode"
           >
             {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
-        </button>
           </view>
-      <button class="login-btn" @click="phoneLogin">登录</button>
+        </view>
       </view>
 
-    <!-- 其他登录方式 -->
+      <view class="login-btn-wrapper">
-    <view class="other-login">
+        <button class="login-btn" @click="phoneLogin">
-      <view class="divider">
+          <text>立即登录</text>
-        <view class="line"></view>
+        </button>
-        <text class="divider-text">其他登录方式</text>
-        <view class="line"></view>
       </view>
-      <view class="login-methods">
+      
-        <view class="method-item" @click="wechatLogin">
+      <view class="agreement">
-          <text class="method-icon">💬</text>
+        <text class="agreement-text">登录即表示同意</text>
-          <text class="method-text">微信登录</text>
+        <text class="link">《用户协议》</text>
-        </view>
+        <text class="agreement-text">和</text>
-        <view class="method-item" @click="alipayLogin">
+        <text class="link">《隐私政策》</text>
-          <text class="method-icon">💰</text>
-          <text class="method-text">支付宝登录</text>
       </view>
     </view>
+
+    <!-- 底部 -->
+    <view class="footer">
+      <text class="footer-text">© 2026 建材销售管家</text>
     </view>
   </view>
 </template>
@@ -68,7 +86,6 @@ export default {
     }
   },
   methods: {
-    // 发送验证码
     async sendCode() {
       if (!this.phone || this.phone.length !== 11) {
         uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
@@ -78,8 +95,6 @@ export default {
       try {
         await authApi.sendCode(this.phone)
         uni.showToast({ title: '验证码已发送', icon: 'success' })
-        
-        // 开始倒计时
         this.countdown = 60
         const timer = setInterval(() => {
           this.countdown--
@@ -92,7 +107,6 @@ export default {
       }
     },
 
-    // 手机号登录
     async phoneLogin() {
       if (!this.phone || this.phone.length !== 11) {
         uni.showToast({ title: '请输入手机号', icon: 'none' })
@@ -116,178 +130,235 @@ export default {
       } catch (e) {
         console.error(e)
       }
-    },
-
-    // 微信登录
-    async wechatLogin() {
-      // #ifdef MP-WEIXIN
-      uni.getProvider({
-        service: 'oauth',
-        success: (res) => {
-          if (res.provider.includes('weixin')) {
-            uni.login({
-              provider: 'weixin',
-              success: async (loginRes) => {
-                try {
-                  const data = await authApi.wechatLogin(loginRes.code)
-                  uni.setStorageSync('token', data.token)
-                  uni.setStorageSync('refreshToken', data.refreshToken)
-                  uni.setStorageSync('userId', data.userId)
-                  
-                  uni.showToast({ title: '登录成功', icon: 'success' })
-                  setTimeout(() => {
-                    uni.reLaunch({ url: '/pages/index/index' })
-                  }, 1000)
-                } catch (e) {
-                  console.error(e)
-                }
-              }
-            })
-          }
-        }
-      })
-      // #endif
-      // #ifndef MP-WEIXIN
-      uni.showToast({ title: '请在微信小程序中使用', icon: 'none' })
-      // #endif
-    },
-
-    // 支付宝登录
-    alipayLogin() {
-      // #ifdef MP-ALIPAY
-      my.getAuthCode({
-        scopes: 'auth_base',
-        success: async (res) => {
-          try {
-            const data = await authApi.alipayLogin(res.authCode)
-            uni.setStorageSync('token', data.token)
-            uni.setStorageSync('refreshToken', data.refreshToken)
-            uni.setStorageSync('userId', data.userId)
-            
-            uni.showToast({ title: '登录成功', icon: 'success' })
-            setTimeout(() => {
-              uni.reLaunch({ url: '/pages/index/index' })
-            }, 1000)
-          } catch (e) {
-            console.error(e)
-          }
-        }
-      })
-      // #endif
-      // #ifndef MP-ALIPAY
-      uni.showToast({ title: '请在支付宝小程序中使用', icon: 'none' })
-      // #endif
     }
   }
 }
 </script>
 
 <style>
-.login-page {
+.login-container {
-  padding: 100rpx 60rpx;
   min-height: 100vh;
-  background: #fff;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  position: relative;
+  overflow: hidden;
 }
 
-.logo {
+/* 背景装饰 */
+.bg-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.1;
+}
+
+.circle-1 {
+  width: 600rpx;
+  height: 600rpx;
+  background: #e94560;
+  top: -200rpx;
+  right: -200rpx;
+  animation: float 8s ease-in-out infinite;
+}
+
+.circle-2 {
+  width: 400rpx;
+  height: 400rpx;
+  background: #0f3460;
+  bottom: -100rpx;
+  left: -100rpx;
+  animation: float 10s ease-in-out infinite reverse;
+}
+
+.circle-3 {
+  width: 200rpx;
+  height: 200rpx;
+  background: #e94560;
+  top: 30%;
+  left: 10%;
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-30px) rotate(10deg); }
+}
+
+/* Logo区域 */
+.logo-section {
+  position: relative;
+  z-index: 1;
+  padding-top: 120rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 80rpx;
 }
 
-.logo-text {
+.logo-wrapper {
-  font-size: 120rpx;
+  width: 180rpx;
-}
+  height: 180rpx;
-
+  background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
-.app-name {
+  border-radius: 40rpx;
-  font-size: 36rpx;
-  font-weight: bold;
-  margin-top: 20rpx;
-}
-
-.login-form {
-  margin-bottom: 60rpx;
-}
-
-.form-item {
   display: flex;
   align-items: center;
-  border-bottom: 1rpx solid #eee;
+  justify-content: center;
-  padding: 20rpx 0;
+  box-shadow: 0 20rpx 60rpx rgba(233, 69, 96, 0.4);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.logo-icon {
+  font-size: 80rpx;
+}
+
+.app-title {
+  font-size: 44rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-top: 40rpx;
+  letter-spacing: 4rpx;
+}
+
+.app-subtitle {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.6);
+  margin-top: 16rpx;
+  letter-spacing: 8rpx;
+}
+
+/* 表单区域 */
+.form-section {
+  position: relative;
+  z-index: 1;
+  padding: 80rpx 60rpx;
+}
+
+.input-group {
   margin-bottom: 30rpx;
 }
 
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 16rpx;
+  padding: 0 30rpx;
+  height: 100rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s;
+}
+
+.input-wrapper:focus-within {
+  border-color: #e94560;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.input-icon {
+  font-size: 36rpx;
+  margin-right: 20rpx;
+}
+
 .input {
   flex: 1;
   font-size: 28rpx;
+  color: #fff;
+  height: 100%;
+}
+
+.placeholder {
+  color: rgba(255, 255, 255, 0.4);
 }
 
 .code-btn {
-  width: 200rpx;
+  padding: 16rpx 24rpx;
+  background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
+  border-radius: 8rpx;
   font-size: 24rpx;
-  background: #3cc51f;
   color: #fff;
-  border: none;
+  white-space: nowrap;
 }
 
-.code-btn[disabled] {
+.code-btn.disabled {
-  background: #ccc;
+  background: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.login-btn-wrapper {
+  margin-top: 50rpx;
 }
 
 .login-btn {
   width: 100%;
-  height: 88rpx;
+  height: 100rpx;
-  line-height: 88rpx;
+  line-height: 100rpx;
-  background: #3cc51f;
+  background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
   color: #fff;
-  border-radius: 44rpx;
+  border-radius: 50rpx;
   font-size: 32rpx;
+  font-weight: bold;
   border: none;
-  margin-top: 40rpx;
+  box-shadow: 0 10rpx 40rpx rgba(233, 69, 96, 0.4);
+  position: relative;
+  overflow: hidden;
 }
 
-.other-login {
+.login-btn::after {
-  margin-top: 60rpx;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  animation: shine 3s infinite;
 }
 
-.divider {
+@keyframes shine {
-  display: flex;
+  0% { left: -100%; }
-  align-items: center;
+  50%, 100% { left: 100%; }
-  margin-bottom: 40rpx;
 }
 
-.line {
+/* 协议 */
-  flex: 1;
+.agreement {
-  height: 1rpx;
-  background: #eee;
-}
-
-.divider-text {
-  padding: 0 20rpx;
-  color: #999;
-  font-size: 24rpx;
-}
-
-.login-methods {
   display: flex;
   justify-content: center;
+  margin-top: 40rpx;
+  flex-wrap: wrap;
 }
 
-.method-item {
+.agreement-text {
-  display: flex;
+  font-size: 22rpx;
-  flex-direction: column;
+  color: rgba(255, 255, 255, 0.5);
-  align-items: center;
-  margin: 0 40rpx;
 }
 
-.method-icon {
+.link {
-  font-size: 60rpx;
+  font-size: 22rpx;
+  color: #e94560;
+  margin: 0 4rpx;
 }
 
-.method-text {
+/* 底部 */
-  font-size: 24rpx;
+.footer {
-  color: #666;
+  position: absolute;
-  margin-top: 10rpx;
+  bottom: 60rpx;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+
+.footer-text {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.3);
 }
 </style>