pozhen_web_nuxt/components/Final/index.vue

<template>
  <div class="share-hide-main animate__animated animate__fadeIn " @click.self="closeShare" v-show="showShare">
    <!--    <div class="share-box">-->
    <!--      <img id="code-box" src="/img/wx_qrcode.jpg" alt="">-->
    <!--    </div>-->
  </div>
  <div class="Final op0" data-animation="animate__animated animate__fadeInUp">
    <!-- <div class="Final-float-box ">
      <div class="Final-float rootBg">
        <template v-for="item in shareList">
          <div class="float-items" @click="createShareCode(item.contact_scancode_img)">
            <img :src="item.contact_scancode_icon" alt="">
            <div>{{ item.contact_scancode_title }}</div>
          </div>
        </template>
</div>
</div> -->
    <div class="Final-container font" :style="FinalStyle">
      <div class="Final-big-box">
        <!-- <div class="Final-icon-box" :style="FinalStyle.FinalLeft">
          <img src="/img/icon/logo1.ico" class="icon-img" alt="">
        </div> -->
        <div class="Final-left-box">
          <img src="/img/icon/logo.png" class="icon-img" alt="">
          <div class="Final-left-title font">{{ $t('common.footer.desc') }}</div>
          <div class="Final-left-info font">
            <div class="Final-left-info-item">
              <div class="Final-left-info-item-icon">
                <img src="/img/icon/Final_left_img.png" alt="">
              </div>
              <div>{{ $t('common.footer.loc') }}</div>
            </div>
            <div class="Final-left-info-item">
              <div class="Final-left-info-item-icon">
                <img src="/img/icon/Final_left_img3.png" alt="">
              </div>
              <div>postmaster@lbie-group.com</div>
            </div>
            <div class="Final-left-info-item">
              <div class="Final-left-info-item-icon">
                <img src="/img/icon/Final_left_img2.png" alt="">
              </div>
              <div>17702075449</div>

            </div>

          </div>
        </div>
        <div class="Final-middle-box" :style="FinalStyle.FinalMiddle">
          <div class="Final-middle-items">
            <div class="items-title">{{ $t("common.footer.fastLink") }}</div>
            <div class="items-title-line"></div>
            <nuxt-link :to="getHerf('/about')">
              <div class="items">{{ $t("common.header.about") }}</div>
            </nuxt-link>
            <nuxt-link :to="getHerf('/news/1-1')">
              <div class="items">{{ $t("common.header.news") }}</div>
            </nuxt-link>
            <nuxt-link :to="getHerf('/contact')">
              <div class="items">{{ $t("common.header.contact") }}</div>
            </nuxt-link>
          </div>
          <div class="Final-middle-items">
            <div class="items-title">{{ $t("common.footer.usefulLinks") }}</div>
            <div class="items-title-line"></div>
            <template v-for="(item, idx) in productTypeList">
              <nuxt-link v-if="item?.name && idx < 5" :to="getHerf(item.href)">
                <div class="items">{{ item.name }}</div>
              </nuxt-link>
            </template>
          </div>
        </div>
        <div class="Final-right-box">
          <div class="Final-right-title font">
            {{ $t('common.footer.worktime') }}
          </div>
          <div class="Final-right-title-line"></div>
          <div class="Final-right-time">
            <div class="Final-right-time-icon">
              <img src="/img/icon/Final_right_time.png" alt="">
            </div>
            <div>{{ $t('common.footer.time') }}</div>
          </div>
          <div class="Final-right-ctx">
            {{ $t('common.footer.desc') }}
          </div>
          <nuxt-link class="Final-right-btn ible-btn font" target="_blank" :to="'tel:17702075449'">
            {{ $t('common.footer.contact') }}
          </nuxt-link>
        </div>
      </div>

      <!--      <div class="Final-middle-phone-box">-->
      <!--        <div class="Final-middle-phone-title-box">-->
      <!--          <div class="Final-middle-phone-title">全国咨询热线</div>-->
      <!--          <div class="Final-middle-phone-content-box">-->
      <!--            <div v-for="(item, index) in bottomData.hoteline" class="Final-middle-phone-content">-->
      <!--              {{ item.consulting_hotline_user }} : {{ item.consulting_hotline_phone }}-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!-- <div class="Final-code-box">
        <div class="code-text">扫描关注微信公众号</div>
        <img :src=bottomData.wx_office_accounts_img alt="微信公众号图片">
      </div> -->
      <div class="Final-bottom-box">
        <div>
          Copyright © {{ $t('common.copyright') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { t, locale } = useI18n()
// 样式配置
const FinalStyle = {
  padding: "80px 0 0 0",
  FinalLeft: {},
  FinalMiddle: {},
}
const productTypeList = ref([])
let shareList = ref([
  // {
  //   contact_scancode_icon: '',
  //   contact_scancode_img: '',
  //   contact_scancode_title: '--'
  // },
  // {
  //   contact_scancode_icon: '/img/icon/wbIcon.png',
  //   contact_scancode_img: '',
  //   contact_scancode_title: '微博'
  // },
  // {
  //   contact_scancode_icon: '/img/icon/qqIcon.png',
  //   contact_scancode_img: '',
  //   contact_scancode_title: 'QQ'
  // },
])

let showShare = ref(false)
const closeShare = function () {
  showShare.value = false
}
const createShareCode = function (code) {
  showShare.value = true
  document.getElementById('code-box').src = code
}

// 获取
let bottomData = ref({})

// useFetch('/api/contactUs/getContactInfo').then(res => {
//   let resValue = JSON.parse(res.data.value).data
//   bottomData.value = resValue
//   shareList.value = resValue.qrcode
// })


//请求产品
useFetch('/api/product/getProductTypeTree', { params: { locale: locale.value } }).then(res => {
  let data = JSON.parse(res.data.value).data || []
  res = []
  for (let key in data) {
    let obj = {}
    obj.name = data[key].product_type_name
    obj.href = '/product/product_list/' + data[key]['product_type_id'] + '-1'
    res.push(obj)
  }
  productTypeList.value = res
})

onMounted(() => {
  htmlAddAnimations()
})

</script>

<style lang="scss" scoped src="~/assets/css/Final/index.scss"></style>
<style lang="scss" scoped src="~/assets/css/Final/media.scss"></style>