基于微信小程序的校园水电费管理平台设计与实现

目录

摘要

系统展示

技术介绍

MySQL数据库

Vue框架

代码实现

管理员实现登录后端代码

连接数据库

前端代码实现

获取源码

摘要

随着社会的发展，社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。

本文以实际运用为开发背景，运用软件工程原理和开发方法，它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个开发过程首先对校园水电费管理小程序进行需求分析，得出校园水电费管理小程序主要功能。接着对校园水电费管理小程序进行总体设计和详细设计。总体设计主要包括小程序功能设计、小程序总体结构设计、小程序数据结构设计和小程序安全设计等；详细设计主要包括校园水电费管理小程序数据库访问的实现，主要功能模块的具体实现，模块实现关键代码等。最后对校园水电费管理小程序进行了功能测试，并对测试结果进行了分析总结，得出校园水电费管理小程序存在的不足及需要改进的地方，为以后的校园水电费管理小程序维护提供了方便，同时也为今后开发类似校园水电费管理小程序提供了借鉴和帮助。

校园水电费管理小程序开发使系统能够更加方便快捷，同时也促使校园水电费管理小程序变的更加系统化、有序化。系统界面较友好，易于操作。

系统展示

学生注册，在学生注册页面可以填写学号、密码、姓名、性别、寝室、电话、邮箱、照片等信息，进行注册如图5-1所示。

 

 学生登录，在学生登录页面填写账号、密码进行登录如图5-2所示。

 

 学生登录到校园水电费管理小程序可以查看首页、我的等内容进行相对应操作，如图5-3所示。

 

 公告信息，在公告信息页面可以填写标题、简介、内容等信息进行提交，如图5-4所示。

 

 在我的页面可以填写学生缴费等信息，并可根据需要进行提交，如图5-5所示。

 

 在用户信息页面可以填写学号、密码、姓名、性别、寝室、电话、邮箱、照片等信息，并可根据需要对用户信息进行保存、退出登录，如图5-6所示。

 

 在学生缴费页面可以填写年份、月份、学号、姓名、照片、寝室、类型、用量、金额、日期、是否支付等信息，并可根据需要对学生缴费进行支付，如图5-7所示。

 

 教师登录，在教师登录页面填写账号、密码进行登录如图5-8所示。

 

 教师登录到校园水电费管理小程序可以查看首页、我的等内容，如图5-9所示。

 

 我的，在我的页面可以填写教师缴费等信息进行提交，如图5-10所示。

 

 在用户信息页面可以填写工号、密码、姓名、性别、寝室、电话、邮箱、照片等信息，并可根据需要进行保存、退出登录，如图5-11所示。

 

 在教师缴费页面可以填写年份、月份、工号、姓名、照片、寝室、类型、用量、金额、日期、是否支付等信息，并可根据需要对教师缴费进行支付，如图5-12所示。

 

 管理员通过填写用户名、密码、角色进行登录如图5-13所示。

 学生管理，通过填写学号、密码、姓名、性别、寝室、电话、邮箱、照片等信息进行详情、修改操作，如图5-14所示。

宿舍信息管理，通过填写宿舍楼号、宿舍类型、宿舍类别、宿舍名称、宿舍状态等信息进行详情、修改、删除操作，如图5-15所示。 

 教师管理，通过填写工号、密码、姓名、性别、寝室、电话、邮箱、照片等信息进行详情、修改、删除操作，如图5-16所示。

 学生缴费管理，通过填写年份、月份、学号、姓名、照片、寝室、类型、用量、金额、日期、是否支付等信息进行详情、修改、删除操作，如图5-17所示。

 教师缴费管理，通过填写年份、月份、工号、姓名、照片、寝室、类型、用量、金额、日期、是否支付等信息进行详情、修改、删除操作，如图5-18示。

  校园公告，通过填写标题、简介、图片等信息进行详情、修改、删除操作，如图5-19所示。

 轮播图；该页面为轮播图管理界面。管理员可以在此页面进行首页轮播图的管理，通过新建操作可在轮播图中加入新的图片，还可以对以上传的图片进行修改操作，以及图片的删除操作，如图5-20所示。

 

技术介绍

MySQL数据库

MySQL由瑞典的MySQL AB公司开发，后来被Sun Microsystems收购，最终成为Oracle公司的产品。它是一个关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL支持SQL（结构化查询语言），这是数据库操作的标准语言，可以使用SQL来执行数据查询、插入、更新、删除等操作。

