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>
@import "~/assets/productList.css";
</style>