mobile-official/src/views/live copy/parts/jbft.vue

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

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
export default {
  name: 'jbft',
  props: {},
  components: {},
  data: function() {
    return {
      // 展会id
      dock_id: '',
      list: [],
    };
  },
  async created() {
    if (this.id) {
      this.$set(this, `dock_id`, this.id);
    }
    await this.search();
  },
  methods: {
    ...newsguidance(['query']),
    async search() {
      let res = await this.query({ dock_id: this.dock_id });
      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
    },
    // 详情页面
    detailBtn(data) {
      this.$router.push({ path: '/service/techDetail', query: { id: data.id, type: '3' } });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.style {
  min-height: 365px;
  max-height: 365px;
  overflow-y: auto;
  .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>