Inicio Explorar Ayuda
Registro Iniciar sesión
wenhongquan
/
nnbp_ui
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

fix 样式

wenhongquan hace 3 años
padre
74be5bb52d
commit
158eb2f62e
Se han modificado 15 ficheros con 1129 adiciones y 1137 borrados
Dividir vista Mostrar estadísticas de diff
  1. 1 1
      .env.development
  2. 1 1
      .env.production
  3. 1 1
      .env.staging
  4. 209 214
      index.html
  5. 2 2
      package.json
  6. BIN
      src/assets/images/bg.webp
  7. BIN
      src/assets/logo/logo.png
  8. 68 65
      src/assets/styles/variables.module.scss
  9. 72 66
      src/components/Breadcrumb/index.vue
  10. 42 41
      src/components/Hamburger/index.vue
  11. 172 187
      src/layout/components/Navbar.vue
  12. 81 80
      src/layout/components/Sidebar/Logo.vue
  13. 47 47
      src/settings.js
  14. 215 214
      src/views/login.vue
  15. 218 218
      src/views/register.vue

+ 1 - 1
.env.development
Ver fichero 

@@ -1,5 +1,5 @@
 
 # 页面标题
 
-VITE_APP_TITLE = 若依管理系统
 
+VITE_APP_TITLE = 南宁北排管理系统
 
 
 # 开发环境配置
 
 ENV = 'development'

+ 1 - 1
.env.production
Ver fichero 

@@ -1,5 +1,5 @@
 
 # 页面标题
 
-VITE_APP_TITLE = 若依管理系统
 
+VITE_APP_TITLE = 南宁北排管理系统
 
 
 # 生产环境配置
 
 ENV = 'production'

+ 1 - 1
.env.staging
Ver fichero 

@@ -1,5 +1,5 @@
 
 # 页面标题
 
-VITE_APP_TITLE = 若依管理系统
 
+VITE_APP_TITLE = 南宁北排管理系统
 
 
 NODE_ENV = production

+ 209 - 214
index.html
Ver fichero 

@@ -1,215 +1,210 @@
 
-<!DOCTYPE html>

-<html>

-

-<head>

-  <meta charset="utf-8">

-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

-  <meta name="renderer" content="webkit">

-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

-  <link rel="icon" href="/favicon.ico">

-  <title>若依管理系统</title>

-  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->

-  <style>

-    html,

-    body,

-    #app {

-      height: 100%;

-      margin: 0px;

-      padding: 0px;

-    }

-

-    .chromeframe {

-      margin: 0.2em 0;

-      background: #ccc;

-      color: #000;

-      padding: 0.2em 0;

-    }

-

-    #loader-wrapper {

-      position: fixed;

-      top: 0;

-      left: 0;

-      width: 100%;

-      height: 100%;

-      z-index: 999999;

-    }

-

-    #loader {

-      display: block;

-      position: relative;

-      left: 50%;

-      top: 50%;

-      width: 150px;

-      height: 150px;

-      margin: -75px 0 0 -75px;

-      border-radius: 50%;

-      border: 3px solid transparent;

-      border-top-color: #FFF;

-      -webkit-animation: spin 2s linear infinite;

-      -ms-animation: spin 2s linear infinite;

-      -moz-animation: spin 2s linear infinite;

-      -o-animation: spin 2s linear infinite;

-      animation: spin 2s linear infinite;

-      z-index: 1001;

-    }

-

-    #loader:before {

-      content: "";

-      position: absolute;

-      top: 5px;

-      left: 5px;

-      right: 5px;

-      bottom: 5px;

-      border-radius: 50%;

-      border: 3px solid transparent;

-      border-top-color: #FFF;

-      -webkit-animation: spin 3s linear infinite;

-      -moz-animation: spin 3s linear infinite;

-      -o-animation: spin 3s linear infinite;

-      -ms-animation: spin 3s linear infinite;

-      animation: spin 3s linear infinite;

-    }

-

-    #loader:after {

-      content: "";

-      position: absolute;

-      top: 15px;

-      left: 15px;

-      right: 15px;

-      bottom: 15px;

-      border-radius: 50%;

-      border: 3px solid transparent;

-      border-top-color: #FFF;

-      -moz-animation: spin 1.5s linear infinite;

-      -o-animation: spin 1.5s linear infinite;

-      -ms-animation: spin 1.5s linear infinite;

-      -webkit-animation: spin 1.5s linear infinite;

-      animation: spin 1.5s linear infinite;

-    }

-

-

-    @-webkit-keyframes spin {

-      0% {

-        -webkit-transform: rotate(0deg);

-        -ms-transform: rotate(0deg);

-        transform: rotate(0deg);

-      }

-

-      100% {

-        -webkit-transform: rotate(360deg);

-        -ms-transform: rotate(360deg);

-        transform: rotate(360deg);

-      }

-    }

-

-    @keyframes spin {

-      0% {

-        -webkit-transform: rotate(0deg);

-        -ms-transform: rotate(0deg);

-        transform: rotate(0deg);

-      }

-

-      100% {

-        -webkit-transform: rotate(360deg);

-        -ms-transform: rotate(360deg);

-        transform: rotate(360deg);

-      }

-    }

-

-

-    #loader-wrapper .loader-section {

-      position: fixed;

-      top: 0;

-      width: 51%;

-      height: 100%;

-      background: #7171C6;

-      z-index: 1000;

-      -webkit-transform: translateX(0);

-      -ms-transform: translateX(0);

-      transform: translateX(0);

-    }

-

-    #loader-wrapper .loader-section.section-left {

-      left: 0;

-    }

-

-    #loader-wrapper .loader-section.section-right {

-      right: 0;

-    }

-

-

-    .loaded #loader-wrapper .loader-section.section-left {

-      -webkit-transform: translateX(-100%);

-      -ms-transform: translateX(-100%);

-      transform: translateX(-100%);

-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

-    }

-

-    .loaded #loader-wrapper .loader-section.section-right {

-      -webkit-transform: translateX(100%);

-      -ms-transform: translateX(100%);

-      transform: translateX(100%);

-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

-    }

-

-    .loaded #loader {

-      opacity: 0;

-      -webkit-transition: all 0.3s ease-out;

-      transition: all 0.3s ease-out;

-    }

-

-    .loaded #loader-wrapper {

-      visibility: hidden;

-      -webkit-transform: translateY(-100%);

-      -ms-transform: translateY(-100%);

-      transform: translateY(-100%);

-      -webkit-transition: all 0.3s 1s ease-out;

-      transition: all 0.3s 1s ease-out;

-    }

-

-    .no-js #loader-wrapper {

-      display: none;

-    }

-

-    .no-js h1 {

-      color: #222222;

-    }

-

-    #loader-wrapper .load_title {

-      font-family: 'Open Sans';

-      color: #FFF;

-      font-size: 19px;

-      width: 100%;

-      text-align: center;

-      z-index: 9999999999999;

-      position: absolute;

-      top: 60%;

-      opacity: 1;

-      line-height: 30px;

-    }

-

-    #loader-wrapper .load_title span {

-      font-weight: normal;

-      font-style: italic;

-      font-size: 13px;

-      color: #FFF;

-      opacity: 0.5;

-    }

-  </style>

-</head>

-

-<body>

-  <div id="app">

-    <div id="loader-wrapper">

-      <div id="loader"></div>

-      <div class="loader-section section-left"></div>

-      <div class="loader-section section-right"></div>

-      <div class="load_title">正在加载系统资源，请耐心等待</div>

-    </div>

-  </div>

-  <script type="module" src="/src/main.js"></script>

-</body>

-

+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
+    <meta name="renderer" content="webkit">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
+    <link rel="icon" href="/favicon.ico">
 
+    <title>南宁北排管理系统</title>
 
+    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 
+    <style>
 
+        html,
 
+        body,
 
+        #app {
 
+            height: 100%;
 
+            margin: 0px;
 
+            padding: 0px;
 
