系统日志管理

src/views/systemConfig/SystemLogManage/index.vue

@@ -83,38 +83,40 @@ onMounted(() => {
 
 <template>
   <div class="app-container scroller">
-    <PageTitle>
-      <template #title>系统控制台</template>
-    </PageTitle>
     <div class="app-container__body">
-      <div class="formBox">
-        <el-form-item label="保留月份:" prop="">
-          <div style="display: flex;">
-            <el-select v-model="keepMonth" placeholder="请选择">
-              <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item">
-              </el-option>
-            </el-select>
-            <el-button type="primary" style="width: 120px; margin-left: 10px;" @click="handelSave()">保存</el-button>
-          </div>
-        </el-form-item>
-        <el-form-item label="日志日期:" prop="">
-          <div style="width: 100%;justify-content: space-between;display: flex;">
-            <div style="display: flex;">
-              <el-date-picker v-model="queryData.date" type="date" placeholder="请选择日志日期"
-                value-format="YYYY-MM-DD"></el-date-picker>
-              <div style="display: flex;align-items: center;margin-left: 30px;">
-                <span>近</span>
-                <el-input v-model="queryData.count" style="width: 80px;margin: 0px 6px;"></el-input>
-                <span>条</span>
-              </div>
+      <div class="pageTitle">
+        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
+        <span>系统日志管理</span>
+      </div>
+      <div class="box">
+        <div class="line"></div>
+        <div class="content">
+          <el-form-item label="保留月份:" prop="">
+            <div style="display: flex;width: 100%;">
+              <el-select v-model="keepMonth" placeholder="请选择" style="flex: 1;">
+                <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item">
+                </el-option>
+              </el-select>
+              <el-button type="primary" style="width: 60px; margin-left: 10px;border-radius: 0;" @click="handelSave()">保存</el-button>
             </div>
-            <div>
-              <el-button type="primary" @click="querylogFunc()">查询</el-button>
-              <el-button type="primary" style="margin-left: 10px;" @click="downloadFunc()">下载</el-button>
+          </el-form-item>
+          <el-form-item label="日志日期:" prop="">
+            <div style="width: 100%;justify-content: space-between;display: flex;">
+              <div style="display: flex;width: 100%;">
+                <el-date-picker style="flex: 1;" v-model="queryData.date" type="date" placeholder="请选择日志日期"
+                  value-format="YYYY-MM-DD"></el-date-picker>
+                <div style="display: flex;align-items: center;margin-left: 30px;">
+                  <span>近</span>
+                  <el-input v-model="queryData.count" style="width: 80px;margin: 0px 6px;"></el-input>
+                  <span>条</span>
+                </div>
+                <el-button type="primary" style="width: 60px;border-radius: 0;margin-left: 24px;" @click="querylogFunc()">查询</el-button>
+                <el-button type="primary" style="width: 60px; margin-left: 10px;border-radius: 0;background: rgba(11, 136, 251, 1);border-color: rgba(11, 136, 251, 1);" @click="downloadFunc()">下载</el-button>
+              </div>
             </div>
-          </div>
-        </el-form-item>
-        <el-input type="textarea" v-model="resultStr" rows="20" placeholder="" readonly></el-input>
+          </el-form-item>
+          <el-input type="textarea" v-model="resultStr" rows="20" placeholder="" readonly></el-input>
+        </div>
       </div>
     </div>
   </div>
@@ -122,21 +124,55 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .app-container__body {
-  :deep(.el-form-item__label){
-    font-weight: 400;
-  }
-  :deep(.el-input__wrapper) {
-    background: #f3f5fa;
-  }
-  :deep(.el-select__wrapper) {
-    background: #f3f5fa;
-  }
-  :deep(.el-textarea__inner) {
-    background: #f3f5fa;
+  .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;
+    }
   }
-  .formBox {
-    width: 800px;
-    margin: 0px auto;
+  .box {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    background: #fff;
+
+    .line {
+      width: 100%;
+      height: 2px;
+      border-radius: 5px 5px 0px 0px;
+      background: linear-gradient(90deg,
+          rgba(33, 103, 217, 1) 0%,
+          rgba(17, 200, 250, 1) 34.03%,
+          rgba(33, 103, 217, 1) 64.58%,
+          rgba(48, 128, 255, 1) 100%);
+    }
+
+    .content {
+      padding: 52px 280px;
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      :deep(.el-form-item__label){
+        font-weight: 400;
+        font-size: 12px;
+        color: rgba(148, 148, 148, 1);
+      }
+      :deep(.el-textarea__inner) {
+        background: #f3f5fa;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file