From 81d5e7b111824387d3523cc463bdd9f4a2d35ca9 Mon Sep 17 00:00:00 2001
From: Zhang HaoYang <1304907854@qq.com>
Date: Sat, 23 Dec 2023 21:32:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../setting/onsite/BaseSettings.vue           | 195 +++++++++++-------
 .../setting/system/AppearanceSettings.vue     |  14 +-
 .../setting/system/FunctionSettings.vue       |  32 +--
 .../setting/system/InformationSettings.vue    |  23 ++-
 4 files changed, 162 insertions(+), 102 deletions(-)

diff --git a/src/components/setting/onsite/BaseSettings.vue b/src/components/setting/onsite/BaseSettings.vue
index 7a2516e..cf1298f 100644
--- a/src/components/setting/onsite/BaseSettings.vue
+++ b/src/components/setting/onsite/BaseSettings.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/setting/system/AppearanceSettings.vue b/src/components/setting/system/AppearanceSettings.vue
index 3027eec..02c16f6 100644
--- a/src/components/setting/system/AppearanceSettings.vue
+++ b/src/components/setting/system/AppearanceSettings.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/setting/system/FunctionSettings.vue b/src/components/setting/system/FunctionSettings.vue
index 8314694..078dcdb 100644
--- a/src/components/setting/system/FunctionSettings.vue
+++ b/src/components/setting/system/FunctionSettings.vue
@@ -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;
 }
 
diff --git a/src/components/setting/system/InformationSettings.vue b/src/components/setting/system/InformationSettings.vue
index 0016045..4c26b11 100644
--- a/src/components/setting/system/InformationSettings.vue
+++ b/src/components/setting/system/InformationSettings.vue
@@ -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 代表搜寻引擎最佳化/搜寻引擎优化，
+          &nbsp;&nbsp;&nbsp; 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;">
+            &nbsp;&nbsp;&nbsp;通过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);
 }