web-test/src/views/market/index/patent.vue

<template>
  <div id="patent">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <top :topInfo="topInfo" @moreBtn="moreBtn"></top>
        </el-col>
        <el-col :span="24" class="down">
          <el-col
            :span="8"
            class="patentList"
            v-for="(item, index) in patentList"
            :key="index"
            @click.native="$router.push({ path: '/market/marketlists', query: { type: '5', column_name: 'e专利', id: item.id } })"
          >
            <el-image v-if="item.img_url" :src="item.img_url"></el-image>
            <el-image v-else :src="url"></el-image>
            <p class="textOver">{{ item.name }}</p>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '@/layout/common/topColumn.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'patent',
  props: {
    patentList: { type: Array },
  },
  components: {
    top,
  },
  data: function() {
    return {
      url: require('@a/fmzl.jpg'),
      topInfo: {
        title: 'e专利',
        engTitle: 'Patent',
      },
    };
  },
  created() {},
  methods: {
    // 更多
    moreBtn() {
      this.$router.push({ path: '/market/marketlists', query: { type: '5', column_name: 'e专利' } });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.style {
  .top {
    height: 50px;
  }
  .down {
    height: 450px;
    position: relative;
    .patentList {
      width: 32%;
      height: 220px;
      margin: 0 10px 10px 0;
      box-shadow: 0 0 5px #ccc;
      border-radius: 5px;
      padding: 5px;
      .el-image {
        width: 100%;
        height: 185px;
      }
      p {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
      }
    }
    .patentList:nth-child(3n) {
      margin: 0 0 10px 0;
    }
    .patentList:hover {
      cursor: pointer;
      p {
        color: #409eff;
      }
    }
  }
}
</style>