废话不多说直接上图，加了一些动态切换效果
重点来了
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>登录注册</title>
<style>
/* -- flex弹性布局 -- */
.flex {
display: flex;
}
.basis-xs {
flex-basis: 20%;
}
.basis-sm {
flex-basis: 40%;
}
.basis-df {
flex-basis: 50%;
}
.basis-lg {
flex-basis: 60%;
}
.basis-xl {
flex-basis: 80%;
}
.flex-sub {
flex: 1;
}
.flex-twice {
flex: 2;
}
.flex-treble {
flex: 3;
}
.flex-direction {
flex-direction: column;
}
.flex-direction-column-reverse {
flex-direction: column-reverse;
}
.flex-direction-row-reverse {
flex-direction: row-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
.align-center {
align-items: center;
}
.align-stretch {
align-items: stretch;
}
.self-start {
align-self: flex-start;
}
.self-center {
align-self: flex-center;
}
.self-end {
align-self: flex-end;
}
.self-stretch {
align-self: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader .del {
width: 20px;
height: 20px;
position: absolute;
top: -5px;
right: -5px;
border-radius: 50%;
background: #f56c6c;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
cursor: pointer;
transition: all ease 0.2s;
z-index: 1;
}
.avatar-uploader .del i {
font-size: 12px;
color: #fff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}
.avatar {
max-width: 200px;
height: 60px;
display: block;
position: relative;
}
.el-image {
overflow: visible;
}
div {
display: block;
}
body {
background: url(img/1.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
background-color: antiquewhite;
}
.page-box {
margin: 0 20px;
box-sizing: border-box;
}
button {
outline: none;
}
form {
background: #fff;
display: flex;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
padding-bottom: 50px;
}
input {
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
outline: none;
}
a {
color: black;
font-size: 15px;
text-decoration: none;
margin: 20px 0;
}
.main {
background: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
position: relative;
display: flex;
overflow: hidden;
width: 1200px;
max-width: 100%;
height: 90vh;
margin: 3% auto 0 auto;
}
.Login_div {
background: #fff;
width: 50%;
height: 100%;
opacity: 1;
text-align: center;
}
.Options_div {
background: #fff;
background-color: #ff445e;
width: 50%;
color: #fff;
text-align: center;
}
.Options_div span {
font-size: 15px;
letter-spacing: 1px;
}
.Options_div button {
background: transparent;
border: 1px solid #fff;
border-radius: 20px;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 5px;
margin-top: 8%;
}
.Registered_div {
background: #fff;
width: 0;
height: 90vh;
opacity: 0;
padding-top: 1px;
overflow: hidden;
}
.eneter_input {
width: 100%;
display: flex;
justify-content: space-between;
}
.eneter_input .item {
width: 48%;
display: flex;
align-items: center;
}
.tb{
color: red;
margin-right: 4px;
}
.eneter {
margin-top: 20px;
}
.submit_button {
margin-top: 50px;
border-radius: 20px;
border: 1px solid #ff4b2b;
background: #ff4b2b;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 5px;
width: 80%;
}
#Switch_Login {
display: none;
opacity: 0;
}
</style>
</head>
<body>
<div class="main" id="formApp">
<div class="Login_div flex align-center justify-center">
<div class="page-box">
<h2>登录</h2>
<span>请登录您的账号</span>
<div class="eneter">
<el-input type='numbber' placeholder='请输入账号' :clearable='true' v-model='loginData.userName'></el-input>
<el-input type='password' placeholder='请输入密码' :clearable='true' v-model='loginData.password'></el-input>
</div>
<button type="submit" class="submit_button" id="btn_login" @click="gosubmit">登录</button>
</div>
</div>
<!-- -->
<div class="Options_div flex align-center justify-center ">
<div id="Switch_Registered">
<h2>还没有账号？</h2>
<p>立即注册，和我们一起开始旅程吧</p>
<button id="Registered_button" @click="goRegistered">前往注册</button>
</div>
<div id="Switch_Login">
<h2>已有账号？</h2>
<p>请使用您的帐号进行登录</p>
<button id="Login_button" @click="goLogin">前往登录</button>
</div>
</div>
<!-- -->
<div class="Registered_div flex align-center justify-center">
<div class="page-box">
<h2>注册</h2>
<h6>注册您的信息</h6>
<div class="eneter">
<div class="eneter_input">
<div class="item">
<span class="tb">*</span>
<el-input type='text' placeholder='请输入联系方式' clearable
v-model='registerData.mobile'></el-input>
</div>
<div class="item">
<span class="tb">*</span>
<el-input type='password' placeholder='请输入注册密码' clearable
v-model='registerData.password'></el-input>
</div>
</div>
<div class="eneter_input">
<div class="item">
<span class="tb">*</span>
<el-input type='text' placeholder='请输入企业名称' clearable
v-model='registerData.enterprise_name'> </el-input>
</div>
<div class="item">
<span class="tb">*</span>
<el-input type='text' placeholder='请输入统一社会信用代码' clearable
v-model='registerData.credit_code'></el-input>
</div>
</div>
<div class="eneter_input">
<div class="item">
<span class="tb">*</span>
<el-date-picker v-model="registerData.business_term" type="date"
placeholder="请选择营业期限" style="width: 100%;">
</el-date-picker>
</div>
<div class="item">
<span class="tb">*</span>
<el-input type='text' placeholder='请输入住所' clearable
v-model='registerData.residence'></el-input>
</div>
</div>
<div class="eneter_input">
<div class="item">
<span class="tb">*</span>
<el-input type='text' placeholder='请输入法定代表人' clearable
v-model='registerData.legal_representative'></el-input>
</div>
<div class="item">
<span class="tb">*</span>
<el-input type='text' placeholder='请输入法人身份证号' clearable
v-model='registerData.corporate_id_number'></el-input>
</div>
</div>
<div class="eneter_input">
<div class="flex align-center justify-start flex-sub">
<span class="tb">*</span>
<span style="margin-right:15px;">上传营业执照</span>
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false" :on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<el-image v-if="registerData.business_license" class="avatar" @click.stop="()=>{}"
:src="registerData.business_license"
:preview-src-list="[registerData.business_license]"></el-image>
<div v-if="registerData.business_license" class="del"
@click.stop="registerData.business_license=''">
<i class="el-icon-close"></i>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
</el-upload>
</div>
</div>
<!-- 图片上传 -->
<div style="margin-top:8px; margin-bottom: 8px; text-align: left;">
<span class="tb">*</span>
经营业态：
</div>
<el-checkbox-group style="font-size: 20px;" v-model="registerData.business_type" @change="handleCheckedBusinessChange">
<el-checkbox v-for="item in business_option" :label="item.aid" :key="item.aid">{{item.name}}
</el-checkbox>
</el-checkbox-group>
<div class="eneter_input">
<el-input type='text' class="item" placeholder='请输入服务负责人姓名' clearable
v-model='registerData.service_principal_Name'></el-input>
<el-input type='text' class="item" placeholder='请输入业务负责人手机号' clearable
v-model='registerData.business_mobile_number'></el-input>
</div>
<div class="eneter_input">
<el-input type='text' class="item" placeholder='请输入业务负责人邮箱' clearable
v-model='registerData.business_email'></el-input>
</div>
</div>
<button class="submit_button" id="btn_reset" @click="submitRegister" style="width:100% ;">注册</button>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.js"></script>
<script>
const AD_MANGER = new Vue({
el: '#formApp',
data() {
return {
business_option: [
{ aid: 1, name: '居家保洁收纳' },
{ aid: 2, name: '衣物洗涤收纳' },
{ aid: 3, name: '家庭餐制作' },
{ aid: 4, name: '母婴护理' },
{ aid: 5, name: '育婴' },
{ aid: 6, name: '居家养老护理' },
{ aid: 7, name: '病患陪护' },
{ aid: 8, name: '管家' },
{ aid: 9, name: '涉外家政' }
],
loginData: {
userName: '',
password: '',
},
registerData: {
enterprise_name: '',
credit_code: '',
business_term: '',
residence: '',
legal_representative: '',
corporate_id_number: '',
password:'',
mobile: '',
business_type: [],
business_license: '',
service_principal_Name: '',
business_mobile_number: '',
business_email: ''
},
};
},
components: {
},
created() {
},
mounted() {
},
methods: {
handleAvatarSuccess(res, file) {
this.registerData.business_license = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = ['image/png', 'image/jpg', 'image/jpeg'].indexOf(file.type) > -1;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
handleCheckedBusinessChange() {
console.log(this.registerData.business_type, 'business_type')
},
gosubmit(){
// 手机号验证
let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
// 密码校验,"以字母开头，长度在6~18之间，只能包含字母、数字和下划线"
let mima = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/
if (this.loginData.userName =="") {
return this.$message.error('请输入账号')
}else if (!reg.test(this.loginData.userName)) {
return this.$message.error('请输入正确请输入账号手机号')
}
if (this.loginData.password =="") {
return this.$message.error('请输入账号')
}else if (!reg.test(this.loginData.password)) {
return this.$message.error('请输入正确的密码')
}
$.ajax({
type: 'POST',
url: baseURL + '/api/v1/61a5e1936dc40',
data: this.loginData,
headers: { },
dataType: 'json',
success: response => {
if (response.code == 1) {
this.$message.success(response.msg)
} else {
this.$message.error(response.msg)
}
}
})
},
//获取项目成员
submitRegister() {
// 手机号验证
let reg =/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
// 身份证号验证
let IDRe = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
// 密码校验,"以字母开头，长度在6~18之间，只能包含字母、数字和下划线"
let mima = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/
// 邮箱验证
let Email = /^[A-Za-z\d]+([-_\.][A-Za-z\d]+)*@([A-Za-z\d]+[-\.])+[A-Za-z\d]{2,4}(,[A-Za-z\d]+([-_\.][A-Za-z\d]+)*@([A-Za-z\d]+[-\.])+[A-Za-z\d]{2,4})*$/
if (this.registerData.enterprise_name == "") {
return this.$message.error('请输入企业名称')
}
if (this.registerData.credit_code=="") {
return this.$message.error('请输入社会统一信用代码')
}
if (this.registerData.business_term == "") {
return this.$message.error('请输入营业期限')
}
if (this.registerData.residence == "") {
return this.$message.error('请输入住所')
}
if (this.registerData.legal_representative == "") {
return this.$message.error('请输入法定代表人')
}
if (this.registerData.corporate_id_number == "") {
return this.$message.error('请输入法人身份证号')
}else if (!IDRe.test(this.registerData.corporate_id_number)) {
return this.$message.error('请输入正确的法人身份证号')
}
if (this.registerData.mobile == "") {
return this.$message.error('请输入联系方式')
}else if(!reg.test(this.registerData.mobile)){
return this.$message.error('请输入正确的联系方式')
}
if (this.registerData.password == "") {
return this.$message.error('请输入注册密码')
}else if(!mima.test(this.registerData.password)){
return this.$message.error('必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间')
}
if (this.registerData.business_license == "") {
return this.$message.error('请上传营业执照')
}
if (this.registerData.business_type.length < 1 ) {
return this.$message.error('请选择经营业态')
}
if (this.registerData.business_mobile_number != "" && !reg.test(this.registerData.business_mobile_number)) {
return this.$message.error('请输入正确的业务负责人手机号')
}
if (this.registerData.business_email != "" && !Email.test(this.registerData.business_email)) {
return this.$message.error('请输入正确的业务负责人邮箱')
}
$.ajax({
type: 'POST',
url: baseURL + '/api/v1/61a5e1936dc40',
data: this.registerData,
headers: {},
dataType: 'json',
success: response => {
if (response.code == 1) {
this.$message.success(response.msg)
this.goLogin()
} else {
this.$message.error(response.msg)
}
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
goLogin() {
$(".Registered_div").animate({ width: "0", opacity: "0" });
$(".Login_div").animate({ width: "50%", opacity: "1" });
$("#Switch_Login").animate({ opacity: "0" });
$("#Switch_Registered").animate({ opacity: "1" });
$("#Switch_Login").slideUp();
$("#Switch_Registered").slideDown(500);
},
goRegistered(){
$(".Login_div").animate({ width: "0", opacity: "0" });
$(".Registered_div").animate({ width: "50%", opacity: "1" });
$("#Switch_Registered").animate({ opacity: "0" });
$("#Switch_Login").animate({ opacity: "1" });
$("#Switch_Registered").slideUp();
$("#Switch_Login").slideDown();
}
}
})
</script>
</html>多选：
登录，注册：
图片上传：
登录时验证：
注册：
点击‘前往注册’，‘前往登录’ 时的动画： 采用了jquery
789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
