{"version":3,"file":"guide.e6d45eb0.js","sources":["../../../src/components/SvgIcon/index.vue","../../../src/views/layer/guide.vue"],"sourcesContent":["<template>\r\n  <div :class=\"svgClass\">\r\n    <i :class=\"iconName\"></i>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { computed } from 'vue';\r\nexport default defineComponent({\r\n  name: 'ComponentsSvgIcon',\r\n  props: {\r\n    iconClass: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    className: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n  },\r\n  setup(props) {\r\n    const iconName = computed(() => {\r\n      return `iconfont icon-${props.iconClass}`;\r\n    });\r\n    \r\n    const svgClass = computed(() => {\r\n      if (props.className) {\r\n        return `svg-icon ${props.className}`;\r\n      }\r\n\r\n      return '';\r\n    });\r\n\r\n    return { iconName, svgClass };\r\n  },\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"less\">\r\n.svg-icon {\r\n  width: 1em;\r\n  height: 1em;\r\n  vertical-align: -0.15em;\r\n  fill: currentColor;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.iconfont {\r\n  font-size: 1em;\r\n}\r\n</style>\r\n","<template>\r\n  <nav class=\"guide\">\r\n    <div class=\"guide_wrap\">\r\n      <div class=\"box\">\r\n        <router-link\r\n          class=\"logo_box\"\r\n          :to=\"{ path: '/' }\"\r\n        >\r\n          <img :src=\"data.logoUrl\" alt=\"\" class=\"img\" />\r\n        </router-link>\r\n        <div class=\"menu_box\">\r\n          <div class=\"line\" :style=\"{ left: data.lineLeft + '%' }\"></div>\r\n          <h1\r\n            v-for=\"(item, i) in data.guideList\"\r\n            :key=\"item.id\"\r\n            class=\"item\"\r\n            :class=\"{ active: data.activeId == item.id }\"\r\n            @mouseenter.self=\"lineCtrl(i)\"\r\n            @mouseleave.self=\"lineCtrl(data.activeIndex)\"\r\n            @click=\"nav(item.path)\"\r\n          >\r\n            <div v-if=\"item.icon\" class=\"title icon\" @mouseleave.prevent.stop=\"doNone\">\r\n              <svg-icon :icon-class=\"'sousuo'\"></svg-icon>\r\n            </div>\r\n            <div v-else class=\"title\" @mouseleave.prevent.stop=\"doNone\">\r\n              {{ item.title }}\r\n            </div>\r\n            \r\n          </h1>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n</template>\r\n<script lang=\"ts\">\r\nimport { useRouter } from 'vue-router';\r\n\r\nexport default defineComponent({\r\n  name: 'Guide',\r\n  setup() {\r\n    const data = reactive({\r\n      activeId: 0,\r\n      logoUrl: '/static/images/logo2.png',\r\n      lineLeft: 0,\r\n      activeIndex: 0,\r\n      guideList: [\r\n        { id: 0, title: '主页', path: '/', icon: false },\r\n        { id: 1, title: '音乐', path: '/music', icon: false },\r\n        { id: 2, title: '旅行', path: '/travel', icon: false },\r\n        { id: 3, title: '游戏', path: '/gamelist', icon: false },\r\n        { id: 4, title: '搜索', path: '/search', icon: true },\r\n      ],\r\n    });\r\n\r\n    const lineCtrl = (index: number) => {\r\n      data.lineLeft = 22.5 * index;\r\n    };\r\n\r\n    const doNone = () => {\r\n      // empty\r\n    };\r\n\r\n    const router = useRouter();\r\n    const nav = (path: string) => {\r\n      router.push({\r\n        path,\r\n      });\r\n    };\r\n\r\n    const index = data.guideList.findIndex(item => {\r\n      return item.path === router.currentRoute.value.path;\r\n    });\r\n\r\n    if (index >= 0) {\r\n      data.activeId = data.guideList[index].id;\r\n      data.activeIndex = index;\r\n      lineCtrl(index);\r\n    }\r\n\r\n    return { data, lineCtrl, doNone, nav };\r\n  },\r\n});\r\n</script>\r\n<style lang=\"less\" scoped>\r\n@import \"../../styles/config.less\";\r\n.guide {\r\n  width: 100%;\r\n  height: 0.6rem;\r\n  .guide_wrap {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 0.6rem;\r\n    background-color: @c_bg_tips;\r\n    box-shadow: 0 0.05rem 0.1rem 0 rgba(0, 0, 0, 0.1);\r\n    .box {\r\n      width: 100%;\r\n      height: 100%;\r\n      max-width: @minWidth;\r\n      margin: auto;\r\n      padding: 0 0.3rem;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      .logo_box {\r\n        // width: 1.5rem;\r\n        height: 80%;\r\n        margin-right: 20%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        cursor: pointer;\r\n        .img {\r\n          display: block;\r\n          // width: 100%;\r\n          height: 80%;\r\n          object-fit: contain;\r\n        }\r\n        .text {\r\n          font-size: @f_title_1;\r\n          color: @c_main;\r\n          line-height: 1.5;\r\n          font-weight: bold;\r\n        }\r\n      }\r\n      .menu_box {\r\n        position: relative;\r\n        height: 100%;\r\n        flex: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        .line {\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          width: 10%;\r\n          height: 0.03rem;\r\n          background-color: @brand-danger;\r\n          transition: all 0.5s;\r\n        }\r\n        .item {\r\n          height: 100%;\r\n          width: 10%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          cursor: pointer;\r\n          &:hover {\r\n            background-color: @c_bg_active;\r\n            .title{\r\n              color: @brand-danger;\r\n            }\r\n          }\r\n          .title {\r\n            font-size: @f_title_2;\r\n            color: fade(@brand-danger, 60);\r\n            line-height: 1.5;\r\n            font-weight: bold;\r\n            white-space: nowrap;\r\n            &.icon{\r\n              font-size: @f_title_1;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n@media (max-width: 1200px) {\r\n  .guide {\r\n    .guide_wrap {\r\n      height: 0.5rem;\r\n      .box {\r\n        padding: 0 0.05rem;\r\n        .logo_box {\r\n          display: none;\r\n          margin-right: 5%;\r\n        }\r\n        .menu_box {\r\n          .item {\r\n            .title {\r\n              font-size: @f_title_3;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["_sfc_main","defineComponent","props","iconName","computed","svgClass","_normalizeClass","_ctx","data","reactive","lineCtrl","index2","doNone","router","useRouter","nav","path","index","item","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_5","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_component_router_link","_hoisted_4","_normalizeStyle","_Fragment","_renderList","i","_withModifiers","$event","_cache","args","_toDisplayString","_hoisted_6"],"mappings":"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"}