详情页

src/assets/css/home-style.css

@@ -4,9 +4,13 @@
     box-sizing: border-box;
 }
 
+
+
 :root {
+    --font-border: rgb(213, 79, 27);
     --theme-comment-color: rgba(178, 188, 250, 0.4);
     --theme-bg-color: rgba(16 18 27 / 40%);
+    --theme-bg-color-deep: rgba(16, 18, 27, 0.51);
     --border-color: rgba(28, 32, 37, 0.25);
     --theme-color: #f9fafb;
     --inactive-color: rgb(113 119 144 / 78%);
@@ -24,8 +28,10 @@
 }
 
 .light-mode {
-    --theme-comment-color: rgba(255, 202, 145, 0.4);
+    --font-border: rgb(108, 155, 255);
+    --theme-comment-color: rgba(201, 217, 255, 0.4);
     --theme-bg-color: rgb(255 255 255 / 31%);
+    --theme-bg-color-deep: rgb(255 255 255 / 51%);
     --theme-color: #3c3a3a;
     --inactive-color: #333333;
     --button-inactive: #3c3a3a;
@@ -941,6 +947,8 @@ body.light-mode .video-bg:before {
     flex-direction: column;
 }
 
+
+
 /*背景板*/
 .JustBack{
     display: flex;

src/assets/img/Like3D.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703259082706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1153" data-spm-anchor-id="a313x.collections_detail.0.i8.64c73a81KiqVeN" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M276.448855 311.659434l-89.292663-13.343487 78.76911-35.288561 89.292662 13.327733-78.769109 35.304315zM768.141391 978.124871l132.284842-443.942702 78.76911-35.288561-132.284843 443.926948-78.769109 35.304315zM815.670671 392.240233L588.406036 359.740099l78.76911-35.320069 227.264635 32.515889-78.76911 35.304314z" fill="#a9ddf8" p-id="1154" data-spm-anchor-id="a313x.collections_detail.0.i1.64c73a81KiqVeN" class=""></path><path d="M588.406036 359.740099l7.183743-19.849816 78.76911-35.320068-7.183743 19.849815-78.76911 35.320069zM608.901759 307.201103l78.769109-35.320069-78.769109 35.320069zM603.844782 98.415701l-38.203018-41.022952 78.769109-35.304315 38.203018 41.007198-78.769109 35.320069zM565.641764 57.392749l-1.008245-0.992491 78.76911-35.304315 1.008244 0.992491-78.769109 35.304315zM564.617765 56.400258l78.76911-35.304315-78.76911 35.304315zM120.45451 933.19497V288.359532l78.76911-35.320069v644.835439l-78.76911 35.320068z" fill="#a9ddf8" p-id="1155" data-spm-anchor-id="a313x.collections_detail.0.i13.64c73a81KiqVeN" class=""></path><path d="M120.45451 288.359532L31.508432 275.063306l78.769109-35.304315 88.946079 13.280472-78.76911 35.320069zM31.508432 275.063306l78.769109-35.304315-78.769109 35.304315zM564.617765 56.400258c-21.031352-20.448461-48.222449-25.993806-70.073-16.762067l78.76911-35.320068c21.850551-9.23174 49.041648-3.670641 70.088754 16.77782l-78.76911 35.304315zM734.018612 1017.225857c15.91136-6.34879 28.48291-20.164892 34.122779-39.100986l78.769109-35.304315c-5.639868 18.904586-18.195664 32.736442-34.122778 39.100986l-78.76911 35.320068zM900.426233 534.182169c18.242926-61.25086-24.575962-132.946503-84.755562-141.941936l78.76911-35.304314c60.1796 8.979678 102.998488 80.691076 84.755562 141.941935l-78.76911 35.304315zM595.589779 339.874529c3.654887-10.0982 8.128972-20.574491 13.31198-32.673426l78.769109-35.304315a632.421427 632.421427 0 0 0-13.311979 32.673427l-78.76911 35.304314z" fill="#a9ddf8" p-id="1156" data-spm-anchor-id="a313x.collections_detail.0.i5.64c73a81KiqVeN" class=""></path><path d="M608.901759 307.201103c1.638397-3.843933 3.355564-7.829649 5.119992-12.03592l78.769109-35.304315c-1.764428 4.190517-3.465841 8.191987-5.119992 12.020166l-78.769109 35.320069zM614.021751 295.165183c6.931682-16.399729 14.619547-35.383084 19.960092-54.807547l78.76911-35.288561c-5.356299 19.408709-13.028411 38.392064-19.960093 54.776039l-78.769109 35.320069z" fill="#a9ddf8" p-id="1157" data-spm-anchor-id="a313x.collections_detail.0.i12.64c73a81KiqVeN" class=""></path><path d="M633.981843 240.37339c5.246023-19.062125 9.405032-42.535319 6.254267-67.583896l78.76911-35.288561c3.150764 25.048577-1.008245 48.490264-6.254267 67.552388l-78.76911 35.320069z" fill="#a9ddf8" p-id="1158" data-spm-anchor-id="a313x.collections_detail.0.i11.64c73a81KiqVeN" class=""></path><path d="M640.23611 172.805248a126.014822 126.014822 0 0 0-36.391328-74.389547l78.769109-35.320069a126.014822 126.014822 0 0 1 36.391329 74.389547l-78.76911 35.320069z" fill="#a9ddf8" p-id="1159" data-spm-anchor-id="a313x.collections_detail.0.i10.64c73a81KiqVeN" class=""></path><path d="M564.617765 56.400258c-29.22334-28.388387-70.309307-28.073311-92.443427 0.708922L276.448855 311.659434l-89.292663-13.343487v644.835439l517.418527 77.319758c29.050048 4.348055 54.760285-12.77635 63.566672-42.346273l132.284842-443.942702c18.242926-61.25086-24.575962-132.946503-84.755562-141.941936L588.406036 359.740099l7.183743-19.849816a632.988565 632.988565 0 0 1 13.31198-32.68918c1.638397-3.843933 3.355564-7.829649 5.119992-12.03592 6.931682-16.399729 14.619547-35.383084 19.960092-54.807547 5.246023-19.062125 9.405032-42.503812 6.254267-67.552388a126.014822 126.014822 0 0 0-36.391328-74.389547l-38.203018-41.022952-1.008245-0.992491zM31.508432 275.063306v644.835439l88.946078 13.296225V288.359532L31.508432 275.063306z" fill="#fb9f94" p-id="1160" data-spm-anchor-id="a313x.collections_detail.0.i0.64c73a81KiqVeN" class=""></path></svg>

src/components/detail/NavDetail.vue

@@ -115,7 +115,7 @@
         </div>
       </div>
       <!--用户评论-->
-      <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
+      <div class="JustBack" style="width:670px;height:auto;display:flex; flex-direction: column; flex-wrap: nowrap;">
         <div style="width:670px;color: var(--theme-color)">
           <div class="HeadLine" style="margin-top:30px">
             <div class="HeadSquare"></div>

src/components/detail/UserComment.vue

@@ -19,18 +19,16 @@
     </el-card>
     <!--评论-->
     <el-card style="background-color: var(--theme-comment-color) !important;margin-top:10px">
-      <div style="display: flex;flex-direction: column;">
+      <div style="display: flex;flex-direction: column;flex-wrap: wrap">
         <span style="font-family: STHupo;font-size:25px;margin-left:-10px;color:var(--theme-color)">评论广场</span>
         <!--单条评论-->
+        <el-divider></el-divider>
         <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top:40px">
           <img class="little-Circle" style="width:50px !important;height:50px !important;margin-top:20px;"  src="../../assets/img/beauty.jpg"/>
           <div style="display: flex;flex-direction: column">
             <div style="display: flex;flex-direction: row;color:var(--theme-color);margin-left:5px;">
               <span style="font-family: STHupo;width:50px">用户:</span><span style="font-size:13px;margin-left:5px;width:100px">JK少女</span>
-              <span style="font-family: STHupo;margin-left:15px;width:100px">评论时间:</span><span style="font-size:13px;margin-left:2px;width:150px">2023年12月22日</span>
+              <span style="font-family: STHupo;margin-left:15px;width:100px">评论时间:</span><span style="font-size:13px;margin-left:0px;width:150px">2023年12月22日</span>
-              <div style="display: flex;flex-direction: row-reverse;width:0%">
-                <el-button type="success" icon="el-icon-thumb" size="small" circle style="margin-top:-7px;"></el-button>
-              </div>
             </div>
             <div class='arrow-box popper border arrow-left'
                  style="background-color: var(--theme-comment-color);margin-left:10px;margin-top:7px;width:430px;border: 3px solid var(--border-color)">
@@ -38,10 +36,31 @@
                 8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码
               </div>
             </div>
+            <div style="display: flex;flex-direction: row-reverse;width:100%;">
+              <span style="font-size:18px;font-family: STHupo;line-height:44px;margin-left:5px">112</span>
+              <el-button type="danger" icon="myIcon" size="medium" plain circle style="margin-top:6px;" ></el-button>
+            </div>
+          <!--子评论-->
+            <el-card style="background-color: var(--theme-comment-color) !important;margin-top:50px;margin-left:70px">
+              <div style="display: flex;flex-direction: column;flex-wrap: wrap">
+                <div style="display: flex;flex-direction: row;color:var(--theme-color);margin-left:5px;">
+                  <img class="little-Circle" style="width:50px !important;height:50px !important;margin-top:10px;"  src="../../assets/img/beauty.jpg"/>
+                  <span style="font-family: STHupo;width:70px;margin-top:25px;margin-left:10px">JK少男</span>
+                  <span style="font-family: STHupo;width:50px;margin-top:25px;color: rgba(255,78,78,0.5)!important;">回复 </span>
+                  <span style="font-family: STHupo;width:70px;margin-top:25px;margin-left:7px">JK少女</span>
+                  <span style="font-family: STHupo;width:70px;margin-top:25px;margin-left:7px">:</span>
                 </div>
               </div>
+              <div style="display: flex;flex-direction: column;flex-wrap: wrap">
+                内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
+                内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
+                内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
+                内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
+              </div>
+            </el-card>
 
-
+          </div>
+        </div>
       </div>
     </el-card>
   </div>
@@ -153,5 +172,27 @@ $popper-background-color: #000;
   }
 }
 
