更新

ghsApp/src/admin/home/login.vue

@@ -1,61 +1,105 @@
 <template>
-	<view class="app-main app-content">
-		<view class="model">
-			<view class="experFrame">
-			<view>
-				<view style="text-align:center;margin-bottom:10upx;">
-					<image :src="`${constant.imgUrl}/logo3.png`" class="logo" mode="widthFix"></image> 
+	<view class="login-page app-content">
+		<view class="login-hero">
+			<view class="status-space" :style="{ height: statusBarHeight + 'px' }"></view>
+			<view class="login-brand">
+				<view class="login-logo-wrap">
+					<image :src="`${constant.imgUrl}/logo3.png`" class="login-logo" mode="aspectFit"></image>
 				</view>
-				<view style="color:#666666;text-align:center;margin-bottom:30upx;margin-top:10upx;font-size:35upx;">销花宝</view>
+				<text class="login-brand-name">销花宝</text>
+			</view>
+		</view>
 
+		<view class="login-body">
+			<view class="login-card">
 				<template v-if="showAccountLogin">
-					<view>
-						<input @focus="mobile=''" v-model="mobile" class="experInput" placeholder="手机号" type="number" />
+					<view class="login-card-head">
+						<text class="login-card-title">账号密码登录</text>
 					</view>
-					<view>
-						<input @focus="password=''" v-model="password" class="experInput" placeholder="密码" type="password" />
+					<view class="login-form">
+						<view class="login-field">
+							<text class="login-label">手机号</text>
+							<input
+								@focus="mobile=''"
+								v-model="mobile"
+								class="login-input"
+								placeholder="请输入手机号"
+								type="number"
+							/>
+						</view>
+						<view class="login-field login-field--last">
+							<text class="login-label">密码</text>
+							<input
+								@focus="password=''"
+								v-model="password"
+								class="login-input"
+								placeholder="请输入密码"
+								type="password"
+							/>
+						</view>
+						<button class="login-btn login-btn--primary" @click="loginFun">登录</button>
 					</view>
-					<view style="margin-top:20upx;">
-						<button class="admin-button-com small blue buttonText" @click="loginFun">登陆</button>
+					<view class="login-agreement">
+						<checkbox-group @change="agreeItem">
+							<label class="login-agreement-label">
+								<checkbox value="1" class="login-checkbox" :checked="agree == 1" />
+								<text class="login-agreement-text">
+									我已阅读并同意
+									<text class="login-agreement-link" @click.stop="goToService">《服务协议》</text>
+									和
+									<text class="login-agreement-link" @click.stop="goToPrivacy">《隐私政策》</text>
+								</text>
+							</label>
+						</checkbox-group>
 					</view>
 				</template>
 
-			<!-- #ifdef MP-WEIXIN -->
-			<view style="margin-top:35upx;" v-if="showAccountLogin==false">
-				<view style="color:black;font-size:28upx;margin-top:20upx;">这是门店的管理后台，需获取你的手机号登录后</view>
-				<view style="color:black;font-size:28upx;margin-top:15upx;">才能使用相应功能，请谅解</view>
-				<view style="color:black;font-size:28upx;margin-top:15upx;margin-bottom:30upx;">如不需要，可以点击<text style="color:#3385FF;font-size:36upx;font-weight:bold;margin-left:8upx;" @click="goBack()">拒绝使用</text></view>
-			<button class="admin-button-com small buttonText" open-type="getPhoneNumber" @getphonenumber="wxPhoneLogin"
-			style="background-color:#2BA245;border-color:#2BA245;color:white;height:120upx;line-height:120upx;">手机号一键登录</button>
-			</view>
-			<!-- #endif -->
-			<!-- #ifdef APP-PLUS -->
-			<view style="margin-top:50upx;" v-if="showAccountLogin==false">
-			<button class="admin-button-com small blue buttonText" @click="mobileLogin()">本机号码一键登录</button>
-			</view>
-			<!-- #endif -->
-			<view style="color:#999999;font-size:25upx;margin-top:55upx;" v-if="showAccountLogin">
-				<checkbox-group @change="agreeItem">
-					<label style="display:flex;align-items:center;justify-content:center;">
-						<checkbox value="1" style="transform:scale(0.8)" :checked="agree == 1" />
-						<text>
-							我已阅读并同意
-							<text style="font-weight:bold;color:#666666;" @click.stop="goToService">《服务协议》</text>
-							和
-							<text style="font-weight:bold;color:#666666;" @click.stop="goToPrivacy">《隐私政策》</text>
+				<!-- #ifdef MP-WEIXIN -->
+				<view v-if="showAccountLogin == false" class="login-quick">
+					<view class="login-card-head">
+						<text class="login-card-title">手机号快捷登录</text>
+					</view>
+					<view class="login-tip-box">
+						<text class="login-tip-line">这是门店的管理后台，需获取你的手机号登录后才能使用相应功能，请谅解。</text>
+						<text class="login-tip-line login-tip-line--action">
+							如不需要，可点击
+							<text class="login-tip-link" @click="goBack()">拒绝使用</text>
 						</text>
