hfysite/components/productCenter.vue

<template>
  <div class="content">
    <div class="conBox big-title">
      <span>
        {{lang===langType.cn?"产品中心":getAbbrText("产品中心")}}
      </span>
      <div class="hr"></div>
    </div>
    <div class="conBox productCenter">
        <a class="product"
           v-for="(product,i) in products"
           :key="'pro-'+product.key"
        >
          <span class="imgBox">
             <img :src="product.img" :alt="product.title" class="img">
          </span>
          <span class="more">
            {{lang===langType.cn?"了解更多":getAbbrText("了解更多")}}
          </span>
          <p class="product-info">
            <span class="title">
              {{lang===langType.cn?product.title:getAbbrText(product.title)}}
            </span>
            <span class="description" v-if="product.sellPointer">
              <span v-for="sell in product.sellPointer">
                {{sell}}
              </span>
            </span>
          </p>
        </a>
    </div>
  </div>
</template>

<script>
import langMap from "~/map/langMap";

export default {
  name: "productCenter",
  props: {
    lang:{
      default: langMap.lang.cn
    },
  },
  data(){
    return {
      langType: langMap.lang,
      products:[
        {
          title: '20倍自动变焦摄像头',
          img: 'image/product/20Cam.png',
          key: 'p1',
          sellPointer: [
            '20倍超级变焦',
            '高清影像',
            '多种可选倍率'
          ]
        },
        {
          title: '车牌识别摄像头',
          key: 'p2',
          img: 'image/product/car.jpg',
          sellPointer: [
            'ai识别',
            '智能联动',
          ]
        },
        {
          title: '火情识别摄像头',
          key: 'p3',
          img: 'image/product/fire.png',
          sellPointer: [
            '烟火识别',
            '自动巡检',
          ]
        },
        {
          title: '4G低功耗智能摄像头',
          key: 'p4',
          img: 'image/showing/lowCam.jpg'
        },
        {
          title: '4G电力摄像头模组',
          key: 'p5',
          img: 'image/product/20Cam.png',
          description: ''
        },
        {
          title: '多目协同摄像头',
          key: 'p6',
          img: 'image/product/20Cam.png'
        },
        {
          title: '电气火灾模块',
          key: 'p7',
          img: 'image/product/20Cam.png'
        },
        {
          title: 'm2m产品',
          key: 'p8',
          img: 'image/product/20Cam.png'
        }
      ]
    }
  },
  methods:{
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
  }
}
</script>

<style scoped>
.productCenter{
  display: grid;
  grid-template-columns: repeat(4,310px);
  grid-gap: 25px;
  box-sizing: border-box;
}
.product{
  display: block;
  height: 380px;
  background-color: #fff;
  box-shadow: 1px 1px 3px black;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.product:hover{
  box-shadow: 1px 1px 5px #3a3838;
}
.product .more{
  background-color: #912b02;
  padding: 0 30px;
  border-radius: 4px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  top: 250px;
  opacity: 0;
  transition:all 0.5s;
  color: white;
}
.product:hover .more{
  opacity: 1;
  background-color: orangered;
}
.product .more:hover{
  box-shadow: 1px 1px 5px white;
  padding: 0 25px;
}
.product .product-info{
  display: block;
  padding: 5px;
  height: calc(100% - 270px);
  box-sizing: border-box;
}
.product .imgBox{
  display: block;
  width: 310px;
  height: 270px;
}
.product:hover .imgBox img{
  left: -10px;
  top: -10px;
  max-width: calc(100% + 20px);
  width: calc(100% + 20px);
  height: calc(100% + 20px);
}

.product .title{
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 1.6em;
}
.product-info .description{
  display: block;
  height: calc(100% - 40px);
  border-top: 1px solid beige;
  font-size: 0.9em;
  color: #444343;
}
.product-info .description > span{
  display: block;
}
</style>