attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 主题设置界面

Browse Source
This commit is contained in:
wang_fan_w 2024-05-04 23:48:14 +08:00
parent bf7eaf4ae6
commit 15919855ab
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/layout/components/Header/components/theme-settings/index.vue
View File

@ -4,7 +4,7 @@
<div> <div>
<div> <div>
<a-divider orientation="center">导航模式</a-divider> <a-divider orientation="center">导航模式</a-divider>
<div class="flex-common"> <div class="flex-center">
<a-tooltip v-for="item in layoutList" :key="item.value" :content="item.label" position="top" mini> <a-tooltip v-for="item in layoutList" :key="item.value" :content="item.label" position="top" mini>
<div <div
:class="layoutType === item.value ? `current-layout ${item.class}` : item.class" :class="layoutType === item.value ? `current-layout ${item.class}` : item.class"
@ -15,12 +15,25 @@
</a-tooltip> </a-tooltip>
</div> </div>
</div> </div>
<div> <div class="box-gap">
<a-divider orientation="center">主题设置</a-divider> <a-divider orientation="center">主题设置</a-divider>
<div class="flex-row"> <div class="flex-center">
<div>主题色</div> <a-color-picker default-value="#12D2AC" hide-trigger show-preset />
</div>
<!-- <div class="flex-row">
<div>色弱模式</div>
<a-switch /> <a-switch />
</div> </div>
<div class="flex-row">
<div>灰色模式</div>
<a-switch />
</div>
<div class="flex-row">
<div>侧边栏深色</div>
<a-switch />
</div> -->
</div>
<div class="box-gap">
<div class="flex-row"> <div class="flex-row">
<div>色弱模式</div> <div>色弱模式</div>
<a-switch /> <a-switch />
@ -82,7 +95,7 @@ const handleCancel = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.box-gap { .box-gap {
margin-top: $margin; margin-top: 30px;
} }
.flex-row { .flex-row {
display: flex; display: flex;
@ -90,7 +103,7 @@ const handleCancel = () => {
align-items: center; align-items: center;
margin-bottom: $margin; margin-bottom: $margin;
} }
.flex-common { .flex-center {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -173,4 +186,8 @@ const handleCancel = () => {
background: #fff; background: #fff;
} }
} }
:deep(.arco-divider-text) {
background: $color-bg-3;
}
</style> </style>