-					</label>
-				</checkbox-group>
-			</view>
-			<view style="margin-top:55upx;color:#848181;font-size:38upx;width:100%;text-align:right;padding-right:70upx;" v-if="showAccountLogin==false">
-				<text style="margin-right:40upx;" @click="useAccount()">使用账号密码登录</text>
-				<text @click="register">注册账号</text>
-			</view>
-			<view style="margin-top:55upx;color:#848181;font-size:38upx;width:100%;text-align:right;padding-right:70upx;" v-else>
-				<text style="margin-right:40upx;" @click="useMoibleAccount()">使用手机号登录</text>
-				<text @click="register">注册账号</text>
-			</view>
-			</view>
+					</view>
+					<button
+						class="login-btn login-btn--weixin"
+						open-type="getPhoneNumber"
+						@getphonenumber="wxPhoneLogin"
+					>手机号一键登录</button>
+				</view>
+				<!-- #endif -->
+
+				<!-- #ifdef APP-PLUS -->
+				<view v-if="showAccountLogin == false" class="login-quick">
+					<view class="login-card-head">
+						<text class="login-card-title">本机号码快捷登录</text>
+					</view>
+					<view class="login-tip-box">
+						<text class="login-tip-line">使用本机号码快速登录销花宝</text>
+					</view>
+					<button class="login-btn login-btn--primary" @click="mobileLogin">本机号码一键登录</button>
+				</view>
+				<!-- #endif -->
+
+				<view class="login-footer-links">
+					<text
+						v-if="showAccountLogin == false"
+						class="login-footer-link"
+						@click="useAccount()"
+					>使用账号密码登录</text>
+					<text
+						v-else
+						class="login-footer-link"
+						@click="useMoibleAccount()"
+					>使用手机号登录</text>
+					<text class="login-footer-divider">|</text>
+					<text class="login-footer-link login-footer-link--register" @click="register">注册账号</text>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -78,12 +122,14 @@ export default {
 			password: '',
 			hasMobileNet:false,
 			agree:0,
-			showAccountLogin:false
+			showAccountLogin:false,
+			statusBarHeight: 0
 		}
 	},
 	computed: {
 	},
 	onLoad(){
+		this.setStatusBarHeight()
 		let that = this
 		uni.getNetworkType({
 			success: function (res) {
@@ -120,6 +166,14 @@ export default {
 	},
 	methods: {
 		...mapActions(['setUserShopAll']),
+		setStatusBarHeight() {
+			try {
+				const systemInfo = uni.getSystemInfoSync()
+				this.statusBarHeight = systemInfo.statusBarHeight || 0
+			} catch (e) {
+				this.statusBarHeight = 0
+			}
+		},
 		register(){
 			this.pageTo({url:'/pagesClient/official/apply',type:2})
 		},
@@ -488,73 +542,243 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.model {
-  position: fixed;
-  z-index: 9999;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  color: #fff;
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f3f6fb;
+}
+
+.login-hero {
+  padding: 0 24upx 12upx;
+  background: linear-gradient(180deg, #e8f0ff 0%, #eef3fb 72%, #f3f6fb 100%);
+}
+
+.status-space {
+  width: 100%;
+}
+
+.login-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10upx 0 36upx;
+}
+
+.login-logo-wrap {
+  width: 136upx;
+  height: 136upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
+  border-radius: 28upx;
+  background: #fff;
+  box-shadow: 0 10upx 28upx rgba(51, 133, 255, 0.14);
+}
+
+.login-logo {
+  width: 112upx;
+  height: 112upx;
+  display: block;
+}
+
+.login-brand-name {
+  margin-top: 28upx;
+  color: #161819;
+  font-size: 52upx;
+  font-weight: 800;
+  line-height: 60upx;
+}
+
+.login-brand-desc {
+  margin-top: 12upx;
+  color: #2f3a45;
+  font-size: 30upx;
+  line-height: 42upx;
+  font-weight: 600;
+}
+
+.login-brand-sub {
+  margin-top: 8upx;
+  color: #6b737c;
+  font-size: 26upx;
+  line-height: 38upx;
+}
+
+.login-body {
+  flex: 1;
+  padding: 0 24upx 64upx;
+}
+
+.login-card {
+  padding: 32upx 28upx 28upx;
+  border-radius: 24upx;
+  background: #fff;
+  box-shadow: 0 10upx 28upx rgba(24, 37, 50, 0.06);
+}
+
+.login-card-head {
+  margin-bottom: 28upx;
+  text-align: center;
+}
+
+.login-card-title {
+  color: #182030;
+  font-size: 34upx;
+  font-weight: 700;
+  line-height: 48upx;
+}
+
+.login-form {
+  width: 100%;
+}
+
+.login-field {
+  margin-bottom: 24upx;
+}
+
+.login-field--last {
+  margin-bottom: 36upx;
+}
+
+.login-label {
+  display: block;
+  margin-bottom: 12upx;
+  color: #5c6673;
+  font-size: 26upx;
+  line-height: 36upx;
+}
+
+.login-input {
+  width: 100%;
+  height: 92upx;
+  padding: 0 28upx;
+  box-sizing: border-box;
+  border: 1upx solid #e3e8f0;
+  border-radius: 18upx;
+  background: #f7f9fc;
+  color: #161819;
+  font-size: 30upx;
+  text-align: left;
+}
+
+.login-btn {
+  width: 100%;
+  height: 96upx;
+  margin: 0;
+  padding: 0;
+  line-height: 96upx;
+  border: none;
+  border-radius: 999upx;
+  font-size: 32upx;
+  font-weight: 600;
+  text-align: center;
+}
+
+.login-btn::after {
+  border: none;
+}
+
+.login-btn--primary {
+  color: #fff;
+  background: linear-gradient(90deg, #3385ff 0%, #33b0ff 100%);
+  box-shadow: 0 10upx 24upx rgba(51, 133, 255, 0.24);
+}
+
+.login-btn--weixin {
+  color: #fff;
+  background: #2ba245;
+  box-shadow: 0 10upx 24upx rgba(43, 162, 69, 0.2);
+}
+
+.login-agreement {
+  margin-top: 28upx;
+}
+
+.login-agreement-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.login-checkbox {
+  transform: scale(0.82);
+  flex-shrink: 0;
+}
+
+.login-agreement-text {
+  flex: 1;
+  margin-left: 8upx;
+  color: #8a9199;
+  font-size: 24upx;
+  line-height: 36upx;
+  text-align: left;
+}
+
+.login-agreement-link {
+  color: #3385ff;
+  font-weight: 600;
+}
+
+.login-quick {
+  width: 100%;
+}
+
+.login-tip-box {
+  margin-bottom: 32upx;
+  padding: 24upx 22upx;
+  border-radius: 18upx;
+  background: #f7f9fc;
+}
+
+.login-tip-line {
+  display: block;
+  color: #5c656d;
+  font-size: 28upx;
+  line-height: 44upx;
   text-align: center;
-  & > .noData_img {
-    width: 318upx;
-    height: 318upx;
-    margin: 332upx auto 0;
-  }
-  & > .no_data_text {
-    font-size: 32upx;
-    color: #ffffff;
-    text-align: center;
-    margin: 50upx 0;
-  }
-  & > .freeApply {
-    width: 376upx;
-    height: 88upx;
-    line-height: 88upx;
-    background: linear-gradient(90deg, #3385ff, #33b0ff);
-    border-radius: 44upx;
-    margin: 0 auto;
-    font-size: 32upx;
-    color: #ffffff;
-    text-align: center;
-  }
-  &>.experience{
-    margin-top: 40upx;
-    color: #fff;
-    font-size: 30upx;
-  }
-  &>.experFrame{
-      margin-top:20upx;
-      height: 50upx;
-      .experInput{
-        height: 80upx;
-        width: 550upx;
-        margin-bottom:38upx;
-        display: inline-block;
-        vertical-align: middle;
-        background-color: #f5f5f5;
-        border:none;
-        border-bottom: 1px solid #CCCCCC;
-        color: #666;
-        padding-left: 20upx;
-        box-sizing: border-box;
-        text-align: left;
-      }
-      .buttonText{
-        display: inline-block;
-        line-height:92upx;
-        padding: 0 20upx;
-        vertical-align: middle;
-        font-size: 32upx;
-        width: 550upx;
-        height:90upx;
-      }
-      .logo{
-        width:160upx;
-        margin:0 auto;
-      }
-  }
+}
+
+.login-tip-line + .login-tip-line {
+  margin-top: 12upx;
+}
+
+.login-tip-line--action {
+  margin-top: 16upx;
+}
+
+.login-tip-link {
+  margin-left: 8upx;
+  color: #3385ff;
+  font-size: 28upx;
+  font-weight: 700;
+}
+
+.login-footer-links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: 36upx;
+  padding-top: 28upx;
+  border-top: 1upx solid #f0f2f5;
+}
+
+.login-footer-link {
+  color: #6b737c;
+  font-size: 28upx;
+  line-height: 40upx;
+}
+
+.login-footer-divider {
+  margin: 0 20upx;
+  color: #d8dee8;
+  font-size: 24upx;
+}
+
+.login-footer-link--register {
+  color: #3385ff;
+  font-weight: 600;
 }
 </style>

hdApp/src/components/not-login.vue

@@ -1,22 +1,13 @@
 <template>
-  <view class="model" v-if="showModel" @click="pageTo({url:'/admin/home/login'})">
-    <view class="login-tip" @click.stop="pageTo({url:'/admin/home/login'})">
-      <view class="login-icon">🔒</view>
-      <view class="login-title">您尚未登录</view>
-      <view class="login-desc">点击此处前往登录，使用完整功能</view>
-      <view class="login-btn">登录</view>
-    </view>
-  </view>
+  <view class="model" v-if="showModel" @click="goLogin"></view>
 </template>
 <script>
 import { mapGetters } from "vuex";
 export default {
 	name: "not-login",
-	components: {},
-	mixins: [],
   data() {
 		return {
-      showModel:false
+      showModel: false
     }
   },
 	computed: {
@@ -27,15 +18,18 @@ export default {
       immediate: true,
       deep: true,
 			handler(newValue) {
-        if(!this.$util.isEmpty(newValue) && !this.$util.isEmpty(newValue.admin) && newValue.admin.currentShopId > 0){
+        if (!this.$util.isEmpty(newValue) && !this.$util.isEmpty(newValue.admin) && newValue.admin.currentShopId > 0) {
           this.showModel = false
-        }else{
+        } else {
           this.showModel = true
         }
 			}
 		}
 	},
   methods: {
+    goLogin() {
+      this.pageTo({ url: '/admin/home/login' })
+    }
   }
 }
 </script>
@@ -47,40 +41,6 @@ export default {
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.login-tip {
-  width: 560upx;
-  padding: 60upx 40upx;
-  background: #fff;
-  border-radius: 20upx;
-  text-align: center;
-  box-shadow: 0 8upx 32upx rgba(0, 0, 0, 0.2);
-}
-.login-icon {
-  font-size: 80upx;
-  margin-bottom: 20upx;
-}
-.login-title {
-  font-size: 36upx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 16upx;
-}
-.login-desc {
-  font-size: 26upx;
-  color: #888;
-  margin-bottom: 40upx;
-}
-.login-btn {
-  display: inline-block;
-  padding: 18upx 80upx;
-  background: #09C567;
-  font-size: 30upx;
-  border-radius: 50upx;
-  color: #fff;
+  background: transparent;
 }
-</style>
+</style>