update 重写管理端默认效果

8 months ago · 7090c6e4c7
parent e97bf21780
commit 7090c6e4c7
8 changed files with 144 additions and 32 deletions
--- a/admin-ui/.env
+++ b/admin-ui/.env
@ -1,6 +1,6 @@
 # 页面标题
-VITE_APP_TITLE = 某某系统
+VITE_APP_TITLE = 管理中心

 VITE_APP_COPY = Copyright © 2023 xxx.xxx.cn All Rights Reserved.

-VITE_APP_COLOR = #257fbd
+VITE_APP_COLOR = "#fd4772"
--- a/admin-ui/src/assets/css/login.scss
+++ b/admin-ui/src/assets/css/login.scss
@ -11,7 +11,7 @@ body {
  --left-img: url(../images/login.png);


-  background-color: var(--bg);
+  background-image: linear-gradient(-25deg, #FFF0 30%, #FFF2 50%, #FFF0 70%), linear-gradient(to top, var(--bg),var(--bg));
  width: 100%;
  height: 100%;
  font-size: var(--size);
@ -19,6 +19,17 @@ body {
  justify-content: center;
  align-items: center;
  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle, #0001 .1em, #0000 1em,#0000 100%);
+    background-size: 2em 2em;
+    filter: url(#WEffectNoiseBgFilter);
+    transform: scale(2);
+  }

  &>.w-login-outer {
    position: relative;
@ -34,13 +45,24 @@ body {
    box-shadow: 0 0 1em #0003;

    &> :first-child {
-      background-image: var(--left-img), linear-gradient(to bottom,var(--el-color-primary-light-9) 15%, var(--el-color-primary-light-8) 50%, var(--el-color-primary-light-3));
-      background-size: 70% auto, 100% 100%;
-      background-position: center center;
-      background-repeat: no-repeat;
+
      position: relative;
      box-shadow: -.3em 0 .6em #0001 inset;
+      background-image: radial-gradient(circle, #FFFFFF16 1px, #FFF0 1px,#FFF0 100%) ,linear-gradient(to bottom, var(--el-color-primary-light-9) 15%, var(--el-color-primary-light-8) 50%, var(--el-color-primary-light-3));
+      background-size: 5px 5px, auto;
      overflow: hidden;
+      opacity: .85;
+
+      &::after {
+        position: absolute;
+        inset: 0;
+        content:'';
+        background-image: var(--left-img);
+        background-size: 70% auto;
+        background-position: center;
+        background-repeat: no-repeat;
+        z-index: 2;
+      }

      &::before {
        position: absolute;
@ -49,12 +71,21 @@ body {
        top: calc(50% - 2em);
        box-shadow: -.3em .3em .6em #0001;
        transform: scaleX(.8) rotate(45deg);
-
+        z-index: 3;
        width: 4em;
        height: 4em;
        content: '';
      }

+      &>div {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        background-color: #0000;
+        background-image: radial-gradient(circle, #FFFFFF16 1px, #FFF0 1px,#FFF0 100%);
+        background-size: 5px 5px;
+      }
+
    }

    .w-login-form {
--- a/admin-ui/src/assets/styles/sidebar.scss
+++ b/admin-ui/src/assets/styles/sidebar.scss
@ -24,9 +24,51 @@
    left: 0;
    z-index: 1001;
    overflow: hidden;
+    text-shadow: .1em .1em 0 #000;
+
+    li {
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: #0003;
+        width: 100%;
+        height: 0;
+      }
+    }
+
+    &.theme-light {
+      text-shadow: .1em .1em 0 #FFF;
+
+      li {
+
+        &::before {
+          background-color: #FFF5;
+        }
+      }
+    }
+
    // -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
    // box-shadow: 2px 0 6px rgba(0,21,41,.35);

+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      // background-color: red;
+      background-image: radial-gradient(circle, var(--noise-color, #FFFFFF06) .5rem, #0000 1rem, #0000 100%);
+      background-size: 2rem 2rem;
+      filter: url(#WEffectNoiseBgFilter);
+      transform: scale(2);
+    }
+
+    &.theme-light::before {
+      --noise-color: #00000006;
+    }
+
    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
@ -70,7 +112,8 @@
      width: 100% !important;
    }

-    .el-menu-item, .menu-title {
+    .el-menu-item,
+    .menu-title {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
@ -90,8 +133,13 @@

    & .theme-dark .is-active>.el-sub-menu__title {
      color: $base-menu-color-active !important;
+
    }

+    // .el-menu-item.is-active {
+    //   --el-menu-active-color: #FFF;
+    // }
+
    & .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      min-width: $base-sidebar-width !important;
@ -147,6 +195,7 @@
    }

    .el-menu--collapse {
+
      .el-sub-menu {
        &>.el-sub-menu__title {
          &>span {
@ -156,6 +205,7 @@
            visibility: hidden;
            display: inline-block;
          }
+
          &>i {
            height: 0;
            width: 0;
@ -222,6 +272,7 @@
    max-height: 100vh;
    overflow-y: auto;

+
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }
@ -235,4 +286,7 @@
      border-radius: 20px;
    }
  }
+
+
+
 }
--- a/admin-ui/src/assets/styles/variables.module.scss
+++ b/admin-ui/src/assets/styles/variables.module.scss
@ -9,17 +9,20 @@ $yellow: #FEC171;
 $panGreen: #30B08F;

 // 默认菜单主题风格
-$base-menu-color: #bfcbd9;
-$base-menu-color-active: #f4f4f5;
-$base-menu-background: hsl(210, 63%, 30%);
-$base-logo-title-color: #ffffff;
+$base-menu-color: #FFFC;
+$base-menu-color-active: #FFFE;
+// $base-menu-background: hsl(210, 63%, 30%);
+// $base-menu-background: #222;
+$base-menu-background: #0000;
+$base-logo-title-color: #FFFE;

-$base-menu-light-color: rgba(0, 0, 0, 0.7);
-$base-menu-light-background: #ffffff;
-$base-logo-light-title-color: #001529;
+$base-menu-light-color: #0009;
+// $base-menu-light-background: #F1F1F1;
+$base-menu-light-background: #0000;
+$base-logo-light-title-color: #000C;

-$base-sub-menu-background: hsl(210, 63%, 25%);
-$base-sub-menu-hover: hsl(210, 63%, 20%);
+$base-sub-menu-background: #0006;
+$base-sub-menu-hover: #0001;

 // 自定义暗色菜单风格
 /**
--- a/admin-ui/src/layout/components/Sidebar/index.vue
+++ b/admin-ui/src/layout/components/Sidebar/index.vue
@ -1,15 +1,26 @@
 <template>
-  <div style="box-shadow: 0 0 .5rem #0001;" :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div style="box-shadow: 0 0 .5rem #0001;" :class="[showLogo?'has-logo':'no-logo',sideTheme]" :style="{ backgroundColor: sideTheme === 'theme-dark' ? 'var(--admin-menu-bg-dark,hsl(206, 97%, 12%))' : 'var(--admin-menu-bg-light,hsl(206, 97%, 96%))' }">
+    <svg style="display: none;">
+      <defs>
+        <filter id="WEffectNoiseBgFilter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
+          primitiveUnits="userSpaceOnUse">
+          <feTurbulence type="turbulence" baseFrequency="1 1" numOctaves="100" seed="100" stitchTiles="stitch"
+            x="-100%" y="-100%" width="300%" height="300%" result="turbulence" />
+          <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="A"
+            x="-100%" y="-100%" width="300%" height="300%" result="displacementMap" />
+        </filter>
+      </defs>
+    </svg>
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
-        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+        :background-color="sideTheme === 'theme-dark' && isCollapse?'var(--admin-menu-bg-dark,hsl(206, 97%, 12%))':'#0000'"
        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
        :unique-opened="true"
        :active-text-color="theme"
-        :collapse-transition="false"
+        :collapse-transition="true"
        mode="vertical"
      >
        <sidebar-item
--- a/admin-ui/src/settings.js
+++ b/admin-ui/src/settings.js
@ -6,7 +6,7 @@ export default {
  /**
   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
   */
-  sideTheme: 'theme-light',
+  sideTheme: 'theme-dark',
  /**
   * 是否系统布局配置
   */
--- a/admin-ui/src/views/login.vue
+++ b/admin-ui/src/views/login.vue
@ -1,8 +1,20 @@
 <template>
  <div class="w-login-content">
+    <svg style="display: none;">
+      <defs>
+        <filter id="WEffectNoiseBgFilter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
+          primitiveUnits="userSpaceOnUse">
+          <feTurbulence type="turbulence" baseFrequency=".1 .1" numOctaves="100" seed="100" stitchTiles="stitch"
+            x="-100%" y="-100%" width="300%" height="300%" result="turbulence" />
+          <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="A"
+            x="-100%" y="-100%" width="300%" height="300%" result="displacementMap" />
+        </filter>
+      </defs>
+    </svg>

    <div class="w-login-outer">
-      <div></div>
+      <div>
+      </div>
      <div class="w-login-form">
        <div>你好!<br />欢迎登录{{ title }}</div>
        <div><input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" /></div>
@ -22,10 +34,10 @@
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
-        <div style="text-align: right; position: absolute; top: 0; right: 1rem;"><el-link :underline="false" type="primary" href="/bi/">展示大屏</el-link></div>
        <div class="copy">{{ copy }} </div>
      </div>
    </div>
+
  </div>
 </template>

@ -44,6 +56,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
 const title = import.meta.env.VITE_APP_TITLE;
 const copy = import.meta.env.VITE_APP_COPY;
 const color = import.meta.env.VITE_APP_COLOR;
+console.debug("login", title, copy, color);

 onMounted(() => {
  useSettingsStore().title = "登录"
--- a/admin-ui/vite.config.mjs
+++ b/admin-ui/vite.config.mjs
@ -49,7 +49,7 @@ export default defineConfig(({ mode, command }) => {
          changeOrigin: true
        },
        '/files': {
-          target: 'http://192.168.3.222:9000',
+          target: 'http://192.168.3.56:9000',
          changeOrigin: true
        }
      }