优化邮箱激活

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">
-					<label>{{$CONFIG.APP_NAME}}</label>
+					<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>-->
 				</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,9 +1,9 @@
 <template>
 	<common-page title="注册">
-		<el-steps :active="stepActive" simple finish-status="success">
-		    <el-step title="填写信息" />
+		<el-steps :active="stepActive" simple finish-status="success" process-status="finish">
+			<el-step title="填写信息" />
 			<el-step title="创建账户" />
-		    <el-step title="注册完成" />
+			<el-step title="注册完成" />
 		</el-steps>
 		<el-form v-if="stepActive==0" ref="stepForm_0" :model="form" :rules="rules" label-position="top">
 			<el-form-item label="公司名称" prop="company_name">
@@ -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",
-					mobile:"17610119150",
-					verify_code:"143087",
-					company_name:"中国移动管理有限公司",
-					customer: "中国移动",
-					login_name:"admin",
-					name:"ykxiao",
+					email: "",
+					mobile:"",
+					verify_code:"",
+					company_name:"",
+					customer: "",
+					login_name:"",
+					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>