LoveNav/love-nav-vue
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 21:32:04 +08:00
parent f5178e42ae
commit 81d5e7b111
4 changed files with 162 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/setting/onsite/BaseSettings.vue
View File

@ -1,9 +1,13 @@
<template> <template>
<div class="base-main"> <div class="base-main" style="text-shadow: 0 0 20px var(--font-border);">
<div class="LeftPart" >
<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-platform"></i>发信配置</div>
</div>
<div> <div>
<span class="title">发信配置</span> <el-card style="width:550px;background-color: var(--theme-bg-color);border-width: 5px;margin-top:10px;border-color:var(--border-color)">
<div> <el-form v-model="from" style="font-family: SimHei;font-weight:600;margin-top:20px">
<el-form v-model="from">
<el-form-item prop="username"> <el-form-item prop="username">
<span class="min-title">邮箱用户名<br></span> <span class="min-title">邮箱用户名<br></span>
<el-input <el-input
@ -11,7 +15,7 @@
prefix-icon="el-icon-user" prefix-icon="el-icon-user"
placeholder="邮箱用户名" placeholder="邮箱用户名"
auto-complete="off" auto-complete="off"
style="width: 600px" style="width: 500px"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
@ -22,7 +26,7 @@
v-model="from.password" v-model="from.password"
placeholder="密码" placeholder="密码"
auto-complete="new-password" auto-complete="new-password"
style="width: 600px" style="width: 500px"
> >
<i slot="suffix" :class="icon" @click="showPass"></i> <i slot="suffix" :class="icon" @click="showPass"></i>
</el-input> </el-input>
@ -33,7 +37,7 @@
prefix-icon="el-icon-s-promotion" prefix-icon="el-icon-s-promotion"
v-model="from.email" v-model="from.email"
placeholder="邮箱" placeholder="邮箱"
style="width: 600px" style="width: 500px"
> >
</el-input> </el-input>
</el-form-item> </el-form-item>
@ -43,7 +47,7 @@
prefix-icon="el-icon-connection" prefix-icon="el-icon-connection"
v-model="from.smtp" v-model="from.smtp"
placeholder="smtp" placeholder="smtp"
style="width: 600px" style="width: 500px"
> >
</el-input> </el-input>
@ -54,26 +58,57 @@
prefix-icon="el-icon-place" prefix-icon="el-icon-place"
v-model="from.port" v-model="from.port"
placeholder="port" placeholder="port"
style="width: 600px" style="width: 500px"
> >
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-button class="el-button">保存修改</el-button> <el-button class="el-button">保存修改</el-button>
</el-form> </el-form>
<div style="display: flex;flex-direction: row;align-items: flex-start"> </el-card>
<span class="min-title">常用邮箱的STMP地址:<br>
</div>
</div>
<div class="RightPart" style="width:300px;margin-left:20px;flex-wrap: wrap">
<div class="HeadLine" style="margin-top:20px;margin-left:-6px;position: fixed">
<div class="TitleFont" style="font-size:20px!important;color:var(--theme-color)"><i class="el-icon-message-solid"></i>小贴士</div>
</div>
<el-card style="width:350px;height:400px;margin-left:10px;margin-top:63px;position: fixed;
background-color: var(--theme-bg-color-deep);border-color:var(--border-color);
border-width: 5px;color:var(--theme-color)">
<div class="HeadLine" style="margin-top:5px;margin-left:-5px;">
<div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color);font-size:20px!important;"><i class="el-icon-position"></i>常用邮箱STMP:</div>
</div>
<div style="height:15px;width:100%"></div>
<span>
QQ邮箱：smtp.qq.com<br> QQ邮箱：smtp.qq.com<br>
网易163：smtp.163.com<br> 网易163：smtp.163.com<br>
Gmail：smtp.gmail.com<br> Gmail：smtp.gmail.com<br>
</span> </span>
<span style="margin-left: 20px" class="min-title">常用邮箱的端口:<br> <div style="height:15px;width:100%"></div>
<div class="HeadLine" style="margin-top:5px;margin-left:-5px;">
<div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color);font-size:20px!important;"><i class="el-icon-position"></i>常用邮箱端口:</div>
</div>
<div style="height:15px;width:100%"></div>
<span>
SMTP：25<br> SMTP：25<br>
SMTP SSL：465<br></span> SMTP SSL：465<br>
</span>
<div style="height:15px;width:100%"></div>
</el-card>
<!-- <div style="display: flex;flex-direction: row;align-items: flex-start">-->
<!-- <span class="min-title">常用邮箱的STMP地址:<br>-->
<!-- QQ邮箱：smtp.qq.com<br>-->
<!-- 网易163：smtp.163.com<br>-->
<!-- Gmail：smtp.gmail.com<br>-->
<!-- </span>-->
<!-- <span style="margin-left: 20px" class="min-title">常用邮箱的端口:<br>-->
<!-- SMTP：25<br>-->
<!-- SMTP SSL：465<br></span>-->
<!-- </div>-->
</div> </div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
@ -117,9 +152,16 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.base-main { .RightPart{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width:50%;
}
.base-main {
display: flex;
flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
//align-items: center; margin-left: 50px; overflow: scroll; margin-left: 50px; //align-items: center; margin-left: 50px; overflow: scroll; margin-left: 50px;
overflow: scroll !important; overflow: scroll !important;
@ -143,4 +185,15 @@ background-color: var(--theme-bg-color);
border-color:var(--border-color) ; border-color:var(--border-color) ;
} }
::v-deep .el-form-item__label{
color: var(--theme-color);
}
::v-deep .el-input__inner{
background-color: var(--border-color);
}
::v-deep .el-textarea__inner{
background-color: var(--border-color);
}
</style> </style>

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

