优化邮箱激活

src/config/index.js

@@ -43,7 +43,7 @@ const DEFAULT_CONFIG = {
 	LAYOUT: "menu",
 
 	//菜单是否折叠
-	MENU_IS_COLLAPSE: false,
+	MENU_IS_COLLAPSE: true,
 
 	//菜单是否启用手风琴效果
 	MENU_UNIQUE_OPENED: true,

src/layout/index.vue

@@ -54,9 +54,15 @@
 	<template v-else-if="layout=='menu'">
 		<header class="adminui-header">
 			<div class="adminui-header-left">
-				<div class="logo-bar">
+				<div :class="menuIsCollapse?'logo-bar isCollapse':'logo-bar'">
+					<span v-if="menuIsCollapse">
+						<img class="logo" src="https://dm-wh.oss-cn-shanghai.aliyuncs.com/wh/mobilePhoto/4d6e70dbcb2f27d00da51c5232dea6fb1c87ba63.jpg" alt="">
+					</span>
 <!--					<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">-->
-					<span>{{ $CONFIG.APP_NAME }}</span>
+					<span v-else>{{ $CONFIG.APP_NAME }}</span>
+				</div>
+				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
+					<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
 				</div>
 				<Topbar v-if="!ismobile"></Topbar>
 			</div>
@@ -73,9 +79,6 @@
 						</el-menu>
 					</el-scrollbar>
 				</div>
-<!--				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">-->
-<!--					<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>-->
-<!--				</div>-->
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
 			<div class="aminui-body el-container">

src/style/app.scss

@@ -25,10 +25,13 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 
 /* 头部 */
 .adminui-header {height: 50px;background: #fff;color: #222;display: flex;justify-content:space-between;}
-.adminui-header-left {display: flex;align-items: center;padding-left:20px;}
+.adminui-header-left {display: flex;align-items: center;}
 .adminui-header-right {display: flex;align-items: center;}
-.adminui-header .logo-bar {font-size: 18px;font-weight: bold;display: flex;align-items: center;width: 160px;height: 100%;border-right: 1px solid #f2f2f2;}
+.adminui-header .logo-bar {font-size: 18px;font-weight: bold;display: flex;align-items: center;justify-content: center;width: 180px;height: 100%;border-right: 1px solid #f2f2f2;}
+.adminui-header .isCollapse{width: 65px;}
 .adminui-header .logo-bar .logo {height: 42px;}
+.adminui-header .logo-bar>span{display: flex;align-items: center;justify-content: center;}
+.adminui-header-left .adminui-side-bottom{margin: 0 15px 0 20px;}
 .adminui-header .nav {display: flex;height: 100%;margin-left: 40px;}
 .adminui-header .nav li {padding:0 10px;margin: 0 10px 0 0;font-size: 14px;color: rgba(255, 255, 255, 0.6);list-style: none;height: 100%;display: flex;align-items: center;cursor: pointer;}
 .adminui-header .nav li i {margin-right: 5px;}

src/style/pages.scss

@@ -24,9 +24,10 @@
 
 /*common-page*/
 .common-page {}
+.pageHeader{box-shadow: 0 1px 10px rgba(0,0,0,0.14);margin-bottom: 10px;}
 .common-header-left {display: flex;align-items: center;}
 .common-header-logo {display: flex;align-items: center;}
-.common-header-logo img {height:30px;margin-right: 10px;vertical-align: bottom;}
+.common-header-logo img {height:40px;margin-right: 10px;vertical-align: bottom;}
 .common-header-logo label {font-size: 20px;}
 .common-header-title {font-size: 16px;border-left: 1px solid var(--el-border-color-light);margin-left: 15px;padding-left: 15px;}
 .common-header-right {display: flex;align-items: center;}

src/views/login/activate.vue

@@ -1,10 +1,25 @@
 <template>
-	<div></div>
+	<div class="activateBox">
+		<common-page>
+			<div class="cardMain">
+				<div class="headerBox">电子邮件确认链接</div>
+				<div class="mainBox">
+					<div class="msg">电子邮件确认链接</div>
+					<el-button type="primary" @click="getActivation">请求向您发送新的电子邮件</el-button>
+					<div class="text">您最近是否申请过帐户，但未确认您的电子邮件地址?如果您尚未确认您的电子邮件地址，您可能需要创建一个新帐户。如果您有问题，请参阅帐户帮助。</div>
+				</div>
+			</div>
+		</common-page>
+	</div>
 </template>
 
 <script>
+import commonPage from './components/commonPage'
 export default {
 	name: "activate",
+	components:{
+		commonPage
+	},
 	data(){
 		return{
 
@@ -15,9 +30,7 @@ export default {
 		this.$TOOL.cookie.set("TOKEN", token)
 	},
 	mounted() {
-		setTimeout(()=>{
+
-			this.getActivation();
-		},200)
 	},
 	methods:{
 		async getActivation() {
@@ -62,5 +75,35 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+	.activateBox{
+		::v-deep .common-main{
+			background: #F6F8F9;
+		}
+	}
+	.cardMain{
+		background: var(--el-color-white);
+		width: 580px;
+		margin: 20px auto;
+		border-radius: 6px;
+		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+		.headerBox{
+			padding: 20px;
+			border-bottom: 1px solid #DCDFE6;
+			display: flex;
+			align-items: center;
+			font-size: 16px;
+			font-weight: 600;
+		}
+		.mainBox{
+			padding: 20px;
+			.msg{
+				margin-bottom: 20px;
+				font-size: 14px;
+			}
+			.text{
+				margin-top: 20px;
+				line-height: 20px;
+			}
+		}
+	}
 </style>

src/views/login/components/commonPage.vue

@@ -1,12 +1,12 @@
 <template>
 	<el-container>
-		<el-header style="height:50px;">
+		<el-header class="pageHeader" style="height:55px;">
 			<div class="common-header-left">
 				<div class="common-header-logo">
-					<img :alt="$CONFIG.APP_NAME" src="img/logo.png">
+					<img class="logo" :alt="$CONFIG.APP_NAME" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">
-					<label>{{$CONFIG.APP_NAME}}</label>
+<!--					<label>{{$CONFIG.APP_NAME}}</label>-->
 				</div>
-				<div class="common-header-title">{{title}}</div>
+<!--				<div class="common-header-title">{{title}}</div>-->
 			</div>
 			<div class="common-header-right">
 				<router-link to="/login">返回登录</router-link>

src/views/login/userRegister.vue

@@ -1,6 +1,6 @@
 <template>
 	<common-page title="注册">
-		<el-steps :active="stepActive" simple finish-status="success">
+		<el-steps :active="stepActive" simple finish-status="success" process-status="finish">
 			<el-step title="填写信息" />
 			<el-step title="创建账户" />
 			<el-step title="注册完成" />
@@ -40,7 +40,7 @@
 		<div v-if="stepActive==2">
 			<el-result icon="success" title="账号注册成功" sub-title="">
 				<template #extra>
-					<p class="activation" @click="goActivation">激活邮箱</p>
+					<p class="activation" @click="goActivation">激活邮箱，即可登录</p>
 				</template>
 			</el-result>
 		</div>
@@ -70,13 +70,13 @@
 
 				stepActive: 0,
 				form: {
-					email: "2678188150@qq.com",
+					email: "",
-					mobile:"17610119150",
+					mobile:"",
-					verify_code:"143087",
+					verify_code:"",
-					company_name:"中国移动管理有限公司",
+					company_name:"",
-					customer: "中国移动",
+					customer: "",
-					login_name:"admin",
+					login_name:"",
-					name:"ykxiao",
+					name:"",
 				},
 				rules: {
 					email: [
@@ -177,7 +177,7 @@
 
 <style scoped lang="scss">
 	.activation{
-		color: var(--el-color-primary);
+		color: var(--el-text-color-placeholder);
 		cursor: pointer;
 	}
 	.btnBox{
@@ -186,4 +186,17 @@
 			flex: 1;
 		}
 	}
+
+	.el-step.is-simple{
+		::v-deep .el-step__arrow::after{
+			height: 10px;
+			width: 1px;
+			transform: rotate(45deg) translateY(3px);
+		}
+		::v-deep .el-step__arrow::before{
+			height: 10px;
+			width: 1px;
+			transform: rotate(-45deg) translateY(-3px);
+		}
+	}
 </style>