Ver Fonte

feat: 移动端适配

Lee há 4 dias atrás
pai
commit
3e545c4e7b

+ 16 - 0
app/assets/icons/button-next-mobile-active.svg

@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="e1_arrow01.svg fill" clip-path="url(#clip0_1028_2622)">
+<g id="e1_arrow01.svg" clip-path="url(#clip1_1028_2622)">
+<path id="Vector" d="M32 62.4072C48.7935 62.4072 62.4071 48.7935 62.4072 32C62.4072 15.2065 48.7935 1.59277 32 1.59277C15.2065 1.59287 1.59277 15.2065 1.59277 32C1.59287 48.7934 15.2066 62.4071 32 62.4072Z" fill="#0F67F8" stroke="#0F67F8" stroke-width="2"/>
+<path id="Vector_2" d="M41.2821 32.5459L34.9386 39.5575C34.63 39.8988 34.1294 39.8988 33.8206 39.5575C33.5119 39.2163 33.5119 38.663 33.8206 38.3218L38.8431 32.7704H23.3199C22.899 32.7704 22.5578 32.3933 22.5578 31.9281C22.5578 31.4629 22.899 31.0859 23.3199 31.0859H38.8431L33.8206 25.5345C33.5119 25.1933 33.5119 24.6399 33.8206 24.2987C33.9751 24.1281 34.1774 24.0428 34.3797 24.0428C34.582 24.0428 34.7843 24.1281 34.9386 24.2987L41.2821 31.3102C41.3556 31.3914 41.4138 31.4877 41.4535 31.5937C41.4932 31.6997 41.5137 31.8134 41.5137 31.9281C41.5137 32.0428 41.4932 32.1565 41.4535 32.2625C41.4138 32.3685 41.3556 32.4649 41.2821 32.5459Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1028_2622">
+<rect width="64" height="64" fill="white" transform="matrix(-1 0 0 -1 64 64)"/>
+</clipPath>
+<clipPath id="clip1_1028_2622">
+<rect width="64" height="64" fill="white" transform="matrix(-1 0 0 -1 64 64)"/>
+</clipPath>
+</defs>
+</svg>

+ 16 - 0
app/assets/icons/button-next-mobile-disabled.svg

@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1093_5284)">
+<g clip-path="url(#clip1_1093_5284)">
+<path d="M32 62.4072C48.7935 62.4072 62.4071 48.7935 62.4072 32C62.4072 15.2065 48.7935 1.59277 32 1.59277C15.2065 1.59287 1.59277 15.2065 1.59277 32C1.59287 48.7934 15.2066 62.4071 32 62.4072Z" fill="#F4F5F9" stroke="#A9C9FF" stroke-width="2"/>
+<path d="M41.2821 32.5459L34.9386 39.5575C34.63 39.8988 34.1294 39.8988 33.8206 39.5575C33.5119 39.2163 33.5119 38.663 33.8206 38.3218L38.8431 32.7704H23.3199C22.899 32.7704 22.5578 32.3933 22.5578 31.9281C22.5578 31.4629 22.899 31.0859 23.3199 31.0859H38.8431L33.8206 25.5345C33.5119 25.1933 33.5119 24.6399 33.8206 24.2987C33.9751 24.1281 34.1774 24.0428 34.3797 24.0428C34.582 24.0428 34.7843 24.1281 34.9386 24.2987L41.2821 31.3102C41.3556 31.3914 41.4138 31.4877 41.4535 31.5937C41.4932 31.6997 41.5137 31.8134 41.5137 31.9281C41.5137 32.0428 41.4932 32.1565 41.4535 32.2625C41.4138 32.3685 41.3556 32.4649 41.2821 32.5459Z" fill="#B1CDFD"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1093_5284">
+<rect width="64" height="64" fill="white" transform="matrix(-1 0 0 -1 64 64)"/>
+</clipPath>
+<clipPath id="clip1_1093_5284">
+<rect width="64" height="64" fill="white" transform="matrix(-1 0 0 -1 64 64)"/>
+</clipPath>
+</defs>
+</svg>

+ 16 - 0
app/assets/icons/button-next-mobile.svg

