devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：正经夜光杯 | 2024-07-15 20:00:31

赞

踩

免费分享一套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<UsersEntity>().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<UsersEntity>().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<UsersEntity>().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<String, Object> params,UsersEntity user){
  122.         EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
  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<UsersEntity> ew = new EntityWrapper<UsersEntity>();
  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<UsersEntity>().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<UsersEntity> 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">
  52. <!--            <div class="register" @click="register('yonghu')">用户注册</div>-->
  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>
  59. <!--
  60.                     <el-form-item class="code" :label="3 == 3 ? '验证码' : ''" :class="'style'+3">
  61.                         <span class="svg-container" style="color:rgba(136, 154, 164, 1);line-height:46px"><svg-icon icon-class="code" /></span>
  62.                         <el-input placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code" />
  63.                         <div class="getCodeBt" @click="getRandCode(4)" style="height:46px;line-height:46px">
  64.                             <span v-for="(item, index) in codes" :key="index" :style="{color:item.color,transform:item.rotate,fontSize:item.size}">{{ item.num }}</span>
  65.                         </div>
  66.                     </el-form-item>
  68. -->
  69.  
  70.     </div>
  71.   </div>
  72. </template>
  73. <script>
  74.  
  75.     import menu from "@/utils/menu";
  76.  
  77.     export default {
  78.         data() {
  79.             return {
  80.                 rulesForm: {
  81.                     username: "",
  82.                     password: "",
  83.                     role: "",
  84.                     code: '',
  85.                 },
  86.                 menus: [],
  87.                 roleOptions: [],
  88.                 tableName: "",
  89.                 codes: [{
  90.                     num: 1,
  91.                     color: '#000',
  92.                     rotate: '10deg',
  93.                     size: '16px'
  94.                 },{
  95.                     num: 2,
  96.                     color: '#000',
  97.                     rotate: '10deg',
  98.                     size: '16px'
  99.                 },{
  100.                     num: 3,
  101.                     color: '#000',
  102.                     rotate: '10deg',
  103.                     size: '16px'
  104.                 },{
  105.                     num: 4,
  106.                     color: '#000',
  107.                     rotate: '10deg',
  108.                     size: '16px'
  109.                 }],
  110.             };
  111.         },
  112.         mounted() {
  113.             let menus = menu.list();
  114.             this.menus = menus;
  115.             for (let i = 0; i < this.menus.length; i++) {
  116.                 if (this.menus[i].hasBackLogin=='是') {
  117.                     let menuItem={};
  118.                     menuItem["key"]=this.menus[i].roleName;
  119.                     menuItem["value"]=this.menus[i].tableName;
  120.                     this.roleOptions.push(menuItem);
  121.                 }
  122.             }
  123.         },
  124.         created() {
  125.             this.getRandCode()
  126.  
  127.         },
  128.         methods: {
  129.             menuChange(role){
  130.             },
  131.             register(tableName){
  132.                 this.$storage.set("loginTable", tableName);
  133.                 this.$router.push({path:'/register'})
  134.             },
  135.             // 登陆
  136.             login() {
  137.                 let code = ''
  138.                 for(let i in this.codes) {
  139.                     code += this.codes[i].num
  140.                 }
  141.                 if ('0' == '1' && !this.rulesForm.code) {
  142.                     this.$message.error("请输入验证码");
  143.                     return;
  144.                 }
  145.                 if ('0' == '1' && this.rulesForm.code.toLowerCase() != code.toLowerCase()) {
  146.                     this.$message.error("验证码输入有误");
  147.                     this.getRandCode()
  148.                     return;
  149.                 }
  150.                 if (!this.rulesForm.username) {
  151.                     this.$message.error("请输入用户名");
  152.                     return;
  153.                 }
  154.                 if (!this.rulesForm.password) {
  155.                     this.$message.error("请输入密码");
  156.                     return;
  157.                 }
  158.                 if(this.roleOptions.length>1) {
  159.                     console.log("1")
  160.                     if (!this.rulesForm.role) {
  161.                         this.$message.error("请选择角色");
  162.                         return;
  163.                     }
  164.                     let menus = this.menus;
  165.                     for (let i = 0; i < menus.length; i++) {
  166.                         if (menus[i].tableName == this.rulesForm.role) {
  167.                             this.tableName = menus[i].tableName;
  168.                             this.rulesForm.role = menus[i].roleName;
  169.                         }
  170.                     }
  171.                 } else {
  172.                     this.tableName = this.roleOptions[0].value;
  173.                     this.rulesForm.role = this.roleOptions[0].key;
  174.                 }
  175.                 this.$http({
  176.                     url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
  177.                     method: "post"
  178.                 }).then(({ data }) => {
  179.                     if (data && data.code === 0) {
  180.                         this.$storage.set("Token", data.token);
  181.                         this.$storage.set("userId", data.userId);
  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.                     "2", "4", "5", "6", "7", "8", "9"
  202.                 ]
  203.                 let colors = ["0", "1", "2","2", "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(/lelenongchanpinxiaoshou/img/back-img-bg.jpg);
  239.  
  240.  
  241.     .loginInBt {
  242.         width: 200px;
  243.         height: 102px;
  244.         line-height: 102px;
  245.         margin: -154px 0 20px 400px;
  246.         padding: 0;
  247.         color: rgba(255, 255, 255, 1);
  248.         font-size: 26px;
  249.         border-radius: 14px;
  250.         border-width: 4px;
  251.         border-style: dashed ;
  252.         border-color: rgba(216, 225, 232, 1);
  253.         background-color: var(--publicMainColor);
  254.         box-shadow: 0 0 0px rgba(255,0,0,.1);
  255.     }
  256.     .register {
  257.         width: 100px;
  258.         height: 20px;
  259.         line-height: 20px;
  260.         margin: 20px 0 0 55px;
  261.         padding: 0 10px;
  262.         color: rgba(255, 255, 255, 1);
  263.         font-size: 12px;
  264.         border-radius: 2px;
  265.         border-width: 1px;
  266.         border-style: dashed ;
  267.         border-color: rgba(216, 226, 233, 1);
  268.         background-color: var(--publicSubColor);
  269.         box-shadow: 0 0 6px rgba(255,0,0,0);
  270.         cursor: pointer;
  271.     }
  272.     .reset {
  273.         width: auto;
  274.         height: 20px;
  275.         line-height: 20px;
  276.         margin: -11px 15px 0 0 ;
  277.         padding: 0px 5px;
  278.         color: rgba(255, 255, 255, 1);
  279.         font-size: 12px;
  280.         border-radius: 5px;
  281.         border-width: 1px;
  282.         border-style: dashed ;
  283.         border-color: rgba(216, 225, 232, 1);
  284.         background-color: rgba(255, 215, 0, 1);
  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: 650px;
  295.         height: auto;
  296.         margin: 0;
  297.         padding: 0 15px 0 20px;
  298.         border-radius: 30px;
  299.         border-width: 0px;
  300.         border-style: dashed ;
  301.         border-color: rgba(255, 255, 255, 0);
  302.         background-color: rgba(242, 242, 242, 0.86);
  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: 80%;
  323.         line-height: auto;
  324.         margin: 25px auto;
  325.         padding: 0;
  326.         color: rgba(0, 0, 0, 1);
  327.         font-size: 24px;
  328.         border-radius: 0;
  329.         border-width: 0;
  330.         border-style: solid;
  331.         border-color: rgba(0,0,0,.3);
  332.         background-color: rgba(0,0,0,0);
  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(0, 0, 0, 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: var(--publicMainColor);
  367.           font-size: 14px;
  368.           border-radius: 0;
  369.           border-width: 0;
  370.           border-style: solid;
  371.           border-color: rgba(216, 225, 232, 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: 15px;
  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: var(--publicMainColor);
  397.           background-color: var(--publicMainColor);
  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: var(--publicMainColor);
  427.           height: 40px;
  428.  
  429.           width: 80%;
  430.           height: 30px;
  431.           line-height: 30px;
  432.           margin: 0 0 0 50px;
  433.           padding: 0 30px;
  434.           color: rgba(0, 0, 0, 1);
  435.           font-size: 16px;
  436.           border-radius: 10px;
  437.           border-width: 1px;
  438.           border-style: solid;
  439.           border-color: rgba(0, 0, 0, 1);
  440.           background-color: rgba(255, 255, 255, 0);
  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: 30px;
  485.         line-height: 30px;
  486.         border-radius: 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: 30px;
  560.           line-height: 30px;
  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: 30px;
  573.           line-height: 30px;
  574.           margin: 0;
  575.           padding: 0;
  576.           color: rgba(0, 0, 0, 1);
  577.           font-size: 14px;
  578.           border-radius: 0;
  579.           border-width: 0;
  580.           border-style: solid;
  581.           border-color: rgba(0,0,0,0);
  582.           background-color: rgba(0,0,0,0);
  583.           box-shadow: 0 0 6px rgba(0,0,0,0);
  584.       }
  585.  
  586.     .role {
  587.     & /deep/ .el-form-item__label {
  588.           width: 60px !important;
  589.           height: 38px;
  590.           line-height: 38px;
  591.           margin: 0 10px 0 5px;
  592.           padding: 0;
  593.           color: rgba(0, 0, 0, 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.         color: var(--publicMainColor);
  607.       }
  608.     }
  609.     }
  610. </style>

源码下载

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/830816
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号