diff --git a/package.json b/package.json
index 35444d1..af8bc49 100644
--- 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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49bfe05..eaa4706 100644
--- 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
diff --git a/src/assets/image/content/bg_15.png b/src/assets/image/content/bg_15.png
new file mode 100644
index 0000000..88a9e69
Binary files /dev/null and b/src/assets/image/content/bg_15.png differ
diff --git a/src/assets/image/content/bg_16.png b/src/assets/image/content/bg_16.png
new file mode 100644
index 0000000..146d9c5
Binary files /dev/null and b/src/assets/image/content/bg_16.png differ
diff --git a/src/assets/image/content/bg_17.png b/src/assets/image/content/bg_17.png
new file mode 100644
index 0000000..9a9976e
Binary files /dev/null and b/src/assets/image/content/bg_17.png differ
diff --git a/src/assets/image/content/bg_19.png b/src/assets/image/content/bg_19.png
new file mode 100644
index 0000000..a9ac41b
Binary files /dev/null and b/src/assets/image/content/bg_19.png differ
diff --git a/src/assets/image/content/bg_20.png b/src/assets/image/content/bg_20.png
new file mode 100644
index 0000000..a9e3036
Binary files /dev/null and b/src/assets/image/content/bg_20.png differ
diff --git a/src/assets/image/content/bg_21.png b/src/assets/image/content/bg_21.png
new file mode 100644
index 0000000..90f1f7a
Binary files /dev/null and b/src/assets/image/content/bg_21.png differ
diff --git a/src/assets/image/content/bg_22.png b/src/assets/image/content/bg_22.png
new file mode 100644
index 0000000..e601fc3
Binary files /dev/null and b/src/assets/image/content/bg_22.png differ
diff --git a/src/assets/image/content/bg_23.png b/src/assets/image/content/bg_23.png
new file mode 100644
index 0000000..1bd9ecd
Binary files /dev/null and b/src/assets/image/content/bg_23.png differ
diff --git a/src/assets/image/content/bg_24.png b/src/assets/image/content/bg_24.png
new file mode 100644
index 0000000..cdde0f4
Binary files /dev/null and b/src/assets/image/content/bg_24.png differ
diff --git a/src/assets/image/content/bg_25.png b/src/assets/image/content/bg_25.png
new file mode 100644
index 0000000..bb1cac5
Binary files /dev/null and b/src/assets/image/content/bg_25.png differ
diff --git a/src/assets/image/content/bg_26.png b/src/assets/image/content/bg_26.png
new file mode 100644
index 0000000..b71eef2
Binary files /dev/null and b/src/assets/image/content/bg_26.png differ
diff --git a/src/assets/image/content/flower.png b/src/assets/image/content/flower.png
new file mode 100644
index 0000000..3439b77
Binary files /dev/null and b/src/assets/image/content/flower.png differ
diff --git a/src/assets/image/content/flower375.png b/src/assets/image/content/flower375.png
new file mode 100644
index 0000000..f4b2fba
Binary files /dev/null and b/src/assets/image/content/flower375.png differ
diff --git a/src/views/BusinessServices/size1440/index.vue b/src/views/BusinessServices/size1440/index.vue
index 621d5b9..431929b 100644
--- 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;
   
diff --git a/src/views/BusinessServices/size1920/index.vue b/src/views/BusinessServices/size1920/index.vue
index 621d5b9..e25ba04 100644
--- 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;
   
diff --git a/src/views/BusinessServices/size375/index.vue b/src/views/BusinessServices/size375/index.vue
index 7b6a97c..ac34da3 100644
--- 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 {
diff --git a/src/views/BusinessServices/size768/index.vue b/src/views/BusinessServices/size768/index.vue
index d9c8a96..a561cc2 100644
--- 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;
   }
 
diff --git a/src/views/CommitteeAppointment/size1920/index.vue b/src/views/CommitteeAppointment/size1920/index.vue
index 15d7b7b..b226510 100644
--- 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;
diff --git a/src/views/CommitteeAppointment/size375/index.vue b/src/views/CommitteeAppointment/size375/index.vue
index a41ee60..d98e5ba 100644
--- 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>
\ No newline at end of file
diff --git a/src/views/boarddirectors/index.vue b/src/views/boarddirectors/index.vue
index 0bb29ba..be6a174 100644
--- 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>
\ No newline at end of file
diff --git a/src/views/boarddirectors/size1440/index.vue b/src/views/boarddirectors/size1440/index.vue
index 99c8244..3a4a83e 100644
--- 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>
diff --git a/src/views/boarddirectors/size1920/index.vue b/src/views/boarddirectors/size1920/index.vue
index fc88905..3a4a83e 100644
--- 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>
diff --git a/src/views/boarddirectors/size375/index.vue b/src/views/boarddirectors/size375/index.vue
index fae0cd1..e75671d 100644
--- 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>
diff --git a/src/views/boarddirectors/size768/index.vue b/src/views/boarddirectors/size768/index.vue
index 99c8244..416a3e0 100644
--- 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>
diff --git a/src/views/companyoverview/size375/index.vue b/src/views/companyoverview/size375/index.vue
index 40ddd53..1929860 100644
--- 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>
diff --git a/src/views/companyoverview/size768/index.vue b/src/views/companyoverview/size768/index.vue
index 3391c18..913fe37 100644
--- 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"
diff --git a/src/views/manage/size1440/index.vue b/src/views/manage/size1440/index.vue
index 45cda03..08b9e5f 100644
--- 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 {
diff --git a/src/views/manage/size1920/index.vue b/src/views/manage/size1920/index.vue
index 45cda03..08b9e5f 100644
--- 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 {
diff --git a/src/views/manage/size375/index.vue b/src/views/manage/size375/index.vue
index ee7a781..c58edad 100644
--- 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>
+
diff --git a/src/views/manage/size768/index.vue b/src/views/manage/size768/index.vue
index a83b1fe..49503fc 100644
--- 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>
diff --git a/src/views/myHome/size1920/index.vue b/src/views/myHome/size1920/index.vue
index edee3f8..5fc0b97 100644
--- 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>
diff --git a/src/views/myHome/size375/index.vue b/src/views/myHome/size375/index.vue
index ec74245..2c8e1fe 100644
--- 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 {
diff --git a/vite.config.js b/vite.config.js
index d335207..971a0eb 100644
--- 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: {