+        }
 
+        
+        .chromeframe {
 
+            margin: 0.2em 0;
 
+            background: #ccc;
 
+            color: #000;
 
+            padding: 0.2em 0;
 
+        }
 
+        
+        #loader-wrapper {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 100%;
 
+            z-index: 999999;
 
+        }
 
+        
+        #loader {
 
+            display: block;
 
+            position: relative;
 
+            left: 50%;
 
+            top: 50%;
 
+            width: 150px;
 
+            height: 150px;
 
+            margin: -75px 0 0 -75px;
 
+            border-radius: 50%;
 
+            border: 3px solid transparent;
 
+            border-top-color: #FFF;
 
+            -webkit-animation: spin 2s linear infinite;
 
+            -ms-animation: spin 2s linear infinite;
 
+            -moz-animation: spin 2s linear infinite;
 
+            -o-animation: spin 2s linear infinite;
 
+            animation: spin 2s linear infinite;
 
+            z-index: 1001;
 
+        }
 
+        
+        #loader:before {
 
+            content: "";
 
+            position: absolute;
 
+            top: 5px;
 
+            left: 5px;
 
+            right: 5px;
 
+            bottom: 5px;
 
+            border-radius: 50%;
 
+            border: 3px solid transparent;
 
+            border-top-color: #FFF;
 
+            -webkit-animation: spin 3s linear infinite;
 
+            -moz-animation: spin 3s linear infinite;
 
+            -o-animation: spin 3s linear infinite;
 
+            -ms-animation: spin 3s linear infinite;
 
+            animation: spin 3s linear infinite;
 
+        }
 
+        
+        #loader:after {
 
+            content: "";
 
+            position: absolute;
 
+            top: 15px;
 
+            left: 15px;
 
+            right: 15px;
 
+            bottom: 15px;
 
+            border-radius: 50%;
 
+            border: 3px solid transparent;
 
+            border-top-color: #FFF;
 
+            -moz-animation: spin 1.5s linear infinite;
 
+            -o-animation: spin 1.5s linear infinite;
 
+            -ms-animation: spin 1.5s linear infinite;
 
+            -webkit-animation: spin 1.5s linear infinite;
 
+            animation: spin 1.5s linear infinite;
 
+        }
 
+        
+        @-webkit-keyframes spin {
 
+            0% {
 
+                -webkit-transform: rotate(0deg);
 
+                -ms-transform: rotate(0deg);
 
+                transform: rotate(0deg);
 
+            }
 
+            100% {
 
+                -webkit-transform: rotate(360deg);
 
+                -ms-transform: rotate(360deg);
 
+                transform: rotate(360deg);
 
+            }
 
+        }
 
+        
+        @keyframes spin {
 
+            0% {
 
+                -webkit-transform: rotate(0deg);
 
+                -ms-transform: rotate(0deg);
 
+                transform: rotate(0deg);
 
+            }
 
+            100% {
 
+                -webkit-transform: rotate(360deg);
 
+                -ms-transform: rotate(360deg);
 
+                transform: rotate(360deg);
 
+            }
 
+        }
 
+        
+        #loader-wrapper .loader-section {
 
+            position: fixed;
 
+            top: 0;
 
+            width: 51%;
 
+            height: 100%;
 
+            background: #7171C6;
 
+            z-index: 1000;
 
+            -webkit-transform: translateX(0);
 
+            -ms-transform: translateX(0);
 
+            transform: translateX(0);
 
+        }
 
+        
+        #loader-wrapper .loader-section.section-left {
 
+            left: 0;
 
+        }
 
+        
+        #loader-wrapper .loader-section.section-right {
 
+            right: 0;
 
+        }
 
+        
+        .loaded #loader-wrapper .loader-section.section-left {
 
+            -webkit-transform: translateX(-100%);
 
+            -ms-transform: translateX(-100%);
 
+            transform: translateX(-100%);
 
+            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 
+        }
 
+        
+        .loaded #loader-wrapper .loader-section.section-right {
 
+            -webkit-transform: translateX(100%);
 
+            -ms-transform: translateX(100%);
 
+            transform: translateX(100%);
 
+            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 
+        }
 
+        
+        .loaded #loader {
 
+            opacity: 0;
 
+            -webkit-transition: all 0.3s ease-out;
 
+            transition: all 0.3s ease-out;
 
+        }
 
+        
+        .loaded #loader-wrapper {
 
+            visibility: hidden;
 
+            -webkit-transform: translateY(-100%);
 
+            -ms-transform: translateY(-100%);
 
+            transform: translateY(-100%);
 
+            -webkit-transition: all 0.3s 1s ease-out;
 
+            transition: all 0.3s 1s ease-out;
 
+        }
 
+        
+        .no-js #loader-wrapper {
 
+            display: none;
 
+        }
 
+        
+        .no-js h1 {
 
+            color: #222222;
 
+        }
 
+        
+        #loader-wrapper .load_title {
 
+            font-family: 'Open Sans';
 
+            color: #FFF;
 
+            font-size: 19px;
 
+            width: 100%;
 
+            text-align: center;
 
+            z-index: 9999999999999;
 
+            position: absolute;
 
+            top: 60%;
 
+            opacity: 1;
 
+            line-height: 30px;
 
+        }
 
+        
+        #loader-wrapper .load_title span {
 
+            font-weight: normal;
 
+            font-style: italic;
 
+            font-size: 13px;
 
+            color: #FFF;
 
+            opacity: 0.5;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <div id="loader-wrapper">
 
+            <div id="loader"></div>
 
+            <div class="loader-section section-left"></div>
 
+            <div class="loader-section section-right"></div>
 
+            <div class="load_title">正在加载系统资源，请耐心等待</div>
 
+        </div>
 
+    </div>
 
+    <script type="module" src="/src/main.js"></script>
 
+</body>
 
+
 
 </html>

+ 2 - 2
package.json
Ver fichero 