+::v-deep .myIcon{
+  background: url("../../assets/img/Like3D.svg")center no-repeat;
+  width:15px;
+  height:15px;
+  background-size: cover;
+}
+
+::v-deep .myIcon:before {
+  content: "替";
+  font-size: 17px;
+  visibility: hidden;
+}
+
+
+::v-deep .myIcon:before {
+  content: "\e611";
+}
+
+::v-deep .el-divider{
+  background-color:var(--theme-color);
+  height:2px
+}
 
 </style>

src/components/home/MainHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-header">
+  <div class="main-header" style="z-index:999">
     <a class="menu-link-main" href="#">All Apps</a>
     <div class="header-menu">
       <a class="main-header-link is-active" href="#">Desktop</a>

src/components/setting/layout/SettingMainHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-header">
+  <div class="main-header" style="z-index:999">
 <!--    <a class="menu-link-main" href="#">All Apps</a>-->
     <div class="header-menu">
       <router-link class="main-header-link" active-class="is-active" v-for="(item,index) in tabList" v-if="tabList.length>0" :key="item.index" :to="item.path" >{{item.libel}}</router-link>

src/components/setting/onsite/ImportExport.vue

@@ -58,6 +58,7 @@ export default {
 
 .min-title {
   color: var(--theme-color);
+  margin-top:20px;
 //background-color: var(--theme-bg-color);
 }
 </style>

src/components/setting/system/AppearanceSettings.vue

@@ -1,63 +1,76 @@
 <template>
-  <div class="main">
+
-    <div class="base-style">
+  <div class="main" style="text-shadow: 0 0 20px var(--font-border);">
-      <span class="title">基础样式</span>
+    <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">
+    <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">
+      <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">
+    <div class="ui-model" style="margin-top:20px">
-      <span class="title">UI模式</span>
+      <div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
-      <div class="min-ui-model">
+        <div class="HeadSquare"></div>
-        <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"
@@ -67,8 +80,8 @@
               inactive-value="0" >
           </el-switch>
         </div>
-        <div>
+        <div style="margin-top:20px">
-          <span class="min-title">默认深色：</span>
+          <span class="min-title" style="margin-top:20px">默认深色：</span>
           <el-switch
               v-model="value"
               active-color="#13ce66"
@@ -77,6 +90,7 @@
               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>

src/components/setting/system/FunctionSettings.vue

@@ -149,9 +149,9 @@ export default {
 
 .title {
   font-weight: bolder;
-  font-size: 20px;
+  font-size: 25px;
   color: var(--theme-color);
-  margin-top: 10px;
+  margin-top: 30px;
 //background-color: var(--theme-bg-color);
 }
 

src/components/setting/system/InformationSettings.vue

@@ -1,77 +1,89 @@
 <template>
-  <div class="main">
+  <div class="main" style="text-shadow: 0 0 20px var(--font-border);">
-    <div class="base-info">
+    <div class="LeftPart" style="width:70%">
-      <span class="title">基础信息</span>
+      <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-order"></i>信息设置</div>
+      </div>
+      <div class="base-info" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;">
+        <div class="HeadLine" style="margin-top:20px;margin-left:-6px;">
+          <div class="TitleFont"  style="font-size:20px!important;color:var(--theme-color)"><i class="el-icon-menu"></i>基础信息</div>
+        </div>
+        <el-card style="background-color: var(--theme-bg-color);border-width: 5px;margin-top:10px;border-color:var(--border-color)">
           <div class="base-info-content" >
-        <div style="display: flex;flex-direction: column">
+            <div class="LineInput">
               <span class="min-title">站名:</span>
               <el-input
                   placeholder="请输入内容"
                   v-model="input"
                   clearable
-              style="width: 600px;">
+                  style="width: 400px;margin-top:10px">
               </el-input>
             </div>
-        <div style="display: flex;flex-direction: column">
+            <div class="LineInput">
               <span class="min-title">SEO描述:</span>
               <el-input
                   type="textarea"
                   :rows="3"
                   placeholder="请输入内容"
                   v-model="textarea"
-              style="width: 600px;">
+                  style="width: 500px;margin-top:10px">
               </el-input>
             </div>
-        <div style="display: flex;flex-direction: column">
+            <div class="LineInput">
               <span class="min-title">SEO关键词:</span>
               <el-input
                   type="textarea"
                   :rows="3"
                   placeholder="请输入内容"
                   v-model="textarea"
-              style="width: 600px;">
+                  style="width: 500px;margin-top:10px">
               </el-input>
             </div>
-        <div style="display: flex;flex-direction: column">
+            <div class="LineInput">
               <span class="min-title">底部链接（可用作友链）：</span>
-          <div v-for="(item, index) in form" :key="index" >
+              <div v-for="(item, index) in form" :key="index" style="margin-top:10px;">
+                <el-card style="width:500px;height:180px;background-color: var(--theme-bg-color)">
                   <el-form>
                     <el-form-item
                         label="名称"
+                        style="color:var(--theme-color)"
                         :prop="'dynamicItem.' + index + '.name'"
                         :rules="{
                 required: true, message: '名称不能为空', trigger: 'blur'
         }"
                     >
-              <el-input style="width: 500px" v-model="item.name"></el-input>
+                      <el-input style="width: 300px" v-model="item.name"></el-input>
                     </el-form-item>
                     <el-form-item
                         label="链接"
+                        style="color:var(--theme-color)"
                         :prop="'dynamicItem.' + index + '.phone'"
                         :rules="[
                 {required: true, message: 'url不能为空', trigger: 'blur'},
           ]"
                     >
