[ 零售后台管理 ][ 254 ] 更换登录首页

hd/src/pages/layout/topbar/index.vue

@@ -27,7 +27,7 @@
 		<div class="user" v-if="userInfo">
 			<el-dropdown trigger="click" :hide-on-click="false" @command="onCommand">
 				<span class="el-dropdown-link">
-					<span class="name">{{ userInfo.nickName | default_name }}</span>
+					<span class="name">{{ userInfo.name | default_name }}</span>
 					<img class="avatar" :src="userInfo.avatarUrl | default_avatar" alt="头像" />
 					<i class="el-icon-caret-bottom"></i>
 				</span>

hd/src/pages/login/index.vue

@@ -1,25 +1,10 @@
 <template>
-	<div class="scope">
-		<ul class="bg-bubbles">
-			<li></li>
-			<li></li>
-			<li></li>
-			<li></li>
-			<li></li>
-			<li></li>
-			<li></li>
-			<li></li>
-			<li></li>
-			<li></li>
-		</ul>
-
-		<div class="tmp2">
-			<div class="title" style="color: #25aff3">
-				<!-- <icon-svg name="logo-t-lr"></icon-svg> -->
-				花卉宝
-			</div>
-
-			<el-form ref="form" class="form" size="medium" :disabled="saving">
+  <div class="loginPage">
+    <div class="login_main">
+      <div class="login_left"></div>
+      <div class="login_right">
+        <p>欢迎登录</p>
+        <el-form ref="form" class="form" size="medium" :disabled="saving">
 				<el-form-item label="用户名">
 					<el-input
 						placeholder="请输入用户名"
@@ -40,253 +25,114 @@
 						@keyup.enter.native="next"
 					></el-input>
 				</el-form-item>
-
-				<!-- <el-form-item label="验证码" class="captcha">
-					<el-input
-						placeholder="请输入图片验证码"
-						maxlength="4"
-						v-model="form.verifyCode"
-						auto-complete="off"
-						@keyup.enter.native="next"
-					></el-input>
-
-					<captcha
-						ref="captcha"
-						class="value"
-						v-model="form.captchaId"
-						@change="captchaChange"
-					></captcha>
-				</el-form-item> -->
-
 				<el-button class="submit-btn" @click="next" :saving="saving">登录</el-button>
 			</el-form>
-		</div>
-	</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-// import { isPc } from '@/cool/utils/index';
 import index from './index';
-
 export default {
 	mixins: [index],
 
 	created() {
-		// if (!isPc()) {
-		// 	this.$router.push('/login-h5');
-		// }
 	}
 };
 </script>
 
 <style lang="stylus" scoped>
