skl-www/src/components/list/threeList.vue

<template>
  <div class="lists" :style="{ backgroundColor: isImg ? '#f4f4f4' : '', border: isImg ? '1px solid #dfdfdf' : 'none' }">
    <el-image class="titleImg" :src="imgUrl" v-if="isImg"></el-image>
    <div class="title" v-else>
      <el-image class="titleImg" :src="imgUrl"></el-image>
      <h2 class="titleText">{{ title }}</h2>
      <div class="more" @click="moreClick">
        <span class="el-icon-plus plus"></span>
        更多
      </div>
    </div>
    <div class="isList" v-for="(i, index) in data" :key="index"  @click="itemClick(i)">
      <el-image class="isList-img" :src="icon"></el-image>
      <h4 class="isList-title">{{ i.title }}</h4>
      <span class="isList-date">{{ i.date | dates }}</span>
    </div>
    <div class="more more2" @click="moreClick" v-if="isImg">
      <span class="el-icon-plus plus"></span>
      更多
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { mapState } from 'vuex';
export default {
  props: {
    // 标题
    title: { type: String, default: '通知公告' },
    // 标题图片
    imgUrl: { type: String, default: '' },
    // 内容数据
    data: { type: Array, default: () => [] },
    isImg: { type: Boolean, default: true },
    code: { type: String, default: '' },
    parentCode: { type: String, default: null }
  },
  components: {},
  computed: {
    ...mapState(['menusall'])
  },
  data() {
    return {
      icon: require('../../assets/jt.png')
    };
  },
  mounted() {},
  methods: {
    itemClick(e) {
      this.$router.push(`/details/${e._id}`);
    },
    async moreClick() {
      // 获取最后一级菜单
      const item = this.$last({ menus: this.menusall, code: this.code });
      // 缓存写入当前一例菜单
      this.$setParentsetSession({ menus: this.menusall, iscode: item });
      if (this.parentCode !== null) this.$router.push(`/list/${this.code}?parentCode=${this.parentCode}`);
      if (this.parentCode == null) this.$router.push(`/list/${this.code}`);
    },
    // 递归第一级最后的菜单编码
    async setactiveIndex (code) {
      const isCode = this.menusall.filter(j => j.code == code);
      const children = this.menusall.filter(k => k.parentCode == isCode[0]?.code);
      if (children.length > 0) return this.setactiveIndex(children[0]?.code);
      return isCode[0];
    }
  },
  filters: {
    dates(e) {
      return moment(e).format('MM-DD');
    }
  }
};
</script>

<style lang="scss" scoped>
.lists {
  // margin-left: 5%;
  width: 30%;
  .titleImg {
    display: block;
    width: 100%;
    height: 20%;
  }
  .title {
    display: flex;
    // margin: 15px 0;
    .titleImg {
      width: 8%;
      height: 5%;
      margin-top: 1%;
    }

    .titleText {
      margin: 0 15px;
      color: #007ce2;
      width: 78%;
    }
  }
  .more {
    width: 35%;
    text-align: right;
    color: #999;
    cursor: pointer;
    margin-right: 3%;
    .plus {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      text-align: center;
      background: #999;
      color: #fff;
    }
  }
  .more2 {
    width: 18%;
    margin-bottom: 2%;
  }
  .isList {
    width: 90%;
    display: flex;
    margin: 10px auto;
    border-bottom: 1px dashed #999;
    .isList-img {
      width: 10px;
      height: 10px;
      display: block;
      margin-top: 6%;
    }
    .isList-title {
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0;
      margin-right: 5%;
      margin-left: 3%;
      cursor: pointer;
      line-height: 3em;
      font-size: 1.2em;
    }
    .isList-date {
      font-size: 1em;
      color: #999;
      line-height: 3.5em;
      text-align: right;
      width: 20%;
    }
  }
}
</style>