feat：供应搜索ui组件-article-item

packages/pc-ui/src/index.js

@@ -4,9 +4,11 @@ import './assets/style/reset-ele.scss'
 import KeywordsGroup from './packages/keywords/index.vue'
 import CommonDialog from './packages/dialog/common-dialog.vue'
 import Toast from './packages/toast/index'
+import SupplyArticleItem from './packages/article-item/supply-article-item.vue'
 
 export {
   Toast,
   KeywordsGroup,
-  CommonDialog
+  CommonDialog,
+  SupplyArticleItem
 }

packages/pc-ui/src/packages/article-item/supply-article-item.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="article-item supply-article-item" :class="{ 'visited': visited }">
+    <div class="article-item-header">
+      <slot name="prefix"></slot>
+    </div>
+     <div class="article-item-content" :class="{ line: !detail, 'tags-bottom': tagsPosition === 'bottom' }" @click.stop.prevent="onClick">
+      <div class="a-i-c-top visited-hd">
+        <div class="ellipsis" v-html="calcTitle"></div>
+        <div class="tags" v-if="tagsPosition === 'bottom'">
+          <span
+            class="tag grey"
+            :key="index"
+            v-for="(tag, index) in tags">
+            {{ tag.value }}
+          </span>
+        </div>
+      </div>
+      <div class="a-i-c-center ellipsis-3" v-if="detail" v-html="detail"></div>
+      <div class="a-i-c-bottom">
+        <div class="tags" v-if="tagsPosition === 'right'">
+          <span
+            class="tag grey"
+            :key="index"
+            v-for="(tag, index) in tags">
+            {{ tag.value }}
+          </span>
+        </div>
+        <div class="time-container">
+          <span class="time-text">
+            <slot name="right-time">
+              <span v-if="time">{{ time }}</span>
+            </slot>
+          </span>
+        </div>
+        <slot name="actions"></slot>
+      </div>
+    </div>
+    <div class="article-item-footer">
+      <slot name="suffix"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "supply-article-item",
+  props: {
+    // 索引
+    index: {
+      type: [String, Number],
+      default: 0
+    },
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 正文
+    detail: {
+      type: String,
+      default: ''
+    },
+    // 时间
+    time: {
+      type: String,
+      default: ''
+    },
+    // 标签
+    tags: {
+      type: Array,
+      default: () => []
+    },
+    // 已读
+    visited: {
+      type: Boolean,
+      default: false
+    },
+    tagsPosition: {
+      type: String,
+      default: 'right'
+    }
+  },
+  computed: {
+    calcTitle() {
+      if (this.index) {
+        return `${this.index}. ${this.title}`
+      } else {
+        return this.title
+      }
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('onClick')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ $border-color: #ECECEC;
+ $main: #2cb7ca;
+.visited {
+  .visited-hd {
+    color: #999!important;
+  }
+  .hover:hover {
+    color: $main!important;
+  }
+  .visited-ft {
+    color: #9B9CA3!important;
+  }
+}
+.article-item {
+  cursor: pointer;
+  &-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 36px;
+    width: 100%;
+    border-bottom: 1px solid $border-color;
+    cursor: pointer;
+
+    &:first-of-type,
+    &:border-top {
+      border-top: 1px solid $border-color;
+    }
+
+    &:hover {
+      background-color: #F5F6F7;
+      box-shadow: inset 0px -1px 0px rgba(0,0,0,.05);
+    }
+  }
+
+  &-content {
+    flex: 1;
+    min-height: 22px;
+    .a-i-c {
+      &-top {
+        max-width: 1080px;
+        font-size: 16px;
+        line-height: 24px;
+        color: #1d1d1d;
+        .tags{
+          margin-top: 8px;
+          justify-content: flex-start;
+        }
+      }
+      &-center {
+        margin: 12px 0;
+        font-size: 14px;
+        line-height: 22px;
+        color: #686868;
+      }
+      &-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+
+    &.line {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .a-i-c {
+        &-top {
+          max-width: 700px;
+        }
+        &-bottom {
+          width: unset;
+        }
+      }
+    }
+    &.tags-bottom{
+      height: auto;
+      align-items: flex-start;
+    }
+
+    .tags,
+    .time-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .tag {
+      &:not(:last-of-type) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.tag {
+  display: flex;
+  align-items: center;
+  padding: 1px 6px;
+  margin-right: 14px;
+  font-size: 13px;
+  line-height: 20px;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  &.grey {
+    color: #686868;
+    border-color: #ececec;
+    background-color: #F5F5FB;
+  }
+}
+
+.time-text {
+  margin-left: 6px;
+  font-size: 14px;
+  color: #797a7e;
+  line-height: 24px;
+}
+</style>