IP设置

src/views/systemConfig/IPTheChange/index.vue

@@ -22,52 +22,75 @@ onMounted(() => {
 
 <template>
   <div class="app-container scroller">
-    <PageTitle>
-      <template #title>IP设置</template>
-    </PageTitle>
     <div class="app-container__body">
-      <FormBox v-for="(item,index) in ipList" :key="index" :itemData="item"  @confirm="formConfirm" />
+      <div class="pageTitle">
+        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
+        <span>IP设置</span>
+      </div>
+      <div class="box">
+        <div class="line"></div>
+        <div class="content">
+          <el-table ref="table" class="table" :data="ipList" stripe>
+            <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
+            <el-table-column prop="networkInterface" label="网卡" align="center"></el-table-column>
+            <el-table-column prop="inetAddress" label="IP地址" align="center"></el-table-column>
+            <el-table-column prop="subnetMask" label="子网掩码" align="center"></el-table-column>
+            <el-table-column prop="gateway" label="默认网关" align="center"></el-table-column>
+            <el-table-column prop="dns" label="DNS" align="center"></el-table-column>
+          </el-table>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .app-container__body {
-  .contentActive {
-    height: 400px;
-    .item {
+  .pageTitle {
+    margin-bottom: 20px;
     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;
-      }
-      .value {
-        flex: 1;
-        line-height: 32px;
-      }
+    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;
     }
   }
-  :deep(.el-collapse-item__wrap){
-    border: none;
+
+  .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%);
     }
-  :deep(.el-collapse-item){
-    margin-bottom: 6px;
+
+    .content {
+      padding: 28px 30px;
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      .table{
+        height: 100%;
       }
-  :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

src/views/systemConfig/License/index.vue

@@ -97,8 +97,8 @@ onMounted(() => {
             </DividerTitle>
             <el-table ref="table" class="table" :data="infoData.ipMacList" stripe>
               <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
-              <el-table-column property="ip" label="当前服务器IP地址" align="center"></el-table-column>
-              <el-table-column property="mac" label="当前服务器MAC地址" align="center"></el-table-column>
+              <el-table-column prop="ip" label="当前服务器IP地址" align="center"></el-table-column>
+              <el-table-column prop="mac" label="当前服务器MAC地址" align="center"></el-table-column>
             </el-table>
           </div>
         </div>