fix: 代码暂存

2025-10-20 11:09:18 +08:00 · 2025-10-20 11:09:18 +08:00 · fecc320e51
commit fecc320e51
parent e75e8adcd3
35 changed files with 1776 additions and 1153 deletions
--- a/package.json
+++ b/package.json
@ -43,6 +43,7 @@
    "@vant/auto-import-resolver": "^1.2.1",
    "@vitejs/plugin-legacy": "^5.3.0",
    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
    "@vueuse/core": "^10.11.0",
    "autoprefixer": "^10.4.20",
    "babel-plugin-transform-react-jsx": "^6.24.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -99,6 +99,9 @@ importers:
      '@vitejs/plugin-vue':
        specifier: ^5.0.5
        version: 5.1.2(vite@5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35)
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^5.1.1
+        version: 5.1.1(vite@5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35)
      '@vueuse/core':
        specifier: ^10.11.0
        version: 10.11.0(vue@3.4.35)
@ -122,7 +125,7 @@ importers:
        version: 0.18.2(@vueuse/core@10.11.0(vue@3.4.35))(rollup@4.20.0)
      unplugin-vue-components:
        specifier: ^0.27.3
-        version: 0.27.3(@babel/parser@7.27.2)(rollup@4.20.0)(vue@3.4.35)
+        version: 0.27.3(@babel/parser@7.28.4)(rollup@4.20.0)(vue@3.4.35)
      vite:
        specifier: ^5.3.4
        version: 5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3)
@ -157,10 +160,18 @@ packages:
    resolution: {integrity: sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==}
    engines: {node: '>=6.9.0'}

+  '@babel/compat-data@7.28.4':
+    resolution: {integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/core@7.25.2':
    resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==}
    engines: {node: '>=6.9.0'}

+  '@babel/core@7.28.4':
+    resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/generator@7.25.0':
    resolution: {integrity: sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==}
    engines: {node: '>=6.9.0'}
@ -169,6 +180,10 @@ packages:
    resolution: {integrity: sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==}
    engines: {node: '>=6.9.0'}

+  '@babel/generator@7.28.3':
+    resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/helper-annotate-as-pure@7.24.7':
    resolution: {integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==}
    engines: {node: '>=6.9.0'}
@ -177,6 +192,10 @@ packages:
    resolution: {integrity: sha512-WnuuDILl9oOBbKnb4L+DyODx7iC47XfzmNCpTttFsSp6hTG7XZxu60+4IO+2/hPfcGOoKbFiwoI/+zwARbNQow==}
    engines: {node: '>=6.9.0'}

+  '@babel/helper-annotate-as-pure@7.27.3':
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/helper-builder-binary-assignment-operator-visitor@7.24.7':
    resolution: {integrity: sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA==}
    engines: {node: '>=6.9.0'}
@ -185,6 +204,10 @@ packages:
    resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==}
    engines: {node: '>=6.9.0'}

+  '@babel/helper-compilation-targets@7.27.2':
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/helper-create-class-features-plugin@7.25.0':
    resolution: {integrity: sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==}
    engines: {node: '>=6.9.0'}
@ -208,6 +231,10 @@ packages:
    peerDependencies:
      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0

+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/helper-member-expression-to-functions@7.24.8':
    resolution: {integrity: sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==}
    engines: {node: '>=6.9.0'}
@ -230,6 +257,12 @@ packages:
    peerDependencies:
      '@babel/core': ^7.0.0

+  '@babel/helper-module-transforms@7.28.3':
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
  '@babel/helper-optimise-call-expression@7.24.7':
    resolution: {integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==}
    engines: {node: '>=6.9.0'}
@ -296,6 +329,10 @@ packages:
    resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==}
    engines: {node: '>=6.9.0'}

+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/helper-wrap-function@7.25.0':
    resolution: {integrity: sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==}
    engines: {node: '>=6.9.0'}
@ -304,6 +341,10 @@ packages:
    resolution: {integrity: sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==}
    engines: {node: '>=6.9.0'}

+  '@babel/helpers@7.28.4':
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/highlight@7.24.7':
    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
    engines: {node: '>=6.9.0'}
@ -318,6 +359,11 @@ packages:
    engines: {node: '>=6.0.0'}
    hasBin: true

+  '@babel/parser@7.28.4':
+    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.3':
    resolution: {integrity: sha512-wUrcsxZg6rqBXG05HG1FPYgsP6EvwF4WpBbxIpWIIYnH8wG0gzx3yZY3dtEHas4sTAOGkbTsc9EGPxwff8lRoA==}
    engines: {node: '>=6.9.0'}
@ -474,6 +520,12 @@ packages:
    peerDependencies:
      '@babel/core': ^7.0.0-0

+  '@babel/plugin-syntax-typescript@7.27.1':
+    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
  '@babel/plugin-syntax-unicode-sets-regex@7.18.6':
    resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
    engines: {node: '>=6.9.0'}
@ -756,6 +808,12 @@ packages:
    peerDependencies:
      '@babel/core': ^7.0.0-0

+  '@babel/plugin-transform-typescript@7.28.0':
+    resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
  '@babel/plugin-transform-unicode-escapes@7.24.7':
    resolution: {integrity: sha512-U3ap1gm5+4edc2Q/P+9VrBNhGkfnf+8ZqppY71Bo/pzZmXhhLdqgaUl6cuB07O1+AQJtCLfaOmswiNbSQ9ivhw==}
    engines: {node: '>=6.9.0'}
@ -820,6 +878,10 @@ packages:
    resolution: {integrity: sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==}
    engines: {node: '>=6.9.0'}

+  '@babel/traverse@7.28.4':
+    resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/types@7.25.2':
    resolution: {integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==}
    engines: {node: '>=6.9.0'}
@ -828,6 +890,10 @@ packages:
    resolution: {integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==}
    engines: {node: '>=6.9.0'}

+  '@babel/types@7.28.4':
+    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
+    engines: {node: '>=6.9.0'}
+
  '@css-render/plugin-bem@0.15.14':
    resolution: {integrity: sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==}
    peerDependencies:
@ -1246,10 +1312,16 @@ packages:
    resolution: {integrity: sha512-8tR1xe7ZEbkabTuE/tNhzpolygUn9OaYp9yuYAF4MgDNZg06C3Qny80bes2/e9/Wm3aVkPUlCw6WgU7mQd0yEg==}
    engines: {node: '>= 16'}

+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
  '@jridgewell/gen-mapping@0.3.5':
    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
    engines: {node: '>=6.0.0'}

+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
  '@jridgewell/resolve-uri@3.1.2':
    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
    engines: {node: '>=6.0.0'}
@ -1264,9 +1336,15 @@ packages:
  '@jridgewell/sourcemap-codec@1.5.0':
    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}

+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
  '@jridgewell/trace-mapping@0.3.25':
    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}

+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
  '@juggle/resize-observer@3.4.0':
    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}

@ -1290,6 +1368,9 @@ packages:
  '@polka/url@1.0.0-next.25':
    resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}

+  '@rolldown/pluginutils@1.0.0-beta.43':
+    resolution: {integrity: sha512-5Uxg7fQUCmfhax7FJke2+8B6cqgeUJUD9o2uXIKXhD+mG0mL6NObmVoi9wXEU1tY89mZKgAYA6fTbftx3q2ZPQ==}
+
  '@rollup/plugin-babel@6.0.4':
    resolution: {integrity: sha512-YF7Y52kFdFT/xVSuVdjkV5ZdX/3YtmX0QulG+x0taQOtJdHYzVU61aSSkAgVJ7NOv6qPkIYiJSgSWWN/DM5sGw==}
    engines: {node: '>=14.0.0'}
@ -1594,6 +1675,13 @@ packages:
      terser: ^5.4.0
      vite: ^5.0.0

+  '@vitejs/plugin-vue-jsx@5.1.1':
+    resolution: {integrity: sha512-uQkfxzlF8SGHJJVH966lFTdjM/lGcwJGzwAHpVqAPDD/QcsqoUGa+q31ox1BrUfi+FLP2ChVp7uLXE3DkHyDdQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+      vue: ^3.0.0
+
  '@vitejs/plugin-vue@5.1.2':
    resolution: {integrity: sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==}
    engines: {node: ^18.0.0 || >=20.0.0}
@ -1604,6 +1692,9 @@ packages:
  '@vue/babel-helper-vue-transform-on@1.4.0':
    resolution: {integrity: sha512-mCokbouEQ/ocRce/FpKCRItGo+013tHg7tixg3DUNS+6bmIchPt66012kBMm476vyEIJPafrvOf4E5OYj3shSw==}

+  '@vue/babel-helper-vue-transform-on@1.5.0':
+    resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==}
+
  '@vue/babel-plugin-jsx@1.4.0':
    resolution: {integrity: sha512-9zAHmwgMWlaN6qRKdrg1uKsBKHvnUU+Py+MOCTuYZBoZsopa90Di10QRjB+YPnVss0BZbG/H5XFwJY1fTxJWhA==}
    peerDependencies:
@ -1612,35 +1703,60 @@ packages:
      '@babel/core':
        optional: true

+  '@vue/babel-plugin-jsx@1.5.0':
+    resolution: {integrity: sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
  '@vue/babel-plugin-resolve-type@1.4.0':
    resolution: {integrity: sha512-4xqDRRbQQEWHQyjlYSgZsWj44KfiF6D+ktCuXyZ8EnVDYV3pztmXJDf1HveAjUAXxAnR8daCQT51RneWWxtTyQ==}
    peerDependencies:
      '@babel/core': ^7.0.0-0

+  '@vue/babel-plugin-resolve-type@1.5.0':
+    resolution: {integrity: sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
  '@vue/compiler-core@3.4.35':
    resolution: {integrity: sha512-gKp0zGoLnMYtw4uS/SJRRO7rsVggLjvot3mcctlMXunYNsX+aRJDqqw/lV5/gHK91nvaAAlWFgdVl020AW1Prg==}

  '@vue/compiler-core@3.5.14':
    resolution: {integrity: sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA==}

+  '@vue/compiler-core@3.5.22':
+    resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
+
  '@vue/compiler-dom@3.4.35':
    resolution: {integrity: sha512-pWIZRL76/oE/VMhdv/ovZfmuooEni6JPG1BFe7oLk5DZRo/ImydXijoZl/4kh2406boRQ7lxTYzbZEEXEhj9NQ==}

  '@vue/compiler-dom@3.5.14':
    resolution: {integrity: sha512-1aOCSqxGOea5I80U2hQJvXYpPm/aXo95xL/m/mMhgyPUsKe9jhjwWpziNAw7tYRnbz1I61rd9Mld4W9KmmRoug==}

+  '@vue/compiler-dom@3.5.22':
+    resolution: {integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==}
+
  '@vue/compiler-sfc@3.4.35':
    resolution: {integrity: sha512-xacnRS/h/FCsjsMfxBkzjoNxyxEyKyZfBch/P4vkLRvYJwe5ChXmZZrj8Dsed/752H2Q3JE8kYu9Uyha9J6PgA==}

  '@vue/compiler-sfc@3.5.14':
    resolution: {integrity: sha512-9T6m/9mMr81Lj58JpzsiSIjBgv2LiVoWjIVa7kuXHICUi8LiDSIotMpPRXYJsXKqyARrzjT24NAwttrMnMaCXA==}

+  '@vue/compiler-sfc@3.5.22':
+    resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
+
  '@vue/compiler-ssr@3.4.35':
    resolution: {integrity: sha512-7iynB+0KB1AAJKk/biENTV5cRGHRdbdaD7Mx3nWcm1W8bVD6QmnH3B4AHhQQ1qZHhqFwzEzMwiytXm3PX1e60A==}

  '@vue/compiler-ssr@3.5.14':
    resolution: {integrity: sha512-Y0G7PcBxr1yllnHuS/NxNCSPWnRGH4Ogrp0tsLA5QemDZuJLs99YjAKQ7KqkHE0vCg4QTKlQzXLKCMF7WPSl7Q==}

+  '@vue/compiler-ssr@3.5.22':
+    resolution: {integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==}
+
  '@vue/devtools-api@6.6.3':
    resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}

@ -1675,6 +1791,9 @@ packages:
  '@vue/shared@3.5.14':
    resolution: {integrity: sha512-oXTwNxVfc9EtP1zzXAlSlgARLXNC84frFYkS0HHz0h3E4WZSP9sywqjqzGCP9Y34M8ipNmd380pVgmMuwELDyQ==}

+  '@vue/shared@3.5.22':
+    resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
+
  '@vueuse/core@10.11.0':
    resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}

@ -1783,6 +1902,10 @@ packages:
  base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}

+  baseline-browser-mapping@2.8.17:
+    resolution: {integrity: sha512-j5zJcx6golJYTG6c05LUZ3Z8Gi+M62zRT/ycz4Xq4iCOdpcxwg7ngEYD4KA0eWZC7U17qh/Smq8bYbACJ0ipBA==}
+    hasBin: true
+
  bin-build@3.0.0:
    resolution: {integrity: sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==}
    engines: {node: '>=4'}
@ -1838,6 +1961,11 @@ packages:
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true

+  browserslist@4.26.3:
+    resolution: {integrity: sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
  buffer-alloc-unsafe@1.1.0:
    resolution: {integrity: sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==}

@ -1884,6 +2012,9 @@ packages:
  caniuse-lite@1.0.30001649:
    resolution: {integrity: sha512-fJegqZZ0ZX8HOWr6rcafGr72+xcgJKI9oWfDW5DrD7ExUtgZC7a7R7ZYmZqplh7XDocFdGeIFn7roAxhOeYrPQ==}

+  caniuse-lite@1.0.30001751:
+    resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
+
  caw@2.0.1:
    resolution: {integrity: sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==}
    engines: {node: '>=4'}
@ -2191,6 +2322,9 @@ packages:
  echarts@5.6.0:
    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}

+  electron-to-chromium@1.5.237:
+    resolution: {integrity: sha512-icUt1NvfhGLar5lSWH3tHNzablaA5js3HVHacQimfP8ViEBOQv+L7DKEuHdbTZ0SKCO1ogTJTIL1Gwk9S6Qvcg==}
+
  electron-to-chromium@1.5.4:
    resolution: {integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==}

@ -2344,6 +2478,10 @@ packages:
    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
    engines: {node: '>=6'}

+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
  escape-string-regexp@1.0.5:
    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
    engines: {node: '>=0.8.0'}
@ -2968,6 +3106,9 @@ packages:
  magic-string@0.30.17:
    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}

+  magic-string@0.30.19:
+    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
+
  make-dir@1.3.0:
    resolution: {integrity: sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==}
    engines: {node: '>=4'}
@ -3084,6 +3225,9 @@ packages:
  node-releases@2.0.18:
    resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}

+  node-releases@2.0.25:
+    resolution: {integrity: sha512-4auku8B/vw5psvTiiN9j1dAOsXvMoGqJuKJcR+dTdqiXEK20mMTk1UEo3HS16LeGQsVG6+qKTPM9u/qQ2LqATA==}
+
  normalize-package-data@2.5.0:
    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}

