mr_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" :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-middle-box" :style="FinalStyle.FinalMiddle">
          <div class="Final-middle-items">
            <div class="items-title">关于我们</div>
            <nuxt-link to="/about/intro/0">
              <div class="items">厚德简介</div>
            </nuxt-link>
            <nuxt-link to="/about/env/1-1">
              <div class="items">教学环境</div>
            </nuxt-link>
            <nuxt-link to="/about/history/2">
              <div class="items">发展历程</div>
            </nuxt-link>
          </div>
          <div class="Final-middle-items">
            <div class="items-title">招生报名</div>
            <nuxt-link to="/signUp/signUp_introduction/0-1">
              <div class="items">招生简介</div>
            </nuxt-link>
            <nuxt-link to="/signUp/classes_intro/1-1">
              <div class="items">班型介绍</div>
            </nuxt-link>
            <nuxt-link to="/signUp/enrol_aq/2">
              <div class="items">招生回答</div>
            </nuxt-link>
            <nuxt-link to="/signUp/signup_way/3">
              <div class="items">报名方式</div>
            </nuxt-link>
          </div>
          <div class="Final-middle-items">
            <div class="items-title">师资力量</div>
            <nuxt-link to="/teachers/0">
              <div class="items">教师列表</div>
            </nuxt-link>
          </div>
          <div class="Final-middle-items">
            <div class="items-title">荣誉成绩</div>
            <nuxt-link to="/achievement/school_achievement/0">
              <div class="items">录取院校</div>
            </nuxt-link>
            <nuxt-link to="/achievement/joint_achievement/1-1">
              <div class="items">联考成绩</div>
            </nuxt-link>
          </div>
          <div class="Final-middle-items">
            <div class="items-title">作品欣赏</div>
            <nuxt-link to="/works/0">
              <div class="items">作品列表</div>
            </nuxt-link>
          </div>
          <div class="Final-middle-items">
            <div class="items-title">艺考资讯</div>
            <nuxt-link to="/news/0-1">
              <div class="items">资讯列表</div>
            </nuxt-link>
          </div>
          <div class="Final-middle-items">
            <div class="items-title">联系我们</div>
            <nuxt-link to="/contactUs/contact_info/0">
              <div class="items">联系方式</div>
            </nuxt-link>
            <nuxt-link to="/contactUs/signup/1">
              <div class="items">在线报名</div>
            </nuxt-link>
            <nuxt-link to="/contactUs/leave_message/2">
              <div class="items">用户留言</div>
            </nuxt-link>
            <nuxt-link to="/contactUs/join_apply/3">
              <div class="items">合作加盟</div>
            </nuxt-link>
          </div>
        </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">©2023 米尔科技有限公司 版权所有</div>
    </div>
  </div>
</template>

<script setup>
// 样式配置
const FinalStyle = {
  padding: "80px 0 0 0",
  FinalLeft: {

  },
  FinalMiddle: {

  },
}

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
})


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>