@@ -1,8 +1,8 @@
 
 {
 
     "name": "ruoyi",
 
     "version": "3.8.2",
 
-    "description": "若依管理系统",
 
-    "author": "若依",
 
+    "description": "南宁北排管理系统",
 
+    "author": "crj",
 
     "license": "MIT",
 
     "scripts": {
 
         "dev": "vite --mode development",

BIN
src/assets/images/bg.webp
Ver fichero


BIN
src/assets/logo/logo.png
Ver fichero


+ 68 - 65
src/assets/styles/variables.module.scss
Ver fichero 

@@ -1,65 +1,68 @@
 
-// base color

-$blue: #324157;

-$light-blue: #3A71A8;

-$red: #C03639;

-$pink: #E65D6E;

-$green: #30B08F;

-$tiffany: #4AB7BD;

-$yellow: #FEC171;

-$panGreen: #30B08F;

-

-// 默认菜单主题风格

-$base-menu-color: #bfcbd9;

-$base-menu-color-active: #f4f4f5;

-$base-menu-background: #304156;

-$base-logo-title-color: #ffffff;

-

-$base-menu-light-color: rgba(0, 0, 0, 0.7);

-$base-menu-light-background: #ffffff;

-$base-logo-light-title-color: #001529;

-

-$base-sub-menu-background: #1f2d3d;

-$base-sub-menu-hover: #001528;

-

-// 自定义暗色菜单风格

-/**

-$base-menu-color:hsla(0,0%,100%,.65);

-$base-menu-color-active:#fff;

-$base-menu-background:#001529;

-$base-logo-title-color: #ffffff;

-

-$base-menu-light-color:rgba(0,0,0,.70);

-$base-menu-light-background:#ffffff;

-$base-logo-light-title-color: #001529;

-

-$base-sub-menu-background:#000c17;

-$base-sub-menu-hover:#001528;

-*/

-

-$--color-primary: #409EFF;

-$--color-success: #67C23A;

-$--color-warning: #E6A23C;

-$--color-danger: #F56C6C;

-$--color-info: #909399;

-

-$base-sidebar-width: 200px;

-

-// the :export directive is the magic sauce for webpack

-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

-:export {

-  menuColor: $base-menu-color;

-  menuLightColor: $base-menu-light-color;

-  menuColorActive: $base-menu-color-active;

-  menuBackground: $base-menu-background;

-  menuLightBackground: $base-menu-light-background;

-  subMenuBackground: $base-sub-menu-background;

-  subMenuHover: $base-sub-menu-hover;

-  sideBarWidth: $base-sidebar-width;

-  logoTitleColor: $base-logo-title-color;

-  logoLightTitleColor: $base-logo-light-title-color;

-  primaryColor: $--color-primary;

-  successColor: $--color-success;

-  dangerColor: $--color-danger;

-  infoColor: $--color-info;

-  warningColor: $--color-warning;

-}

+// base color
 
+$blue: #324157;
 
+$light-blue: #3A71A8;
 
+$red: #C03639;
 
+$pink: #E65D6E;
 
+$green: #30B08F;
 
+$tiffany: #4AB7BD;
 
+$yellow: #FEC171;
 
+$panGreen: #30B08F;
 
+// 默认菜单主题风格
 
+// $base-menu-color: #bfcbd9;
 
+$base-menu-color:#465468;
 
+$base-menu-color-active:#009dff;
 
+// $base-menu-color-active: #f4f4f5;
 
+// $base-menu-background: #304156;
 
+// $base-menu-color-active:#e5e9f2;
 
+$base-menu-background:#eef2f8;
 
+$base-logo-title-color: #fff;
 
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
 
+$base-menu-light-background: #ffffff;
 
+$base-logo-light-title-color: #001529;
 
+// $base-sub-menu-background: #1f2d3d;
 
+$base-sub-menu-background:#e5e9f2;
 
+// $base-sub-menu-hover: #001528;
 
+$base-sub-menu-hover: #cacdd6;
 
+// 自定义暗色菜单风格
 
+$base-p-bg:#1fa0ff;
 
+
 
+/**
 
+$base-menu-color:hsla(0,0%,100%,.65);
 
+$base-menu-color-active:#fff;
 
+$base-menu-background:#001529;
 
+$base-logo-title-color: #ffffff;
 
+
 
+$base-menu-light-color:rgba(0,0,0,.70);
 
+$base-menu-light-background:#ffffff;
 
+$base-logo-light-title-color: #001529;
 
+
 
+$base-sub-menu-background:#000c17;
 
+$base-sub-menu-hover:#001528;
 
+*/
 
+
 
+$--color-primary: #409EFF;
 
+$--color-success: #67C23A;
 
+$--color-warning: #E6A23C;
 
+$--color-danger: #F56C6C;
 
+$--color-info: #909399;
 
+$base-sidebar-width: 200px;
 
+// the :export directive is the magic sauce for webpack
 
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 
+:export {
 
+    menuColor: $base-menu-color;
 
+    menuLightColor: $base-menu-light-color;
 
+    menuColorActive: $base-menu-color-active;
 
+    menuBackground: $base-menu-background;
 
+    menuLightBackground: $base-menu-light-background;
 
+    subMenuBackground: $base-sub-menu-background;
 
+    subMenuHover: $base-sub-menu-hover;
 
+    sideBarWidth: $base-sidebar-width;
 
+    logoTitleColor: $base-logo-title-color;
 
+    logoLightTitleColor: $base-logo-light-title-color;
 
+    primaryColor: $--color-primary;
 
+    successColor: $--color-success;
 
+    dangerColor: $--color-danger;
 
+    infoColor: $--color-info;
 
+    warningColor: $--color-warning;
 
+    basePBG: $base-p-bg;
 
+}

+ 72 - 66
src/components/Breadcrumb/index.vue
Ver fichero 

@@ -1,66 +1,72 @@
 
-<template>

-  <el-breadcrumb class="app-breadcrumb" separator="/">

-    <transition-group name="breadcrumb">

-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">

-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>

-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>

-      </el-breadcrumb-item>

-    </transition-group>

-  </el-breadcrumb>

-</template>

-

-<script setup>

-const route = useRoute();

-const router = useRouter();

-const levelList = ref([])

-

-function getBreadcrumb() {

-  // only show routes with meta.title

-  let matched = route.matched.filter(item => item.meta && item.meta.title);

-  const first = matched[0]

-  // 判断是否为首页

-  if (!isDashboard(first)) {

-    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)

-  }

-

-  levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

-}

-function isDashboard(route) {

-  const name = route && route.name

-  if (!name) {

-    return false

-  }

-  return name.trim() === 'Index'

-}

-function handleLink(item) {

-  const { redirect, path } = item

-  if (redirect) {

-    router.push(redirect)

-    return

-  }

-  router.push(path)

-}

-

-watchEffect(() => {

-  // if you go to the redirect page, do not update the breadcrumbs

-  if (route.path.startsWith('/redirect/')) {

-    return

-  }

-  getBreadcrumb()

-})

-getBreadcrumb();

-</script>

-

-<style lang='scss' scoped>

-.app-breadcrumb.el-breadcrumb {

-  display: inline-block;

-  font-size: 14px;

-  line-height: 50px;

-  margin-left: 8px;

-

-  .no-redirect {

-    color: #97a8be;

-    cursor: text;

-  }

-}

-</style>
 
+<template>
 
+  <el-breadcrumb class="app-breadcrumb" separator="/">
 
+    <transition-group name="breadcrumb">
 
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
 
+        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
 
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
 
+      </el-breadcrumb-item>
 
+    </transition-group>
 
+  </el-breadcrumb>
 
+</template>
 
+
 
+<script setup>
 
+import variables from '@/assets/styles/variables.module.scss'
 
+const route = useRoute();
 
+const router = useRouter();
 
+const levelList = ref([])
 
+
 
+function getBreadcrumb() {
 
+  // only show routes with meta.title
 
+  let matched = route.matched.filter(item => item.meta && item.meta.title);
 
+  const first = matched[0]
 
+  // 判断是否为首页
 
+  if (!isDashboard(first)) {
 
+    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
 
+  }
 
+
 
+  levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
 
+}
 
+function isDashboard(route) {
 
+  const name = route && route.name
 
+  if (!name) {
 
+    return false
 
+  }
 
+  return name.trim() === 'Index'
 
+}
 
+function handleLink(item) {
 
+  const { redirect, path } = item
 
+  if (redirect) {
 
+    router.push(redirect)
 
+    return
 
+  }
 
+  router.push(path)
 
+}
 
+
 
+watchEffect(() => {
 
+  // if you go to the redirect page, do not update the breadcrumbs
 
+  if (route.path.startsWith('/redirect/')) {
 
+    return
 
+  }
 
+  getBreadcrumb()
 
+})
 
+getBreadcrumb();
 
+</script>
 
+
 
+<style lang='scss' scoped>
 
+@import "@/assets/styles/variables.module.scss";
 
+.app-breadcrumb.el-breadcrumb {
 
+  display: inline-block;
 
+  font-size: 14px;
 
+  line-height: 50px;
 
+  margin-left: 8px;
 
+
 
+
 
+  .no-redirect {
 
+    color: #fff;
 
+    cursor: text;
 
+  }
 
+ .el-breadcrumb__inner a{
 
+   color: #fff !important;
 
+ }
 
+}
 
+</style>

+ 42 - 41
src/components/Hamburger/index.vue
Ver fichero 

@@ -1,41 +1,42 @@
 
-<template>

-  <div style="padding: 0 15px;" @click="toggleClick">

-    <svg

-      :class="{'is-active':isActive}"

-      class="hamburger"

-      viewBox="0 0 1024 1024"

-      xmlns="http://www.w3.org/2000/svg"

-      width="64"

-      height="64"

-    >

-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />

-    </svg>

-  </div>

-</template>

-

-<script setup>

-defineProps({

-  isActive: {

-    type: Boolean,

-    default: false

-  }

-})

-

-const emit = defineEmits()

-const toggleClick = () => {

-  emit('toggleClick');

-}

-</script>

-

-<style scoped>

-.hamburger {

-  display: inline-block;

-  vertical-align: middle;

-  width: 20px;

-  height: 20px;

-}

-

-.hamburger.is-active {

-  transform: rotate(180deg);

-}

-</style>

+<template>
 
+  <div style="padding: 0 15px;" @click="toggleClick">
 
+    <svg
 
+      :class="{'is-active':isActive}"
 
+      class="hamburger"
 
+      viewBox="0 0 1024 1024"
 
+      xmlns="http://www.w3.org/2000/svg"
 
+      width="64"
 
+      height="64"
 
+    >
 
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
 
+    </svg>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+defineProps({
 
+  isActive: {
 
+    type: Boolean,
 
+    default: false
 
+  }
 
+})
 
+
 
+const emit = defineEmits()
 
+const toggleClick = () => {
 
+  emit('toggleClick');
 
+}
 
+</script>
 
+
 
+<style scoped>
 
+.hamburger {
 
+  display: inline-block;
 
+  vertical-align: middle;
 
+  width: 20px;
 
+  height: 20px;
 
+  fill: white;
 
+}
 
+
 
+.hamburger.is-active {
 
+  transform: rotate(180deg);
 
+}
 
+</style>

+ 172 - 187
src/layout/components/Navbar.vue
Ver fichero 

@@ -1,187 +1,172 @@
 
-<template>

-  <div class="navbar">

-    <hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />

-    <top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />

-

-    <div class="right-menu">

-      <template v-if="getters.device !== 'mobile'">

-        <header-search id="header-search" class="right-menu-item" />

-

-        <el-tooltip content="源码地址" effect="dark" placement="bottom">

-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />

-        </el-tooltip>

-

-        <el-tooltip content="文档地址" effect="dark" placement="bottom">

-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />

-        </el-tooltip>

-

-        <screenfull id="screenfull" class="right-menu-item hover-effect" />

-

-        <el-tooltip content="布局大小" effect="dark" placement="bottom">

-          <size-select id="size-select" class="right-menu-item hover-effect" />

-        </el-tooltip>

-      </template>

-      <div class="avatar-container">

-        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">

-          <div class="avatar-wrapper">

-            <img :src="getters.avatar" class="user-avatar" />

-            <el-icon><caret-bottom /></el-icon>

-          </div>

-          <template #dropdown>

-            <el-dropdown-menu>

-              <router-link to="/user/profile">

-                <el-dropdown-item>个人中心</el-dropdown-item>

-              </router-link>

-              <el-dropdown-item command="setLayout">

-                <span>布局设置</span>

-              </el-dropdown-item>

-              <el-dropdown-item divided command="logout">

-                <span>退出登录</span>

-              </el-dropdown-item>

-            </el-dropdown-menu>

-          </template>

-        </el-dropdown>

-      </div>

-    </div>

-  </div>

-</template>

-

-<script setup>

-import { ElMessageBox } from 'element-plus'

-import Breadcrumb from '@/components/Breadcrumb'

-import TopNav from '@/components/TopNav'

-import Hamburger from '@/components/Hamburger'

-import Screenfull from '@/components/Screenfull'

-import SizeSelect from '@/components/SizeSelect'

-import HeaderSearch from '@/components/HeaderSearch'

-import RuoYiGit from '@/components/RuoYi/Git'

-import RuoYiDoc from '@/components/RuoYi/Doc'

-

-const store = useStore();

-const getters = computed(() => store.getters);

-

-function toggleSideBar() {

-  store.dispatch('app/toggleSideBar')

-}

-

-function handleCommand(command) {

-  switch (command) {

-    case "setLayout":

-      setLayout();

-      break;

-    case "logout":

-      logout();

-      break;

-    default:

-      break;

-  }

-}

-

-function logout() {

-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {

-    confirmButtonText: '确定',

-    cancelButtonText: '取消',

-    type: 'warning'

-  }).then(() => {

-    store.dispatch('LogOut').then(() => {

-      location.href = '/index';

-    })

-  }).catch(() => { });

-}