-              <el-input style="width: 500px" v-model="item.url"></el-input>
+                      <el-input style="width: 300px" v-model="item.url"></el-input>
                     </el-form-item>
-            <el-form-item>
+                    <el-form-item style="color:var(--theme-color);">
-              <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
+                      <i class="el-icon-delete" style="font-size:25px" @click="deleteItem(item, index)"></i>
                     </el-form-item>
                   </el-form>
+                </el-card>
+
               </div>
-          <el-button @click="addItem" style="width: 100px;" type="primary">增加</el-button>
+              <el-button @click="addItem" style="width: 100px;margin-top:20px" plain round type="primary">增加</el-button>
             </div>
-        <div style="display: flex;flex-direction: column">
+            <div class="LineInput" style="margin-top:25px!important;">
               <span class="min-title">底部信息：</span>
               <el-input
                   type="textarea"
                   :rows="3"
                   placeholder="请输入内容"
                   v-model="textarea"
-              style="width: 600px;">
+                  style="width: 500px;margin-top:10px">
               </el-input>
             </div>
-
             <div style="display: flex;flex-direction: column">
               <span class="min-title">版权信息：</span>
               <el-input
@@ -79,7 +91,7 @@
                   :rows="3"
                   placeholder="请输入内容"
                   v-model="textarea"