@ -9,15 +9,15 @@
<div class="base-style-content" > <div class="base-style-content" >
<div class="min-content"> <div class="min-content">
<span class="min-title">Logo(浅色模式)</span> <span class="min-title">Logo(浅色模式)</span>
<UploadComponent style="margin-top: 10px"></UploadComponent> <UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
</div> </div>
<div class="min-content" style="margin-left: 50px"> <div class="min-content" style="margin-left: 50px">
<span class="min-title">Logo(深色模式)</span> <span class="min-title">Logo(深色模式)</span>
<UploadComponent style="margin-top: 10px"></UploadComponent> <UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
</div> </div>
<div class="min-content" style="margin-left: 50px"> <div class="min-content" style="margin-left: 50px">
<span class="min-title">Favicon</span> <span class="min-title">Favicon</span>
<UploadComponent style="margin-top: 10px"></UploadComponent> <UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
</div> </div>
</div> </div>
<div class="color-select"> <div class="color-select">
@ -34,7 +34,7 @@
<div style="display: flex;flex-direction: column;margin-top:20px"> <div style="display: flex;flex-direction: column;margin-top:20px">
<span class="min-title">浅色模式</span> <span class="min-title">浅色模式</span>
<div class="img-card"> <div class="img-card">
<UploadComponent style="margin-left: 20px"></UploadComponent> <UploadComponent style="margin-left: 20px;z-index:998"></UploadComponent>
<div class="img-url"> <div class="img-url">
<span class="min-title"><i class="el-icon-link"></i>图片链接</span> <span class="min-title"><i class="el-icon-link"></i>图片链接</span>
<el-input <el-input
@ -51,7 +51,7 @@
<div style="display: flex;flex-direction: column;margin-top:20px"> <div style="display: flex;flex-direction: column;margin-top:20px">
<span class="min-title">深色模式</span> <span class="min-title">深色模式</span>
<div class="img-card"> <div class="img-card">
<UploadComponent style="margin-left: 20px"></UploadComponent> <UploadComponent style="margin-left: 20px;z-index:998"></UploadComponent>
<div class="img-url"> <div class="img-url">
<span class="min-title"><i class="el-icon-link"></i>图片链接</span> <span class="min-title"><i class="el-icon-link"></i>图片链接</span>
<el-input <el-input
@ -194,10 +194,10 @@ export default {
} }
.el-input__inner{ ::v-deep .el-input__inner{
background-color: var(--border-color); background-color: var(--border-color);
} }
.el-textarea__inner{ ::v-deep .el-textarea__inner{
background-color: var(--border-color); background-color: var(--border-color);
} }
</style> </style>

