feat: device-create responsive

src/views/device-create.vue

@@ -1,116 +1,100 @@
 <template>
   <el-form label-position="top" :model="data" ref="deviceCreate">
     <el-row :gutter="20">
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="设备ID号" prop="deviceId">
           <el-input v-model="data.deviceId"></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="设备完整ID" prop="deviceFullId">
           <el-input v-model="data.deviceFullId"></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="area">
           <el-input v-model="data.area"></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="address">
           <el-input v-model="data.address"></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="contact">
           <el-input v-model="data.contact"></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="phone">
           <el-input v-model="data.phone"></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="lon">
           <el-input v-model="data.lon"></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="lat">
           <el-input v-model="data.lat"></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="head">
           <el-input v-model="data.head"></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="installLocation">
           <el-input v-model="data.installLocation"></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="installTime">
           <el-input v-model="data.installTime"></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="runTime">
           <el-input v-model="data.runTime"></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="linkAddress">
           <el-input v-model="data.linkAddress"></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="probNo">
           <el-input v-model="data.probNo"></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="simple">
           <el-input v-model="data.simple"></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="sim卡1" prop="sim1">
           <el-input v-model="data.sim1"></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="deviceDirection">
           <el-input v-model="data.deviceDirection"></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="joint">
           <el-input v-model="data.joint"></el-input>
         </el-form-item>
@@ -118,7 +102,7 @@
     </el-row>
 
     <el-row :gutter="20">
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="备注" prop="remark">
           <el-input v-model="data.remark" type="textarea"></el-input>
         </el-form-item>