ceramic/src/components/PicturesBox.vue

<template>
  <div class="image_list">
    <el-row type="flex">
      <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
        <ul>
          <li v-for="(item,index) in imageList"
              :key="index" @click="type!==22?handleClickNews(item):''">
            <div class="item">
              <a>
                <div v-if="type===33">
                <span class="pic">
                  <img :src="item.image" alt="">
                </span>
                  <span class="inf">{{ item.name }}</span>
                  <span class="size">{{ item.goods_category.name }}</span>
                </div>
                <!-- 新闻-->
                <div v-if="type===11">
                  <el-image
                    :src="item.image">
                  </el-image>
                  <span class="inf">{{ item.title }}</span>
                  <span class="info">{{ item.create_time }}</span>
                </div>
                <!--形象展示放大  -->
                <div v-if="type===22" class="bigImg">
                  <el-image
                    :src="item.image">
                  </el-image>
                  <span class="inf" style="text-align: center">{{ item.title }}</span>
                </div>
              </a>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "PicturesBox",
  props: {
    imageList: Array,
    /**
     * 11 是跳转到新闻详情
     * 22是封装图片放大的效果
     * 33是跳转到产品详情
     */
    type: Number,
    newsItem: String
  },
  data() {
    return {};
  },
  methods: {
    /**
     * 点击图片进入详情页
     */
    handleClickNews(item) {
      if (this.type == 33) {
        this.$router.push({
          path: "/products_detail",    //跳转的路由
          query: {    //跳转路由的参数
            classid: item.id    //前面的type是参数的名称
          }
        });
      } else if (this.type == 11) {
        this.$emit("getNewsIdClick", item.id);
      }
    }
  }
};
</script>

<style scoped lang="scss">

@media only screen and (max-width: 1660px) {
  .image_list ul li {
    width: 33.2% !important;
  }
}

@media only screen and (max-width: 1480px) {
  .image_list ul li {
    width: 33.2% !important;
  }
}

/deep/ .el-image:hover {
  img {
    transform: scale(1.2);
    opacity: 0.8;
    background-color: #000000;
  }
}

.bigImg {
  height: 270px;
  display: inline-block;
  border: 1px solid #e9e9e9;
  overflow: hidden;

  /deep/ .el-image {
    width: 308px;
    height: 270px;
    background-color: #000000;

    img {
      width: 100%;
      display: block;
      transition: all 0.4s;
    }
  }
}

.image_list {
  width: 100%;
  padding: 20px 0;

  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      width: 25%;

      .item {
        padding: 15px;
        overflow: hidden;

        a {
          .pic {
            display: inline-block;
            border: 1px solid #e9e9e9;
            background-color: #000;
            overflow: hidden;

            img {
              width: 100%;
              display: block;
              transition: all 0.4s;
            }
          }

          .info {
            text-align: left;
            display: block;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            color: #666;
          }

          span.inf {
            display: block;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            text-align: left;
          }

          span.size {
            color: #666;
            display: block;
            font-size: 12px;
            float: left;
          }
        }

        a:hover .pic img {
          transform: scale(1.2);
          opacity: 0.8;
          background-color: #000000;
        }
      }
    }
  }
}
</style>