-

-const emits = defineEmits(['setLayout'])

-function setLayout() {

-  emits('setLayout');

-}

-</script>

-

-<style lang='scss' scoped>

-.navbar {

-  height: 50px;

-  overflow: hidden;

-  position: relative;

-  background: #fff;

-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

-

-  .hamburger-container {

-    line-height: 46px;

-    height: 100%;

-    float: left;

-    cursor: pointer;

-    transition: background 0.3s;

-    -webkit-tap-highlight-color: transparent;

-

-    &:hover {

-      background: rgba(0, 0, 0, 0.025);

-    }

-  }

-

-  .breadcrumb-container {

-    float: left;

-  }

-

-  .topmenu-container {

-    position: absolute;

-    left: 50px;

-  }

-

-  .errLog-container {

-    display: inline-block;

-    vertical-align: top;

-  }

-

-  .right-menu {

-    float: right;

-    height: 100%;

-    line-height: 50px;

-    display: flex;

-

-    &:focus {

-      outline: none;

-    }

-

-    .right-menu-item {

-      display: inline-block;

-      padding: 0 8px;

-      height: 100%;

-      font-size: 18px;

-      color: #5a5e66;

-      vertical-align: text-bottom;

-

-      &.hover-effect {

-        cursor: pointer;

-        transition: background 0.3s;

-

-        &:hover {

-          background: rgba(0, 0, 0, 0.025);

-        }

-      }

-    }

-

-    .avatar-container {

-      margin-right: 40px;

-

-      .avatar-wrapper {

-        margin-top: 5px;

-        position: relative;

-

-        .user-avatar {

-          cursor: pointer;

-          width: 40px;

-          height: 40px;

-          border-radius: 10px;

-        }

-

-        i {

-          cursor: pointer;

-          position: absolute;

-          right: -20px;

-          top: 25px;

-          font-size: 12px;

-        }

-      }

-    }

-  }

-}

-</style>

+<template>
 
+  <div class="navbar" :style="{background:variables.basePBG}">
 
+    <hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
 
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
 
+
 
+    <div class="right-menu">
 
+
 
+      <div class="avatar-container">
 
+        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
 
+          <div class="avatar-wrapper">
 
+            <img :src="getters.avatar" class="user-avatar" />
 
+            <el-icon><caret-bottom /></el-icon>
 
+          </div>
 
+          <template #dropdown>
 
+            <el-dropdown-menu>
 
+              <router-link to="/user/profile">
 
+                <el-dropdown-item>个人中心</el-dropdown-item>
 
+              </router-link>
 
+              <!-- <el-dropdown-item command="setLayout">
 
+                <span>布局设置</span>
 
+              </el-dropdown-item> -->
 
+              <el-dropdown-item divided command="logout">
 
+                <span>退出登录</span>
 
+              </el-dropdown-item>
 
+            </el-dropdown-menu>
 
+          </template>
 
+        </el-dropdown>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import { ElMessageBox } from 'element-plus'
 
+import Breadcrumb from '@/components/Breadcrumb'
 
+import TopNav from '@/components/TopNav'
 
+import Hamburger from '@/components/Hamburger'
 
+import Screenfull from '@/components/Screenfull'
 
+import SizeSelect from '@/components/SizeSelect'
 
+import HeaderSearch from '@/components/HeaderSearch'
 
+import RuoYiGit from '@/components/RuoYi/Git'
 
+import RuoYiDoc from '@/components/RuoYi/Doc'
 
+import variables from '@/assets/styles/variables.module.scss'
 
+
 
+const store = useStore();
 
+const getters = computed(() => store.getters);
 
+
 
+function toggleSideBar() {
 
+  store.dispatch('app/toggleSideBar')
 
+}
 
+
 
