{"version":3,"file":"footer.684681f1.js","sources":["../../src/views/home/components/footer.vue"],"sourcesContent":["<template>\n  <div class=\"footer-demo\">\n    <div class=\"helpBox\">\n      <header>{{ $t('home.help') }}</header>\n      <div class=\"problem\">\n        <div class=\"proBox\">\n          <div class=\"proPic\"\n            ><img :src=\"getImage('help')\" alt=\"help\"\n          /></div>\n          <div class=\"proText\">\n            <p class=\"tit\">{{ $t('home.chat1') }}</p>\n            <p class=\"sub\">{{ $t('home.chat2') }}</p>\n            <p class=\"tip\">{{ $t('home.chat3') }}</p>\n          </div>\n        </div>\n        <div class=\"proBox\">\n          <div class=\"proPic\"\n            ><img :src=\"getImage('pro')\" alt=\"pro\"\n          /></div>\n          <div class=\"proText\">\n            <p class=\"tit\">{{ $t('home.chat4') }}</p>\n            <p class=\"sub\">{{ $t('home.chat5') }}</p>\n            <p class=\"tip\">{{ $t('home.chat6') }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"aboutBox\">\n      <div class=\"aboutMine\">\n        <ul>\n          <li class=\"aboutFirst\">{{ $t('footer.about.text1') }}</li>\n          <li v-for=\"item in aboutLists1\" :key=\"item.id\"  class=\"aboutLi\">\n            <a :href=\"item.href\" class=\"aboutA\">{{ $t(`footer.about.text${item.id}`) }}</a>\n          </li>\n        </ul>\n        <ul>\n          <li class=\"aboutFirst\">{{ $t('footer.product.text') }}</li>\n          <li class=\"aboutLi\">\n            <a href=\"\" class=\"aboutA\">{{ $t('footer.product.text1') }}</a>\n          </li>\n          <li class=\"aboutLi\">\n            <a href=\"\" class=\"aboutA\">{{ $t('home.payment') }}</a>\n          </li>\n          <li class=\"aboutLi\">\n            <a href=\"\" class=\"aboutA\">{{ $t('home.chain') }}</a>\n          </li>\n        </ul>\n        <ul>\n          <li class=\"aboutFirst\">{{ $t(`footer.service.text`) }}</li>\n          <li v-for=\"item in aboutLists3\" :key=\"item.id\" class=\"aboutLi\">\n            <a :href=\"item.href\" class=\"aboutA\">{{ $t(`footer.service.text${item.id}`) }}</a>\n          </li>\n        </ul>\n        <ul>\n          <li class=\"aboutFirst\">{{ $t(`footer.help.text`) }}</li>\n          <li v-for=\"item in aboutLists4\" :key=\"item.id\" class=\"aboutLi\">\n            <a :href=\"item.href\" class=\"aboutA\">{{ $t(`footer.help.text${item.id}`) }}</a>\n          </li>\n        </ul>\n        <ul>\n          <li class=\"aboutFirst\">{{ $t(`footer.self.text`) }}</li>\n          <li v-for=\"item in aboutLists5\" :key=\"item.id\" class=\"aboutLi\">\n            <a :href=\"item.href\" class=\"aboutA\">{{ $t(`footer.self.text${item.id}`) }}</a>\n          </li>\n        </ul>\n        <ul v-if=\"windowSize !== 768\" class=\"lastUl\">\n          <li class=\"aboutFirst\">Community</li>\n          <li class=\"aboutIcon\">\n            <img\n              v-for=\"n in 8\"\n              :key=\"n\"\n              :src=\"getImage(n as any)\"\n              :alt=\"(n as any) \"\n              class=\"icon\"\n            />\n          </li>\n          <li class=\"about-btn\">\n            <button>{{ $t('menu.locale') }}<icon-down /></button>\n          </li>\n        </ul>\n      </div>\n      <div v-if=\"windowSize === 768\" class=\"footer-mini\">\n        <ul class=\"lastUl\">\n          <li class=\"aboutFirst\">Community</li>\n          <li class=\"aboutIcon\">\n            <img\n              v-for=\"n in 8\"\n              :key=\"n\"\n              :src=\"getImage(n as any)\"\n              :alt=\"(n as any) \"\n              class=\"icon\"\n            />\n          </li>\n          <li class=\"about-btn\">\n            <button>{{ $t('menu.locale') }}<icon-down /></button>\n          </li>\n        </ul>\n      </div>\n    </div>\n   \n    <div class=\"hr\">\n      <div class=\"hrBox\"><footerBox /></div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import usePub from '@/utils/pub-use-office';\n  import { useI18n } from 'vue-i18n';\n  import footerBox from '@/components/footer/index.vue'\nimport { onMounted, ref, watch } from 'vue';\n\n  const { t } = useI18n();\n  const w = ref(window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth -0);\n  const windowSize = ref<number>()\n  onMounted(() => {\n    window.onresize = () => {\n      return (() => {\n        w.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth\n      })()\n    }\n  })\n  \n  watch(w, (newValue, oldValue) => {\n    w.value = newValue \n    if(newValue < 768){\n      windowSize.value = 768\n    }else{\n      windowSize.value = 190\n    }\n  },{ immediate: true });\n  const getImage = usePub;\n  \n\n  const aboutLists1 = [\n    { id: 1, title: '关于我们', href: 'www.baidu.com' },\n    { id: 2, title: '职业机会', href: '' },\n    { id: 3, title: '商务联络', href: '' },\n    { id: 4, title: '服务协议', href: '' },\n    { id: 5, title: '隐私说明', href: '' },\n    { id: 6, title: '风险提示', href: '' },\n    { id: 7, title: '公告中心', href: '' },\n    { id: 8, title: 'Cookie偏好设置', href: '' },\n  ];\n  const aboutLists2 = [\n    { id: 1, title: 'C2C交易', href: 'www.baidu.com' },\n    { id: 2, title: '币趣支付', href: '' },\n    { id: 3, title: '多链钱包', href: '' },\n  ];\n  const aboutLists3 = [\n    { id: 1, title: '成为商户', href: 'www.baidu.com' },\n    { id: 2, title: '承兑商加盟', href: '' },\n    { id: 3, title: '代理推广', href: '' },\n  ];\n  const aboutLists4 = [\n    { id: 1, title: '帮助中心', href: 'www.baidu.com' },\n    { id: 2, title: '在线客服', href: '' },\n    { id: 3, title: '建议与反馈', href: '' },\n    { id: 4, title: '币趣法务', href: '' },\n  ];\n  const aboutLists5 = [\n    { id: 1, title: '重置密码', href: 'www.baidu.com' },\n    { id: 2, title: '解禁账户', href: '' },\n    { id: 3, title: '重置手机验证', href: '' },\n    { id: 4, title: '修改邮箱', href: '' },\n    { id: 5, title: '重置 Google authenticator', href: '' },\n    { id: 6, title: '充值未到账', href: '' },\n  ];\n</script>\n\n<style lang=\"less\" scoped>\n \n  .hr {\n    width: 100%;\n    margin: 0 auto;\n    height: 30px;\n    padding: 0 20px;\n  }\n  .hrBox {\n    height: 0px;\n    border: 1px solid rgba(189, 189, 189, 0.1);\n  }\n  @media ( max-width: 768px) {\n    .footer-demo {\n      width: 100%;\n      min-height: 960px;\n      padding: 0;\n      margin: 0;\n      .helpBox {\n        width: 96%;\n        height: 400px;\n        margin: 0 auto;\n        header {\n          font-size: 30px;\n          font-weight: 600;\n          text-align: center;\n          height: 56px;\n          line-height: 56px;\n          margin-top: 32px;\n          margin-bottom: 24px;\n        }\n        .problem {\n          width: 100%;\n          height: 327px;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          .proBox {\n            width: 370px;\n            height: 140px;\n            display: flex;\n            box-shadow: 0px 10px 40px 0px rgba(23, 151, 255, 0.05);\n            .proPic {\n              width: 60px;\n              height: 100%;\n              margin-left: 20px;\n              display: flex;\n              justify-content: left;\n              align-items: center;\n              img{\n                width: 60px;\n              }\n            }\n            .proText {\n              padding: 0 20px;\n              .tit {\n                font-size: 16px;\n                margin-top: 40px;\n              }\n              .sub {\n                font-size: 12px;\n                color: rgba(71, 77, 87, 1);\n              }\n              .tip {\n                font-size: 12px;\n                color: rgba(252, 165, 43, 1);\n              }\n            }\n          }\n        }\n      }\n      .aboutBox {\n        width: 100%;\n        min-height: 460px;\n        margin-top: 3rem;\n        position: relative;\n        .aboutMine {\n          width: 92%;\n          min-height: 300px;\n          margin: 0 auto;\n          display: flex;\n          flex-wrap: wrap;\n          ul{\n            width: 20%;\n            padding: 0;\n            margin: 0;\n            font-size: 0.6rem;\n            .aboutA {\n              color: rgba(153, 153, 153, 1);\n            }\n            .aboutFirst {\n              color: rgba(102, 102, 102, 1);\n              margin-bottom: 1rem;\n              font-size: .9rem;\n            }\n            .aboutLi {\n              margin-bottom: 16px;\n            }\n          }\n        }\n        .footer-mini{\n          // position: absolute;\n          // top: 19rem;\n          width: 100%;\n          height: 150px;\n          padding-left: 4%;\n        }\n        .lastUl{\n          padding: 0;\n          .aboutFirst {\n              color: rgba(102, 102, 102, 1);\n              margin-bottom: 1rem;\n              font-size: .9rem;\n            }\n          .aboutIcon {\n            width: 100%;\n            display: flex;\n            // justify-content: space-between;\n            flex-wrap: wrap;\n            // margin-bottom: 56px;\n            .icon {\n              width: 30px;\n              height: 30px;\n              margin-right: 1.1rem;\n              margin-bottom: 22px;\n            }\n          }\n          .about-btn{\n            button {\n              width: 120px;\n              height: 42px;\n              border-radius: 5px;\n              background: rgba(233, 235, 240, 1);\n              color: rgba(153, 153, 153, 1);\n            }\n          }\n        }\n      }\n    }\n  }\n  @media (min-width: 768px) and ( max-width: 992px) {\n    .footer-demo {\n      width: 100%;\n      height: 812px;\n      padding: 0;\n      margin: 0;\n      .helpBox {\n        width: 750px;\n        height: 439px;\n        margin: 0 auto;\n        header {\n          font-size: 38px;\n          font-weight: 600;\n          height: 56px;\n          line-height: 56px;\n          margin-top: 108px;\n          margin-bottom: 75px;\n        }\n        .problem {\n          width: 100%;\n          height: 200px;\n          display: flex;\n          justify-content: space-between;\n          .proBox {\n            width: 370px;\n            height: 100%;\n            display: flex;\n            box-shadow: 0px 10px 40px 0px rgba(23, 151, 255, 0.05);\n            .proPic {\n              width: 106px;\n              height: 100%;\n              margin: 0 20px;\n              display: flex;\n              justify-content: right;\n              align-items: center;\n              img{\n                width: 80px;\n              }\n            }\n            .proText {\n              padding: 0 20px;\n              .tit {\n                font-size: 18px;\n                margin-top: 40px;\n              }\n              .sub {\n                font-size: 14px;\n                color: rgba(71, 77, 87, 1);\n              }\n              .tip {\n                font-size: 12px;\n                color: rgba(252, 165, 43, 1);\n              }\n            }\n          }\n        }\n      }\n      .aboutBox {\n        width: 100%;\n        height: 540px;\n        .aboutMine {\n          width: 750px;\n          height: 100%;\n          overflow-y: hidden;\n          margin: 0 auto;\n          display: flex;\n          justify-content: space-between;\n          position: relative;\n          ul{\n            .aboutA {\n              color: rgba(153, 153, 153, 1);\n            }\n            .aboutFirst {\n              color: rgba(102, 102, 102, 1);\n              margin-bottom: 26px;\n              font-size: 16px;\n            }\n            .aboutLi {\n              margin-bottom: 16px;\n            }\n          }\n          .lastUl{\n            width: 520px;\n            position: absolute;\n            top: 340px;\n            .aboutIcon {\n              width: 100%;\n              display: flex;\n              flex-wrap: wrap;\n              // margin-bottom: 56px;\n              .icon {\n                width: 30px;\n                height: 30px;\n                margin-right: 25px;\n                margin-bottom: 22px;\n              }\n            }\n            .about-btn{\n              button {\n                width: 120px;\n                height: 42px;\n                border-radius: 5px;\n                background: rgba(233, 235, 240, 1);\n                color: rgba(153, 153, 153, 1);\n              }\n            }\n          }\n        }\n      }\n    }\n    \n  }\n  @media (min-width: 992px) and ( max-width: 1200px) {\n    .footer-demo {\n      width: 100%;\n      height: 812px;\n      padding: 0;\n      margin: 0;\n      .helpBox {\n        width: 970px;\n        height: 439px;\n        margin: 0 auto;\n        header {\n          font-size: 56px;\n          font-weight: 600;\n          height: 56px;\n          line-height: 56px;\n          margin-top: 108px;\n          margin-bottom: 75px;\n        }\n        .problem {\n          width: 100%;\n          height: 200px;\n          display: flex;\n          justify-content: space-between;\n          .proBox {\n            width: 480px;\n            height: 100%;\n            display: flex;\n            box-shadow: 0px 10px 40px 0px rgba(23, 151, 255, 0.05);\n            .proPic {\n              width: 106px;\n              height: 100%;\n              margin: 0 20px;\n              display: flex;\n              justify-content: right;\n              align-items: center;\n              img{\n                width: 100px;\n              }\n            }\n            .proText {\n              padding: 0 20px;\n              .tit {\n                font-size: 20px;\n                margin-top: 40px;\n              }\n              .sub {\n                font-size: 14px;\n                color: rgba(71, 77, 87, 1);\n              }\n              .tip {\n                font-size: 12px;\n                color: rgba(252, 165, 43, 1);\n              }\n            }\n          }\n        }\n      }\n      .aboutBox {\n        width: 100%;\n        .aboutMine {\n          width: 970px;\n          overflow-x: hidden;\n          margin: 0 auto;\n          display: flex;\n          justify-content: space-between;\n          // padding-top: 74px;\n          ul{\n            .aboutA {\n              color: rgba(153, 153, 153, 1);\n            }\n            .aboutFirst {\n              color: rgba(102, 102, 102, 1);\n              margin-bottom: 26px;\n              font-size: 20px;\n            }\n            .aboutLi {\n              margin-bottom: 16px;\n            }\n          }\n          .lastUl{\n            width: 220px;\n            .aboutIcon {\n              width: 100%;\n              display: flex;\n              // justify-content: space-between;\n              flex-wrap: wrap;\n              margin-bottom: 56px;\n              .icon {\n                width: 30px;\n                height: 30px;\n                margin-right: 25px;\n                margin-bottom: 22px;\n              }\n            }\n            .about-btn{\n              button {\n                width: 120px;\n                height: 42px;\n                border-radius: 5px;\n                background: rgba(233, 235, 240, 1);\n                color: rgba(153, 153, 153, 1);\n              }\n            }\n          }\n        }\n      }\n    }\n    \n  }\n  @media (min-width: 1200px) {\n    .footer-demo {\n      width: 100%;\n      height: 812px;\n      padding: 0;\n      margin: 0;\n      .helpBox {\n        width: 1170px;\n        height: 439px;\n        margin: 0 auto;\n        header {\n          font-size: 56px;\n          font-weight: 600;\n          height: 56px;\n          line-height: 56px;\n          margin-top: 108px;\n          margin-bottom: 75px;\n        }\n        .problem {\n          width: 100%;\n          height: 200px;\n          display: flex;\n          justify-content: space-between;\n          .proBox {\n            width: 580px;\n            height: 100%;\n            display: flex;\n            box-shadow: 0px 10px 40px 0px rgba(23, 151, 255, 0.05);\n            .proPic {\n              width: 126px;\n              height: 100%;\n              padding: 0 20px;\n              display: flex;\n              justify-content: right;\n              align-items: center;\n              img{\n                width: 100px;\n              }\n            }\n            .proText {\n              .tit {\n                font-size: 20px;\n                margin-top: 40px;\n              }\n              .sub {\n                font-size: 14px;\n                color: rgba(71, 77, 87, 1);\n              }\n              .tip {\n                font-size: 12px;\n                color: rgba(252, 165, 43, 1);\n              }\n            }\n          }\n        }\n      }\n      .aboutBox {\n        width: 100%;\n        .aboutMine {\n          width: 1170px;\n          overflow-x: hidden;\n          margin: 0 auto;\n          display: flex;\n          justify-content: space-between;\n          // padding-top: 74px;\n          ul{\n            .aboutA {\n              color: rgba(153, 153, 153, 1);\n            }\n            .aboutFirst {\n              color: rgba(102, 102, 102, 1);\n              margin-bottom: 26px;\n              font-size: 20px;\n            }\n            .aboutLi {\n              margin-bottom: 16px;\n            }\n          }\n          .lastUl{\n            width: 280px;\n            .aboutIcon {\n              width: 100%;\n              display: flex;\n              flex-wrap: wrap;\n              margin-bottom: 56px;\n              .icon {\n                width: 30px;\n                height: 30px;\n                margin-right: 25px;\n                margin-bottom: 22px;\n              }\n            }\n            .about-btn{\n              button {\n                width: 120px;\n                height: 42px;\n                border-radius: 5px;\n                background: rgba(233, 235, 240, 1);\n                color: rgba(153, 153, 153, 1);\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n</style>\n"],"names":["useI18n","w","ref","windowSize","onMounted","watch","newValue","oldValue","getImage","usePub","aboutLists1","aboutLists3","aboutLists4","aboutLists5"],"mappings":"o1CAgHEA,EAAA,EACA,MAAAC,EAAAC,EAAA,OAAA,YAAA,SAAA,gBAAA,aAAA,SAAA,KAAA,YAAA,CAAA,EACAC,EAAAD,IACAE,EAAA,IAAA,CACE,OAAA,SAAA,KACE,IAAA,CACEH,EAAA,MAAA,OAAA,YAAA,SAAA,gBAAA,aAAA,SAAA,KAAA,WAAqF,IAEzF,CAAA,EAGFI,EAAAJ,EAAA,CAAAK,EAAAC,IAAA,CACEN,EAAA,MAAAK,EACAA,EAAA,IACEH,EAAA,MAAA,IAEAA,EAAA,MAAA,GACF,EAAA,CAAA,UAAA,EAAA,CAAA,EAEF,MAAAK,EAAAC,EAGAC,EAAA,CAAoB,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,eAAA,EAC4B,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,EACb,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,EACA,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,EACA,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,EACA,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,EACA,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,EACA,CAAA,GAAA,EAAA,MAAA,iCAAA,KAAA,EAAA,CACM,EAOzCC,EAAA,CAAoB,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,eAAA,EAC4B,CAAA,GAAA,EAAA,MAAA,iCAAA,KAAA,EAAA,EACZ,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,CACD,EAEnCC,EAAA,CAAoB,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,eAAA,EAC4B,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,EACb,CAAA,GAAA,EAAA,MAAA,iCAAA,KAAA,EAAA,EACC,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,CACD,EAEnCC,EAAA,CAAoB,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,eAAA,EAC4B,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,EACb,CAAA,GAAA,EAAA,MAAA,uCAAA,KAAA,EAAA,EACE,CAAA,GAAA,EAAA,MAAA,2BAAA,KAAA,EAAA,EACF,CAAA,GAAA,EAAA,MAAA,oCAAA,KAAA,EAAA,EACmB,CAAA,GAAA,EAAA,MAAA,iCAAA,KAAA,EAAA,CAClB"}