@ -3493,6 +3637,10 @@ packages:
    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
    engines: {node: ^10 || ^12 || >=14}

+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
  prepend-http@1.0.4:
    resolution: {integrity: sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==}
    engines: {node: '>=0.10.0'}
@ -4011,6 +4159,12 @@ packages:
    peerDependencies:
      browserslist: '>= 4.21.0'

+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
  url-parse-lax@1.0.0:
    resolution: {integrity: sha512-BVA4lR5PIviy2PMseNd2jbFQ+jwSwQGdJejf5ctd1rEXt0Ypd7yanUK9+lYechVlN5VaTJGsu2U/3MDDu6KgBA==}
    engines: {node: '>=0.10.0'}
@ -4261,6 +4415,8 @@ snapshots:

  '@babel/compat-data@7.25.2': {}

+  '@babel/compat-data@7.28.4': {}
+
  '@babel/core@7.25.2':
    dependencies:
      '@ampproject/remapping': 2.3.0
@ -4281,6 +4437,26 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@babel/core@7.28.4':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.3
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.4
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.1
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
  '@babel/generator@7.25.0':
    dependencies:
      '@babel/types': 7.25.2
@ -4296,6 +4472,14 @@ snapshots:
      '@jridgewell/trace-mapping': 0.3.25
      jsesc: 3.1.0

+  '@babel/generator@7.28.3':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
  '@babel/helper-annotate-as-pure@7.24.7':
    dependencies:
      '@babel/types': 7.25.2
@ -4304,6 +4488,10 @@ snapshots:
    dependencies:
      '@babel/types': 7.27.1

+  '@babel/helper-annotate-as-pure@7.27.3':
+    dependencies:
+      '@babel/types': 7.28.4
+
  '@babel/helper-builder-binary-assignment-operator-visitor@7.24.7':
    dependencies:
      '@babel/traverse': 7.25.3
@ -4319,6 +4507,14 @@ snapshots:
      lru-cache: 5.1.1
      semver: 6.3.1

+  '@babel/helper-compilation-targets@7.27.2':
+    dependencies:
+      '@babel/compat-data': 7.28.4
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.26.3
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
  '@babel/helper-create-class-features-plugin@7.25.0(@babel/core@7.25.2)':
    dependencies:
      '@babel/core': 7.25.2
@ -4345,6 +4541,19 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@babel/helper-create-class-features-plugin@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-annotate-as-pure': 7.27.1
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.4)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.27.1
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
  '@babel/helper-create-regexp-features-plugin@7.25.2(@babel/core@7.25.2)':
    dependencies:
      '@babel/core': 7.25.2
@ -4363,6 +4572,8 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@babel/helper-globals@7.28.0': {}
+
  '@babel/helper-member-expression-to-functions@7.24.8':
    dependencies:
      '@babel/traverse': 7.25.3
@ -4386,8 +4597,8 @@ snapshots:

  '@babel/helper-module-imports@7.27.1':
    dependencies:
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
    transitivePeerDependencies:
      - supports-color

@ -4401,6 +4612,15 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/traverse': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
  '@babel/helper-optimise-call-expression@7.24.7':
    dependencies:
      '@babel/types': 7.25.2
@ -4440,6 +4660,15 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
  '@babel/helper-simple-access@7.24.7':
    dependencies:
      '@babel/traverse': 7.25.3
@ -4471,6 +4700,8 @@ snapshots:

  '@babel/helper-validator-option@7.24.8': {}

+  '@babel/helper-validator-option@7.27.1': {}
+
  '@babel/helper-wrap-function@7.25.0':
    dependencies:
      '@babel/template': 7.25.0
@ -4484,6 +4715,11 @@ snapshots:
      '@babel/template': 7.25.0
      '@babel/types': 7.25.2

+  '@babel/helpers@7.28.4':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.4
+
  '@babel/highlight@7.24.7':
    dependencies:
      '@babel/helper-validator-identifier': 7.24.7
@ -4499,6 +4735,10 @@ snapshots:
    dependencies:
      '@babel/types': 7.27.1

+  '@babel/parser@7.28.4':
+    dependencies:
+      '@babel/types': 7.28.4
+
  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.3(@babel/core@7.25.2)':
    dependencies:
      '@babel/core': 7.25.2
@ -4607,6 +4847,11 @@ snapshots:
      '@babel/core': 7.25.2
      '@babel/helper-plugin-utils': 7.27.1

+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.25.2)':
    dependencies:
      '@babel/core': 7.25.2
@ -4650,7 +4895,12 @@ snapshots:
  '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.25.2)':
    dependencies:
      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1

  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.25.2)':
    dependencies:
@ -4975,6 +5225,17 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.28.4)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
+    transitivePeerDependencies:
+      - supports-color
+
  '@babel/plugin-transform-unicode-escapes@7.24.7(@babel/core@7.25.2)':
    dependencies:
      '@babel/core': 7.25.2
@ -5121,7 +5382,7 @@ snapshots:
    dependencies:
      '@babel/code-frame': 7.27.1
      '@babel/parser': 7.27.2
-      '@babel/types': 7.27.1
+      '@babel/types': 7.28.4

  '@babel/traverse@7.25.3':
    dependencies:
@ -5147,6 +5408,18 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@babel/traverse@7.28.4':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.3
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.4
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.4
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+
  '@babel/types@7.25.2':
    dependencies:
      '@babel/helper-string-parser': 7.24.8
@ -5158,6 +5431,11 @@ snapshots:
      '@babel/helper-string-parser': 7.27.1
      '@babel/helper-validator-identifier': 7.27.1

+  '@babel/types@7.28.4':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
  '@css-render/plugin-bem@0.15.14(css-render@0.15.14)':
    dependencies:
      css-render: 0.15.14
@ -5508,12 +5786,22 @@ snapshots:

  '@intlify/shared@11.0.0-rc.1': {}

+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.31
+
  '@jridgewell/gen-mapping@0.3.5':
    dependencies:
      '@jridgewell/set-array': 1.2.1
      '@jridgewell/sourcemap-codec': 1.5.0
      '@jridgewell/trace-mapping': 0.3.25

+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+
  '@jridgewell/resolve-uri@3.1.2': {}

  '@jridgewell/set-array@1.2.1': {}
@ -5525,11 +5813,18 @@ snapshots:

  '@jridgewell/sourcemap-codec@1.5.0': {}

+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
  '@jridgewell/trace-mapping@0.3.25':
    dependencies:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.0

+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
  '@juggle/resize-observer@3.4.0': {}

  '@nodelib/fs.scandir@2.1.5':
@ -5551,6 +5846,8 @@ snapshots:

  '@polka/url@1.0.0-next.25': {}

+  '@rolldown/pluginutils@1.0.0-beta.43': {}
+
  '@rollup/plugin-babel@6.0.4(@babel/core@7.25.2)(rollup@4.20.0)':
    dependencies:
      '@babel/core': 7.25.2
@ -5889,6 +6186,18 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@vitejs/plugin-vue-jsx@5.1.1(vite@5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
+      '@rolldown/pluginutils': 1.0.0-beta.43
+      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.4)
+      vite: 5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3)
+      vue: 3.4.35
+    transitivePeerDependencies:
+      - supports-color
+
  '@vitejs/plugin-vue@5.1.2(vite@5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35)':
    dependencies:
      vite: 5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3)
@ -5896,6 +6205,8 @@ snapshots:

  '@vue/babel-helper-vue-transform-on@1.4.0': {}

+  '@vue/babel-helper-vue-transform-on@1.5.0': {}
+
  '@vue/babel-plugin-jsx@1.4.0(@babel/core@7.25.2)':
    dependencies:
      '@babel/helper-module-imports': 7.27.1
@ -5912,6 +6223,22 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+      '@vue/babel-helper-vue-transform-on': 1.5.0
+      '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.4)
+      '@vue/shared': 3.5.22
+    optionalDependencies:
+      '@babel/core': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
  '@vue/babel-plugin-resolve-type@1.4.0(@babel/core@7.25.2)':
    dependencies:
      '@babel/code-frame': 7.27.1