@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="e1_arrow01.svg fill" clip-path="url(#clip0_1028_2613)">
+<g id="e1_arrow01.svg" clip-path="url(#clip1_1028_2613)">
+<path id="Vector" d="M32 62.4072C48.7935 62.4072 62.4071 48.7935 62.4072 32C62.4072 15.2065 48.7935 1.59277 32 1.59277C15.2065 1.59287 1.59277 15.2065 1.59277 32C1.59287 48.7934 15.2066 62.4071 32 62.4072Z" fill="white" stroke="#0F67F8" stroke-width="2"/>
+<path id="Vector_2" d="M41.2821 32.5459L34.9386 39.5575C34.63 39.8988 34.1294 39.8988 33.8206 39.5575C33.5119 39.2163 33.5119 38.663 33.8206 38.3218L38.8431 32.7704H23.3199C22.899 32.7704 22.5578 32.3933 22.5578 31.9281C22.5578 31.4629 22.899 31.0859 23.3199 31.0859H38.8431L33.8206 25.5345C33.5119 25.1933 33.5119 24.6399 33.8206 24.2987C33.9751 24.1281 34.1774 24.0428 34.3797 24.0428C34.582 24.0428 34.7843 24.1281 34.9386 24.2987L41.2821 31.3102C41.3556 31.3914 41.4138 31.4877 41.4535 31.5937C41.4932 31.6997 41.5137 31.8134 41.5137 31.9281C41.5137 32.0428 41.4932 32.1565 41.4535 32.2625C41.4138 32.3685 41.3556 32.4649 41.2821 32.5459Z" fill="#0F67F8"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1028_2613">
+<rect width="64" height="64" fill="white" transform="matrix(-1 0 0 -1 64 64)"/>
+</clipPath>
+<clipPath id="clip1_1028_2613">
+<rect width="64" height="64" fill="white" transform="matrix(-1 0 0 -1 64 64)"/>
+</clipPath>
+</defs>
+</svg>

+ 16 - 0
app/assets/icons/button-previous-mobile-active.svg

@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="e1_arrow01.svg fill" clip-path="url(#clip0_1028_2618)">
+<g id="e1_arrow01.svg" clip-path="url(#clip1_1028_2618)">
+<path id="Vector" d="M32 1.59277C15.2065 1.59277 1.59287 15.2065 1.59277 32C1.59277 48.7935 15.2065 62.4072 32 62.4072C48.7935 62.4071 62.4072 48.7935 62.4072 32C62.4071 15.2066 48.7934 1.59287 32 1.59277Z" fill="#0F67F8" stroke="#0F67F8" stroke-width="2"/>
+<path id="Vector_2" d="M22.7179 31.4541L29.0614 24.4425C29.37 24.1012 29.8706 24.1012 30.1794 24.4425C30.4881 24.7837 30.4881 25.337 30.1794 25.6782L25.1569 31.2296H40.6801C41.101 31.2296 41.4422 31.6067 41.4422 32.0719C41.4422 32.5371 41.101 32.9141 40.6801 32.9141H25.1569L30.1794 38.4655C30.4881 38.8067 30.4881 39.3601 30.1794 39.7013C30.0249 39.8719 29.8226 39.9572 29.6203 39.9572C29.418 39.9572 29.2157 39.8719 29.0614 39.7013L22.7179 32.6898C22.6444 32.6086 22.5862 32.5123 22.5465 32.4063C22.5068 32.3003 22.4863 32.1866 22.4863 32.0719C22.4863 31.9572 22.5068 31.8435 22.5465 31.7375C22.5862 31.6315 22.6444 31.5351 22.7179 31.4541Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1028_2618">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1028_2618">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>

+ 16 - 0
app/assets/icons/button-previous-mobile-disabled.svg

@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1093_5289)">
+<g clip-path="url(#clip1_1093_5289)">
+<path d="M32 62.4072C15.2065 62.4072 1.59287 48.7935 1.59277 32C1.59277 15.2065 15.2065 1.59277 32 1.59277C48.7935 1.59287 62.4072 15.2065 62.4072 32C62.4071 48.7934 48.7934 62.4071 32 62.4072Z" fill="#F4F5F9" stroke="#A9C9FF" stroke-width="2"/>
+<path d="M22.7179 32.5459L29.0614 39.5575C29.37 39.8988 29.8706 39.8988 30.1794 39.5575C30.4881 39.2163 30.4881 38.663 30.1794 38.3218L25.1569 32.7704H40.6801C41.101 32.7704 41.4422 32.3933 41.4422 31.9281C41.4422 31.4629 41.101 31.0859 40.6801 31.0859H25.1569L30.1794 25.5345C30.4881 25.1933 30.4881 24.6399 30.1794 24.2987C30.0249 24.1281 29.8226 24.0428 29.6203 24.0428C29.418 24.0428 29.2157 24.1281 29.0614 24.2987L22.7179 31.3102C22.6444 31.3914 22.5862 31.4877 22.5465 31.5937C22.5068 31.6997 22.4863 31.8134 22.4863 31.9281C22.4863 32.0428 22.5068 32.1565 22.5465 32.2625C22.5862 32.3685 22.6444 32.4649 22.7179 32.5459Z" fill="#B1CDFD"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1093_5289">
+<rect width="64" height="64" fill="white" transform="matrix(1 0 0 -1 0 64)"/>
+</clipPath>
+<clipPath id="clip1_1093_5289">
+<rect width="64" height="64" fill="white" transform="matrix(1 0 0 -1 0 64)"/>
+</clipPath>
+</defs>
+</svg>

