Bläddra i källkod

redesign: 登录页极简化,logo+按钮+错误提示,去除冗余文案

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 1 dag sedan
förälder
incheckning
565d5a269c
1 ändrade filer med 43 tillägg och 119 borttagningar
  1. 43 119
      charge-front/src/pages/login/login.vue

+ 43 - 119
charge-front/src/pages/login/login.vue

@@ -1,37 +1,22 @@
 <template>
-  <view class="login-page">
-    <view class="login-card">
-      <view class="brand">
-        <image
-          class="logo"
-          src="/static/images/map-logo.png"
-          mode="aspectFit"
-        />
-        <text class="brand-name">充电桩</text>
-      </view>
-
-      <view class="welcome mt-48">
-        <text class="heading">授权登录</text>
-        <text class="desc mt-12">使用微信手机号一键登录,即可开始充电</text>
-      </view>
-
-      <view class="actions mt-56">
-        <button
-          class="login-btn"
-          open-type="getPhoneNumber"
-          hover-class="login-btn-press"
-          :loading="submitting"
-          :disabled="submitting"
-          @getphonenumber="handleLogin"
-        >
-          {{ submitting ? '登录中...' : '微信手机号一键登录' }}
-        </button>
-        <text class="notice mt-20">授权仅用于账号注册,不会泄露隐私信息</text>
-      </view>
-
-      <view v-if="errorMsg" class="error mt-28">
-        <text>{{ errorMsg }}</text>
-      </view>
+  <view class="root">
+    <view class="center">
+      <image class="logo" src="/static/images/map-logo.png" mode="aspectFit" />
+
+      <view class="spacer" />
+
+      <button
+        class="btn"
+        open-type="getPhoneNumber"
+        hover-class="btn-press"
+        :loading="submitting"
+        :disabled="submitting"
+        @getphonenumber="handleLogin"
+      >
+        微信手机号一键登录
+      </button>
+
+      <text v-if="errorMsg" class="err">{{ errorMsg }}</text>
     </view>
   </view>
 </template>
@@ -57,48 +42,33 @@ onLoad((query: Record<string, string | undefined>) => {
 });
 
 const handleLogin = (e: WechatMiniprogram.ButtonGetPhoneNumber) => {
-  if (submitting.value) {
-    return;
-  }
+  if (submitting.value) return;
   errorMsg.value = "";
   submitting.value = true;
 
   login(e)
     .then(() => {
-      uni.showToast({
-        title: "登录成功",
-        icon: "success",
-        duration: 800,
-      });
-      setTimeout(() => {
-        performRedirect(redirect.value);
-      }, 800);
+      uni.showToast({ title: "登录成功", icon: "success", duration: 800 });
+      setTimeout(() => performRedirect(redirect.value), 800);
     })
     .catch(() => {
       submitting.value = false;
-      errorMsg.value = "登录失败,请检查网络后重试";
+      errorMsg.value = "登录失败,请重试";
     });
 };
 
 const performRedirect = (url: string) => {
-  if (url && isTabBarPage(url)) {
-    uni.switchTab({ url });
-    return;
-  }
+  if (url && isTabBarPage(url)) return uni.switchTab({ url });
   if (url) {
     uni.navigateBack({
-      fail() {
-        uni.switchTab({ url: "/pages/map/map" });
-      },
+      fail() { uni.switchTab({ url: "/pages/map/map" }); },
     });
     return;
   }
   const pages = getCurrentPages();
   if (pages.length > 1) {
     uni.navigateBack({
-      fail() {
-        uni.switchTab({ url: "/pages/map/map" });
-      },
+      fail() { uni.switchTab({ url: "/pages/map/map" }); },
     });
   } else {
     uni.switchTab({ url: "/pages/map/map" });
@@ -107,100 +77,54 @@ const performRedirect = (url: string) => {
 </script>
 
 <style lang="scss" scoped>
-.login-page {
+.root {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-sec);
-  padding: 48rpx;
+  padding: 64rpx 56rpx;
 }
 
-.login-card {
+.center {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.brand {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .logo {
-  width: 140rpx;
-  height: 140rpx;
-}
-
-.brand-name {
-  font-size: 36rpx;
-  font-weight: 600;
-  color: var(--color-primary);
-  margin-top: 16rpx;
-  letter-spacing: 8rpx;
-}
-
-.welcome {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.heading {
-  font-size: 40rpx;
-  font-weight: 700;
-  color: rgba(0, 0, 0, 0.85);
-  line-height: 1.3;
+  width: 200rpx;
+  height: 200rpx;
 }
 
-.desc {
-  font-size: 26rpx;
-  color: rgba(0, 0, 0, 0.45);
-  line-height: 1.5;
+.spacer {
+  height: 80rpx;
 }
 
-.actions {
+.btn {
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.login-btn {
-  width: 100%;
-  height: 96rpx;
+  height: 100rpx;
   background: var(--color-primary);
   color: #fff;
-  font-size: 30rpx;
+  font-size: 32rpx;
   font-weight: 600;
-  border-radius: 48rpx;
-  line-height: 96rpx;
+  border-radius: 50rpx;
+  line-height: 100rpx;
   border: none;
-  transition: opacity 0.2s;
+  letter-spacing: 2rpx;
 }
 
-.login-btn::after {
+.btn::after {
   border: none;
 }
 
-.login-btn-press {
-  opacity: 0.85;
-}
-
-.notice {
-  font-size: 22rpx;
-  color: rgba(0, 0, 0, 0.25);
-  text-align: center;
-}
-
-.error {
-  width: 100%;
-  text-align: center;
+.btn-press {
+  opacity: 0.82;
 }
 
-.error text {
+.err {
+  margin-top: 28rpx;
   font-size: 24rpx;
   color: var(--color-warning);
 }