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

详情页

Browse Source
This commit is contained in:
Zhang HaoYang
2023-12-23 18:40:56 +08:00
parent 11cfe766d7
commit f5178e42ae
11 changed files with 315 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,82 +1,96 @@
<template>
<div class="main">
<div class="base-style">
<span class="title">基础样式</span>
<div class="base-style-content">
<div class="main" style="text-shadow: 0 0 20px var(--font-border);">
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
<div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-open"></i>基础样式</div>
</div>
<div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600">
<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">
<div class="min-content" style="margin-left: 50px">
<span class="min-title">Logo(深色模式)</span>
<UploadComponent style="margin-top: 10px"></UploadComponent>
</div>
<div class="min-content" style="margin-left: 10px">
<div class="min-content" style="margin-left: 50px">
<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>
<el-color-picker v-model="color" style="margin-top:10px"></el-color-picker>
</div>
</div>
<div class="background-img">
<span class="title">背景图</span>
<div style="display: flex;flex-direction: column">
<div class="background-img" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;display: flex;flex-direction: column">
<div class="HeadLine" style="margin-top:15px;margin-left:-5px;">
<div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-promotion"></i>背景样式</div>
</div>
<span class="title" >背景图</span>
<div style="display: flex;flex-direction: column;margin-top:20px">
<span class="min-title">浅色模式</span>
<div class="img-card">
<UploadComponent style="margin-left: 20px"></UploadComponent>
<div class="img-url">
<span class="min-title">图片链接</span>
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
<el-input
placeholder="请输入内容"
v-model="input"
clearable>
clearable
style="margin-top:10px;">
</el-input>
<span class="min-title">支持随机图链接</span>
<span class="min-title" style="margin-top:20px">支持随机图链接</span>
</div>
</div>
</div>
<div style="display: flex;flex-direction: column">
<div style="display: flex;flex-direction: column;margin-top:20px">
<span class="min-title">深色模式</span>
<div class="img-card">
<UploadComponent style="margin-left: 20px"></UploadComponent>
<div class="img-url">
<span class="min-title">图片链接</span>
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
<el-input
placeholder="请输入内容"
v-model="input"
clearable>
clearable style="margin-top:10px;">
</el-input>
<span class="min-title">支持随机图链接</span>
<span class="min-title" style="margin-top:20px">支持随机图链接</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>
<div class="ui-model" style="margin-top:20px">
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
<div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-promotion"></i>主题偏好设置</div>
</div>
<div class="min-ui-model" style="font-family: SimHei;font-size:18px;font-weight:600;">
<div style="margin-top:50px">
<span class="min-title" >浅色模式切换：</span>
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
inactive-value="0" >
</el-switch>
</div>
<div>
<span class="min-title">默认深色：</span>
<div style="margin-top:20px">
<span class="min-title" style="margin-top:20px">默认深色：</span>
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
inactive-value="0" >
</el-switch>
</div>
<div style="width:100%;height:50px"></div>
</div>
</div>
</div>
@@ -126,6 +140,7 @@ export default {
//background-color: var(--theme-bg-color);
}
.base-style-content{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@@ -152,11 +167,13 @@ export default {
flex-direction: column;
}
.img-card{
border: solid 5px var(--border-color);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
border-radius: 20px;
margin-top:20px;
width: 800px;
height: 200px;
background-color: var(--theme-bg-color);
@@ -176,4 +193,11 @@ export default {
flex-wrap: nowrap;
}
.el-input__inner{
background-color: var(--border-color);
}
.el-textarea__inner{
background-color: var(--border-color);
}
</style>