feat: 20250612 首页、Navbar、Footer等组件
This commit is contained in:
parent
893e34bdcc
commit
4f5a36621f
4
components.d.ts
vendored
4
components.d.ts
vendored
@ -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']
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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',
|
||||
|
||||
38
src/App.vue
38
src/App.vue
@ -1,42 +1,14 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<!-- 导航栏 -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><router-link to="/">首页</router-link></li>
|
||||
<li><router-link to="/about">关于我们</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- 路由出口：渲染当前页面 -->
|
||||
<main>
|
||||
<router-view />
|
||||
</main>
|
||||
<!-- 路由出口：渲染 Layout 及子页面 -->
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// App 组件逻辑
|
||||
// 无需额外逻辑
|
||||
</script>
|
||||
|
||||
<style>
|
||||
nav ul {
|
||||
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 scoped lang="less">
|
||||
@import '@/styles/global.less';
|
||||
</style>
|
||||
|
||||
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
14
src/main.ts
14
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) => {
|
||||
|
||||
@ -1,40 +1,53 @@
|
||||
// src/router/routes.ts
|
||||
import type { RouteRecordRaw } from 'vue-router' // 添加type关键字
|
||||
import Home from '@/views/Home.vue'
|
||||
import About from '@/views/About.vue'
|
||||
import I18nDemo from '../views/I18nDemo.vue'
|
||||
|
||||
import Home from '@/views/Home/Home.vue'
|
||||
// import About from '@/views/About.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: 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 }
|
||||
component: Layout,
|
||||
children: [
|
||||
{ path: '', name: 'Home', component: Home },
|
||||
{ path: 'news', name: 'News', component: () => import('@/views/News.vue') },
|
||||
{ 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: 'ecosystem', name: 'Ecosystem', component: () => import('@/views/Ecosystem.vue') },
|
||||
{ path: 'about', name: 'About', component: () => import('@/views/About.vue') }
|
||||
]
|
||||
}
|
||||
// {
|
||||
// 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
|
||||
|
||||
@ -62,9 +62,9 @@ button:focus-visible {
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
/*max-width: 1280px;*/
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
/*padding: 2rem;*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
31
src/views/Home/Home.vue
Normal file
31
src/views/Home/Home.vue
Normal file
@ -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>
|
||||
95
src/views/Home/sections/Banner.vue
Normal file
95
src/views/Home/sections/Banner.vue
Normal file
@ -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>
|
||||
50
src/views/Home/sections/CoreValue.vue
Normal file
50
src/views/Home/sections/CoreValue.vue
Normal file
@ -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>
|
||||
188
src/views/Home/sections/CustomerFeedback.vue
Normal file
188
src/views/Home/sections/CustomerFeedback.vue
Normal file
@ -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>
|
||||
50
src/views/Home/sections/GlobalService.vue
Normal file
50
src/views/Home/sections/GlobalService.vue
Normal file
@ -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>
|
||||
124
src/views/Home/sections/Partners.vue
Normal file
124
src/views/Home/sections/Partners.vue
Normal file
@ -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>
|
||||
113
src/views/Home/sections/UseCases.vue
Normal file
113
src/views/Home/sections/UseCases.vue
Normal file
@ -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>
|
||||
@ -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') // 添加路径别名
|
||||
|
||||
Loading…
Reference in New Issue
Block a user