Skip to content

薪
薪瑞通-前端
Commit 6796d0cc authored by 许珑标's avatar 许珑标
Browse files
Options

注册页面样式优化

parent a7bb4956
Show whitespace changes
Inline Side-by-side
Showing with 90 additions and 30 deletions
src/views/unitRegister.vue
View file @ 6796d0cc
<template>
<div class="register">
<div class="register-main">
<img class="loginTitleStyle" src="../assets/images/login-title.png" alt="">
<el-form ref="form" :model="form" :rules="rules" class="formData" label-width="125px">
<!-- 企业资质信息 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span class="cardHeartTitle">企业资质信息</span>
</div>
<el-card shadow="hover" class="box-card" style="margin-top: 22px;">
<div class="cardMain">
<!-- 企业资质信息 -->
<el-row :gutter="56">
<el-col :span="24">
<el-divider content-position="left">企业资质信息</el-divider>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="10">
<el-col :span="11">
<el-form-item label="企业名称" prop="unitName">
<el-input v-model="form.unitName" placeholder="必填，需与营业执照名称一致" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-col :span="11">
<el-form-item label="信用代码" prop="unitCode">
<el-input v-model="form.unitCode" placeholder="必填，填写营业执照信用代码" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="10">
<el-col :span="11">
<el-form-item label="所属行业" prop="sectorDictDataVal">
<el-select v-model="form.sectorDictDataVal" placeholder="请选择所属行业">
<el-option v-for="dict in dict.type.unit_business_type" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-col :span="11">
<el-form-item label="营业地址" prop="address">
<el-input v-model="form.address" placeholder="必填，请填写能够收到快递的地址" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="10">
<el-col :span="11">
<el-form-item label="入驻类型" prop="registerType">
<el-select v-model="form.registerType" placeholder="请选择入驻类型">
<el-option label="人力资源" :value="1" />
......@@ -44,49 +47,46 @@
</el-form-item>
</el-col>
</el-row>
</div>
</el-card>
<!-- 管理员信息 -->
<el-card class="box-card" style="margin-top: 22px;">
<div slot="header" class="clearfix">
<span class="cardHeartTitle">注册账号信息</span>
</div>
<div class="cardMain">
<!-- 注册账号信息-->
<el-row :gutter="56">
<el-col :span="10">
<el-col :span="24">
<el-divider content-position="left">注册账号信息</el-divider>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="11">
<el-form-item label="姓名" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入管理员姓名" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-col :span="11">
<el-form-item label="联系电话" prop="phonenumber">
<el-input v-model="form.phonenumber" maxlength="11" placeholder="请输入管理员联系电话" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="10">
<el-col :span="11">
<el-form-item label="联系邮箱" prop="email">
<el-input v-model="form.email" maxlength="50" placeholder="请输入管理员联系邮箱" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="10">
<el-col :span="11">
<el-form-item label="设置密码" prop="password">
<el-input type="password" auto-complete="off" v-model="form.password" placeholder="请设置本系统登录密码" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-col :span="11">
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" auto-complete="off" v-model="form.confirmPassword" placeholder="请再次输入本系统登录密码" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="10">
<el-form-item prop="code">
<el-col :span="20">
<el-form-item label="验证码" prop="code">
<el-input v-model="form.code" auto-complete="off" placeholder="验证码" style="width: 63%" >
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
......@@ -97,12 +97,14 @@
</el-col>
</el-row>
</div>
</el-card>
<div class="fixdBottomMain">
<el-button type="info" style="width:100px;font-size:14px;" @click="gotoLogin">返 回</el-button>
<el-button type="primary" style="width:100px;font-size:14px;" @click="submitForm">确 认</el-button>
<el-button type="primary" style="width:50%;font-size:14px;" @click="submitForm">确认注册</el-button>
</div>
</el-card>
<div style="float: right;">
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
</div>
</el-form>
</div>
<!-- 底部 -->
......@@ -255,6 +257,10 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss">
.cardMain .el-divider__text{
font-size: 18px;
color: #337ab7;
}
.register {
height: 100vh;
background-image: url("../assets/images/login-background.png");
......@@ -272,6 +278,13 @@ export default {
height: 100vh;
//margin-top: 12vh;
overflow: scroll;
.loginTitleStyle {
position: absolute;
left: 80vh;
top: 12vh;
width: 200px;
height: 45px;
}
}
.title {
margin: 0px auto 30px auto;
......@@ -340,4 +353,51 @@ export default {
justify-content: center;
//margin-bottom: 50px;
}
.box-card{
width: 80vh;
}
.cardMain {
// 表单label样式
.el-form-item__label {
color: #000;
font-size: 14px;
font-weight: 530;
}
// 参数信息-首个参数
.parameterFirst {
width: 100%;
padding-left: 25%;
text-align: center;
color: #000;
font-size: 14px;
font-weight: 530;
}
// 参数信息-剩余标题
.parameterConter {
width: 100%;
text-align: center;
color: #000;
font-size: 14px;
font-weight: 530;
}
// 金额盒子样式
.amountMain {
width: 100%;
text-align: center;
}
.el-input-number--small {
width: 100% !important;
}
.projectTitle {
color: #000;
font-size: 14px;
font-weight: 530;
}
}
</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