LoveNav/love-nav-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

admin manage page update

Browse Source
This commit is contained in:
landaiqing
2023-12-22 14:10:44 +08:00
parent a45d591988
commit e8e402cf4d
26 changed files with 1676 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/setting/system/AppearanceSettings.vue
View File

@@ -1,25 +1,99 @@
<template>
<div class="main">
<div class="base-style">
<span style="font-weight: bolder;font-size: 20px">基础样式</span>
<span class="title">基础样式</span>
<div class="base-style-content">
<div class="min-content">
<span class="min-title">Logo(浅色模式)</span>
<UploadComponent style="margin-top: 10px"></UploadComponent>
</div>
<div class="min-content" style="margin-left: 10px">
<span class="min-title">Logo(深色模式)</span>
<UploadComponent style="margin-top: 10px"></UploadComponent>
</div>
<div class="min-content" style="margin-left: 10px">
<span class="min-title">Favicon</span>
<UploadComponent style="margin-top: 10px"></UploadComponent>
</div>
</div>
<div class="color-select">
<span class="theme-color-select">主题色：</span>
<el-color-picker v-model="color"></el-color-picker>
</div>
</div>
<div class="background-img">
<span class="title">背景图</span>
<div style="display: flex;flex-direction: column">
<span class="min-title">浅色模式</span>
<div class="img-card">
<UploadComponent style="margin-left: 20px"></UploadComponent>
<div class="img-url">
<span class="min-title">图片链接</span>
<el-input
placeholder="请输入内容"
v-model="input"
clearable>
</el-input>
<span class="min-title">支持随机图链接</span>
</div>
</div>
</div>
<div style="display: flex;flex-direction: column">
<span class="min-title">深色模式</span>
<div class="img-card">
<UploadComponent style="margin-left: 20px"></UploadComponent>
<div class="img-url">
<span class="min-title">图片链接</span>
<el-input
placeholder="请输入内容"
v-model="input"
clearable>
</el-input>
<span class="min-title">支持随机图链接</span>
</div>
</div>
</div>
</div>
<div class="ui-model">
<span class="title">UI模式</span>
<div class="min-ui-model">
<div>
<span class="min-title">浅色模式切换：</span>
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</div>
<div>
<span class="min-title">默认深色：</span>
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</div>
</div>
</div>
</div>
</template>
<script>
import UploadComponent from "@/components/setting/system/Upload.vue";
export default {
name:"AppearanceSettings",
components: {},
components: {UploadComponent},
data() {
return {
color:'#409EFF',
input: '',
value:'',
}},
mounted() {
@@ -33,7 +107,6 @@ export default {
methods: {
}
}
</script>
<style scoped>
@@ -42,5 +115,65 @@ export default {
flex-direction: column;
flex-wrap: nowrap;
//align-items: center;
margin-left: 50px;
overflow: scroll;
}
.title {
font-weight: bolder;
font-size: 20px;
color: var(--theme-color);
margin-top: 10px;
//background-color: var(--theme-bg-color);
}
.base-style-content{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.min-title {
color: var(--theme-color);
//background-color: var(--theme-bg-color);
}
.min-content{
margin-top: 10px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
}
.theme-color-select{
color: var(--theme-color);
}
.color-select{
margin-top: 10px;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.img-card{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
border-radius: 20px;
width: 800px;
height: 200px;
background-color: var(--theme-bg-color);
color: var(--theme-color);
}
.img-url{
margin-left: 20px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
}
.min-ui-model{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
</style>