live-mobile/src/views/live/onAchieve/parts/readshow_1.vue

<template>
  <div id="readshow_1">
    <van-row>
      <van-col span="24" class="main">
        <van-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detail(item)">
          <van-col span="19" class="textOver title">
            {{ item.title }}
          </van-col>
          <van-col span="5" class="date">
            {{ item.publish_time }}
          </van-col>
          <van-col span="24" class="textOver orgin">
            来源：<span>{{ item.origin }} </span>
          </van-col>
          <van-col span="24" class="titlejj">
            简介：<span>{{ item.brief }}</span>
          </van-col>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: roadShow } = createNamespacedHelpers('roadShow');
export default {
  name: 'readshow_1',
  props: {},
  components: {},
  data: function() {
    return {
      list: [],
    };
  },
  async created() {
    if (this.id) await this.search();
  },
  methods: {
    ...roadShow(['query']),
    async search({ skip = 0, limit = 100, ...info } = {}) {
      let res = await this.query({ skip, dock_id: this.dock_id, ...info });
      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
    },
    // 详情页面
    detail(data) {},
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 0 5px;
  .list {
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .date {
      font-size: 14px;
      text-align: right;
      padding: 3px 0 0 0;
    }
    .orgin {
      font-size: 14px;
      padding: 5px 0;
      span {
        color: #999;
      }
    }
    .titlejj {
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      span {
        color: #999;
      }
    }
  }
}
</style>