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 @@ ...@@ -15,3 +15,10 @@
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>
<style>
body {
margin: 0;
padding: 0;
}
</style>
src/router/index.js
View file @ d1e61a4d
...@@ -18,7 +18,6 @@ const routes = [{ ...@@ -18,7 +18,6 @@ const routes = [{
{ {
path: '/login', path: '/login',
name: 'loginIndex', name: 'loginIndex',
redirect: '/login',
meta: { meta: {
title: '登录' title: '登录'
}, },
...@@ -45,7 +44,7 @@ const routes = [{ ...@@ -45,7 +44,7 @@ const routes = [{
// } // }
const router = new VueRouter({ const router = new VueRouter({
// mode: 'history', mode: 'history',
// base: process.env.BASE_URL, // base: process.env.BASE_URL,
routes routes
}) })
......
src/router/index/camp.js
View file @ d1e61a4d
export default [{ export default [{
path: 'signUp', path: '/signUp',
name: 'index-signUp', name: 'index-signUp',
component: () => import(/* webpackChunkName: "login" */ 'v/index/camp/SignUp.vue'), component: () => import(/* webpackChunkName: "login" */ 'v/index/camp/SignUp.vue'),
meta: { meta: {
...@@ -7,7 +7,7 @@ export default [{ ...@@ -7,7 +7,7 @@ export default [{
} }
}, },
{ {
path: 'homework', path: '/homework',
name: 'index-homework', name: 'index-homework',
component: () => import(/* webpackChunkName: "reset" */ 'v/index/camp/Homework.vue'), component: () => import(/* webpackChunkName: "reset" */ 'v/index/camp/Homework.vue'),
meta: { meta: {
...@@ -15,7 +15,7 @@ export default [{ ...@@ -15,7 +15,7 @@ export default [{
} }
}, },
{ {
path: 'certificate', path: '/certificate',
name: 'index-certificate', name: 'index-certificate',
component: () => import(/* webpackChunkName: "reset" */ 'v/index/camp/Certificate.vue'), component: () => import(/* webpackChunkName: "reset" */ 'v/index/camp/Certificate.vue'),
meta: { meta: {
......
src/router/index/login.js
View file @ d1e61a4d
...@@ -7,7 +7,7 @@ export default [{ ...@@ -7,7 +7,7 @@ export default [{
} }
}, },
{ {
path: 'register', path: '/register',
name: 'index-register', name: 'index-register',
component: () => import(/* webpackChunkName: "reset" */ 'v/index/login/Register.vue'), component: () => import(/* webpackChunkName: "reset" */ 'v/index/login/Register.vue'),
meta: { meta: {
...@@ -15,7 +15,7 @@ export default [{ ...@@ -15,7 +15,7 @@ export default [{
} }
}, },
{ {
path: 'reset', path: '/reset',
name: 'index-reset', name: 'index-reset',
component: () => import(/* webpackChunkName: "reset" */ 'v/index/login/Reset.vue'), component: () => import(/* webpackChunkName: "reset" */ 'v/index/login/Reset.vue'),
meta: { meta: {
......
src/views/index/login/Login.vue
View file @ d1e61a4d
...@@ -263,9 +263,6 @@ export default { ...@@ -263,9 +263,6 @@ export default {
background: #60194a; background: #60194a;
border-radius: 2px; border-radius: 2px;
} }
::v-deep .el-input__inner {
border: 1px solid #ffff;
}
.el-form { .el-form {
margin-top: 60px; margin-top: 60px;
.el-form-item { .el-form-item {
...@@ -295,6 +292,7 @@ export default { ...@@ -295,6 +292,7 @@ export default {
padding: 0 10px 0 50px; padding: 0 10px 0 50px;
border-radius: 0; border-radius: 0;
color: #4d4d4d; color: #4d4d4d;
border: 0;
border-bottom: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9;
&:focus { &:focus {
border-bottom-color: #563279; border-bottom-color: #563279;
......
src/views/index/login/Register.vue
View file @ d1e61a4d
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
class="demo-registerForm" class="demo-registerForm"
> >
<el-form-item prop="phone"> <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 <el-input
v-model="registerForm.phone" v-model="registerForm.phone"
placeholder="请输入手机号" placeholder="请输入手机号"
...@@ -19,20 +20,22 @@ ...@@ -19,20 +20,22 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code"> <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 <el-input
v-model="registerForm.code" v-model="registerForm.code"
placeholder="请输入短信验证码" placeholder="请输入短信验证码"
maxlength="20" maxlength="20"
></el-input> ></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> </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"> <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 <el-input
v-model="registerForm.password" v-model="registerForm.password"
:type="isShowPwd ? 'password' : 'text'" :type="isShowPwd ? 'password' : 'text'"
...@@ -55,7 +58,8 @@ ...@@ -55,7 +58,8 @@
/> />
</el-form-item> </el-form-item>
<el-form-item prop="rq_password"> <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 <el-input
v-model="registerForm.rq_password" v-model="registerForm.rq_password"
placeholder="请再次输入登录密码" placeholder="请再次输入登录密码"
...@@ -64,7 +68,7 @@ ...@@ -64,7 +68,7 @@
</el-form-item> </el-form-item>
<el-form-item style="margin: 40px 0 0 0"></el-form-item> <el-form-item style="margin: 40px 0 0 0"></el-form-item>
<el-form-item> <el-form-item>
<el-button @click="submitForm()"> 注册 </el-button> <el-button @click="submitForm()"> 注册</el-button>
</el-form-item> </el-form-item>
<div class="box"> <div class="box">
<div class="fr" @click="toLogin()">已有账号？马上登录</div> <div class="fr" @click="toLogin()">已有账号？马上登录</div>
...@@ -76,352 +80,383 @@ ...@@ -76,352 +80,383 @@
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
// 请求接口 // 请求接口
import { registerCode, setAccountInfo } from "r/index/register"; import {registerCode, setAccountInfo} from "r/index/register";
import { mobileCheck } from "@/common/utils.js"; import {mobileCheck} from "@/common/utils.js";
export default { export default {
name: "index-register", name: "index-register",
data() { data() {
const pwdCheck = async (rule, value, callback) => { const pwdCheck = async (rule, value, callback) => {
if (value !== this.stepForm.password) { if (value !== this.stepForm.password) {
callback(new Error("两次输入的密码不一致")); callback(new Error("两次输入的密码不一致"));
} else { } else {
callback(); callback();
} }
}; };
return { return {
// 手机验证短信 // 手机验证短信
show: true, show: true,
count: "", count: "",
timer: null, timer: null,
isShowPwd: true, // 控制密码显示隐藏 isShowPwd: true, // 控制密码显示隐藏
registerForm: { registerForm: {
phone: "", phone: "",
code: "", code: "",
password: "", password: "",
rq_password: "", rq_password: "",
}, },
// 表单验证规则对象 // 表单验证规则对象
registerRules: { registerRules: {
// 对手机号进行校验 // 对手机号进行校验
phone: [ phone: [
{ required: true, message: "请输入手机号", trigger: "blur" }, {required: true, message: "请输入手机号", trigger: "blur"},
{ {
validator: function (rule, value, callback) { validator: function (rule, value, callback) {
if (mobileCheck(value) === false) { if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号")); callback(new Error("请输入正确的手机号"));
} else { } else {
callback(); callback();
} }
},
trigger: "blur",
}, },
trigger: "blur", ],
}, // 对验证码进行校验
], code: [
// 对验证码进行校验 {required: true, message: "请输入验证码", trigger: "blur"},
code: [ {min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur"},
{ required: true, message: "请输入验证码", trigger: "blur" }, ],
{ min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" }, // 对密码进行校验
], password: [
// 对密码进行校验 {required: true, message: "请输入密码", trigger: "blur"},
password: [ {min: 6, max: 20, message: "请输入正确的密码", trigger: "blur"},
{ required: true, message: "请输入密码", trigger: "blur" }, ],
{ min: 6, max: 20, message: "请输入正确的密码", trigger: "blur" }, // 对密码进行校验
], rq_password: [
// 对密码进行校验 {required: true, message: "请输入确认密码", trigger: "blur"},
rq_password: [ {
{ required: true, message: "请输入确认密码", trigger: "blur" }, validator: pwdCheck,
{ trigger: "blur",
validator: pwdCheck, },
trigger: "blur", ],
}, },
], };
},
};
},
created() {
// this.$emit("getStatus", false);
},
methods: {
// 去注册
toLogin() {
this.$router.replace({ name: "index-login" });
}, },
// 改变密码显示状态 created() {
changePwdStatus() { // this.$emit("getStatus", false);
this.isShowPwd = !this.isShowPwd;
}, },
// 获取手机验证短信 methods: {
getCode() { // 去注册
// 倒计时60s toLogin() {
const TIME_COUNT = 60; this.$router.replace({name: "index-login"});
if (!this.timer) { },
this.count = TIME_COUNT; // 改变密码显示状态
this.show = false; changePwdStatus() {
this.timer = setInterval(() => { this.isShowPwd = !this.isShowPwd;
if (this.count > 0 && this.count <= TIME_COUNT) { },
this.count--; // 获取手机验证短信
} else { getCode() {
this.show = true; // 倒计时60s
clearInterval(this.timer); const TIME_COUNT = 60;
this.timer = null; 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;
// 表单验证 h3 {
submitForm() { font-size: 20px;
setAccountInfo({ color: #4c4c4c;
phone: this.registerForm.phone, font-weight: inherit;
code: this.registerForm.code, padding-bottom: 15px;
password: this.registerForm.password, margin-bottom: 23px;
rq_password: this.registerForm.rq_password, border-bottom: 4px solid #e0823d;
}).then((res) => {
console.log(res);
if (res.code != 200) {
return this.$message.error(res.message);
} }
// this.$router.replace({ name: "" }); ul {
}); li {
} height: 40px;
}, line-height: 40px;
}; border-bottom: 1px solid #ddd;
</script>
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 { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
} }
}
.ContentLReg { .img_box {
height: 60px; width: 100%;
color: #333333; height: 156px;
font-size: 14px; text-align: center;
span {
cursor: pointer; img {
color: #563279; &:nth-child(1) {
font-weight: bold; margin-right: 40px;
&:hover { }
text-decoration: underline;
} }
} }
} }
.img_box {
width: 100%; .floatR {
height: 156px; float: right;
text-align: center; width: 374px;
img {
&:nth-child(1) { ul {
margin-right: 40px; 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; position: absolute;
z-index: 999; top: 50%;
top: 38%; right: 18%;
right: 15%; transform: translate(0, -50%);
cursor: pointer; padding: 60px;
.code { margin-top: 0;
font-size: 14px; overflow: hidden;
font-weight: 600;
.title {
margin: 19px 0 6px 0;
width: 132px;
height: 20px;
font-size: 22px;
font-weight: 500;
color: #60194a; 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 { .line {
position: absolute; width: 48px;
left: 25px; height: 3px;
top: 50%; background: #60194a;
transform: translate(-50%, -50%); border-radius: 2px;
z-index: 1000; }
}
img.img_r { ::v-deep .el-form {
position: absolute; margin-top: 60px;
right: 15px;
top: 50%; .el-form-item {
transform: translate(0, -50%); position: relative;
z-index: 1000; margin-bottom: 30px;
}
::v-deep .el-input__inner { &:last-child {
height: 50px; margin: 0;
line-height: 50px; }
padding: 0 10px 0 50px;
border-radius: 0; .el-form-item__content {
color: #4d4d4d; position: relative;
border-bottom: 2px solid #d9d9d9;
&:focus { .phoneCode {
border-bottom-color: #563279; 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; .box {
}
.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;
height: 18px; height: 18px;
line-height: 18px; display: block;
color: #999999;
margin-top: -10px; .fr {
cursor: pointer; // float: left;
&:hover { text-align: center;
color: #563279; height: 18px;
text-decoration: underline; line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: #563279;
text-decoration: underline;
}
} }
} }
} }
} }
}
@media screen and (max-width: 1601px) { @media screen and (max-width: 1601px) {
.container { .container {
right: 18%; right: 18%;
}
} }
}
@media screen and (max-width: 1501px) { @media screen and (max-width: 1501px) {
.container { .container {
right: 16%; right: 16%;
}
} }
}
@media screen and (max-width: 1401px) { @media screen and (max-width: 1401px) {
.container { .container {
right: 14%; right: 14%;
}
} }
}
</style> </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