chore: bypass pre-commit for now

2025-09-26 00:12:43 +08:00
1 parent c4ba322e32
commit d6b8682c68
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue'
+import { Overlay } from '@/components/Overlay'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+
+interface Props {
+  visible: boolean
+  title: string
+  desc: string
+  images: string[]
+  compositionKey: '1' | '2' | '3'
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ (e: 'close'): void }>()
+
+const imageMap = {
+  '2': 'shooting/示意图-三分法',
+  '1': 'shooting/示意图-居中',
+  '3': 'shooting/示意图-对角线'
+}
+
+const getImage = computed(() => {
+  return getBackgroundImage(imageMap[props.compositionKey])
+})
+
+// 每张图片的辅助线开关状态
+const showBoxLineMap = ref<Record<number, boolean>>({})
+
+watch(
+  () => props.visible,
+  v => {
+    if (v) {
+      showBoxLineMap.value = {}
+    }
+  }
+)
+
+const handleToggle = (index: number) => {
+  showBoxLineMap.value[index] = !showBoxLineMap.value[index]
+}
+
+const show = computed(() => props.visible)
+</script>
+
+<template>
+  <Overlay :visible="show" :clickable="false">
+    <div
+      class="relative w-[1752px] h-[932px]"
+      :style="{ backgroundImage: getBackgroundImage('shooting/知识卡片底板') }"
+    >
+      <div
+        class="absolute top-4 left-1/2 -translate-x-1/2 text-[45px] text-white font-bold tracking-[2px] drop-shadow-[2px_2px_4px_rgba(0,0,139,0.8)]"
+      >
+        {{ props.title }}
+      </div>
+
+      <div
+        class="absolute w-full h-[38px] top-32 left-1/2 -translate-x-1/2 bg-no-repeat bg-center"
+        :style="{ backgroundImage: getBackgroundImage('shooting/文案1') }"
+      ></div>
+
+      <div
+        class="absolute w-[191px] h-[131px] top-[30px] left-[120px] bg-no-repeat bg-center"
+        :style="{ backgroundImage: getImage }"
+      ></div>
+
+      <div
+        class="absolute top-[calc(50%-30px)] -translate-y-1/2"
+        v-for="(image, index) in props.images"
+        :key="index"
+        :style="{ left: index === 0 ? '15%' : '55%' }"
+      >
+        <ImgButton
+          class="absolute right-6 top-6 z-10"
+          :image="showBoxLineMap[index] ? 'shooting/辅助线开' : 'shooting/辅助线关'"
+          @click="handleToggle(index)"
+        />
+        <div class="relative">
+          <img :src="getStaticImage(image)" alt="" />
+
+          <div v-if="showBoxLineMap[index]" class="absolute inset-0 pointer-events-none p-[18px]">
+            <div class="relative w-full h-full overflow-hidden">
+              <div v-if="props.compositionKey === '1'" class="absolute inset-0">
+                <div
+                  class="absolute top-0 left-1/2 w-0.5 h-full bg-white opacity-80 -translate-x-1/2"
+                ></div>
+                <div
+                  class="absolute left-0 top-1/2 w-full h-0.5 bg-white opacity-80 -translate-y-1/2"
+                ></div>
+              </div>
+
+              <div v-else-if="props.compositionKey === '2'" class="absolute inset-0">
+                <div
+                  class="absolute top-0 left-1/3 w-0.5 h-full bg-white opacity-80 -translate-x-1/2"
+                ></div>
+                <div
+                  class="absolute top-0 left-2/3 w-0.5 h-full bg-white opacity-80 -translate-x-1/2"
+                ></div>
+                <div
+                  class="absolute left-0 top-1/3 w-full h-0.5 bg-white opacity-80 -translate-y-1/2"
+                ></div>
+                <div
+                  class="absolute left-0 top-2/3 w-full h-0.5 bg-white opacity-80 -translate-y-1/2"
+                ></div>
+              </div>
+
+              <div v-else-if="props.compositionKey === '3'" class="absolute inset-0">
+                <div class="absolute top-0 left-0 w-full h-full">
+                  <div
+                    class="absolute top-0 right-0 h-0.5 bg-white opacity-80"
+                    style="width: 141.42%; transform: rotate(-33deg); transform-origin: right top"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="absolute w-full px-20 bottom-32 left-1/2 -translate-x-1/2 text-[#395E66] text-3xl font-bold indent-14 leading-[50px]"
+      >
+        {{ props.desc }}
+      </div>
+
+      <ImgButton
+        class="absolute right-2 top-4 translate-x-1/2 -translate-y-1/2 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+        @click="emit('close')"
+      />
+    </div>
+  </Overlay>
+</template>
+
+<style scoped></style>