+function handleCommand(command) {
 
+  switch (command) {
 
+    case "setLayout":
 
+      setLayout();
 
+      break;
 
+    case "logout":
 
+      logout();
 
+      break;
 
+    default:
 
+      break;
 
+  }
 
+}
 
+
 
+function logout() {
 
+  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
 
+    confirmButtonText: '确定',
 
+    cancelButtonText: '取消',
 
+    type: 'warning'
 
+  }).then(() => {
 
+    store.dispatch('LogOut').then(() => {
 
+      location.href = '/index';
 
+    })
 
+  }).catch(() => { });
 
+}
 
+
 
+const emits = defineEmits(['setLayout'])
 
+function setLayout() {
 
+  emits('setLayout');
 
+}
 
+</script>
 
+
 
+<style lang='scss' scoped>
 
+.navbar {
 
+  height: 50px;
 
+  overflow: hidden;
 
+  position: relative;
 
+  background: #fff;
 
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
+
 
+  .hamburger-container {
 
+    line-height: 46px;
 
+    height: 100%;
 
+    float: left;
 
+    cursor: pointer;
 
+    transition: background 0.3s;
 
+    -webkit-tap-highlight-color: transparent;
 
+
 
+    &:hover {
 
+      background: rgba(0, 0, 0, 0.025);
 
+    }
 
+  }
 
+
 
+  .breadcrumb-container {
 
+    float: left;
 
+  }
 
+
 
+  .topmenu-container {
 
+    position: absolute;
 
+    left: 50px;
 
+  }
 
+
 
+  .errLog-container {
 
+    display: inline-block;
 
+    vertical-align: top;
 
+  }
 
+
 
+  .right-menu {
 
+    float: right;
 
+    height: 100%;
 
+    line-height: 50px;
 
+    display: flex;
 
+
 
+    &:focus {
 
+      outline: none;
 
+    }
 
+
 
+    .right-menu-item {
 
+      display: inline-block;
 
+      padding: 0 8px;
 
+      height: 100%;
 
+      font-size: 18px;
 
+      color: #5a5e66;
 
+      vertical-align: text-bottom;
 
+
 
+      &.hover-effect {
 
+        cursor: pointer;
 
+        transition: background 0.3s;
 
+
 
+        &:hover {
 
+          background: rgba(0, 0, 0, 0.025);
 
+        }
 
+      }
 
+    }
 
+
 
+    .avatar-container {
 
+      margin-right: 40px;
 
+
 
+      .avatar-wrapper {
 
+        margin-top: 5px;
 
+        position: relative;
 
+
 
+        .user-avatar {
 
+          cursor: pointer;
 
+          width: 40px;
 
+          height: 40px;
 
+          border-radius: 10px;
 
+        }
 
+
 
+        i {
 
+          cursor: pointer;
 
+          position: absolute;
 
+          right: -20px;
 
+          top: 25px;
 
+          font-size: 12px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>

+ 81 - 80
src/layout/components/Sidebar/Logo.vue
Ver fichero 

@@ -1,80 +1,81 @@
 
-<template>

-  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">

-    <transition name="sidebarLogoFade">

-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">

-        <img v-if="logo" :src="logo" class="sidebar-logo" />

-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>

-      </router-link>

-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">

-        <img v-if="logo" :src="logo" class="sidebar-logo" />

-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>

-      </router-link>

-    </transition>

-  </div>

-</template>

-

-<script setup>

-import variables from '@/assets/styles/variables.module.scss'

-import logo from '@/assets/logo/logo.png'

-

-defineProps({

-  collapse: {

-    type: Boolean,

-    required: true

-  }

-})

-

-const title = ref('若依管理系统');

-const store = useStore();

-const sideTheme = computed(() => store.state.settings.sideTheme);

-</script>

-

-<style lang="scss" scoped>

-.sidebarLogoFade-enter-active {

-  transition: opacity 1.5s;

-}

-

-.sidebarLogoFade-enter,

-.sidebarLogoFade-leave-to {

-  opacity: 0;

-}

-

-.sidebar-logo-container {

-  position: relative;

-  width: 100%;

-  height: 50px;

-  line-height: 50px;

-  background: #2b2f3a;

-  text-align: center;

-  overflow: hidden;

-

-  & .sidebar-logo-link {

-    height: 100%;

-    width: 100%;

-

-    & .sidebar-logo {

-      width: 32px;

-      height: 32px;

-      vertical-align: middle;

-      margin-right: 12px;

-    }

-

-    & .sidebar-title {

-      display: inline-block;

-      margin: 0;

-      color: #fff;

-      font-weight: 600;

-      line-height: 50px;

-      font-size: 14px;

-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;

-      vertical-align: middle;

-    }

-  }

-

-  &.collapse {

-    .sidebar-logo {

-      margin-right: 0px;

-    }

-  }

-}

-</style>
 
+<template>
 
+  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
 
+    <transition name="sidebarLogoFade">
 
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" :style="{background:variables.basePBG}" to="/">
 
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
 
+        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
 
+      </router-link>
 
+      <router-link v-else key="expand" class="sidebar-logo-link" :style="{background:variables.basePBG}" to="/">
 
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
 
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
 
+      </router-link>
 
+    </transition>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import variables from '@/assets/styles/variables.module.scss'
 
+import logo from '@/assets/logo/logo.png'
 
+
 
+defineProps({
 
+  collapse: {
 
+    type: Boolean,
 
+    required: true
 
+  }
 
+})
 
+
 
+const title = ref('南宁北排');
 
+const store = useStore();
 
+const sideTheme = computed(() => store.state.settings.sideTheme);
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.sidebarLogoFade-enter-active {
 
+  transition: opacity 1.5s;
 
+}
 
+
 
+.sidebarLogoFade-enter,
 
+.sidebarLogoFade-leave-to {
 
+  opacity: 0;
 
+}
 
+
 
+.sidebar-logo-container {
 
+  position: relative;
 
+  width: 100%;
 
+  height: 50px;
 
+  line-height: 50px;
 
+  background: #2b2f3a;
 
+  text-align: center;
 
+  overflow: hidden;
 
+
 
+  & .sidebar-logo-link {
 
+    height: 100%;
 
+    width: 100%;
 
+    // background: ;
 
+
 
+    & .sidebar-logo {
 
+      width: 32px;
 
+      height: 32px;
 
+      vertical-align: middle;
 
+      margin-right: 12px;
 
+    }
 
+
 
+    & .sidebar-title {
 
+      display: inline-block;
 
+      margin: 0;
 
+      color: #fff;
 
+      font-weight: 600;
 
+      line-height: 50px;
 
+      font-size: 14px;
 
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
 
+      vertical-align: middle;
 
+    }
 
+  }
 
+
 
+  &.collapse {
 
+    .sidebar-logo {
 
+      margin-right: 0px;
 
+    }
 
+  }
 
+}
 
+</style>

+ 47 - 47
src/settings.js
Ver fichero 

@@ -1,47 +1,47 @@
 
-export default {

-  /**

-   * 网页标题

-   */

-  title: import.meta.env.VITE_APP_TITLE,

-  /**

-   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light

-   */

-  sideTheme: 'theme-dark',

-  /**

-   * 是否系统布局配置

-   */

-  showSettings: false,

-

-  /**

-   * 是否显示顶部导航

-   */

-  topNav: false,

-

-  /**

-   * 是否显示 tagsView

-   */

-  tagsView: true,

-

-  /**

-   * 是否固定头部

-   */

-  fixedHeader: false,

-

-  /**

-   * 是否显示logo

-   */

-  sidebarLogo: true,

-

-  /**

-   * 是否显示动态标题

-   */

-  dynamicTitle: false,

-

-  /**

-   * @type {string | array} 'production' | ['production', 'development']

-   * @description Need show err logs component.

-   * The default is only used in the production env

-   * If you want to also use it in dev, you can pass ['production', 'development']

-   */

-  errorLog: 'production'

-}

+export default {
 
+    /**
 
+     * 网页标题
 
+     */
 
+    title: import.meta.env.VITE_APP_TITLE,
 
+    /**
 
+     * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
 
+     */
 
+    sideTheme: 'theme-dark',
 
+    /**
 
+     * 是否系统布局配置
 
+     */
 
+    showSettings: false,
 
+
 
+    /**
 
+     * 是否显示顶部导航
 
+     */
 
+    topNav: false,
 
+
 
+    /**
 
+     * 是否显示 tagsView
 
+     */
 
+    tagsView: false,
 
+
 
+    /**
 
+     * 是否固定头部
 
+     */
 
+    fixedHeader: true,
 
+
 
+    /**
 
+     * 是否显示logo
 
+     */
 
+    sidebarLogo: true,
 
+
 
+    /**
 
+     * 是否显示动态标题
 
+     */
 
+    dynamicTitle: false,
 
+
 
+    /**
 
+     * @type {string | array} 'production' | ['production', 'development']
 
+     * @description Need show err logs component.
 
+     * The default is only used in the production env
 
+     * If you want to also use it in dev, you can pass ['production', 'development']
 
+     */
 
+    errorLog: 'production'
 
+}

+ 215 - 214
src/views/login.vue
Ver fichero 

@@ -1,214 +1,215 @@
 
-<template>

-  <div class="login">

-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">

-      <h3 class="title">若依后台管理系统</h3>

-      <el-form-item prop="username">

-        <el-input

-          v-model="loginForm.username"

-          type="text"

-          size="large"

-          auto-complete="off"

-          placeholder="账号"

-        >

-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>

-        </el-input>

-      </el-form-item>

-      <el-form-item prop="password">

-        <el-input

-          v-model="loginForm.password"

-          type="password"

-          size="large"

-          auto-complete="off"

-          placeholder="密码"

-          @keyup.enter="handleLogin"

-        >

-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>

-        </el-input>

-      </el-form-item>

-      <el-form-item prop="code" v-if="captchaOnOff">

-        <el-input

-          v-model="loginForm.code"

-          size="large"

-          auto-complete="off"

-          placeholder="验证码"

-          style="width: 63%"

-          @keyup.enter="handleLogin"

-        >

-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>

-        </el-input>

-        <div class="login-code">

-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>

-        </div>

-      </el-form-item>

-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>

-      <el-form-item style="width:100%;">

-        <el-button

-          :loading="loading"

-          size="large"

-          type="primary"

-          style="width:100%;"

-          @click.prevent="handleLogin"

-        >

-          <span v-if="!loading">登 录</span>

-          <span v-else>登 录 中...</span>

-        </el-button>

-        <div style="float: right;" v-if="register">

-          <router-link class="link-type" :to="'/register'">立即注册</router-link>

-        </div>

-      </el-form-item>

-    </el-form>

-    <!--  底部  -->

-    <div class="el-login-footer">

-      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>

-    </div>

-  </div>

-</template>

-

-<script setup>

-import { getCodeImg } from "@/api/login";

-import Cookies from "js-cookie";

-import { encrypt, decrypt } from "@/utils/jsencrypt";

-

-const store = useStore();

-const router = useRouter();

-const { proxy } = getCurrentInstance();

-

-const loginForm = ref({

-  username: "admin",

-  password: "admin123",

-  rememberMe: false,

-  code: "",

-  uuid: ""

-});

-

-const loginRules = {

-  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],

-  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],

-  code: [{ required: true, trigger: "change", message: "请输入验证码" }]

-};

-

-const codeUrl = ref("");

-const loading = ref(false);

-// 验证码开关

-const captchaOnOff = ref(true);

-// 注册开关

-const register = ref(false);

-const redirect = ref(undefined);

-

-function handleLogin() {

-  proxy.$refs.loginRef.validate(valid => {

-    if (valid) {

-      loading.value = true;

-      // 勾选了需要记住密码设置在cookie中设置记住用户明和名命

-      if (loginForm.value.rememberMe) {

-        Cookies.set("username", loginForm.value.username, { expires: 30 });

-        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });

-        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });

-      } else {

-        // 否则移除

-        Cookies.remove("username");

-        Cookies.remove("password");

-        Cookies.remove("rememberMe");

-      }

-      // 调用action的登录方法

-      store.dispatch("Login", loginForm.value).then(() => {

-        router.push({ path: redirect.value || "/" });

-      }).catch(() => {

-        loading.value = false;

-        // 重新获取验证码

-        if (captchaOnOff.value) {

-          getCode();

-        }

-      });

-    }

-  });

