feat: network-config responsive

src/views/network-config.vue

@@ -4,71 +4,62 @@
 
   <el-form label-position="top" :model="data" ref="networkForm">
     <el-row :gutter="20">
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="上报IP1地址" prop="ip1">
           <el-input v-model="data.ip1"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="上报端口号1" prop="port1">
           <el-input v-model="data.port1"></el-input>
         </el-form-item>
       </el-col>
-    </el-row>
 
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="上报IP2地址" prop="ip2">
           <el-input v-model="data.ip2"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="上报端口号2" prop="port2">
           <el-input v-model="data.port2"></el-input>
         </el-form-item>
       </el-col>
-    </el-row>
 
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="上报IP3地址" prop="ip3">
           <el-input v-model="data.ip3"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="上报端口号3" prop="port3">
           <el-input v-model="data.port3"></el-input>
         </el-form-item>
       </el-col>
-    </el-row>
 
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="备用ip地址" prop="ipBackup">
           <el-input v-model="data.ipBackup"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="备用端口号" prop="portBackup">
           <el-input v-model="data.portBackup"></el-input>
         </el-form-item>
       </el-col>
-    </el-row>
 
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="用户名" prop="account">
           <el-input v-model="data.account"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="密码" prop="password">
           <el-input v-model="data.password"></el-input>
         </el-form-item>
       </el-col>
-    </el-row>
+
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="APN" prop="apn">
           <el-input v-model="data.apn"></el-input>
         </el-form-item>