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

fix:小屏样式优化

Browse Source
This commit is contained in:
刘玉霞 2024-11-08 15:44:06 +08:00
parent 1495adbad9
commit efbc300e35
10 changed files with 335 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/dasadmin/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>Loading...</title> <title>Loading...</title>
</head> </head>
<body> <body>

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

@ -49,7 +49,7 @@ const onMenuCollapse = function () {
<style scoped lang="scss"> <style scoped lang="scss">
.layout-logo { .layout-logo {
width: 100%; width: 100%;
height: 60px; height: v-bind('config.headerHeight()');
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

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

@ -25,10 +25,14 @@ import type { RouteRecordRaw } from 'vue-router'
import { getFirstRoute, onClickMenu } from '/@/utils/router' import { getFirstRoute, onClickMenu } from '/@/utils/router'
import { ElNotification } from 'element-plus' import { ElNotification } from 'element-plus'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { computed } from 'vue'
const { t } = useI18n() const { t } = useI18n()
const config = useConfig() const config = useConfig()
const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
const height = computed(() => (window.screen.width < 1920 ? '40px' : '56px'))
interface Props { interface Props {
menus: RouteRecordRaw[] menus: RouteRecordRaw[]
extends?: { extends?: {
@ -68,6 +72,16 @@ const onClickSubMenu = (menu: RouteRecordRaw) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.el-menu-item {
padding: 0 v-bind(padding);
height: v-bind(height);
:deep(.el-menu-tooltip__trigger) {
padding: 0 v-bind(padding);
}
}
:deep(.el-sub-menu__title) {
padding: 0 v-bind(padding);
}
.el-sub-menu .icon, .el-sub-menu .icon,
.el-menu-item .icon { .el-menu-item .icon {
vertical-align: middle; vertical-align: middle;

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

@ -30,7 +30,7 @@ const state = reactive({
}) })
const width = computed(() => { const width = computed(() => {
return config.layout.menuCollapse ? '5px' : '20px' return config.layout.menuCollapse ? '5px' : window.screen.width < 1920 ? '10px' : '20px'
}) })
const verticalMenusScrollbarHeight = computed(() => { const verticalMenusScrollbarHeight = computed(() => {

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

@ -15,9 +15,12 @@ import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
import { layoutNavTabsRef } from '/@/stores/refs' import { layoutNavTabsRef } from '/@/stores/refs'
import NavMenus from '../navMenus.vue' import NavMenus from '../navMenus.vue'
import { showShade } from '/@/utils/pageShade' import { showShade } from '/@/utils/pageShade'
import { computed } from 'vue'
const config = useConfig() const config = useConfig()
const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
const height = computed(() => (window.screen.width < 1920 ? '36px' : '48px'))
const onMenuCollapse = () => { const onMenuCollapse = () => {
showShade('ba-aside-menu-shade', () => { showShade('ba-aside-menu-shade', () => {
config.setLayout('menuCollapse', true) config.setLayout('menuCollapse', true)
@ -29,7 +32,7 @@ const onMenuCollapse = () => {
<style scoped lang="scss"> <style scoped lang="scss">
.nav-bar { .nav-bar {
display: flex; display: flex;
height: 60px; height: v-bind('config.headerHeight()');
width: 100%; width: 100%;
background-color: v-bind('config.getColorVal("headerBarBackground")'); background-color: v-bind('config.getColorVal("headerBarBackground")');
:deep(.nav-tabs) { :deep(.nav-tabs) {
@ -75,11 +78,11 @@ const onMenuCollapse = () => {
} }
.nav-route { .nav-route {
display: flex; display: flex;
height: 48px; height: v-bind(height);
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
line-height: 48px; line-height: v-bind(height);
margin: 20px 0px; margin: v-bind(padding) 0px;
:deep(.nav-tabs) { :deep(.nav-tabs) {
display: flex; display: flex;
height: 100%; height: 100%;

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

@ -14,6 +14,7 @@
</el-container> </el-container>
<CloseFullScreen v-if="navTabs.state.tabFullScreen" /> <CloseFullScreen v-if="navTabs.state.tabFullScreen" />
</template> </template>
q
<script setup lang="ts"> <script setup lang="ts">
import Aside from '/@/layouts/backend/components/aside.vue' import Aside from '/@/layouts/backend/components/aside.vue'
@ -22,8 +23,15 @@ import Main from '/@/layouts/backend/router-view/main.vue'
import CloseFullScreen from '/@/layouts/backend/components/closeFullScreen.vue' import CloseFullScreen from '/@/layouts/backend/components/closeFullScreen.vue'
import { useNavTabs } from '/@/stores/navTabs' import { useNavTabs } from '/@/stores/navTabs'
import { useSiteConfig } from '/@/stores/siteConfig' import { useSiteConfig } from '/@/stores/siteConfig'
import { useConfig } from '/@/stores/config'
import { computed } from 'vue'
const siteConfig = useSiteConfig() const siteConfig = useSiteConfig()
const navTabs = useNavTabs() const navTabs = useNavTabs()
const config = useConfig()
const padding = computed(() => (window.screen.width < 1920 ? '0px' : '10px'))
const bodyPadding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
</script> </script>
<style scoped> <style scoped>
@ -35,16 +43,16 @@ const navTabs = useNavTabs()
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 20px; padding: 0 v-bind(bodyPadding);
} }
.layout-logo { .layout-logo {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 60px; height: v-bind('config.headerHeight()');
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: v-bind(padding);
background-image: linear-gradient(170deg, #eaf6ff 0%, #fbfdff 94%); background-image: linear-gradient(170deg, #eaf6ff 0%, #fbfdff 94%);
box-shadow: 0px 0px 20px 0px rgba(0, 100, 170, 0.09); box-shadow: 0px 0px 20px 0px rgba(0, 100, 170, 0.09);
} }

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

@ -31,6 +31,7 @@ export const useConfig = defineStore(
menuTopBarBackground: ['#fcfcfc', '#1d1e1f'], menuTopBarBackground: ['#fcfcfc', '#1d1e1f'],
// 侧边菜单宽度(展开时)，单位px // 侧边菜单宽度(展开时)，单位px
menuWidth: 260, menuWidth: 260,
headerHeight: 60,
// 侧边菜单项默认图标 // 侧边菜单项默认图标
menuDefaultIcon: 'fa fa-circle-o', menuDefaultIcon: 'fa fa-circle-o',
// 是否水平折叠收起菜单 // 是否水平折叠收起菜单
@ -70,9 +71,19 @@ export const useConfig = defineStore(
return layout.menuCollapse ? '0px' : layout.menuWidth + 'px' return layout.menuCollapse ? '0px' : layout.menuWidth + 'px'
} }
// 菜单是否折叠 // 菜单是否折叠
if (window.screen.width < 1920) {
layout.menuWidth = 180
return layout.menuCollapse ? '54px' : layout.menuWidth + 'px'
}
layout.menuWidth = 260
return layout.menuCollapse ? '74px' : layout.menuWidth + 'px' return layout.menuCollapse ? '74px' : layout.menuWidth + 'px'
} }
const headerHeight = function () {
if (window.screen.width < 1920) return '46px'
return layout.headerHeight + 'px'
}
function setLang(val: string) { function setLang(val: string) {
lang.defaultLang = val lang.defaultLang = val
} }
@ -114,7 +125,7 @@ export const useConfig = defineStore(
// } // }
} }
return { layout, lang, menuWidth, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor } return { layout, lang, menuWidth, headerHeight, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor }
}, },
{ {
persist: { persist: {

1
ui/dasadmin/src/stores/interface/index.ts
View File

@ -8,6 +8,7 @@ export interface Layout {
mainAnimation: string mainAnimation: string
isDark: boolean isDark: boolean
menuWidth: number menuWidth: number
headerHeight: number
menuDefaultIcon: string menuDefaultIcon: string
menuCollapse: boolean menuCollapse: boolean
menuUniqueOpened: boolean menuUniqueOpened: boolean

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

@ -12,7 +12,7 @@ export function mainHeight(extra = 0): CSSProperties {
let height = extra let height = extra
const adminLayoutMainExtraHeight: anyObj = { const adminLayoutMainExtraHeight: anyObj = {
Default: 70, Default: 70,
Classic: 150, Classic: window.screen.width < 1920 ? 110 : 150,
Streamline: 60, Streamline: 60,
} }
if (isAdminApp()) { if (isAdminApp()) {

482
ui/dasadmin/src/views/backend/dashboard.vue
View File

File diff suppressed because it is too large Load Diff