-}

-

-function getCode() {

-  getCodeImg().then(res => {

-    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;

-    if (captchaOnOff.value) {

-      codeUrl.value = "data:image/gif;base64," + res.img;

-      loginForm.value.uuid = res.uuid;

-    }

-  });

-}

-

-function getCookie() {

-  const username = Cookies.get("username");

-  const password = Cookies.get("password");

-  const rememberMe = Cookies.get("rememberMe");

-  loginForm.value = {

-    username: username === undefined ? loginForm.value.username : username,

-    password: password === undefined ? loginForm.value.password : decrypt(password),

-    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)

-  };

-}

-

-getCode();

-getCookie();

-</script>

-

-<style lang='scss' scoped>

-.login {

-  display: flex;

-  justify-content: center;

-  align-items: center;

-  height: 100%;

-  background-image: url("../assets/images/login-background.jpg");

-  background-size: cover;

-}

-.title {

-  margin: 0px auto 30px auto;

-  text-align: center;

-  color: #707070;

-}

-

-.login-form {

-  border-radius: 6px;

-  background: #ffffff;

-  width: 400px;

-  padding: 25px 25px 5px 25px;

-  .el-input {

-    height: 40px;

-    input {

-      height: 40px;

-    }

-  }

-  .input-icon {

-    height: 39px;

-    width: 14px;

-    margin-left: 0px;

-  }

-}

-.login-tip {

-  font-size: 13px;

-  text-align: center;

-  color: #bfbfbf;

-}

-.login-code {

-  width: 33%;

-  height: 40px;

-  float: right;

-  img {

-    cursor: pointer;

-    vertical-align: middle;

-  }

-}

-.el-login-footer {

-  height: 40px;

-  line-height: 40px;

-  position: fixed;

-  bottom: 0;

-  width: 100%;

-  text-align: center;

-  color: #fff;

-  font-family: Arial;

-  font-size: 12px;

-  letter-spacing: 1px;

-}

-.login-code-img {

-  height: 40px;

-  padding-left: 12px;

-}

-</style>
 
+<template>
 
+  <div class="login">
 
+    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
 
+      <h3 class="title">南宁北排管理系统</h3>
 
+      <el-form-item prop="username">
 
+        <el-input
 
+          v-model="loginForm.username"
 
+          type="text"
 
+          size="large"
 
+          auto-complete="off"
 
+          placeholder="账号"
 
+        >
 
+          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
 
+        </el-input>
 
+      </el-form-item>
 
+      <el-form-item prop="password">
 
+        <el-input
 
+          v-model="loginForm.password"
 
+          type="password"
 
+          size="large"
 
+          auto-complete="off"
 
+          placeholder="密码"
 
+          @keyup.enter="handleLogin"
 
+        >
 
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
 
+        </el-input>
 
+      </el-form-item>
 
+      <el-form-item prop="code" v-if="captchaOnOff">
 
+        <el-input
 
+          v-model="loginForm.code"
 
+          size="large"
 
+          auto-complete="off"
 
+          placeholder="验证码"
 
+          style="width: 63%"
 
+          @keyup.enter="handleLogin"
 
+        >
 
+          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
 
+        </el-input>
 
+        <div class="login-code">
 
+          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
 
+        </div>
 
+      </el-form-item>
 
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
 
+      <el-form-item style="width:100%;">
 
+        <el-button
 
+          :loading="loading"
 
+          size="large"
 
+          type="primary"
 
+          style="width:100%;"
 
+          @click.prevent="handleLogin"
 
+        >
 
