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); grid-template-columns: repeat(3, 1fr);
} }
} }
@media screen and (max-width: 1400px) { @media screen and (max-width: 1500px) {
.table-com-search-form { .table-com-search-form {
grid-template-columns: repeat(2, 1fr); 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-scrollbar class="layout-mode-style-scrollbar">
<el-form ref="formRef" :model="configStore.layout"> <el-form ref="formRef" :model="configStore.layout">
<div class="layout-mode-styles-box"> <div class="layout-mode-styles-box">
<el-divider border-style="dashed">全局</el-divider> <!-- <el-divider border-style="dashed">全局</el-divider>-->
<div class="layout-mode-box-style"> <!-- <div class="layout-mode-box-style">-->
<el-row class="layout-mode-box-style-row" :gutter="10"> <!-- <el-row class="layout-mode-box-style-row" :gutter="10">-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<div <!-- <div-->
@click="setLayoutMode('Default')" <!-- @click="setLayoutMode('Default')"-->
class="layout-mode-style default" <!-- class="layout-mode-style default"-->
:class="configStore.layout.layoutMode == 'Default' ? 'active' : ''" <!-- :class="configStore.layout.layoutMode == 'Default' ? 'active' : ''"-->
> <!-- >-->
<div class="layout-mode-style-box"> <!-- <div class="layout-mode-style-box">-->
<div class="layout-mode-style-aside"></div> <!-- <div class="layout-mode-style-aside"></div>-->
<div class="layout-mode-style-container-box"> <!-- <div class="layout-mode-style-container-box">-->
<div class="layout-mode-style-header"></div> <!-- <div class="layout-mode-style-header"></div>-->
<div class="layout-mode-style-container"></div> <!-- <div class="layout-mode-style-container"></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="layout-mode-style-name">默认</div> <!-- <div class="layout-mode-style-name">默认</div>-->
</div> <!-- </div>-->
</el-col> <!-- </el-col>-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<div <!-- <div-->
@click="setLayoutMode('Classic')" <!-- @click="setLayoutMode('Classic')"-->
class="layout-mode-style classic" <!-- class="layout-mode-style classic"-->
:class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''" <!-- :class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''"-->
> <!-- >-->
<div class="layout-mode-style-box"> <!-- <div class="layout-mode-style-box">-->
<div class="layout-mode-style-aside"></div> <!-- <div class="layout-mode-style-aside"></div>-->
<div class="layout-mode-style-container-box"> <!-- <div class="layout-mode-style-container-box">-->
<div class="layout-mode-style-header"></div> <!-- <div class="layout-mode-style-header"></div>-->
<div class="layout-mode-style-container"></div> <!-- <div class="layout-mode-style-container"></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="layout-mode-style-name">经典</div> <!-- <div class="layout-mode-style-name">经典</div>-->
</div> <!-- </div>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
<!-- <el-row :gutter="10"> <!-- &lt;!&ndash; <el-row :gutter="10">-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<div <!-- <div-->
@click="setLayoutMode('Streamline')" <!-- @click="setLayoutMode('Streamline')"-->
class="layout-mode-style streamline" <!-- class="layout-mode-style streamline"-->
:class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''" <!-- :class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''"-->
> <!-- >-->
<div class="layout-mode-style-box"> <!-- <div class="layout-mode-style-box">-->
<div class="layout-mode-style-container-box"> <!-- <div class="layout-mode-style-container-box">-->
<div class="layout-mode-style-header"></div> <!-- <div class="layout-mode-style-header"></div>-->
<div class="layout-mode-style-container"></div> <!-- <div class="layout-mode-style-container"></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="layout-mode-style-name">单栏</div> <!-- <div class="layout-mode-style-name">单栏</div>-->
</div> <!-- </div>-->
</el-col> <!-- </el-col>-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<div <!-- <div-->
@click="setLayoutMode('Double')" <!-- @click="setLayoutMode('Double')"-->
class="layout-mode-style double" <!-- class="layout-mode-style double"-->
:class="configStore.layout.layoutMode == 'Double' ? 'active' : ''" <!-- :class="configStore.layout.layoutMode == 'Double' ? 'active' : ''"-->
> <!-- >-->
<div class="layout-mode-style-box"> <!-- <div class="layout-mode-style-box">-->
<div class="layout-mode-style-aside"></div> <!-- <div class="layout-mode-style-aside"></div>-->
<div class="layout-mode-style-container-box"> <!-- <div class="layout-mode-style-container-box">-->
<div class="layout-mode-style-header"></div> <!-- <div class="layout-mode-style-header"></div>-->
<div class="layout-mode-style-container"></div> <!-- <div class="layout-mode-style-container"></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="layout-mode-style-name">双栏</div> <!-- <div class="layout-mode-style-name">双栏</div>-->
</div> <!-- </div>-->
</el-col> <!-- </el-col>-->
</el-row> --> <!-- </el-row> &ndash;&gt;-->
</div> <!-- </div>-->
<el-divider border-style="dashed">全局</el-divider> <el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global"> <div class="layout-config-global">
<el-form-item label="后台页面切换动画"> <el-form-item label="后台页面切换动画">

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

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

16
src/stores/config.ts
View File

@@ -12,23 +12,23 @@ export const useConfig = defineStore(
// 是否收缩布局(小屏设备) // 是否收缩布局(小屏设备)
shrink: false, shrink: false,
// 后台布局方式，可选值<Default|Classic|Streamline|Double> // 后台布局方式，可选值<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> // 后台主页面切换动画，可选值<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', mainAnimation: 'slide-right',
// 是否暗黑模式 // 是否暗黑模式
isDark: false, 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'], menuActiveColor: ['#409eff', '#3375b9'],
// 侧边菜单顶栏背景色 // 侧边菜单顶栏背景色
menuTopBarBackground: ['#fcfcfc', '#1d1e1f'], menuTopBarBackground: ['#002B6A', '#1d1e1f'],
// 侧边菜单宽度(展开时)，单位px // 侧边菜单宽度(展开时)，单位px
menuWidth: 260, menuWidth: 260,
// 侧边菜单项默认图标 // 侧边菜单项默认图标
@@ -42,13 +42,13 @@ export const useConfig = defineStore(
/* 顶栏 */ /* 顶栏 */
// 顶栏文字色 // 顶栏文字色
headerBarTabColor: ['#000000', '#CFD3DC'], headerBarTabColor: ['#FFFFFF', '#CFD3DC'],
// 顶栏激活项背景色 // 顶栏激活项背景色
headerBarTabActiveBackground: ['#ffffff', '#1d1e1f'], headerBarTabActiveBackground: ['#ffffff', '#1d1e1f'],
// 顶栏激活项文字色 // 顶栏激活项文字色
headerBarTabActiveColor: ['#000000', '#409EFF'], headerBarTabActiveColor: ['#000000', '#409EFF'],
// 顶栏背景色 // 顶栏背景色
headerBarBackground: ['#ffffff', '#1d1e1f'], headerBarBackground: ['#002B6A', '#1d1e1f'],
// 顶栏悬停时背景色 // 顶栏悬停时背景色
headerBarHoverBackground: ['#f5f5f5', '#18222c'] headerBarHoverBackground: ['#f5f5f5', '#18222c']
}) })