32
src/components/setting/system/FunctionSettings.vue
View File

@ -1,11 +1,14 @@
<template> <template>
<div class="main"> <div class="main" style="text-shadow: 0 0 20px var(--font-border);">
<div class="nav-function"> <div class="nav-function">
<span class="title">导航栏功能：</span> <div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
<div class="nav-function-content"> <div class="HeadSquare"></div>
<div> <div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-location"></i>导航设置</div>
</div>
<div class="nav-function-content" style="font-family: SimHei;font-size:18px;font-weight:600;">
<el-card style="width:600px;background-color: var(--theme-bg-color);border-width:5px;margin-top:10px;border-color:var(--border-color)">
<span class="min-title">导航菜单</span> <span class="min-title">导航菜单</span>
<div v-for="(item,index) in form" :key="index" style="margin-top: 5px;display: flex;align-items: center"> <div v-for="(item,index) in form" :key="index" style="margin-top: 15px;display: flex;align-items: center">
<el-input <el-input
placeholder="名称" placeholder="名称"
v-model="form.name" v-model="form.name"
@ -16,26 +19,27 @@
v-model="form.url" v-model="form.url"
clearable style="width: 200px;margin-left: 10px"> clearable style="width: 200px;margin-left: 10px">
</el-input> </el-input>
<i @click="deleteItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px" <i @click="deleteItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;color:var(--theme-color)"
class="el-icon-circle-close"></i> class="el-icon-circle-close"></i>
</div> </div>
<i @click="addItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px" <i @click="addItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;margin-top:20px;color:var(--theme-color)"
class="el-icon-circle-plus-outline"></i> class="el-icon-circle-plus-outline"></i>
</div> </el-card>
<div>
<el-card style="width:600px;background-color: var(--theme-bg-color);border-width:5px;margin-top:10px;border-color:var(--border-color)">
<span class="min-title">搜索工具</span> <span class="min-title">搜索工具</span>
<div v-for="(item,index) in searchList" :key="index" <div v-for="(item,index) in searchList" :key="index"
style="display: flex;flex-direction: row;align-items: center"> style="display: flex;flex-direction: row;align-items: center;margin-top:20px;">
<div class="reach-card"> <div class="reach-card">
<span style="margin-left: 10px">{{ item.name }}</span> <span style="margin-left: 10px">{{ item.name }}</span>
<i @click="openSearchDialog" style="margin-right: 10px" class="el-icon-s-tools"></i> <i @click="openSearchDialog" style="margin-right: 10px" class="el-icon-s-tools"></i>
</div> </div>
<i @click="deleteSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px" <i @click="deleteSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;color:var(--theme-color)"
class="el-icon-circle-close"></i> class="el-icon-circle-close"></i>
</div> </div>
<i @click="addSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px" <i @click="addSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;margin-top:20px;color:var(--theme-color)"
class="el-icon-circle-plus-outline"></i> class="el-icon-circle-plus-outline"></i>
</div> </el-card>
<el-dialog <el-dialog
title="搜索设置" title="搜索设置"
@ -143,7 +147,9 @@ export default {
} }
.nav-function-content { .nav-function-content {
margin-top:20px;
display: flex; display: flex;
flex-wrap: nowrap;
flex-direction: column; flex-direction: column;
} }

23
src/components/setting/system/InformationSettings.vue
View File