+          <span v-if="!loading">登 录</span>
 
+          <span v-else>登 录 中...</span>
 
+        </el-button>
 
+        <div style="float: right;" v-if="register">
 
+          <router-link class="link-type" :to="'/register'">立即注册</router-link>
 
+        </div>
 
+      </el-form-item>
 
+    </el-form>
 
+    <!--  底部  -->
 
+    <div class="el-login-footer">
 
+      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import { getCodeImg } from "@/api/login";
 
+import Cookies from "js-cookie";
 
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
+
 
+const store = useStore();
 
+const router = useRouter();
 
+const { proxy } = getCurrentInstance();
 
+
 
+const loginForm = ref({
 
+  username: "admin",
 
+  password: "admin123",
 
+  rememberMe: false,
 
+  code: "",
 
+  uuid: ""
 
+});
 
+
 
+const loginRules = {
 
+  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
 
+  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
 
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
 
+};
 
+
 
+const codeUrl = ref("");
 
+const loading = ref(false);
 
+// 验证码开关
 
+const captchaOnOff = ref(true);
 
+// 注册开关
 
+const register = ref(false);
 
+const redirect = ref(undefined);
 
+
 
+function handleLogin() {
 
+  proxy.$refs.loginRef.validate(valid => {
 
+    if (valid) {
 
+      loading.value = true;
 
+      // 勾选了需要记住密码设置在cookie中设置记住用户明和名命
 
+      if (loginForm.value.rememberMe) {
 
+        Cookies.set("username", loginForm.value.username, { expires: 30 });
 
+        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
 
+        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
 
+      } else {
 
+        // 否则移除
 
+        Cookies.remove("username");
 
+        Cookies.remove("password");
 
+        Cookies.remove("rememberMe");
 
+      }
 
+      // 调用action的登录方法
 
+      store.dispatch("Login", loginForm.value).then(() => {
 
+        router.push({ path: redirect.value || "/" });
 
+      }).catch(() => {
 
+        loading.value = false;
 
+        // 重新获取验证码
 
+        if (captchaOnOff.value) {
 
+          getCode();
 
+        }
 
+      });
 
+    }
 
+  });
 
+}
 
+
 
+function getCode() {
 
+  getCodeImg().then(res => {
 
+    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
 
+    if (captchaOnOff.value) {
 
+      codeUrl.value = "data:image/gif;base64," + res.img;
 
+      loginForm.value.uuid = res.uuid;
 
+    }
 
+  });
 
+}
 
+
 
+function getCookie() {
 
+  const username = Cookies.get("username");
 
+  const password = Cookies.get("password");
 
+  const rememberMe = Cookies.get("rememberMe");
 
+  loginForm.value = {
 
+    username: username === undefined ? loginForm.value.username : username,
 
+    password: password === undefined ? loginForm.value.password : decrypt(password),
 
+    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
 
+  };
 
+}
 
+
 
+getCode();
 
+getCookie();
 
+</script>
 
+
 
+<style lang='scss' scoped>
 
+.login {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  height: 100%;
 
+  background-image: url("../assets/images/bg.webp");
 
+  background-size: cover;
 
+}
 
+.title {
 
+  margin: 0px auto 30px auto;
 
+  text-align: center;
 
+  color: #707070;
 
+}
 
+
 
+.login-form {
 
+  border-radius: 6px;
 
+  background: #ffffff;
 
+  width: 400px;
 
+  padding: 25px 25px 5px 25px;
 
+  .el-input {
 
+    height: 40px;
 
+    input {
 
+      height: 40px;
 
+    }
 
+  }
 
+  .input-icon {
 
+    height: 39px;
 
+    width: 14px;
 
+    margin-left: 0px;
 
+  }
 
+}
 
+.login-tip {
 
+  font-size: 13px;
 
+  text-align: center;
 
+  color: #bfbfbf;
 
+}
 
+.login-code {
 
+  width: 33%;
 
+  height: 40px;
 
+  float: right;
 
+  img {
 
+    cursor: pointer;
 
+    vertical-align: middle;
 
+  }
 
+}
 
+.el-login-footer {
 
+  display: none;
 
+  height: 40px;
 
+  line-height: 40px;
 
+  position: fixed;
 
+  bottom: 0;
 
+  width: 100%;
 
+  text-align: center;
 
+  color: #fff;
 
+  font-family: Arial;
 
+  font-size: 12px;
 
+  letter-spacing: 1px;
 
+}
 
+.login-code-img {
 
+  height: 40px;
 
+  padding-left: 12px;
 
+}
 
+</style>

+ 218 - 218
src/views/register.vue
Ver fichero 

@@ -1,218 +1,218 @@
 
-<template>

-  <div class="register">

-    <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">

-      <h3 class="title">若依后台管理系统</h3>

-      <el-form-item prop="username">

-        <el-input 

-          v-model="registerForm.username" 

-          type="text" 

-          size="large" 

-          auto-complete="off" 

-          placeholder="账号"

-        >

-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>

-        </el-input>

-      </el-form-item>

-      <el-form-item prop="password">

-        <el-input

-          v-model="registerForm.password"

-          type="password"

-          size="large" 

-          auto-complete="off"

-          placeholder="密码"

-          @keyup.enter="handleRegister"

-        >

-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>

-        </el-input>

-      </el-form-item>

-      <el-form-item prop="confirmPassword">

-        <el-input

-          v-model="registerForm.confirmPassword"

-          type="password"

-          size="large" 

-          auto-complete="off"

-          placeholder="确认密码"

-          @keyup.enter="handleRegister"

-        >

-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>

-        </el-input>

-      </el-form-item>

-      <el-form-item prop="code" v-if="captchaOnOff">

-        <el-input

-          size="large" 

-          v-model="registerForm.code"

-          auto-complete="off"

-          placeholder="验证码"

-          style="width: 63%"

-          @keyup.enter="handleRegister"

-        >

-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>

-        </el-input>

-        <div class="register-code">

-          <img :src="codeUrl" @click="getCode" class="register-code-img"/>

-        </div>

-      </el-form-item>

-      <el-form-item style="width:100%;">

-        <el-button

-          :loading="loading"

-          size="large" 

-          type="primary"

-          style="width:100%;"

-          @click.prevent="handleRegister"

-        >

-          <span v-if="!loading">注 册</span>

-          <span v-else>注 册 中...</span>

-        </el-button>

-        <div style="float: right;">

-          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>

-        </div>

-      </el-form-item>

-    </el-form>

-    <!--  底部  -->

-    <div class="el-register-footer">

-      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>

-    </div>

-  </div>

-</template>

-

-<script setup>

-import { ElMessageBox } from "element-plus";

-import { getCodeImg, register } from "@/api/login";

-

-const router = useRouter();

-const { proxy } = getCurrentInstance();

-

-const registerForm = ref({

-  username: "",

-  password: "",

-  confirmPassword: "",

-  code: "",

-  uuid: ""

-});

-

-const equalToPassword = (rule, value, callback) => {

-  if (registerForm.value.password !== value) {

-    callback(new Error("两次输入的密码不一致"));

-  } else {

-    callback();

-  }

-};

-

-const registerRules = {

-  username: [

-    { required: true, trigger: "blur", message: "请输入您的账号" },

-    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }

-  ],

-  password: [

-    { required: true, trigger: "blur", message: "请输入您的密码" },

-    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }

-  ],

-  confirmPassword: [

-    { required: true, trigger: "blur", message: "请再次输入您的密码" },

-    { required: true, validator: equalToPassword, trigger: "blur" }

-  ],

-  code: [{ required: true, trigger: "change", message: "请输入验证码" }]

-};

-

-const codeUrl = ref("");

-const loading = ref(false);

-const captchaOnOff = ref(true);

-

