web-live/src/views/achieveLive/detail/expertData.vue

<template>
  <div id="expertData">
    <el-row>
      <el-col :span="24" class="style">
        <el-tabs v-model="active" type="card">
          <el-tab-pane label="专家智库" name="first">
            <el-col :span="24" class="info">
              <el-col :span="8" class="list" v-for="(item, index) in expertList" :key="index">
                <el-col :span="6" class="image">
                  <el-image :src="item.img_path">
                    <div slot="error" class="image-slot">
                      <el-image :src="img_url"></el-image>
                    </div>
                  </el-image>
                </el-col>
                <el-col :span="18" class="text">
                  <p class="textOver">{{ item.name }}</p>
                  <p class="textOver">{{ item.zwzc }}</p>
                  <p class="textOver">{{ item.company }}</p>
                  <p>
                    <el-button type="primary" size="mini">详情</el-button>
                    <el-button type="success" size="mini">对接</el-button>
                  </p>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="btn">
              <el-button type="primary" size="mini">查看更多专家</el-button>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: expert } = createNamespacedHelpers('expert');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'expertData',
  props: {},
  components: {},
  data: function() {
    return {
      active: 'first',
      // 专家列表
      // 无头像
      img_url: require('@common/src/assets/live/d10_fbb1.png'),
      expertList: [],
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...expert(['query']),
    async search({ skip = 0, limit = 9, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `expertList`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.style {
  .info {
    height: 465px;
    overflow: hidden;
    padding: 0 10px;
    .list {
      width: 32.6%;
      height: 140px;
      box-shadow: 0 0 5px #ccc;
      border-radius: 5px;
      margin: 5px 10px 10px 0;
      padding: 10px;
      .image {
        height: 120px;
        overflow: hidden;
        border: 1px dashed #ccc;
        .el-image {
          height: 120px;
          overflow: hidden;
        }
      }
      .text {
        padding: 0 0 0 10px;
        p {
          font-size: 16px;
          margin: 0 0 8px 0;
        }
        p:nth-child(1) {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
    .list:nth-child(3n) {
      margin: 5px 0 10px 0;
    }
  }
  .btn {
    text-align: center;
  }
}
</style>