@ -161,30 +161,31 @@
<div class="HeadLine" style="margin-top:20px;margin-left:-6px;position: fixed"> <div class="HeadLine" style="margin-top:20px;margin-left:-6px;position: fixed">
<div class="TitleFont" style="font-size:20px!important;color:var(--theme-color)"><i class="el-icon-message-solid"></i>小贴士</div> <div class="TitleFont" style="font-size:20px!important;color:var(--theme-color)"><i class="el-icon-message-solid"></i>小贴士</div>
</div> </div>
<el-card style="width:380px;height:300px;margin-left:10px;margin-top:50px;position: fixed; <el-card style="width:380px;height:460px;margin-left:10px;margin-top:50px;position: fixed;
background-color: var(--theme-bg-color-deep);border-color:var(--border-color); background-color: var(--theme-bg-color-deep);border-color:var(--border-color);
border-width: 5px"> border-width: 5px;color:var(--theme-color)">
<div class="HeadLine" style="margin-top:5px;margin-left:-5px;"> <div class="HeadLine" style="margin-top:5px;margin-left:-5px;">
<div class="HeadSquare"></div> <div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color);font-size:20px!important;"><i class="el-icon-s-opportunity"></i>什么是SEO？</div> <div class="TitleFont" style="color:var(--theme-color);font-size:20px!important;"><i class="el-icon-s-opportunity"></i>什么是SEO？</div>
</div> </div>
<div style="height:15px;width:100%"></div> <div style="height:15px;width:100%"></div>
<span style="font-family: SimHei;font-size:18px;font-weight:600;line-height:25px;"> <span style="font-family: SimHei;font-size:18px;font-weight:600;line-height:25px;">
SEO 代表搜寻引擎最佳化/搜寻引擎优化， &nbsp;&nbsp;&nbsp; SEO 代表搜寻引擎最佳化/搜寻引擎优化，
是指透过了解搜寻引擎的自然排名运作原理来优化网站，以提高目标网站在有关搜寻引擎内排名的方式。 是指透过了解搜寻引擎的自然排名运作原理来优化网站，以提高目标网站在有关搜寻引擎内排名的方式。
而我们认为SEO 是一种透过了解搜寻引擎的运作及使用者的搜寻习惯来优化网站，以提高随机搜寻排名， 而我们认为SEO 是一种透过了解搜寻引擎的运作及使用者的搜寻习惯来优化网站，以提高随机搜寻排名，
从而提高网站流量，最终达致网站的销售或宣传能力的技术。
</span> </span>
<div class="HeadLine" style="margin-top:5px;margin-left:-5px;"> <div class="HeadLine" style="margin-top:5px;margin-left:-5px;">
<div class="HeadSquare"></div> <div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color);font-size:20px!important;"><i class="el-icon-s-opportunity"></i>SEO的重要性</div> <div class="TitleFont" style="color:var(--theme-color);font-size:20px!important;"><i class="el-icon-s-opportunity"></i>SEO的重要性</div>
<span style="font-family: SimHei;font-size:18px;font-weight:600;line-height:25px;">
SEO 至关重要，不仅因为它吸引了很多网站访客，
而且如果使用得当，还可以帮助您提高投资回报率。通过创建在搜寻引擎结果中排名靠前的网站，
这是一种高效益高回报的方法，可以改善您的网站以获得更多的浏览量，产生随机回报。
</span>
</div> </div>
<div style="height:15px;width:100%"></div>
<span style="font-family: SimHei;font-size:18px;font-weight:600;line-height:25px;">
&nbsp;&nbsp;&nbsp;通过seo技术获得的流量是免费的，这也是seo最大的好处。会使网站在搜索引擎中的排名，在不花钱竞价
的情况下也可以排到首页，排名越高那么被访问的几率也就越大，这样我们就可以很容易的从中获利。<br/>
</span>
</el-card> </el-card>
</div> </div>
</div> </div>
@ -279,10 +280,10 @@ export default {
color: var(--theme-color); color: var(--theme-color);
} }
.el-input__inner{ ::v-deep .el-input__inner{
background-color: var(--border-color); background-color: var(--border-color);
} }
.el-textarea__inner{ ::v-deep .el-textarea__inner{
background-color: var(--border-color); background-color: var(--border-color);
} }