skl-www/src/views/templates/ztjy/index.vue

<template>
  <div class="list">
    <img src="../../../assets/ztjytop.jpg" class="topimg">
    <div class="title" @click="titleClick">习近平：在学习贯彻习近平新时代中国特色社会主义思想主题教育工作会议上的讲话</div>
    <div class="listBox" v-for="item in menu" :key="item.code">
      <div class="ListHedir">
        <div class="listtitle">{{ item.name }}</div>
        <div class="listMore" @click="more(item.code)">更多</div>
      </div>
      <ul class="listBody">
        <li class="listItem" v-for="i in list[item.code]" :key="i._id" @click="detailsClick(i)">
          <div class="listname">{{ i.title }}</div>
          <div class="listtime">{{ i.createAt | dates }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import { mapState, mapActions } from 'vuex';
export default {
  name: 'listHome',
  components: {},
  computed: {
    ...mapState(['contentList', 'listTotal', 'menusall'])
  },
  data() {
    return {
      pageSize: 10,
      menu: {},
      code: '',
      list: {}
    };
  },
  async mounted() {
    // 所有菜单
    await this.menusQueryAll();
    // 当前菜单
    this.code = this.$route.params.code;
    // 获取一例菜单
    this.menu = this.menusall.filter(e => e.parentCode == this.$route.params.code);
    this.menu.map(async e => {
      const data = await this.filterQuery(e.code);
      this.$set(this.list, e.code, data);
    });
  },
  methods: {
    ...mapActions(['contentsList', 'menusQueryAll']),
    // 查询函数
    async filterQuery (bind) {
      const res = await this.contentsList({ filter: { bind }, paging: { page: 0, size: 10 } });
      return res?.data;
    },
    // 标题点击
    titleClick() {
      // 649b8056a88d955bb62af9a1 / 649cd0ae43f8327dc3544357
      const routeUrl = this.$router.resolve('/templates/ztjy/details/649b8056a88d955bb62af9a1');
      window.open(routeUrl.href, '_blank');
    },
    // 列表点击
    detailsClick(e) {
      const routeUrl = this.$router.resolve(`/templates/ztjy/details/${e._id}?code=${this.code}`);
      window.open(routeUrl.href, '_blank');
    },
    // 点击更过
    more(code) {
      const routeUrl = this.$router.resolve(`/templates/ztjy/list/${code}`);
      window.open(routeUrl.href, '_blank');
    }
  },
  filters: {
    dates(e) {
      return moment(e).format('YYYY-MM-DD');
    }
  }
};
</script>
<style lang="scss" scoped>
.topimg {
  width: 100%;
}
.title {
  width: 75%;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
  padding: 2% 0;
  color: #ba0612;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.listBox {
  width: 75%;
  height: auto;
  overflow: hidden;
  margin: 5vh auto;
  border: #e4e4e4 1px solid;
}
.ListHedir {
  display: flex;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 1% 2%;
  background-color: #ededed;
  font-size: 1.125em;
  color: #bb0f0f;
  font-weight: bold;
}
.listtitle {
  width: 90%;
  text-align: left;
}
.listMore {
  width: 10%;
  text-align: right;
  font-weight: normal;
  color: #7d7d7d;
  font-size: 0.8888em;
  cursor: pointer;
}
.listBody {
  overflow: hidden;
  padding: 0;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5vh;
}
.listItem {
  line-height: 3em;
  width: 100%;
  background: url('../../../assets/an.png') left center no-repeat;
  padding-left: 3%;
  border-bottom: #CCC 1px dashed;
  margin-right: 3%;
  cursor: pointer;
}
.listname {
  width: 90%;
  text-align: left;
  float: left;
}
.listtime {
  width: 10%;
  text-align: right;
  float: right;
}
</style>