sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式

Browse Source
This commit is contained in:
刘玉霞 2024-07-02 19:02:30 +08:00
parent 299823ab2a
commit 469001e171
13 changed files with 209 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/dasadmin/.env.development
View File

@ -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"]]

2
ui/dasadmin/src/layouts/backend/components/aside.vue
View File

@ -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;

1
ui/dasadmin/src/layouts/backend/components/header.vue
View File

@ -24,5 +24,6 @@ const navTabs = useNavTabs()
.layout-header {
height: auto;
padding: 0;
background-color: transparent;
}
</style>

19
ui/dasadmin/src/layouts/backend/components/logo.vue
View File

@ -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;

15
ui/dasadmin/src/layouts/backend/components/menus/menuTree.vue
View File

@ -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>

11
ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
View File

@ -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>

67
ui/dasadmin/src/layouts/backend/components/navBar/classic.vue
View File

@ -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);

31
ui/dasadmin/src/layouts/backend/container/classic.vue
View File

@ -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>

2
ui/dasadmin/src/layouts/backend/router-view/main.vue
View File

@ -91,6 +91,8 @@ watch(
overflow: hidden;
width: 100%;
height: 100%;
background-color: #ffffff;
border-radius: 6px;
}
.layout-main-scrollbar {
width: 100%;

4
ui/dasadmin/src/stores/config.ts
View File

@ -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'],
// 侧边菜单顶栏背景色

2
ui/dasadmin/src/stores/siteConfig.ts
View File

@ -5,7 +5,7 @@ import type { SiteConfig } from '/@/stores/interface'
export const useSiteConfig = defineStore('siteConfig', {
state: (): SiteConfig => {
return {
siteName: '',
siteName: '润阳风电场数据采集系统',
recordNumber: '',
version: '',
cdnUrl: '',

89
ui/dasadmin/src/styles/var.scss
View File

@ -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': #67c23a,
),
'warning': ('base': #e6a23c,
),
'error': ('base': #f56c6c,
),
'info': ('base': #909399,
),
),
'success': ('base': #21ba45,
),
'warning': ('base': #f2711c,
),
'danger': ('base': #db2828,
),
'error': ('base': #db2828,
),
'info': ('base': #42b8dd,
),
),
$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);

2
ui/dasadmin/src/utils/layout.ts
View File

@ -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()) {