@ -5923,6 +6250,17 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@vue/babel-plugin-resolve-type@1.5.0(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/core': 7.28.4
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/parser': 7.28.4
+      '@vue/compiler-sfc': 3.5.22
+    transitivePeerDependencies:
+      - supports-color
+
  '@vue/compiler-core@3.4.35':
    dependencies:
      '@babel/parser': 7.25.3
@ -5939,6 +6277,14 @@ snapshots:
      estree-walker: 2.0.2
      source-map-js: 1.2.1

+  '@vue/compiler-core@3.5.22':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@vue/shared': 3.5.22
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
  '@vue/compiler-dom@3.4.35':
    dependencies:
      '@vue/compiler-core': 3.4.35
@ -5949,6 +6295,11 @@ snapshots:
      '@vue/compiler-core': 3.5.14
      '@vue/shared': 3.5.14

+  '@vue/compiler-dom@3.5.22':
+    dependencies:
+      '@vue/compiler-core': 3.5.22
+      '@vue/shared': 3.5.22
+
  '@vue/compiler-sfc@3.4.35':
    dependencies:
      '@babel/parser': 7.25.3
@ -5973,6 +6324,18 @@ snapshots:
      postcss: 8.5.3
      source-map-js: 1.2.1

+  '@vue/compiler-sfc@3.5.22':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@vue/compiler-core': 3.5.22
+      '@vue/compiler-dom': 3.5.22
+      '@vue/compiler-ssr': 3.5.22
+      '@vue/shared': 3.5.22
+      estree-walker: 2.0.2
+      magic-string: 0.30.19
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
  '@vue/compiler-ssr@3.4.35':
    dependencies:
      '@vue/compiler-dom': 3.4.35
@ -5983,6 +6346,11 @@ snapshots:
      '@vue/compiler-dom': 3.5.14
      '@vue/shared': 3.5.14

+  '@vue/compiler-ssr@3.5.22':
+    dependencies:
+      '@vue/compiler-dom': 3.5.22
+      '@vue/shared': 3.5.22
+
  '@vue/devtools-api@6.6.3': {}

  '@vue/devtools-core@7.7.6(vite@5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35)':
@ -6037,6 +6405,8 @@ snapshots:

  '@vue/shared@3.5.14': {}

+  '@vue/shared@3.5.22': {}
+
  '@vueuse/core@10.11.0(vue@3.4.35)':
    dependencies:
      '@types/web-bluetooth': 0.0.20
@ -6171,6 +6541,8 @@ snapshots:

  base64-js@1.5.1: {}

+  baseline-browser-mapping@2.8.17: {}
+
  bin-build@3.0.0:
    dependencies:
      decompress: 4.2.1
@ -6240,6 +6612,14 @@ snapshots:
      node-releases: 2.0.18
      update-browserslist-db: 1.1.0(browserslist@4.23.3)

+  browserslist@4.26.3:
+    dependencies:
+      baseline-browser-mapping: 2.8.17
+      caniuse-lite: 1.0.30001751
+      electron-to-chromium: 1.5.237
+      node-releases: 2.0.25
+      update-browserslist-db: 1.1.3(browserslist@4.26.3)
+
  buffer-alloc-unsafe@1.1.0: {}

  buffer-alloc@1.2.0:
@ -6288,6 +6668,8 @@ snapshots:

  caniuse-lite@1.0.30001649: {}

+  caniuse-lite@1.0.30001751: {}
+
  caw@2.0.1:
    dependencies:
      get-proxy: 2.1.0
@ -6630,6 +7012,8 @@ snapshots:
      tslib: 2.3.0
      zrender: 5.6.1

+  electron-to-chromium@1.5.237: {}
+
  electron-to-chromium@1.5.4: {}

  end-of-stream@1.4.4:
@ -6758,6 +7142,8 @@ snapshots:

  escalade@3.1.2: {}

+  escalade@3.2.0: {}
+
  escape-string-regexp@1.0.5: {}

  escape-string-regexp@5.0.0: {}
@ -7434,6 +7820,10 @@ snapshots:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.0

+  magic-string@0.30.19:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
  make-dir@1.3.0:
    dependencies:
      pify: 3.0.0
@ -7549,6 +7939,8 @@ snapshots:

  node-releases@2.0.18: {}

+  node-releases@2.0.25: {}
+
  normalize-package-data@2.5.0:
    dependencies:
      hosted-git-info: 2.8.9
@ -7995,6 +8387,12 @@ snapshots:
      picocolors: 1.1.1
      source-map-js: 1.2.1

+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
  prepend-http@1.0.4: {}

  prepend-http@2.0.0: {}
@ -8500,7 +8898,7 @@ snapshots:
    transitivePeerDependencies:
      - rollup

-  unplugin-vue-components@0.27.3(@babel/parser@7.27.2)(rollup@4.20.0)(vue@3.4.35):
+  unplugin-vue-components@0.27.3(@babel/parser@7.28.4)(rollup@4.20.0)(vue@3.4.35):
    dependencies:
      '@antfu/utils': 0.7.10
      '@rollup/pluginutils': 5.1.0(rollup@4.20.0)
@ -8514,7 +8912,7 @@ snapshots:
      unplugin: 1.12.0
      vue: 3.4.35
    optionalDependencies:
-      '@babel/parser': 7.27.2
+      '@babel/parser': 7.28.4
    transitivePeerDependencies:
      - rollup
      - supports-color
@ -8532,6 +8930,12 @@ snapshots:
      escalade: 3.1.2
      picocolors: 1.0.1

+  update-browserslist-db@1.1.3(browserslist@4.26.3):
+    dependencies:
+      browserslist: 4.26.3
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
  url-parse-lax@1.0.0:
    dependencies:
      prepend-http: 1.0.4
--- a/src/assets/image/content/bg_15.png
+++ b/src/assets/image/content/bg_15.png
--- a/src/assets/image/content/bg_16.png
+++ b/src/assets/image/content/bg_16.png
--- a/src/assets/image/content/bg_17.png
+++ b/src/assets/image/content/bg_17.png
--- a/src/assets/image/content/bg_19.png
+++ b/src/assets/image/content/bg_19.png
--- a/src/assets/image/content/bg_20.png
+++ b/src/assets/image/content/bg_20.png
--- a/src/assets/image/content/bg_21.png
+++ b/src/assets/image/content/bg_21.png
--- a/src/assets/image/content/bg_22.png
+++ b/src/assets/image/content/bg_22.png
--- a/src/assets/image/content/bg_23.png
+++ b/src/assets/image/content/bg_23.png
--- a/src/assets/image/content/bg_24.png
+++ b/src/assets/image/content/bg_24.png
--- a/src/assets/image/content/bg_25.png
+++ b/src/assets/image/content/bg_25.png
--- a/src/assets/image/content/bg_26.png
+++ b/src/assets/image/content/bg_26.png
--- a/src/assets/image/content/flower.png
+++ b/src/assets/image/content/flower.png
--- a/src/assets/image/content/flower375.png
+++ b/src/assets/image/content/flower375.png
--- a/src/views/BusinessServices/size1440/index.vue
+++ b/src/views/BusinessServices/size1440/index.vue
@ -266,11 +266,11 @@ const solutions = computed(() => [
 .card-title::before {
  content: "";
  position: absolute;
-  top: 10px;
+  top: 10PX;
  bottom: 0;
-  left: -10px;
-  width: 1px;
-  height: 15px;
+  left: -10PX;
+  width: 1PX;
+  height: 15PX;
  background-color: #ff7bac;
  border-radius: 2px;
  
--- a/src/views/BusinessServices/size1920/index.vue
+++ b/src/views/BusinessServices/size1920/index.vue
@ -268,9 +268,9 @@ const solutions = computed(() => [
  position: absolute;
  top: 10px;
  bottom: 0;
-  left: -10px;
-  width: 1px;
-  height: 15px;
+  left: -10PX;
+  width: 1PX;
+  height: 15PX;
  background-color: #ff7bac;
  border-radius: 2px;
  
--- a/src/views/BusinessServices/size375/index.vue
+++ b/src/views/BusinessServices/size375/index.vue
@ -1,49 +1,72 @@
 <template>
-  <div class="home-page">
-    <div class="business-page">
-      <!-- 渐变背景标题区 -->
+  <div class="home-page relative bg-[#ffffff]">
+    <div class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 332px; pointer-events: none; mix-blend-mode: multiply">
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[711PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img src="@/assets/image/content/bg_20.png" alt="" class="w-[100vw] h-[711PX] absolute" />
+        <img src="@/assets/image/content/bg_13.png" alt=""
+          class="w-[100vw] h-[80PX] absolute bottom-0 lef-0 right-0 z-99" />
+      </div>
+    </div>
+    <div class="business-page relative z-99">
+      <!-- 渐变背景标题区 - 增加层次感 -->
      <section class="hero-section">
        <div class="container">
-          <h1 style="font-size: 40px" class="hero-title">
+          <h2 class="hero-title">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
-          </h1>
-          <div style="font-size: 18px" class="hero-description">
+          </h2>
+          <div style="font-size: 16px" class="hero-description">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
          </div>
        </div>
      </section>
      <!-- 业务核心解决方案 -->
-      <main style="margin-top: 40px" class="container">
+      <main style="margin-top: 250px" class="container">
        <section>
-          <h1 style="font-size: 40px" class="hero-title">
+          <h1 style="font-size: 20px" class="hero-title hero-title1">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
          </h1>
        </section>

-        <!-- 解决方案网格 - 响应式弹性布局 -->
-        <div class="solution-grid">
+        <section>
+
+        </section>
+
+        <div class="solution-grid grid grid-cols-1 gap-4">
          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
-          <div
-            v-for="(solution, sIndex) in solutions"
-            :key="sIndex"
-            class="featured-solution"
-          >
-            <div
-              class="solution-card"
-              :style="{ '--delay': `${sIndex * 0.2}s` }"
-            >
+          <div v-for="(solution, sIndex) in solutions" :key="sIndex" class="featured-solution">
+            <template v-if="sIndex === 0">
+              <img src="@/assets/image/content/profile_1.png" alt="" class="w-[201PX] h-[201PX]" />
+              <br />
+              <img src="@/assets/image/content/first.png" alt="">
+            </template>
+            <template v-else-if="sIndex === 1">
+              <img src="@/assets/image/content/profile_2.png" alt="" class="w-[201PX] h-[201PX]" />
+              <br />
+              <img src="@/assets/image/content/second.png" alt="">
+            </template>
+            <template v-else-if="sIndex === 2">
+              <img src="@/assets/image/content/profile_3.png" alt="" class="w-[201PX] h-[201PX]" />
+              <br />
+              <img src="@/assets/image/content/third.png" alt="">
+            </template>
+            <template v-else>
+              <img src="@/assets/image/content/profile_4.png" alt="" class="w-[201PX] h-[201PX]" />
+              <br />
+              <img src="@/assets/image/content/fourth.png" alt="">
+            </template>
+            <div class="solution-card" :style="{ '--delay': `${sIndex * 0.2}s` }">
              <div class="card-header">
-                <div class="decorative-line"></div>
+                <!-- <div class="decorative-line"></div> -->
                <h2 class="card-title">{{ solution.title }}</h2>
              </div>
              <ul class="card-content">
-                <li
-                  v-for="(point, pIndex) in solution.points"
-                  :key="pIndex"
-                  class="content-point"
-                >
+                <li v-for="(point, pIndex) in solution.points" :key="pIndex" class="content-point">
                  <div class="point-icon">•</div>
-                  <div style="font-size: 18px" class="point-text">
+                  <div style="font-size: 16px" class="point-text">
                    {{ point }}
                  </div>
                </li>
@ -97,32 +120,32 @@ const solutions = computed(() => [
 </script>

 <style scoped>
-.container {
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-/* 标题区 - 紫色渐变 */
-.hero-section {
-  background: var(--primary-gradient);
-  padding: 5rem 0 0rem;
-  position: relative;
-  overflow: hidden;
-  color: white;
-}
+/* 基础样式 */

 .hero-title {
  font-size: 40px;
  color: black;
  margin-bottom: 2rem;
  animation: slideIn 1s ease;
+  position: relative;
+}
+.hero-title1::before {
+  content: "";
+  position: absolute;
+  top: -10PX;
+  bottom: 0;
+  left: 0;
+  width: 60PX;
+  height: 6PX;
+  background-color: #ff7bac;
+  border-radius: 2px;
 }

 .hero-description {
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
-  color: black;
+  color: #455363;
 }

 :root {
@ -135,63 +158,96 @@ const solutions = computed(() => [
    var(--primary-color) 100%
  );
 }
-
 .home-page {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }

-/* 解决方案网格 - 响应式布局 */
-.solution-grid {
-  padding: 0rem 0 4rem;
-  display: grid;
-  grid-template-columns: 1fr; /* 默认单列（移动端） */
-  gap: 3rem;
+.container {
+  max-width: 311PX;
+  margin: 0 auto;
+  /* padding: 0 2rem; */
 }

-/* 中等屏幕（768px-1439px） - 单列布局 */
-@media (min-width: 768px) and (max-width: 1439px) {
-  .solution-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* 大屏幕（≥1440px） - 双列布局 */
-@media (min-width: 1440px) {
-  .solution-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-/* 卡片样式 */
-.solution-card {
-  background: #fff8fb;
-  border-radius: 16px;
-  padding: 2.5rem;
-  box-shadow: 0 10px 40px rgba(255, 123, 172, 0.1);
-  transform: translateY(20px);
-  opacity: 0;
-  animation: cardEnter 0.6s ease forwards;
+/* 标题区 - 紫色渐变 */
+.hero-section {
+  background: var(--primary-gradient);
+  /* padding: 5rem 0 0rem; */
+  padding-top: 180PX;
  position: relative;
  overflow: hidden;
-  border: 1px solid #fdc8dd;
-  transition: all 0.3s ease;
+  color: white;
 }

-.solution-card::before {
-  content: "";
+.title-decoration {
  position: absolute;
-  top: 0;
+  bottom: -15px;
  left: 0;
-  width: 100%;
+  width: 80%;
  height: 4px;
-  background: var(--primary-gradient);
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 2px;
 }

-.solution-card:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 15px 50px rgba(255, 123, 172, 0.2);
+.solution-group {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  margin-bottom: 4rem;
+}
+
+/* 桌面端布局（>=768px） */
+@media (min-width: 768px) {
+  .solution-group {
+    flex-direction: row;
+    gap: 4rem;
+  }
+
+  .featured-solution {
+    flex: 1;
+    margin-top: 20px;
+  }
+}
+
+/* 移动端布局（<768px） */
+@media (max-width: 767px) {
+  .home-page {
+  }
+
+  .hero-title {
+    font-size: 1.8rem;
+  }
+
+  .solution-group {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .featured-solution {
+    width: 100% !important; /* 强制占满容器 */
+    margin-bottom: 2rem;
+  }
+
+  .solution-card {
+    /* padding: 2rem; */
+    height: auto;
+  }
+
+  .content-point {
+    padding: 5px 0;
+  }
+}
+
+/* 卡片公共样式 */
+.solution-card {
+  border-radius: 16px;
+  /* padding: 2.5rem; */
+  /* transform: translateY(20px); */
+  /* opacity: 0; */
+  /* animation: cardEnter 0.6s ease forwards; */
+  /* border: 1px solid #fdc8dd; */
+  /* background: #fff8fb; */
 }

 .card-header {
@ -204,7 +260,6 @@ const solutions = computed(() => [
  background: var(--primary-gradient);
  margin-bottom: 1rem;
  border-radius: 3px;
-  transition: width 0.3s ease;
 }

 .solution-card:hover .decorative-line {
@ -213,31 +268,46 @@ const solutions = computed(() => [

 .card-title {
  font-size: 1.3rem;
-  color: #e53073;
+  /* color: #e53073; */
  font-weight: 600;
+  position: relative;
+  /* transform: translateX(15px); */
 }

+.card-title::before {
+  content: "";
+  position: absolute;
+  top: 10PX;
+  bottom: 0;
+  left: -10PX;
+  width: 1PX;
+  height: 15PX;
+  background-color: #ff7bac;
+  border-radius: 2px;
+  
+}
+
+
 .content-point {
  display: flex;
-  gap: 1rem;
-  padding: 1rem 0;
-  border-bottom: 1px solid #fdc8dc;
-}
-
-.content-point:last-child {
-  border-bottom: none;
+  justify-content: flex-start;
+  /* gap: 1rem; */
+  /* padding: 1rem 0; */
+  /* border-bottom: 1px solid #fdc8dc; */
 }

 .point-icon {
-  color: #e53073;
+  color: #455363;
  font-size: 1.2rem;
  flex-shrink: 0;
+  margin-right: 5PX;
 }

 .point-text {
-  color: #e53073;
+  /* color: #e53073; */
  line-height: 1.6;
-  font-size: 1rem;
+  font-size: 18px;
+  color: #455363;
 }

@keyframes cardEnter {
--- a/src/views/BusinessServices/size768/index.vue
+++ b/src/views/BusinessServices/size768/index.vue
@ -230,7 +230,7 @@ const solutions = computed(() => [
  }

  .solution-card {
-    padding: 2rem;
+    /* padding: 2rem; */
    height: auto;
  }

--- a/src/views/CommitteeAppointment/size1920/index.vue
+++ b/src/views/CommitteeAppointment/size1920/index.vue
@ -4,6 +4,9 @@
    <div class="title mb-[50px] text-center">
      <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
    </div>
+    <div class="w-[900PX] mx-auto">
+      <n-data-table :columns="columns" :data="data" virtual-scroll-y />
+    </div>

    <!-- 委员会表格 -->
    <div class="container">
@ -110,7 +113,57 @@
  </div>
 </template>

-<script setup>
+<script setup lang="jsx">
+import { NDataTable } from "naive-ui";
+
+
+const columns = [
+  {
+    title: "",
+    key: "name",
+    minWidth: 200,
+    fixed: "left",
+  },
+  {
+    // title: "Audit Committee",
+    key: "age",
+    minWidth: 200,
+    title(){
+      return  <h3>Audit Committee</h3>;
+    }
+  },
+  {
+    title(){
+      return  <h3>Compensation Committee</h3>;
+    },
+    key: "age",
+    minWidth: 200,
+  },
+  {
+    title(){
+      return  <h3>Nominating and Corporate Governance Committee</h3>;
+    },
+    key: "age",
+    minWidth: 200,
+  },
+];
+
+let scrollX = 0;
+
+const data = [
+  {
+    name: "Cao Yu",
+    age: 32,
+    address: "London, Park Lane no. 1",
+  },
+  {
+    name: "Cao Yu",
+    age: 32,
+    address: "London, Park Lane no. 1",
+  },
+];
+
+const heightForRow = () => 48;
 const otherDirectors = [
  // {
  //   name: "Cao Yu",
@ -148,7 +201,16 @@ const getCommitteeRole = (name, committee) => {
 };
 </script>

+<style>
+th {
+  /* background: pink !important; */
+}
+</style>
 <style scoped>
+:deep(.n-data-table-th) {
+  background: #FFF0F5 !important;
+}
+
 /* 紫色主题变量 */
 .role-badge.chair {
  color: #00baff;
--- a/src/views/CommitteeAppointment/size375/index.vue
+++ b/src/views/CommitteeAppointment/size375/index.vue
@ -1,332 +1,45 @@
 <template>
-  <div class="board-members-page">
-    <!-- 页面头部 -->
-    <div class="title mb-[50px] text-center">
-      <h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
-    </div>
-    <!-- 移动端视图 -->
-    <div class="container">
-      <div
-        class="director-card"
-        v-for="(director, index) in otherDirectors"
-        :key="director.name"
-        :style="{ '--delay': index * 0.1 + 's' }"
-      >
-        <div class="card-header">
-          <div class="director-info">
-            <div class="avatar">
-              <span class="initials">{{ getInitials(director.name) }}</span>
-            </div>
-            <div>
-              <router-link
-                :to="`/boarddirectors/${director.name}`"
-                class="director-name"
-              >
-                {{ director.name }}
-              </router-link>
-              <!-- <p class="director-title">{{ director.title }}</p> -->
-            </div>
-          </div>
-        </div>
-
-        <div class="committee-groups">
-          <!-- 委员会职位 -->
-          <div
-            class="committee-group"
-            v-if="getCommittees(director.name).length > 0"
-          >
-            <div class="role-badges">
-              <template
-                v-for="(committee, idx) in getCommittees(director.name)"
-                :key="idx"
-              >
-                <div class="committee-position">
-                  <div
-                    class="role-badge"
-                    :class="
-                      getCommitteeRole(director.name, committee).toLowerCase()
-                    "
-                  >
-                    <span>{{ getCommitteeShortName(committee) }}</span>
-                  </div>
-                  <div style="font-size: 16px" class="role-title">
-                    {{ getCommitteeRole(director.name, committee) }}
-                  </div>
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :max-height="250"
+    virtual-scroll
+    virtual-scroll-x
+    :scroll-x="scrollX"
+    :min-row-height="48"
+    :height-for-row="heightForRow"
+    virtual-scroll-header
+    :header-height="48"
+  />
 </template>

 <script setup>
-import { ref, computed } from "vue";
+import { NDataTable } from "naive-ui";

-// 董事会成员数据
-const otherDirectors = [
-  // {
-  //   name: "Cao Yu",
-  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
-  // },
-  // { name: "David Lazar", title: "Director" },
-  { name: "Hu Bin", title: "Director" },
-  { name: "David Natan", title: "Director" },
-  { name: "Chan Oi Fat", title: "Director" },
-];

-// 委员会角色数据 - 现在包含职位类型 (Chair/Member)
-const committeeRoles = {
-  "Cao Yu": {},
-  "David Lazar": {},
-  "Hu Bin": {
-    Audit: "Member",
-    Compensation: "Member",
-    Governance: "Member",
-  },
-  "David Natan": {
-    Audit: "Chair",
-    Compensation: "Member",
-    Governance: "Member",
-  },
-  "Chan Oi Fat": {
-    Audit: "Member",
-    Compensation: "Chair",
-    Governance: "Chair",
-  },
-};
+const columns = [];

-// 委员会完整名称
-const committeeFullNames = {
-  Audit: "Audit Committee",
-  Compensation: "Compensation Committee",
-  Governance: "Nominating and Corporate Governance Committee",
-};
+let scrollX = 0;

-// 获取委员会列表
-const getCommittees = (name) => {
-  return Object.keys(committeeRoles[name] || {});
-};
-
-// 获取委员会角色 (Chair/Member)
-const getCommitteeRole = (name, committee) => {
-  return committeeRoles[name]?.[committee] || "";
-};
-
-// 获取委员会简称
-const getCommitteeShortName = (committee) => {
-  const names = {
-    Audit: "Audit",
-    Compensation: "Comp.",
-    Governance: "Governance",
-  };
-  return names[committee] || committee;
-};
-
-// 获取姓名首字母
-const getInitials = (name) => {
-  return name
-    .split(" ")
-    .map((word) => word[0])
-    .join("")
-    .toUpperCase();
-};
-</script>
-
-<style scoped>
-/* 添加这些样式来显示职位类型 */
-.committee-position {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 8px;
+for (let i = 0; i < 1e3; ++i) {
+  scrollX += 100;
+  columns.push({
+    title: `Col ${i}`,
+    width: 100,
+    key: i,
+    fixed: i <= 1 ? "" : i > 997 ? "" : void 0,
+    render(_, rowIndex) {
+      return `${i}-${rowIndex}`;
+    }
+  });
 }

-.role-title {
-  font-size: 12px;
-  color: #666;
-  margin-top: 4px;
-  text-transform: capitalize;
-}
+const data = Array.from({ length: 1e3 }).map((_, index) => ({
+  key: index,
+  name: `Edward King ${index}`,
+  age: 32,
+  address: `London, Park Lane no. ${index}`
+}));

-/* 保持原有的角色徽章样式 */
-.role-badge {
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-}
-
-.role-badge.member {
-  background-color: #f0f0f0;
-  color: #555;
-}
-.title h1 {
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    bottom: -14px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 3px;
-    background: #ff7bac;
-    border-radius: 3px;
-    transition: width 0.3s ease;
-  }
-
-  &:hover::after {
-    width: 120px;
-  }
-}
-/* 基础变量 */
-:root {
-  --primary: #895bff;
-  --primary-light: #a07cff;
-  --primary-dark: #6a11cb;
-  --text-primary: #333;
-  --text-secondary: #666;
-  --bg-light: #f9f6ff;
-  --border-radius: 12px;
-}
-
-/* 页面样式 */
-.board-members-page {
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  min-height: 100vh;
-}
-
-.container {
-  padding: 0 16px;
-  margin: 0 auto;
-}
-
-/* 头部样式 */
-.hero-section {
-  background: linear-gradient(
-    135deg,
-    var(--primary-light) 0%,
-    var(--primary) 100%
-  );
-  padding: 3rem 1rem;
-  text-align: center;
-  color: #895bff;
-  margin-bottom: 2rem;
-}
-
-.page-title {
-  font-size: clamp(1.75rem, 5vw, 2.25rem);
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-}
-
-.page-subtitle {
-  font-size: clamp(1rem, 3vw, 1.25rem);
-  opacity: 0.9;
-}
-
-/* 董事卡片 */
-.director-card {
-  background: white;
-  border-radius: var(--border-radius);
-  margin-bottom: 1.5rem;
-  box-shadow: 0 5px 20px rgba(255, 123, 172, 0.08);
-  overflow: hidden;
-  transform: translateY(20px);
-  opacity: 0;
-  animation: fadeIn 0.5s ease forwards;
-  animation-delay: var(--delay);
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.card-header {
-  color: #ff7bac;
-  padding: 1.25rem;
-  background: var(--bg-light);
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.director-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.avatar {
-  width: 56px;
-  height: 56px;
-  background: var(--primary-transparent);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.initials {
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: var(--primary);
-}
-
-.director-name {
-  color: var(--text-primary);
-  text-decoration: none;
-  font-size: 1.2rem;
-  font-weight: 500;
-  display: block;
-  margin-bottom: 0.25rem;
-}
-
-.director-title {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  line-height: 1.3;
-}
-
-/* 委员会职位 */
-.committee-groups {
-  padding: 1.25rem;
-}
-
-.role-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.role-badge {
-  padding: 0.35rem 0.75rem;
-  border-radius: 16px;
-  font-size: 0.8rem;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  background: rgba(255, 123, 172, 0.08);
-  color: var(--primary);
-}
-
-.role-badge.chair {
-  background-color: #fcecf2;
-  color: #ff7bac;
-}
-
-.committee-name {
-  font-size: 0.75rem;
-  opacity: 0.8;
-}
-</style>
+const heightForRow = () => 48;
+</script>
--- a/src/views/boarddirectors/index.vue
+++ b/src/views/boarddirectors/index.vue
@ -1,14 +1,29 @@
 <script setup>
 import size1920 from "@/views/boarddirectors/size1920/index.vue";
 import size375 from "@/views/boarddirectors/size375/index.vue";
+import size768 from "@/views/boarddirectors/size768/index.vue";
+import size1440 from "@/views/boarddirectors/size1440/index.vue";
+
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";

 const { width } = useWindowSize();
+// const viewComponent = computed(() => {
+//   const viewWidth = width.value;
+//   if (viewWidth <= 450) {
+//     return size375;
+//   } else if (viewWidth <= 1920 || viewWidth > 1920) {
+//     return size1920;
+//   }
+// });
 const viewComponent = computed(() => {
  const viewWidth = width.value;
  if (viewWidth <= 450) {
    return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
  } else if (viewWidth <= 1920 || viewWidth > 1920) {
    return size1920;
  }
@ -19,4 +34,8 @@ const viewComponent = computed(() => {
  <component :is="viewComponent" />
 </template>

-<style scoped lang="scss"></style>
+<style>
+.n-layout-header{
+  z-index: 999;
+}
+</style>
--- a/src/views/boarddirectors/size1440/index.vue
+++ b/src/views/boarddirectors/size1440/index.vue
@ -1,8 +1,21 @@
 <template>
-  <div class="home-page">
-    <div class="directors-page">
+  <div class="fixed top-0 bottom-0 z-[10] bg-[#ffffff]">
+    <img
+      src="@/assets/image/content/bg_25.png"
+      class="w-[100vw] h-[611PX] relative"
+      alt=""
+    />
+  </div>
+
+  <div class="home-page relative overflow-hidden z-[11] bg-[]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[-12]"
+      style="width: 920px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="directors-page relative z-[-15]" style="width: 900px">
      <h1 class="page-title">Board of Directors</h1>
-      <n-divider />

      <div class="directors-list">
        <div
@ -10,13 +23,8 @@
          :key="index"
          class="director-item"
        >
-          <n-h2 style="font-size: 18px" class="director-name">{{
-            director.name
-          }}</n-h2>
-          <n-text style="font-size: 16px" class="director-title">{{
-            director.title
-          }}</n-text>
-          <n-divider class="divider" />
+          <n-h2 class="director-name">{{ director.name }}</n-h2>
+          <n-text class="director-title">{{ director.title }}</n-text>
          <n-p class="director-bio">{{ director.contain }}</n-p>
        </div>
      </div>
@ -67,15 +75,25 @@ const otherDirectors = [
  background-repeat: no-repeat;
 }
 .directors-page {
-  max-width: 900px;
+  /* max-width: 900px; */
  margin: 0 auto;
-  padding: 60px 24px;
+  /* padding: 60px 24px; */
 }

 .page-title {
  font-size: 2.5rem; /* 18px */
  margin-bottom: 30px;
  color: #333;
+  position: relative;
+}
+.page-title::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 60px;
+  height: 4PX;
+  background: #ff7bac;
+  transform: translateY(-15px);
 }

 .directors-list {
@ -86,8 +104,8 @@ const otherDirectors = [
 }

 .director-item {
-  padding-bottom: 48px;
-  border-bottom: 1px solid #f0f0f0;
+  /* padding-bottom: 48px; */
+  /* border-bottom: 1px solid #f0f0f0; */
 }

 .director-item:last-child {
@ -97,14 +115,27 @@ const otherDirectors = [

 .director-name {
  margin-bottom: 8px;
-  font-size: 28px;
+  font-size: 28PX;
  font-weight: 500;
  color: #1a1a1a;
+  position: relative;
+}
+.director-name::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 20PX;
+  background: #ff7bac;
+  left: -10PX;
+  top: 50%;
+  transform: translateY(-50%);
 }

+
+
 .director-title {
-  font-size: 18px;
-  color: #666;
+  font-size: 18PX;
+  color: #ff7bac;
  display: block;
  margin-bottom: 24px;
 }
@ -117,20 +148,20 @@ const otherDirectors = [
 .director-bio {
  line-height: 1.8;
  color: #4a4a4a;
-  font-size: 16px;
+  font-size: 16PX;
 }

@media (min-width: 768px) {
  .directors-page {
-    padding: 80px 40px;
+    /* padding: 80px 40px; */
  }

  .director-name {
-    font-size: 32px;
+    /* font-size: 32px; */
  }

  .director-title {
-    font-size: 20px;
+    /* font-size: 20px; */
  }
 }
 </style>
--- a/src/views/boarddirectors/size1920/index.vue
+++ b/src/views/boarddirectors/size1920/index.vue
@ -1,8 +1,21 @@
 <template>
-  <div class="home-page">
-    <div class="directors-page">
+  <div class="fixed top-0 bottom-0 z-[10] bg-[#ffffff]">
+    <img
+      src="@/assets/image/content/bg_25.png"
+      class="w-[100vw] h-[611PX] relative"
+      alt=""
+    />
+  </div>
+
+  <div class="home-page relative overflow-hidden z-[11] bg-[]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[-12]"
+      style="width: 920px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="directors-page relative z-[-15]" style="width: 900px">
      <h1 class="page-title">Board of Directors</h1>
-      <n-divider />

      <div class="directors-list">
        <div
@ -12,7 +25,6 @@
        >
          <n-h2 class="director-name">{{ director.name }}</n-h2>
          <n-text class="director-title">{{ director.title }}</n-text>
-          <n-divider class="divider" />
          <n-p class="director-bio">{{ director.contain }}</n-p>
        </div>
      </div>
@ -63,15 +75,25 @@ const otherDirectors = [
  background-repeat: no-repeat;
 }
 .directors-page {
-  max-width: 900px;
+  /* max-width: 900px; */
  margin: 0 auto;
-  padding: 60px 24px;
+  /* padding: 60px 24px; */
 }

 .page-title {
  font-size: 2.5rem; /* 18px */
  margin-bottom: 30px;
  color: #333;
+  position: relative;
+}
+.page-title::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 60px;
+  height: 4PX;
+  background: #ff7bac;
+  transform: translateY(-15px);
 }

 .directors-list {
@ -82,8 +104,8 @@ const otherDirectors = [
 }

 .director-item {
-  padding-bottom: 48px;
-  border-bottom: 1px solid #f0f0f0;
+  /* padding-bottom: 48px; */
+  /* border-bottom: 1px solid #f0f0f0; */
 }

 .director-item:last-child {
@ -93,14 +115,27 @@ const otherDirectors = [

 .director-name {
  margin-bottom: 8px;
-  font-size: 28px;
+  font-size: 28PX;
  font-weight: 500;
  color: #1a1a1a;
+  position: relative;
+}
+.director-name::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 20PX;
+  background: #ff7bac;
+  left: -10PX;
+  top: 50%;
+  transform: translateY(-50%);
 }

+
+
 .director-title {
-  font-size: 18px;
-  color: #666;
+  font-size: 18PX;
+  color: #ff7bac;
  display: block;
  margin-bottom: 24px;
 }
@ -113,20 +148,20 @@ const otherDirectors = [
 .director-bio {
  line-height: 1.8;
  color: #4a4a4a;
-  font-size: 16px;
+  font-size: 16PX;
 }

@media (min-width: 768px) {
  .directors-page {
-    padding: 80px 40px;
+    /* padding: 80px 40px; */
  }

  .director-name {
-    font-size: 32px;
+    /* font-size: 32px; */
  }

  .director-title {
-    font-size: 20px;
+    /* font-size: 20px; */
  }
 }
 </style>
--- a/src/views/boarddirectors/size375/index.vue
+++ b/src/views/boarddirectors/size375/index.vue
@ -1,8 +1,21 @@
 <template>
-  <div class="home-page">
-    <div class="directors-page">
-      <n-h1 class="page-title">Board of Directors</n-h1>
-      <n-divider />
+  <div class="fixed top-0 bottom-0 z-[10] bg-[#ffffff]">
+    <img
+      src="@/assets/image/content/bg_26.png"
+      class="w-[100vw] h-[340PX] relative"
+      alt=""
+    />
+  </div>
+
+  <div class="home-page relative overflow-hidden z-[11] bg-[]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[-12]"
+      style="width: 331px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="directors-page relative z-[-15]" style="width: 311px">
+      <h1 class="page-title">Board of Directors</h1>

      <div class="directors-list">
        <div
@ -12,7 +25,6 @@
        >
          <n-h2 class="director-name">{{ director.name }}</n-h2>
          <n-text class="director-title">{{ director.title }}</n-text>
-          <n-divider class="divider" />
          <n-p class="director-bio">{{ director.contain }}</n-p>
        </div>
      </div>
@ -57,43 +69,43 @@ const otherDirectors = [
 </script>

 <style scoped>
-:root {
-  --primary-color: #333;
-  --secondary-color: #666;
-  --divider-color: #f0f0f0;
-  --mobile-padding: 16px;
-  --tablet-padding: 24px;
-}
-
 .home-page {
-  background-size: cover;
+  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
-
 .directors-page {
-  max-width: 1200px;
+  /* max-width: 900px; */
  margin: 0 auto;
-  padding: clamp(2rem, 5vw, 4rem)
-    clamp(var(--mobile-padding), 4vw, var(--tablet-padding));
+  /* padding: 60px 24px; */
 }

 .page-title {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  margin-bottom: clamp(1.5rem, 3vw, 2rem);
-  color: var(--primary-color);
+  font-size: 24PX; /* 18px */
+  margin-bottom: 30px;
+  color: #333;
+  position: relative;
+}
+.page-title::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 60PX;
+  height: 4PX;
+  background: #ff7bac;
+  transform: translateY(-15px);
 }

 .directors-list {
  display: flex;
  flex-direction: column;
-  gap: clamp(2rem, 4vw, 3rem);
-  margin-top: clamp(1.5rem, 3vw, 2.5rem);
+  gap: 48px;
+  margin-top: 40px;
 }

 .director-item {
-  padding-bottom: clamp(2rem, 4vw, 3rem);
-  border-bottom: 1px solid var(--divider-color);
+  /* padding-bottom: 48px; */
+  /* border-bottom: 1px solid #f0f0f0; */
 }

 .director-item:last-child {
@ -102,43 +114,54 @@ const otherDirectors = [
 }

 .director-name {
-  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
-  font-size: clamp(1.25rem, 3vw, 1.75rem);
+  margin-bottom: 8px;
+  font-size: 20PX;
  font-weight: 500;
-  color: var(--primary-color);
+  color: #1a1a1a;
+  position: relative;
+}
+.director-name::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 20PX;
+  background: #ff7bac;
+  left: -10PX;
+  top: 50%;
+  transform: translateY(-50%);
 }

+
+
 .director-title {
-  font-size: clamp(1rem, 2vw, 1.25rem);
-  color: var(--secondary-color);
+  font-size: 14PX;
+  color: #ff7bac;
  display: block;
-  margin-bottom: clamp(1rem, 2vw, 1.5rem);
-  line-height: 1.5;
+  margin-bottom: 24px;
 }

 .divider {
-  margin: clamp(1rem, 2vw, 1.5rem) 0;
-  background-color: var(--divider-color);
+  margin: 16px 0;
+  background-color: #f0f0f0;
 }

 .director-bio {
  line-height: 1.8;
  color: #4a4a4a;
-  font-size: clamp(0.9rem, 1.8vw, 1rem);
+  font-size: 14PX;
 }

-/* 针对超小屏幕的优化 */
-@media (max-width: 375px) {
+@media (min-width: 768px) {
  .directors-page {
-    padding: clamp(1.5rem, 5vw, 2rem) clamp(12px, 4vw, 16px);
+    /* padding: 80px 40px; */
  }

  .director-name {
-    font-size: 1.25rem;
+    /* font-size: 32px; */
  }

  .director-title {
-    font-size: 1rem;
+    /* font-size: 20px; */
  }
 }
 </style>
--- a/src/views/boarddirectors/size768/index.vue
+++ b/src/views/boarddirectors/size768/index.vue
@ -1,8 +1,21 @@
 <template>
-  <div class="home-page">
-    <div class="directors-page">
+  <div class="fixed top-0 bottom-0 z-[10] bg-[#ffffff]">
+    <img
+      src="@/assets/image/content/bg_25.png"
+      class="w-[100vw] h-[611PX] relative"
+      alt=""
+    />
+  </div>
+
+  <div class="home-page relative overflow-hidden z-[11] bg-[]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[-12]"
+      style="width: 620px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="directors-page relative z-[-15]" style="width: 600px">
      <h1 class="page-title">Board of Directors</h1>
-      <n-divider />

      <div class="directors-list">
        <div
@ -10,13 +23,8 @@
          :key="index"
          class="director-item"
        >
-          <n-h2 style="font-size: 18px" class="director-name">{{
-            director.name
-          }}</n-h2>
-          <n-text style="font-size: 16px" class="director-title">{{
-            director.title
-          }}</n-text>
-          <n-divider class="divider" />
+          <n-h2 class="director-name">{{ director.name }}</n-h2>
+          <n-text class="director-title">{{ director.title }}</n-text>
          <n-p class="director-bio">{{ director.contain }}</n-p>
        </div>
      </div>
@ -67,15 +75,25 @@ const otherDirectors = [
  background-repeat: no-repeat;
 }
 .directors-page {
-  max-width: 900px;
+  /* max-width: 900px; */
  margin: 0 auto;
-  padding: 60px 24px;
+  /* padding: 60px 24px; */
 }

 .page-title {
  font-size: 2.5rem; /* 18px */
  margin-bottom: 30px;
  color: #333;
+  position: relative;
+}
+.page-title::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 60PX;
+  height: 4PX;
+  background: #ff7bac;
+  transform: translateY(-15px);
 }

 .directors-list {
@ -86,8 +104,8 @@ const otherDirectors = [
 }

 .director-item {
-  padding-bottom: 48px;
-  border-bottom: 1px solid #f0f0f0;
+  /* padding-bottom: 48px; */
+  /* border-bottom: 1px solid #f0f0f0; */
 }

 .director-item:last-child {
@ -97,14 +115,27 @@ const otherDirectors = [

 .director-name {
  margin-bottom: 8px;
-  font-size: 28px;
+  font-size: 28PX;
  font-weight: 500;
  color: #1a1a1a;
+  position: relative;
+}
+.director-name::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 20PX;
+  background: #ff7bac;
+  left: -10PX;
+  top: 50%;
+  transform: translateY(-50%);
 }

+
+
 .director-title {
-  font-size: 18px;
-  color: #666;
+  font-size: 18PX;
+  color: #ff7bac;
  display: block;
  margin-bottom: 24px;
 }
@ -117,20 +148,20 @@ const otherDirectors = [
 .director-bio {
  line-height: 1.8;
  color: #4a4a4a;
-  font-size: 16px;
+  font-size: 16PX;
 }

@media (min-width: 768px) {
  .directors-page {
-    padding: 80px 40px;
+    /* padding: 80px 40px; */
  }

  .director-name {
-    font-size: 32px;
+    /* font-size: 32px; */
  }

  .director-title {
-    font-size: 20px;
+    /* font-size: 20px; */
  }
 }
 </style>
--- a/src/views/companyoverview/size375/index.vue
+++ b/src/views/companyoverview/size375/index.vue
@ -1,16 +1,37 @@
 <template>
-  <div class="home-page">
+  <div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 343px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[950PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_17.png"
+          alt=""
+          class="w-[100vw] absolute h-[720PX] top-[-90px]"
+        />
+        <img
+          src="@/assets/image/content/bg_19.png"
+          alt=""
+          class="w-[100vw] h-[270PX] absolute bottom-0 lef-0 right-0 z-1"
+        />
+      </div>
+    </div>
+    
    <div class="company-overview">
      <!-- 公司概况 -->
-      <section
+      <section 
        class="company-overview"
-        style="max-width: 1200px; margin: 60px auto"
+        style="max-width: 311px; margin: 200px auto;margin-bottom: 180px;"
      >
-        <h1 class="section-title">
+        <h1 class="text-[20PX]">
          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
        </h1>
        <div class="content-block">
-          <div style="font-size: 18px">
+          <div style="font-size: 14px; color: #455363">
            {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
          </div>
          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
@ -20,14 +41,17 @@

      <!-- 使命愿景卡片 -->
      <section class="mission-section">
+        <!-- <h1 class="section-title">
+          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
+        </h1> -->
        <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
-            <h1 class="section-title">
-              {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
-            </h1>
-            <br />
-
-            <n-p style="font-size: 18px" class="card-content">{{
+            <div>
+              <h1 class="mt-0">
+                {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
+              </h1>
+            </div>
+            <n-p style="font-size: 16px; color: #455363" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
            }}</n-p>
          </n-card>
@ -36,17 +60,20 @@

      <!-- 里程碑时间轴 -->
      <!-- 里程碑时间轴 -->
-      <section class="section timeline-section">
-        <n-h2 class="section-title">{{
-          $t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
-        }}</n-h2>
+      <section class="section timeline-section mt-[70PX]">
+        <h1 class="section-title ml-[10PX]">
+          {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
+        </h1>
        <div class="timeline">
          <!-- 1977-2015 -->
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[0] }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[1]
              }}</n-h3>
              <br />
              <n-p style="font-size: 18px" class="timeline-desc">{{
@ -64,8 +91,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[1]
              }}</n-h3>
              <br />

@ -84,8 +116,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[1]
              }}</n-h3>
              <br />

@ -104,8 +141,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[1]
              }}</n-h3>
              <br />

@ -124,8 +166,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[1]
              }}</n-h3>
              <br />

@ -156,21 +203,71 @@
          </div>
        </div>
      </section>
+    </div>
+    <!-- 成就部分 -->

-      <!-- 成就部分 -->
-      <section class="mission-section">
-        <h1 class="section-title">
+    <section
+      class="mission-section overflow-hidden relative z-99"
+      style="
+        width: 100vw;
+        /* padding: 0 40px; */
+        /* margin-top: 40px; */
+        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
+      "
+    >
+      <div
+        style="height: 200px; width: 311px"
+        class="m-[auto] my-[64px] flex flex-col items-center text-center"
+      >
+        <h1 class="text-[22PX]">
          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
        </h1>
-        <div class="mission-cards">
+        <!-- <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
            <n-p style="font-size: 18px" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
            }}</n-p>
          </n-card>
+        </div> -->
+        <div class="w-100% flex items-center justify-between">
+          <!-- <div class="flex items-center">
+            <div
+              class="bg-[#ffffff] rounded-[50%] flex justify-center items-center mr-[8px]"
+            >
+              <img
+                src="@/assets/image/content/left.png"
+                alt=""
+                class="w-[94PX] h-[94PX]"
+              />
+            </div>
+            <img
+              src="@/assets/image/content/arrowhead_left.png"
+              alt=""
+              class="w-[95px]"
+            />
+          </div> -->
+          <p style="font-size: 14px;" class="my-0 text-[#455363]">
+            {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
+          </p>
+          <!-- <div class="flex items-center">
+            <img
+              src="@/assets/image/content/arrowhead_right.png"
+              alt=""
+              class="w-[95px]"
+            />
+            <div
+              class="bg-[#ffffff] rounded-[50%] flex justify-center items-center ml-[8px]"
+            >
+              <img
+                src="@/assets/image/content/right.png"
+                alt=""
+                class="w-[94PX] h-[94PX]"
+              />
+            </div>
+          </div> -->
        </div>
-      </section>
-    </div>
+      </div>
+    </section>
  </div>
 </template>

@ -187,15 +284,19 @@ const stats = ref([
 ]);
 </script>

-<style scoped>
+<style scoped lang="scss">
 .home-page {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
 .company-overview {
+  width: 343PX;
  margin: 0 auto;
-  padding: 0 20px;
+  padding: 0 10px;
+  z-index: 99;
+  position: relative;
+  /* padding: 0 20px; */
 }

 /* 顶部大图区域 */
@ -223,24 +324,26 @@ const stats = ref([

 /* 通用部分样式 */
 .section {
-  margin-bottom: 80px;
+  margin-bottom: 30px;
 }

 .section-title {
-  font-size: 2.5rem;
+  font-size: 1.9rem;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
 }

-.section-title:after {
+.section-title::before {
  content: "";
  position: absolute;
-  bottom: -10px;
+  top: -10px;
+  bottom: 0;
  left: 0;
-  width: 60px;
-  height: 4px;
-  background: linear-gradient(to right, #00ffff, #ff7bac);
+  width: 60PX;
+  height: 4PX;
+  // background: linear-gradient(to right, #00ffff, #ff7bac);
+  background-color: #ff7bac;
  border-radius: 2px;
 }

@ -253,7 +356,8 @@ const stats = ref([

 /* 使命愿景卡片 */
 .mission-section {
-  margin: 80px 0;
+  // margin: 80px 0;
+  // margin-top: 160px;
 }

 .mission-cards {
@ -265,7 +369,7 @@ const stats = ref([
 .mission-card {
  background: white;
  padding: 40px 30px;
-  border-radius: 12px;
+  border-radius: 12PX;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
@ -291,16 +395,18 @@ const stats = ref([
  position: relative;
  padding-left: 50px;
  margin-top: 50px;
+  transform: translateX(-20px);
 }

 .timeline:before {
  content: "";
  position: absolute;
-  top: 0;
-  left: 20px;
+  top: 2%;
+  left: 10px;
  height: 100%;
-  width: 4px;
-  background: linear-gradient(to bottom, #00ffff, #ff7bac);
+  width: 2px;
+  /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+  background: #ff7bac;
 }

 .timeline-item {
@ -308,12 +414,25 @@ const stats = ref([
  margin-bottom: 50px;
 }

+.timeline-item {
+  &:last-child:before {
+    content: "";
+    position: absolute;
+    top: 2%;
+    left: -40px;
+    height: 110%;
+    width: 2px;
+    /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+    background: #E6EAEE;
+  }
+}
+
 .timeline-dot {
  position: absolute;
-  left: -50px;
-  top: 5px;
-  width: 40px;
-  height: 40px;
+  left: -17PX;
+  top: 5PX;
+  width: 15PX;
+  height: 15PX;
  border-radius: 50%;
  background: #ff7bac;
  display: flex;
@ -321,18 +440,21 @@ const stats = ref([
  justify-content: center;
  color: white;
  font-weight: bold;
-  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
+  box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
+
 }

 .timeline-year {
  font-size: 1.4rem;
  margin-bottom: 15px;
-  color: #1a2a6c;
+  color: #000;
+  font-weight: 500;
 }

 .timeline-desc {
-  font-size: 1.05rem;
+  font-size: 16PX !important;
  line-height: 1.7;
+  color: #455363;
  margin-bottom: 10px;
 }

@ -390,30 +512,30 @@ const stats = ref([

 /* 响应式设计 */
@media (max-width: 768px) {
-  .hero-title {
-    font-size: 2.5rem;
-  }
+  // .hero-title {
+  //   font-size: 2.5rem;
+  // }

-  .hero-subtitle {
-    font-size: 1.2rem;
-  }
+  // .hero-subtitle {
+  //   font-size: 1.2rem;
+  // }

-  .section-title {
-    font-size: 1.8rem;
-  }
+  // .section-title {
+  //   font-size: 1.8rem;
+  // }

-  .timeline {
-    padding-left: 30px;
-  }
+  // .timeline {
+  //   padding-left: 30px;
+  // }

-  .timeline-dot {
-    left: -30px;
-    width: 30px;
-    height: 30px;
-  }
+  // .timeline-dot {
+  //   left: -30px;
+  //   // width: 30px;
+  //   // height: 30px;
+  // }

-  .achievement-section {
-    padding: 40px 20px;
-  }
+  // .achievement-section {
+  //   padding: 40px 20px;
+  // }
 }
 </style>
--- a/src/views/companyoverview/size768/index.vue
+++ b/src/views/companyoverview/size768/index.vue
@ -11,7 +11,7 @@
        <img
          src="@/assets/image/content/bg_10.png"
          alt=""
-          class="w-[100vw] absolute top-[-90px]"
+          class="w-[100vw] absolute h-[720PX] top-[-90px]"
        />
        <img
          src="@/assets/image/content/bg_11.png"
--- a/src/views/manage/size1440/index.vue
+++ b/src/views/manage/size1440/index.vue
@ -1,42 +1,72 @@
 <template>
-  <div class="home-page">
-    <div class="">
+  <div class="home-page relative overflow-hidden z-10 bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 920px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[570PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_21.png"
+          alt=""
+          class="w-[100vw] h-[570PX] absolute"
+        />
+        <img
+          src="@/assets/image/content/flower.png"
+          alt=""
+          class="w-[1174PX] h-[446PX] absolute z-10 left-[50%] translate-x-[-50%]"
+        />
+
+        <img
+          src="@/assets/image/content/bg_22.png"
+          alt=""
+          class="w-[100vw] h-[80PX] absolute bottom-0 lef-0 right-0 z-10"
+        />
+      </div>
+    </div>
+    <div class="relative z-10">
      <!-- 标题区 -->
-      <div class="company-overview">
+      <div class="company-overview w-[900PX] pb-[130PX] !mt-[50PX]">
        <div class="hero-section">
-          <transition name="fade-up" appear>
-            <n-h1 class="hero-title"
-              >FiEE, Inc. has a team of capable senior management with extensive
-              professional experience</n-h1
-            >
-          </transition>
+          <!-- <transition name="fade-up" appear> -->
+          <n-h1 class="hero-title text-[40PX] min-h-[168PX]"
+            >FiEE, Inc. has a team of capable senior management with extensive
+            professional experience</n-h1
+          >
+          <!-- </transition> -->
        </div>
      </div>

      <!-- 管理团队列表 -->
-      <main class="container">
+      <main class="container w-[900PX] relative z-11">
        <div class="leadership-grid">
          <!-- 每个高管卡片 -->
          <div
            v-for="(leader, index) in leadershipTeam"
            :key="index"
-            class="leader-card"
+            class="leader-card mt-[20PX]"
            :style="{ '--delay': index * 0.2 + 's' }"
          >
-            <!-- 卡片上半部 -->
-            <div class="card-profile">
-              <div class="avatar-wrapper">
-                <div class="decorative-dot"></div>
-                <div class="initials">{{ getInitials(leader.name) }}</div>
-              </div>
-              <div class="profile-info">
-                <h2 class="leader-name">{{ leader.name }}</h2>
-                <p class="leader-position">{{ leader.position }}</p>
+            <div>
+              <div class="flex items-center">
+                <div
+                  class="w-[58PX] h-[58PX] rounded-[50%] bg-[#FF7BAC] text-[#fff] flex justify-center items-center text-[20PX] font-600"
+                >
+                  {{ getInitials(leader.name) }}
+                </div>
+                <div class="flex flex-col justify-between ml-[12PX]">
+                  <h2 class="my-0">{{ leader.name }}</h2>
+                  <div class="text-[#FF7BAC] text-[16PX]">
+                    {{ leader.position }}
+                  </div>
+                </div>
              </div>
            </div>

            <!-- 卡片下半部 -->
-            <div class="card-content">
+            <div>
              <div
                class="content-section"
                v-for="(content, cIndex) in leader.content"
@ -90,19 +120,19 @@ const getInitials = (name) => {
  background-repeat: no-repeat;
 }
 .company-overview {
-  max-width: 1200px;
+  /* width: 900PX; */
  margin: 0 auto;
-  padding: 0 20px;
+  /* padding: 0 20px; */
  color: var(--text-color);
 }

 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
+  /* background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac); */
  background-size: 400% 400%;
-  animation: gradientBG 15s ease infinite;
-  color: white;
-  padding: 120px 0;
+  /* animation: gradientBG 15s ease infinite; */
+  color: #000;
+  padding: 120PX 0;
  text-align: center;
  border-radius: 8px;
 }
@ -119,7 +149,7 @@ const getInitials = (name) => {
  }
 }
 .hero-title {
-  font-size: 40px;
+  /* font-size: 40px; */
  margin-bottom: 20px;
  font-weight: 700;
 }
@ -130,9 +160,9 @@ const getInitials = (name) => {
 }
 /* 基础样式 */
 .container {
-  max-width: 1200px;
+  /* max-width: 1200px; */
  margin: 0 auto;
-  padding: 0 2rem;
+  /* padding: 0 2rem; */
 }

 /* 标题区 */
@ -155,17 +185,17 @@ const getInitials = (name) => {

 /* 管理团队网格 */
 .leadership-grid {
-  display: grid;
+  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
-  padding: 4rem 0;
+  padding: 4rem 0; */
 }

 /* 高管卡片 */
 .leader-card {
-  background: white;
+  /* background: white; */
  border-radius: 20px;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); */
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
@ -236,11 +266,11 @@ const getInitials = (name) => {

 /* 内容区 */
 .card-content {
-  padding: 2rem;
+  /* padding: 2rem; */
 }

 .content-section {
-  margin-bottom: 1.5rem;
+  /* margin-bottom: 1.5rem; */
 }

 .content-section p {
--- a/src/views/manage/size1920/index.vue
+++ b/src/views/manage/size1920/index.vue
@ -1,42 +1,72 @@
 <template>
-  <div class="home-page">
-    <div class="">
+  <div class="home-page relative overflow-hidden z-10 bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 920px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[570PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_21.png"
+          alt=""
+          class="w-[100vw] h-[570PX] absolute"
+        />
+        <img
+          src="@/assets/image/content/flower.png"
+          alt=""
+          class="w-[1174PX] h-[446PX] absolute z-10 left-[50%] translate-x-[-50%]"
+        />
+
+        <img
+          src="@/assets/image/content/bg_22.png"
+          alt=""
+          class="w-[100vw] h-[80PX] absolute bottom-0 lef-0 right-0 z-10"
+        />
+      </div>
+    </div>
+    <div class="relative z-10">
      <!-- 标题区 -->
-      <div class="company-overview">
+      <div class="company-overview w-[900PX] pb-[130PX] !mt-[50PX]">
        <div class="hero-section">
-          <transition name="fade-up" appear>
-            <n-h1 class="hero-title"
-              >FiEE, Inc. has a team of capable senior management with extensive
-              professional experience</n-h1
-            >
-          </transition>
+          <!-- <transition name="fade-up" appear> -->
+          <n-h1 class="hero-title text-[40PX] min-h-[168PX]"
+            >FiEE, Inc. has a team of capable senior management with extensive
+            professional experience</n-h1
+          >
+          <!-- </transition> -->
        </div>
      </div>

      <!-- 管理团队列表 -->
-      <main class="container">
+      <main class="container w-[900PX] relative z-11">
        <div class="leadership-grid">
          <!-- 每个高管卡片 -->
          <div
            v-for="(leader, index) in leadershipTeam"
            :key="index"
-            class="leader-card"
+            class="leader-card mt-[20PX]"
            :style="{ '--delay': index * 0.2 + 's' }"
          >
-            <!-- 卡片上半部 -->
-            <div class="card-profile">
-              <div class="avatar-wrapper">
-                <div class="decorative-dot"></div>
-                <div class="initials">{{ getInitials(leader.name) }}</div>
-              </div>
-              <div class="profile-info">
-                <h2 class="leader-name">{{ leader.name }}</h2>
-                <p class="leader-position">{{ leader.position }}</p>
+            <div>
+              <div class="flex items-center">
+                <div
+                  class="w-[58PX] h-[58PX] rounded-[50%] bg-[#FF7BAC] text-[#fff] flex justify-center items-center text-[20PX] font-600"
+                >
+                  {{ getInitials(leader.name) }}
+                </div>
+                <div class="flex flex-col justify-between ml-[12PX]">
+                  <h2 class="my-0">{{ leader.name }}</h2>
+                  <div class="text-[#FF7BAC] text-[16PX]">
+                    {{ leader.position }}
+                  </div>
+                </div>
              </div>
            </div>

            <!-- 卡片下半部 -->
-            <div class="card-content">
+            <div>
              <div
                class="content-section"
                v-for="(content, cIndex) in leader.content"
@ -90,19 +120,19 @@ const getInitials = (name) => {
  background-repeat: no-repeat;
 }
 .company-overview {
-  max-width: 1200px;
+  /* width: 900PX; */
  margin: 0 auto;
-  padding: 0 20px;
+  /* padding: 0 20px; */
  color: var(--text-color);
 }

 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
+  /* background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac); */
  background-size: 400% 400%;
-  animation: gradientBG 15s ease infinite;
-  color: white;
-  padding: 120px 0;
+  /* animation: gradientBG 15s ease infinite; */
+  color: #000;
+  padding: 120PX 0;
  text-align: center;
  border-radius: 8px;
 }
@ -119,7 +149,7 @@ const getInitials = (name) => {
  }
 }
 .hero-title {
-  font-size: 40px;
+  /* font-size: 40px; */
  margin-bottom: 20px;
  font-weight: 700;
 }
@ -130,9 +160,9 @@ const getInitials = (name) => {
 }
 /* 基础样式 */
 .container {
-  max-width: 1200px;
+  /* max-width: 1200px; */
  margin: 0 auto;
-  padding: 0 2rem;
+  /* padding: 0 2rem; */
 }

 /* 标题区 */
@ -155,17 +185,17 @@ const getInitials = (name) => {

 /* 管理团队网格 */
 .leadership-grid {
-  display: grid;
+  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
-  padding: 4rem 0;
+  padding: 4rem 0; */
 }

 /* 高管卡片 */
 .leader-card {
-  background: white;
+  /* background: white; */
  border-radius: 20px;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); */
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
@ -236,11 +266,11 @@ const getInitials = (name) => {

 /* 内容区 */
 .card-content {
-  padding: 2rem;
+  /* padding: 2rem; */
 }

 .content-section {
-  margin-bottom: 1.5rem;
+  /* margin-bottom: 1.5rem; */
 }

 .content-section p {
--- a/src/views/manage/size375/index.vue
+++ b/src/views/manage/size375/index.vue
@ -1,38 +1,72 @@
 <template>
-  <div class="home-page">
-    <div class="">
+  <div class="home-page relative overflow-hidden z-10 bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 320px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[680PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_23.png"
+          alt=""
+          class="w-[100vw] h-[711PX] absolute top-[-50PX]"
+        />
+        <img
+          src="@/assets/image/content/flower375.png"
+          alt=""
+          class="w-[374PX] h-[142PX] absolute z-10 left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%]"
+        />
+
+        <img
+          src="@/assets/image/content/bg_22.png"
+          alt=""
+          class="w-[100vw] h-[80PX] absolute bottom-0 lef-0 right-0 z-10"
+        />
+      </div>
+    </div>
+    <div class="relative z-10">
      <!-- 标题区 -->
-      <div class="company-overview">
+      <div class="company-overview w-[311PX] pb-[160PX] !mt-[150PX]">
        <div class="hero-section">
-          <transition name="fade-up" appear>
-            <n-h1 class="hero-title"
-              >FiEE, Inc. has a team of capable senior management with extensive
-              professional experience</n-h1
-            >
-          </transition>
+          <!-- <transition name="fade-up" appear> -->
+          <n-h1 class="hero-title text-[24PX] min-h-[168PX]"
+            >FiEE, Inc. has a team of capable senior management with extensive
+            professional experience</n-h1
+          >
+          <!-- </transition> -->
        </div>
      </div>

      <!-- 管理团队列表 -->
-      <main class="container">
+      <main class="container w-[311PX] relative z-11">
        <div class="leadership-grid">
          <!-- 每个高管卡片 -->
          <div
            v-for="(leader, index) in leadershipTeam"
            :key="index"
-            class="leader-card"
+            class="leader-card mt-[20PX]"
            :style="{ '--delay': index * 0.2 + 's' }"
          >
-            <!-- 卡片上半部 -->
-            <div class="card-profile">
-              <div class="profile-info">
-                <h2 class="leader-name">{{ leader.name }}</h2>
-                <p class="leader-position">{{ leader.position }}</p>
+            <div>
+              <div class="flex items-center">
+                <div
+                  class="w-[58PX] h-[58PX] rounded-[50%] bg-[#FF7BAC] text-[#fff] flex justify-center items-center text-[20PX] font-600 flex-shrink-0"
+                >
+                  {{ getInitials(leader.name) }}
+                </div>
+                <div class="flex flex-col justify-between ml-[12PX]">
+                  <h2 class="my-0">{{ leader.name }}</h2>
+                  <div class="text-[#FF7BAC] text-[16PX]">
+                    {{ leader.position }}
+                  </div>
+                </div>
              </div>
            </div>

            <!-- 卡片下半部 -->
-            <div class="card-content">
+            <div>
              <div
                class="content-section"
                v-for="(content, cIndex) in leader.content"
@ -80,36 +114,28 @@ const getInitials = (name) => {
 </script>

 <style scoped>
-:root {
-  --text-color: #333;
-  --primary-color: #895bff;
-}
-
 .home-page {
-  background-size: cover;
+  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
-
 .company-overview {
-  max-width: 100%;
+  /* width: 900PX; */
  margin: 0 auto;
-  padding: 0 1rem;
+  /* padding: 0 20px; */
  color: var(--text-color);
 }

 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
+  /* background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac); */
  background-size: 400% 400%;
-  animation: gradientBG 15s ease infinite;
-  color: white;
-  padding: 80px 20px;
+  /* animation: gradientBG 15s ease infinite; */
+  color: #000;
+  padding: 120PX 0;
  text-align: center;
-  margin: 2rem 0 3rem;
  border-radius: 8px;
 }
-
 /* 动画 */
@keyframes gradientBG {
  0% {
@ -122,45 +148,60 @@ const getInitials = (name) => {
    background-position: 0% 50%;
  }
 }
-
 .hero-title {
-  font-size: clamp(1.5rem, 4vw, 2.5rem);
-  margin-bottom: 1rem;
+  /* font-size: 40px; */
+  margin-bottom: 20px;
  font-weight: 700;
-  line-height: 1.3;
 }

 .hero-subtitle {
-  font-size: clamp(1rem, 2vw, 1.5rem);
+  font-size: 1.5rem;
  opacity: 0.9;
 }
-
 /* 基础样式 */
 .container {
+  /* max-width: 1200px; */
  margin: 0 auto;
-  padding: 0 1rem;
+  /* padding: 0 2rem; */
+}
+
+/* 标题区 */
+.leadership-header {
+  background: linear-gradient(135deg, #f9fbfe 0%, #e8f2ff 100%);
+  padding: 6rem 0 4rem;
+  text-align: center;
+}
+
+.page-title {
+  font-size: 2.5rem;
+  color: #2c3e50;
+  margin-bottom: 1rem;
+}
+
+.page-subtitle {
+  color: #6b7c93;
+  font-size: 1.1rem;
 }

 /* 管理团队网格 */
 .leadership-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1.5rem;
-  padding: 2rem 0;
+  /* display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+  padding: 4rem 0; */
 }

 /* 高管卡片 */
 .leader-card {
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  /* background: white; */
+  border-radius: 20px;
+  /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); */
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  animation: cardEnter 0.6s ease forwards;
  animation-delay: var(--delay);
  transition: transform 0.3s ease;
-  margin: 0;
 }

 .leader-card:hover {
@ -169,7 +210,7 @@ const getInitials = (name) => {

 /* 个人资料区 */
 .card-profile {
-  padding: 1.5rem;
+  padding: 2rem;
  /* background: linear-gradient(
    135deg,
    #7a4dff 0%,
@ -181,19 +222,19 @@ const getInitials = (name) => {

 .avatar-wrapper {
  position: relative;
-  width: 60px;
-  height: 60px;
-  margin-bottom: 1rem;
+  width: 80px;
+  height: 80px;
+  margin-bottom: 1.5rem;
 }

 .decorative-dot {
  position: absolute;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
  background: #ffbfd7;
  border-radius: 50%;
-  top: -8px;
-  right: -8px;
+  top: -10px;
+  right: -10px;
 }

 .initials {
@ -204,7 +245,7 @@ const getInitials = (name) => {
  display: flex;
  align-items: center;
  justify-content: center;
-  font-size: 1.5rem;
+  font-size: 1.8rem;
  font-weight: bold;
  color: #ff7bac;
 }
@ -214,28 +255,28 @@ const getInitials = (name) => {
 }

 .leader-name {
-  font-size: 1.3rem;
-  margin-bottom: 0.3rem;
+  font-size: 1.6rem;
+  margin-bottom: 0.5rem;
 }

 .leader-position {
-  font-size: 0.9rem;
+  font-size: 1rem;
  opacity: 0.9;
 }

 /* 内容区 */
 .card-content {
-  padding: 1.5rem;
+  /* padding: 2rem; */
 }

 .content-section {
-  margin-bottom: 1rem;
+  /* margin-bottom: 1.5rem; */
 }

 .content-section p {
  color: #5a6d80;
-  line-height: 1.6;
-  font-size: 0.9rem;
+  line-height: 1.7;
+  font-size: 0.95rem;
 }

 /* 动画 */
@ -246,77 +287,15 @@ const getInitials = (name) => {
  }
 }

-/* 响应式设计 - 中屏幕 */
-@media (min-width: 768px) {
-  .company-overview {
-    padding: 0 2rem;
-  }
-
-  .hero-section {
-    padding: 100px 0;
-    margin: 3rem 0 4rem;
-  }
-
-  .hero-title {
-    font-size: 2.5rem;
-  }
-
+/* 响应式 */
+@media (max-width: 768px) {
  .leadership-grid {
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 2rem;
-    padding: 3rem 0;
+    grid-template-columns: 1fr;
  }

  .leader-card {
-    border-radius: 20px;
-  }
-
-  .card-profile {
-    padding: 2rem;
-  }
-
-  .avatar-wrapper {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 1.5rem;
-  }
-
-  .decorative-dot {
-    width: 20px;
-    height: 20px;
-    top: -10px;
-    right: -10px;
-  }
-
-  .initials {
-    font-size: 1.8rem;
-  }
-
-  .leader-name {
-    font-size: 1.6rem;
-  }
-
-  .leader-position {
-    font-size: 1rem;
-  }
-
-  .card-content {
-    padding: 2rem;
-  }
-
-  .content-section {
-    margin-bottom: 1.5rem;
-  }
-
-  .content-section p {
-    font-size: 0.95rem;
-  }
-}
-
-/* 响应式设计 - 大屏幕 */
-@media (min-width: 1024px) {
-  .leadership-grid {
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    margin: 0 1rem;
  }
 }
 </style>
+
--- a/src/views/manage/size768/index.vue
+++ b/src/views/manage/size768/index.vue
@ -1,42 +1,72 @@
 <template>
-  <div class="home-page">
-    <div class="">
+  <div class="home-page relative overflow-hidden z-10 bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 620px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[550PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_24.png"
+          alt=""
+          class="w-[100vw] h-[570PX] absolute top-[-50PX]"
+        />
+        <img
+          src="@/assets/image/content/flower.png"
+          alt=""
+          class="w-[1174PX] h-[446PX] absolute z-10 left-[50%] translate-x-[-50%]"
+        />
+
+        <img
+          src="@/assets/image/content/bg_22.png"
+          alt=""
+          class="w-[100vw] h-[80PX] absolute bottom-0 lef-0 right-0 z-10"
+        />
+      </div>
+    </div>
+    <div class="relative z-10">
      <!-- 标题区 -->
-      <div class="company-overview">
+      <div class="company-overview w-[600PX] pb-[160PX] !mt-[50PX]">
        <div class="hero-section">
-          <transition name="fade-up" appear>
-            <n-h1 class="hero-title"
-              >FiEE, Inc. has a team of capable senior management with extensive
-              professional experience</n-h1
-            >
-          </transition>
+          <!-- <transition name="fade-up" appear> -->
+          <n-h1 class="hero-title text-[32PX] min-h-[168PX]"
+            >FiEE, Inc. has a team of capable senior management with extensive
+            professional experience</n-h1
+          >
+          <!-- </transition> -->
        </div>
      </div>

      <!-- 管理团队列表 -->
-      <main class="container">
+      <main class="container w-[600PX] relative z-11">
        <div class="leadership-grid">
          <!-- 每个高管卡片 -->
          <div
            v-for="(leader, index) in leadershipTeam"
            :key="index"
-            class="leader-card"
+            class="leader-card mt-[20PX]"
            :style="{ '--delay': index * 0.2 + 's' }"
          >
-            <!-- 卡片上半部 -->
-            <div class="card-profile">
-              <div class="avatar-wrapper">
-                <div class="decorative-dot"></div>
-                <div class="initials">{{ getInitials(leader.name) }}</div>
-              </div>
-              <div class="profile-info">
-                <h2 class="leader-name">{{ leader.name }}</h2>
-                <p class="leader-position">{{ leader.position }}</p>
+            <div>
+              <div class="flex items-center">
+                <div
+                  class="w-[58PX] h-[58PX] rounded-[50%] bg-[#FF7BAC] text-[#fff] flex justify-center items-center text-[20PX] font-600"
+                >
+                  {{ getInitials(leader.name) }}
+                </div>
+                <div class="flex flex-col justify-between ml-[12PX]">
+                  <h2 class="my-0">{{ leader.name }}</h2>
+                  <div class="text-[#FF7BAC] text-[16PX]">
+                    {{ leader.position }}
+                  </div>
+                </div>
              </div>
            </div>

            <!-- 卡片下半部 -->
-            <div class="card-content">
+            <div>
              <div
                class="content-section"
                v-for="(content, cIndex) in leader.content"
@ -84,36 +114,28 @@ const getInitials = (name) => {
 </script>

 <style scoped>
-:root {
-  --text-color: #333;
-  --primary-color: #895bff;
-}
-
 .home-page {
-  background-size: cover;
+  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
-
 .company-overview {
-  max-width: 100%;
+  /* width: 900PX; */
  margin: 0 auto;
-  padding: 0 1rem;
+  /* padding: 0 20px; */
  color: var(--text-color);
 }

 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
+  /* background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac); */
  background-size: 400% 400%;
-  animation: gradientBG 15s ease infinite;
-  color: white;
-  padding: 80px 20px;
+  /* animation: gradientBG 15s ease infinite; */
+  color: #000;
+  padding: 120PX 0;
  text-align: center;
-  margin: 2rem 0 3rem;
  border-radius: 8px;
 }
-
 /* 动画 */
@keyframes gradientBG {
  0% {
@ -126,56 +148,69 @@ const getInitials = (name) => {
    background-position: 0% 50%;
  }
 }
-
 .hero-title {
-  font-size: clamp(1.5rem, 4vw, 2.5rem);
-  margin-bottom: 1rem;
+  /* font-size: 40px; */
+  margin-bottom: 20px;
  font-weight: 700;
-  line-height: 1.3;
 }

 .hero-subtitle {
-  font-size: clamp(1rem, 2vw, 1.5rem);
+  font-size: 1.5rem;
  opacity: 0.9;
 }
-
 /* 基础样式 */
 .container {
-  max-width: 1200px;
+  /* max-width: 1200px; */
  margin: 0 auto;
-  padding: 0 1rem;
+  /* padding: 0 2rem; */
+}
+
+/* 标题区 */
+.leadership-header {
+  background: linear-gradient(135deg, #f9fbfe 0%, #e8f2ff 100%);
+  padding: 6rem 0 4rem;
+  text-align: center;
+}
+
+.page-title {
+  font-size: 2.5rem;
+  color: #2c3e50;
+  margin-bottom: 1rem;
+}
+
+.page-subtitle {
+  color: #6b7c93;
+  font-size: 1.1rem;
 }

 /* 管理团队网格 */
 .leadership-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1.5rem;
-  padding: 2rem 0;
+  /* display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+  padding: 4rem 0; */
 }

 /* 高管卡片 */
 .leader-card {
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  /* background: white; */
+  border-radius: 20px;
+  /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); */
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  animation: cardEnter 0.6s ease forwards;
  animation-delay: var(--delay);
  transition: transform 0.3s ease;
-  margin: 0;
 }

 .leader-card:hover {
  transform: translateY(-5px);
 }

-/* 个人资料区 */
 /* 个人资料区 */
 .card-profile {
-  padding: 1.5rem;
+  padding: 2rem;
  /* background: linear-gradient(
    135deg,
    #7a4dff 0%,
@ -187,19 +222,19 @@ const getInitials = (name) => {

 .avatar-wrapper {
  position: relative;
-  width: 60px;
-  height: 60px;
-  margin-bottom: 1rem;
+  width: 80px;
+  height: 80px;
+  margin-bottom: 1.5rem;
 }

 .decorative-dot {
  position: absolute;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
  background: #ffbfd7;
  border-radius: 50%;
-  top: -8px;
-  right: -8px;
+  top: -10px;
+  right: -10px;
 }

 .initials {
@ -210,7 +245,7 @@ const getInitials = (name) => {
  display: flex;
  align-items: center;
  justify-content: center;
-  font-size: 1.5rem;
+  font-size: 1.8rem;
  font-weight: bold;
  color: #ff7bac;
 }
@ -220,28 +255,28 @@ const getInitials = (name) => {
 }

 .leader-name {
-  font-size: 1.3rem;
-  margin-bottom: 0.3rem;
+  font-size: 1.6rem;
+  margin-bottom: 0.5rem;
 }

 .leader-position {
-  font-size: 0.9rem;
+  font-size: 1rem;
  opacity: 0.9;
 }

 /* 内容区 */
 .card-content {
-  padding: 1.5rem;
+  /* padding: 2rem; */
 }

 .content-section {
-  margin-bottom: 1rem;
+  /* margin-bottom: 1.5rem; */
 }

 .content-section p {
  color: #5a6d80;
-  line-height: 1.6;
-  font-size: 0.9rem;
+  line-height: 1.7;
+  font-size: 0.95rem;
 }

 /* 动画 */
@ -252,77 +287,14 @@ const getInitials = (name) => {
  }
 }

-/* 响应式设计 - 中屏幕 */
-@media (min-width: 768px) {
-  .company-overview {
-    padding: 0 2rem;
-  }
-
-  .hero-section {
-    padding: 100px 0;
-    margin: 3rem 0 4rem;
-  }
-
-  .hero-title {
-    font-size: 2.5rem;
-  }
-
+/* 响应式 */
+@media (max-width: 768px) {
  .leadership-grid {
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 2rem;
-    padding: 3rem 0;
+    grid-template-columns: 1fr;
  }

  .leader-card {
-    border-radius: 20px;
-  }
-
-  .card-profile {
-    padding: 2rem;
-  }
-
-  .avatar-wrapper {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 1.5rem;
-  }
-
-  .decorative-dot {
-    width: 20px;
-    height: 20px;
-    top: -10px;
-    right: -10px;
-  }
-
-  .initials {
-    font-size: 1.8rem;
-  }
-
-  .leader-name {
-    font-size: 1.6rem;
-  }
-
-  .leader-position {
-    font-size: 1rem;
-  }
-
-  .card-content {
-    padding: 2rem;
-  }
-
-  .content-section {
-    margin-bottom: 1.5rem;
-  }
-
-  .content-section p {
-    font-size: 0.95rem;
-  }
-}
-
-/* 响应式设计 - 大屏幕 */
-@media (min-width: 1024px) {
-  .leadership-grid {
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    margin: 0 1rem;
  }
 }
 </style>
--- a/src/views/myHome/size1920/index.vue
+++ b/src/views/myHome/size1920/index.vue
@ -22,7 +22,7 @@
    </div>
    <section
      class="company-overview h-[916px]"
-      style="max-width: 900px; margin: 0 auto; padding: 0; padding-top: 190px"
+      style="width: 900px; margin: 0 auto; padding: 0; padding-top: 190px"
    >
      <div class="hero-section">
        <transition name="fade-up" appear>
@ -43,7 +43,7 @@
    <!-- 公司概况 -->
    <section
      class="company-overview"
-      style="max-width: 900px; margin: 0 auto; padding: 0"
+      style="width: 900px; margin: 0 auto; padding: 0"
    >
      <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
      <h1 class="section-titles">Company Profile</h1>
--- a/src/views/myHome/size375/index.vue
+++ b/src/views/myHome/size375/index.vue
@ -1,17 +1,29 @@
 <template>
-  <div class="home-page">
-    <section
-      class="company-overview"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-    >
+  <div class="home-page relative overflow-hidden z-10 bg-[#ffffff]">
+    <div class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 343px; pointer-events: none; mix-blend-mode: multiply">
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[800PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img src="@/assets/image/content/bg_15.png" alt="" class="w-[100vw] h-[813PX] absolute" />
+        <img src="@/assets/image/content/bg_4.png" alt=""
+          class="w-[204PX] h-[140PX] absolute top-[189PX] left-[50%] translate-x-[-50%]" />
+        <img src="@/assets/image/content/bg_5.png" alt=""
+          class="w-[100vw] absolute bottom-[-80PX] lef-0 right-0 z-99" />
+      </div>
+    </div>
+    <section class="company-overview" style="
+        max-width: 311px;
+        margin: 0 auto;
+        padding: 0;
+        padding-top: 320px;
+        height: 790px;
+      ">
      <div class="hero-section">
        <transition name="fade-up" appear>
          <n-h1 class="hero-title">
-            <div
-              class="content-blocks"
-              :class="{ 'slide-in': isInView }"
-              ref="contentRef"
-            >
+            <div class="content-blocks" :class="{ 'slide-in': isInView }" ref="contentRef">
              <text>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</text>
              <p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
            </div>
@ -21,218 +33,164 @@
    </section>

    <!-- 公司概况 -->
-    <section
-      class="company-overview"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-    >
-      <h1 class="section-titles">Company Profile</h1>
-
+    <section class="company-overview" style="max-width: 311px; margin: 0 auto; padding: 0;margin-top: 100px;">
      <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
-      <div class="content-block">
+      <h1 class="section-titles">Company Profile</h1>
+      <div class="content-block text-[#455363]">
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
        <p>
-          <text style="color: black">{{
+          <text class="text-[#455363]">{{
            $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
-          }}</text>
+            }}</text>

          {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}
        </p>
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
      </div>
+
+      <n-carousel autoplay>
+        <img src="@/assets/image/content/profile_1.png" alt="" class="w-[201PX] h-[201PX] mx-auto" />
+        <img src="@/assets/image/content/profile_2.png" alt="" class="w-[201PX] h-[201PX] mx-auto" />
+        <img src="@/assets/image/content/profile_3.png" alt="" class="w-[201PX] h-[201PX] mx-auto" />
+        <img src="@/assets/image/content/profile_4.png" alt="" class="w-[201PX] h-[201PX] mx-auto" />
+        <template #dots="{ total, currentIndex, to }">
+          <ul class="custom-dots">
+            <li v-for="index of total" :key="index" :class="{ ['is-active']: currentIndex === index - 1 }"
+              @click="to(index - 1)" />
+          </ul>
+        </template>
+      </n-carousel>
    </section>
    <!-- 突出成就 -->
-    <section
-      class="achievements"
-      style="
-        max-width: 1200px;
-        margin: 60px auto;
+    <section class="achievements overflow-hidden z-99 relative" style="
+        width: 100vw;
        padding: 0 40px;
-        background: #fff;
-      "
-    >
-      <h2 class="section-titles">
-        {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
-      </h2>
-      <p style="font-size: 18px">
-        {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
-      </p>
-    </section>
-    <!-- 新闻模块 -->
-    <section
-      class="news-section"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-    >
-      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
-      <div class="news-card">
-        <div style="margin-bottom: 20px" v-for="(item, index) in newList">
-          <div
-            style="
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-            "
-          >
-            <div>
-              <div style="font-size: 18px">{{ item.time }}</div>
-              <n-tooltip
-                trigger="click"
-                :disabled="!item.showTooltip"
-                width="trigger"
-              >
-                <template #trigger>
-                  <div
-                    :ref="(el) => setTitleRef(el, index)"
-                    style="
-                      font-size: 18px;
-                      word-break: break-word;
-                      display: -webkit-box;
-                      -webkit-line-clamp: 2;
-                      -webkit-box-orient: vertical;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                    "
-                  >
-                    {{ item.title }}
-                  </div>
-                </template>
-                <div slot="content">
-                  {{ item.title }}
-                </div>
-              </n-tooltip>
-            </div>
-
-            <div
-              style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
-              class="cursor-pointer"
-              @click="handleLink(item)"
-            >
-              View Press Release<img
-                class="ml-[10px]"
-                src="@/assets/image/icon/icon-new.png"
-                alt=""
-                style="width: 20px; height: 20px"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="newList.length === 0"
-          class="flex justify-center items-center"
-        >
-          <img
-            src="@/assets/image/icon/default-empty.png"
-            alt="empty"
-            style="width: 109px; height: 60px"
-          />
+        margin-top: 40px;
+        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
+      ">
+      <div style="max-width: 311px; height: 306px; padding: 64px 0"
+        class="m-[auto] flex flex-col items-center text-center">
+        <h2 class="section-titles">
+          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
+        </h2>
+        <div class="w-100% flex items-center justify-between">
+          <p style="font-size: 14px" class="my-0 text-[#455363]">
+            {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
+          </p>
        </div>
      </div>
    </section>
+    <!-- 新闻模块 -->
+    <section class="news-section relative z-99" style="width: 311px; margin: 60px auto">
+      <div class="flex justify-between mb-[10PX]">
+        <h2 class="section-titles section-titles1">
+          {{ $t("HOME.CONTAINY.NEWS.TITLE") }}
+        </h2>
+        <div v-if="totalPages > 1">
+          <!-- 左右切换按钮 -->
+          <img v-if="currentPage === 0" disabled class="w-[38PX] h-[38PX]" src="@/assets/image/content/switch_right.png"
+            alt="" />
+          <img v-else @click="prevPage" src="@/assets/image/content/switch_left.png"
+            class="transform rotate-180 w-[38PX] h-[38PX] cursor-pointer" alt="" />
+
+          <img v-if="currentPage >= totalPages - 1" class="transform rotate-180 w-[38PX] h-[38PX] ml-[20PX]" disabled
+            src="@/assets/image/content/switch_right.png" alt="" />
+          <img v-else @click="nextPage" class="w-[38PX] h-[38PX] ml-[20PX] cursor-pointer"
+            src="@/assets/image/content/switch_left.png" alt="" />
+        </div>
+      </div>
+      <!-- Grid 布局容器 -->
+      <div class="grid grid-cols-1 gap-4">
+        <template v-for="(item, index) in pages" :key="index">
+          <div style="height: 232px" class="news-card flex flex-col justify-between">
+            <div class="text-[24PX] font-600">{{ item.time }}</div>
+            <n-tooltip trigger="hover" :disabled="!item.showTooltip" width="trigger">
+              <template #trigger>
+                <div :ref="(el) => setTitleRef(el, index)" style="
+                    word-break: break-word;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  " class="text-[16PX] text-[#455363]">
+                  {{ item.title }}
+                </div>
+              </template>
+              <div slot="content" class="text-[16PX] text-[#455363]">
+                {{ item.title }}
+              </div>
+            </n-tooltip>
+            <div class="text-[16PX] text-[#FF7BAC] font-500 flex items-center cursor-pointer"
+              @click="handleLink(item)">
+              View Press Release
+              <img src="@/assets/image/content/vector.png" alt="" class="ml-[10PX] w-[6.5PX] h-[13PX]" />
+            </div>
+          </div>
+        </template>
+      </div>
+    </section>
    <!-- 新增：股票信息与活动预告双栏模块 -->
-    <section
-      class="dual-column-section"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-    >
-      <div class="grid-container">
+    <section class="dual-column-section bg-[url('@/assets/image/content/bg_16.png')]" style="
+        width: 100vw;
+        height: 570px;
+        margin: 60px auto;
+        background-size: 100% 100%;
+        border-radius: 15PX 15PX 0 0;
+        background-color: #e7407e;
+      ">
+      <div style="width: 343px" class="m-auto">
        <!-- 股票信息卡片 -->
-        <div class="info-card stock-card">
-          <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
+        <div class="">
+          <h2 class="card-title mx-[15PX]">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
          <div class="stock-data">
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label"> Time </span>
-              <span style="font-size: 18px" class="data-value">{{
-                formatted
-              }}</span>
+              <span class="data-label"> Time </span>
+              <span class="data-value">{{ sampleDate }}</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
-              }}</span>
-              <span style="font-size: 18px" class="data-value"
-                >${{ stockQuote.price }}</span
-              >
+                }}</span>
+              <span class="data-value">${{ stockQuote.price }}</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
-              }}</span>
+                }}</span>

-              <span
-                style="font-size: 18px"
-                class="data-value"
-                :class="
-                  stockQuote.change?.includes('-')
-                    ? 'text-green-500'
-                    : 'text-red-500'
-                "
-                >{{ stockQuote.change || "--" }}</span
-              >
+              <span class="data-value">{{ stockQuote.change || "--" }}</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
-              }}</span>
-              <span style="font-size: 18px" class="data-value"
-                >NASDAQ: FIEE</span
-              >
+                }}</span>
+              <span class="data-value">NASDAQ: FIEE</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.VOLUME")
-              }}</span>
-              <span style="font-size: 18px" class="data-value">{{
-                stockQuote.volume
-              }}</span>
+                }}</span>
+              <span class="data-value">{{ stockQuote.volume }}</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
-              }}</span>
-              <span style="font-size: 18px" class="data-value"
-                >${{ stockQuote.marketCap }}</span
-              >
+                }}</span>
+              <span class="data-value">${{ stockQuote.marketCap }}</span>
            </div>
          </div>
        </div>
-
-        <!-- 活动预告卡片 -->
-        <div class="info-card events-card">
-          <h2 class="card-title">
+      </div>
+    </section>
+    <section class="dual-column-section" style="width: 100vw; height: 300px; margin: 60px auto; padding: 0 40px">
+      <div class="w-[311PX] m-auto">
+        <div class="">
+          <h2 class="card-title1">
            {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
          </h2>
          <div class="event-item">
-            <!-- <h3 class="event-name">
-              {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.EVENT_NAME") }}
-            </h3> -->
-            <!-- <div class="event-detail">
-              <div class="detail-row">
-                <i class="icon-calendar"></i>
-                <span
-                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.DATE") }}:
-                  2025年8月12日(二)-2025年8月14日</span
-                >
-              </div>
-              <div class="detail-row">
-                <i class="icon-location"></i>
-                <span
-                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.VENUE") }}:
-                  6号馆B厅</span
-                >
-              </div>
-              <div class="detail-row">
-                <i class="icon-area"></i>
-                <span
-                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.AREA") }}:
-                  约10,000m²</span
-                >
-              </div>
-              <div class="detail-row">
-                <i class="icon-booth"></i>
-                <span
-                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.BOOTHS") }}:
-                  约500个标准展位</span
-                >
-              </div>
-            </div> -->
+            <img src="@/assets/image/content/empty.png" alt="" class="w-[100%] h-[151PX]" />
          </div>
        </div>
      </div>
@ -247,11 +205,48 @@ import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
 import axios from "axios";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { ArrowBack, ArrowForward } from '@vicons/ionicons5'
+
+// 每页显示的项目数 - 最多三行，每行最多2个项目，所以每页最多6个项目
+const itemsPerPage = 6;
+
+// 当前页码
+const currentPage = ref(0);
+
+// 计算总页数
+const totalPages = computed(() => {
+  return Math.ceil(newList.value.length / itemsPerPage);
+});
+
+// 将数据分页，最多返回6个项目
+const pages = computed(() => {
+  // 使用slice确保只处理前6个项目
+  const limitedItems = newList.value.slice(
+    currentPage.value * itemsPerPage,
+    (currentPage.value + 1) * itemsPerPage
+  );
+  return limitedItems;
+});
+
+// 切换到上一页
+const prevPage = () => {
+  if (currentPage.value > 0) {
+    currentPage.value--;
+  }
+};
+
+// 切换到下一页
+const nextPage = () => {
+  if (currentPage.value < totalPages.value - 1) {
+    currentPage.value++;
+  }
+};
+
 getStockQuate();
-const { t: $t } = useI18n();
-const contentRef = ref(null);
-const isInView = ref(false);
-let observer = null;
+// 示例数据
+const sampleDate = ref(formatted);
+
 const newList = ref([
  // {
  //   time: "June 3, 2025",
@ -291,6 +286,10 @@ const getPressReleasesDisplay = () => {
  });
 };

+const { t: $t } = useI18n();
+const contentRef = ref(null);
+const isInView = ref(false);
+let observer = null;
 onMounted(() => {
  if (contentRef.value && "IntersectionObserver" in window) {
    observer = new IntersectionObserver(
@ -367,7 +366,73 @@ const handleLink = (item) => {
 };
 </script>

-<style scoped>
+<style scoped lang="scss">
+.carousel-img {
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+}
+
+.custom-arrow {
+  display: flex;
+  position: absolute;
+  bottom: 25px;
+  right: 10px;
+}
+
+.custom-arrow button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-right: 12px;
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-width: 0;
+  border-radius: 8px;
+  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.custom-arrow button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.custom-arrow button:active {
+  transform: scale(0.95);
+  transform-origin: center;
+}
+
+.custom-dots {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+
+}
+
+.custom-dots li {
+  display: inline-block;
+  width: 8PX;
+  height: 8PX;
+  margin: 0 12px;
+  border-radius: 50%;
+  background-color: #EFEFEF;
+  transition:
+    width 0.3s,
+    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.custom-dots li.is-active {
+  border-radius: 20PX;
+  width: 40PX;
+  background: #DDDDDD;
+}
 .home-page {
  background-size: 100% 100%;
  background-position: center;
@ -381,11 +446,11 @@ const handleLink = (item) => {
 }
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
+  /* background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac); */
  background-size: 400% 400%;
-  animation: gradientBG 15s ease infinite;
-  color: white;
-  padding: 40px 20px;
+  /* animation: gradientBG 15s ease infinite; */
+  color: #000;
+  padding: 40px 0px;
  text-align: left;
  margin-bottom: 60px;
  border-radius: 8px;
@ -404,7 +469,7 @@ const handleLink = (item) => {
 }
 .banner-content {
  text-align: center;
-  color: white;
+  color: #000;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
@ -431,24 +496,34 @@ const handleLink = (item) => {

 .section-title {
  font-size: 1.5rem; /* 18px */
-  margin-bottom: 30px;
+  margin-bottom: 0;
  color: #ff7bac;
 }
 .section-titles {
-  font-size: 2.5rem;
-  margin-bottom: 30px;
+  font-size: 22PX;
+  margin-bottom: 15px;
+  margin-top: 0;
  color: black;
+  position: relative;
+}
+.section-titles1::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 60PX;
+  height: 4PX;
+  background: #ff7bac;
+  transform: translateY(-20px);
 }

 .content-block {
-  font-size: 1.1rem;
+  font-size: 0.9rem;
  line-height: 1.8;
 }
 .content-blocks {
-  font-size: 2rem;
-  color: #fff;
+  font-size: 1.4rem;
+  color: #000;
  font-weight: bold;
-
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
@ -519,21 +594,39 @@ const handleLink = (item) => {
 }

 .card-title {
-  font-size: 2.5rem;
-  margin-bottom: 25px;
-  color: #333;
+  font-size: 2rem;
+  padding-top: 88px;
+  color: #ffffff;
  position: relative;
-  padding-bottom: 10px;
+  margin-bottom: 0;
 }

 .card-title::after {
  content: "";
  position: absolute;
-  bottom: 0;
  left: 0;
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #121212, #232330);
+  width: 60PX;
+  height: 4PX;
+  background: #ffffff;
+  transform: translateY(-20px);
+}
+
+.card-title1 {
+  font-size: 2rem;
+  padding-top: 88px;
+  color: #000;
+  position: relative;
+  margin-bottom: 0;
+}
+
+.card-title1::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 60PX;
+  height: 4PX;
+  background: #ff7bac;
+  transform: translateY(-20px);
 }

 /* 股票信息卡片样式 */
@ -547,20 +640,25 @@ const handleLink = (item) => {

 .data-row {
  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid #f0f0f0;
+  /* justify-content: space-between; */
+  margin: 10PX;
+  border-left: 2PX solid #00ffff;
+  transform: translateX(-10PX);
+  padding-left: 10PX;
+
+  font-size: 12PX;
+  color: #fff;
 }

 .data-label {
-  color: #666;
-  font-weight: 500;
-  font-size: 18px;
+  // font-weight: 500;
+  width: 150PX;
 }

 .data-value {
-  font-weight: 600;
-  font-size: 18px;
+  // font-weight: 600;
+  font-family: "PingFang SC";
+  letter-spacing: 0.48px;
 }

 .positive {
@ -638,10 +736,10 @@ const handleLink = (item) => {

 .news-card {
  background: white;
-  border-radius: 12px;
-  padding: 30px;
+  border-radius: 12PX;
+  padding: 30PX;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid #ff7bac;
+  border-top: 14PX solid #ff7bac;
 }

 .news-date {
--- a/vite.config.js
+++ b/vite.config.js
@ -1,5 +1,6 @@
 import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import {resolve} from "path"
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
@ -34,6 +35,8 @@ export default defineConfig({
        Components({
            resolvers: [VantResolver()],
        }),
+        vueJsx(),
+
        viteImagemin({
            // 无损压缩配置
            optipng: {