手机端页面UI适配

src/views/sensitive-control/data-view-message.vue

 <template>
   <div class="data-view-message-wrap">
     <template v-if="searchTableVisible">
+      <div class="class-top-row">
         <el-row class="button-wrap">
           <el-col :span="1" style="margin-left: 20px;width: 70px;margin-top: 4px">
             <label style="font-size: 16px;">标记状态</label>
@@ -29,7 +30,9 @@
             placeholder
             clearable
           ></el-input>
+        </el-row>
 
+        <el-row class="button-wrap">
           <el-button class="each-button" type="primary" @click="labelVisible=true">添加标签筛选</el-button>
           <el-button class="each-button" type="primary" @click="handleSearch">查询</el-button>
           <el-button
@@ -40,9 +43,11 @@
           >导出</el-button>
           <el-button class="each-button" type="primary" @click="showAddConditionModal(true)">添加筛选条件</el-button>
         </el-row>
+      </div>
 
       <template
-        v-if="tableDataList && tableDataList.outModels && tableDataList.outModels.length > 0">
+        v-if="tableDataList && tableDataList.outModels && tableDataList.outModels.length > 0"
+      >
         <el-table
           :data="tableDataList.outModels"
           :row-style="getRowClass"
@@ -94,7 +99,7 @@
                 :value="item.id"
               ></el-option>
             </el-select>
-            </template> -->
+            </template>-->
           </el-table-column>
         </el-table>
         <!-- 分页 -->
@@ -188,10 +193,10 @@
     </el-dialog>
 
     <!-- 添加标签筛选条件弹窗 -->
-    <el-dialog title="标签筛选条件" :visible.sync="labelVisible" width="400px" center>
-      <div v-if="dataProjectLabels" v-for="(item,i) in dataProjectLabels" align="center">
-        <div class="same-line-class" style="margin-right:20px;">{{item.labelValue}}</div>
-        <div class="same-line-class">
+    <el-dialog title="标签筛选条件" :visible.sync="labelVisible" width="300px" center>
+      <div style="display: flex;margin-top:10px;" v-if="dataProjectLabels" v-for="(item,i) in dataProjectLabels">
+        <div class="same-line-class" style="margin-right:10px;margin-top:10px;">{{item.labelValue}}</div>
+        <div class="input-comp">
           <el-input v-model="dataProjectContents[i]" size="small" />
         </div>
       </div>
@@ -203,9 +208,9 @@
 
     <!-- 添加设置标签弹窗 -->
     <el-dialog title="设置标签" :visible.sync="setLabelVisible" width="300px" center>
-      <div v-if="dataProjectLabels" v-for="(item, i) in dataProjectLabels" align="center">
-        <div class="same-line-class" style="margin-right:20px;">{{item.labelValue}}</div>
-        <div class="same-line-class">
+      <div style="display: flex;margin-top:10px;" v-if="dataProjectLabels" v-for="(item, i) in dataProjectLabels" align="center">
+        <div class="same-line-class" style="margin-right:10px;margin-top:10px;">{{item.labelValue}}</div>
+        <div class="input-comp">
           <el-input v-model="setLabelList[i]" size="small" />
         </div>
       </div>
@@ -256,12 +261,7 @@
     </el-dialog>
 
     <!-- 拨号弹窗 -->
-    <el-dialog
-      title="拨号"
-      :visible.sync="dialVisible"
-      width="300px"
-      center
-    >
+    <el-dialog title="拨号" :visible.sync="dialVisible" width="300px" center>
       <a :href="'tel:' + dialPhoneNum">拨打电话给： {{dialPhoneNum}}</a>
       <span slot="footer" class="dialog-footer">
         <!-- <el-button type="primary" @click="gotoDialPhone">确 定</el-button> -->
@@ -280,11 +280,7 @@
     </el-dialog>
 
     <!-- 浏览器检测弹窗 -->
-    <el-dialog
-      title="当前不是chome浏览器，去下载？"
-      :visible.sync="browserVisible"
-      width="300px"
-    >
+    <el-dialog title="当前不是chome浏览器，去下载？" :visible.sync="browserVisible" width="300px">
       <span slot="footer" class="dialog-footer">
         <el-button @click="down">确定</el-button>
         <el-button @click="browserVisible = false">取 消</el-button>
