样式

2024-07-02 19:02:30 +08:00 · 2024-07-02 19:02:30 +08:00 · 469001e171
commit 469001e171
parent 299823ab2a
13 changed files with 209 additions and 38 deletions
--- a/ui/dasadmin/.env.development
+++ b/ui/dasadmin/.env.development
@ -8,7 +8,7 @@ VITE_BASE_PATH = './'
 # 本地
 # VITE_APP_PROXY=[["/api","http://192.168.130.12:8080/api"]]
 # 线上
-VITE_APP_PROXY=[["/api","http://192.168.109.195:8080/api"]]
+VITE_APP_PROXY=[["/api","https://test.jsspisoft.com/api"]]



--- a/ui/dasadmin/src/layouts/backend/components/aside.vue
+++ b/ui/dasadmin/src/layouts/backend/components/aside.vue
@ -37,7 +37,7 @@ const menuWidth = computed(() => config.menuWidth())
 }
 .layout-aside-Classic,
 .layout-aside-Double {
-    background: var(--ba-bg-color-overlay);
+    background-image: linear-gradient(90deg, #eaf6ff 0%, #fbfdff 100%) !important;
    margin: 0;
    height: 100vh;
    overflow: hidden;
--- a/ui/dasadmin/src/layouts/backend/components/header.vue
+++ b/ui/dasadmin/src/layouts/backend/components/header.vue
@ -24,5 +24,6 @@ const navTabs = useNavTabs()
 .layout-header {
    height: auto;
    padding: 0;
+    background-color: transparent;
 }
 </style>
--- a/ui/dasadmin/src/layouts/backend/components/logo.vue
+++ b/ui/dasadmin/src/layouts/backend/components/logo.vue
@ -1,10 +1,10 @@
 <template>
    <div class="layout-logo">
-        <img v-if="!config.layout.menuCollapse" class="logo-img" src="~assets/logo.png" alt="logo" />
-        <div v-if="!config.layout.menuCollapse" :style="{ color: config.getColorVal('menuActiveColor') }" class="website-name">
+        <!-- <img v-if="!config.layout.menuCollapse" class="logo-img" src="~assets/logo.png" alt="logo" /> -->
+        <!-- <div v-if="!config.layout.menuCollapse" :style="{ color: '#4E5969' }" class="website-name">
            {{ siteConfig.siteName }}
-        </div>
-        <Icon
+        </div> -->
+        <!-- <Icon
            v-if="config.layout.layoutMode != 'Streamline'"
            @click="onMenuCollapse"
            :name="config.layout.menuCollapse ? 'fa fa-indent' : 'fa fa-dedent'"
@ -12,7 +12,7 @@
            :color="config.getColorVal('menuActiveColor')"
            size="18"
            class="fold"
-        />
+        /> -->
    </div>
 </template>

@ -25,7 +25,7 @@ import { BEFORE_RESIZE_LAYOUT } from '/@/stores/constant/cacheKey'
 import { setNavTabsWidth } from '/@/utils/layout'

 const config = useConfig()
-const siteConfig = useSiteConfig()
+// const siteConfig = useSiteConfig()

 const onMenuCollapse = function () {
    if (config.layout.shrink && !config.layout.menuCollapse) {
@ -49,20 +49,21 @@ const onMenuCollapse = function () {
 <style scoped lang="scss">
 .layout-logo {
    width: 100%;
-    height: 50px;
+    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px;
-    background: v-bind('config.layout.layoutMode != "Streamline" ?  config.getColorVal("menuTopBarBackground"):"transparent"');
+    background-image: linear-gradient(170deg, #eaf6ff 0%, #fbfdff 94%);
+    box-shadow: 0px 0px 20px 0px rgba(0, 100, 170, 0.09);
 }
 .logo-img {
    width: 28px;
 }
 .website-name {
    display: block;
-    width: 180px;
+    width: 200px;
    padding-left: 4px;
    font-size: var(--el-font-size-extra-large);
    font-weight: 600;
--- a/ui/dasadmin/src/layouts/backend/components/menus/menuTree.vue
+++ b/ui/dasadmin/src/layouts/backend/components/menus/menuTree.vue
@ -75,9 +75,20 @@ const onClickSubMenu = (menu: RouteRecordRaw) => {
    flex-shrink: 0;
 }
 .is-active > .icon {
-    color: var(--el-menu-active-color) !important;
+    color: #ffffff !important;
+}
+.is-active {
+    :deep(div) {
+        background-color: rgba(0, 100, 170, 0.15) !important;
+        color: #0064aa !important;
+        border-radius: 10px;
+        font-weight: 600;
+        > .icon {
+            color: #0064aa !important;
+        }
+    }
 }
 .el-menu-item.is-active {
-    background-color: v-bind('config.getColorVal("menuActiveBackground")');
+    background-color: #0064aa;
 }
 </style>
--- a/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
+++ b/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
@ -67,13 +67,14 @@ onBeforeRouteUpdate((to) => {
 <style>
 .vertical-menus-scrollbar {
    height: v-bind(verticalMenusScrollbarHeight);
-    background-color: v-bind('config.getColorVal("menuBackground")');
 }
 .layouts-menu-vertical {
    border: 0;
-    padding-bottom: 30px;
-    --el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
-    --el-menu-text-color: v-bind('config.getColorVal("menuColor")');
-    --el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
+    padding: 0 20px 30px 20px;
+    --el-menu-bg-color: transparent;
+    --el-menu-active-color: #ffffff;
+    li {
+        border-radius: 10px;
+    }
 }
 </style>
--- a/ui/dasadmin/src/layouts/backend/components/navBar/classic.vue
+++ b/ui/dasadmin/src/layouts/backend/components/navBar/classic.vue
@ -3,9 +3,10 @@
        <div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
            <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')" size="18" />
        </div>
-        <NavTabs v-if="!config.layout.shrink" ref="layoutNavTabsRef" />
+
        <NavMenus />
    </div>
+    <div class="nav-route"><NavTabs v-if="!config.layout.shrink" ref="layoutNavTabsRef" /></div>
 </template>

 <script setup lang="ts">
@ -28,7 +29,7 @@ const onMenuCollapse = () => {
 <style scoped lang="scss">
 .nav-bar {
    display: flex;
-    height: 50px;
+    height: 60px;
    width: 100%;
    background-color: v-bind('config.getColorVal("headerBarBackground")');
    :deep(.nav-tabs) {
@ -72,6 +73,68 @@ const onMenuCollapse = () => {
        }
    }
 }
+.nav-route {
+    display: flex;
+    height: 48px;
+    width: 100%;
+    background-color: transparent;
+    line-height: 48px;
+    margin: 20px 0px;
+    :deep(.nav-tabs) {
+        display: flex;
+        height: 100%;
+        position: relative;
+        background-color: #ffffff;
+        margin-right: 0px !important;
+        border-radius: 6px;
+        .ba-nav-tab {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 20px;
+            cursor: pointer;
+            z-index: 1;
+            height: 100%;
+            user-select: none;
+            color: v-bind('config.getColorVal("headerBarTabColor")');
+            transition: all 0.2s;
+            -webkit-transition: all 0.2s;
+            .close-icon {
+                padding: 2px;
+                margin: 2px 0 0 4px;
+            }
+            .close-icon:hover {
+                background: var(--ba-color-primary-light);
+                color: var(--el-border-color) !important;
+                border-radius: 50%;
+            }
+            &.active {
+                color: #0064aa;
+                &::before {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    background: #0064aa;
+                    height: 4px;
+                    width: 100%;
+                    border-radius: 8px 8px 0 0;
+                }
+            }
+            &:hover {
+                color: #0064aa;
+                background-color: transparent;
+            }
+        }
+        .nav-tabs-active-box {
+            position: absolute;
+            height: 50px;
+            background-color: transparent;
+            transition: all 0.2s;
+            -webkit-transition: all 0.2s;
+        }
+    }
+}
 .unfold {
    align-self: center;
    padding-left: var(--ba-main-space);
--- a/ui/dasadmin/src/layouts/backend/container/classic.vue
+++ b/ui/dasadmin/src/layouts/backend/container/classic.vue
@ -1,6 +1,12 @@
 <template>
    <el-container class="layout-container">
        <Aside />
+        <div class="layout-logo">
+            <img class="logo-img" src="~assets/logo.png" alt="logo" />
+            <div :style="{ color: '#4E5969' }" class="website-name">
+                {{ siteConfig.siteName }}
+            </div>
+        </div>
        <el-container class="content-wrapper">
            <Header />
            <Main />
@ -15,6 +21,8 @@ import Header from '/@/layouts/backend/components/header.vue'
 import Main from '/@/layouts/backend/router-view/main.vue'
 import CloseFullScreen from '/@/layouts/backend/components/closeFullScreen.vue'
 import { useNavTabs } from '/@/stores/navTabs'
+import { useSiteConfig } from '/@/stores/siteConfig'
+const siteConfig = useSiteConfig()
 const navTabs = useNavTabs()
 </script>

@ -27,5 +35,28 @@ const navTabs = useNavTabs()
    flex-direction: column;
    width: 100%;
    height: 100%;
+    padding: 0 20px;
+}
+.layout-logo {
+    position: absolute;
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 10px;
+    background-image: linear-gradient(170deg, #eaf6ff 0%, #fbfdff 94%);
+    box-shadow: 0px 0px 20px 0px rgba(0, 100, 170, 0.09);
+}
+.logo-img {
+    width: 28px;
+}
+.website-name {
+    padding-left: 4px;
+    font-size: var(--el-font-size-extra-large);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 </style>
--- a/ui/dasadmin/src/layouts/backend/router-view/main.vue
+++ b/ui/dasadmin/src/layouts/backend/router-view/main.vue
@ -91,6 +91,8 @@ watch(
    overflow: hidden;
    width: 100%;
    height: 100%;
+    background-color: #ffffff;
+    border-radius: 6px;
 }
 .layout-main-scrollbar {
    width: 100%;
--- a/ui/dasadmin/src/stores/config.ts
+++ b/ui/dasadmin/src/stores/config.ts
@ -12,7 +12,7 @@ export const useConfig = defineStore(
            // 是否收缩布局(小屏设备)
            shrink: false,
            // 后台布局方式，可选值<Default|Classic|Streamline|Double>
-            layoutMode: 'Default',
+            layoutMode: 'Classic',
            // 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
            mainAnimation: 'slide-right',
            // 是否暗黑模式
@ -24,7 +24,7 @@ export const useConfig = defineStore(
            // 侧边菜单文字颜色
            menuColor: ['#303133', '#CFD3DC'],
            // 侧边菜单激活项背景色
-            menuActiveBackground: ['#ffffff', '#1d1e1f'],
+            menuActiveBackground: ['#0064AA', '#0064AA'],
            // 侧边菜单激活项文字色
            menuActiveColor: ['#0064AA', '#3375b9'],
            // 侧边菜单顶栏背景色
--- a/ui/dasadmin/src/stores/siteConfig.ts
+++ b/ui/dasadmin/src/stores/siteConfig.ts
@ -5,7 +5,7 @@ import type { SiteConfig } from '/@/stores/interface'
 export const useSiteConfig = defineStore('siteConfig', {
    state: (): SiteConfig => {
        return {
-            siteName: '',
+            siteName: '润阳风电场数据采集系统',
            recordNumber: '',
            version: '',
            cdnUrl: '',
--- a/ui/dasadmin/src/styles/var.scss
+++ b/ui/dasadmin/src/styles/var.scss
@ -1,22 +1,75 @@
+@use 'sass:math';
@use 'sass:map';

@use 'mixins' as *;

-@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': #003261,
+$types: primary, success, warning, danger, error, info;
+
+$colors: (
+    ) !default;
+$colors: map.deep-merge(( // 白色和黑色作为基本颜色选项
+            'white': #ffffff,
+            'black': #000000,
+            // 为每种主题类型定义一个基础颜色
+            'primary': ('base': #0064AA,
            ),
-        'success': ('base': #21ba45,
+            'success': ('base': #67c23a,
            ),
-        'warning': ('base': #f2711c,
+            'warning': ('base': #e6a23c,
            ),
-        'danger': ('base': #db2828,
+            'error': ('base': #f56c6c,
            ),
-        'error': ('base': #db2828,
-        ),
-        'info': ('base': #42b8dd,
+            'info': ('base': #909399,
            ),
        ),
-    $button-padding-horizontal: ('default': 80px,
-    ));
+        $colors
+);
+
+// 主色调
+$color-white: map.get($colors, 'white') !default; // 白色
+$color-black: map.get($colors, 'black') !default; // 黑色
+
+// 应用场景颜色
+$color-primary: map.get($colors, 'primary', 'base') !default; // 主要颜色，默认使用'base'色调
+$color-success: map.get($colors, 'success', 'base') !default; // 成功状态颜色，默认使用'base'色调
+$color-warning: map.get($colors, 'warning', 'base') !default; // 警告状态颜色，默认使用'base'色调
+$color-error: map.get($colors, 'error', 'base') !default; // 错误状态颜色，默认使用'base'色调
+$color-info: map.get($colors, 'info', 'base') !default; // 信息状态颜色，默认使用'base'色调
+
+// @mixin set-color-mix-level($type,
+//     $number,
+//     $mode: 'light',
+//     $mix-color: $color-white) {
+//     $colors: map.deep-merge(($type: ('#{$mode}-#{$number}': mix($mix-color,
+//                     map.get($colors, $type, 'base'),
+//                     math.percentage(math.div($number, 10))),
+//             ),
+//         ),
+//         $colors ) !global;
+// }
+
+// @mixin set-css-color-type($colors, $type) {
+//     @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
+
+//     @each $i in (3, 5, 7, 8, 9) {
+//         @include set-css-var-value(('color', $type, 'light', $i),
+//             map.get($colors, $type, 'light-#{$i}'));
+//     }
+
+//     @include set-css-var-value(('color', $type, 'dark-2'),
+//         map.get($colors, $type, 'dark-2'));
+// }
+
+// @each $type in $types {
+//     @for $i from 1 through 9 {
+//         @include set-color-mix-level($type, $i, 'light', $color-white);
+//     }
+// }
+
+// // --el-color-primary-dark-2
+// @each $type in $types {
+//     @include set-color-mix-level($type, 2, 'dark', $color-black);
+// }

 // 后台主体窗口左右间距
 $main-space: 16px;
@ -39,7 +92,15 @@ $border-color: map.merge(('': #f6f6f6,
        $border-color
 );

+
+
 :root {
+    --el-color-primary: $color-primary !important;
+
+    // @each $type in $types {
+    //     @include set-css-color-type($colors, $type);
+    // }
+
    @include set-css-var-value('main-space', $main-space);
    @include set-css-var-value('color-primary-light', $primary-light);

--- a/ui/dasadmin/src/utils/layout.ts
+++ b/ui/dasadmin/src/utils/layout.ts
@ -12,7 +12,7 @@ export function mainHeight(extra = 0): CSSProperties {
    let height = extra
    const adminLayoutMainExtraHeight: anyObj = {
        Default: 70,
-        Classic: 50,
+        Classic: 148,
        Streamline: 60,
    }
    if (isAdminApp()) {