样式兼容

src/components/wechatmembers/abnormal-member/abnormal-member-list/abnormal-member.less

@@ -60,7 +60,8 @@
       text-align: right;
       padding: 20px 0 0;
     }
-    /deep/.el-table {
+   
+    .el-table {
       .setting-cell.el-table__cell {
         display: flex;
         align-items: center;
@@ -90,30 +91,30 @@
         }
       }
 
-      /deep/.el-table__empty-block {
+      .el-table__empty-block {
         z-index: 1;
         position: relative;
         background: white;
       }
 
-      /deep/.cell {
+      .cell {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         padding-left: 10px;
       }
 
-      /deep/.el-table__header /deep/.cell {
+      .el-table__header .cell {
         padding-left: 10px;
       }
 
-      /deep/.el-table-column--selection {
+      .el-table-column--selection {
         .cell {
           padding-left: 16px;
           padding-right: 0px;
         }
       }
-      /deep/.table-select-page .cell {
+      .table-select-page .cell {
         padding-left: 0px;
         padding-right: 0;
         display: flex;
@@ -122,7 +123,7 @@
           padding: 0;
         }
       }
-      /deep/.el-table__header /deep/.el-table__cell {
+      .el-table__header .el-table__cell {
         padding: 0;
       }
     }

src/components/wechatmembers/frozen-member/frozen-list/frozen-list.less

-.forzen-container {
-  padding: 20px;
-  background-color: #fff;
-  .search {
-    margin-bottom: 24px;
-    .top-header {
-      display: flex;
-      align-items: center;
-      margin-bottom: 20px;
+.frozen-list-page {
+  height: 100%;
+  position: relative;
+  .forzen-container {
+    padding: 20px;
+    background-color: #fff;
+    .search {
+      margin-bottom: 24px;
+      .top-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
 
-      h2 {
-        margin-right: 20px;
-        font-size: 16px;
-        font-weight: bold;
-        color: #303133;
-        line-height: 22px;
+        h2 {
+          margin-right: 20px;
+          font-size: 16px;
+          font-weight: bold;
+          color: #303133;
+          line-height: 22px;
+        }
       }
-    }
 
-    .search-item {
-      display: flex;
-      justify-content: space-between;
+      .search-item {
+        display: flex;
+        justify-content: space-between;
+      }
     }
-  }
 
-  .basic-info-table {
-    color: #303133;
-    font-size: 14px;
-    .member-name{
-      width: 140px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-    .nick-name {
-      color: #909399;
+    .basic-info-table {
+      color: #303133;
       font-size: 14px;
+      .member-name {
+        width: 140px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .nick-name {
+        color: #909399;
+        font-size: 14px;
+      }
+      .basic-img {
+        display: inline-block;
+        vertical-align: middle;
+        height: 40px;
+        width: 40px;
+        min-width: 40px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 10px;
+      }
     }
-    .basic-img {
-      display: inline-block;
-      vertical-align: middle;
-      height: 40px;
-      width: 40px;
-      min-width: 40px;
-      border-radius: 50%;
-      overflow: hidden;
-      margin-right: 10px;
+    .reason-icon-box {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      border-radius: 2px;
+      &:hover {
+        background: #e5e6eb;
+      }
     }
-  }
-  .reason-icon-box{
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-    text-align: center;
-    border-radius: 2px;
-    &:hover{
-      background: #E5E6EB;
+    .icon-yuanyin {
+      font-size: 14px;
+      color: #303030;
     }
   }
-  .icon-yuanyin{
-    font-size: 14px;
-    color: #303030;
-  }
-}
 
-.frozen-table {
-  .pager {
-    text-align: right;
-    padding: 20px 0 0;
-  }
-  /deep/.el-table {
-    
-    .setting-cell.el-table__cell {
-      display: flex;
-      align-items: center;
-      height: 50px;
-      padding: 0;
-      .cell.setting-cell {
+  .frozen-table {
+    .pager {
+      text-align: right;
+      padding: 20px 0 0;
+    }
+    .el-table {
+      .setting-cell.el-table__cell {
         display: flex;
-        justify-content: space-between;
         align-items: center;
         height: 50px;
-        padding-right: 0;
-        .el-icon-setting {
+        padding: 0;
+        .cell.setting-cell {
           display: flex;
-          justify-content: center;
+          justify-content: space-between;
           align-items: center;
-          width: 50px;
-          height: 100%;
-          font-size: 20px;
-          color: #303133;
-          cursor: pointer;
-          background: #e5e6eb;
-  
-          &:hover {
-            color: #000;
+          height: 50px;
+          padding-right: 0;
+          .el-icon-setting {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 50px;
+            height: 100%;
+            font-size: 20px;
+            color: #303133;
+            cursor: pointer;
+            background: #e5e6eb;
+
+            &:hover {
+              color: #000;
+            }
           }
         }
       }
-    }
-  
-    /deep/.el-table__empty-block {
-      z-index: 1;
-      position: relative;
-      background: white;
-    }
 
-    /deep/.cell {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding-left: 10px;
-    }
-    
-    /deep/.el-table__header /deep/.cell {
-      padding-left: 10px;
-    }
+      .el-table__empty-block {
+        z-index: 1;
+        position: relative;
+        background: white;
+      }
 
-    /deep/.el-table-column--selection {
       .cell {
-        padding-left: 16px;
-        padding-right: 0px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding-left: 10px;
       }
-    }
-    /deep/.table-select-page .cell {
-      padding-left: 0px;
-      padding-right: 0;
-      display: flex;
-      align-items: center;
-      .el-dropdown {
+
+      .el-table__header .cell {
+        padding-left: 10px;
+      }
+
+      .el-table-column--selection {
+        .cell {
+          padding-left: 16px;
+          padding-right: 0px;
+        }
+      }
+      .table-select-page .cell {
+        padding-left: 0px;
+        padding-right: 0;
+        display: flex;
+        align-items: center;
+        .el-dropdown {
+          padding: 0;
+        }
+      }
+      .el-table__header .el-table__cell {
         padding: 0;
       }
     }
-    /deep/.el-table__header /deep/.el-table__cell{
-      padding: 0;
-    }
   }
-}
 
-.frozen-list {
-  height: 100%;
-}
-
-.no-setting-page {
-  height: 100%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .tips-box {
-    height: auto;
-    margin-right: 150px;
-    .label {
-      color: #0a1c2b;
-      font-size: 20px;
-      font-weight: 500;
-    }
-    .el-button--primary {
-      margin-top: 40px;
-      border-radius: 2px;
+  .no-setting-page {
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .tips-box {
+      height: auto;
+      margin-right: 150px;
+      .label {
+        color: #0a1c2b;
+        font-size: 20px;
+        font-weight: 500;
+      }
+      .el-button--primary {
+        margin-top: 40px;
+        border-radius: 2px;
+      }
     }
   }
-}
-.no-update-page {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  height: 100%;
-  .icon {
-    width: 120px;
-    height: 120px;
-    margin: 0 auto 16px;
-  }
-  .label {
-    color: #606266;
-    font-size: 14px;
-  }
-  .no-update-alert{
-    margin-top: 15px;
-    /deep/.el-icon-info{
-      color: #2F54EB;
+  .no-update-page {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 100%;
+    .icon {
+      width: 120px;
+      height: 120px;
+      margin: 0 auto 16px;
+    }
+    .label {
+      color: #606266;
+      font-size: 14px;
+    }
+    .no-update-alert {
+      margin-top: 15px;
+      .el-icon-info {
+        color: #2f54eb;
+      }
     }
   }
-}
 
-.data-abnormal-page{
-  position: relative;
-  text-align: center;
-  height: calc(100% - 100px);
-  padding: 0 30px;
-  .icon{
-    margin: 116px auto 30px;
-    color: #FA8C16;
-    width: 72px;
-    height: 72px;
-    font-size: 72px;
-  }
-  .title{
-    color: #303133;
-    font-size: 14px;
-    line-height: 20px;
-  }
-  .subtitle{
-    color: #606266;
-    font-size: 14px;
-    line-height: 20px;
-  }
-  .el-button--primary{
-    margin: 30px auto;
+  .data-abnormal-page {
+    position: relative;
+    text-align: center;
+    height: calc(100% - 100px);
+    padding: 0 30px;
+    .icon {
+      margin: 116px auto 30px;
+      color: #fa8c16;
+      width: 72px;
+      height: 72px;
+      font-size: 72px;
+    }
+    .title {
+      color: #303133;
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .subtitle {
+      color: #606266;
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .el-button--primary {
+      margin: 30px auto;
+    }
   }
-}
 
-.channel-box {
-  display: inline-block;
-  + .channel-box {
-    margin-left: 6px;
-  }
-  .channel-icon {
-    width: 20px;
-    height: 20px;
-    vertical-align: middle;
+  .channel-box {
+    display: inline-block;
+    + .channel-box {
+      margin-left: 6px;
+    }
+    .channel-icon {
+      width: 20px;
+      height: 20px;
+      vertical-align: middle;
+    }
   }
 }

src/components/wechatmembers/frozen-member/frozen-list/frozen-list.vue

 <template>
-  <div class="frozen-list">
+  <div class="frozen-list-page">
     <div class="forzen-container">
       <div class="search">
         <div class="top-header">
@@ -376,5 +376,5 @@ export default { ...action };
   min-width: auto !important;
 }
 </style>
-<style lang="less" scoped src="./frozen-list.less"></style>
+<style lang="less" src="./frozen-list.less"></style>
 

src/components/wechatmembers/frozen-member/frozen-member/frozen-member.less

-.container {
-  // background-color: #fff;
-  // position: relative;
-  // box-sizing: border-box;
+.container.frozen-member {
+   background-color: #fff;
+   position: relative;
+   box-sizing: border-box;
   width: 100%;
   display: flex;
   height: 100%;
@@ -123,42 +123,36 @@
     box-shadow: 0px -2px 8px 0px rgba(220,223,230,0.6000);
     background: white;
   }
-}
 
-.frozen-table {
-  .pager {
-    text-align: right;
-    padding: 20px 0 0;
+  .frozen-table {
+    .pager {
+      text-align: right;
+      padding: 20px 0 0;
+    }
   }
-  /deep/.el-table-column--selection {
+  
+  .el-table {
     .cell {
-      padding-left: 16px;
-      padding-right: 0px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-  }
-  /deep/.cell {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  /deep/.table-select-page .cell {
-    padding-left: 10px;
-    padding-right: 0;
-    display: flex;
-    align-items: center;
-    .el-dropdown {
-      padding: 0;
+
+    th>.cell:first-child{
+      padding-left: 10px;
+    }
+    .el-table-column--selection {
+      .cell:first-child {
+        padding-left: 16px;
+        padding-right: 0px;
+      }
+    }
+    .el-table__empty-block {
+      z-index: 1;
+      position: relative;
+      background: white;
     }
   }
 }
 
 
-
-/deep/.el-table {
-
-  /deep/.el-table__empty-block {
-    z-index: 1;
-    position: relative;
-    background: white;
-  }
-}

src/components/wechatmembers/frozen-member/frozen-member/frozen-member.vue

 <template>
-  <el-contaniner class="container">
+  <el-contaniner class="container frozen-member">
     <el-main class="table-box">
       <el-row
         type="flex"
@@ -183,5 +183,5 @@ export default { ...action };
 </script> -->
 <style lang="less">
 </style>
-<style lang="less" scoped src="./frozen-member.less"></style>
+<style lang="less" src="./frozen-member.less"></style>
 

src/components/wechatmembers/frozen-member/white-list/white-list.less

-.container {
+.container .frozen-white-list{
   padding: 20px;
   background: white;
   .top-header {
@@ -64,14 +64,14 @@
       -webkit-box-orient: vertical;
     }
   }
-  /deep/.el-dialog__footer{
+  .el-dialog__footer{
     border-top: none;
     padding: 10px 30px;
   }
-  /deep/.el-dialog__body{
+  .el-dialog__body{
     padding: 6px 30px 16px;
   }
-  /deep/.el-dialog__header{
+  .el-dialog__header{
     padding: 20px 30px 10px;
   }
   .pager {
@@ -80,12 +80,16 @@
     align-items: center;
     margin-top: 10px;
   }
-}
-
-/deep/.el-table {
-  /deep/.el-table__empty-block {
-    z-index: 1;
-    position: relative;
-    background: white;
+  .el-table {
+    th>.cell:first-child{
+      padding-left: 10px;
+    }
+    .el-table__empty-block {
+      z-index: 1;
+      position: relative;
+      background: white;
+    }
   }
 }
+
+

src/components/wechatmembers/frozen-member/white-list/white-list.vue

 <template>
-  <div class="container">
+  <div class="container frozen-white-list">
     <div class="top-header">
       <h2>白名单会员 {{ total }}人</h2>
     </div>
@@ -39,7 +39,7 @@
       class="member-table"
       v-loading="load"
     >
-      <el-table-column label="会员信息" :min-width="200">
+      <el-table-column label="会员信息" :min-width="200" fixed="left">
         <template slot-scope="{ row }">
           <!-- 基本信息 -->
           <el-row
@@ -153,5 +153,5 @@ export default { ...action };
 </script> -->
 <style lang="less">
 </style>
-<style lang="less" scoped src="./white-list.less"></style>
+<style lang="less" src="./white-list.less"></style>