• 免费分享一套SpringBoot+Vue家政服务管理平台管理系统，帅呆了~~

    大家好，我是java1234_小锋老师，看到一个不错的SpringBoot+Vue家政服务管理平台管理系统，分享下哈。

    项目视频演示

    【免费】SpringBoot+Vue家政服务管理平台系统 Java毕业设计_哔哩哔哩_bilibili【免费】SpringBoot+Vue家政服务管理平台系统 Java毕业设计项目来自互联网，免费开源分享，严禁商业。更多毕业设源码：http://www.java1234.com/a/bysj/javaweb/, 视频播放量 122、弹幕量 1、点赞数 4、投硬币枚数 2、收藏人数 2、转发人数 1, 视频作者 java1234官方, 作者简介 公众号：java1234 微信：java9266，相关视频：打造前后端分离 权限系统 基于SpringBoot2+SpringSecurity+Vue3.2+Element Plus 视频教程 （火爆连载更新中..），避坑计算机毕设，这个人不要去找，我用 SpringBoot + Vue 复刻了一个B站作为毕设项目，微信小程序（java后端无废话版）视频教程，Gateway微服务网关视频教程（无废话版），PyQt6图书管理系统视频教程 Python桌面开发 Python入门级项目实战 (无废话版) 火爆连载更新中~，uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )，2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~，手把手教你从0搭建springboot+vue+mysql前后端分离毕设项目，【免费】微信小程序扫码点餐(订餐)系统(uni-app+SpringBoot后端+Vue管理端技术实现) Java毕业设计，非常好的源码icon-default.png?t=N7T8https://www.bilibili.com/video/BV1g1421R7yh/

    项目介绍

    随着家政服务行业的不断发展，家政服务在现实生活中的使用和普及，家政服务行业成为近年内出现的一个新行业，并且能够成为大众广为认可和接受的行为和选择。设计家政服务管理平台的目的就是借助计算机让复杂的销售操作变简单，变高效。

    家政服务管理平台采用了B/S结构，JAVA作为开发语言，数据库采用了B/S结构，Mysql数据库进行开发。该系统包括前台操作和后台管理两个部分，一方面，为用户提供首页、服务信息、公告信息、留言反馈、个人中心、后台管理等功能；另一方面，为管理员提供首页、个人中心、用户管理、服务人员管理、服务信息管理、服务类型管理、服务预约管理、服务取消管理、服务分配管理、服务进度管理、评价信息管理、留言反馈、系统管理等功能。

    系统展示

    部分代码

    1.  
    2. package com.controller;
    3.  
    4.  
    5. import java.util.Arrays;
    6. import java.util.Calendar;
    7. import java.util.Date;
    8. import java.util.Map;
    9.  
    10. import javax.servlet.http.HttpServletRequest;
    11.  
    12. import org.springframework.beans.factory.annotation.Autowired;
    13. import org.springframework.stereotype.Controller;
    14. import org.springframework.web.bind.annotation.GetMapping;
    15. import org.springframework.web.bind.annotation.PathVariable;
    16. import org.springframework.web.bind.annotation.PostMapping;
    17. import org.springframework.web.bind.annotation.RequestBody;
    18. import org.springframework.web.bind.annotation.RequestMapping;
    19. import org.springframework.web.bind.annotation.RequestParam;
    20. import org.springframework.web.bind.annotation.ResponseBody;
    21. import org.springframework.web.bind.annotation.RestController;
    22.  
    23. import com.annotation.IgnoreAuth;
    24. import com.baomidou.mybatisplus.mapper.EntityWrapper;
    25. import com.entity.TokenEntity;
    26. import com.entity.UserEntity;
    27. import com.service.TokenService;
    28. import com.service.UserService;
    29. import com.utils.CommonUtil;
    30. import com.utils.MPUtil;
    31. import com.utils.PageUtils;
    32. import com.utils.R;
    33. import com.utils.ValidatorUtils;
    34.  
    35. /**
    36.  * 登录相关
    37.  */
    38. @RequestMapping("users")
    39. @RestController
    40. public class UserController{
    41.  
    42. 	@Autowired
    43. 	private UserService userService;
    44.  
    45. 	@Autowired
    46. 	private TokenService tokenService;
    47.  
    48. 	/**
    49. 	 * 登录
    50. 	 */
    51. 	@IgnoreAuth
    52. 	@PostMapping(value = "/login")
    53. 	public R login(String username, String password, String captcha, HttpServletRequest request) {
    54. 		UserEntity user = userService.selectOne(new EntityWrapper().eq("username", username));
    55. 		if(user==null || !user.getPassword().equals(password)) {
    56. 			return R.error("账号或密码不正确");
    57. 		}
    58. 		String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
    59. 		return R.ok().put("token", token);
    60. 	}
    61.  
    62. 	/**
    63. 	 * 注册
    64. 	 */
    65. 	@IgnoreAuth
    66. 	@PostMapping(value = "/register")
    67. 	public R register(@RequestBody UserEntity user){
    68. //    	ValidatorUtils.validateEntity(user);
    69.     	if(userService.selectOne(new EntityWrapper().eq("username", user.getUsername())) !=null) {
    70.     		return R.error("用户已存在");
    71.     	}
    72.         userService.insert(user);
    73.         return R.ok();
    74.     }
    75.  
    76. 	/**
    77. 	 * 退出
    78. 	 */
    79. 	@GetMapping(value = "logout")
    80. 	public R logout(HttpServletRequest request) {
    81. 		request.getSession().invalidate();
    82. 		return R.ok("退出成功");
    83. 	}
    84.  
    85. 	/**
    86.      * 密码重置
    87.      */
    88.     @IgnoreAuth
    89. 	@RequestMapping(value = "/resetPass")
    90.     public R resetPass(String username, HttpServletRequest request){
    91.     	UserEntity user = userService.selectOne(new EntityWrapper().eq("username", username));
    92.     	if(user==null) {
    93.     		return R.error("账号不存在");
    94.     	}
    95.     	user.setPassword("123456");
    96.         userService.update(user,null);
    97.         return R.ok("密码已重置为：123456");
    98.     }
    99.  
    100. 	/**
    101.      * 列表
    102.      */
    103.     @RequestMapping("/page")
    104.     public R page(@RequestParam Map params,UserEntity user){
    105.         EntityWrapper ew = new EntityWrapper();
    106.     	PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
    107.         return R.ok().put("data", page);
    108.     }
    109.  
    110. 	/**
    111.      * 列表
    112.      */
    113.     @RequestMapping("/list")
    114.     public R list( UserEntity user){
    115.        	EntityWrapper ew = new EntityWrapper();
    116.       	ew.allEq(MPUtil.allEQMapPre( user, "user"));
    117.         return R.ok().put("data", userService.selectListView(ew));
    118.     }
    119.  
    120.     /**
    121.      * 信息
    122.      */
    123.     @RequestMapping("/info/{id}")
    124.     public R info(@PathVariable("id") String id){
    125.         UserEntity user = userService.selectById(id);
    126.         return R.ok().put("data", user);
    127.     }
    128.  
    129.     /**
    130.      * 获取用户的session用户信息
    131.      */
    132.     @RequestMapping("/session")
    133.     public R getCurrUser(HttpServletRequest request){
    134.     	Long id = (Long)request.getSession().getAttribute("userId");
    135.         UserEntity user = userService.selectById(id);
    136.         return R.ok().put("data", user);
    137.     }
    138.  
    139.     /**
    140.      * 保存
    141.      */
    142.     @PostMapping("/save")
    143.     public R save(@RequestBody UserEntity user){
    144.     	if(userService.selectOne(new EntityWrapper().eq("username", user.getUsername())) !=null) {
    145.     		return R.error("用户已存在");
    146.     	}
    147.         userService.insert(user);
    148.         return R.ok();
    149.     }
    150.  
    151.     /**
    152.      * 修改
    153.      */
    154.     @RequestMapping("/update")
    155.     public R update(@RequestBody UserEntity user){
    156. //        ValidatorUtils.validateEntity(user);
    157.     	UserEntity u = userService.selectOne(new EntityWrapper().eq("username", user.getUsername()));
    158.     	if(u!=null && u.getId()!=user.getId() && u.getUsername().equals(user.getUsername())) {
    159.     		return R.error("用户名已存在。");
    160.     	}
    161.         userService.updateById(user);//全部更新
    162.         return R.ok();
    163.     }
    164.  
    165.     /**
    166.      * 删除
    167.      */
    168.     @RequestMapping("/delete")
    169.     public R delete(@RequestBody Long[] ids){
    170.         userService.deleteBatchIds(Arrays.asList(ids));
    171.         return R.ok();
    172.     }
    173. }
    1. <template>
    2.   <div>
    3.         <div class="container loginIn">
    4.  
    5.       <div :class="2 == 1 ? 'left' : 2 == 2 ? 'left center' : 'left right'">
    6.         <el-form class="login-form" label-position="left" :label-width="2 == 3 || 2 == 2 ? '30px': '0px'">
    7.           <div class="title-container"><h3 class="title">家政服务管理平台登录h3>div>
    8.           <el-form-item :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0 auto 12px","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"0","borderWidth":"0","width":"80%","borderStyle":"solid","height":"auto"}' :label="2 == 3 ? '用户名' : ''" :class="'style'+2">
    9.             <span v-if="2 != 3" class="svg-container" style="
    10. 			color:#333;
    11. 			line-height:40px;
    12. 			font-size:14px;
    13. 			width:30px;
    14. 			padding:0;
    15. 			margin:0;
    16. 			radius:8px 0 0 8px;
    17. 			border-width:0;
    18. 			border-style:solid;
    19. 			border-color:rgba(0,0,0,0);
    20. 			background-color:rgba(255, 255, 255, 1);
    21. 			box-shadow:0 0 6px rgba(0,0,0,0);
    22. 			}"><svg-icon icon-class="user" />span>
    23.             <el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" />
    24.           el-form-item>
    25.           <el-form-item :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0 auto 12px","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"0","borderWidth":"0","width":"80%","borderStyle":"solid","height":"auto"}' :label="2 == 3 ? '密码' : ''" :class="'style'+2">
    26.             <span v-if="2 != 3" class="svg-container" style="color:#333;
    27. 			line-height:40px;
    28. 			font-size:14px;
    29. 			width:30px;
    30. 			padding:0;
    31. 			margin:0;
    32. 			radius:8px 0 0 8px;
    33. 			border-width:0;
    34. 			border-style:solid;
    35. 			border-color:rgba(0,0,0,0);
    36. 			background-color:rgba(255, 255, 255, 1);
    37. 			box-shadow:0 0 6px rgba(0,0,0,0);"><svg-icon icon-class="password" />span>
    38.             <el-input placeholder="请输入密码" name="password" type="password" v-model="rulesForm.password" />
    39.           el-form-item>
    40.           <el-form-item :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0 auto 12px","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"0","borderWidth":"0","width":"80%","borderStyle":"solid","height":"auto"}' v-if="1 == '1'" class="code" :label="2 == 3 ? '验证码' : ''" :class="'style'+2">
    41.             <span v-if="2 != 3" class="svg-container" style="color:#333;
    42. 			line-height:40px;
    43. 			font-size:14px;
    44. 			width:30px;
    45. 			padding:0;
    46. 			margin:0;
    47. 			radius:8px 0 0 8px;
    48. 			border-width:0;
    49. 			border-style:solid;
    50. 			border-color:rgba(0,0,0,0);
    51. 			background-color:rgba(255, 255, 255, 1);
    52. 			box-shadow:0 0 6px rgba(0,0,0,0);"><svg-icon icon-class="code" />span>
    53.             <el-input placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code" />
    54.             <div class="getCodeBt" @click="getRandCode(4)">
    55.               <span v-for="(item, index) in codes" :key="index" :style="{color:'rgba(255, 255, 255, 1)',transform:item.rotate,fontSize:'16px'}">{{ item.num }}span>
    56.             div>
    57.  
    58.           el-form-item>
    59.           <el-form-item v-if="roles.length>1" label="角色" prop="loginInRole" class="role" style="display: flex;align-items: center;">
    60.             <el-radio
    61.               v-for="item in roles"
    62.               v-bind:key="item.roleName"
    63.               v-model="rulesForm.role"
    64.               :label="item.roleName"
    65.             >{{item.roleName}}el-radio>
    66.           el-form-item>
    67.           <el-form-item v-if="roles.length==1" label=" " prop="loginInRole" class="role" style="display: flex;align-items: center;">
    68.           el-form-item>
    69.           <el-button type="primary" @click="login()" class="loginInBt">{{'1' == '1' ? '登录' : 'login'}}el-button>
    70.           <el-form-item class="setting">
    71.             
    72.           el-form-item>
    73.         el-form>
    74.          <p style="text-align: center"><a href="http://www.java1234.com/a/bysj/javaweb/" target='_blank'><font color=red>Java1234收藏整理font>a>p>
    75.       div>
    76.  
    77.     div>
    78.   div>
    79. template>
    80. <script>
    81.  
    82. import menu from "@/utils/menu";
    83.  
    84. export default {
    85.   data() {
    86.     return {
    87.       rulesForm: {
    88.         username: "",
    89.         password: "",
    90.         role: "",
    91.         code: '',
    92.       },
    93.       menus: [],
    94.       roles: [],
    95.       tableName: "",
    96.       codes: [{
    97.         num: 1,
    98.         color: '#000',
    99.         rotate: '10deg',
    100.         size: '16px'
    101.       },{
    102.         num: 2,
    103.         color: '#000',
    104.         rotate: '10deg',
    105.         size: '16px'
    106.       },{
    107.         num: 3,
    108.         color: '#000',
    109.         rotate: '10deg',
    110.         size: '16px'
    111.       },{
    112.         num: 4,
    113.         color: '#000',
    114.         rotate: '10deg',
    115.         size: '16px'
    116.       }],
    117.     };
    118.   },
    119.   mounted() {
    120. 	let menus = menu.list();
    121. 	this.menus = menus;
    122.     for (let i = 0; i < this.menus.length; i++) {
    123.       if (this.menus[i].hasBackLogin=='是') {
    124.             this.roles.push(this.menus[i])
    125.       }
    126.     }
    127.   },
    128.   created() {
    129.     this.getRandCode()
    130.  
    131.   },
    132.   methods: {
    133.     register(tableName){
    134.       this.$storage.set("loginTable", tableName);
    135.       this.$router.push({path:'/register'})
    136.     },
    137.     // 登陆
    138.     login() {
    139.       let code = ''
    140.       for(let i in this.codes) {
    141.         code += this.codes[i].num
    142.       }
    143. 	  if ('1' == '1' && !this.rulesForm.code) {
    144. 	     this.$message.error("请输入验证码");
    145. 	    return;
    146. 	  }
    147.       if ('1' == '1' && this.rulesForm.code.toLowerCase() != code.toLowerCase()) {
    148.          this.$message.error("验证码输入有误");
    149. 		this.getRandCode()
    150.         return;
    151.       }
    152.       if (!this.rulesForm.username) {
    153.          this.$message.error("请输入用户名");
    154.         return;
    155.       }
    156.       if (!this.rulesForm.password) {
    157.          this.$message.error("请输入密码");
    158.         return;
    159.       }
    160.       if(this.roles.length>1) {
    161.           if (!this.rulesForm.role) {
    162.              this.$message.error("请选择角色");
    163.             return;
    164.           }
    165.           let menus = this.menus;
    166.           for (let i = 0; i < menus.length; i++) {
    167.             if (menus[i].roleName == this.rulesForm.role) {
    168.               this.tableName = menus[i].tableName;
    169.             }
    170.           }
    171.       } else {
    172.           this.tableName = this.roles[0].tableName;
    173.           this.rulesForm.role = this.roles[0].roleName;
    174.       }
    175.  
    176.       this.$http({
    177.         url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
    178.         method: "post"
    179.       }).then(({ data }) => {
    180.         if (data && data.code === 0) {
    181.           this.$storage.set("Token", data.token);
    182.           this.$storage.set("role", this.rulesForm.role);
    183.           this.$storage.set("sessionTable", this.tableName);
    184.           this.$storage.set("adminName", this.rulesForm.username);
    185.           this.$router.replace({ path: "/index/" });
    186.         } else {
    187.           this.$message.error(data.msg);
    188.         }
    189.       });
    190.     },
    191.     getRandCode(len = 4){
    192.       this.randomString(len)
    193.     },
    194.     randomString(len = 4) {
    195.       let chars = [
    196.           "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",
    197.           "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
    198.           "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",
    199.           "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
    200.           "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2",
    201.           "3", "4", "5", "6", "7", "8", "9"
    202.       ]
    203.       let colors = ["0", "1", "2","3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]
    204.       let sizes = ['14', '15', '16', '17', '18']
    205.  
    206.       let output = [];
    207.       for (let i = 0; i < len; i++) {
    208.         // 随机验证码
    209.         let key = Math.floor(Math.random()*chars.length)
    210.         this.codes[i].num = chars[key]
    211.         // 随机验证码颜色
    212.         let code = '#'
    213.         for (let j = 0; j < 6; j++) {
    214.           let key = Math.floor(Math.random()*colors.length)
    215.           code += colors[key]
    216.         }
    217.         this.codes[i].color = code
    218.         // 随机验证码方向
    219.         let rotate = Math.floor(Math.random()*60)
    220.         let plus = Math.floor(Math.random()*2)
    221.         if(plus == 1) rotate = '-'+rotate
    222.         this.codes[i].rotate = 'rotate('+rotate+'deg)'
    223.         // 随机验证码字体大小
    224.         let size = Math.floor(Math.random()*sizes.length)
    225.         this.codes[i].size = sizes[size]+'px'
    226.       }
    227.     },
    228.   }
    229. };
    230. script>
    231. <style lang="scss" scoped>
    232. .loginIn {
    233.   min-height: 100vh;
    234.   position: relative;
    235.   background-repeat: no-repeat;
    236.   background-position: center center;
    237.   background-size: cover;
    238.       background-image: url(http://codegen.caihongy.cn/20220122/234cf3c38dfa40fd94ff06d18f1f8781.png);
    239.  
    240.  
    241.   .loginInBt {
    242.     width: 128px;
    243.     height: 128px;
    244.     line-height: 128px;
    245.     margin: 0 auto 0;
    246.     padding: 0;
    247.     color: rgba(0, 0, 0, 1);
    248.     font-size: 34px;
    249.     border-radius: 50%;
    250.     border-width: 10px;
    251.     border-style: solid;
    252.     border-color: rgba(109, 109, 148, 1);
    253.     background-color: rgba(255, 255, 255, 1);
    254.     box-shadow: 0 0 0px rgba(255,0,0,.1);
    255.   }
    256.   .register {
    257.     width: auto;
    258.     height: 24px;
    259.     line-height: 24px;
    260.     margin: 0 12px;
    261.     padding: 0;
    262.     color: rgba(130, 130, 130, 1);
    263.     font-size: 14px;
    264.     border-radius: 0;
    265.     border-width: 0;
    266.     border-style: solid;
    267.     border-color: rgba(64, 158, 255, 1);
    268.     background-color: rgba(255, 255, 255, 0);
    269.     box-shadow: 0 0 6px rgba(255,0,0,0);
    270. 	cursor: pointer;
    271.   }
    272.   .reset {
    273.     width: auto;
    274.     height: 24px;
    275.     line-height: 24px;
    276.     margin: 0 12px;
    277.     padding: 0;
    278.     color: rgba(130, 130, 130, 1);
    279.     font-size: 14px;
    280.     border-radius: 0;
    281.     border-width: 0;
    282.     border-style: solid;
    283.     border-color: rgba(64, 158, 255, 1);
    284.     background-color: rgba(255, 255, 255, 0);
    285.     box-shadow: 0 0 6px rgba(255,0,0,0);
    286.   }
    287.  
    288.  
    289.   .left {
    290.     position: absolute;
    291.     left: 0;
    292.     top: 0;
    293. 	box-sizing: border-box;
    294. 	width: 550px;
    295. 	height: auto;
    296. 	margin: 0;
    297. 	padding: 20px 0;
    298. 	border-radius: 60px 60px 90px 90px;
    299. 	border-width: 10px;
    300. 	border-style: solid;
    301. 	border-color: rgba(109, 109, 148, 1);
    302. 	background-color: rgba(219, 244, 255, 1);
    303. 	box-shadow: 0 0 0px rgba(30, 144, 255, .8);
    304.  
    305.     .login-form {
    306.       background-color: transparent;
    307.       width: 100%;
    308.       right: inherit;
    309.       padding: 0;
    310.       box-sizing: border-box;
    311.       display: flex;
    312. 	  position: initial;
    313.       justify-content: center;
    314.       flex-direction: column;
    315.     }
    316.  
    317.     .title-container {
    318.       text-align: center;
    319.       font-size: 24px;
    320.  
    321.       .title {
    322.         width: 120%;
    323.         line-height: 30px;
    324.         margin: 16px 0 16px -10%;
    325.         padding: 10px 0;
    326.         color: rgba(0, 0, 0, 1);
    327.         font-size: 28px;
    328.         border-radius: 36px;
    329.         border-width: 10px;
    330.         border-style: solid;
    331.         border-color: rgba(109, 109, 148, 1);
    332.         background-color: rgba(219, 244, 255, 1);
    333.         box-shadow: 0 0 6px rgba(0,0,0,0);
    334.       }
    335.     }
    336.  
    337.     .el-form-item {
    338.       position: relative;
    339.  
    340.       & /deep/ .el-form-item__content {
    341.         line-height: initial;
    342.       }
    343.  
    344. 	  & /deep/ .el-radio__label {
    345. 	    width: auto;
    346. 	    height: 14px;
    347. 	    line-height: 14px;
    348. 	    margin: 0;
    349. 	    padding: 0 0 0 10px;
    350. 	    color: rgba(162, 162, 162, 1);
    351. 	    font-size: 14px;
    352. 	    border-radius: 0;
    353. 	    border-width: 0;
    354. 	    border-style: solid;
    355. 	    border-color: rgba(255, 255, 255, 0);
    356. 	    background-color: rgba(255, 255, 255, 0);
    357. 	    box-shadow: 0 0 6px rgba(255,0,0,0);
    358. 	    text-align: left;
    359. 	  }
    360. 	  & /deep/ .el-radio.is-checked .el-radio__label {
    361. 	    width: auto;
    362. 	    height: 14px;
    363. 	    line-height: 14px;
    364. 	    margin: 0;
    365. 	    padding: 0 0 0 10px;
    366. 	    color: rgba(0, 0, 0, 1);
    367. 	    font-size: 14px;
    368. 	    border-radius: 0;
    369. 	    border-width: 0;
    370. 	    border-style: solid;
    371. 	    border-color: rgba(255, 255, 255, 0);
    372. 	    background-color: rgba(255, 255, 255, 0);
    373. 	    box-shadow: 0 0 6px rgba(255,0,0,0);
    374. 	    text-align: left;
    375. 	  }
    376. 	  & /deep/ .el-radio__inner {
    377. 	    width: 14px;
    378. 	    height: 14px;
    379. 	    margin: 0;
    380. 	    padding: 0;
    381. 	    border-radius: 100%;
    382. 	    border-width: 1px;
    383. 	    border-style: solid;
    384. 	    border-color: #dcdfe6;
    385. 	    background-color: rgba(255, 255, 255, 1);
    386. 	    box-shadow: 0 0 6px rgba(255,0,0,0);
    387. 	  }
    388. 	  & /deep/ .el-radio.is-checked .el-radio__inner {
    389. 	    width: 14px;
    390. 	    height: 14px;
    391. 	    margin: 0;
    392. 	    padding: 0;
    393. 	    border-radius: 100%;
    394. 	    border-width: 1px;
    395. 	    border-style: solid;
    396. 	    border-color: rgba(0, 0, 0, 1);
    397. 	    background-color: rgba(0, 0, 0, 1);
    398. 	    box-shadow: 0 0 6px rgba(255,0,0,0);
    399. 	  }
    400.  
    401.       .svg-container {
    402.         padding: 6px 5px 6px 15px;
    403.         color: #889aa4;
    404.         vertical-align: middle;
    405.         display: inline-block;
    406.         position: absolute;
    407.         left: 0;
    408.         top: 0;
    409.         z-index: 1;
    410.         padding: 0;
    411.         line-height: 40px;
    412.         width: 30px;
    413.         text-align: center;
    414.       }
    415.  
    416.       .el-input {
    417.         display: inline-block;
    418.         // height: 40px;
    419.         width: 100%;
    420.  
    421.         & /deep/ input {
    422.           background: transparent;
    423.           border: 0px;
    424.           -webkit-appearance: none;
    425.           padding: 0 15px 0 30px;
    426.           color: #fff;
    427.           height: 40px;
    428.  
    429. 		  width: 100%;
    430. 		  height: 40px;
    431. 		  line-height: 40px;
    432. 		  margin: 0;
    433. 		  padding: 0 30px;
    434. 		  color: rgba(0, 0, 0, 1);
    435. 		  font-size: 16px;
    436. 		  border-radius: 0 8px 8px 0;
    437. 		  border-width: 0;
    438. 		  border-style: solid;
    439. 		  border-color: rgba(0,0,0,0);
    440. 		  background-color: rgba(255, 255, 255, 1);
    441. 		  box-shadow: 0 0 6px rgba(255,0,0,0);
    442.         }
    443.       }
    444.  
    445.     }
    446.  
    447.  
    448.   }
    449.  
    450.   .center {
    451.     position: absolute;
    452.     left: 50%;
    453.     top: 50%;
    454.     transform: translate3d(-50%,-50%,0);
    455.   }
    456.  
    457.   .right {
    458.     position: absolute;
    459.     left: inherit;
    460.     right: 0;
    461.     top: 0;
    462.   }
    463.  
    464.   .code {
    465.     .el-form-item__content {
    466.       position: relative;
    467.  
    468.       .getCodeBt {
    469.         position: absolute;
    470.         right: 0;
    471.         top: 50%;
    472.         transform: translate3d(0, -50%, 0);
    473.         line-height: 40px;
    474.         width: 100px;
    475.         background-color: rgba(51,51,51,0.4);
    476.         color: #fff;
    477.         text-align: center;
    478.         border-radius: 0 4px 4px 0;
    479.         height: 40px;
    480.         overflow: hidden;
    481. 		padding: 0;
    482. 		margin: 0;
    483. 		width: 100px;
    484.         height: 40px;
    485.         line-height: 40px;
    486.         border-radius: 0 8px 8px 0;
    487.         border-width: 0;
    488.         border-style: solid;
    489.         border-color: rgba(64, 158, 255, 1);
    490.         background-color: rgba(51, 51, 51, 0.4);
    491.         box-shadow: 0 0 6px rgba(255,0,0,0);
    492.  
    493.         span {
    494.           padding: 0 5px;
    495.           display: inline-block;
    496.           font-size: 16px;
    497.           font-weight: 600;
    498.         }
    499.       }
    500.  
    501.       .el-input {
    502.         & /deep/ input {
    503.           padding: 0 130px 0 30px;
    504.         }
    505.       }
    506.     }
    507.   }
    508.  
    509.   .setting {
    510.     & /deep/ .el-form-item__content {
    511.       // padding: 0 15px;
    512.       box-sizing: border-box;
    513.       line-height: 32px;
    514.       height: 32px;
    515.       font-size: 14px;
    516.       color: #999;
    517.       margin: 0 !important;
    518. 	  display: flex;
    519.  
    520.       .register {
    521.         // float: left;
    522.         // width: 50%;
    523. 		text-align: center;
    524.       }
    525.  
    526.       .reset {
    527.         float: right;
    528.         width: 50%;
    529.         text-align: right;
    530.       }
    531.     }
    532.   }
    533.  
    534.   .style2 {
    535.     padding-left: 30px;
    536.  
    537.     .svg-container {
    538.       left: -30px !important;
    539.     }
    540.  
    541.     .el-input {
    542.       & /deep/ input {
    543.         padding: 0 15px !important;
    544.       }
    545.     }
    546.   }
    547.  
    548.   .code.style2, .code.style3 {
    549.     .el-input {
    550.       & /deep/ input {
    551.         padding: 0 115px 0 15px;
    552.       }
    553.     }
    554.   }
    555.  
    556.   .style3 {
    557.     & /deep/ .el-form-item__label {
    558.       padding-right: 6px;
    559.       height: 40px;
    560.       line-height: 40px;
    561.     }
    562.  
    563.     .el-input {
    564.       & /deep/ input {
    565.         padding: 0 15px !important;
    566.       }
    567.     }
    568.   }
    569.  
    570.   & /deep/ .el-form-item__label {
    571. 	width: 30px;
    572. 	height: 40px;
    573. 	line-height: 40px;
    574. 	margin: 0;
    575. 	padding: 0;
    576. 	color: #333;
    577. 	font-size: 14px;
    578. 	border-radius: 8px 0 0 8px;
    579. 	border-width: 0;
    580. 	border-style: solid;
    581. 	border-color: rgba(0,0,0,0);
    582. 	background-color: rgba(255, 255, 255, 1);
    583. 	box-shadow: 0 0 6px rgba(0,0,0,0);
    584.   }
    585.  
    586.   .role {
    587.     & /deep/ .el-form-item__label {
    588.       width: 56px !important;
    589.       height: 38px;
    590.       line-height: 38px;
    591.       margin: 0 0 0 50px;
    592.       padding: 0;
    593.       color: rgba(81, 81, 81, 1);
    594.       font-size: 14px;
    595.       border-radius: 0;
    596.       border-width: 0;
    597.       border-style: solid;
    598.       border-color: rgba(64, 158, 255, 1);
    599.       background-color: rgba(255, 255, 255, 0);
    600.       box-shadow: 0 0 6px rgba(255,0,0,0);
    601.       text-align: left;
    602.     }
    603.  
    604.     & /deep/ .el-radio {
    605.       margin-right: 12px;
    606.     }
    607.   }
    608. }
    609. style>

    源码下载

    CSDN 1积分下载：https://download.csdn.net/download/caofeng891102/89213941

    或者免费领取加小锋老师wx：java9266

    热门推荐

    免费分享一套SpringBoot+Vue敬老院(养老院)管理系统，帅呆了~~-CSDN博客

    免费分享一套SpringBoot+Vue校园失物招领网站系统，帅呆了~~-CSDN博客

    免费分享一套SpringBoot+Vue旅游管理系统，帅呆了~~_免费的spring boot+vue开源项目-CSDN博客

    免费分享一套微信小程序扫码点餐(订餐)系统(uni-app+SpringBoot后端+Vue管理端技术实现) ，帅呆了~~_uniapp微信点餐-CSDN博客

    免费分享一套SpringBoot+Vue药店(药房)管理系统，帅呆了~~_基于sprintboot+vue的药店管理系统-CSDN博客

  • 相关阅读:
    vue 使用MD5加密
    Docker Desktop -WSL kernel version too low
    HDU 6514 - Monitor（前缀和与差分）
    ARM接口编程—RTC(exynos 4412平台)
    【react】慎用useLayoutEffect转而使用useEffect
    大一新生HTML期末作业,网页制作作业——明星介绍易烊千玺网站HTML+CSS
    【无标题】积鼎CFD VirtualFlow：航空及汽车燃油晃动流体仿真计算及试验对比
    【个人成长】001- 4 个步骤提升你的复盘能力
    arcgis js api 4.x通过TileLayer类加载arcgis server10.2发布的切片服务跨域问题的解决办法
    6.WPF属性
  • 原文地址：https://blog.csdn.net/caoli201314/article/details/138152536