Vue框架

Vue的发音类似于“view”，其设计理念是简单、灵活和高效。Vue框架的核心库只关注视图层，使得它非常轻量级和高效。Vue不仅易于上手，还便于与第三方库或既有项目整合。同时，当与现代化的工具链以及各种支持类库结合使用时，Vue也能够为复杂的单页应用提供驱动。

代码实现

管理员实现登录后端代码

  1. package com.cl.controller;
  2.  
  3. import java.math.BigDecimal;
  4. import java.text.SimpleDateFormat;
  5. import java.text.ParseException;
  6. import java.util.*;
  7. import javax.servlet.http.HttpServletRequest;
  8. import java.io.IOException;
  9.  
  10. import com.cl.utils.ValidatorUtils;
  11. import org.apache.commons.lang3.StringUtils;
  12. import org.springframework.beans.factory.annotation.Autowired;
  13. import org.springframework.transaction.annotation.Transactional;
  14. import org.springframework.format.annotation.DateTimeFormat;
  15. import org.springframework.web.bind.annotation.PathVariable;
  16. import org.springframework.web.bind.annotation.RequestBody;
  17. import org.springframework.web.bind.annotation.RequestMapping;
  18. import org.springframework.web.bind.annotation.RequestParam;
  19. import org.springframework.web.bind.annotation.RestController;
  20. import org.springframework.web.bind.annotation.GetMapping;
  21. import org.springframework.web.bind.annotation.PostMapping;
  22. import com.baomidou.mybatisplus.mapper.EntityWrapper;
  23. import com.baomidou.mybatisplus.mapper.Wrapper;
  24. import com.cl.annotation.IgnoreAuth;
  25.  
  26. import com.cl.entity.UsersEntity;
  27. import com.cl.entity.view.UsersView;
  28.  
  29. import com.cl.service.UsersService;
  30. import com.cl.service.TokenService;
  31. import com.cl.utils.PageUtils;
  32. import com.cl.utils.R;
  33. import com.cl.utils.MPUtil;
  34. import com.cl.utils.MapUtils;
  35. import com.cl.utils.CommonUtil;
  36.  
  37. /**
  38.  * 管理员
  39.  * 后端接口
  40.  * @author 
  41.  * @email 
  42.  * @date 2024-12-04 12:11:29
  43.  */
  44. @RestController
  45. @RequestMapping("/users")
  46. public class UsersController {
  47.     @Autowired
  48.     private UsersService usersService;
  49.  
  50.  
  51.  
  52. 	@Autowired
  53. 	private TokenService tokenService;
  54. 	
  55. 	/**
  56. 	 * 登录
  57. 	 */
  58. 	@IgnoreAuth
  59. 	@RequestMapping(value = "/login")
  60. 	public R login(String username, String password, String captcha, HttpServletRequest request) {
  61. 		UsersEntity u = usersService.selectOne(new EntityWrapper().eq("username", username));
  62.         if(u==null || !u.getPassword().equals(password)) {
  63.             return R.error("账号或密码不正确");
  64.         }
  65. 		String token = tokenService.generateToken(u.getId(), username,"users",  "管理员" );
  66. 		return R.ok().put("token", token);
  67. 	}
  68.  
  69.  
  70. 	
  71. 	/**
  72.      * 注册
  73.      */
  74. 	@IgnoreAuth
  75.     @RequestMapping("/register")
  76.     public R register(@RequestBody UsersEntity users){
  77.     	//ValidatorUtils.validateEntity(users);
  78.     UsersEntity u = usersService.selectOne(new EntityWrapper().eq("username", users.getUsername()));
  79. 		if(u!=null) {
  80. 			return R.error("注册用户已存在");
  81. 		}
  82. 		Long uId = new Date().getTime();
  83. 		users.setId(uId);
  84.         users.setPassword(users.getPassword());
  85.         usersService.insert(users);
  86.         return R.ok();
  87.     }
  88.  
  89. 	
  90. 	/**
  91. 	 * 退出
  92. 	 */
  93. 	@RequestMapping("/logout")
  94. 	public R logout(HttpServletRequest request) {
  95. 		request.getSession().invalidate();
  96. 		return R.ok("退出成功");
  97. 	}
  98. 	
  99. 	/**
  100.      * 获取用户的session用户信息
  101.      */
  102.     @RequestMapping("/session")
  103.     public R getCurrUser(HttpServletRequest request){
  104.     	Long id = (Long)request.getSession().getAttribute("userId");
  105.         return R.ok().put("data", usersService.selectView(new EntityWrapper().eq("id", id)));
  106.     }
  107.     
  108.     /**
  109.      * 密码重置
  110.      */
  111.     @IgnoreAuth
  112. 	@RequestMapping(value = "/resetPass")
  113.     public R resetPass(String username, HttpServletRequest request){
  114.     	UsersEntity u = usersService.selectOne(new EntityWrapper().eq("username", username));
  115.     	if(u==null) {
  116.     		return R.error("账号不存在");
  117.     	}
  118.         u.setPassword("123456");
  119.         usersService.updateById(u);
  120.         return R.ok("密码已重置为：123456");
  121.     }
  122.  
  123.  
  124.  
  125.  
  126.     /**
  127.      * 后台列表
  128.      */
  129.     @RequestMapping("/page")
  130.     public R page(@RequestParam Map params,UsersEntity users,
  131.                                                                     HttpServletRequest request){
  132.                                     EntityWrapper ew = new EntityWrapper();
  133.                                                                                                 
  134.         
  135.         
  136.         PageUtils page = usersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, users), params), params));
  137.         return R.ok().put("data", page);
  138.     }
  139.     
  140.     
  141.     
  142.     
  143.     
  144.     
  145.     
  146.     /**
  147.      * 前端列表
  148.      */
  149. 	@IgnoreAuth
  150.     @RequestMapping("/list")
  151.     public R list(@RequestParam Map params,UsersEntity users, 
  152. 		HttpServletRequest request){
  153.         EntityWrapper ew = new EntityWrapper();
  154.  
  155. 		PageUtils page = usersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, users), params), params));
  156.         return R.ok().put("data", page);
  157.     }
  158.  
  159. 	/**
  160.      * 列表
  161.      */
  162.     @RequestMapping("/lists")
  163.     public R list( UsersEntity users){
  164.        	EntityWrapper ew = new EntityWrapper();
  165.       	ew.allEq(MPUtil.allEQMapPre( users, "users")); 
  166.         return R.ok().put("data", usersService.selectListView(ew));
  167.     }
  168.  
  169. 	 /**
  170.      * 查询
  171.      */
  172.     @RequestMapping("/query")
  173.     public R query(UsersEntity users){
  174.         EntityWrapper< UsersEntity> ew = new EntityWrapper< UsersEntity>();
  175.  		ew.allEq(MPUtil.allEQMapPre( users, "users")); 
  176. 		UsersView usersView =  usersService.selectView(ew);
  177. 		return R.ok("查询管理员成功").put("data", usersView);
  178.     }
  179. 	
  180.     /**
  181.      * 后端详情
  182.      */
  183.     @RequestMapping("/info/{id}")
  184.     public R info(@PathVariable("id") Long id){
  185.         UsersEntity users = usersService.selectById(id);
  186. 		users = usersService.selectView(new EntityWrapper().eq("id", id));
  187.         return R.ok().put("data", users);
  188.     }
  189.  
  190.     /**
  191.      * 前端详情
  192.      */
  193. 	@IgnoreAuth
  194.     @RequestMapping("/detail/{id}")
  195.     public R detail(@PathVariable("id") Long id){
  196.         UsersEntity users = usersService.selectById(id);
  197. 		users = usersService.selectView(new EntityWrapper().eq("id", id));
  198.         return R.ok().put("data", users);
  199.     }
  200.     
  201.  
  202.  
  203.  
  204.     /**
  205.      * 后端保存
  206.      */
  207.     @RequestMapping("/save")
  208.     public R save(@RequestBody UsersEntity users, HttpServletRequest request){
  209.     	users.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
  210.     	//ValidatorUtils.validateEntity(users);
  211.         UsersEntity u = usersService.selectOne(new EntityWrapper().eq("username", users.getUsername()));
  212. 		if(u!=null) {
  213. 			return R.error("用户已存在");
  214. 		}
  215. 		users.setId(new Date().getTime());
  216.         users.setPassword(users.getPassword());
  217.         usersService.insert(users);
  218.         return R.ok();
  219.     }
  220.     
  221.     /**
  222.      * 前端保存
  223.      */
  224.     @RequestMapping("/add")
  225.     public R add(@RequestBody UsersEntity users, HttpServletRequest request){
  226.     	users.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
  227.     	//ValidatorUtils.validateEntity(users);
  228.         UsersEntity u = usersService.selectOne(new EntityWrapper().eq("username", users.getUsername()));
  229. 		if(u!=null) {
  230. 			return R.error("用户已存在");
  231. 		}
  232. 		users.setId(new Date().getTime());
  233.         users.setPassword(users.getPassword());
  234.         usersService.insert(users);
  235.         return R.ok();
  236.     }
  237.  
  238.  
  239.  
  240.     /**
  241.      * 修改
  242.      */
  243.     @RequestMapping("/update")
  244.     @Transactional
  245.     public R update(@RequestBody UsersEntity users, HttpServletRequest request){
  246.         //ValidatorUtils.validateEntity(users);
  247.         usersService.updateById(users);//全部更新
  248.         return R.ok();
  249.     }
  250.  
  251.  
  252.  
  253.     /**
  254.      * 删除
  255.      */
  256.     @RequestMapping("/delete")
  257.     public R delete(@RequestBody Long[] ids){
  258.         usersService.deleteBatchIds(Arrays.asList(ids));
  259.         return R.ok();
  260.     }
  261.  
  262. }

