update: 关联渠道样式

src/components/wechatmembers/wechatTotalDetail.js

@@ -10,6 +10,7 @@ import { fomatBirthday } from "../../utils/fomatBirthday";
 import { formatLongTime } from "@/utils/utils";
 import { mapState } from "vuex";
 import ModifyGuide from './ModifyGuide.vue';
+import weimengLogo from '../../../static/img/weimeng.png'
 
 export default {
   name: "wechatmember-detail",
@@ -59,6 +60,7 @@ export default {
     };
     return {
       showClique: false,
+      weimengLogo,
       memberId: this.$route.query.memberId || "",
       navpath: [
         {

src/components/wechatmembers/wechatTotalDetail.vue

@@ -166,39 +166,19 @@
             </div>
             <div class="wechat-chanel">
               <div class="wechat-cardtitle">关联渠道</div>
-              <div style="display: flex">
-                <table class="relevance-table">
-                  <tbody id="channelListTable"><tr><td class="relevance-name-content">
-                    <img src="../../../static/img/channel_default_icon.png">
-                    <div class="relevance-name">
-                      <p>--</p>
-                      <p class="gray-color">--<span>--</span></p>
-                    </div>
-                  </td>
-                    <td class="relevance-num">--</td>
-                  </tr><tr><td class="relevance-name-content">
-                    <img src="../../../static/img/channel_default_icon.png">
-                    <div class="relevance-name">
-                      <p>--</p>
-                      <p class="gray-color">--<span>--</span></p>
-                    </div>
-                  </td>
-                    <td class="relevance-num">--</td>
-                  </tr><tr><td class="relevance-name-content">
-                    <img src="../../../static/img/channel_default_icon.png">
-                    <div class="relevance-name">
-                      <p>--</p>
-                      <p class="gray-color">--<span>--</span></p>
+              <div class="related-channel-wrap">
+                <ul class="related-channel-content">
+                  <li  class="related-channel-content-item">
+                    <img :src="weimengLogo" alt="">
+                    <div class="related-channel-content-item-info">
+                      <h2>微盟同意协议时间</h2>
+                      <div class="info-date">
+                        <p>访问：2021-09-10 12:00:09</p>
+                        <p>登录：2021-09-11 12:00:09</p>
+                      </div>
                     </div>
-                  </td>
-                    <td class="relevance-num">--</td>
-                  </tr></tbody>
-                </table>
-              </div>
-              <div class="tRight">
-                <dm-pagination
-                  layout="prev, pager, next">
-                </dm-pagination>
+                  </li>
+              </ul>
               </div>
             </div>
           </div>
@@ -733,6 +713,7 @@
 </template>
 
 <script>
+
 import wechatTotalDetail from './wechatTotalDetail'
 export default { ...wechatTotalDetail }
 </script>
@@ -855,6 +836,48 @@ export default { ...wechatTotalDetail }
       border: 1px solid $wechattagcolor;
       vertical-align: top;
       font-size: 14px;
+      .related-channel-wrap{
+        height:220px;
+        padding:0 11px;
+        overflow-y:auto;
+        .related-channel-content{
+          padding-bottom:12px;
+          &-item{
+            display:flex;
+            align-items: center;
+            height:61px;
+            border-bottom: 1px dashed #E3E5E9;
+            >img{
+              margin-right:10px;
+            }
+            &-info{
+              flex:1;
+              display:flex;
+              flex-direction: column;
+              justify-content: center;
+              >h2{
+                font-size: 14px;
+                font-weight: 400;
+                color: #303133;
+                line-height: 20px;
+              }
+              .info-date{
+                display:flex;
+                justify-content: space-between;
+                align-items: center;
+                width:100%;
+                font-size: 12px;
+                font-weight: 400;
+                color: #606266;
+                line-height: 17px;
+                >p{
+                  margin:0;
+                }
+              }
+            }
+          }
+        }
+      }
     &-cardinfowrap
       flex 1
     &-cardinfo
@@ -1020,29 +1043,7 @@ export default { ...wechatTotalDetail }
     vertical-align: inherit;
     border-color: inherit;
   }
-  .relevance-table
-  .relevance-table tr {
-    line-height 0
-    box-sizing border-box
-    border-bottom: 1px solid #e3e5e9;
-  }
-  .relevance-name-content {
-    border-right: 1px solid #e3e5e9;
-    width: 60%;
-    padding: 5px 12px;
-  }
-  .relevance-name-content img {
-    width: 30px;
-    height: 30px;
-    margin-right: 7px;
-  }
-  .relevance-name {
-    display: inline-block;
-  }
-  .relevance-num {
-    width: 40%;
-    text-align: center;
-  }
+  
   .inline-space{
     float: left;
     height: 40px;