From b31d0bdae5ab5e7c24eadf08fea270c6bb9f3c7a Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期四, 09 二月 2023 16:58:46 +0800
Subject: [PATCH] 1.自动排程代码正在研究
---
src/layout/components/Settings/index.vue | 87 +++++++++++++++++++++++++++++++++++++++++--
1 files changed, 83 insertions(+), 4 deletions(-)
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index e0490c9..3502a32 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,11 +1,65 @@
<template>
<div class="drawer-container">
<div>
- <h3 class="drawer-title">Page style setting</h3>
+ <h3 class="drawer-title">椤圭洰閰嶇疆</h3>
<div class="drawer-item">
- <span>Theme Color</span>
+ <span>涓婚棰滆壊</span>
<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+ </div>
+
+ <div class="drawer-item" style="display: flex;justify-content: space-between">
+ <span>澶撮儴棰滆壊</span>
+ <el-switch
+ v-model="$store.state.settings.headBackgroundColorValue"
+ style="display: block"
+ active-color="#304156"
+ inactive-color="#ccc"
+ active-text="娣辫壊"
+ inactive-text="娴呰壊"
+ />
+ </div>
+ <div class="drawer-item" style="display: flex;justify-content: space-between">
+ <span>鑿滃崟妯″紡</span>
+ <el-switch
+ v-model="$store.state.settings.menuIsHorizontal"
+ style="display: block"
+ :active-color="$store.state.settings.theme"
+ inactive-color="#ccc"
+ active-text="妯悜"
+ inactive-text="绔栧悜"
+ @change="sidebar.opened=true"
+ />
+ </div>
+ <div class="drawer-item" style="display: flex;justify-content: space-between">
+ <span>宸︿晶棰滆壊</span>
+ <el-switch
+ v-model="$store.state.settings.leftBackgroundColorValue"
+ style="display: block"
+ active-color="#304156"
+ :disabled="$store.state.settings.menuIsHorizontal"
+ inactive-color="#ccc"
+ active-text="娣辫壊"
+ inactive-text="娴呰壊"
+ />
+ </div>
+ <div class="drawer-item" style="display: flex;justify-content: space-between">
+ <span>鍔ㄧ敾绫诲瀷</span>
+ <el-select
+ v-model="$store.state.settings.animationType"
+ :popper-append-to-body="false"
+ popper-class="animationTypePopperClass"
+ style="width: 120px;"
+ placeholder="璇烽�夋嫨"
+ size="mini"
+ >
+ <el-option
+ v-for="item in animationTypeArr"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
</div>
<!-- 姝や笁涓姛鑳芥殏鏃朵笉鐢�-->
@@ -30,13 +84,33 @@
<script>
import ThemePicker from '@/components/ThemePicker'
+import { mapGetters } from 'vuex'
export default {
components: { ThemePicker },
data() {
- return {}
+ return {
+ animationTypeArr: [
+ { label: '榛樿绫诲瀷', value: 'fade-transform' },
+ { label: '娣″叆', value: 'el-fade-in-linear' },
+ { label: '娣″嚭', value: 'el-fade-in' },
+ { label: '涓棿缂╂斁', value: 'el-zoom-in-center' },
+ { label: '椤堕儴缂╂斁', value: 'el-zoom-in-top' },
+ { label: '搴曢儴缂╂斁', value: 'el-zoom-in-bottom' },
+ { label: '灞曞紑鎶樺彔', value: 'el-collapse-transition' },
+ { label: '鏃犲姩鐢�', value: 'none' }
+ ]
+ }
+ },
+ mounted() {
+ if (this.$store.state.settings.menuIsHorizontal) {
+ this.sidebar.opened = true
+ }
},
computed: {
+ ...mapGetters([
+ 'sidebar'
+ ]),
fixedHeader: {
get() {
return this.$store.state.settings.fixedHeader
@@ -71,6 +145,7 @@
}
}
},
+
methods: {
themeChange(val) {
this.$store.dispatch('settings/changeSetting', {
@@ -83,6 +158,10 @@
</script>
<style lang="scss" scoped>
+::v-deep .animationTypePopperClass {
+ left: auto !important;
+}
+
.drawer-container {
padding: 24px;
font-size: 14px;
@@ -92,7 +171,7 @@
.drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, .85);
- font-size: 14px;
+ font-size: 18px;
line-height: 22px;
}
--
Gitblit v1.9.3