feat: 20250612 首页、Navbar、Footer等组件

components.d.ts

@@ -8,7 +8,11 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    Footer: typeof import('./src/components/Footer.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    Navbar: typeof import('./src/components/Navbar.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Test: typeof import('./src/components/Test.vue')['default']

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@vueuse/core": "^13.3.0",
     "axios": "^1.9.0",
+    "element-plus": "^2.10.1",
     "pinia": "^2.1.7",
     "postcss-px-to-viewport": "^1.1.1",
     "vue": "^3.5.13",
@@ -52,6 +53,7 @@
     "postcss": "^8.4.24",
     "postcss-px-to-viewport-8-plugin": "^1.2.5",
     "prettier": "^3.5.3",
+    "sass": "^1.89.2",
     "typescript": "5.1.6",
     "unplugin-auto-import": "^19.3.0",
     "unplugin-vue-components": "^28.7.0",

postcss.config.cjs

@@ -32,7 +32,7 @@ module.exports = {
   plugins: {
     'postcss-px-to-viewport-8-plugin': {
       unitToConvert: 'px',
-      viewportWidth: 750,
+      viewportWidth: 1920,
       unitPrecision: 5,
       viewportUnit: 'vw',
       fontViewportUnit: 'vw',

src/App.vue

@@ -1,42 +1,14 @@
 <template>
   <div id="app">
-    <!-- 导航栏 -->
+    <!-- 路由出口：渲染 Layout 及子页面 -->
-    <nav>
-      <ul>
-        <li><router-link to="/">首页</router-link></li>
-        <li><router-link to="/about">关于我们</router-link></li>
-      </ul>
-    </nav>
-
-    <!-- 路由出口：渲染当前页面 -->
-    <main>
     <router-view />
-    </main>
   </div>
 </template>
 
 <script setup lang="ts">
-// App 组件逻辑
+// 无需额外逻辑
 </script>
 
-<style>
+<style scoped lang="less">
-nav ul {
+@import '@/styles/global.less';
-  display: flex;
-  list-style: none;
-  padding: 0;
-}
-
-nav li {
-  margin-right: 1rem;
-}
-
-nav a {
-  text-decoration: none;
-  color: #333;
-}
-
-nav a.router-link-exact-active {
-  color: #007bff;
-  font-weight: bold;
-}
 </style>

src/main.ts

@@ -5,7 +5,18 @@ import App from './App.vue'
 import routes from './router/routes'
 import i18n from './locales/i18n' // 导入i18n配置
 import './style.css'
+import '@/styles/global.less' // 引入全局样式
 // 修正：明确 meta.title 的类型为 string
+
+// 引入 element-plus 核心库
+import ElementPlus from 'element-plus'
+// 引入 element-plus 全局样式（可根据需求选择是否自定义主题，这里先引入默认样式）
+// import 'element-plus/dist/index.css'
+// 如果你需要使用 Element Plus 提供的国际化（i18n）功能，还需引入对应的语言包，比如中文
+
+// 修正：使用正确的语言包路径（从 es/locale/lang 导入）
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+// 使用 ElementPlus 插件，并配置国际化等选项（这里以配置中文为例）
 declare module 'vue-router' {
   interface RouteMeta {
     title?: string // 明确指定为 string 类型
@@ -22,6 +33,9 @@ export const createApp = ViteSSG(
   ctx => {
     // 安装 i18n 插件
     ctx.app.use(i18n)
+    ctx.app.use(ElementPlus, {
+      locale: zhCn
+    })
 
     // 路由守卫：设置页面标题
     ctx.router.beforeEach((to, _from, next) => {

src/router/routes.ts

@@ -1,40 +1,53 @@
 // src/router/routes.ts
 import type { RouteRecordRaw } from 'vue-router' // 添加type关键字
-import Home from '@/views/Home.vue'
+import Home from '@/views/Home/Home.vue'
-import About from '@/views/About.vue'
+// import About from '@/views/About.vue'
-import I18nDemo from '../views/I18nDemo.vue'
+// import I18nDemo from '../views/I18nDemo.vue'
-
+import Layout from '@/layout/Layout.vue'
 const routes: RouteRecordRaw[] = [
-  {
-    path: '/i18n-demo',
-    name: 'I18nDemo',
-    component: I18nDemo,
-    meta: {
-      title: '国际化演示'
-    }
-  },
   {
     path: '/',
-    name: 'Home',
+    component: Layout,
-    component: Home,
+    children: [
-    meta: {
+      { path: '', name: 'Home', component: Home },
-      title: '首页 - 极简官网' // 明确指定title为string类型
+      { path: 'news', name: 'News', component: () => import('@/views/News.vue') },
-    } as { title: string } // 强制类型断言
+      { path: 'network', name: 'Network', component: () => import('@/views/Network.vue') },
-  },
+      { path: 'dating', name: 'Dating', component: () => import('@/views/Dating.vue') },
-  {
+      { path: 'app', name: 'App', component: () => import('@/views/App.vue') },
-    path: '/about',
+      { path: 'ecosystem', name: 'Ecosystem', component: () => import('@/views/Ecosystem.vue') },
-    name: 'About',
+      { path: 'about', name: 'About', component: () => import('@/views/About.vue') }
-    component: About,
+    ]
-    meta: {
-      title: '关于我们 - 极简官网'
-    } as { title: string }
-  },
-  {
-    path: '/:pathMatch(.*)*',
-    name: 'NotFound',
-    component: () => import('@/views/NotFound.vue'),
-    meta: { title: '404 - 页面不存在' } as { title: string }
   }
+  // {
+  //   path: '/i18n-demo',
+  //   name: 'I18nDemo',
+  //   component: I18nDemo,
+  //   meta: {
+  //     title: '国际化演示'
+  //   }
+  // },
+  // {
+  //   path: '/',
+  //   name: 'Home',
+  //   component: Home,
+  //   meta: {
+  //     title: '首页 - 极简官网' // 明确指定title为string类型
+  //   } as { title: string } // 强制类型断言
+  // },
+  // {
+  //   path: '/about',
+  //   name: 'About',
+  //   component: About,
+  //   meta: {
+  //     title: '关于我们 - 极简官网'
+  //   } as { title: string }
+  // },
+  // {
+  //   path: '/:pathMatch(.*)*',
+  //   name: 'NotFound',
+  //   component: () => import('@/views/NotFound.vue'),
+  //   meta: { title: '404 - 页面不存在' } as { title: string }
+  // }
 ]
 
 export default routes

src/style.css

@@ -62,9 +62,9 @@ button:focus-visible {
 }
 
 #app {
-    max-width: 1280px;
+    /*max-width: 1280px;*/
     margin: 0 auto;
-    padding: 2rem;
+    /*padding: 2rem;*/
     text-align: center;
 }
 

src/views/Home/Home.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="home-page">
+    <!--    Banner 模块-->
+    <Banner />
+    <!--    核心价值模块-->
+    <CoreValue />
+    <!--    应用场景模块-->
+    <UseCases />
+    <!--    全球服务模块-->
+    <GlobalService />
+    <!--    客户反馈模块-->
+    <CustomerFeedback />
+    <!--    合作伙伴模块-->
+    <Partners />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Banner from './sections/Banner.vue'
+import CoreValue from './sections/CoreValue.vue'
+import UseCases from './sections/UseCases.vue'
+import GlobalService from './sections/GlobalService.vue'
+import CustomerFeedback from './sections/CustomerFeedback.vue'
+import Partners from './sections/Partners.vue'
+</script>
+
+<style scoped lang="less">
+.home-page {
+  // 可设置全局背景或间距，按需扩展
+}
+</style>

src/views/Home/sections/Banner.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="banner">
+    <div class="banner-bg">
+      <!-- 替换为实际背景图路径 -->
+      <img src="https://images.health.ufutx.com/202506/12/e6ea04327d2b5dbd9e4ae441431018df.png" alt="Banner背景" />
+    </div>
+    <!--    <div class="banner-content">-->
+    <!--      <h1 class="main-title">友福同享智能AI健康方案</h1>-->
+    <!--      <h2 class="sub-title">智慧科技创造未来</h2>-->
+    <!--      <button class="action-btn">用AI智能创造未来</button>-->
+    <!--      <p class="contact-phone">181-4852-2763</p>-->
+    <!--    </div>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.banner {
+  //width: 100%;
+  position: relative;
+  text-align: center;
+  color: #fff;
+
+  .banner-bg {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  .banner-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    max-width: 1200px;
+    padding: 0 20px;
+
+    .main-title {
+      font-size: 48px;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+
+    .sub-title {
+      font-size: 24px;
+      margin-bottom: 40px;
+    }
+
+    .action-btn {
+      padding: 12px 30px;
+      font-size: 18px;
+      background-color: #007bff;
+      color: #fff;
+      border: none;
+      border-radius: 25px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: #005eb8;
+      }
+    }
+
+    .contact-phone {
+      margin-top: 20px;
+      font-size: 16px;
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .banner-content {
+    .main-title {
+      font-size: 32px;
+    }
+    .sub-title {
+      font-size: 18px;
+    }
+    .action-btn {
+      font-size: 16px;
+      padding: 10px 24px;
+    }
+  }
+}
+</style>

src/views/Home/sections/CoreValue.vue

@@ -0,0 +1,50 @@
+<template>
+  <section class="core-value">
+    <div class="container">
+      <h3 class="section-title">核心价值</h3>
+      <p class="section-desc">友福同享AI健康解决方案应用场景</p>
+      <!-- 替换为实际图示路径 -->
+      <img
+        src="https://images.health.ufutx.com/202506/12/5bbcb1bc1347f58df6a38aecc41dbe30.png"
+        alt="核心价值图示"
+        class="diagram"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.core-value {
+  padding: 80px 0;
+  //background-color: #f9fcff;
+
+  .container {
+    //max-width: 1200px;
+    margin: 0 auto;
+    text-align: center;
+
+    .section-title {
+      font-size: 28px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: #333;
+    }
+
+    .section-desc {
+      font-size: 16px;
+      color: #666;
+      margin-bottom: 40px;
+    }
+
+    .diagram {
+      //max-width: 800px;
+      width: 1920px;
+      height: auto;
+    }
+  }
+}
+</style>

src/views/Home/sections/CustomerFeedback.vue

@@ -0,0 +1,188 @@
+<template>
+  <section class="feedback-section">
+    <h2 class="feedback-title">客户反馈</h2>
+    <div class="feedback-list">
+      <div v-for="(item, index) in feedbackList" :key="index" class="feedback-card">
+        <div class="avatar-container">
+          <img :src="item.avatar" alt="avatar" class="avatar" />
+        </div>
+        <div class="feedback-info">
+          <p class="username">{{ item.username }}</p>
+          <p class="comment">{{ item.comment }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// 模拟假数据（头像统一使用你提供的链接）
+const feedbackList = [
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '界面简约清晰，功能强大',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '预约操作简单方便，客户体验好评',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  }
+]
+</script>
+
+<style scoped lang="less">
+// 基础变量（可继承项目全局样式）
+@bg-color: #f9fbff;
+@card-bg: #ffffff;
+@radius: 12px;
+@padding: 16px;
+@gap: 24px;
+@avatar-size: 40px;
+@text-color: #333;
+@subtext-color: #999;
+@transition: all 0.3s ease;
+
+.feedback-section {
+  background-color: @bg-color;
+  padding: 48px @padding;
+  text-align: center;
+
+  .feedback-title {
+    font-size: 28px;
+    font-weight: 600;
+    color: @text-color;
+    margin-bottom: 32px;
+  }
+
+  .feedback-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: @gap;
+  }
+
+  .feedback-card {
+    display: flex;
+    align-items: center;
+    background-color: @card-bg;
+    border-radius: @radius;
+    padding: @padding;
+    width: 240px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    transition: @transition;
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    }
+
+    .avatar-container {
+      flex-shrink: 0;
+      margin-right: 12px;
+
+      .avatar {
+        width: @avatar-size;
+        height: @avatar-size;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+    }
+
+    .feedback-info {
+      text-align: left;
+
+      .username {
+        font-size: 16px;
+        font-weight: 500;
+        color: @text-color;
+        margin-bottom: 4px;
+      }
+
+      .comment {
+        font-size: 14px;
+        color: @subtext-color;
+        line-height: 1.4;
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .feedback-card {
+    width: 100%;
+    max-width: 320px;
+  }
+}
+</style>

src/views/Home/sections/GlobalService.vue

@@ -0,0 +1,50 @@
+<template>
+  <section class="global-service">
+    <div class="container">
+      <h3 class="section-title">我们全球服务覆盖范围</h3>
+      <p class="section-desc">覆盖国家/地区：6+ · 客户产业覆盖范围：15+</p>
+      <!-- 替换为实际地图路径 -->
+      <img
+        src="https://images.health.ufutx.com/202506/12/2acedc9535b108d6cd079b34bb01e78e.jpeg"
+        alt="世界地图"
+        class="world-map"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.global-service {
+  padding: 80px 0;
+  background-color: #fff;
+
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    text-align: center;
+
+    .section-title {
+      font-size: 28px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: #333;
+    }
+
+    .section-desc {
+      font-size: 16px;
+      color: #666;
+      margin-bottom: 40px;
+    }
+
+    .world-map {
+      max-width: 1000px;
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+</style>

src/views/Home/sections/Partners.vue

@@ -0,0 +1,124 @@
+<template>
+  <section class="partner-section">
+    <div class="partner-header">
+      <h2 class="partner-title">合作伙伴</h2>
+      <p class="partner-subtitle">正与众多客户一起创造更多价值</p>
+    </div>
+    <div class="partner-logos">
+      <div v-for="index in 21" :key="index" class="partner-logo-item">
+        <!--        <img :src="logo.src" :alt="logo.alt" class="partner-logo" />-->
+        <img
+          src="https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png"
+          alt="新浪健康"
+          class="partner-logo"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// 使用提供的图片链接作为所有合作伙伴Logo
+// const partnerLogos = [
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   }
+// ]
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.partner-section {
+  width: 100%;
+  padding: @space-xl @container-padding;
+  text-align: center;
+
+  .partner-header {
+    .mb(50px);
+
+    .partner-title {
+      font-size: @font-size-xxl;
+      font-weight: @font-weight-bold;
+      color: @text-color;
+      margin-bottom: @space-sm;
+    }
+
+    .partner-subtitle {
+      font-size: @font-size-md;
+      color: @text-color-secondary;
+      .mt(20px);
+    }
+  }
+
+  .partner-logos {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: @space-xl;
+    justify-items: center;
+    .px(160px);
+    .partner-logo-item {
+      width: 100%;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .partner-logo {
+        width: 230px;
+        //max-height: 60px;
+        object-fit: contain;
+        transition: transform 0.3s ease;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: @tablet-breakpoint) {
+  .partner-logos {
+    gap: @space-md;
+
+    .partner-logo-item {
+      height: 60px;
+    }
+
+    .partner-logo {
+      max-height: 40px;
+    }
+  }
+}
+</style>

src/views/Home/sections/UseCases.vue

@@ -0,0 +1,113 @@
+<template>
+  <section class="scene-section">
+    <h2 class="scene-title">友福同享AI健康解决方案应用场景</h2>
+    <div class="scene-list">
+      <div v-for="(item, index) in sceneList" :key="index" class="scene-item">
+        <img :src="item.icon" alt="场景图标" class="scene-icon" />
+        <p class="scene-name">{{ item.name }}</p>
+        <p class="scene-desc">{{ item.desc }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const sceneList = [
+  {
+    name: '地区政府/社区健康服务',
+    desc: '',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  },
+  {
+    name: '医院体检中心/健康管理机构',
+    desc: '',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  },
+  {
+    name: '企业员工健康管理',
+    desc: '降低企业医疗成本，提升员工健康与生产力。',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  },
+  {
+    name: '健康产业链供应商',
+    desc: '',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  },
+  {
+    name: '健康管理专业培训',
+    desc: '',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  }
+]
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.scene-section {
+  padding: @space-xl 0;
+  text-align: center;
+  background-color: @bg-color;
+
+  .scene-title {
+    font-size: @font-size-lg;
+    font-weight: @font-weight-bold;
+    color: @text-color;
+    margin-bottom: @space-xl;
+  }
+
+  .scene-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: @space-lg;
+    max-width: @container-width;
+    margin: 0 auto;
+  }
+
+  .scene-item {
+    width: 220px;
+    text-align: center;
+    display: flex;
+    height: 336px;
+    padding: 0px 16px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    flex: 1 0 0;
+    background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
+    transition: all 0.3s ease; // 基础过渡动画
+
+    // 悬停放大效果
+    &:hover {
+      transform: scale(1.1); // 放大5%
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); // 增强阴影
+    }
+    .scene-icon {
+      width: 150px;
+      margin-bottom: @space-md;
+    }
+
+    .scene-name {
+      font-size: @font-size-md;
+      font-weight: @font-weight-medium;
+      color: @text-color;
+      margin-bottom: @space-xs;
+    }
+
+    .scene-desc {
+      font-size: @font-size-sm;
+      color: @text-color-light;
+      line-height: 1.4;
+    }
+  }
+}
+
+@media (max-width: @tablet-breakpoint) {
+  .scene-item {
+    width: 100%;
+    max-width: 280px;
+  }
+}
+</style>

vite.config.ts

@@ -5,20 +5,38 @@ import path from 'path' // 引入 path 模块
 import viteImagemin from 'vite-plugin-imagemin' // 新插件
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
+// 引入 ElementPlus 相关解析器
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 import legacy from '@vitejs/plugin-legacy'
 export default defineConfig({
   plugins: [
     vue(),
+
     legacy({
       targets: ['ie >= 11'],
       additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
       modernPolyfills: true // 启用现代浏览器的 polyfill
     }),
     AutoImport({
-      imports: ['vue', 'vue-router'] // 自动导入 Vue、Vue Router API
+      imports: ['vue', 'vue-router'], // 自动导入 Vue、Vue Router API
+      // 自动导入 Vue 相关函数，以及 ElementPlus 的相关函数等
+      resolvers: [
+        ElementPlusResolver({
+          importStyle: 'sass', // 可选：按需导入样式
+          directives: true, // 导入指令
+          version: '2.3.6' // 版本号
+        })
+      ]
     }),
     Components({
+      // 自动导入 ElementPlus 的组件
+      resolvers: [
+        ElementPlusResolver({
+          importStyle: 'sass',
+          directives: true
+        })
+      ],
       dirs: ['src/components'] // 自动扫描组件目录
     }),
     viteImagemin({
@@ -42,6 +60,17 @@ export default defineConfig({
       }
     }
   },
+  css: {
+    preprocessorOptions: {
+      less: {
+        // 关键配置：自动注入 global.less
+        additionalData: `@import "@/styles/global.less";`,
+
+        // 可选：如果需要自定义 Less 选项
+        javascriptEnabled: true
+      }
+    }
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src') // 添加路径别名