SpringBoot+Vue实现点餐送餐系统
1.技术介绍
java+springboot+mysql+mybatis+Vue+html
开发工具：eclipse或idea
2.主要功能说明：
1）用户
注册、登录、首页、菜品信息、系统公告、个人中心、购物车、客服中心
2）商家
个人中心、菜品信息管理、订单管理
3）管理员
个人中心、用户管理、商家管理、菜品分类管理、菜品
信息管理、系统管理、订单管理
3.部门代码展示：
注册页面
```java
<template>
<div>
<div class="container">
<div class="login-form">
<h1 class="h1">基于疫情背景下的新型点餐送餐系统注册</h1>
<el-form ref="rgsForm" class="rgs-form" :model="rgsForm">
<!-- <div v-if="tableName=='yonghu'" class="input-group">
<div class="label">用户名</div>
<div class="input-container">
<input v-model="ruleForm.yonghuming" class="input" type="text" placeholder="用户名">
</div>
</div> -->
<el-form-item label="用户名" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.yonghuming" autocomplete="off" placeholder="用户名" />
</el-form-item>
<!-- <div v-if="tableName=='yonghu'" class="input-group">
<div class="label">密码</div>
<div class="input-container">
<input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
</div>
</div> -->
<el-form-item label="密码" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"#elsetype="text" />
</el-form-item>
<el-form-item label="确认密码" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password"/>
</el-form-item>
<!-- <div v-if="tableName=='yonghu'" class="input-group">
<div class="label">姓名</div>
<div class="input-container">
<input v-model="ruleForm.xingming" class="input" type="text" placeholder="姓名">
</div>
</div> -->
<el-form-item label="姓名" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.xingming" autocomplete="off" placeholder="姓名" />
</el-form-item>
<!-- <div v-if="tableName=='yonghu'" class="input-group">
<div class="label">手机</div>
<div class="input-container">
<input v-model="ruleForm.shouji" class="input" type="text" placeholder="手机">
</div>
</div> -->
<el-form-item label="手机" class="input" v-if="tableName=='yonghu'">
<el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机" />
</el-form-item>
<el-form-item label="邮箱" class="input send-code" v-if="tableName=='yonghu'">
<el-input style="width: auto;line-height: initial;" v-model="ruleForm.email" autocomplete="off" placeholder="邮箱"/>
<el-button v-if="isEndFlag" type="success" class="register-code" @click="sendemailcode()">发送验证码</el-button>
<el-button v-if="!isEndFlag" type="success" class="register-code" disabled="disabled">{{SecondToDate}}</el-button>
</el-form-item>
<el-form-item label="验证码" class="input" v-if="tableName=='yonghu'">
<el-input v-model="emailcode" autocomplete="off" placeholder="验证码"/>
</el-form-item>
<!-- <div v-if="tableName=='shangjia'" class="input-group">
<div class="label">商家账号</div>
<div class="input-container">
<input v-model="ruleForm.shangjiazhanghao" class="input" type="text" placeholder="商家账号">
</div>
</div> -->
<el-form-item label="商家账号" class="input" v-if="tableName=='shangjia'">
<el-input v-model="ruleForm.shangjiazhanghao" autocomplete="off" placeholder="商家账号" />
</el-form-item>
<!-- <div v-if="tableName=='shangjia'" class="input-group">
<div class="label">密码</div>
<div class="input-container">
<input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
</div>
</div> -->
<el-form-item label="密码" class="input" v-if="tableName=='shangjia'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"#elsetype="text" />
</el-form-item>
<el-form-item label="确认密码" class="input" v-if="tableName=='shangjia'">
<el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password"/>
</el-form-item>
<!-- <div v-if="tableName=='shangjia'" class="input-group">
<div class="label">商家名称</div>
<div class="input-container">
<input v-model="ruleForm.shangjiamingcheng" class="input" type="text" placeholder="商家名称">
</div>
</div> -->
<el-form-item label="商家名称" class="input" v-if="tableName=='shangjia'">
<el-input v-model="ruleForm.shangjiamingcheng" autocomplete="off" placeholder="商家名称" />
</el-form-item>
<!-- <div v-if="tableName=='shangjia'" class="input-group">
<div class="label">负责人</div>
<div class="input-container">
<input v-model="ruleForm.fuzeren" class="input" type="text" placeholder="负责人">
</div>
</div> -->
<el-form-item label="负责人" class="input" v-if="tableName=='shangjia'">
<el-input v-model="ruleForm.fuzeren" autocomplete="off" placeholder="负责人" />
</el-form-item>
<!-- <div v-if="tableName=='shangjia'" class="input-group">
<div class="label">联系电话</div>
<div class="input-container">
<input v-model="ruleForm.lianxidianhua" class="input" type="text" placeholder="联系电话">
</div>
</div> -->
<el-form-item label="联系电话" class="input" v-if="tableName=='shangjia'">
<el-input v-model="ruleForm.lianxidianhua" autocomplete="off" placeholder="联系电话" />
</el-form-item>
<div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
<el-button class="btn" type="primary" @click="login()">注册</el-button>
<el-button class="btn close" type="primary" @click="close()">取消</el-button>
</div>
</el-form>
</div>
<!-- <div class="nk-navigation">
<a href="#">
<div @click="login()">注册</div>
</a>
</div> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
},
tableName:"",
rules: {},
// 倒计时时间
count: 60,
// 倒计时定时器
inter: null,
// 倒计时是否结束
isEndFlag: true
};
},
computed: {
SecondToDate: function() {
var time = this.count;
if (null != time && "" != time) {
time = parseInt(time) + "秒后重发";
}
return time;
}
},
mounted(){
let table = this.$storage.get("loginTable");
this.tableName = table;
},
created() {
},
methods: {
// 获取uuid
getUUID () {
return new Date().getTime();
},
close(){
this.$router.push({ path: "/login" });
},
sendemailcode() {
if(!this.ruleForm.email){
this.$message.error(`邮箱不能为空`);
return
}
if(this.ruleForm.email&&(!this.$validate.isEmail(this.ruleForm.email))){
this.$message.error(`请输入正确的邮箱格式`);
return
}
this.isEndFlag = false;
var _this = this;
this.inter = window.setInterval(function() {
_this.count = _this.count - 1;
if (_this.count <= 0) {
window.clearInterval(_this.inter);
_this.isEndFlag = true;
_this.count=60;
}
}, 1000);
this.$http({
url: `${this.tableName}/sendemail?email=`+this.ruleForm.email,
method: "get",
params: {}
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message.success(`发送成功`);
} else {
this.$message.error(`服务器异常，请稍后重试`)
}
});
},
// 注册
login() {
var url=this.tableName+"/register";
if((!this.ruleForm.yonghuming) && `yonghu` == this.tableName){
this.$message.error(`用户名不能为空`);
return
}
if((!this.ruleForm.mima) && `yonghu` == this.tableName){
this.$message.error(`密码不能为空`);
return
}
if((this.ruleForm.mima!=this.ruleForm.mima2) && `yonghu` == this.tableName){
this.$message.error(`两次密码输入不一致`);
return
}
if(`yonghu` == this.tableName && this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){
this.$message.error(`手机应输入手机格式`);
return
}
if(`yonghu` == this.tableName && this.ruleForm.email&&(!this.$validate.isEmail(this.ruleForm.email))){
this.$message.error(`邮箱应输入邮件格式`);
return
}
if(`yonghu` == this.tableName && this.ruleForm.money&&(!this.$validate.isNumber(this.ruleForm.money))){
this.$message.error(`余额应输入数字`);
return
}
if(`yonghu` == this.tableName ){
url=this.tableName+"/register?emailcode="+this.emailcode;
if(this.ruleForm.email&&(!this.$validate.isEmail(this.ruleForm.email))){
this.$message.error(`请输入正确的邮箱格式`);
return
}
}
if((!this.emailcode) && `yonghu` == this.tableName){
this.$message.error(`验证码不能为空`);
return
}
if((!this.ruleForm.shangjiazhanghao) && `shangjia` == this.tableName){
this.$message.error(`商家账号不能为空`);
return
}
if((!this.ruleForm.mima) && `shangjia` == this.tableName){
this.$message.error(`密码不能为空`);
return
}
if((this.ruleForm.mima!=this.ruleForm.mima2) && `shangjia` == this.tableName){
this.$message.error(`两次密码输入不一致`);
return
}
if(`shangjia` == this.tableName && this.ruleForm.lianxidianhua&&(!this.$validate.isMobile(this.ruleForm.lianxidianhua))){
this.$message.error(`联系电话应输入手机格式`);
return
}
if(`shangjia` == this.tableName && this.ruleForm.money&&(!this.$validate.isNumber(this.ruleForm.money))){
this.$message.error(`余额应输入数字`);
return
}
this.$http({
url: url,
method: "post",
data:this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "注册成功",
type: "success",
duration: 1500,
onClose: () => {
this.$router.replace({ path: "/login" });
}
});
} else {
this.$message.error(data.msg);
}
});
}
}
};
</script>
<style lang="scss" scoped>
.el-radio__input.is-checked .el-radio__inner {
border-color: #00c292;
background: #00c292;
}
.el-radio__input.is-checked .el-radio__inner {
border-color: #00c292;
background: #00c292;
}
.el-radio__input.is-checked .el-radio__inner {
border-color: #00c292;
background: #00c292;
}
.el-radio__input.is-checked+.el-radio__label {
color: #00c292;
}
.el-radio__input.is-checked+.el-radio__label {
color: #00c292;
}
.el-radio__input.is-checked+.el-radio__label {
color: #00c292;
}
.h1 {
margin-top: 10px;
}
body {
padding: 0;
margin: 0;
}
// .container {
// min-height: 100vh;
// text-align: center;
// // background-color: #00c292;
// padding-top: 20vh;
// background-image: url(../assets/img/bg.jpg);
// background-size: 100% 100%;
// opacity: 0.9;
// }
// .login-form:before {
// vertical-align: middle;
// display: inline-block;
// }
// .login-form {
// max-width: 500px;
// padding: 20px 0;
// width: 80%;
// position: relative;
// margin: 0 auto;
// .label {
// min-width: 60px;
// }
// .input-group {
// max-width: 500px;
// padding: 20px 0;
// width: 80%;
// position: relative;
// margin: 0 auto;
// display: flex;
// align-items: center;
// .input-container {
// display: inline-block;
// width: 100%;
// text-align: left;
// margin-left: 10px;
// }
// .icon {
// width: 30px;
// height: 30px;
// }
// .input {
// position: relative;
// z-index: 2;
// float: left;
// width: 100%;
// margin-bottom: 0;
// box-shadow: none;
// border-top: 0px solid #ccc;
// border-left: 0px solid #ccc;
// border-right: 0px solid #ccc;
// border-bottom: 1px solid #ccc;
// padding: 0px;
// resize: none;
// border-radius: 0px;
// display: block;
// width: 100%;
// height: 34px;
// padding: 6px 12px;
// font-size: 14px;
// line-height: 1.42857143;
// color: #555;
// background-color: #fff;
// }
// }
// }
.nk-navigation {
margin-top: 15px;
a {
display: inline-block;
color: #fff;
background: rgba(255, 255, 255, .2);
width: 100px;
height: 50px;
border-radius: 30px;
text-align: center;
display: flex;
align-items: center;
margin: 0 auto;
justify-content: center;
padding: 0 20px;
}
.icon {
margin-left: 10px;
width: 30px;
height: 30px;
}
}
.register-container {
margin-top: 10px;
a {
display: inline-block;
color: #fff;
max-width: 500px;
height: 50px;
border-radius: 30px;
text-align: center;
display: flex;
align-items: center;
margin: 0 auto;
justify-content: center;
padding: 0 20px;
div {
margin-left: 10px;
}
}
}
.container {
height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(http://codegen.caihongy.cn/20220122/08c762ab31944b998e9d14a08c207810.png);
.login-form {
right: 50%;
top: 50%;
transform: translate3d(50%, -50%, 0);
border-radius: 10px;
background-color: rgba(255,255,255,.5);
font-size: 14px;
font-weight: 500;
box-sizing: border-box;
width: 400px;
height: auto;
padding: 120px 16px 16px;
margin: 0 0 0 300px;
border-radius: 900px 900px 400px 400px;
border-width: 20px;
border-style: solid;
border-color: rgba(220, 236, 238, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 -30px 0px 45px rgba(193, 217, 213, 1);
.h1 {
width: 80%;
height: auto;
line-height:auto;
color: rgba(255, 255, 255, 1);
font-size: 28px;
padding: 10px 0;
margin: -140px auto 66px;
border-radius: 48px;
border-width: 0;
border-style: solid;
border-color: rgba(255,0,0,0);
background-color: rgba(134, 157, 153, 1);
box-shadow: 0 0 6px rgba(255,0,0,0);
text-align: center;
}
.rgs-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.el-form-item {
width: 100%;
display: flex;
& /deep/ .el-form-item__content {
flex: 1;
display: flex;
}
}
.input {
width: 100%;
height:auto;
padding: 0;
margin: 0 0 12px 0;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(255,0,0,0);
background-color: rgba(236, 236, 236, 1);
box-shadow: 0 0 6px rgba(255,0,0,0);
& /deep/ .el-form-item__label {
width: 90px;
line-height:44px;
color: rgba(0, 0, 0, 1);
font-size: 14px;
padding: 0 10px 0 0;
margin: 0;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(255,0,0,0);
background-color: rgba(255,0,0,0);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
& /deep/ .el-input__inner {
width: 100%;
height: 44px;
line-height:44px;
color: #606266;
font-size: 14px;
padding: 0 12px;
margin: 0;
border-radius: 0;
border-width: 1px;
border-style: solid;
border-color: rgba(112, 112, 112, 1);
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
text-align: left;
}
}
.send-code {
& /deep/ .el-input__inner {
width: 100%;
height: 44px;
line-height:44px;
color: #606266;
font-size: 14px;
padding: 0 12px;
margin: 0;
border-radius: 0;
border-width: 1px;
border-style: solid;
border-color: #606266;
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
text-align: left;
}
.register-code {
margin: 0;
padding: 0;
width: 30%;
height: 44px;
line-height:44px;
color: #fff;
font-size: 14px;
border-width: 0;
border-style: solid;
border-color: rgba(255,0,0,0);
border-radius: 0;
background-color: rgba(134, 157, 153, 1);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
}
.btn {
margin: 0 25%;
padding: 25px;
width: 50%;
height: auto;
line-height:auto;
color: #fff;
font-size: 34px;
border-width: 0;
border-style: solid;
border-color: #409EFF;
border-radius: 54px;
background-color: rgba(134, 157, 153, 1);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
.close {
margin: 20px 10px;
padding: 0;
width: 88px;
height: 44px;
line-height:44px;
color: rgba(130, 130, 130, 1);
font-size: 14px;
border-width: 0;
border-style: solid;
border-color: #409EFF;
border-radius: 4px;
background-color: rgba(24, 20, 20, 0);
box-shadow: 0 0 0px rgba(255,0,0,0);
}
}
}
}
</style>
```
登录页面
```java
<template>
<div>
<div class="container loginIn">
<div :class="2 == 1 ? 'left' : 2 == 2 ? 'left center' : 'left right'">
<el-form class="login-form" label-position="left" :label-width="2 == 3 || 2 == 2 ? '30px': '0px'">
<div class="title-container"><h3 class="title">基于疫情背景下的新型点餐送餐系统登录</h3></div>
<el-form-item :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0 0 12px 0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"8px","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' :label="2 == 3 ? '用户名' : ''" :class="'style'+2">
<span v-if="2 != 3" class="svg-container" style="
color:#333;
line-height:40px;
font-size:14px;
width:30px;
padding:0;
margin:0;
radius:8px 0 0 8px;
border-width:0;
border-style:solid;
border-color:rgba(0,0,0,0);
background-color:rgba(236, 236, 236, 0);
box-shadow:0 0 6px rgba(0,0,0,0);
}"><svg-icon icon-class="user" /></span>
<el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" />
</el-form-item>
<el-form-item :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0 0 12px 0","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"8px","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' :label="2 == 3 ? '密码' : ''" :class="'style'+2">
<span v-if="2 != 3" class="svg-container" style="color:#333;
line-height:40px;
font-size:14px;
width:30px;
padding:0;
margin:0;
radius:8px 0 0 8px;
border-width:0;
border-style:solid;
border-color:rgba(0,0,0,0);
background-color:rgba(236, 236, 236, 0);
box-shadow:0 0 6px rgba(0,0,0,0);"><svg-icon icon-class="password" /></span>
<el-input placeholder="请输入密码" name="password" type="password" v-model="rulesForm.password" />
</el-form-item>
<el-form-item label="角色" prop="loginInRole" class="role" style="display: flex;align-items: center;">
<el-radio
v-for="item in menus"
v-if="item.hasBackLogin=='是'"
v-bind:key="item.roleName"
v-model="rulesForm.role"
:label="item.roleName"
>{{item.roleName}}</el-radio>
</el-form-item>
<el-button type="primary" @click="login()" class="loginInBt">{{'1' == '1' ? '登录' : 'login'}}</el-button>
<el-form-item class="setting">
<div class="register" @click="register('shangjia')">注册商家</div>
<!-- <div style="color:${template2.back.login.loginInSettingFontColor}" class="reset">修改密码</div> -->
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import menu from "@/utils/menu";
export default {
data() {
return {
rulesForm: {
username: "",
password: "",
role: "",
code: '',
},
menus: [],
tableName: "",
codes: [{
num: 1,
color: '#000',
rotate: '10deg',
size: '16px'
},{
num: 2,
color: '#000',
rotate: '10deg',
size: '16px'
},{
num: 3,
color: '#000',
rotate: '10deg',
size: '16px'
},{
num: 4,
color: '#000',
rotate: '10deg',
size: '16px'
}],
};
},
mounted() {
let menus = menu.list();
this.menus = menus;
},
created() {
this.getRandCode()
},
methods: {
register(tableName){
this.$storage.set("loginTable", tableName);
this.$router.push({path:'/register'})
},
// 登陆
login() {
if (!this.rulesForm.username) {
this.$message.error("请输入用户名");
return;
}
if (!this.rulesForm.password) {
this.$message.error("请输入密码");
return;
}
if (!this.rulesForm.role) {
this.$message.error("请选择角色");
return;
}
let menus = this.menus;
for (let i = 0; i < menus.length; i++) {
if (menus[i].roleName == this.rulesForm.role) {
this.tableName = menus[i].tableName;
}
}
this.$http({
url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
method: "post"
}).then(({ data }) => {
if (data && data.code === 0) {
this.$storage.set("Token", data.token);
this.$storage.set("role", this.rulesForm.role);
this.$storage.set("sessionTable", this.tableName);
this.$storage.set("adminName", this.rulesForm.username);
this.$router.replace({ path: "/index/" });
} else {
this.$message.error(data.msg);
}
});
},
getRandCode(len = 4){
this.randomString(len)
},
randomString(len = 4) {
let chars = [
"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",
"l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
"w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",
"H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
"S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2",
"3", "4", "5", "6", "7", "8", "9"
]
let colors = ["0", "1", "2","3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]
let sizes = ['14', '15', '16', '17', '18']
let output = [];
for (let i = 0; i < len; i++) {
// 随机验证码
let key = Math.floor(Math.random()*chars.length)
this.codes[i].num = chars[key]
// 随机验证码颜色
let code = '#'
for (let j = 0; j < 6; j++) {
let key = Math.floor(Math.random()*colors.length)
code += colors[key]
}
this.codes[i].color = code
// 随机验证码方向
let rotate = Math.floor(Math.random()*60)
let plus = Math.floor(Math.random()*2)
if(plus == 1) rotate = '-'+rotate
this.codes[i].rotate = 'rotate('+rotate+'deg)'
// 随机验证码字体大小
let size = Math.floor(Math.random()*sizes.length)
this.codes[i].size = sizes[size]+'px'
}
},
}
};
</script>
<style lang="scss" scoped>
.loginIn {
min-height: 100vh;
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-image: url(http://codegen.caihongy.cn/20220121/0019c6899ef94d4ba15f6632376b5cc4.png);
.loginInBt {
width: auto;
height: auto;
line-height: auto;
margin: 0 auto;
padding: 25px;
color: rgba(255, 255, 255, 1);
font-size: 34px;
border-radius: 54px;
border-width: 0;
border-style: solid;
border-color: rgba(64, 158, 255, 1);
background-color: rgba(134, 157, 153, 1);
box-shadow: 0 0 0px rgba(255,0,0,.1);
}
.register {
width: auto;
height: 24px;
line-height: 24px;
margin: 0 12px;
padding: 0;
color: rgba(130, 130, 130, 1);
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(64, 158, 255, 1);
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
cursor: pointer;
}
.reset {
width: auto;
height: 24px;
line-height: 24px;
margin: 0 12px;
padding: 0;
color: rgba(130, 130, 130, 1);
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(64, 158, 255, 1);
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
.left {
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 400px;
height: auto;
margin: 0 0 0 300px;
padding: 120px 16px 16px;
border-radius: 900px 900px 400px 400px;
border-width: 20px;
border-style: solid;
border-color: rgba(220, 236, 238, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 -30px 0px 45px rgba(193, 217, 213, 1);
.login-form {
background-color: transparent;
width: 100%;
right: inherit;
padding: 0;
box-sizing: border-box;
display: flex;
position: initial;
justify-content: center;
flex-direction: column;
}
.title-container {
text-align: center;
font-size: 24px;
.title {
width: 80%;
line-height: auto;
margin: -140px auto 16px;
padding: 10px;
color: rgba(255, 255, 255, 1);
font-size: 20px;
border-radius: 48px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(134, 157, 153, 1);
box-shadow: 0 0 6px rgba(0,0,0,0);
}
}
.el-form-item {
position: relative;
& /deep/ .el-form-item__content {
line-height: initial;
}
& /deep/ .el-radio__label {
width: auto;
height: 14px;
line-height: 14px;
margin: 0;
padding: 0 0 0 10px;
color: rgba(156, 156, 156, 1);
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
text-align: left;
}
& /deep/ .el-radio.is-checked .el-radio__label {
width: auto;
height: 14px;
line-height: 14px;
margin: 0;
padding: 0 0 0 10px;
color: rgba(0, 0, 0, 1);
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
text-align: left;
}
& /deep/ .el-radio__inner {
width: 14px;
height: 14px;
margin: 6px 0;
padding: 0;
border-radius: 100%;
border-width: 1px;
border-style: solid;
border-color: #dcdfe6;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
& /deep/ .el-radio.is-checked .el-radio__inner {
width: 14px;
height: 14px;
margin: 0;
padding: 0;
border-radius: 100%;
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 1);
background-color: rgba(0, 0, 0, 1);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
.svg-container {
padding: 6px 5px 6px 15px;
color: #889aa4;
vertical-align: middle;
display: inline-block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
padding: 0;
line-height: 40px;
width: 30px;
text-align: center;
}
.el-input {
display: inline-block;
// height: 40px;
width: 100%;
& /deep/ input {
background: transparent;
border: 0px;
-webkit-appearance: none;
padding: 0 15px 0 30px;
color: #fff;
height: 40px;
width: 100%;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0 30px;
color: rgba(0, 0, 0, 1);
font-size: 16px;
border-radius: 8px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,0);
background-color: rgba(236, 236, 236, 1);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
}
}
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
}
.right {
position: absolute;
left: inherit;
right: 0;
top: 0;
}
.code {
.el-form-item__content {
position: relative;
.getCodeBt {
position: absolute;
right: 0;
top: 50%;
transform: translate3d(0, -50%, 0);
line-height: 40px;
width: 100px;
background-color: rgba(51,51,51,0.4);
color: #fff;
text-align: center;
border-radius: 0 4px 4px 0;
height: 40px;
overflow: hidden;
padding: 0;
margin: 0;
width: 100px;
height: 40px;
line-height: 40px;
border-radius: 0 8px 8px 0;
border-width: 0;
border-style: solid;
border-color: rgba(64, 158, 255, 1);
background-color: rgba(51, 51, 51, 0.4);
box-shadow: 0 0 6px rgba(255,0,0,0);
span {
padding: 0 5px;
display: inline-block;
font-size: 16px;
font-weight: 600;
}
}
.el-input {
& /deep/ input {
padding: 0 130px 0 30px;
}
}
}
}
.setting {
& /deep/ .el-form-item__content {
// padding: 0 15px;
box-sizing: border-box;
line-height: 32px;
height: 32px;
font-size: 14px;
color: #999;
margin: 0 !important;
display: flex;
.register {
// float: left;
// width: 50%;
text-align: center;
}
.reset {
float: right;
width: 50%;
text-align: right;
}
}
}
.style2 {
padding-left: 30px;
.svg-container {
left: -30px !important;
}
.el-input {
& /deep/ input {
padding: 0 15px !important;
}
}
}
.code.style2, .code.style3 {
.el-input {
& /deep/ input {
padding: 0 115px 0 15px;
}
}
}
.style3 {
& /deep/ .el-form-item__label {
padding-right: 6px;
height: 40px;
line-height: 40px;
}
.el-input {
& /deep/ input {
padding: 0 15px !important;
}
}
}
& /deep/ .el-form-item__label {
width: 30px;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
color: #333;
font-size: 14px;
border-radius: 8px 0 0 8px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,0);
background-color: rgba(236, 236, 236, 0);
box-shadow: 0 0 6px rgba(0,0,0,0);
}
.role {
& /deep/ .el-form-item__label {
width: 56px !important;
height: 38px;
line-height: 38px;
margin: 0;
padding: 0;
color: rgba(0, 0, 0, 1);
font-size: 14px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(64, 158, 255, 1);
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
text-align: left;
}
& /deep/ .el-radio {
margin-right: 12px;
}
}
}
</style>
```
4.系统演示地址
链接：https://pan.baidu.com/s/1En9pP6VL6wrqT1vMlqIHiA
提取码：9srx
