hfysite/components/footer/defaultFooter.vue

<template>
  <div class='w-screen pad:w-full footer'>
    <div class='container mx-auto'>

      <div class='footer-list'>
        <div class="footerItem"
             v-for="(item,i) in footers"
             :key="'footer-'+item.key"
        >
          <div class="title">{{lang===langType.cn?item.title:getAbbrText(item.title)}}</div>
          <a
            v-for="(subItem,subI) in item.items"
            :key="`footer-${item.key}-item-${subI}`"
            :href="subItem.href"
            class="footer-list-item">
            {{lang===langType.cn?subItem.text:getAbbrText(subItem.text)}}
          </a>
        </div>
        </div>
      </div>
    <!--        备案信息-->
      <div class="flex justify-center items-center">
            <a class="record-item flex items-center" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030702001959" >
                <img class="flex w-5 h-5 flex-shrink" src="/ghs.png" >粤公网安备 44030702001959号
            </a>
          <a class="record-item ml-2" href="https://beian.miit.gov.cn" >
            <span>备案号：</span>
            <span>粤ICP备18098745号</span>
          </a>
      </div>

      <div class="bg">

      </div>
  </div>
</template>

<script>
import langMap from "~/map/langMap";
import {productMenus} from "~/map/productMap";
export default {
  name:"defaultFooter",
  props:{
    lang:{
      default: langMap.lang.cn
    },
  },
  data(){
    return {
      langType: langMap.lang,
      footers:[
        {
          title: "关于我们",
          key: 'about us',
          items: [
            {
              text: '公司简介',
              href: '/about',
            },
            {
              text: '招贤纳士',
              href: '/jobs',
            },
            {
              text: '产品购买',
              href: '/buy',
              showType: 2,
              show: '产品购买服务请联系  刘工15817487997微信同号'
            },
            {
              text: '诚招代理',
              href: '/agency',
            },
            {
              text: '联系我们',
              href: '/contact',
            }
          ],
        },
        {
          title: "智能产品",
          key: 'product',
          items: productMenus,
        },
        {
          title: "服务与支持",
          key: 'support',
          items: [
            {
              text: '技术支持',
              href: '/support',
            },
            {
              text: '资料下载',
              href: '/support',
            }
          ],
        },
        {
          title: "快速链接",
          key: 'quick',
          items: [
            {
              text: '管理平台',
              href: 'https://gpscore.net/',
            },
          ],
        },
        {
          title: "选择语言",
          key: 'Languages',
          items: [
            {
              text: '中文',
              href: '/',
            },
            {
              text: 'en',
              href: '/index_en',
            },
          ],
        },
      ]
    }
  },
  methods: {
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
  }
}
</script>

<style>

</style>