Skip to content

C
campSite
Commit d1e61a4d authored by wuwangwolihui's avatar wuwangwolihui
Browse files
Options

修改调整

parent 1b02393f
Hide whitespace changes
Inline Side-by-side
Showing with 370 additions and 331 deletions
public/index.html
View file @ d1e61a4d
......@@ -15,3 +15,10 @@
<!-- built files will be auto injected -->
</body>
</html>
<style>
body {
margin: 0;
padding: 0;
}
</style>
src/router/index.js
View file @ d1e61a4d
......@@ -18,7 +18,6 @@ const routes = [{
{
path: '/login',
name: 'loginIndex',
redirect: '/login',
meta: {
title: '登录'
},
......@@ -45,7 +44,7 @@ const routes = [{
// }
const router = new VueRouter({
// mode: 'history',
mode: 'history',
// base: process.env.BASE_URL,
routes
})
......
src/router/index/camp.js
View file @ d1e61a4d
export default [{
path: 'signUp',
path: '/signUp',
name: 'index-signUp',
component: () => import(/* webpackChunkName: "login" */ 'v/index/camp/SignUp.vue'),
meta: {
......@@ -7,7 +7,7 @@ export default [{
}
},
{
path: 'homework',
path: '/homework',
name: 'index-homework',
component: () => import(/* webpackChunkName: "reset" */ 'v/index/camp/Homework.vue'),
meta: {
......@@ -15,7 +15,7 @@ export default [{
}
},
{
path: 'certificate',
path: '/certificate',
name: 'index-certificate',
component: () => import(/* webpackChunkName: "reset" */ 'v/index/camp/Certificate.vue'),
meta: {
......
src/router/index/login.js
View file @ d1e61a4d
......@@ -7,7 +7,7 @@ export default [{
}
},
{
path: 'register',
path: '/register',
name: 'index-register',
component: () => import(/* webpackChunkName: "reset" */ 'v/index/login/Register.vue'),
meta: {
......@@ -15,7 +15,7 @@ export default [{
}
},
{
path: 'reset',
path: '/reset',
name: 'index-reset',
component: () => import(/* webpackChunkName: "reset" */ 'v/index/login/Reset.vue'),
meta: {
......
src/views/index/login/Login.vue
View file @ d1e61a4d
......@@ -263,9 +263,6 @@ export default {
background: #60194a;
border-radius: 2px;
}
::v-deep .el-input__inner {
border: 1px solid #ffff;
}
.el-form {
margin-top: 60px;
.el-form-item {
......@@ -295,6 +292,7 @@ export default {
padding: 0 10px 0 50px;
border-radius: 0;
color: #4d4d4d;
border: 0;
border-bottom: 2px solid #d9d9d9;
&:focus {
border-bottom-color: #563279;
......
src/views/index/login/Register.vue
View file @ d1e61a4d
......@@ -11,7 +11,8 @@
class="demo-registerForm"
>
<el-form-item prop="phone">
<img class="img_l" src="@/assets/img/reset/username.png" alt="" />
<img class="img_l" src="@/assets/img/reset/username.png" alt=""/>
<el-input type="password" style="width: 1px;height: 1px;position:fixed;top: -10000px;"></el-input>
<el-input
v-model="registerForm.phone"
placeholder="请输入手机号"
......@@ -19,20 +20,22 @@
></el-input>
</el-form-item>
<el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<img class="img_l" src="@/assets/img/reset/code.png" alt=""/>
<el-input type="password" style="width: 1px;height: 1px;position:fixed;top: -10000px;"></el-input>
<el-input
v-model="registerForm.code"
placeholder="请输入短信验证码"
maxlength="20"
></el-input>
<!-- 短信验证码 -->
<div class="phoneCode">
<span class="code" v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{ count }} s</span>
</div>
</el-form-item>
<!-- 短信验证码 -->
<div class="phoneCode">
<span class="code" v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{ count }} s</span>
</div>
<el-form-item prop="password">
<img class="img_l" src="@/assets/img/reset/password.png" alt="" />
<img class="img_l" src="@/assets/img/reset/password.png" alt=""/>
<el-input type="password" style="width: 1px;height: 1px;position:fixed;top: -10000px;"></el-input>
<el-input
v-model="registerForm.password"
:type="isShowPwd ? 'password' : 'text'"
......@@ -55,7 +58,8 @@
/>
</el-form-item>
<el-form-item prop="rq_password">
<img class="img_l" src="@/assets/img/reset/password.png" alt="" />
<img class="img_l" src="@/assets/img/reset/password.png" alt=""/>
<el-input type="password" style="width: 1px;height: 1px;position:fixed;top: -10000px;"></el-input>
<el-input
v-model="registerForm.rq_password"
placeholder="请再次输入登录密码"
......@@ -64,7 +68,7 @@
</el-form-item>
<el-form-item style="margin: 40px 0 0 0"></el-form-item>
<el-form-item>
<el-button @click="submitForm()"> 注册 </el-button>
<el-button @click="submitForm()"> 注册</el-button>
</el-form-item>
<div class="box">
<div class="fr" @click="toLogin()">已有账号？马上登录</div>
......@@ -76,352 +80,383 @@
</template>
<script>
/* eslint-disable */
// 请求接口
import { registerCode, setAccountInfo } from "r/index/register";
import { mobileCheck } from "@/common/utils.js";
export default {
name: "index-register",
data() {
const pwdCheck = async (rule, value, callback) => {
if (value !== this.stepForm.password) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
// 手机验证短信
show: true,
count: "",
timer: null,
isShowPwd: true, // 控制密码显示隐藏
registerForm: {
phone: "",
code: "",
password: "",
rq_password: "",
},
// 表单验证规则对象
registerRules: {
// 对手机号进行校验
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
validator: function (rule, value, callback) {
if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
/* eslint-disable */
// 请求接口
import {registerCode, setAccountInfo} from "r/index/register";
import {mobileCheck} from "@/common/utils.js";
export default {
name: "index-register",
data() {
const pwdCheck = async (rule, value, callback) => {
if (value !== this.stepForm.password) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
// 手机验证短信
show: true,
count: "",
timer: null,
isShowPwd: true, // 控制密码显示隐藏
registerForm: {
phone: "",
code: "",
password: "",
rq_password: "",
},
// 表单验证规则对象
registerRules: {
// 对手机号进行校验
phone: [
{required: true, message: "请输入手机号", trigger: "blur"},
{
validator: function (rule, value, callback) {
if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
},
trigger: "blur",
},
trigger: "blur",
},
],
// 对验证码进行校验
code: [
{ required: true, message: "请输入验证码", trigger: "blur" },
{ min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
],
// 对密码进行校验
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 20, message: "请输入正确的密码", trigger: "blur" },
],
// 对密码进行校验
rq_password: [
{ required: true, message: "请输入确认密码", trigger: "blur" },
{
validator: pwdCheck,
trigger: "blur",
},
],
},
};
},
created() {
// this.$emit("getStatus", false);
},
methods: {
// 去注册
toLogin() {
this.$router.replace({ name: "index-login" });
],
// 对验证码进行校验
code: [
{required: true, message: "请输入验证码", trigger: "blur"},
{min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur"},
],
// 对密码进行校验
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{min: 6, max: 20, message: "请输入正确的密码", trigger: "blur"},
],
// 对密码进行校验
rq_password: [
{required: true, message: "请输入确认密码", trigger: "blur"},
{
validator: pwdCheck,
trigger: "blur",
},
],
},
};
},
// 改变密码显示状态
changePwdStatus() {
this.isShowPwd = !this.isShowPwd;
created() {
// this.$emit("getStatus", false);
},
// 获取手机验证短信
getCode() {
// 倒计时60s
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
methods: {
// 去注册
toLogin() {
this.$router.replace({name: "index-login"});
},
// 改变密码显示状态
changePwdStatus() {
this.isShowPwd = !this.isShowPwd;
},
// 获取手机验证短信
getCode() {
// 倒计时60s
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
// 接口获得验证码
registerCode({
phone: this.registerForm.phone,
}).then((res) => {
console.log(res);
if (res.code != 200) {
return this.$message.error(res.message);
}
})
},
// 表单验证
submitForm() {
setAccountInfo({
phone: this.registerForm.phone,
code: this.registerForm.code,
password: this.registerForm.password,
rq_password: this.registerForm.rq_password,
}).then((res) => {
console.log(res);
if (res.code != 200) {
return this.$message.error(res.message);
}
}, 1000);
// this.$router.replace({ name: "" });
});
}
// 接口获得验证码
registerCode({
phone: this.registerForm.phone,
}).then((res) => {
console.log(res);
if (res.code != 200) {
return this.$message.error(res.message);
}
})
},
};
</script>
<style scoped lang="scss">
// 内容区域
.box_content {
.content {
max-width: 1150px;
margin: 40px auto;
padding: 0 50px;
overflow: auto;
.floatL {
float: left;
width: 670px;
// 表单验证
submitForm() {
setAccountInfo({
phone: this.registerForm.phone,
code: this.registerForm.code,
password: this.registerForm.password,
rq_password: this.registerForm.rq_password,
}).then((res) => {
console.log(res);
if (res.code != 200) {
return this.$message.error(res.message);
h3 {
font-size: 20px;
color: #4c4c4c;
font-weight: inherit;
padding-bottom: 15px;
margin-bottom: 23px;
border-bottom: 4px solid #e0823d;
}
// this.$router.replace({ name: "" });
});
}
},
};
</script>
ul {
li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
a {
display: inline-block;
width: 100%;
font-size: 16px;
color: #34538b;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.ContentLReg {
height: 60px;
color: #333333;
font-size: 14px;
span {
cursor: pointer;
color: #563279;
font-weight: bold;
<style scoped lang="scss">
// 内容区域
.box_content {
.content {
max-width: 1150px;
margin: 40px auto;
padding: 0 50px;
overflow: auto;
.floatL {
float: left;
width: 670px;
h3 {
font-size: 20px;
color: #4c4c4c;
font-weight: inherit;
padding-bottom: 15px;
margin-bottom: 23px;
border-bottom: 4px solid #e0823d;
}
ul {
li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
a {
display: inline-block;
width: 100%;
font-size: 16px;
color: #34538b;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.ContentLReg {
height: 60px;
color: #333333;
font-size: 14px;
span {
cursor: pointer;
color: #563279;
font-weight: bold;
&:hover {
text-decoration: underline;
.img_box {
width: 100%;
height: 156px;
text-align: center;
img {
&:nth-child(1) {
margin-right: 40px;
}
}
}
}
.img_box {
width: 100%;
height: 156px;
text-align: center;
img {
&:nth-child(1) {
margin-right: 40px;
.floatR {
float: right;
width: 374px;
ul {
margin-top: 36px;
margin-left: 87px;
li {
font-size: 16px;
width: 100%;
height: 45px;
line-height: 45px;
padding-left: 70px;
margin-bottom: 35px;
// &:nth-child(1) {
// background: url("../../../assets/images/weidu.png") no-repeat 0px
// center;
// }
// &:nth-child(2) {
// background: url("../../../assets/images/fangshi.png") no-repeat 0px
// center;
// }
// &:nth-child(3) {
// background: url("../../../assets/images/xingtai.png") no-repeat 0px
// center;
// }
}
}
}
}
.floatR {
float: right;
width: 374px;
ul {
margin-top: 36px;
margin-left: 87px;
li {
font-size: 16px;
width: 100%;
height: 45px;
line-height: 45px;
padding-left: 70px;
margin-bottom: 35px;
// &:nth-child(1) {
// background: url("../../../assets/images/weidu.png") no-repeat 0px
// center;
// }
// &:nth-child(2) {
// background: url("../../../assets/images/fangshi.png") no-repeat 0px
// center;
// }
// &:nth-child(3) {
// background: url("../../../assets/images/xingtai.png") no-repeat 0px
// center;
// }
}
}
}
}
}
// 注册输入
.container {
width: 440px;
// height: 640px;
background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px;
position: absolute;
top: 50%;
right: 18%;
// left: 10%;
transform: translate(0, -50%);
padding: 60px;
margin-top: 0;
// background: url("../../../assets/images/loginbgp.png") no-repeat 0 center;
overflow: hidden;
.title {
margin: 19px 0 6px 0;
width: 132px;
height: 20px;
font-size: 22px;
font-weight: 500;
color: #60194a;
line-height: 20px;
}
.line {
width: 48px;
height: 3px;
background: #60194a;
border-radius: 2px;
}
.phone_input {
position: relative;
}
.phoneCode {
// 注册输入
.container {
width: 440px;
// height: 640px;
background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px;
position: absolute;
z-index: 999;
top: 38%;
right: 15%;
cursor: pointer;
.code {
font-size: 14px;
font-weight: 600;
top: 50%;
right: 18%;
transform: translate(0, -50%);
padding: 60px;
margin-top: 0;
overflow: hidden;
.title {
margin: 19px 0 6px 0;
width: 132px;
height: 20px;
font-size: 22px;
font-weight: 500;
color: #60194a;
line-height: 20px;
}
}
::v-deep .el-input__inner {
border: 1px solid #ffff;
}
.el-form {
margin-top: 60px;
.el-form-item {
position: relative;
margin-bottom: 30px;
&:last-child {
margin: 0;
}
img.img_l {
position: absolute;
left: 25px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
img.img_r {
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%);
z-index: 1000;
}
::v-deep .el-input__inner {
height: 50px;
line-height: 50px;
padding: 0 10px 0 50px;
border-radius: 0;
color: #4d4d4d;
border-bottom: 2px solid #d9d9d9;
&:focus {
border-bottom-color: #563279;
.line {
width: 48px;
height: 3px;
background: #60194a;
border-radius: 2px;
}
::v-deep .el-form {
margin-top: 60px;
.el-form-item {
position: relative;
margin-bottom: 30px;
&:last-child {
margin: 0;
}
.el-form-item__content {
position: relative;
.phoneCode {
position: absolute;
z-index: 999;
top: 50%;
right: 25px;
transform: translate(0, -50%);
cursor: pointer;
.code {
font-size: 14px;
font-weight: 600;
color: #60194a;
}
}
img.img_l {
position: absolute;
left: 25px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
img.img_r {
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%);
z-index: 1000;
}
.el-input__inner {
height: 50px;
line-height: 50px;
padding: 0 10px 0 50px;
border-radius: 0;
color: #4d4d4d;
border: 0;
border-bottom: 2px solid #d9d9d9;
&:focus {
border-bottom-color: #563279;
}
}
.el-form-item__error {
color: #e0823d;
}
.el-button {
width: 100%;
height: 60px;
background: #60194a;
border-radius: 4px;
opacity: 0.8;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 16px;
padding: 0;
margin: 30px 0 0 0;
}
}
}
::v-deep .el-form-item__error {
color: #e0823d;
}
.el-button {
width: 100%;
height: 60px;
background: #60194a;
border-radius: 4px;
opacity: 0.8;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 16px;
padding: 0;
margin: 30px 0 0 0;
}
}
.box {
height: 18px;
display: block;
.fr {
// float: left;
text-align: center;
.box {
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: #563279;
text-decoration: underline;
display: block;
.fr {
// float: left;
text-align: center;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: #563279;
text-decoration: underline;
}
}
}
}
}
}
@media screen and (max-width: 1601px) {
.container {
right: 18%;
@media screen and (max-width: 1601px) {
.container {
right: 18%;
}
}
}
@media screen and (max-width: 1501px) {
.container {
right: 16%;
@media screen and (max-width: 1501px) {
.container {
right: 16%;
}
}
}
@media screen and (max-width: 1401px) {
.container {
right: 14%;
@media screen and (max-width: 1401px) {
.container {
right: 14%;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment