系统参数

src/views/systemConfig/SystemParam/index.vue

@@ -3,7 +3,7 @@ import { onMounted, ref, toRefs } from 'vue'
 import { queryAll } from '@/api/systemConfig/systemParam.js'
 
 const collapseData = ref([])
-const collapseValue = ref([1])
+const activeName = ref(1)
 
 // 获取数据
 const getQueryAll = async () => {
@@ -28,11 +28,29 @@ onMounted(() => {
 
 <template>
   <div class="app-container scroller">
-    <PageTitle>
-      <template #title>系统参数</template>
-    </PageTitle>
     <div class="app-container__body">
-      <el-collapse v-model="collapseValue" accordion>
+      <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-tabs v-model="activeName">
+            <el-tab-pane :label="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-tab-pane>
+          </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;">
@@ -43,48 +61,82 @@ onMounted(() => {
             </div>
           </div>
         </el-collapse-item>
-      </el-collapse>
+      </el-collapse> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .app-container__body {
-  .contentActive {
-    height: 400px;
-    .item {
-      display: flex;
-      height: 32px;
-      color: #7a8495;
-      .key {
-        padding-left: 5px;
-        width: 300px;
-        vertical-align: middle;
-        float: left;
-        font-size: 14px;
-        font-weight: 700;
-        box-sizing: border-box;
+  .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;
+    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: 28px 30px;
+      flex: 1;
+      overflow: hidden;
+      :deep(.el-tabs--top){
+        height: 100%;
+        .el-tab-pane{
+          height: 100%;
+        }
       }
-      .value {
+      :deep(.el-tabs__content){
         flex: 1;
-        line-height: 32px;
+        overflow: hidden;
+      }
+      .contentActive {
+        height: 100%;
+        .item {
+          display: flex;
+          color: #7a8495;
+          .key {
+            padding-left: 5px;
+            width: 300px;
+            vertical-align: middle;
+            float: left;
+            font-size: 14px;
+            font-weight: 700;
+            box-sizing: border-box;
+          }
+          .value {
+            flex: 1;
+            line-height: 32px;
+          }
+        }
       }
     }
   }
-  :deep(.el-collapse-item__wrap){
-    border: none;
-  }
-  :deep(.el-collapse-item){
-    margin-bottom: 6px;
-  }
-  :deep(.el-collapse-item__header) {
-    height: 32px;
-    padding-left: 20px;
-    background: #7a8495;
-    color: #fff;
-  }
-  :deep(.el-collapse-item__header.is-active) {
-    background: #2c9ef7;
-  }
 }
 </style>
\ No newline at end of file