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.type_key"
           :href="`/product/info/${product.type_key}?id=${product.id}`"
        >
          <span class="imgBox">
             <img :src="imagePathBabel(product.image)" :alt="product.name" class="img">
          </span>
          <span class="more">
            {{lang===langType.cn?"了解更多":getAbbrText("了解更多")}}
          </span>
          <p class="product-info">
            <span class="title">
              {{lang===langType.cn?product.name:product.name_en||product.name}}
            </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";
import BigTitle from "~/components/public/bigTitle.vue";
import {imagePathBabel} from "@/tools/imagePath";

export default {
  name: "productCenter",
  components: {BigTitle},
  props: {
    lang:{
      default: langMap.lang.cn
    },
  },
  data(){
    return {
      langType: langMap.lang,
      products: this.$store.getters.platform.products
    }
  },
  methods:{
    imagePathBabel,
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
  }
}
</script>

<style scoped>
@import "@/assets/productList.css";
</style>