-              style="width: 600px;">
+                  style="width: 500px;margin-top:10px">
               </el-input>
             </div>
             <div style="display: flex;flex-direction: column">
@@ -89,26 +101,31 @@
                   :rows="3"
                   placeholder="请输入内容"
                   v-model="textarea"
-              style="width: 600px;">
+                  style="width: 500px;margin-top:10px">
               </el-input>
             </div>
+          </div>
+        </el-card>
 
       </div>
+      <div class="advanced-info" style="font-family: SimHei;font-size:18px;font-weight:600;">
+        <div class="HeadLine" style="margin-top:20px;margin-left:-6px;">
+          <div class="TitleFont"  style="font-size:20px!important;color:var(--theme-color)"><i class="el-icon-s-custom"></i>进阶设置</div>
         </div>
-    <div class="advanced-info">
+        <el-card style="background-color: var(--theme-bg-color);border-width: 5px;margin-top:10px;border-color:var(--border-color)">
-      <span class="title">进阶信息</span>
+          <div class="LineInput">
-      <div style="display: flex;flex-direction: column">
             <span class="min-title">代理网站提示语:</span>
             <el-input
                 placeholder="请输入内容"
                 v-model="input"
                 clearable
-            style="width: 600px;">
+                style="width: 500px;margin-top:10px">
             </el-input>
           </div>
