fix:小屏样式优化
This commit is contained in:
刘玉霞
parent
1495adbad9
commit
efbc300e35
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -49,7 +49,7 @@ const onMenuCollapse = function () {
|
||||
<style scoped lang="scss">
|
||||
.layout-logo {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
height: v-bind('config.headerHeight()');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -25,10 +25,14 @@ import type { RouteRecordRaw } from 'vue-router'
|
||||
import { getFirstRoute, onClickMenu } from '/@/utils/router'
|
||||
import { ElNotification } from 'element-plus'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const config = useConfig()
|
||||
|
||||
const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
|
||||
const height = computed(() => (window.screen.width < 1920 ? '40px' : '56px'))
|
||||
|
||||
interface Props {
|
||||
menus: RouteRecordRaw[]
|
||||
extends?: {
|
||||
@ -68,6 +72,16 @@ const onClickSubMenu = (menu: RouteRecordRaw) => {
|
||||
</script>
|
||||
|
||||
<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-menu-item .icon {
|
||||
vertical-align: middle;
|
||||
|
||||
@ -30,7 +30,7 @@ const state = reactive({
|
||||
})
|
||||
|
||||
const width = computed(() => {
|
||||
return config.layout.menuCollapse ? '5px' : '20px'
|
||||
return config.layout.menuCollapse ? '5px' : window.screen.width < 1920 ? '10px' : '20px'
|
||||
})
|
||||
|
||||
const verticalMenusScrollbarHeight = computed(() => {
|
||||
|
||||
@ -15,9 +15,12 @@ import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
|
||||
import { layoutNavTabsRef } from '/@/stores/refs'
|
||||
import NavMenus from '../navMenus.vue'
|
||||
import { showShade } from '/@/utils/pageShade'
|
||||
|
||||
import { computed } from 'vue'
|
||||
const config = useConfig()
|
||||
|
||||
const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
|
||||
const height = computed(() => (window.screen.width < 1920 ? '36px' : '48px'))
|
||||
|
||||
const onMenuCollapse = () => {
|
||||
showShade('ba-aside-menu-shade', () => {
|
||||
config.setLayout('menuCollapse', true)
|
||||
@ -29,7 +32,7 @@ const onMenuCollapse = () => {
|
||||
<style scoped lang="scss">
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
height: v-bind('config.headerHeight()');
|
||||
width: 100%;
|
||||
background-color: v-bind('config.getColorVal("headerBarBackground")');
|
||||
:deep(.nav-tabs) {
|
||||
@ -75,11 +78,11 @@ const onMenuCollapse = () => {
|
||||
}
|
||||
.nav-route {
|
||||
display: flex;
|
||||
height: 48px;
|
||||
height: v-bind(height);
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
line-height: 48px;
|
||||
margin: 20px 0px;
|
||||
line-height: v-bind(height);
|
||||
margin: v-bind(padding) 0px;
|
||||
:deep(.nav-tabs) {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
</el-container>
|
||||
<CloseFullScreen v-if="navTabs.state.tabFullScreen" />
|
||||
</template>
|
||||
q
|
||||
|
||||
<script setup lang="ts">
|
||||
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 { useNavTabs } from '/@/stores/navTabs'
|
||||
import { useSiteConfig } from '/@/stores/siteConfig'
|
||||
import { useConfig } from '/@/stores/config'
|
||||
import { computed } from 'vue'
|
||||
const siteConfig = useSiteConfig()
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
@ -35,16 +43,16 @@ const navTabs = useNavTabs()
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
padding: 0 v-bind(bodyPadding);
|
||||
}
|
||||
.layout-logo {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
height: v-bind('config.headerHeight()');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
padding: v-bind(padding);
|
||||
background-image: linear-gradient(170deg, #eaf6ff 0%, #fbfdff 94%);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 100, 170, 0.09);
|
||||
}
|
||||
|
||||
@ -31,6 +31,7 @@ export const useConfig = defineStore(
|
||||
menuTopBarBackground: ['#fcfcfc', '#1d1e1f'],
|
||||
// 侧边菜单宽度(展开时)，单位px
|
||||
menuWidth: 260,
|
||||
headerHeight: 60,
|
||||
// 侧边菜单项默认图标
|
||||
menuDefaultIcon: 'fa fa-circle-o',
|
||||
// 是否水平折叠收起菜单
|
||||
@ -70,9 +71,19 @@ export const useConfig = defineStore(
|
||||
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'
|
||||
}
|
||||
|
||||
const headerHeight = function () {
|
||||
if (window.screen.width < 1920) return '46px'
|
||||
return layout.headerHeight + 'px'
|
||||
}
|
||||
|
||||
function setLang(val: string) {
|
||||
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: {
|
||||
|
||||
@ -8,6 +8,7 @@ export interface Layout {
|
||||
mainAnimation: string
|
||||
isDark: boolean
|
||||
menuWidth: number
|
||||
headerHeight: number
|
||||
menuDefaultIcon: string
|
||||
menuCollapse: boolean
|
||||
menuUniqueOpened: boolean
|
||||
@ -132,4 +133,4 @@ export interface Enums {
|
||||
[key: string]: { [k: string]: string }
|
||||
}
|
||||
keys: string[]
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export function mainHeight(extra = 0): CSSProperties {
|
||||
let height = extra
|
||||
const adminLayoutMainExtraHeight: anyObj = {
|
||||
Default: 70,
|
||||
Classic: 150,
|
||||
Classic: window.screen.width < 1920 ? 110 : 150,
|
||||
Streamline: 60,
|
||||
}
|
||||
if (isAdminApp()) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user