hfysite/components/productCenter.vue

<template>
  <div class="w-screen pad:w-full">
    <big-title>{{lang===langType.cn?"产品中心":getAbbrText("产品中心")}}</big-title>
    <div class="container mx-auto 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'
        },
      ]
    }
  },
  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>