-      <div>
+          <div class="LineInput">
             <span class="min-title">社交媒体：</span>
-        <div v-for="(item, index) in form" :key="index" >
+            <div v-for="(item, index) in form" :key="index" style="margin-top:10px">
+              <el-card style="width:500px;height:180px;background-color: var(--theme-bg-color)">
                 <el-form >
                   <el-form-item
                       label="名称"
@@ -117,7 +134,7 @@
                 required: true, message: '名称不能为空', trigger: 'blur'
         }"
                   >
-              <el-input style="width: 500px" v-model="item.name"></el-input>
+                    <el-input style="width: 400px" v-model="item.name"></el-input>
                   </el-form-item>
                   <el-form-item
                       label="链接"
@@ -126,17 +143,50 @@
                 {required: true, message: 'url不能为空', trigger: 'blur'},
           ]"
                   >
-              <el-input style="width: 500px" v-model="item.url"></el-input>
+                    <el-input style="width: 400px" v-model="item.url"></el-input>
                   </el-form-item>
-            <el-form-item>
+                  <el-form-item style="color:var(--theme-color);">
-              <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
+                    <i class="el-icon-delete" style="font-size:25px" @click="deleteItem(item, index)"></i>
                   </el-form-item>
                 </el-form>
-        </div>
+              </el-card>
-        <el-button @click="addItem" style="width: 100px;" type="primary">增加</el-button>
-      </div>
 
             </div>
+            <el-button @click="addItem" style="width: 100px;margin-top:20px" plain round type="primary">增加</el-button>
+          </div>
+        </el-card>
+      </div>
+    </div>
+    <div class="RightPart" >
+      <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;
+      background-color: var(--theme-bg-color-deep);border-color:var(--border-color);
+      border-width: 5px">
+        <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 是一种透过了解搜寻引擎的运作及使用者的搜寻习惯来优化网站，以提高随机搜寻排名，
+        从而提高网站流量，最终达致网站的销售或宣传能力的技术。
+        </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>
+      </el-card>
+    </div>
+
   </div>
 </template>
 <script>
@@ -177,7 +227,7 @@ export default {
 <style scoped>
 .main {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   flex-wrap: nowrap;
 //align-items: center; margin-left: 50px; overflow: scroll;
   margin-left: 50px;
@@ -203,12 +253,37 @@ export default {
 }
 
 .base-info-content {
+  margin-top:20px;
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
 }
 
 .min-title {
+  margin-top:10px;
   color: var(--theme-color);
 }
+
+.RightPart{
+  display: flex;
+  flex-direction: column;
+  width:50%;
+}
+.LineInput{
+  display: flex;
+  flex-direction: column;
+  margin-top:10px;
+}
+
+::v-deep .el-form-item__label{
+  color: var(--theme-color);
+}
+
+.el-input__inner{
+  background-color: var(--border-color);
+}
+.el-textarea__inner{
+  background-color: var(--border-color);
+}
+
 </style>

src/components/setting/system/Upload.vue

@@ -14,6 +14,7 @@
       action=""
       list-type="picture-card"
       :file-list="fileList"
+      style="z-index:-999"
   ></el-upload>
 
 </template>