+ 16 - 0
app/assets/icons/button-previous-mobile.svg

@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="e1_arrow01.svg fill" clip-path="url(#clip0_1028_2609)">
+<g id="e1_arrow01.svg" clip-path="url(#clip1_1028_2609)">
+<path id="Vector" d="M32 1.59277C15.2065 1.59277 1.59287 15.2065 1.59277 32C1.59277 48.7935 15.2065 62.4072 32 62.4072C48.7935 62.4071 62.4072 48.7935 62.4072 32C62.4071 15.2066 48.7934 1.59287 32 1.59277Z" fill="white" stroke="#0F67F8" stroke-width="2"/>
+<path id="Vector_2" d="M22.7179 31.4541L29.0614 24.4425C29.37 24.1012 29.8706 24.1012 30.1794 24.4425C30.4881 24.7837 30.4881 25.337 30.1794 25.6782L25.1569 31.2296H40.6801C41.101 31.2296 41.4422 31.6067 41.4422 32.0719C41.4422 32.5371 41.101 32.9141 40.6801 32.9141H25.1569L30.1794 38.4655C30.4881 38.8067 30.4881 39.3601 30.1794 39.7013C30.0249 39.8719 29.8226 39.9572 29.6203 39.9572C29.418 39.9572 29.2157 39.8719 29.0614 39.7013L22.7179 32.6898C22.6444 32.6086 22.5862 32.5123 22.5465 32.4063C22.5068 32.3003 22.4863 32.1866 22.4863 32.0719C22.4863 31.9572 22.5068 31.8435 22.5465 31.7375C22.5862 31.6315 22.6444 31.5351 22.7179 31.4541Z" fill="#0F67F8"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1028_2609">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1028_2609">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>

Diff do ficheiro suprimidas por serem muito extensas
+ 2 - 0
app/assets/icons/mobile-phone.svg


BIN
app/assets/images/bg-3-mobile.png


BIN
app/assets/images/bg-ability-mobile.png


+ 8 - 5
app/components/Footer.vue

@@ -3,13 +3,13 @@
  * @Description: AppFooter
 -->
 <template>
-  <footer class="bg-black text-white py-60px lt-sm:py-40px sm:pt-130px sm:pb-60px">
+  <footer class="bg-black text-white py-60px lt-sm:py-40px sm:pt-130px sm:pb-60px lt-sm:pt-88px">
     <div class="footer-container">
       <!-- 顶部区域:链接列表 + 联系方式 -->
       <div class="flex flex-col sm:flex-row justify-between items-start gap-60px sm:gap-0">
         <!-- 左侧链接列表 -->
         <div
-          class="flex flex-wrap gap-40px sm:gap-80px w-full sm:w-auto justify-between sm:justify-start"
+          class="flex flex-wrap gap-40px sm:gap-80px w-full sm:w-auto justify-between sm:justify-start lt-sm:hidden"
         >
           <!-- 产品 -->
           <div class="text-left">
@@ -101,14 +101,17 @@
 
         <!-- 右侧联系方式 -->
         <div class="flex flex-col sm:flex-row gap-40px sm:gap-123px w-full sm:w-auto">
-          <div class="text-left">
+          <div class="text-left lt-sm:text-center">
             <div class="text-16px lh-22px text-white pf-sc-semibold">关注或联系我们</div>
-            <div class="text-14px lh-22px text-#94a3b8 mt-16px">电话:400-600-7709</div>
+            <div class="text-14px lh-22px text-#94a3b8 mt-16px">
+              <span class="lt-sm:hidden">电话:400-600-7709</span>
+              <i class="i-custom-mobile-phone lt-sm:h-58px lt-sm:w-552px"></i>
+            </div>
             <div class="text-14px lh-22px text-#94a3b8 mt-16px">
               地址:海南省海口市美兰区西溪里商业街7号楼A127
             </div>
           </div>
