通道页适配全局样式

web_src/src/components/channelList.vue

@@ -1,15 +1,12 @@
 <template>
-  <div id="channelList">
-    <div style="background-color: #FFFFFF; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
-      <span
-        style="font-size: 1rem; font-weight: 500; ">通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</span>
-
-    </div>
-    <div
-      style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
+  <div id="channelList" style="width: 100%">
+    <div class="page-header">
+      <div class="page-title">
         <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">
           返回
         </el-button>
+        通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</div>
+      <div class="page-header-btn">
       搜索:
       <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
                 prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
@@ -28,10 +25,11 @@
         <el-option label="在线" value="true"></el-option>
         <el-option label="离线" value="false"></el-option>
       </el-select>
-      <el-checkbox size="mini" style="margin-right: 1rem; float: right;" v-model="autoList" @change="autoListChange">
+      <el-checkbox size="mini" v-model="autoList" @change="autoListChange">
         自动刷新
       </el-checkbox>
     </div>
+  </div>
   <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
   <!--设备列表-->
   <el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%">