{"version":3,"file":"index.a784cd50.js","sources":["../../../../assets/icons/arrow2-blue.svg","../../../../pages/index/components/hot-list/config.ts","../../../../pages/index/components/hot-list/index.vue"],"sourcesContent":["export default \"__VITE_ASSET__cf3cc9bf__\"","/*\n * @Author: luxiangqiang\n * @Date: 2023-05-04 10:10:43\n * @LastEditors: luxiangqiang\n * @LastEditTime: 2023-05-04 15:45:17\n */\n\nexport const tabs = [\n  {\n    tab: '亚洲',\n    countries: [\n      {\n        name: '越南',\n        count: '28294',\n        num: 160\n      },\n      {\n        name: '印尼',\n        count: '26491',\n        num: 150\n      },\n      {\n        name: '泰国',\n        count: '25210',\n        num: 120\n      },\n      {\n        name: '日本',\n        count: '23100',\n        num: 100\n      },\n      {\n        name: '菲利宾',\n        count: '18620',\n        num: 50\n      },\n    ]\n  },\n  {\n    tab: '美洲',\n    countries: [\n      {\n        name: '美国',\n        count: '20765',\n        num: 150\n      },\n      {\n        name: '巴西',\n        count: '13716',\n        num: 100\n      },\n      {\n        name: '阿根廷',\n        count: '10484',\n        num: 80\n      },\n      {\n        name: '墨西哥',\n        count: '9388',\n        num: 70\n      },\n      {\n        name: '智利',\n        count: '8289',\n        num: 60\n      },\n    ]\n  },\n  {\n    tab: '欧洲',\n    countries: [\n      {\n        name: '德国',\n        count: '14427',\n        num: 150\n      },\n      {\n        name: '英国',\n        count: '12728',\n        num: 120\n      },\n      {\n        name: '法国',\n        count: '10036',\n        num: 100\n      },\n      {\n        name: '塞尔维亚',\n        count: '7636',\n        num: 80\n      },\n      {\n        name: '波兰',\n        count: '7525',\n        num: 70\n      },\n    ]\n  },\n  {\n    tab: '非洲',\n    countries: [\n      {\n        name: '埃及',\n        count: '15108',\n        num: 150\n      },\n      {\n        name: '阿联酋',\n        count: '13855',\n        num: 130\n      },\n      {\n        name: '尼日利亚',\n        count: '12954',\n        num: 120\n      },\n      {\n        name: '沙特阿拉伯',\n        count: '12947',\n        num: 115\n      },\n      {\n        name: '阿尔及利亚',\n        count: '12232',\n        num: 110\n      },\n    ]\n  },\n];\n","<!--\n * @Author: luxiangqiang\n * @Date: 2023-05-04 09:43:02\n * @LastEditors: luxiangqiang\n * @LastEditTime: 2023-05-12 11:10:44\n-->\n<template>\n  <div class=\"hot-list\">\n    <div class=\"title\" @click=\"handlerGoCountryList\">\n      <img src=\"@/assets/icons/hot.svg\" alt=\"hot\" />\n      <span class=\"title_text\">出海国家热门榜</span>\n      <img class=\"arrow\" src=\"@/assets/icons/arrow2-blue.svg\" alt=\"arrow\" />\n    </div>\n    <div class=\"tabs\" @mouseenter=\"stopAutoPlay\" @mouseleave=\"startAutoPlay\">\n      <div class=\"tabs_bar\">\n        <div class=\"tab\" :class=\"{ active: tab === item.tab }\" v-for=\"item of tabs\" :key=\"item.tab\"\n          @click=\"handlerOnTabClick(item.tab)\">\n          {{ item.tab }}\n        </div>\n      </div>\n      <div>\n        <div class=\"tabs_content\" :class=\"{ active: tab === item.tab }\" v-for=\"item of tabs\" :key=\"item.tab\"\n          v-show=\"tab === item.tab\" @click=\"handlerGoCountryList\">\n          <div class=\"country-item\" v-for=\"el of item.countries\" :key=\"el.name\">\n            <span class=\"name\">{{ el.name }}</span>\n            <span class=\"bar\">\n              <span class=\"fill\" :style=\"{ width: el.num + 'px' }\"></span>\n            </span>\n            <span class=\"count\">{{ el.count }}</span>\n          </div>\n          <div class=\"bottom-text\">数据代表：热度值</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { tabs } from './config';\n\nconst router = useRouter();\nconst tab = ref('亚洲');\n\nonMounted(() => {\n  startAutoPlay();\n});\n\nconst autoPlayTimer = ref(0);\n\nfunction stopAutoPlay() {\n  window.clearTimeout(autoPlayTimer.value);\n  autoPlayTimer.value = 0;\n}\n\nfunction startAutoPlay() {\n  if (autoPlayTimer.value) {\n    return;\n  }\n  autoPlayTimer.value = window.setTimeout(() => {\n    stopAutoPlay();\n    const currentTabIndex = tabs.findIndex(conf => conf.tab === tab.value);\n    if (currentTabIndex === tabs.length - 1) {\n      tab.value = tabs[0].tab;\n    } else {\n      tab.value = tabs[currentTabIndex + 1].tab;\n    }\n    startAutoPlay();\n  }, 2000);\n}\n\nconst handlerOnTabClick = (value: string | number) => {\n  tab.value = value.toString();\n};\n\nconst handlerGoCountryList = () => {\n  router.push(`/rank-list`);\n};\n</script>\n\n<style scoped lang=\"less\">\n@media screen and (min-width: 800px) {\n  .hot-list {\n    .title {\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n\n      img {\n        width: 25px;\n        height: 25px;\n        margin-right: 8px;\n      }\n\n      .arrow {\n        width: 20px;\n        height: 20px;\n      }\n\n      &_text {\n        font-weight: 500;\n        font-size: 22px;\n        line-height: 30px;\n        color: #1d2129;\n        margin-right: 3px;\n      }\n    }\n\n    .tabs {\n      width: 388px;\n      margin-top: 15px;\n\n      &_content {\n        // background: linear-gradient(38.81deg, rgba(226, 248, 255, 0.62) 18.28%, rgba(241, 245, 255, 0.74) 62.97%);\n        cursor: pointer;\n        background: rgba(241, 245, 255, 0.5);\n        backdrop-filter: blur(6px);\n        padding-bottom: 8px;\n        padding-top: 20px;\n        border-radius: 8px;\n        border: 2px solid #fff;\n\n        @media screen and (max-width: 800px) {\n          box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);\n        }\n      }\n\n      &_content.active {\n        border-top: 0;\n        position: relative;\n        overflow: hidden;\n        &::before, &::after {\n          display: block;\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 2px;\n          background: #fff;\n        }\n        &:first-child {\n          border-top-left-radius: 0;\n          &::before {\n            display: none;\n          }\n          &::after {\n            left: 84px;\n            right: 0;\n          }\n        }\n        &:nth-child(2) {\n          &::before {\n            left: 0;\n            width: 100px;\n          }\n          &::after {\n            left: 184px;\n            right: 0;\n          }\n        }\n        &:nth-child(3) {\n          &::before {\n            left: 0;\n            width: 200px;\n          }\n          &::after {\n            left: 284px;\n            right: 0;\n          }\n        }\n        &:last-child {\n          border-top-right-radius: 0;\n          &::before {\n            left: 0;\n            right: 84px;\n          }\n          &::after {\n            display: none;\n          }\n        }\n      }\n\n      &_bar {\n        display: flex;\n        justify-content: space-between;\n        position: relative;\n        z-index: 1;\n      }\n\n      .tab {\n        background: rgba(241, 245, 255, 0.5);\n        backdrop-filter: blur(6px);\n        border-top-left-radius: 8px;\n        border-top-right-radius: 8px;\n        height: 36px;\n        border-radius: 8px;\n        font-size: 16px;\n        line-height: 28px;\n        color: #415c83;\n        padding: 2px 0;\n        box-sizing: border-box;\n        width: 88px;\n        text-align: center;\n        cursor: pointer;\n        border: 2px solid #fff;\n      }\n\n      .tab.active {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        height: 45px;\n        border-bottom: 0;\n        color: #386aff;\n        font-weight: 600;\n\n        @media screen and (max-width: 800px) {\n          box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);\n        }\n      }\n\n      .country-item {\n        display: flex;\n        align-items: center;\n        margin-bottom: 12px;\n\n        .name {\n          width: 100px;\n          text-align: right;\n          font-size: 18px;\n          line-height: 25px;\n          text-align: right;\n          color: #415c83;\n          margin-right: 18px;\n        }\n\n        .bar {\n          position: relative;\n          display: inline-block;\n          width: 180px;\n          height: 6px;\n          background-color: rgba(252, 254, 255, 0.9);\n          box-shadow: 0px 1px 8px rgba(42, 92, 179, 0.2);\n          border-radius: 3px;\n\n          .fill {\n            height: 6px;\n            display: inline-block;\n            position: absolute;\n            background: #5286ff;\n            border-radius: 3px;\n          }\n        }\n\n        .count {\n          font-weight: 700;\n          font-size: 16px;\n          line-height: 19px;\n          color: #1d2129;\n          margin-left: 15px;\n        }\n      }\n\n      .bottom-text {\n        font-weight: 400;\n        font-size: 12px;\n        line-height: 16px;\n        text-align: center;\n        color: #3b67a8;\n      }\n    }\n  }\n}\n</style>\n\n<style scoped lang=\"less\">\n@media screen and (max-width: 800px) {\n  .hot-list {\n    width: 100%;\n    overflow: hidden;\n    padding: 0 20px 20px 20px;\n\n    .title {\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n\n      img {\n        width: 25px;\n        height: 25px;\n        margin-right: 8px;\n      }\n\n      .arrow {\n        width: 20px;\n        height: 20px;\n      }\n\n      &_text {\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 25px;\n        color: #1d2129;\n        margin-right: 3px;\n      }\n    }\n\n    .tabs {\n      margin-top: 15px;\n\n      &_content {\n        background: linear-gradient(180.78deg, #E2F1FF 1.27%, #F4F9FF 42.6%, #FFFFFF 102.99%);\n        cursor: pointer;\n        backdrop-filter: blur(6px);\n        padding-bottom: 8px;\n        padding-top: 20px;\n        border-radius: 8px;\n        box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);\n        border: 2px solid #fff;\n      }\n\n      &_content.active {\n        margin-top: -2px;\n        &:first-child {\n          border-top-left-radius: 0;\n        }\n\n        &:last-child {\n          border-top-right-radius: 0;\n        }\n      }\n\n      &_bar {\n        display: flex;\n        justify-content: space-between;\n        position: relative;\n        z-index: 1;\n        gap: 12px;\n      }\n\n      .tab {\n        backdrop-filter: blur(6px);\n        border-top-left-radius: 8px;\n        border-top-right-radius: 8px;\n        height: 32px;\n        border-radius: 8px;\n        font-size: 16px;\n        line-height: 28px;\n        color: #415c83;\n        padding-top: 2px;\n        box-sizing: border-box;\n        text-align: center;\n        cursor: pointer;\n        background: #FFFFFF;\n        border: 1px solid #E5E7EB;\n        border-radius: 8px;\n        flex-grow: 1;\n      }\n\n      .tab.active {\n        background: #E2F1FF;\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        border-bottom: 0;\n        color: #386aff;\n        font-weight: 600;\n        border-bottom: 0;\n        border: 2px solid #fff;\n        border-bottom: 0;\n        box-shadow: 0px -10px 16px -5px rgba(0, 0, 0, 0.08);\n        height: 42px;\n      }\n\n      .country-item {\n        display: flex;\n        align-items: center;\n        margin-bottom: 12px;\n\n        .name {\n          text-align: right;\n          line-height: 25px;\n          text-align: right;\n          color: #415c83;\n          margin-right: 10px;\n          width: 90px;\n          font-size: 16px;\n        }\n\n        .bar {\n          position: relative;\n          display: inline-block;\n          width: 170px;\n          height: 6px;\n          background-color: rgba(252, 254, 255, 0.9);\n          box-shadow: 0px 1px 8px rgba(42, 92, 179, 0.2);\n          border-radius: 3px;\n\n          .fill {\n            height: 6px;\n            display: inline-block;\n            position: absolute;\n            background: #5286ff;\n            border-radius: 3px;\n          }\n        }\n\n        .count {\n          font-weight: 700;\n          font-size: 16px;\n          line-height: 19px;\n          color: #1d2129;\n          margin-left: 15px;\n        }\n      }\n\n      .bottom-text {\n        font-weight: 400;\n        font-size: 12px;\n        line-height: 16px;\n        text-align: center;\n        color: #3b67a8;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_imports_1","tabs","router","useRouter","tab","ref","onMounted","startAutoPlay","autoPlayTimer","stopAutoPlay","currentTabIndex","conf","handlerOnTabClick","value","handlerGoCountryList"],"mappings":"0PAAA,MAAeA,EAAA,GAAA,IAAA,IAAA,2BAAA,YAAA,GAAA,EAAA,KCOFC,EAAO,CAClB,CACE,IAAK,eACL,UAAW,CACT,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,qBACN,MAAO,QACP,IAAK,EACP,CACF,CACF,EACA,CACE,IAAK,eACL,UAAW,CACT,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,qBACN,MAAO,QACP,IAAK,EACP,EACA,CACE,KAAM,qBACN,MAAO,OACP,IAAK,EACP,EACA,CACE,KAAM,eACN,MAAO,OACP,IAAK,EACP,CACF,CACF,EACA,CACE,IAAK,eACL,UAAW,CACT,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,2BACN,MAAO,OACP,IAAK,EACP,EACA,CACE,KAAM,eACN,MAAO,OACP,IAAK,EACP,CACF,CACF,EACA,CACE,IAAK,eACL,UAAW,CACT,CACE,KAAM,eACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,qBACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,2BACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,iCACN,MAAO,QACP,IAAK,GACP,EACA,CACE,KAAM,iCACN,MAAO,QACP,IAAK,GACP,CACF,CACF,CACF,0dCxFA,MAAAC,EAAAC,IACAC,EAAAC,EAAA,cAAA,EAEAC,EAAA,IAAA,CACEC,GAAc,CAAA,EAGhB,MAAAC,EAAAH,EAAA,CAAA,EAEA,SAAAI,GAAA,CACE,OAAA,aAAAD,EAAA,KAAA,EACAA,EAAA,MAAA,CAAsB,CAGxB,SAAAD,GAAA,CACEC,EAAA,QAGAA,EAAA,MAAA,OAAA,WAAA,IAAA,CACEC,IACA,MAAAC,EAAAT,EAAA,UAAAU,GAAAA,EAAA,MAAAP,EAAA,KAAA,EACAM,IAAAT,EAAA,OAAA,EACEG,EAAA,MAAAH,EAAA,GAAA,IAEAG,EAAA,MAAAH,EAAAS,EAAA,GAAA,IAEFH,GAAc,EAAA,GAAA,EACT,CAGT,MAAAK,EAAAC,GAAA,CACET,EAAA,MAAAS,EAAA,UAA2B,EAG7BC,EAAA,IAAA,CACEZ,EAAA,KAAA,YAAA,CAAwB"}