[免费]SpringBoot+Vue疫苗接种预约管理系统【论文+源码+SQL脚本】

大家好，我是java1234_小锋老师，看到一个不错的SpringBoot+Vue疫苗接种预约管理系统，分享下哈。

项目介绍

如今的时代，是有史以来最好的时代，随着计算机的发展到现在的移动终端的发展，国内目前信息技术已经在世界上遥遥领先，让人们感觉到处于信息大爆炸的社会。信息时代的信息处理肯定不能用之前的手工处理这样的解决方法，必须采用计算机来处理这些信息，因为传统方法对应计算机处理的信息效率上真的相差甚远。

本次使用Java技术开发的疫苗发布和接种预约系统，就是运用计算机来管理疫苗接种预约信息，该系统是可以实现论坛管理，公告信息管理，疫苗信息管理，医生管理，医院信息管理，用户管理，预约接种管理等功能。

疫苗发布和接种预约系统使用计算机处理相关信息，主要是在数据的传输上能达到即可传递，数据不管是想要获取或者输入，都可以及时反馈，极大的提高了效率，使用的MySQL数据库也能让数据更能安全的存储。

系统展示

部分代码

package com.controller;import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.*;
import java.lang.reflect.InvocationTargetException;import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;/*** 用户* 后端接口* @author* @email
*/
@RestController
@Controller
@RequestMapping("/yonghu")
public class YonghuController {private static final Logger logger = LoggerFactory.getLogger(YonghuController.class);@Autowiredprivate YonghuService yonghuService;@Autowiredprivate TokenService tokenService;@Autowiredprivate DictionaryService dictionaryService;//级联表service@Autowiredprivate YishengService yishengService;/*** 后端列表*/@RequestMapping("/page")public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));String role = String.valueOf(request.getSession().getAttribute("role"));if(false)return R.error(511,"永不会进入");else if("用户".equals(role))params.put("yonghuId",request.getSession().getAttribute("userId"));else if("医生".equals(role))params.put("yishengId",request.getSession().getAttribute("userId"));params.put("yonghuDeleteStart",1);params.put("yonghuDeleteEnd",1);if(params.get("orderBy")==null || params.get("orderBy")==""){params.put("orderBy","id");}PageUtils page = yonghuService.queryPage(params);//字典表数据转换List<YonghuView> list =(List<YonghuView>)page.getList();for(YonghuView c:list){//修改对应字典表字段dictionaryService.dictionaryConvert(c, request);}return R.ok().put("data", page);}/*** 后端详情*/@RequestMapping("/info/{id}")public R info(@PathVariable("id") Long id, HttpServletRequest request){logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);YonghuEntity yonghu = yonghuService.selectById(id);if(yonghu !=null){//entity转viewYonghuView view = new YonghuView();BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中//修改对应字典表字段dictionaryService.dictionaryConvert(view, request);return R.ok().put("data", view);}else {return R.error(511,"查不到数据");}}/*** 后端保存*/@RequestMapping("/save")public R save(@RequestBody YonghuEntity yonghu, HttpServletRequest request){logger.debug("save方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());String role = String.valueOf(request.getSession().getAttribute("role"));if(false)return R.error(511,"永远不会进入");Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>().eq("username", yonghu.getUsername()).or().eq("yonghu_phone", yonghu.getYonghuPhone()).or().eq("yonghu_id_number", yonghu.getYonghuIdNumber()).andNew().eq("yonghu_delete", 1);logger.info("sql语句:"+queryWrapper.getSqlSegment());YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);if(yonghuEntity==null){yonghu.setYonghuDelete(1);yonghu.setCreateTime(new Date());yonghu.setPassword("123456");yonghuService.insert(yonghu);return R.ok();}else {return R.error(511,"账户或者联系方式或者用户身份证号已经被使用");}}/*** 后端修改*/@RequestMapping("/update")public R update(@RequestBody YonghuEntity yonghu, HttpServletRequest request){logger.debug("update方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");//根据字段查询是否有相同数据Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>().notIn("id",yonghu.getId()).andNew().eq("username", yonghu.getUsername()).or().eq("yonghu_phone", yonghu.getYonghuPhone()).or().eq("yonghu_id_number", yonghu.getYonghuIdNumber()).andNew().eq("yonghu_delete", 1);logger.info("sql语句:"+queryWrapper.getSqlSegment());YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);if("".equals(yonghu.getYonghuPhoto()) || "null".equals(yonghu.getYonghuPhoto())){yonghu.setYonghuPhoto(null);}if(yonghuEntity==null){yonghuService.updateById(yonghu);//根据id更新return R.ok();}else {return R.error(511,"账户或者联系方式或者用户身份证号已经被使用");}}/*** 删除*/@RequestMapping("/delete")public R delete(@RequestBody Integer[] ids){logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());ArrayList<YonghuEntity> list = new ArrayList<>();for(Integer id:ids){YonghuEntity yonghuEntity = new YonghuEntity();yonghuEntity.setId(id);yonghuEntity.setYonghuDelete(2);list.add(yonghuEntity);}if(list != null && list.size() >0){yonghuService.updateBatchById(list);}return R.ok();}/*** 批量上传*/@RequestMapping("/batchInsert")public R save( String fileName){logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);try {List<YonghuEntity> yonghuList = new ArrayList<>();//上传的东西Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段Date date = new Date();int lastIndexOf = fileName.lastIndexOf(".");if(lastIndexOf == -1){return R.error(511,"该文件没有后缀");}else{String suffix = fileName.substring(lastIndexOf);if(!".xls".equals(suffix)){return R.error(511,"只支持后缀为xls的excel文件");}else{URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径File file = new File(resource.getFile());if(!file.exists()){return R.error(511,"找不到上传文件，请联系管理员");}else{List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件dataList.remove(0);//删除第一行，因为第一行是提示for(List<String> data:dataList){//循环YonghuEntity yonghuEntity = new YonghuEntity();
//                            yonghuEntity.setUsername(data.get(0));                    //账户 要改的
//                            //yonghuEntity.setPassword("123456");//密码
//                            yonghuEntity.setYonghuName(data.get(0));                    //用户姓名 要改的
//                            yonghuEntity.setYonghuPhoto("");//照片
//                            yonghuEntity.setSexTypes(Integer.valueOf(data.get(0)));   //性别 要改的
//                            yonghuEntity.setYonghuPhone(data.get(0));                    //联系方式 要改的
//                            yonghuEntity.setYonghuIdNumber(data.get(0));                    //用户身份证号 要改的
//                            yonghuEntity.setYonghuEmail(data.get(0));                    //邮箱 要改的
//                            yonghuEntity.setYonghuDelete(1);//逻辑删除字段
//                            yonghuEntity.setCreateTime(date);//时间yonghuList.add(yonghuEntity);//把要查询是否重复的字段放入map中//账户if(seachFields.containsKey("username")){List<String> username = seachFields.get("username");username.add(data.get(0));//要改的}else{List<String> username = new ArrayList<>();username.add(data.get(0));//要改的seachFields.put("username",username);}//联系方式if(seachFields.containsKey("yonghuPhone")){List<String> yonghuPhone = seachFields.get("yonghuPhone");yonghuPhone.add(data.get(0));//要改的}else{List<String> yonghuPhone = new ArrayList<>();yonghuPhone.add(data.get(0));//要改的seachFields.put("yonghuPhone",yonghuPhone);}//用户身份证号if(seachFields.containsKey("yonghuIdNumber")){List<String> yonghuIdNumber = seachFields.get("yonghuIdNumber");yonghuIdNumber.add(data.get(0));//要改的}else{List<String> yonghuIdNumber = new ArrayList<>();yonghuIdNumber.add(data.get(0));//要改的seachFields.put("yonghuIdNumber",yonghuIdNumber);}}//查询是否重复//账户List<YonghuEntity> yonghuEntities_username = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("username", seachFields.get("username")).eq("yonghu_delete", 1));if(yonghuEntities_username.size() >0 ){ArrayList<String> repeatFields = new ArrayList<>();for(YonghuEntity s:yonghuEntities_username){repeatFields.add(s.getUsername());}return R.error(511,"数据库的该表中的 [账户] 字段已经存在 存在数据为:"+repeatFields.toString());}//联系方式List<YonghuEntity> yonghuEntities_yonghuPhone = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("yonghu_phone", seachFields.get("yonghuPhone")).eq("yonghu_delete", 1));if(yonghuEntities_yonghuPhone.size() >0 ){ArrayList<String> repeatFields = new ArrayList<>();for(YonghuEntity s:yonghuEntities_yonghuPhone){repeatFields.add(s.getYonghuPhone());}return R.error(511,"数据库的该表中的 [联系方式] 字段已经存在 存在数据为:"+repeatFields.toString());}//用户身份证号List<YonghuEntity> yonghuEntities_yonghuIdNumber = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("yonghu_id_number", seachFields.get("yonghuIdNumber")).eq("yonghu_delete", 1));if(yonghuEntities_yonghuIdNumber.size() >0 ){ArrayList<String> repeatFields = new ArrayList<>();for(YonghuEntity s:yonghuEntities_yonghuIdNumber){repeatFields.add(s.getYonghuIdNumber());}return R.error(511,"数据库的该表中的 [用户身份证号] 字段已经存在 存在数据为:"+repeatFields.toString());}yonghuService.insertBatch(yonghuList);return R.ok();}}}}catch (Exception e){return R.error(511,"批量插入数据异常，请联系管理员");}}/*** 登录*/@IgnoreAuth@RequestMapping(value = "/login")public R login(String username, String password, String captcha, HttpServletRequest request) {YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));if(yonghu==null || !yonghu.getPassword().equals(password))return R.error("账号或密码不正确");else if(yonghu.getYonghuDelete() != 1)return R.error("账户已被删除");//  // 获取监听器中的字典表// ServletContext servletContext = ContextLoader.getCurrentWebApplicationContext().getServletContext();// Map<String, Map<Integer, String>> dictionaryMap= (Map<String, Map<Integer, String>>) servletContext.getAttribute("dictionaryMap");// Map<Integer, String> role_types = dictionaryMap.get("role_types");// role_types.get(.getRoleTypes());String token = tokenService.generateToken(yonghu.getId(),username, "yonghu", "用户");R r = R.ok();r.put("token", token);r.put("role","用户");r.put("username",yonghu.getYonghuName());r.put("tableName","yonghu");r.put("userId",yonghu.getId());return r;}/*** 注册*/@IgnoreAuth@PostMapping(value = "/register")public R register(@RequestBody YonghuEntity yonghu){
//    	ValidatorUtils.validateEntity(user);Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>().eq("username", yonghu.getUsername()).or().eq("yonghu_phone", yonghu.getYonghuPhone()).or().eq("yonghu_id_number", yonghu.getYonghuIdNumber()).andNew().eq("yonghu_delete", 1);YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);if(yonghuEntity != null)return R.error("账户或者联系方式或者用户身份证号已经被使用");yonghu.setYonghuDelete(1);yonghu.setCreateTime(new Date());yonghuService.insert(yonghu);return R.ok();}/*** 重置密码*/@GetMapping(value = "/resetPassword")public R resetPassword(Integer  id){YonghuEntity yonghu = new YonghuEntity();yonghu.setPassword("123456");yonghu.setId(id);yonghuService.updateById(yonghu);return R.ok();}/*** 忘记密码*/@IgnoreAuth@RequestMapping(value = "/resetPass")public R resetPass(String username, HttpServletRequest request) {YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));if(yonghu!=null){yonghu.setPassword("123456");boolean b = yonghuService.updateById(yonghu);if(!b){return R.error();}}else{return R.error("账号不存在");}return R.ok();}/*** 获取用户的session用户信息*/@RequestMapping("/session")public R getCurrYonghu(HttpServletRequest request){Integer id = (Integer)request.getSession().getAttribute("userId");YonghuEntity yonghu = yonghuService.selectById(id);if(yonghu !=null){//entity转viewYonghuView view = new YonghuView();BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中//修改对应字典表字段dictionaryService.dictionaryConvert(view, request);return R.ok().put("data", view);}else {return R.error(511,"查不到数据");}}/*** 退出*/@GetMapping(value = "logout")public R logout(HttpServletRequest request) {request.getSession().invalidate();return R.ok("退出成功");}/*** 前端列表*/@IgnoreAuth@RequestMapping("/list")public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));// 没有指定排序字段就默认id倒序if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){params.put("orderBy","id");}PageUtils page = yonghuService.queryPage(params);//字典表数据转换List<YonghuView> list =(List<YonghuView>)page.getList();for(YonghuView c:list)dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段return R.ok().put("data", page);}/*** 前端详情*/@RequestMapping("/detail/{id}")public R detail(@PathVariable("id") Long id, HttpServletRequest request){logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);YonghuEntity yonghu = yonghuService.selectById(id);if(yonghu !=null){//entity转viewYonghuView view = new YonghuView();BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中//修改对应字典表字段dictionaryService.dictionaryConvert(view, request);return R.ok().put("data", view);}else {return R.error(511,"查不到数据");}}/*** 前端保存*/@RequestMapping("/add")public R add(@RequestBody YonghuEntity yonghu, HttpServletRequest request){logger.debug("add方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>().eq("username", yonghu.getUsername()).or().eq("yonghu_phone", yonghu.getYonghuPhone()).or().eq("yonghu_id_number", yonghu.getYonghuIdNumber()).andNew().eq("yonghu_delete", 1);logger.info("sql语句:"+queryWrapper.getSqlSegment());YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);if(yonghuEntity==null){yonghu.setYonghuDelete(1);yonghu.setCreateTime(new Date());yonghu.setPassword("123456");yonghuService.insert(yonghu);return R.ok();}else {return R.error(511,"账户或者联系方式或者用户身份证号已经被使用");}}}

<template><div><div class="container loginIn" style="backgroundImage: url(/img/back-img-bg.jpg)"><div :class="2 == 1 ? 'left' : 2 == 2 ? 'left center' : 'left right'" style="backgroundColor: rgba(225, 225, 225, 1)"><el-form class="login-form" label-position="left" :label-width="3 == 3 ? '56px' : '0px'"><div class="title-container"><h3 class="title" style="color: rgba(244, 91, 75, 1)">疫苗发布和接种预约系统</h3></div><el-form-item :label="3 == 3 ? '用户名' : ''" :class="'style'+3"><span v-if="3 != 3" class="svg-container" style="color:rgba(136, 154, 164, 1);line-height:46px"><svg-icon icon-class="user" /></span><el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" /></el-form-item><el-form-item :label="3 == 3 ? '密码' : ''" :class="'style'+3"><span v-if="3 != 3" class="svg-container" style="color:rgba(136, 154, 164, 1);line-height:46px"><svg-icon icon-class="password" /></span><el-input placeholder="请输入密码" name="password" type="password" v-model="rulesForm.password" /></el-form-item><el-form-item v-if="0 == '1'" class="code" :label="3 == 3 ? '验证码' : ''" :class="'style'+3"><span v-if="3 != 3" class="svg-container" style="color:rgba(136, 154, 164, 1);line-height:46px"><svg-icon icon-class="code" /></span><el-input placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code" /><div class="getCodeBt" @click="getRandCode(4)" style="height:46px;line-height:46px"><span v-for="(item, index) in codes" :key="index" :style="{color:item.color,transform:item.rotate,fontSize:item.size}">{{ item.num }}</span></div></el-form-item><el-form-item label="角色" prop="loginInRole" class="role"><el-radiov-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" style="padding:0;font-size:17px;border-radius:25px;height:40px;line-height:40px;width:100%;backgroundColor:rgba(244, 91, 75, 1); borderColor:rgba(244, 91, 75, 1); color:rgba(255, 255, 255, 1)">{{'1' == '1' ? '登录' : 'login'}}</el-button><el-form-item class="setting"><div style="color:rgba(0, 150, 136, 1)" class="register" @click="register('yisheng')">医生注册</div><div style="color:rgba(0, 150, 136, 1)" class="register" @click="register('yonghu')">用户注册</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.setInputColor()this.getRandCode()},methods: {setInputColor(){this.$nextTick(()=>{document.querySelectorAll('.loginIn .el-input__inner').forEach(el=>{el.style.backgroundColor = "rgba(202, 202, 202, 1)"el.style.color = "rgba(129, 129, 129, 1)"el.style.height = "46px"el.style.lineHeight = "46px"el.style.borderRadius = "25px"})document.querySelectorAll('.loginIn .style3 .el-form-item__label').forEach(el=>{el.style.height = "46px"el.style.lineHeight = "46px"})document.querySelectorAll('.loginIn .el-form-item__label').forEach(el=>{el.style.color = "rgb(0 0 0)"})setTimeout(()=>{document.querySelectorAll('.loginIn .role .el-radio__label').forEach(el=>{el.style.color = "rgb(0 0 0)"})},350)})},register(tableName){this.$storage.set("loginTable", tableName);this.$router.push({path:'/register'})},// 登陆login() {let code = ''for(let i in this.codes) {code += this.codes[i].num}if ('0' == '1' && !this.rulesForm.code) {this.$message.error("请输入验证码");return;}if ('0' == '1' && this.rulesForm.code.toLowerCase() != code.toLowerCase()) {this.$message.error("验证码输入有误");this.getRandCode()return;}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("userId", data.userId);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 = '-'+rotatethis.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;.left {position: absolute;left: 0;top: 0;width: 360px;height: 100%;.login-form {background-color: transparent;width: 100%;right: inherit;padding: 0 12px;box-sizing: border-box;display: flex;justify-content: center;flex-direction: column;}.title-container {text-align: center;font-size: 24px;.title {margin: 20px 0;}}.el-form-item {position: relative;.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;}}}}.center {position: absolute;left: 50%;top: 50%;width: 360px;transform: translate3d(-50%,-50%,0);height: 446px;border-radius: 8px;}.right {position: absolute;left: inherit;right: 0;top: 0;width: 360px;height: 100%;}.code {.el-form-item__content {position: relative;.getCodeBt {position: absolute;right: 0;top: 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;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;.register {float: left;width: 50%;}.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;}.el-input {& /deep/ input {padding: 0 15px !important;}}}.role {& /deep/ .el-form-item__label {width: 56px !important;}& /deep/ .el-radio {margin-right: 12px;}}}
</style>

源码代码

链接：https://pan.baidu.com/s/1C5AI6BuKreSh-VnVhc5k0w
提取码：1234