系统备份

src/views/systemConfig/SystemBackups/index.vue

@@ -44,31 +44,24 @@ const exportSqlFunc = async () => {
 
 <template>
   <div class="app-container scroller">
-    <PageTitle>
-      <template #title>系统备份</template>
-    </PageTitle>
     <div class="app-container__body">
-      <div class="updata">
-        <div class="left">
-          <img src="@/assets/images/systemConfig/systemBackups.png" alt=""
-            style="vertical-align: middle; padding-right: 10px;" />
-        </div>
-        <div class="right">
-          <div class="title-header">系统备份</div>
+      <div class="pageTitle">
+        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
+        <span>系统备份</span>
+      </div>
+      <div class="box">
+        <div class="updata">
+          <img src="@/assets/images/systemConfig/systemBackups.png" alt="" />
           <div style="margin-top: 30px;">
-            <el-button icon="Upload" :loading="uploadLoading" style="position: relative;">
+            <el-button icon="Upload" :loading="uploadLoading" style="position: relative;width: 115px;height: 40px;background: rgba(33, 103, 217, 1);color: #fff;">
               <span>数据库导入</span>
               <div class="uploadBut">
                 <CustomUpload v-if="!uploadLoading" @file-change="handleFileChange" />
               </div>
             </el-button>
-            <el-button icon="Download" :loading="uploadLoading" @click="exportSqlFunc">数据库导出</el-button>
-          </div>
-          <div class="title-header">恢复配置库</div>
-          <div>
-            <span class="title-item">注意：</span>
-            <span>您可以将配置库信息导出，也可以随时通过导入功能初始化配置库。</span>
+            <el-button icon="Download" style="width: 115px;height: 40px;background: rgba(11, 136, 251, 1);color: #fff;margin-left: 32px" :loading="uploadLoading" @click="exportSqlFunc">数据库导出</el-button>
           </div>
+          <div class="title-header">注意：您可以将配置库信息导出，也可以随时通过导入功能初始化配置库。</div>
         </div>
       </div>
     </div>
@@ -77,39 +70,54 @@ const exportSqlFunc = async () => {
 
 <style lang="scss" scoped>
 .app-container__body {
-  align-items: center;
+  .pageTitle {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0px;
+    line-height: 22px;
+    color: rgba(53, 64, 79, 1);
+
+    .icon {
+      margin-right: 6px;
+      width: 16px;
+      height: 16px;
+    }
+  }
+  .box {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+  }
   .updata {
     margin-top: 10%;
-    width: 700px;
+    width: 100%;
     display: flex;
-    .right {
-      padding-left: 20px;
-      .uploadBut {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        opacity: 0;
-      }
-      .title-header {
-        height: 84px;
-        line-height: 40px;
-        font-weight: 700;
-        font-size: 18px;
-        color: #666;
-        position: relative;
-        top: 40px;
-      }
-      .title-item {
-        font-weight: 700;
-        line-height: 30px;
-        color: #666;
-      }
+    flex-direction: column;
+    align-items: center;
+    img{
+      width: 640px;
+    }
+    .uploadBut {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      opacity: 0;
+    }
+    .title-header {
+      margin-top: 31px;
+      font-size: 14px;
+      line-height: 22px;
+      color: rgba(253, 84, 81, 1);
     }
   }
 }

src/views/systemConfig/SystemParam/index.vue

@@ -50,18 +50,6 @@ onMounted(() => {
           </el-tabs>
         </div>
       </div>
-      <!-- <el-collapse v-model="collapseValue" accordion>
-        <el-collapse-item :title="item.category" :name="index + 1" v-for="(item, index) in collapseData" :key="index">
-          <div class="contentActive">
-            <div style="overflow: auto; height: 100%; padding: 20px 0px;">
-              <div class="item" v-for="(property, index) in item.list" :key="index">
-                <div class="key">{{ property.key }}</div>
-                <div class="value">{{ property.value }}</div>
-              </div>
-            </div>
-          </div>
-        </el-collapse-item>
-      </el-collapse> -->
     </div>
   </div>
 </template>