mobile-official/src/views/channel/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <el-col :span="24" class="con">
            <el-col :span="24" class="list" v-for="(item, index) in lists" :key="index">
              <el-col :span="11" class="video">
                <el-image :src="item.image_path" style="width:100%;height:100%;border-radius: 10px;" v-if="item.image_path"></el-image>
                <el-image v-else style="width:100%;height:100%">
                  <div slot="error" class="image-slot">
                    <el-image :src="url1" style="width:100%;height:100%;border-radius: 10px;"></el-image>
                  </div>
                </el-image>
              </el-col>
              <el-col :span="13" class="text">
                <el-col :span="24" class="title">{{ item.title }}</el-col>
                <el-col :span="24" class="desc">{{ item.desc }}</el-col>
                <el-col :span="24" class="time">{{ item.create_time }}</el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import NavBar from '@/layout/common/topInfo.vue';
const { mapActions: channel } = createNamespacedHelpers('channel');

export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {
    NavBar,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      //列表
      lists: [],
      url1: require('@/assets/222.png'),
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...channel(['query', 'fetch']),
    async search() {
      const res = await this.query();
      console.log(res);
      if (this.$checkRes(res)) {
        this.$set(this, `lists`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  .con {
    padding: 10px;
    background: #f1f1f1;
    min-height: 620px;
    .list {
      padding: 10px;
      background-color: #fff;
      height: 120px;
      border-radius: 5px;
      margin: 0 0 10px 0;
      position: relative;
      .video {
        height: 100%;
        .el-image {
          /deep/.image-slot {
            width: 100%;
            height: 100%;
          }
        }
      }
      .text {
        padding-left: 15px;
        .title {
          font-size: 16px;
          font-weight: bolder;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .desc {
          margin-top: 9px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          font-size: 12px;
        }
        .time {
          font-size: 12px;
          position: absolute;
          bottom: 10px;
        }
      }
    }
  }
}
</style>