连接数据库

  1. # Tomcat
  2. server:
  3.     tomcat:
  4.         uri-encoding: UTF-8
  5.     port: 8080
  6.     servlet:
  7.         context-path: /cl93339466
  8.  
  9.  
  10. spring:
  11.     datasource:
  12.         driverClassName: com.mysql.cj.jdbc.Driver
  13.         url: jdbc:mysql://127.0.0.1:3308/cl93339466?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&useSSL=false
  14.         username: root
  15.         password: root
  16.  
  17. #        driverClassName: com.microsoft.sqlserver.jdbc.SQLServerDriver
  18. #        url: jdbc:sqlserver://127.0.0.1:1433;DatabaseName=cl93339466
  19. #        username: sa
  20. #        password: 123456
  21.  
  22.     servlet:
  23.       multipart:
  24.         max-file-size: 300MB
  25.         max-request-size: 300MB
  26.     resources:
  27.       static-locations: classpath:static/,file:static/
  28.  
  29. #mybatis
  30. mybatis-plus:
  31.   mapper-locations: classpath*:mapper/*.xml
  32.   #实体扫描，多个package用逗号或者分号分隔
  33.   typeAliasesPackage: com.cl.entity
  34.   global-config:
  35.     #主键类型  0:"数据库ID自增", 1:"用户输入ID",2:"全局唯一ID (数字类型唯一ID)", 3:"全局唯一ID UUID";
  36.     id-type: 1
  37.     #字段策略 0:"忽略判断",1:"非 NULL 判断"),2:"非空判断"
  38.     field-strategy: 1
  39.     #驼峰下划线转换
  40.     db-column-underline: true
  41.     #刷新mapper 调试神器
  42.     refresh-mapper: true
  43.     #逻辑删除配置
  44.     logic-delete-value: -1
  45.     logic-not-delete-value: 0
  46.     #自定义SQL注入器
  47.     sql-injector: com.baomidou.mybatisplus.mapper.LogicSqlInjector
  48.   configuration:
  49.     map-underscore-to-camel-case: true
  50.     cache-enabled: false
  51.     call-setters-on-nulls: true
  52.     #springboot 项目mybatis plus 设置 jdbcTypeForNull (oracle数据库需配置JdbcType.NULL, 默认是Other)
  53.     jdbc-type-for-null: 'null'

前端代码实现

  1. <template>
  2. 	<div>
  3. 		<div class="login_view">
  4. 			<el-form :model="loginForm" class="login_form">
  5. 				<div class="title_view">基于SpringBoot框架信息管理系统登录div>
  6. 				<div class="tabView" v-if="userList.length>1">
  7. 					<div class="tab" :style="{'width':`calc(100% / ${userList.length})`}"
  8. 						:class="loginForm.role==item.roleName?'tabActive':''" v-for="(item,index) in userList"
  9. 						:key="index" @click="tabClick(item.roleName)">{
  10.   
  11.   {item.roleName}}div>
  12. 				div>
  13. 				<div class="list_item" v-if="loginType==1">
  14. 					<div class="list_label">
  15. 						账号：
  16. 					div>
  17. 					<input class="list_inp" v-model="loginForm.username" placeholder="请输入账号" name="username" />
  18. 				div>
  19. 				<div class="list_item" v-if="loginType==1">
  20. 					<div class="list_label">
  21. 						密码：
  22. 					div>
  23. 					<input class="list_inp" v-model="loginForm.password" type="password" placeholder="请输入密码" @keydown.enter.native="handleLogin"  />
  24. 				div>
  25. 				<div class="btn_view">
  26. 					<el-button class="login" v-if="loginType==1" type="success" @click="handleLogin">登录el-button>
  27. 					<el-button class="register" type="primary" @click="handleRegister('huanzhexinxi')">注册患者信息el-button>
  28. 				div>
  29. 			el-form>
  30. 		div>
  31. 	div>
  32. template>
  33. <script setup>
  34. 	import {
  35. 		ref,
  36. 		getCurrentInstance,
  37. 		nextTick,
  38. 		onMounted,
  39. 	} from "vue";
  40. 	import { useStore } from 'vuex'
  41. 	const store = useStore()
  42. 	const userList = ref([])
  43. 	const menus = ref([])
  44. 	const loginForm = ref({
  45. 		role: '',
  46. 		username: '',
  47. 		password: ''
  48. 	})
  49. 	const tableName = ref('')
  50. 	const loginType = ref(1)
  51. 	const context = getCurrentInstance()?.appContext.config.globalProperties;
  52. 	//注册
  53.     const handleRegister = (tableName) => {
  54.     	context?.$router.push(`/${tableName}Register`)
  55.     	
  56.     }
  57. 	//登录用户tab切换
  58. 	const tabClick = (role) => {
  59. 		loginForm.value.role = role
  60. 		
  61. 	}
  62. 	const handleLogin = () => {
  63. 		if (!loginForm.value.username) {
  64. 			context?.$toolUtil.message('请输入用户名', 'error')
  65. 			
  66. 			return;
  67. 		}
  68. 		if (!loginForm.value.password) {
  69. 			context?.$toolUtil.message('请输入密码', 'error')
  70. 			return;
  71. 		}
  72. 		if (userList.value.length > 1) {
  73. 			if (!loginForm.value.role) {
  74. 				context?.$toolUtil.message('请选择角色', 'error')
  75. 				verifySlider.value.reset()
  76. 				return;
  77. 			}
  78. 			for (let i = 0; i < menus.value.length; i++) {
  79. 				if (menus.value[i].roleName == loginForm.value.role) {
  80. 					tableName.value = menus.value[i].tableName;
  81. 				}
  82. 			}
  83. 		} else {
  84. 			tableName.value = userList.value[0].tableName;
  85. 			loginForm.value.role = userList.value[0].roleName;
  86. 		}
  87. 		login()
  88. 	}
  89. 	const login = () => {
  90. 		context?.$http({
  91. 			url: `${tableName.value}/login?username=${loginForm.value.username}&password=${loginForm.value.password}`,
  92. 			method: 'post'
  93. 		}).then(res => {
  94. 			context?.$toolUtil.storageSet("Token", res.data.token);
  95. 			context?.$toolUtil.storageSet("role", loginForm.value.role);
  96. 			context?.$toolUtil.storageSet("sessionTable", tableName.value);
  97. 			context?.$toolUtil.storageSet("adminName", loginForm.value.username);
  98. 			store.dispatch('user/getSession')	//vuex中获取用户信息并保存
  99. 			context?.$router.push('/')
  100. 		}, err => {
  101. 		})
  102. 	}
  103. 	//获取菜单
  104. 	const getMenu=()=> {
  105.       let params = {
  106.         page: 1,
  107.         limit: 1,
  108.         sort: 'id',
  109.       }
  110.  
  111.       context?.$http({
  112.         url: "menu/list",
  113.         method: "get",
  114.         params: params
  115.       }).then(res => {
  116.           menus.value = JSON.parse(res.data.data.list[0].menujson)
  117.           for (let i = 0; i < menus.value.length; i++) {
  118.             if (menus.value[i].hasBackLogin=='是') {
  119.               userList.value.push(menus.value[i])
  120.             }
  121.           }
  122. 			loginForm.value.role = userList.value[0].roleName
  123.           context?.$toolUtil.storageSet("menus", JSON.stringify(menus.value));
  124.       })
  125.     }
  126. 	//初始化
  127. 	const init = () => {
  128. 		getMenu();
  129. 	}
  130. 	onMounted(()=>{
  131. 		init()
  132. 		
  133. document.querySelector('.login_view').insertAdjacentHTML('beforeend',`
    `    )
  134. const script = document.createElement('script');
  135. script.src = 'https://cdn.bootcdn.net/ajax/libs/particles.js/2.0.0/particles.min.js';
  136. script.onload = () => {
  137.   // script加载后执行
  138.   particlesJS("particles-js",{
  139.     particles: {
  140.       number: {
  141.         value: 120,
  142.         density: {
  143.           value_area: 500
  144.         }
  145.       },
  146.       size: {
  147.         value: 1,
  148.         random: true,
  149.         anim: {
  150.           speed: 20,
  151.           size_min: .1,
  152.           sync: false
  153.         }
  154.       },
  155.       line_linked: {
  156.         enable: true,
  157.         distance: 40,
  158.         color: "#fff",
  159.         opacity: 1,
  160.         width: 2
  161.       },
  162.     },
  163.   });
  164. };
  165. document.head.appendChild(script);
  166. 	})
  167. script>
  168.  
  169. <style lang="scss" scoped>
  170. 	.login_view {
  171.         background-image: url("");
  172. 		// 表单盒子
  173. 		.login_form {
  174. 		}
  175. 		.title_view {
  176. 		}
  177. 		// item盒子
  178. 		.list_item {
  179. 			// label
  180. 			.list_label {
  181. 			}
  182. 			// 输入框
  183. 			.list_inp {
  184. 			}
  185. 		}
  186. 		// 用户类型样式
  187. 		.tabView{
  188. 			// 默认样式
  189. 			.tab{
  190. 			}
  191. 			// 选中样式
  192. 			.tabActive{
  193. 			}
  194. 		}
  195. 		// 按钮盒子
  196. 		.btn_view {
  197. 			// 登录
  198. 			.login {
  199. 			}
  200. 			// 注册
  201. 			.register {
  202. 			}
  203. 		}
  204. 	}
  205.  
  206. style>
  207. <style>
  208. .login_view {
  209.     min-height: 100vh;
  210.     position: relative;
  211.     display: flex;
  212.     flex-direction: column;
  213.     align-items: center;
  214.     justify-content: center;
  215.     background-position: center center;
  216.     background-size: 100% 100% !important;
  217.     background-repeat: no-repeat;
  218.     background-attachment: initial;
  219.     background-origin: initial;
  220.     background-clip: initial;
  221.     background-color: initial;
  222.     background: linear-gradient(0deg, #249BEF, #7CC9FF)!important;
  223. }
  224.  
  225. /*表单盒子*/
  226. .login_form{width:500px;margin:0 auto;padding:30px 50px 40px 50px;font-size:16px;-webkit-transform:scale(1);z-index:5;background: rgba(255,255,255,0.5);border-radius: 10px 10px 10px 10px;border: 2px solid #FFFFFF;}
  227.  
  228. /*标题*/
  229. .login_form .title_view{width:100%;float:left;line-height:46px;font-size:24px;font-weight:600;letter-spacing:2px;color: var(--theme);position:relative;margin-bottom:20px;text-align: center;}
  230.  
  231. /*list_item*/
  232. .login_form .list_item{display: flex;align-items: center;width: 100%;justify-content: flex-start;margin: 24px auto;background: #fff;padding: 0 16px;border-radius: 26px;line-height: 40px;}
  233. .login_form .list_item .list_label {margin-right:10px;font-size:16px;white-space:nowrap;color: var(--theme);width: 60px;flex-shrink: 0;text-align: center;}
  234. .login_form .list_item .list_label i {  font-size:24px; color:#999;  }
  235. .login_form .list_item .list_inp{ width:100%; border:none; border-bottom:1px solid #ddd; height:40px; line-height:40px; font-size:inherit;  }
  236. .login_form .list_item .el-select{  }
  237.  
  238. /*用户类型*/
  239. .login_form .list_type{ display: flex; align-items: center; width: 100%; justify-content: center; padding: 10px 0px;margin-bottom:10px;  }
  240. .login_form .list_type .el-radio{ }
  241. .login_form .list_type .el-radio .el-radio__label{ color: #666;  font-size: 16px; }
  242. .login_form .list_type .el-radio.is-checked{ }
  243. .login_form .list_type .el-radio.is-checked .el-radio__label{ color: rgb(139, 92, 126);  font-size: 16px; }
  244. .login_form .list_type .el-radio__input{ }
  245. .login_form .list_type .el-radio__input.is-checked{ }
  246. .login_form .list_type .el-radio__input .el-radio__inner{ background: rgb(255, 255, 255); border: 1px solid rgb(220, 223, 230); }
  247. .login_form .list_type .el-radio__input.is-checked  .el-radio__inner{ background-color: rgb(139, 92, 126); border-color: rgb(139, 92, 126); }
  248.  
  249. /*记住密码*/
  250. .login_form .remember_view{  margin-bottom:20px;  }
  251. .login_form .remember_view .el-checkbox{ width: 20%; margin: 0px;  display: flex;  justify-content: center; align-items: center; }
  252. .login_form .remember_view .el-checkbox .el-checkbox__label{ background: rgb(255, 255, 255); }
  253. .login_form .remember_view .el-checkbox .el-checkbox__inner{ color: rgb(153, 153, 153); }
  254. .login_form .remember_view .el-checkbox.is-checked .el-checkbox__label{ color:#8b5c7e; font-size: 15px;  }
  255. .login_form .remember_view .el-checkbox.is-checked .el-checkbox__inner{  background: #8b5c7e;  border-color: #8b5c7e; font-size: 16px; }
  256.  
  257. /* 按钮 */
  258. .login_form .btn_view{text-align:center;margin-top: 60px;position: relative;}
  259. .login_form .btn_view .login{width: 100%;height: 50px;line-height: 46px;background: var(--theme);border: 0px solid #ccc;font-weight: 600;font-size: 20px;color: #fff;margin-bottom:20px;padding:0;border-radius: 26px;} 
  260. .login_form .btn_view .login:hover {} 
  261. .login_form .btn_view .register{background: #D3EDFA;border: 0px solid #ccc;font-size:16px;color: var(--theme);} 
  262. .login_form .btn_view .register:hover {color: #fff;background: var(--theme);} 
  263. .login_form .btn_view .forget{background: none;border: 0px solid #ccc;font-size:16px;color: #fff;width: 120px;position: absolute;top: -50px;left: calc(50% - 60px);} 
  264. .login_form .btn_view .forget:hover {border: none;color: var(--theme);}
  265.  
  266. .login_form .face{width:100%;height: 46px;line-height: 40px;background: #fff;border: 3px solid #ccc;font-weight: 600;font-size: 20px;color: #999;margin-bottom:20px;text-align:center;margin-top:20px;padding:0;cursor: pointer;} 
  267. .login_form .face:hover {color: var(--theme);border-color: var(--theme);} 
  268.  
  269.  
  270.  
  271. .tabView {
  272.     display: flex;
  273.     width: 100%;
  274.     column-gap: 12px;
  275. }
  276.  
  277. .tab {
  278.     flex: 1;
  279.     text-align: center;
  280.     background: #FFFFFF;
  281.     border-radius: 37px 37px 37px 37px;
  282.     border: 1px solid #EEEEEE;
  283.     line-height: 40px;
  284.     color: var(--theme);
  285.     border: none;
  286. }
  287.  
  288. .tab.tabActive {
  289.     color: #fff;
  290.     background: var(--theme);
  291. }
  292.  
  293. .listCode_view {
  294.     display: flex;
  295.     background: #fff;
  296.     line-height: 40px;
  297.     padding: 0 16px;
  298.     border-radius: 26px;
  299. }
  300.  
  301. .listCode_label {
  302.     color: var(--theme);
  303.     flex-shrink: 0;
  304. }
  305.  
  306. input.listCode_inp {
  307.     border: none;
  308.     flex: 1;
  309. }
  310.  
  311. .listCode_btn {
  312.     padding: 0 12px;
  313. }
  314. style>

获取源码

大家点赞、收藏、关注、评论啦 、查看??获取联系方式??

注：本文转载自blog.csdn.net的不知名123的文章"https://blog.csdn.net/hbh1001/article/details/145463452"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！