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