fix: convert apps/website from submodule to regular directory

2026-07-16 01:42:45 +08:00
parent f12ae12ad3
commit 9595030625
341 changed files with 50808 additions and 1 deletions
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const activeStep = ref(0);
+
+const steps = [
+  { num: '1', title: '选择产品', desc: '海量精选产品，满足多元定制需求', image: '/01步骤-选择产品.png' },
+  { num: '2', title: '上传设计', desc: '可视化编辑器，轻松实现创意落地', image: '/02步骤-上传设计.png' },
+  { num: '3', title: '在线销售', desc: '一键开通店铺，多渠道触达目标客群', image: '/03步骤-在线销售.png' },
+  { num: '4', title: '生产配送', desc: '智能化柔性生产，快速响应全球配送', image: '/04步骤-生产配送.png' },
+];
+
+const selectStep = (idx: number) => {
+  activeStep.value = idx;
+};
+
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const startAutoPlay = () => {
+  stopAutoPlay();
+  timer = setInterval(() => {
+    activeStep.value = (activeStep.value + 1) % steps.length;
+  }, 3000);
+};
+
+const stopAutoPlay = () => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
+
+const pauseAutoPlay = () => {
+  stopAutoPlay();
+};
+
+const resumeAutoPlay = () => {
+  startAutoPlay();
+};
+
+onMounted(startAutoPlay);
+onUnmounted(stopAutoPlay);
+</script>
+
+<template>
+  <section class="w-full flex flex-col gap-8 lg:gap-10 items-center p-6 lg:p-10">
+    <div class="text-2xl md:text-4xl lg:text-6xl text-center">4 步开始你的按需定制生意</div>
+
+    <div class="flex flex-col lg:flex-row gap-5 w-full max-w-7xl items-stretch">
+      <div class="flex flex-row lg:flex-col gap-3 lg:gap-10 lg:p-5 lg:w-5/12 overflow-x-auto lg:overflow-visible justify-center"
+        @mouseenter="pauseAutoPlay"
+        @mouseleave="resumeAutoPlay"
+      >
+        <div
+          v-for="(step, idx) in steps"
+          :key="idx"
+          class="flex-shrink-0 flex flex-col gap-2 lg:gap-5 cursor-pointer group min-w-[140px] lg:min-w-0"
+          @click="selectStep(idx)"
+          @mouseenter="activeStep = idx"
+        >
+          <p class="text-xl lg:text-3xl font-bold">{{ step.num }} {{ step.title }}</p>
+          <p class="hidden lg:block indent-10 text-gray-500 text-xl">{{ step.desc }}</p>
+          <div class="h-0.5 w-full rounded-full bg-gray-200 overflow-hidden">
+            <div
+              class="h-full rounded-full transition-all duration-500"
+              :class="activeStep === idx ? 'w-1/2 bg-primary' : 'w-0 bg-primary'"
+            ></div>
+          </div>
+        </div>
+        <div class="hidden lg:flex items-center pt-6">
+          <button class="text-xl lg:text-2xl text-white bg-primary rounded-lg px-10 lg:px-14 py-3 lg:py-4 hover:opacity-90 transition-opacity">
+            立即开始
+          </button>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-hidden rounded-xl relative">
+        <img
+          v-for="(step, idx) in steps"
+          :key="'img-' + idx"
+          :src="step.image"
+          :alt="step.title"
+          class="w-full h-full object-contain transition-opacity duration-500 absolute inset-0"
+          :class="activeStep === idx ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+        />
+      </div>
+    </div>
+
+    <div class="flex lg:hidden">
+      <button class="text-xl text-white bg-primary rounded-lg px-10 py-3 hover:opacity-90 transition-opacity">
+        立即开始
+      </button>
+    </div>
+  </section>
+</template>