首页公共模块组件调整

src/components/DataListItem.vue

+<template>
+  <section class="data-list-item" @click="$emit('click')">
+    <div class="item-title">
+      <div class="title-tag">
+        <slot name="tag"></slot>
+      </div>
+      <span class="title-content" v-indent="10">{{data.title}}</span>
+    </div>
+    <div class="item-bottom">
+      <div class="bottom-content">
+        <slot v-bind:value="data" name="bottomLeft" />
+        <template v-if="!$slots.bottomLeft">
+          <img class="bottom-icon" src="@/assets/icon/icon_clock.png">
+          <span class="bottom-text">{{dateText}}{{data.date}}</span>
+        </template>
+      </div>
+      <div class="bottom-content">
+        <slot v-bind:value="data" name="bottomRight" />
+        <template v-if="!$slots.bottomRight">
+          <img class="bottom-icon" src="@/assets/icon/icon_classify.png">
+          <span>{{data.dataType}}</span>
+        </template>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'DataListItem',
+  props: {
+    data: {
+      type: Object,
+      default: () => { return {} }
+    },
+    dateText: {
+      type: String
+    },
+    tag: {
+      type: String
+    }
+  },
+  data () {
+    return {}
+  },
+  methods: {
+
+  },
+  directives: {
+    indent: {
+      inserted (el, binding) {
+        setTimeout(() => {
+          const nodes = el.previousElementSibling.childNodes
+          const data = { width: 0 }
+
+          for (const node of nodes) {
+            data.width = data.width + node.offsetWidth
+          }
+          if (!data.width) return
+          const indentSize = data.width + (binding.value || 0)
+          console.log(indentSize);
+          el.style.textIndent = `${indentSize}px`
+        }, 0);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/assets/css/mixins.less';
+@PaddingSize: 11px;
+.data-list-item {
+  padding: @PaddingSize 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  .item-title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    line-height: 25px;
+    position: relative;
+
+    .title-tag {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+        
+      //   margin-right: 10px;
+    }
+    .title-content {
+      font-size: 16px;
+      color: #222222;
+      line-height: 25px;
+      .line-clamp(2);
+    }
+  }
+  .item-bottom {
+    padding-top: 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .bottom-content {
+      display: flex;
+      align-items: center;
+      color: #999999;
+      line-height: 16px;
+      font-size: 12px;
+
+      @IconSize: 15px;
+      .bottom-icon {
+        width: @IconSize;
+        height: @IconSize;
+        margin-right: 7px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/home/components/DataModule.vue

@@ -2,39 +2,41 @@
   <section class="data-module">
     <div class="module-top-container">
       <div class="module-top-left">
-        <span class="module-name">{{data.name}}</span>
-        <span v-if="data.isTop" class="module-top-btn">置顶</span>
+        <span class="module-name">{{name}}</span>
+        <span v-if="isTop" class="module-top-btn">置顶</span>
       </div>
       <div class="module-more">
         <span>更多</span>
       </div>
     </div>
     <div class="module-content-container">
-      <div class="content-item" v-for="(item, idx) in data.list" :key="idx">
-        <div class="item-title" :class="{'item-recommend': item.isRecommend}">
-          <span v-if="item.isRecommend" class="item-recommend">推荐</span>
-          <span class="item-title-content">{{item.title}}</span>
-        </div>
-        <div class="item-content-bottom">
-          <div class="item-bottom-item">
-            <img class="item-bottom-icon" src="@/assets/icon/icon_clock.png">
-            <span class="item-bottom-text">更新日期：{{item.date}}</span>
-          </div>
-          <div class="item-bottom-item">
-            <img class="item-bottom-icon" src="@/assets/icon/icon_classify.png">
-            <span class="item-bottom-text">{{item.type}}</span>
-          </div>
-        </div>
-      </div>
+      <DataListItem v-for="(item, idx) in data.list" :key="idx" :data="item" :dateText="dateText">
+        <template v-if="item.isRecommend" v-slot:tag>
+          <span class="item-recommend">推荐</span>
+        </template>
+      </DataListItem>
     </div>
   </section>
 </template>
 
 <script>
+import DataListItem from '@/components/DataListItem'
 export default {
   name: 'DataModule',
+  components: { DataListItem },
   props: {
-
+    name: {
+      type: String,
+      default: '协会动态'
+    },
+    isTop: {
+      type: Boolean,
+      default: false
+    },
+    dateText: {
+      type: String,
+      default: '更新日期：'
+    }
   },
   data () {
     return {
@@ -46,19 +48,19 @@ export default {
             isRecommend: true,
             title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标',
             date: '2020-02-02',
-            type: '产品创新'
+            dataType: '产品创新'
           },
           {
             isRecommend: false,
             title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和60目标',
             date: '2020-02-02',
-            type: '产品创新'
+            dataType: '产品创新'
           },
           {
             isRecommend: false,
             title: '创新推出碳中和债，助理实现30·60目标出',
             date: '2020-02-02',
-            type: '产品创新'
+            dataType: '产品创新'
           },
 
         ]
@@ -117,6 +119,17 @@ export default {
   }
 }
 .module-content-container {
+  .item-recommend {
+    height: 18px;
+    line-height: 18px;
+    font-size: 10px;
+    color: white;
+    padding: 0 7px;
+    border-radius: 8px;
+    background: #ff4038;
+    text-align: center;
+  }
+
   .content-item {
     padding-top: 14px;
     padding-bottom: 10px;