• 免费分享一套SpringBoot+Vue农产品在线销售(在线商城)管理系统【论文+源码+SQL脚本】，帅呆了~~

    大家好，我是java1234_小锋老师，看到一个不错的SpringBoot+Vue农产品在线销售(在线商城)管理系统，分享下哈。

    项目介绍

    如今社会上各行各业，都喜欢用自己行业的专属软件工作，互联网发展到这个时候，人们已经发现离不开了互联网。新技术的产生，往往能解决一些老技术的弊端问题。因为传统农产品销售系统信息管理难度大，容错率低，管理人员处理数据费工费时，所以专门为解决这个难题开发了一个农产品销售系统管理系统，可以解决许多问题。

    农产品销售系统管理系统按照操作主体分为管理员和用户。管理员的功能包括收货地址管理、购物车管理、字典管理、交流论坛管理、公告信息管理、农产品管理、农产品收藏管理、农产品评价管理、农产品订单管理、商家管理、用户管理、管理员管理。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。

    农产品销售系统管理系统可以提高农产品销售系统信息管理问题的解决效率，优化农产品销售系统信息处理流程，保证农产品销售系统信息数据的安全，它是一个非常可靠，非常安全的应用程序。

    项目视频演示

    【免费】SpringBoot+Vue农产品在线销售(在线商城)管理系统 Java毕业设计_哔哩哔哩_bilibili

    系统展示

    部分代码

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

    源码下载

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

  • 相关阅读:
    Nginx模块开发之http handler实现流量统计（入门篇）
    Python中拟合线性方程(最小二乘法)
    小程序开发.微信小程序.组件.视图容器
    python sklearn 多输出回归
    456-C++函数重载机制（汇编层面分析）
    【Java笔试强训】Day2（OR62 倒置字符串,排序子序列）
    流辰信息助力企业数字化转型
    RxJs使用指北
    Day697.Spring框架中的设计模式 -深入拆解 Tomcat & Jetty
    移动无线点餐客户端的研究与实现（Java+Android）
  • 原文地址：https://blog.csdn.net/caoli201314/article/details/140294005