-.scope {
-	height: 100vh;
+.loginPage{
+  height: 100vh;
 	width: 100vw;
 	position: relative;
-
-	.tmp2 {
-		height: 383px;
-		width: 767px;
-		border-radius: 10px;
-		overflow: hidden;
-		position: absolute;
-		left: calc(50% - 384px);
-		top: calc(50% - 192px);
-		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
-
-		&:before {
-			content: '';
-			background-image: url('../../assets/images/login-bg.png');
-			background-size: 100% 100%;
-			position: absolute;
-			left: 0px;
-			right: 0;
-			height: 383px;
-			width: 767px;
-			z-index: 1;
-		}
-
-		&:after {
-			content: '';
-			background: linear-gradient(to right, $color, $color2);
-			position: absolute;
-			left: 0px;
-			right: 0;
-			height: 383px;
-			width: 767px;
-			z-index: 0;
-		}
-
-		.title {
-			position: absolute;
-			left: 25px;
-			top: 10px;
-			z-index: 1;
-			font-size: 20px;
-			letter-spacing: 1px;
-			text-shadow: 1px 2px 10px rgba(0, 0, 0, 0.4);
-
-			.icon-svg {
-				height: 40px;
-				width: 180px;
-			}
-		}
-
-		.el-form {
-			height: 280px;
-			width: 280px;
-			border-radius: 3px;
-			position: absolute;
-			right: 42px;
-			top: 45px;
-			z-index: 1;
-
-			.el-form-item {
-				margin-bottom: 5px;
-			}
-
-			>>>.el-input {
-				.el-input__inner {
-					border: 0;
-					box-shadow: 0 0 0px 1000px #fefcfe inset;
-					border-radius: 0;
-					padding: 0 5px;
-				}
-			}
-
-			.captcha {
-				position: relative;
-
-				.value {
-					position: absolute;
-					bottom: 0;
-					right: 0;
-				}
-			}
-
-			.submit-btn {
-				width: 100%;
-				background: linear-gradient(to top left, $color, $color2);
-				color: #fff;
-				font-size: 15px;
-				letter-spacing: 2px;
-				cursor: pointer;
-				margin-top: 20px;
-			}
-		}
-	}
-
-	.bg-bubbles {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		background: linear-gradient(to bottom right, $color, $color2);
-	}
-
-	.bg-bubbles li {
-		position: absolute;
-		bottom: -160px;
-		width: 40px;
-		height: 40px;
-		background-color: rgba(255, 255, 255, 0.15);
-		list-style: none;
-		animation: square 15s infinite;
-		transition-timing-function: linear;
-		border-radius: 50%;
-	}
-
-	.bg-bubbles li:nth-child(1) {
-		left: 10%;
-	}
-
-	.bg-bubbles li:nth-child(2) {
-		left: 20%;
-		width: 90px;
-		height: 90px;
-		animation-delay: 2s;
-		animation-duration: 7s;
-	}
-
-	.bg-bubbles li:nth-child(3) {
-		left: 25%;
-		animation-delay: 4s;
-	}
-
-	.bg-bubbles li:nth-child(4) {
-		left: 40%;
-		width: 60px;
-		height: 60px;
-		animation-duration: 8s;
-		background-color: rgba(255, 255, 255, 0.3);
-	}
-
-	.bg-bubbles li:nth-child(5) {
-		left: 70%;
-	}
-
-	.bg-bubbles li:nth-child(6) {
-		left: 80%;
-		width: 120px;
-		height: 120px;
-		animation-delay: 3s;
-		background-color: rgba(255, 255, 255, 0.2);
-	}
-
-	.bg-bubbles li:nth-child(7) {
-		left: 32%;
-		width: 160px;
-		height: 160px;
-		animation-delay: 2s;
-	}
-
-	.bg-bubbles li:nth-child(8) {
-		left: 55%;
-		width: 20px;
-		height: 20px;
-		animation-delay: 4s;
-		animation-duration: 15s;
-	}
-
-	.bg-bubbles li:nth-child(9) {
-		left: 25%;
-		width: 10px;
-		height: 10px;
-		animation-delay: 2s;
-		animation-duration: 12s;
-		background-color: rgba(255, 255, 255, 0.3);
-	}
-
-	.bg-bubbles li:nth-child(10) {
-		left: 85%;
-		width: 160px;
-		height: 160px;
-		animation-delay: 5s;
-	}
-
-	@keyframes square {
-		0% {
-			opacity: 0.5;
-			transform: translateY(0px) rotate(45deg);
-		}
-
-		25% {
-			opacity: 0.75;
-			transform: translateY(-400px) rotate(90deg);
-		}
-
-		50% {
-			opacity: 1;
-			transform: translateY(-600px) rotate(135deg);
-		}
-
-		100% {
-			opacity: 0;
-			transform: translateY(-1000px) rotate(180deg);
-		}
-	}
+  background: #3385FF;
+  &>.login_main{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 1017px;
+    height: 572px;
+    background: #fff;
+    &>div{
+      width: 50%;
+      height: 100%;
+      display: inline-block;
+    }
+    &>.login_left{
+      vertical-align: top;
+      background: url('../../assets/images/login-bg1.png') no-repeat center;
+      background-size: cover;
+    }
+    &>.login_right{
+      border-left: 1px dashed #333;
+      vertical-align: top;
+      padding-left: 67px;
+      box-sizing: border-box;
+      &>p{
+        margin-top: 64px;
+        margin-bottom: 43px;
+        font-size: 32px;
+        font-weight: 500;
+        color: #3385FF;
+      }
+      .el-form {
+        // height:30vh;
+        width: 83%;
+        border-radius: 3px;
+        // position: absolute;
+        // right: 42px;
+        // top: 45px;
+        z-index: 1;
+
+        .el-form-item {
+          margin-bottom: 5px;
+        }
+        >>>.el-form-item__label{
+          color: #9289A6;
+          font-size: 16px;
+          line-height 33px;
+        }
+        >>>.el-input {
+          height: 48px;
+          border-radius: 8px;
+          .el-input__inner {
+            // border: 0;
+            // box-shadow: 0 0 0px 1000px #fefcfe inset;
+            // border-radius: 0;
+            // padding: 0 5px;
+            height: 100%;
+            border: 1px solid #B1B3CC;
+            font-size: 16px;
+          }
+        }
+
+        .captcha {
+          position: relative;
+
+          .value {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+          }
+        }
+
+        .submit-btn {
+          width: 100%;
+          height: 45px;
+          margin-top: 50px;
+          background: #3385FF;
+          border-radius: 40px;
+          font-size: 18px;
+          font-weight: 400;
+          letter-spacing: 10px;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
 }
-</style>
+
+</style>

hd/src/pages/login/index1.vue

@@ -0,0 +1,292 @@
+<template>
+	<div class="scope">
+		<ul class="bg-bubbles">
+			<li></li>
+			<li></li>
+			<li></li>
+			<li></li>
+			<li></li>
+			<li></li>
+			<li></li>
+			<li></li>
+			<li></li>
+			<li></li>
+		</ul>
+
+		<div class="tmp2">
+			<div class="title" style="color: #25aff3">
+				<!-- <icon-svg name="logo-t-lr"></icon-svg> -->
+				花卉宝
+			</div>
+
+			<el-form ref="form" class="form" size="medium" :disabled="saving">
+				<el-form-item label="用户名">
+					<el-input
+						placeholder="请输入用户名"
+						v-model="form.mobile"
+						maxlength="20"
+						@keyup.enter.native="next"
+						auto-complete="off"
+					></el-input>
+				</el-form-item>
+
+				<el-form-item label="密码">
+					<el-input
+						type="password"
+						placeholder="请输入密码"
+						v-model="form.password"
+						maxlength="20"
+						auto-complete="off"
+						@keyup.enter.native="next"
+					></el-input>
+				</el-form-item>
+
+				<!-- <el-form-item label="验证码" class="captcha">
+					<el-input
+						placeholder="请输入图片验证码"
+						maxlength="4"
+						v-model="form.verifyCode"
+						auto-complete="off"
+						@keyup.enter.native="next"
+					></el-input>
+
+					<captcha
+						ref="captcha"
+						class="value"
+						v-model="form.captchaId"
+						@change="captchaChange"
+					></captcha>
+				</el-form-item> -->
+
+				<el-button class="submit-btn" @click="next" :saving="saving">登录</el-button>
+			</el-form>
+		</div>
+	</div>
+</template>
+
+<script>
+// import { isPc } from '@/cool/utils/index';
+import index from './index';
+
+export default {
+	mixins: [index],
+
+	created() {
+		// if (!isPc()) {
+		// 	this.$router.push('/login-h5');
+		// }
+	}
+};
+</script>
+
+<style lang="stylus" scoped>
+.scope {
+	height: 100vh;
+	width: 100vw;
+	position: relative;
+
+	.tmp2 {
+		height: 383px;
+		width: 767px;
+		border-radius: 10px;
+		overflow: hidden;
+		position: absolute;
+		left: calc(50% - 384px);
+		top: calc(50% - 192px);
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+
+		&:before {
+			content: '';
+			background-image: url('../../assets/images/login-bg.png');
+			background-size: 100% 100%;
+			position: absolute;
+			left: 0px;
+			right: 0;
+			height: 383px;
+			width: 767px;
+			z-index: 1;
+		}
+
+		&:after {
+			content: '';
+			background: linear-gradient(to right, $color, $color2);
+			position: absolute;
+			left: 0px;
+			right: 0;
+			height: 383px;
+			width: 767px;
+			z-index: 0;
+		}
+
+		.title {
+			position: absolute;
+			left: 25px;
+			top: 10px;
+			z-index: 1;
+			font-size: 20px;
+			letter-spacing: 1px;
+			text-shadow: 1px 2px 10px rgba(0, 0, 0, 0.4);
+
+			.icon-svg {
+				height: 40px;
+				width: 180px;
+			}
+		}
+
+		.el-form {
+			height: 280px;
+			width: 280px;
+			border-radius: 3px;
+			position: absolute;
+			right: 42px;
+			top: 45px;
+			z-index: 1;
+
+			.el-form-item {
+				margin-bottom: 5px;
+			}
+
+			>>>.el-input {
+				.el-input__inner {
+					border: 0;
+					box-shadow: 0 0 0px 1000px #fefcfe inset;
+					border-radius: 0;
+					padding: 0 5px;
+				}
+			}
+
+			.captcha {
+				position: relative;
+
+				.value {
+					position: absolute;
+					bottom: 0;
+					right: 0;
+				}
+			}
+
+			.submit-btn {
+				width: 100%;
+				background: linear-gradient(to top left, $color, $color2);
+				color: #fff;
+				font-size: 15px;
+				letter-spacing: 2px;
+				cursor: pointer;
+				margin-top: 20px;
+			}
+		}
+	}
+
+	.bg-bubbles {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		background: linear-gradient(to bottom right, $color, $color2);
+	}
+
+	.bg-bubbles li {
+		position: absolute;
+		bottom: -160px;
+		width: 40px;
+		height: 40px;
+		background-color: rgba(255, 255, 255, 0.15);
+		list-style: none;
+		animation: square 15s infinite;
+		transition-timing-function: linear;
+		border-radius: 50%;
+	}
+
+	.bg-bubbles li:nth-child(1) {
+		left: 10%;
+	}
+
+	.bg-bubbles li:nth-child(2) {
+		left: 20%;
+		width: 90px;
+		height: 90px;
+		animation-delay: 2s;
+		animation-duration: 7s;
+	}
+
+	.bg-bubbles li:nth-child(3) {
+		left: 25%;
+		animation-delay: 4s;
+	}
+
+	.bg-bubbles li:nth-child(4) {
+		left: 40%;
+		width: 60px;
+		height: 60px;
+		animation-duration: 8s;
+		background-color: rgba(255, 255, 255, 0.3);
+	}
+
+	.bg-bubbles li:nth-child(5) {
+		left: 70%;
+	}
+
+	.bg-bubbles li:nth-child(6) {
+		left: 80%;
+		width: 120px;
+		height: 120px;
+		animation-delay: 3s;
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.bg-bubbles li:nth-child(7) {
+		left: 32%;
+		width: 160px;
+		height: 160px;
+		animation-delay: 2s;
+	}
+
+	.bg-bubbles li:nth-child(8) {
+		left: 55%;
+		width: 20px;
+		height: 20px;
+		animation-delay: 4s;
+		animation-duration: 15s;
+	}
+
+	.bg-bubbles li:nth-child(9) {
+		left: 25%;
+		width: 10px;
+		height: 10px;
+		animation-delay: 2s;
+		animation-duration: 12s;
+		background-color: rgba(255, 255, 255, 0.3);
+	}
+
+	.bg-bubbles li:nth-child(10) {
+		left: 85%;
+		width: 160px;
+		height: 160px;
+		animation-delay: 5s;
+	}
+
+	@keyframes square {
+		0% {
+			opacity: 0.5;
+			transform: translateY(0px) rotate(45deg);
+		}
+
+		25% {
+			opacity: 0.75;
+			transform: translateY(-400px) rotate(90deg);
+		}
+
+		50% {
+			opacity: 1;
+			transform: translateY(-600px) rotate(135deg);
+		}
+
+		100% {
+			opacity: 0;
+			transform: translateY(-1000px) rotate(180deg);
+		}
+	}
+}
+</style>