dev

2025-06-15 15:50:52 +08:00
parent 21dea5b808
commit a5643868aa
8 changed files with 47 additions and 39 deletions
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-340px bg-black flex flex-col h-90vh">
+  <div class="w-340px bg-black flex flex-col">
    <calc-dialog lazy header="装备条件" v-model:visible="triggerVisible">
      <options />
    </calc-dialog>
@@ -70,7 +70,7 @@
      </template>
    </div>
  </div>
-  <div class="px-5px flex flex-col h-90vh">
+  <div class="px-5px flex flex-col">
    <div class="flex flex-col overflow-hidden bg-black" v-if="curEquInfo">
      <div class="item-head">基础信息</div>
      <div class="flex-1 overflow-y-auto overflow-x-hidden bg-black w-240px">
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-420px">
+  <div class="w-420px overflow-auto">
    <calc-collapse class="w-100%" title="装备/时装打造(点击部位切换)">
      <calc-tabs v-model="partTab" class="!mb-2">
        <calc-tab :value="0">装备栏</calc-tab>
@@ -7,11 +7,14 @@
        <calc-tab :value="`/character/forge/${props.alter}`">打造设置</calc-tab>
      </calc-tabs>
    </div>
-    <div class="content flex">
-      <div class="flex h-auto p-1 overflow-y-hidden" v-if="!!infoStore.infos?.alter">
+    <div class="content flex gap-1">
+      <div
+        class="flex h-auto p-1 overflow-y-hidden flex-1 box-border"
+        v-if="!!infoStore.infos?.alter"
+      >
        <RouterView></RouterView>
      </div>
-      <div class="p-1 ml-auto h-auto overflow-x-hidden z-2">
+      <div class="m-1 ml-auto h-auto overflow-x-auto z-2 box-border">
        <Result></Result>
      </div>
    </div>
@@ -1,18 +0,0 @@
-<svg width="222" height="19" viewBox="0 0 222 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="221" height="18" fill="url(#paint0_linear_142_155)" stroke="url(#paint1_linear_142_155)"/>
-<rect x="1" y="9" width="220" height="9" fill="url(#paint2_linear_142_155)"/>
-<defs>
-<linearGradient id="paint0_linear_142_155" x1="0" y1="9.5" x2="222" y2="9.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#563E02"/>
-<stop offset="1" stop-color="#121212"/>
-</linearGradient>
-<linearGradient id="paint1_linear_142_155" x1="0" y1="9.5" x2="222" y2="9.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7D5F07"/>
-<stop offset="1" stop-color="#2E302E"/>
-</linearGradient>
-<linearGradient id="paint2_linear_142_155" x1="1" y1="13.5" x2="221" y2="13.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#281E06"/>
-<stop offset="1" stop-color="#121212"/>
-</linearGradient>
-</defs>
-</svg>
@@ -127,7 +127,7 @@ export default defineComponent({
            {skillInfo.value?.evolution?.map((item) => (
              <>
              <div class="flex flex-col gap-2px">
-                <div class="skill_vp_skill_title">{item.name}</div>
+                <div class="skill_vp_title">{item.name}</div>
                <div class="skill_title">技能描述</div>
                <div class="h-auto max-h-200px">
                  <div class="h-full bg-#161816 p-2px" style="white-space: pre-wrap;">
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="flex relative" ref="skillTreeRef">
    <div class="flex flex-col">
      <div class="flex bg-#101012 h-40px text-#6C5E4A font-bold">
        <div
@@ -48,26 +48,34 @@
        </div>
      </div>
    </div>
+
    <div
-      class="bg-#101012 w-250px h-full overflow-x-auto"
-      v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0"
+      class="absolute right--60px"
+      v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && !showSkillDetail"
    >
-      <SkillDetail :skillId="curCurrentSkill.skillId" :level="curCurrentSkill.level"></SkillDetail>
-    </div>
-    <!-- <div class="absolute right--60px">
-      <div class="text-#AE8D5A h-60px bg-black p-1px box-border flex pl-2">
+      <div class="text-#AE8D5A p-1px box-border flex pl-2 w-auto">
        <div
          class="border-1px border-solid border-#322E20 border-l-none flex p-1px box-border pl-0"
        >
          <div
-            class="border-1px border-#514531 border-solid rounded-2px"
+            class="border-1px border-#514531 border-solid rounded-2px flex flex-col items-center justify-center p-5px"
            style="background: linear-gradient(to bottom, #313330 0%, #0f110f 100%)"
+            @click="showSkillDetail = true"
          >
-            技能详细
+            <img class="w-30px h-30px" src="./components/img/detail.png" />
+            技能详情
          </div>
        </div>
      </div>
-    </div> -->
+    </div>
+  </div>
+  <div
+    class="bg-#101012 w-300px h-full absolute"
+    :style="style"
+    ref="SkillDetailRef"
+    v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && showSkillDetail"
+  >
+    <SkillDetail :skillId="curCurrentSkill.skillId" :level="curCurrentSkill.level"></SkillDetail>
  </div>
 </template>

@@ -78,6 +86,7 @@ import SkillVP from './components/SkillVP'
 import SkillUP from './components/SkillUP'
 import { useConfigStore } from '@/stores'
 import SkillDetail from './components/SkillDetail'
+import { onClickOutside } from '@vueuse/core'
 const props = defineProps<{
  alter: string
 }>()
@@ -95,13 +104,26 @@ const curCurrentSkill = computed(() => {
  }
 })

+const showSkillDetail = ref(false)
+
+const skillTreeRef = ref<HTMLHtmlElement>()
+const SkillDetailRef = ref<HTMLHtmlElement>()
+
+const style = computed(() => {
+  return {
+    zIndex: 99,
+    height: `${skillTreeRef.value?.clientHeight ?? 0}px`,
+    left: `${(skillTreeRef.value?.clientWidth ?? 0) + 5}px`,
+  }
+})
+
 const setCurrentSkill = (skillId: number) => {
  curSkillId.value = infoStore.skills.find((skill) => skill.id === skillId)?.uuid || ''
 }

-const linkColg = () => {
-  window.open('https://bbs.colg.cn/page_collect/330.html', '_blank')
-}
+onClickOutside(SkillDetailRef, (event) => {showSkillDetail.value = false}, {
+  ignore: [skillTreeRef],
+})
 </script>

 <style lang="scss" scoped>
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full overflow-y-auto mt-0 h-100%">
+  <div class="w-full overflow-y-auto mt-0 h-100%" :style="`zoom:${zoom}`">
    <Suspense>
      <RouterView></RouterView>
    </Suspense>
@@ -8,6 +8,7 @@
 </template>

 <script lang="ts" name="index" setup>
+const zoom = computed(() => /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent || navigator.vendor || (window as any).opera) ? 1 :(window.screen.width / 1800 / 0.85).toFixed(2))
 import { useDialog } from '@/components/hooks/dialog'

 const { render } = useDialog()