Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局修改

Browse Source
This commit is contained in:
仲么了
2024-01-05 10:32:39 +08:00
parent 3fea14129e
commit 8d58dc5c17
4 changed files with 81 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/table/header/index.vue
View File

@@ -174,7 +174,7 @@ const dateChange = () => {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 1400px) {
@media screen and (max-width: 1500px) {
.table-com-search-form {
grid-template-columns: repeat(2, 1fr);
}

140
src/layouts/admin/components/config.vue
View File

@@ -4,76 +4,76 @@
<el-scrollbar class="layout-mode-style-scrollbar">
<el-form ref="formRef" :model="configStore.layout">
<div class="layout-mode-styles-box">
<el-divider border-style="dashed">全局</el-divider>
<div class="layout-mode-box-style">
<el-row class="layout-mode-box-style-row" :gutter="10">
<el-col :span="12">
<div
@click="setLayoutMode('Default')"
class="layout-mode-style default"
:class="configStore.layout.layoutMode == 'Default' ? 'active' : ''"
>
<div class="layout-mode-style-box">
<div class="layout-mode-style-aside"></div>
<div class="layout-mode-style-container-box">
<div class="layout-mode-style-header"></div>
<div class="layout-mode-style-container"></div>
</div>
</div>
<div class="layout-mode-style-name">默认</div>
</div>
</el-col>
<el-col :span="12">
<div
@click="setLayoutMode('Classic')"
class="layout-mode-style classic"
:class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''"
>
<div class="layout-mode-style-box">
<div class="layout-mode-style-aside"></div>
<div class="layout-mode-style-container-box">
<div class="layout-mode-style-header"></div>
<div class="layout-mode-style-container"></div>
</div>
</div>
<div class="layout-mode-style-name">经典</div>
</div>
</el-col>
</el-row>
<!-- <el-row :gutter="10">
<el-col :span="12">
<div
@click="setLayoutMode('Streamline')"
class="layout-mode-style streamline"
:class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''"
>
<div class="layout-mode-style-box">
<div class="layout-mode-style-container-box">
<div class="layout-mode-style-header"></div>
<div class="layout-mode-style-container"></div>
</div>
</div>
<div class="layout-mode-style-name">单栏</div>
</div>
</el-col>
<el-col :span="12">
<div
@click="setLayoutMode('Double')"
class="layout-mode-style double"
:class="configStore.layout.layoutMode == 'Double' ? 'active' : ''"
>
<div class="layout-mode-style-box">
<div class="layout-mode-style-aside"></div>
<div class="layout-mode-style-container-box">
<div class="layout-mode-style-header"></div>
<div class="layout-mode-style-container"></div>
</div>
</div>
<div class="layout-mode-style-name">双栏</div>
</div>
</el-col>
</el-row> -->
</div>
<!-- <el-divider border-style="dashed">全局</el-divider>-->
<!-- <div class="layout-mode-box-style">-->
<!-- <el-row class="layout-mode-box-style-row" :gutter="10">-->
<!-- <el-col :span="12">-->
<!-- <div-->
<!-- @click="setLayoutMode('Default')"-->
<!-- class="layout-mode-style default"-->
<!-- :class="configStore.layout.layoutMode == 'Default' ? 'active' : ''"-->
<!-- >-->
<!-- <div class="layout-mode-style-box">-->
<!-- <div class="layout-mode-style-aside"></div>-->
<!-- <div class="layout-mode-style-container-box">-->
<!-- <div class="layout-mode-style-header"></div>-->
<!-- <div class="layout-mode-style-container"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layout-mode-style-name">默认</div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <div-->
<!-- @click="setLayoutMode('Classic')"-->
<!-- class="layout-mode-style classic"-->
<!-- :class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''"-->
<!-- >-->
<!-- <div class="layout-mode-style-box">-->
<!-- <div class="layout-mode-style-aside"></div>-->
<!-- <div class="layout-mode-style-container-box">-->
<!-- <div class="layout-mode-style-header"></div>-->
<!-- <div class="layout-mode-style-container"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layout-mode-style-name">经典</div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- &lt;!&ndash; <el-row :gutter="10">-->
<!-- <el-col :span="12">-->
<!-- <div-->
<!-- @click="setLayoutMode('Streamline')"-->
<!-- class="layout-mode-style streamline"-->
<!-- :class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''"-->
<!-- >-->
<!-- <div class="layout-mode-style-box">-->
<!-- <div class="layout-mode-style-container-box">-->
<!-- <div class="layout-mode-style-header"></div>-->
<!-- <div class="layout-mode-style-container"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layout-mode-style-name">单栏</div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <div-->
<!-- @click="setLayoutMode('Double')"-->
<!-- class="layout-mode-style double"-->
<!-- :class="configStore.layout.layoutMode == 'Double' ? 'active' : ''"-->
<!-- >-->
<!-- <div class="layout-mode-style-box">-->
<!-- <div class="layout-mode-style-aside"></div>-->
<!-- <div class="layout-mode-style-container-box">-->
<!-- <div class="layout-mode-style-header"></div>-->
<!-- <div class="layout-mode-style-container"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layout-mode-style-name">双栏</div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row> &ndash;&gt;-->
<!-- </div>-->
<el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global">
<el-form-item label="后台页面切换动画">

4
src/layouts/admin/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<component :is="config.layout.layoutMode"></component>
<component :is='config.layout.layoutMode'></component>
</template>
<script setup lang="ts">
<script setup lang='ts'>
import { reactive } from 'vue'
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'

16
src/stores/config.ts
View File

@@ -12,23 +12,23 @@ 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',
// 是否暗黑模式
isDark: false,
elementUiPrimary:['#1a94fa','#1a94fa'],
elementUiPrimary:['#002B6A','#002B6A'],
/* 侧边菜单 */
// 侧边菜单背景色
menuBackground: ['#ffffff', '#1d1e1f'],
menuBackground: ['#002B6A', '#1d1e1f'],
// 侧边菜单文字颜色
menuColor: ['#303133', '#CFD3DC'],
menuColor: ['#FFFFFF', '#CFD3DC'],
// 侧边菜单激活项背景色
menuActiveBackground: ['#ffffff', '#1d1e1f'],
menuActiveBackground: ['#1655B3', '#1d1e1f'],
// 侧边菜单激活项文字色
menuActiveColor: ['#409eff', '#3375b9'],
// 侧边菜单顶栏背景色
menuTopBarBackground: ['#fcfcfc', '#1d1e1f'],
menuTopBarBackground: ['#002B6A', '#1d1e1f'],
// 侧边菜单宽度(展开时)，单位px
menuWidth: 260,
// 侧边菜单项默认图标
@@ -42,13 +42,13 @@ export const useConfig = defineStore(
/* 顶栏 */
// 顶栏文字色
headerBarTabColor: ['#000000', '#CFD3DC'],
headerBarTabColor: ['#FFFFFF', '#CFD3DC'],
// 顶栏激活项背景色
headerBarTabActiveBackground: ['#ffffff', '#1d1e1f'],
// 顶栏激活项文字色
headerBarTabActiveColor: ['#000000', '#409EFF'],
// 顶栏背景色
headerBarBackground: ['#ffffff', '#1d1e1f'],
headerBarBackground: ['#002B6A', '#1d1e1f'],
// 顶栏悬停时背景色
headerBarHoverBackground: ['#f5f5f5', '#18222c']
})