@@ -743,7 +739,7 @@ export default {
           //     vm.historyLabelList.menus.length
           // );
           if (vm.dataProjectLabels == null || vm.dataProjectLabels == "") {
-            vm.$message.info("未设置过标签")
+            vm.$message.info("未设置过标签");
           }
         } else {
           vm.$message.error(res.message);
@@ -795,7 +791,7 @@ export default {
 
     //拨号
     dialPhone(row) {
-      console.log("tableDataList.columnList() : " + row.column1)
+      console.log("tableDataList.columnList() : " + row.column1);
       vm.dialPhoneNum = row.column1;
       vm.dialVisible = true;
     },
@@ -882,31 +878,39 @@ export default {
 
     checkChrome() {
       // return (navigator.appVersion.indexOf('Chrome') || navigator.appVersion.indexOf('chrome')) != -1;
-      return this.getBroswer().broswer=='Chrome'
+      return this.getBroswer().broswer == "Chrome";
     },
     getBroswer() {
       let sys = {};
       let ua = navigator.userAgent.toLowerCase();
       let s;
-      (s = ua.match(/edge\/([\d.]+)/)) ? sys.edge = s[1] :
-      (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1] :
-      (s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
-      (s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
-      (s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
-      (s = ua.match(/opera.([\d.]+)/)) ? sys.opera = s[1] :
-      (s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;
-
-      if (sys.edge) return { broswer : "Edge", version : sys.edge };
-      if (sys.ie) return { broswer : "IE", version : sys.ie };
-      if (sys.firefox) return { broswer : "Firefox", version : sys.firefox };
-      if (sys.chrome) return { broswer : "Chrome", version : sys.chrome };
-      if (sys.opera) return { broswer : "Opera", version : sys.opera };
-      if (sys.safari) return { broswer : "Safari", version : sys.safari };
-      
-      return { broswer : "", version : "0" };
+      (s = ua.match(/edge\/([\d.]+)/))
+        ? (sys.edge = s[1])
+        : (s = ua.match(/rv:([\d.]+)\) like gecko/))
+        ? (sys.ie = s[1])
+        : (s = ua.match(/msie ([\d.]+)/))
+        ? (sys.ie = s[1])
+        : (s = ua.match(/firefox\/([\d.]+)/))
+        ? (sys.firefox = s[1])
+        : (s = ua.match(/chrome\/([\d.]+)/))
+        ? (sys.chrome = s[1])
+        : (s = ua.match(/opera.([\d.]+)/))
+        ? (sys.opera = s[1])
+        : (s = ua.match(/version\/([\d.]+).*safari/))
+        ? (sys.safari = s[1])
+        : 0;
+
+      if (sys.edge) return { broswer: "Edge", version: sys.edge };
+      if (sys.ie) return { broswer: "IE", version: sys.ie };
+      if (sys.firefox) return { broswer: "Firefox", version: sys.firefox };
+      if (sys.chrome) return { broswer: "Chrome", version: sys.chrome };
+      if (sys.opera) return { broswer: "Opera", version: sys.opera };
+      if (sys.safari) return { broswer: "Safari", version: sys.safari };
+
+      return { broswer: "", version: "0" };
     },
     down() {
-       window.location.href = 'http://www.google.cn/chrome/';
+      window.location.href = "http://www.google.cn/chrome/";
     },
 
     sendRequest(type, url, params, callback) {
@@ -981,13 +985,19 @@ export default {
     color: #606266;
     font-size: 14px;
   }
+  .class-top-row {
+    overflow-x: scroll;
+
     .button-wrap {
       margin: 20px 0;
+      width: 600px;
       .each-button {
-      float: right;
-      margin: 0 15px 0 5px;
+        // float: right;
+        margin: 0px 0px 0 20px;
       }
     }
+  }
+
   .el-table {
     -webkit-overflow-scrolling: touch;
   }
@@ -1089,8 +1099,11 @@ export default {
     background: rgba(255, 255, 255, 0.2);
   }
   .same-line-class {
-    margin-top: 20px;
+    // margin-top: 10px;
     display: inline-block;
+    .input-comp {
+      width: 100px;
+    }
   }
 }
 </style>