Skip to content

S
Stusystem Web

cxt104926 / Stusystem Web

通知 4
Star 0
Fork 0
S
Stusystem Web

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 f52f9817 编写于 作者: cxt104926's avatar cxt104926
浏览文件
操作

优化

上级 412e3095
隐藏空白更改
内联 并排
Showing with 171 addition and 93 deletion
src/api.js
浏览文件 @ f52f9817
......@@ -26,7 +26,6 @@ axios.interceptors.response.use(success => {
return success;
}
}, error => {
// 接口调用失败
let r = null;
let msg = '';
let code = error.response.status;
......
src/views/login.vue
浏览文件 @ f52f9817
<template>
<div class="login">
<!--登录框周围圆-->
<div class="circular" style="--x:0"></div>
<div class="circular" style="--x:1"></div>
<div class="circular" style="--x:2"></div>
<div class="circular" style="--x:3"></div>
<div class="circular" style="--x:4"></div>
<el-form ref="loginFrom" :model="addAndEditFormData" :rules="addAndEditRules" class="form">
<h3 class="loginTitle">管理系统</h3>
<el-form-item prop="account" label="账 号：">
......@@ -84,13 +90,90 @@ export default {
</script>
<style scoped>
body {
margin: 0;
padding: 0;
}
.login {
position: relative;
background-image: url("../assets/img/2.jpg");
background-size: cover;
height: 100vh;
width: 100vw;
}
.circular {
position: absolute;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
filter: hue-rotate(calc(var(--x) * 80deg));
animation: animate 10s linear infinite;
animation-delay: calc(var(--x) * -2s);
}
/*匀速移动*/
@keyframes animate {
0%, 100% {
transform: translateY(-50px);
}
50% {
transform: translateY(50px);
}
}
.circular:nth-child(1) {
width: 88px;
height: 88px;
top: 15%;
left: 33%;
border-radius: 44px;
background-clip: padding-box;
}
.circular:nth-child(2) {
width: 60px;
height: 60px;
top: 55%;
left: 32%;
z-index: 1;
border-radius: 30px;
background-clip: padding-box;
}
.circular:nth-child(3) {
width: 80px;
height: 80px;
top: 77%;
left: 44%;
border-radius: 40px;
background-clip: padding-box;
z-index: 1;
}
.circular:nth-child(4) {
width: 70px;
height: 70px;
top: 50%;
left: 63%;
border-radius: 35px;
background-clip: padding-box;
}
.circular:nth-child(5) {
width: 100px;
height: 100px;
top: 14%;
left: 60%;
z-index: 1;
border-radius: 50px;
background-clip: padding-box;
}
.form {
border-radius: 15px;
background-clip: padding-box;
......@@ -100,10 +183,13 @@ export default {
top: 50%;
transform: translate(-50%, -50%);
padding: 15px 25px;
/*background: #e7efee; !* 框背景颜色 *!*/
background: #f6f6f6; /* 框背景颜色 */
/*border: #ba0716;*/
/*阴影*/
box-shadow: 0 0 25px #3c4242;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.form input {
......
src/views/manager/index.vue
浏览文件 @ f52f9817
......@@ -225,7 +225,7 @@ export default {
},
methods: {
init() {
// 获取用户信息
// 从vuex中获取用户信息，找不到去本地缓存中找
let userInfo = this.$store.state.userInfo;
if (userInfo.length === 0) {
let item = localStorage.getItem("userInfo");
......@@ -416,6 +416,7 @@ export default {
}
.nameClass {
color: #133cce;
float: right;
margin-top: 15px;
margin-left: 8px;
......
src/views/register/register.vue
浏览文件 @ f52f9817
<template>
<div id="register">
<el-form
ref="registerForm"
:model="addAndEditFormData"
:rules="addAndEditRules"
class="registerForm"
>
<h3 class="registerTitle">注册页面</h3>
<el-form-item prop="account" label="账 号：">
<el-input
v-model="addAndEditFormData.account"
placeholder="请输入账号"
style="width: 80%"
></el-input>
</el-form-item>
<el-form-item prop="password" label="密 码：">
<el-input
v-model="addAndEditFormData.password"
placeholder="请输入密码"
show-password
style="width: 80%"
></el-input>
</el-form-item>
<el-form-item prop="confirmPassword" label="确认密码:">
<el-input
v-model="addAndEditFormData.confirmPassword"
placeholder="请输入密码"
show-password
style="width:76%"
></el-input>
</el-form-item>
<el-form-item prop="name" label="用户名：">
<el-input
v-model="addAndEditFormData.name"
placeholder="请输入用户名"
style="width:76%"
></el-input>
</el-form-item>
<el-form-item prop="phone" label="电话：">
<el-input
v-model="addAndEditFormData.phone"
placeholder="请输入电话"
style="width:76%"
></el-input>
</el-form-item>
<el-form-item prop="classId" label="班级：">
<el-select
placeholder="请选择班级"
v-model="addAndEditFormData.classId"
filterable
size="small"
style="width: 250px"
clearable
>
<el-option
v-for="item in classNames"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="handleConfirmEvent"
style="width: 100%"
><i class="el-icon-upload"></i>注 册
</el-button>
</el-form-item>
<div class="navigate">
<span>已有账号？ <router-link to="/">去登陆</router-link></span>
</div>
</el-form>
<div class="registerDiv">
<el-form ref="registerForm" :model="addAndEditFormData" :rules="addAndEditRules" class="registerForm">
<h3 class="registerTitle">注册页面</h3>
<el-form-item prop="account" label="账 号：">
<el-input v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 75%"></el-input>
</el-form-item>
<el-form-item prop="password" label="密 码：">
<el-input v-model="addAndEditFormData.password" placeholder="请输入密码" show-password style="width: 75%"></el-input>
</el-form-item>
<el-form-item prop="confirmPassword" label="确认密码:">
<el-input v-model="addAndEditFormData.confirmPassword" placeholder="请输入密码" show-password
style="width:75%"></el-input>
</el-form-item>
<el-form-item prop="name" label="用户名：">
<el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:75%"></el-input>
</el-form-item>
<el-form-item prop="phone" label="电 话：">
<el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:75%"></el-input>
</el-form-item>
<el-form-item prop="classId" label=" 班 级：">
<el-cascader
@change="stuClassChange"
:change-on-select="true"
:props="defaultParams"
:options="classNames"
v-model="addAndEditFormData.classId"
:clearable="true" style="width:75%">
</el-cascader>
</el-form-item>
<el-form-item class="registerBtu">
<el-button type="primary" @click="handleConfirmEvent" style="width: 70%">
<i class="el-icon-upload"></i>注 册
</el-button>
</el-form-item>
<div class="navigate">
<span>已有账号？ <router-link to="/">去登陆</router-link></span>
</div>
</el-form>
</div>
</div>
</template>
......@@ -90,6 +56,11 @@ export default {
}
};
return {
defaultParams: {
label: 'name',
value: 'id',
children: 'child'
},
classNames: [], // 班级数据
addAndEditFormData: {
name: "",
......@@ -127,17 +98,13 @@ export default {
trigger: "blur"
}
},
// 样式数据
formLabelWidth: "120px"
};
},
created() {
/*this.classNames.push({
id: 1, name: "人间盛世颜一班"
})
this.classNames.push({
id: 2, name: "人间盛世颜二班"
})*/
// 去加载班级数据
this.api.getApi("/stu/class/get/treeData").then(e => {
this.classNames = e.data;
});
},
methods: {
handleConfirmEvent() {
......@@ -150,6 +117,11 @@ export default {
});
}
});
},
// 监听班级选择
stuClassChange(value) {
this.addAndEditFormData.classId = value[value.length - 1];
}
}
};
......@@ -163,18 +135,31 @@ export default {
width: 100vw;
}
.registerForm {
border-radius: 15px;
background-clip: padding-box;
width: 350px;
position: absolute;
.registerDiv{
left: 50%;
top: 50%;
position: absolute;
width: 400px;
transform: translate(-50%, -50%);
padding: 15px 25px;
background: #f9fdf9;
}
.registerForm {
border-radius: 15px;
background-clip: padding-box;
padding: 15px 20px;
border: #133cce;
box-shadow: 0 0 25px #2cb6b6;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1;
text-align: right;
}
.registerBtu{
margin-right: 25%;
}
.registerTitle {
......@@ -182,4 +167,11 @@ export default {
text-align: center;
color: #3c8dbc;
}
.navigate {
text-align: right;
color: #8b8989;
font-size: small;
margin-top: -10px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或