mock和线上质检页面风格和其他页面统一

src/App.vue

@@ -93,4 +93,11 @@ export default {
 .el-pagination{
   margin: 2% 0 2% 0;
 }
+.stylus-content{
+    width: 98%;
+    padding: 0.3% 1% 1% 1%;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 4px;
+}
 </style>

src/views/mock/httpmock.vue

@@ -1,7 +1,6 @@
 <template style="height=0px;improtanent">
-  <div class="app-container">
-    <el-header style="height: auto;!improtant">
-      <div class="filter-container" style="padding-bottom: 20px;!improtant">
+  <div class="app-container" style="background-color: rgb(242, 243, 246);min-height: calc(100vh - 80px);padding: 1% 0px;">
+      <div class="filter-container stylus-head" style="padding-bottom: 20px;!improtant">
         <el-input v-model="listQuery.id" placeholder="接口ID" style="width: 80px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.customName" placeholder="接口名称" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.url" placeholder="url" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
@@ -20,9 +19,9 @@
         <el-button class="filter-item" style="margin-left: 1px;" type="primary" icon="el-icon-edit" @click="handleCreate">新增</el-button>
         <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:1px;" @change="tableKey=tableKey+1">备注</el-checkbox>
       </div>
-    </el-header>
+    <div class="stylus-content">
     <el-table :key="tableKey" v-loading="listLoading" :data="list" fit highlight-current-row style="width: 100%;" :header-cell-style="styleObj" @sort-change="sortChange">
-      <el-table-column label="接口ID" prop="id" sortable align="center" min-width="50">
+      <el-table-column label="ID" prop="id" sortable align="center" min-width="60">
         <template slot-scope="scope"><span>{{ scope.row.id }}</span></template>
       </el-table-column>
       <el-table-column label="名称" min-width="150px" align="center">
@@ -69,6 +68,7 @@
         </template>
       </el-table-column>
     </el-table>
+    </div>
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.curIndex" :limit.sync="listQuery.pageSize" @pagination="getList" />
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="65%">
       <el-form ref="serviceDataForms" :rules="checkRequest" :model="serviceData" label-position="left" label-width="120px" style="width: 500px; margin-left:80px;">
@@ -577,4 +577,18 @@ export default {
 .filter-item {
   margin-top: 10px;
 }
+.stylus-head {
+    width: 98%;
+    padding: 1%;
+    margin: 0 auto 1% auto;
+    background-color: #fff;
+    border-radius: 4px;
+}
+.stylus-content{
+    width: 98%;
+    padding: 0.3% 1% 1% 1%;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 4px;
+}
 </style>

src/views/mock/interface.vue

@@ -2,9 +2,8 @@
 /* eslint-disable vue/no-parsing-error */
 /* eslint-disable no-unused-vars */
 <template style="height=0px;improtanent">
-  <div class="app-container">
-    <el-header style="height: auto;!improtant">
-      <div class="filter-container" style="padding-bottom: 20px;!improtant">
+  <div class="app-container" style="background-color: rgb(242, 243, 246);min-height: calc(100vh - 80px);padding: 1% 0px;">
+      <div class="filter-container stylus-head" style="padding-bottom: 20px;!improtant">
         <el-input v-model="listQuery.id" placeholder="接口ID" style="width: 80px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.customName" placeholder="名称" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.interfaceName" placeholder="接口类名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
@@ -23,8 +22,8 @@
           备注
         </el-checkbox>
       </div>
-    </el-header>
     <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
+    <div class="stylus-content">
     <el-table
       :key="tableKey"
       v-loading="listLoading"
@@ -35,7 +34,7 @@
       :header-cell-style="styleObj"
       @sort-change="sortChange"
     >
-      <el-table-column label="接口ID" prop="id" sortable align="center" min-width="60">
+      <el-table-column label="ID" prop="id" sortable align="center" min-width="60">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
@@ -121,6 +120,7 @@
         </template>
       </el-table-column>
     </el-table>
+    </div>
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.curIndex" :limit.sync="listQuery.pageSize" @pagination="getList" />
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="65%" @open="dialogOpenInit()">
       <el-form ref="serviceDataForm" :rules="serviceDataRules" :model="serviceData" label-position="left" label-width="120px" style="width: 500px; margin-left:80px;">
@@ -777,5 +777,19 @@ export default {
   color: red;
   padding-left: 200px;
 }
+.stylus-head {
+    width: 98%;
+    padding: 1%;
+    margin: 0 auto 1% auto;
+    background-color: #fff;
+    border-radius: 4px;
+}
+.stylus-content{
+    width: 98%;
+    padding: 0.3% 1% 1% 1%;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 4px;
+}
 
 </style>

src/views/online-quality/BlockServer/index.vue

@@ -1,14 +1,17 @@
 <template>
-  <div>
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-      <el-tab-pane label="阻断服务" name="first">
-        <block-server />
-      </el-tab-pane>
-      <el-tab-pane label="阻断结果" name="second">
-        <block-result v-if="blockResultShow" />
-      </el-tab-pane>
-    </el-tabs>
+  <div style="background-color: rgb(242, 243, 246);min-height: calc(100vh - 80px);padding: 1% 0px;">
+    <div class="stylus-content">
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane label="阻断服务" name="first">
+          <block-server />
+        </el-tab-pane>
+        <el-tab-pane label="阻断结果" name="second">
+          <block-result v-if="blockResultShow" />
+        </el-tab-pane>
+      </el-tabs>
+      </div>
   </div>
+
 </template>
 
 <script>

src/views/online-quality/CheckConfig/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-container>
+  <el-container style="background-color: rgb(242, 243, 246);min-height: calc(100vh - 80px);padding: 1% 0px;">
+    <div class="stylus-content">
     <el-header>
       <el-form inline :model="searchForm" label-position="right" label-width="60px">
         <el-form-item label="业务线:">
@@ -63,7 +64,9 @@
       @cancel="addConfigDialogVisible = false"
       @confirm="addConfigDialogVisible = false;search()"
     />
+      </div>
   </el-container>
+
 </template>
 
 <style scoped>

src/views/online-quality/HistoryTask/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <div style="background-color: rgb(242, 243, 246);min-height: calc(100vh - 80px);padding: 1% 0px;">
+    <div class="stylus-content">
     <el-header>
       <el-form inline label-position="right" label-width="60px">
         <el-form-item label="业务线:">
@@ -68,6 +69,7 @@
       />
     </el-main>
   </div>
+  </div>
 </template>
 
 <script>