首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

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

  • 25-02-19 15:21
  • 4102
  • 9342
blog.csdn.net

目录

摘要

系统展示

技术介绍

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

连接数据库

  1. # Tomcat
  2. server:
  3. tomcat:
  4. uri-encoding: UTF-8
  5. port: 8080
  6. servlet:
  7. context-path: /cl93339466
  8. spring:
  9. datasource:
  10. driverClassName: com.mysql.cj.jdbc.Driver
  11. url: jdbc:mysql://127.0.0.1:3308/cl93339466?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&useSSL=false
  12. username: root
  13. password: root
  14. # driverClassName: com.microsoft.sqlserver.jdbc.SQLServerDriver
  15. # url: jdbc:sqlserver://127.0.0.1:1433;DatabaseName=cl93339466
  16. # username: sa
  17. # password: 123456
  18. servlet:
  19. multipart:
  20. max-file-size: 300MB
  21. max-request-size: 300MB
  22. resources:
  23. static-locations: classpath:static/,file:static/
  24. #mybatis
  25. mybatis-plus:
  26. mapper-locations: classpath*:mapper/*.xml
  27. #实体扫描,多个package用逗号或者分号分隔
  28. typeAliasesPackage: com.cl.entity
  29. global-config:
  30. #主键类型 0:"数据库ID自增", 1:"用户输入ID",2:"全局唯一ID (数字类型唯一ID)", 3:"全局唯一ID UUID";
  31. id-type: 1
  32. #字段策略 0:"忽略判断",1:"非 NULL 判断"),2:"非空判断"
  33. field-strategy: 1
  34. #驼峰下划线转换
  35. db-column-underline: true
  36. #刷新mapper 调试神器
  37. refresh-mapper: true
  38. #逻辑删除配置
  39. logic-delete-value: -1
  40. logic-not-delete-value: 0
  41. #自定义SQL注入器
  42. sql-injector: com.baomidou.mybatisplus.mapper.LogicSqlInjector
  43. configuration:
  44. map-underscore-to-camel-case: true
  45. cache-enabled: false
  46. call-setters-on-nulls: true
  47. #springboot 项目mybatis plus 设置 jdbcTypeForNull (oracle数据库需配置JdbcType.NULL, 默认是Other)
  48. 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. {item.roleName}}div>
  11. div>
  12. <div class="list_item" v-if="loginType==1">
  13. <div class="list_label">
  14. 账号:
  15. div>
  16. <input class="list_inp" v-model="loginForm.username" placeholder="请输入账号" name="username" />
  17. div>
  18. <div class="list_item" v-if="loginType==1">
  19. <div class="list_label">
  20. 密码:
  21. div>
  22. <input class="list_inp" v-model="loginForm.password" type="password" placeholder="请输入密码" @keydown.enter.native="handleLogin" />
  23. div>
  24. <div class="btn_view">
  25. <el-button class="login" v-if="loginType==1" type="success" @click="handleLogin">登录el-button>
  26. <el-button class="register" type="primary" @click="handleRegister('huanzhexinxi')">注册患者信息el-button>
  27. div>
  28. el-form>
  29. div>
  30. div>
  31. template>
  32. <script setup>
  33. import {
  34. ref,
  35. getCurrentInstance,
  36. nextTick,
  37. onMounted,
  38. } from "vue";
  39. import { useStore } from 'vuex'
  40. const store = useStore()
  41. const userList = ref([])
  42. const menus = ref([])
  43. const loginForm = ref({
  44. role: '',
  45. username: '',
  46. password: ''
  47. })
  48. const tableName = ref('')
  49. const loginType = ref(1)
  50. const context = getCurrentInstance()?.appContext.config.globalProperties;
  51. //注册
  52. const handleRegister = (tableName) => {
  53. context?.$router.push(`/${tableName}Register`)
  54. }
  55. //登录用户tab切换
  56. const tabClick = (role) => {
  57. loginForm.value.role = role
  58. }
  59. const handleLogin = () => {
  60. if (!loginForm.value.username) {
  61. context?.$toolUtil.message('请输入用户名', 'error')
  62. return;
  63. }
  64. if (!loginForm.value.password) {
  65. context?.$toolUtil.message('请输入密码', 'error')
  66. return;
  67. }
  68. if (userList.value.length > 1) {
  69. if (!loginForm.value.role) {
  70. context?.$toolUtil.message('请选择角色', 'error')
  71. verifySlider.value.reset()
  72. return;
  73. }
  74. for (let i = 0; i < menus.value.length; i++) {
  75. if (menus.value[i].roleName == loginForm.value.role) {
  76. tableName.value = menus.value[i].tableName;
  77. }
  78. }
  79. } else {
  80. tableName.value = userList.value[0].tableName;
  81. loginForm.value.role = userList.value[0].roleName;
  82. }
  83. login()
  84. }
  85. const login = () => {
  86. context?.$http({
  87. url: `${tableName.value}/login?username=${loginForm.value.username}&password=${loginForm.value.password}`,
  88. method: 'post'
  89. }).then(res => {
  90. context?.$toolUtil.storageSet("Token", res.data.token);
  91. context?.$toolUtil.storageSet("role", loginForm.value.role);
  92. context?.$toolUtil.storageSet("sessionTable", tableName.value);
  93. context?.$toolUtil.storageSet("adminName", loginForm.value.username);
  94. store.dispatch('user/getSession') //vuex中获取用户信息并保存
  95. context?.$router.push('/')
  96. }, err => {
  97. })
  98. }
  99. //获取菜单
  100. const getMenu=()=> {
  101. let params = {
  102. page: 1,
  103. limit: 1,
  104. sort: 'id',
  105. }
  106. context?.$http({
  107. url: "menu/list",
  108. method: "get",
  109. params: params
  110. }).then(res => {
  111. menus.value = JSON.parse(res.data.data.list[0].menujson)
  112. for (let i = 0; i < menus.value.length; i++) {
  113. if (menus.value[i].hasBackLogin=='是') {
  114. userList.value.push(menus.value[i])
  115. }
  116. }
  117. loginForm.value.role = userList.value[0].roleName
  118. context?.$toolUtil.storageSet("menus", JSON.stringify(menus.value));
  119. })
  120. }
  121. //初始化
  122. const init = () => {
  123. getMenu();
  124. }
  125. onMounted(()=>{
  126. init()
  127. document.querySelector('.login_view').insertAdjacentHTML('beforeend',`
    `
    )
  128. const script = document.createElement('script');
  129. script.src = 'https://cdn.bootcdn.net/ajax/libs/particles.js/2.0.0/particles.min.js';
  130. script.onload = () => {
  131. // script加载后执行
  132. particlesJS("particles-js",{
  133. particles: {
  134. number: {
  135. value: 120,
  136. density: {
  137. value_area: 500
  138. }
  139. },
  140. size: {
  141. value: 1,
  142. random: true,
  143. anim: {
  144. speed: 20,
  145. size_min: .1,
  146. sync: false
  147. }
  148. },
  149. line_linked: {
  150. enable: true,
  151. distance: 40,
  152. color: "#fff",
  153. opacity: 1,
  154. width: 2
  155. },
  156. },
  157. });
  158. };
  159. document.head.appendChild(script);
  160. })
  161. script>
  162. <style lang="scss" scoped>
  163. .login_view {
  164. background-image: url("");
  165. // 表单盒子
  166. .login_form {
  167. }
  168. .title_view {
  169. }
  170. // item盒子
  171. .list_item {
  172. // label
  173. .list_label {
  174. }
  175. // 输入框
  176. .list_inp {
  177. }
  178. }
  179. // 用户类型样式
  180. .tabView{
  181. // 默认样式
  182. .tab{
  183. }
  184. // 选中样式
  185. .tabActive{
  186. }
  187. }
  188. // 按钮盒子
  189. .btn_view {
  190. // 登录
  191. .login {
  192. }
  193. // 注册
  194. .register {
  195. }
  196. }
  197. }
  198. style>
  199. <style>
  200. .login_view {
  201. min-height: 100vh;
  202. position: relative;
  203. display: flex;
  204. flex-direction: column;
  205. align-items: center;
  206. justify-content: center;
  207. background-position: center center;
  208. background-size: 100% 100% !important;
  209. background-repeat: no-repeat;
  210. background-attachment: initial;
  211. background-origin: initial;
  212. background-clip: initial;
  213. background-color: initial;
  214. background: linear-gradient(0deg, #249BEF, #7CC9FF)!important;
  215. }
  216. /*表单盒子*/
  217. .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;}
  218. /*标题*/
  219. .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;}
  220. /*list_item*/
  221. .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;}
  222. .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;}
  223. .login_form .list_item .list_label i { font-size:24px; color:#999; }
  224. .login_form .list_item .list_inp{ width:100%; border:none; border-bottom:1px solid #ddd; height:40px; line-height:40px; font-size:inherit; }
  225. .login_form .list_item .el-select{ }
  226. /*用户类型*/
  227. .login_form .list_type{ display: flex; align-items: center; width: 100%; justify-content: center; padding: 10px 0px;margin-bottom:10px; }
  228. .login_form .list_type .el-radio{ }
  229. .login_form .list_type .el-radio .el-radio__label{ color: #666; font-size: 16px; }
  230. .login_form .list_type .el-radio.is-checked{ }
  231. .login_form .list_type .el-radio.is-checked .el-radio__label{ color: rgb(139, 92, 126); font-size: 16px; }
  232. .login_form .list_type .el-radio__input{ }
  233. .login_form .list_type .el-radio__input.is-checked{ }
  234. .login_form .list_type .el-radio__input .el-radio__inner{ background: rgb(255, 255, 255); border: 1px solid rgb(220, 223, 230); }
  235. .login_form .list_type .el-radio__input.is-checked .el-radio__inner{ background-color: rgb(139, 92, 126); border-color: rgb(139, 92, 126); }
  236. /*记住密码*/
  237. .login_form .remember_view{ margin-bottom:20px; }
  238. .login_form .remember_view .el-checkbox{ width: 20%; margin: 0px; display: flex; justify-content: center; align-items: center; }
  239. .login_form .remember_view .el-checkbox .el-checkbox__label{ background: rgb(255, 255, 255); }
  240. .login_form .remember_view .el-checkbox .el-checkbox__inner{ color: rgb(153, 153, 153); }
  241. .login_form .remember_view .el-checkbox.is-checked .el-checkbox__label{ color:#8b5c7e; font-size: 15px; }
  242. .login_form .remember_view .el-checkbox.is-checked .el-checkbox__inner{ background: #8b5c7e; border-color: #8b5c7e; font-size: 16px; }
  243. /* 按钮 */
  244. .login_form .btn_view{text-align:center;margin-top: 60px;position: relative;}
  245. .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;}
  246. .login_form .btn_view .login:hover {}
  247. .login_form .btn_view .register{background: #D3EDFA;border: 0px solid #ccc;font-size:16px;color: var(--theme);}
  248. .login_form .btn_view .register:hover {color: #fff;background: var(--theme);}
  249. .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);}
  250. .login_form .btn_view .forget:hover {border: none;color: var(--theme);}
  251. .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;}
  252. .login_form .face:hover {color: var(--theme);border-color: var(--theme);}
  253. .tabView {
  254. display: flex;
  255. width: 100%;
  256. column-gap: 12px;
  257. }
  258. .tab {
  259. flex: 1;
  260. text-align: center;
  261. background: #FFFFFF;
  262. border-radius: 37px 37px 37px 37px;
  263. border: 1px solid #EEEEEE;
  264. line-height: 40px;
  265. color: var(--theme);
  266. border: none;
  267. }
  268. .tab.tabActive {
  269. color: #fff;
  270. background: var(--theme);
  271. }
  272. .listCode_view {
  273. display: flex;
  274. background: #fff;
  275. line-height: 40px;
  276. padding: 0 16px;
  277. border-radius: 26px;
  278. }
  279. .listCode_label {
  280. color: var(--theme);
  281. flex-shrink: 0;
  282. }
  283. input.listCode_inp {
  284. border: none;
  285. flex: 1;
  286. }
  287. .listCode_btn {
  288. padding: 0 12px;
  289. }
  290. style>

获取源码

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

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

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

119
小程序
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2025 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top