后台
This commit is contained in:
parent
f5178e42ae
commit
81d5e7b111
@ -1,79 +1,114 @@
|
||||
<template>
|
||||
<div class="base-main">
|
||||
<div>
|
||||
<span class="title">发信配置</span>
|
||||
<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>
|
||||
<el-form v-model="from">
|
||||
<el-form-item prop="username">
|
||||
<span class="min-title">邮箱用户名<br></span>
|
||||
<el-input
|
||||
v-model="from.username"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="邮箱用户名"
|
||||
auto-complete="off"
|
||||
style="width: 600px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="min-title">邮箱密码/授权码<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="from.password"
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
style="width: 600px"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email">
|
||||
<span class="min-title">发件邮箱<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-s-promotion"
|
||||
v-model="from.email"
|
||||
placeholder="邮箱"
|
||||
style="width: 600px"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="smtp">
|
||||
<span class="min-title">SMTP地址<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-connection"
|
||||
v-model="from.smtp"
|
||||
placeholder="smtp"
|
||||
style="width: 600px"
|
||||
>
|
||||
</el-input>
|
||||
<el-card style="width:550px;background-color: var(--theme-bg-color);border-width: 5px;margin-top:10px;border-color:var(--border-color)">
|
||||
<el-form v-model="from" style="font-family: SimHei;font-weight:600;margin-top:20px">
|
||||
<el-form-item prop="username">
|
||||
<span class="min-title">邮箱用户名<br></span>
|
||||
<el-input
|
||||
v-model="from.username"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="邮箱用户名"
|
||||
auto-complete="off"
|
||||
style="width: 500px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="min-title">邮箱密码/授权码<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="from.password"
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
style="width: 500px"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email">
|
||||
<span class="min-title">发件邮箱<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-s-promotion"
|
||||
v-model="from.email"
|
||||
placeholder="邮箱"
|
||||
style="width: 500px"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="smtp">
|
||||
<span class="min-title">SMTP地址<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-connection"
|
||||
v-model="from.smtp"
|
||||
placeholder="smtp"
|
||||
style="width: 500px"
|
||||
>
|
||||
</el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="port">
|
||||
<span class="min-title">端口<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-place"
|
||||
v-model="from.port"
|
||||
placeholder="port"
|
||||
style="width: 500px"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button class="el-button">保存修改</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="port">
|
||||
<span class="min-title">端口<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-place"
|
||||
v-model="from.port"
|
||||
placeholder="port"
|
||||
style="width: 600px"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button class="el-button">保存修改</el-button>
|
||||
</el-form>
|
||||
<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 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>
|
||||
网易163：smtp.163.com<br>
|
||||
Gmail：smtp.gmail.com<br>
|
||||
</span>
|
||||
<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 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>
|
||||
</template>
|
||||
<script>
|
||||
@ -117,9 +152,16 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.base-main {
|
||||
.RightPart{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width:50%;
|
||||
}
|
||||
|
||||
|
||||
.base-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
//align-items: center; margin-left: 50px; overflow: scroll; margin-left: 50px;
|
||||
overflow: scroll !important;
|
||||
@ -143,4 +185,15 @@ background-color: var(--theme-bg-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>
|
||||
@ -9,15 +9,15 @@
|
||||
<div class="base-style-content" >
|
||||
<div class="min-content">
|
||||
<span class="min-title">Logo(浅色模式)</span>
|
||||
<UploadComponent style="margin-top: 10px"></UploadComponent>
|
||||
<UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
|
||||
</div>
|
||||
<div class="min-content" style="margin-left: 50px">
|
||||
<span class="min-title">Logo(深色模式)</span>
|
||||
<UploadComponent style="margin-top: 10px"></UploadComponent>
|
||||
<UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
|
||||
</div>
|
||||
<div class="min-content" style="margin-left: 50px">
|
||||
<span class="min-title">Favicon</span>
|
||||
<UploadComponent style="margin-top: 10px"></UploadComponent>
|
||||
<UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-select">
|
||||
@ -34,7 +34,7 @@
|
||||
<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>
|
||||
<UploadComponent style="margin-left: 20px;z-index:998"></UploadComponent>
|
||||
<div class="img-url">
|
||||
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
|
||||
<el-input
|
||||
@ -51,7 +51,7 @@
|
||||
<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>
|
||||
<UploadComponent style="margin-left: 20px;z-index:998"></UploadComponent>
|
||||
<div class="img-url">
|
||||
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
|
||||
<el-input
|
||||
@ -194,10 +194,10 @@ export default {
|
||||
|
||||
}
|
||||
|
||||
.el-input__inner{
|
||||
::v-deep .el-input__inner{
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
.el-textarea__inner{
|
||||
::v-deep .el-textarea__inner{
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,14 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main" style="text-shadow: 0 0 20px var(--font-border);">
|
||||
<div class="nav-function">
|
||||
<span class="title">导航栏功能：</span>
|
||||
<div class="nav-function-content">
|
||||
<div>
|
||||
<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-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>
|
||||
<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
|
||||
placeholder="名称"
|
||||
v-model="form.name"
|
||||
@ -16,26 +19,27 @@
|
||||
v-model="form.url"
|
||||
clearable style="width: 200px;margin-left: 10px">
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
</el-card>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<span style="margin-left: 10px">{{ item.name }}</span>
|
||||
<i @click="openSearchDialog" style="margin-right: 10px" class="el-icon-s-tools"></i>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
title="搜索设置"
|
||||
@ -143,7 +147,9 @@ export default {
|
||||
}
|
||||
|
||||
.nav-function-content {
|
||||
margin-top:20px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
@ -161,30 +161,31 @@
|
||||
<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: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);
|
||||
border-width: 5px">
|
||||
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-s-opportunity"></i>什么是SEO？</div>
|
||||
</div>
|
||||
<div style="height:15px;width:100%"></div>
|
||||
<span style="font-family: SimHei;font-size:18px;font-weight:600;line-height:25px;">
|
||||
SEO 代表搜寻引擎最佳化/搜寻引擎优化，
|
||||
SEO 代表搜寻引擎最佳化/搜寻引擎优化，
|
||||
是指透过了解搜寻引擎的自然排名运作原理来优化网站，以提高目标网站在有关搜寻引擎内排名的方式。
|
||||
而我们认为SEO 是一种透过了解搜寻引擎的运作及使用者的搜寻习惯来优化网站，以提高随机搜寻排名，
|
||||
从而提高网站流量，最终达致网站的销售或宣传能力的技术。
|
||||
</span>
|
||||
<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-s-opportunity"></i>SEO的重要性</div>
|
||||
<span style="font-family: SimHei;font-size:18px;font-weight:600;line-height:25px;">
|
||||
SEO 至关重要，不仅因为它吸引了很多网站访客，
|
||||
而且如果使用得当，还可以帮助您提高投资回报率。通过创建在搜寻引擎结果中排名靠前的网站，
|
||||
这是一种高效益高回报的方法，可以改善您的网站以获得更多的浏览量，产生随机回报。
|
||||
</span>
|
||||
</div>
|
||||
<div style="height:15px;width:100%"></div>
|
||||
<span style="font-family: SimHei;font-size:18px;font-weight:600;line-height:25px;">
|
||||
通过seo技术获得的流量是免费的，这也是seo最大的好处。会使网站在搜索引擎中的排名，在不花钱竞价
|
||||
的情况下也可以排到首页，排名越高那么被访问的几率也就越大，这样我们就可以很容易的从中获利。<br/>
|
||||
</span>
|
||||
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -279,10 +280,10 @@ export default {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.el-input__inner{
|
||||
::v-deep .el-input__inner{
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
.el-textarea__inner{
|
||||
::v-deep .el-textarea__inner{
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user