{"version":3,"file":"index.b9f0c638.mjs","sources":["../../../../components/suspenseBox/index.vue"],"sourcesContent":["<template>\n  <div class=\"suspense\" v-if=\"suspense && suspense.suspendShow && iconList && iconList.length\">\n    <div class=\"icon_preview_content\" v-for=\"(item,index) in iconList\" :key=\"index\">\n      <div v-if=\"item.suspendIconType === 2\" class=\"icon\" :style=\"{ 'background-color': item.isHover ? suspense.selectBackgroundColor : '#fff' }\" @mouseenter=\"item.isHover = true\" @mouseleave=\"item.isHover = false\" @click=\"toTop\">\n        <img v-if=\" item.defaultIcon && !item.isHover\" :src=\"item.defaultIcon\" alt=\"\" />\n        <img v-if=\"item.selectIcon && item.isHover\" :src=\"item.selectIcon\" alt=\"\" />\n        <div\n          v-if=\"item.showIconName\"\n          class=\"icon_name\"\n          :style=\"{ color: item.isHover ? suspense.selectTextColor : 'inherit' }\"\n        >\n          {{ item.iconName }}\n        </div>\n      </div>\n      <client-only>\n        <el-popover\n          v-if=\"item.suspendIconType === 1 && item.suspendShowStyle !== 3\"\n          placement=\"left\"\n          trigger=\"hover\"\n          @show=\"item.isHover = true\"\n          @hide=\"item.isHover = false\"\n        >\n          <template #reference>\n            <div class=\"icon\" :style=\"{ 'background-color': item.isHover ? suspense.selectBackgroundColor : '#fff' }\">\n              <img v-if=\" item.defaultIcon && !item.isHover\" :src=\"item.defaultIcon\" alt=\"\" />\n              <img v-if=\"item.selectIcon && item.isHover\" :src=\"item.selectIcon\" alt=\"\" />\n              <div\n                v-if=\"item.showIconName\"\n                class=\"icon_name\"\n                :style=\"{ color: item.isHover ? suspense.selectTextColor : 'inherit' }\"\n              >\n                {{ item.iconName }}\n              </div>\n            </div>\n          </template>\n          <template v-if=\"item.suspendShowStyle === 1\">\n            <img class=\"icon_popover_img\" :src=\"item.targetUrl\" alt=\"\" />\n            <div class=\"popover_targetDesc\">{{ item.targetDesc }}</div>\n          </template>\n          <template v-if=\"item.suspendShowStyle === 2\">\n            <div>{{ item.targetDesc }}</div>\n          </template>\n        </el-popover>\n      </client-only>\n      <a\n        v-if=\"item.suspendShowStyle === 3\"\n        class=\"icon\"\n        :style=\"{ 'background-color': item.isHover ? suspense.selectBackgroundColor : '#fff' }\"\n        @mouseover=\"item.isHover = true\"\n        @mouseout=\"item.isHover = false\"\n        :href=\"item.targetUrl\"\n        target=\"_blank\"\n      >\n        <img v-if=\"item.defaultIcon && !item.isHover\" :src=\"item.defaultIcon\" alt=\"\" />\n        <img v-if=\"item.selectIcon && item.isHover\" :src=\"item.selectIcon\" alt=\"\" />\n        <div\n          v-if=\"item.showIconName\"\n          class=\"icon_name\"\n          :style=\"{ color: item.isHover ? suspense.selectTextColor : 'inherit' }\"\n        >\n          {{ item.iconName }}\n        </div>\n      </a>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref, onMounted, reactive } from 'vue';\nimport { useLayoutStore } from '@/stores/layout';\nconst layoutStore = useLayoutStore();\nconst suspense = computed(() => layoutStore.suspense);\nconst iconList = computed(() => {\n  return suspense.value.iconList.filter((item) => {\n    return item\n  });\n});\n\nconst toTop = () => {\n  console.log(document.querySelector('#app').scrollTop)\n  document.querySelector('#app').scrollTop = 0\n}\nonMounted(() => {\n  layoutStore.setSuspense();\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.suspense {\n  padding: 5px 0;\n  overflow: hidden;\n  z-index: 100;\n  position: fixed;\n  top: 50%;\n  right: 6px;\n  transform: translateY(-50%);\n  width: 60px;\n  background: #ffffff;\n  box-shadow: 0px 5px 15px rgba(54, 41, 183, 0.06);\n  border-radius: 5px;\n}\n.icon_preview_content {\n  cursor: pointer;\n  .icon {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 60px;\n    height: 60px;\n    background-color: #ffffff;\n    transition: all 0.3s;\n    img {\n      width: 24px;\n      height: 24px;\n      transition: all 0.3s;\n    }\n    .icon_name {\n      margin-top: 2px;\n      font-size: 12px;\n      line-height: 18px;\n      transition: all 0.3s;\n    }\n    &:hover {\n      background: rgb(245, 166, 35);\n      color: rgb(189, 16, 224);\n    }\n  }\n}\n</style>\n"],"names":["layoutStore","useLayoutStore","suspense","computed","iconList","value","filter","item","toTop","document","querySelector","scrollTop","onMounted","setSuspense"],"mappings":"uZAsEA,MAAAA,EAAAC,IACAC,EAAAC,GAAA,IAAAH,EAAAE,WACAE,EAAAD,GAAA,IACAD,EAAAG,MAAAD,SAAAE,QAAAC,GACAA,MAIAC,EAAA,KAEAC,SAAAC,cAAA,QAAAC,UAAA,CAAA,SAEAC,GAAA,KACAZ,EAAAa,aAAA"}