-          <div class="flex flex-col items-start sm:items-center">
+          <div class="flex flex-col items-start sm:items-center lt-sm:items-center">
             <i class="i-custom-qrcode wh-136px"></i>
             <div class="mt-12px text-16px text-#white lh-22px pf-sc-regular">扫一扫关注我们</div>
           </div>

+ 2 - 2
app/components/inspira/Marquee.vue

@@ -2,12 +2,12 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-14 16:44:03
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-14 16:55:35
+ * @LastEditTime: 2026-01-19 14:38:35
  * @Description: 
 -->
 <template>
   <div
-    class="group flex overflow-hidden py-24px [--duration:40s] [--gap:1rem] [gap:var(--gap)]"
+    class="group flex overflow-hidden py-24px lt-sm:py-48px [--duration:40s] [--gap:1rem] [gap:var(--gap)]"
     :class="vertical ? 'flex-col' : 'flex-row'"
   >
     <div

Diff do ficheiro suprimidas por serem muito extensas
+ 405 - 244
app/pages/index/index.vue


+ 0 - 40
app/plugins/rem.client.ts

@@ -1,40 +0,0 @@
-/*
- * @Author: LiZhiWei
- * @Date: 2026-01-19 09:12:33
- * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-19 09:12:36
- * @Description:
- */
-// plugins/rem.client.ts
-export default defineNuxtPlugin((nuxtApp) => {
-  const setRem = () => {
-    const designWidth = 1920 // 我们的设计稿宽度
-    const baseSize = 16 // 我们希望的最大基准值 (1rem = 16px)
-    const clientWidth = document.documentElement.clientWidth
-
-    // 核心计算公式:缩放比例 = 当前视宽 / 设计稿宽度
-    const remSize = (clientWidth / designWidth) * baseSize
-
-    // 【关键】设置字体大小,并限制其在 12px 到 16px 之间
-    // 这意味着:屏幕小于 1920px 时会缩小,大于 1920px 时根字体大小稳定在 16px
-    document.documentElement.style.fontSize = `${Math.min(Math.max(remSize, 12), 16)}px`
-  }
-
-  let timer: NodeJS.Timeout | null = null
-  const setRemDebounced = () => {
-    if (timer) clearTimeout(timer)
-    timer = setTimeout(setRem, 250) // 防抖优化
-  }
-
-  // App 挂载后设置并监听 resize
-  nuxtApp.hook('app:mounted', () => {
-    setRem()
-    window.addEventListener('resize', setRemDebounced)
-  })
-
-  // App 卸载前清理
-  nuxtApp.hook('app:beforeMount', () => {
-    window.removeEventListener('resize', setRemDebounced)
-    if (timer) clearTimeout(timer)
-  })
-})

+ 1 - 33
uno.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2023-05-07 20:59:28
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-19 09:29:31
+ * @LastEditTime: 2026-01-19 15:56:48
  * @Description:
  */
 import {
@@ -30,25 +30,6 @@ export default defineConfig({
       },
     }),
   ],
-  postprocess: (util) => {
-    const pxRE = /(-?[\d.]+px)/g
-    // 检查选择器是否包含移动端变体(lt-sm, lt-xs)
-    const isMobile = util.selector.includes('lt-sm') || util.selector.includes('lt-xs')
-
-    if (isMobile) {
-      util.entries.forEach((i) => {
-        const value = i[1]
-        if (typeof value === 'string' && pxRE.test(value)) {
-          // 移动端:按 750px 设计稿转换 (px / 7.5)
-          i[1] = value.replace(pxRE, (match) => {
-            const px = parseFloat(match)
-            if (isNaN(px)) return match
-            return `${(px / 7.5).toFixed(5)}vw`
-          })
-        }
-      })
-    }
-  },
   transformers: [transformerDirectives(), transformerVariantGroup()],
   postprocess: (util) => {
     const pxRE = /(-?[\d.]+px)/g
@@ -71,19 +52,6 @@ export default defineConfig({
           })
         }
       })
-    } else {
-      // PC 端逻辑:如果你希望 PC 端也转换(按 1920),取消下面注释
-      /*
-      util.entries.forEach((i) => {
-        const value = i[1]
-        if (typeof value === 'string' && pxRE.test(value)) {
-          i[1] = value.replace(pxRE, (match) => {
-            const px = parseFloat(match)
-            return `${(px / 19.2).toFixed(5)}vw`
-          })
-        }
-      })
-      */
     }
   },
   rules: [

Alguns ficheiros não foram mostrados porque muitos ficheiros mudaram neste diff