-function handleRegister() {

-  proxy.$refs.registerRef.validate(valid => {

-    if (valid) {

-      loading.value = true;

-      register(registerForm.value).then(res => {

-        const username = registerForm.value.username;

-        ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {

-          dangerouslyUseHTMLString: true,

-          type: "success",

-        }).then(() => {

-          router.push("/login");

-        }).catch(() => {});

-      }).catch(() => {

-        loading.value = false;

-        if (captchaOnOff) {

-          getCode();

-        }

-      });

-    }

-  });

-}

-

-function getCode() {

-  getCodeImg().then(res => {

-    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;

-    if (captchaOnOff.value) {

-      codeUrl.value = "data:image/gif;base64," + res.img;

-      registerForm.value.uuid = res.uuid;

-    }

-  });

-}

-

-getCode();

-</script>

-

-<style lang='scss' scoped>

-.register {

-  display: flex;

-  justify-content: center;

-  align-items: center;

-  height: 100%;

-  background-image: url("../assets/images/login-background.jpg");

-  background-size: cover;

-}

-.title {

-  margin: 0px auto 30px auto;

-  text-align: center;

-  color: #707070;

-}

-

-.register-form {

-  border-radius: 6px;

-  background: #ffffff;

-  width: 400px;

-  padding: 25px 25px 5px 25px;

-  .el-input {

-    height: 40px;

-    input {

-      height: 40px;

-    }

-  }

-  .input-icon {

-    height: 39px;

-    width: 14px;

-    margin-left: 0px;

-  }

-}

-.register-tip {

-  font-size: 13px;

-  text-align: center;

-  color: #bfbfbf;

-}

-.register-code {

-  width: 33%;

-  height: 40px;

-  float: right;

-  img {

-    cursor: pointer;

-    vertical-align: middle;

-  }

-}

-.el-register-footer {

-  height: 40px;

-  line-height: 40px;

-  position: fixed;

-  bottom: 0;

-  width: 100%;

-  text-align: center;

-  color: #fff;

-  font-family: Arial;

-  font-size: 12px;

-  letter-spacing: 1px;

-}

-.register-code-img {

-  height: 40px;

-  padding-left: 12px;

-}

-</style>

+<template>
 
+  <div class="register">
 
+    <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
 
+      <h3 class="title">南宁北排管理系统</h3>
 
+      <el-form-item prop="username">
 
+        <el-input
 
+          v-model="registerForm.username"
 
+          type="text"
 
+          size="large"
 
+          auto-complete="off"
 
+          placeholder="账号"
 
+        >
 
+          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
 
+        </el-input>
 
+      </el-form-item>
 
+      <el-form-item prop="password">
 
+        <el-input
 
+          v-model="registerForm.password"
 
+          type="password"
 
+          size="large"
 
+          auto-complete="off"
 
+          placeholder="密码"
 
+          @keyup.enter="handleRegister"
 
+        >
 
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
 
+        </el-input>
 
+      </el-form-item>
 
+      <el-form-item prop="confirmPassword">
 
+        <el-input
 
+          v-model="registerForm.confirmPassword"
 
+          type="password"
 
+          size="large"
 
+          auto-complete="off"
 
+          placeholder="确认密码"
 
+          @keyup.enter="handleRegister"
 
+        >
 
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
 
+        </el-input>
 
+      </el-form-item>
 
+      <el-form-item prop="code" v-if="captchaOnOff">
 
+        <el-input
 
+          size="large"
 
+          v-model="registerForm.code"
 
+          auto-complete="off"
 
+          placeholder="验证码"
 
+          style="width: 63%"
 
+          @keyup.enter="handleRegister"
 
+        >
 
+          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
 
+        </el-input>
 
+        <div class="register-code">
 
+          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
 
+        </div>
 
+      </el-form-item>
 
+      <el-form-item style="width:100%;">
 
+        <el-button
 
+          :loading="loading"
 
+          size="large"
 
+          type="primary"
 
+          style="width:100%;"
 
+          @click.prevent="handleRegister"
 
+        >
 
+          <span v-if="!loading">注 册</span>
 
+          <span v-else>注 册 中...</span>
 
+        </el-button>
 
+        <div style="float: right;">
 
+          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
 
+        </div>
 
+      </el-form-item>
 
+    </el-form>
 
+    <!--  底部  -->
 
+    <div class="el-register-footer">
 
+      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import { ElMessageBox } from "element-plus";
 
+import { getCodeImg, register } from "@/api/login";
 
+
 
+const router = useRouter();
 
+const { proxy } = getCurrentInstance();
 
+
 
+const registerForm = ref({
 
+  username: "",
 
+  password: "",
 
+  confirmPassword: "",
 
+  code: "",
 
+  uuid: ""
 
+});
 
+
 
+const equalToPassword = (rule, value, callback) => {
 
+  if (registerForm.value.password !== value) {
 
+    callback(new Error("两次输入的密码不一致"));
 
+  } else {
 
+    callback();
 
+  }
 
+};
 
+
 
+const registerRules = {
 
+  username: [
 
+    { required: true, trigger: "blur", message: "请输入您的账号" },
 
+    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
 
+  ],
 
+  password: [
 
+    { required: true, trigger: "blur", message: "请输入您的密码" },
 
+    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }
 
+  ],
 
+  confirmPassword: [
 
+    { required: true, trigger: "blur", message: "请再次输入您的密码" },
 
+    { required: true, validator: equalToPassword, trigger: "blur" }
 
+  ],
 
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
 
+};
 
+
 
+const codeUrl = ref("");
 
+const loading = ref(false);
 
+const captchaOnOff = ref(true);
 
+
 
+function handleRegister() {
 
+  proxy.$refs.registerRef.validate(valid => {
 
+    if (valid) {
 
+      loading.value = true;
 
+      register(registerForm.value).then(res => {
 
+        const username = registerForm.value.username;
 
+        ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
 
+          dangerouslyUseHTMLString: true,
 
+          type: "success",
 
+        }).then(() => {
 
+          router.push("/login");
 
+        }).catch(() => {});
 
+      }).catch(() => {
 
+        loading.value = false;
 
+        if (captchaOnOff) {
 
+          getCode();
 
+        }
 
+      });
 
+    }
 
+  });
 
+}
 
+
 
+function getCode() {
 
+  getCodeImg().then(res => {
 
+    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
 
+    if (captchaOnOff.value) {
 
+      codeUrl.value = "data:image/gif;base64," + res.img;
 
+      registerForm.value.uuid = res.uuid;
 
+    }
 
+  });
 
+}
 
+
 
+getCode();
 
+</script>
 
+
 
+<style lang='scss' scoped>
 
+.register {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  height: 100%;
 
+  background-image: url("../assets/images/login-background.jpg");
 
+  background-size: cover;
 
+}
 
+.title {
 
+  margin: 0px auto 30px auto;
 
+  text-align: center;
 
+  color: #707070;
 
+}
 
+
 
+.register-form {
 
+  border-radius: 6px;
 
+  background: #ffffff;
 
+  width: 400px;
 
+  padding: 25px 25px 5px 25px;
 
+  .el-input {
 
+    height: 40px;
 
+    input {
 
+      height: 40px;
 
+    }
 
+  }
 
+  .input-icon {
 
+    height: 39px;
 
+    width: 14px;
 
+    margin-left: 0px;
 
+  }
 
+}
 
+.register-tip {
 
+  font-size: 13px;
 
+  text-align: center;
 
+  color: #bfbfbf;
 
+}
 
+.register-code {
 
+  width: 33%;
 
+  height: 40px;
 
+  float: right;
 
+  img {
 
+    cursor: pointer;
 
+    vertical-align: middle;
 
+  }
 
+}
 
+.el-register-footer {
 
+  height: 40px;
 
+  line-height: 40px;
 
+  position: fixed;
 
+  bottom: 0;
 
+  width: 100%;
 
+  text-align: center;
 
+  color: #fff;
 
+  font-family: Arial;
 
+  font-size: 12px;
 
+  letter-spacing: 1px;
 
+}
 
+.register-code-img {
 
+  height: 40px;
 
+  padding-left: 12px;
 
+}
 
+</style>