feat: 20250614 友福动态等页面与组件
This commit is contained in:
parent
4f5a36621f
commit
92f39550e1
@ -28,7 +28,19 @@ module.exports = {
|
||||
'vue/no-undef-components': [
|
||||
'error',
|
||||
{
|
||||
ignorePatterns: ['router-link', 'router-view']
|
||||
ignorePatterns: [
|
||||
'router-link',
|
||||
'router-view',
|
||||
'ElTabs',
|
||||
'ElTabPane',
|
||||
'ElButton',
|
||||
'ElPagination',
|
||||
// 添加其他使用的 Element Plus 组件
|
||||
'RouterLink',
|
||||
'RouterView'
|
||||
]
|
||||
// 允许的组件前缀（Element Plus 组件以 El 开头）
|
||||
// allowComponentPrefixes: ['El']
|
||||
}
|
||||
],
|
||||
// 针对非 Vue 文件禁用 Vue 规则
|
||||
|
||||
2
components.d.ts
vendored
2
components.d.ts
vendored
@ -8,6 +8,8 @@ export {}
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
Footer: typeof import('./src/components/Footer.vue')['default']
|
||||
|
||||
175
src/components/Footer.vue
Normal file
175
src/components/Footer.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="footer-container">
|
||||
<!-- 左侧联系信息 -->
|
||||
<div class="footer-contact">
|
||||
<p class="contact-title">联系我们</p>
|
||||
<p class="contact-phone">181-4852-2763</p>
|
||||
<p class="contact-email">合作邮箱：yftxtx@uftx2023.com</p>
|
||||
</div>
|
||||
|
||||
<!-- 右侧二维码 -->
|
||||
<div class="footer-qr">
|
||||
<div v-for="(item, index) in qrItems" :key="index" class="qr-item">
|
||||
<div class="qr-container">
|
||||
<img :src="item.src" :alt="item.alt" class="qr-image" />
|
||||
</div>
|
||||
<p class="qr-title">{{ item.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<div class="footer-bottom">
|
||||
<p>公司地址：深圳市南山区南山街道阳光科创中心B座33楼</p>
|
||||
<p>版权所有©友福同享(深圳)智能科技有限公司 粤ICP备12008876号</p>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 二维码数据
|
||||
const qrItems = [
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/12/cc651222ac2e5f63185dec1f31d176ae.png',
|
||||
alt: '友福同享二维码',
|
||||
title: '友福同享'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/12/cc651222ac2e5f63185dec1f31d176ae.png', // 示例地址，需替换为实际二维码
|
||||
alt: '福恋二维码',
|
||||
title: '福恋'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/12/cc651222ac2e5f63185dec1f31d176ae.png', // 示例地址，需替换为实际二维码
|
||||
alt: '友福公众号二维码',
|
||||
title: '友福公众号'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.footer {
|
||||
width: 100vw;
|
||||
background-color: #0b101b;
|
||||
color: #fff;
|
||||
//padding: @space-xl @container-padding;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
//width: @container-width;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
.mx(192px);
|
||||
.py(50px);
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
//padding-bottom: @space-lg;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
text-align: left;
|
||||
.contact-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 500;
|
||||
margin-bottom: @space-sm;
|
||||
color: @text-color-light;
|
||||
}
|
||||
.contact-phone {
|
||||
font-size: 50px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.contact-email {
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-qr {
|
||||
display: flex;
|
||||
gap: @space-lg;
|
||||
}
|
||||
|
||||
.qr-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
// 给父元素也加上过渡，让整体变化更连贯，避免子元素和父元素过渡不同步
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
.qr-container {
|
||||
display: inline-block;
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
// 更换更丝滑的曲线，cubic-bezier(0.4, 0, 0.2, 1) 是 Material Design 推荐的曲线，过渡更自然
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: bottom; // 底部固定
|
||||
|
||||
&:hover {
|
||||
padding: 12px;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
// 同样更换更适配的过渡曲线，让图片缩放和容器变化节奏一致
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qr-title {
|
||||
margin-top: @space-sm;
|
||||
font-size: 14px;
|
||||
color: @text-color-light;
|
||||
// 给标题也加上淡入淡出的透明度过渡，让整体交互更统一（可选，看需求）
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
&:hover {
|
||||
// hover 时稍微提升标题透明度，突出交互反馈（可选）
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
width: @container-width;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
color: @primary-light;
|
||||
.px(192px);
|
||||
.py(50px);
|
||||
p {
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
:last-child {
|
||||
.mt(20px);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.footer-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-contact {
|
||||
margin-bottom: @space-lg;
|
||||
}
|
||||
.footer-qr {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
src/components/Navbar.vue
Normal file
149
src/components/Navbar.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<header class="navbar">
|
||||
<div class="navbar-container">
|
||||
<!-- Logo -->
|
||||
<div class="navbar-logo">
|
||||
<img src="@/assets/images/logo.png" alt="友福同享Logo" />
|
||||
<!-- <span>友福同享</span>-->
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<nav class="navbar-menu">
|
||||
<div
|
||||
v-for="(item, index) in navItems"
|
||||
:key="index"
|
||||
class="menu-item"
|
||||
:class="{ active: isActive(item.path) }"
|
||||
@click="handleNavigate(item.path)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 语言切换 -->
|
||||
<div class="language-switch"><span>English</span> | <span>中文</span> | <span>繁體</span></div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
// import { computed } from 'vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 导航数据
|
||||
const navItems = [
|
||||
{ path: '/', label: '首页' },
|
||||
{ path: '/news', label: '友福动态' },
|
||||
{ path: '/network', label: 'AI健康' },
|
||||
{ path: '/dating', label: 'AI婚恋' },
|
||||
{ path: '/app', label: '友福同享APP' },
|
||||
{ path: '/ecosystem', label: '生态合作' },
|
||||
{ path: '/about', label: '关于我们' }
|
||||
]
|
||||
|
||||
// 跳转方法
|
||||
const handleNavigate = (path: string) => {
|
||||
console.log(path)
|
||||
router.push(path)
|
||||
}
|
||||
|
||||
// 判断是否为激活状态
|
||||
const isActive = (path: string) => {
|
||||
return router.currentRoute.value.path === path
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
// 导航栏容器
|
||||
.navbar {
|
||||
display: flex;
|
||||
width: 1920px;
|
||||
padding: 28px 100px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(25px);
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
}
|
||||
.navbar-logo {
|
||||
width: 160px;
|
||||
height: 29px;
|
||||
//position: absolute;
|
||||
//top: 0;
|
||||
//left: 0;
|
||||
}
|
||||
// 导航容器（居中）
|
||||
.navbar-container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
// 导航菜单
|
||||
.navbar-menu {
|
||||
margin-left: 260px;
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
|
||||
// 单个菜单项（关键动画容器）
|
||||
.menu-item {
|
||||
position: relative;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
// 下划线动画（核心）
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 4px;
|
||||
border-radius: 10px;
|
||||
background: @primary-color;
|
||||
transition: width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
}
|
||||
|
||||
// 激活态/ hover 态
|
||||
&.active,
|
||||
&:hover {
|
||||
font-weight: bold;
|
||||
color: @primary-color;
|
||||
&::after {
|
||||
width: 100%; // 下划线展开
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 语言切换（可选动画）
|
||||
.language-switch {
|
||||
color: #666;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 1200px) {
|
||||
.navbar-container {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
src/layout/Layout.vue
Normal file
33
src/layout/Layout.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<!-- 导航栏 -->
|
||||
<Navbar />
|
||||
|
||||
<!-- 页面内容插槽（子页面会填充这里） -->
|
||||
<!-- <main class="layout-main">-->
|
||||
<!-- <slot></slot>-->
|
||||
<!-- </main>-->
|
||||
|
||||
<router-view></router-view>
|
||||
<!-- 页脚 -->
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Navbar from '@/components/Navbar.vue'
|
||||
import Footer from '@/components/Footer.vue'
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.layout-main {
|
||||
padding: 100px 0 60px; /* 导航栏80px + 20px间距，页脚60px */
|
||||
//width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,12 @@
|
||||
// src/router/routes.ts
|
||||
import type { RouteRecordRaw } from 'vue-router' // 添加type关键字
|
||||
import Home from '@/views/Home/Home.vue'
|
||||
import News from '@/views/News/News.vue'
|
||||
import Network from '@/views/Network/Network.vue'
|
||||
import Dating from '@/views/Dating/Dating.vue'
|
||||
import App from '@/views/App/App.vue'
|
||||
import Ecosystem from '@/views/Ecosystem/Ecosystem.vue'
|
||||
import About from '@/views/About/About.vue'
|
||||
// import About from '@/views/About.vue'
|
||||
// import I18nDemo from '../views/I18nDemo.vue'
|
||||
import Layout from '@/layout/Layout.vue'
|
||||
@ -10,12 +16,12 @@ const routes: RouteRecordRaw[] = [
|
||||
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: 'news', name: 'News', component: News },
|
||||
{ path: 'network', name: 'Network', component: Network },
|
||||
{ path: 'dating', name: 'Dating', component: Dating },
|
||||
{ path: 'app', name: 'App', component: App },
|
||||
{ path: 'ecosystem', name: 'Ecosystem', component: Ecosystem },
|
||||
{ path: 'about', name: 'About', component: About }
|
||||
]
|
||||
}
|
||||
// {
|
||||
|
||||
263
src/styles/global.less
Normal file
263
src/styles/global.less
Normal file
@ -0,0 +1,263 @@
|
||||
// ==================== 1. 颜色变量 ====================
|
||||
@primary-color: #313fa8; // 主色调（蓝色）
|
||||
@primary-light: #748EA6; // 主色浅色调
|
||||
@success-color: #67c23a; // 成功色（绿色）
|
||||
@warning-color: #e6a23c; // 警告色（橙色）
|
||||
@danger-color: #f56c6c; // 危险色（红色）
|
||||
@info-color: #909399; // 信息色（灰色）
|
||||
|
||||
@primary-dark: #1060FF; // 主色深色调（用于按钮激活态、边框）
|
||||
@primary-light-2: #a3b3c6; // 主色超浅色调（用于背景渐变）
|
||||
|
||||
// 辅助色（扩展功能模块色彩）
|
||||
@secondary-purple: #7e57c2; // 紫色（用于功能标签、辅助按钮）
|
||||
@secondary-cyan: #00acc1; // 青色（用于数据可视化、进度条）
|
||||
@secondary-yellow: #ffb300; // 黄色（用于提示、警告轻量化场景）
|
||||
@secondary-pink: #ec407a; // 粉红色（用于情感化功能、互动元素）
|
||||
|
||||
// 中性色阶（扩展文本/背景层次）
|
||||
@neutral-100: #f5f7fa; // 超浅灰（背景色）
|
||||
@neutral-200: #e4e7ed; // 浅灰（边框、分隔线）
|
||||
@neutral-300: #c0c4cc; // 中灰（次要文本、禁用状态）
|
||||
@neutral-400: #909399; // 深灰（主要文本、非激活状态）
|
||||
@neutral-900: #1e2328; // 近黑色（标题、强调文本）
|
||||
|
||||
// 状态色（扩展交互状态）
|
||||
@status-loading: #909399; // 加载中（骨架屏、加载指示器）
|
||||
@status-disabled: #c0c4cc; // 禁用态（按钮、输入框）
|
||||
@status-pending: #e6a23c; // 待处理（流程状态、任务标签）
|
||||
@status-urgent: #ff4d4f; // 紧急（通知、告警标签）
|
||||
|
||||
@text-color: #0E0E0E; // 主文本色
|
||||
@text-color-secondary: #66676C; // 次要文本色
|
||||
@text-color-light: #748EA6; // 浅色文本
|
||||
@bg-color: #fff; // 背景色
|
||||
@bg-color-light: #f5f7fa; // 浅背景色
|
||||
@border-color: #dcdfe6; // 边框色
|
||||
|
||||
|
||||
// ==================== 2. 字体定义 ====================
|
||||
@font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||||
@font-size-xs: 12px; // 超小字体
|
||||
@font-size-sm: 14px; // 小字体
|
||||
@font-size-md: 16px; // 中等字体
|
||||
@font-size-lg: 18px; // 大字体
|
||||
@font-size-xl: 24px; // 超大字体
|
||||
@font-size-xxl: 32px; // 特大字体
|
||||
|
||||
@font-weight-normal: 400;
|
||||
@font-weight-medium: 500;
|
||||
@font-weight-bold: 700;
|
||||
|
||||
|
||||
// ==================== 3. 间距变量 ====================
|
||||
@space-xs: 4px; // 超小间距
|
||||
@space-sm: 8px; // 小间距
|
||||
@space-md: 16px; // 中等间距
|
||||
@space-lg: 24px; // 大间距
|
||||
@space-xl: 32px; // 超大间距
|
||||
@space-xxl: 48px; // 特大间距
|
||||
|
||||
@border-radius-sm: 4px; // 小圆角
|
||||
@border-radius-md: 8px; // 中等圆角
|
||||
@border-radius-lg: 12px; // 大圆角
|
||||
@border-radius-full: 50%; // 圆形
|
||||
|
||||
|
||||
// ==================== 4. 容器宽度 ====================
|
||||
@container-width: 1200px; // 页面最大宽度
|
||||
@container-padding: 20px; // 容器内边距
|
||||
|
||||
|
||||
// ==================== 5. 重置样式 ====================
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-family;
|
||||
font-size: @font-size-md;
|
||||
line-height: 1.5;
|
||||
color: @text-color;
|
||||
background-color: @bg-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @primary-color;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: @primary-light;
|
||||
//text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: @font-weight-medium;
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
|
||||
|
||||
// ==================== 6. 工具类 ====================
|
||||
// 清除浮动
|
||||
.clearfix() {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
// global.less 或 App.vue 全局样式
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
// 明确设置基础字体大小，建议用相对单位（如 rem 适配）
|
||||
//font-size: 14px;
|
||||
font-family: "Microsoft YaHei", sans-serif; // 统一字体
|
||||
}
|
||||
// Flex 布局
|
||||
.flex() {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-column() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-row() {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-center() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-between() {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 文本工具类
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// 间距工具类
|
||||
.mt(@value) { margin-top: @value; }
|
||||
.mb(@value) { margin-bottom: @value; }
|
||||
.ml(@value) { margin-left: @value; }
|
||||
.mr(@value) { margin-right: @value; }
|
||||
.mx(@value) { margin-left: @value; margin-right: @value; }
|
||||
.my(@value) { margin-top: @value; margin-bottom: @value; }
|
||||
.pa(@value) { padding: @value; }
|
||||
.pt(@value) { padding-top: @value; }
|
||||
.pb(@value) { padding-bottom: @value; }
|
||||
.pl(@value) { padding-left: @value; }
|
||||
.pr(@value) { padding-right: @value; }
|
||||
.px(@value) { padding-left: @value; padding-right: @value; }
|
||||
.py(@value) { padding-top: @value; padding-bottom: @value; }
|
||||
|
||||
// 响应式工具类（示例，可根据需求扩展）
|
||||
@mobile-breakpoint: 768px;
|
||||
@tablet-breakpoint: 1024px;
|
||||
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @tablet-breakpoint) {
|
||||
.tablet-show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
// ==================== 6. 工具类 扩展 ====================
|
||||
// Flex 布局补充
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
|
||||
// 垂直对齐
|
||||
.align-top { align-items: flex-start; }
|
||||
.align-middle { align-items: center; }
|
||||
.align-bottom { align-items: flex-end; }
|
||||
|
||||
// 文本工具类
|
||||
.text-bold { font-weight: @font-weight-bold; }
|
||||
.text-muted { color: @text-color-light; }
|
||||
|
||||
// 响应式工具类
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
.mobile-hide { display: none !important; }
|
||||
.mobile-show { display: block !important; }
|
||||
}
|
||||
@media (min-width: @tablet-breakpoint) {
|
||||
.desktop-only { display: block !important; }
|
||||
}
|
||||
|
||||
// ==================== 7. 阴影系统 ====================
|
||||
@shadow-base: 0 2px 8px rgba(0,0,0,0.03);
|
||||
@shadow-hover: 0 4px 16px rgba(0,0,0,0.08);
|
||||
|
||||
// 工具类
|
||||
.shadow { box-shadow: @shadow-base; }
|
||||
.shadow-hover {
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
box-shadow: @shadow-hover;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 8. 交互动效 ====================
|
||||
// 交互动效变量
|
||||
@transition: all 0.3s ease; // 基础过渡动画
|
||||
// 基础过渡
|
||||
.transition-base() {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
// 卡片悬停效果
|
||||
.card-hover() {
|
||||
.transition-base();
|
||||
&:hover {
|
||||
box-shadow: @shadow-hover;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="about-page">
|
||||
<h1>关于我们</h1>
|
||||
<p>我们是一家专注于极简设计的科技公司。</p>
|
||||
<router-link to="/">返回首页</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 关于页逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.about-page {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
31
src/views/About/About.vue
Normal file
31
src/views/About/About.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>
|
||||
153
src/views/About/sections/Banner.vue
Normal file
153
src/views/About/sections/Banner.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<section class="banner">
|
||||
<div class="banner-bg">
|
||||
<!-- 替换为实际背景图路径 -->
|
||||
<img src="https://images.health.ufutx.com/202506/13/f976d275bb04340765102ae4873e41c1.png" alt="Banner背景" />
|
||||
</div>
|
||||
<!-- <div class="news-panel">-->
|
||||
<!-- <div-->
|
||||
<!-- v-for="(item, index) in newsList"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- class="news-item"-->
|
||||
<!-- :class="{ active: activeIndex === index }"-->
|
||||
<!-- @mouseenter="activeIndex = index"-->
|
||||
<!-- @mouseleave="activeIndex = null"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="icon">-->
|
||||
<!-- <img :src="activeIndex === index ? item.hoverIcon : item.icon" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <span class="text">{{ item.title }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import { ref } from 'vue'
|
||||
//
|
||||
// const activeIndex = ref<number | null>(null)
|
||||
//
|
||||
// const newsList = [
|
||||
// {
|
||||
// title: '新闻！热门健康方案服务',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻专访！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '专访新闻！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
||||
// }
|
||||
// ]
|
||||
// 暂无逻辑，纯展示
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.news-panel {
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-md;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: @font-size-md;
|
||||
color: #ffffff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .text,
|
||||
&.active .text {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&:hover .icon,
|
||||
&.active .icon {
|
||||
background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
|
||||
transform: scale(1.15); // 图标轻微放大
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@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>
|
||||
31
src/views/App/App.vue
Normal file
31
src/views/App/App.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>
|
||||
153
src/views/App/sections/Banner.vue
Normal file
153
src/views/App/sections/Banner.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<section class="banner">
|
||||
<div class="banner-bg">
|
||||
<!-- 替换为实际背景图路径 -->
|
||||
<img src="https://images.health.ufutx.com/202506/13/19ee6e89c397511fef5ba05d9798cc76.png" alt="Banner背景" />
|
||||
</div>
|
||||
<!-- <div class="news-panel">-->
|
||||
<!-- <div-->
|
||||
<!-- v-for="(item, index) in newsList"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- class="news-item"-->
|
||||
<!-- :class="{ active: activeIndex === index }"-->
|
||||
<!-- @mouseenter="activeIndex = index"-->
|
||||
<!-- @mouseleave="activeIndex = null"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="icon">-->
|
||||
<!-- <img :src="activeIndex === index ? item.hoverIcon : item.icon" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <span class="text">{{ item.title }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import { ref } from 'vue'
|
||||
|
||||
// const activeIndex = ref<number | null>(null)
|
||||
//
|
||||
// const newsList = [
|
||||
// {
|
||||
// title: '新闻！热门健康方案服务',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻专访！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '专访新闻！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
||||
// }
|
||||
// ]
|
||||
// 暂无逻辑，纯展示
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.news-panel {
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-md;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: @font-size-md;
|
||||
color: #ffffff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .text,
|
||||
&.active .text {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&:hover .icon,
|
||||
&.active .icon {
|
||||
background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
|
||||
transform: scale(1.15); // 图标轻微放大
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@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>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div class="contact-page">
|
||||
<h1>联系我们</h1>
|
||||
<p>联系方式...</p>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
31
src/views/Dating/Dating.vue
Normal file
31
src/views/Dating/Dating.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>
|
||||
153
src/views/Dating/sections/Banner.vue
Normal file
153
src/views/Dating/sections/Banner.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<section class="banner">
|
||||
<div class="banner-bg">
|
||||
<!-- 替换为实际背景图路径 -->
|
||||
<img src="https://images.health.ufutx.com/202506/13/100bcb7820a3cac2f8de6f50d0404460.png" alt="Banner背景" />
|
||||
</div>
|
||||
<!-- <div class="news-panel">-->
|
||||
<!-- <div-->
|
||||
<!-- v-for="(item, index) in newsList"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- class="news-item"-->
|
||||
<!-- :class="{ active: activeIndex === index }"-->
|
||||
<!-- @mouseenter="activeIndex = index"-->
|
||||
<!-- @mouseleave="activeIndex = null"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="icon">-->
|
||||
<!-- <img :src="activeIndex === index ? item.hoverIcon : item.icon" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <span class="text">{{ item.title }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import { ref } from 'vue'
|
||||
|
||||
// const activeIndex = ref<number | null>(null)
|
||||
//
|
||||
// const newsList = [
|
||||
// {
|
||||
// title: '新闻！热门健康方案服务',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻专访！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '专访新闻！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
||||
// }
|
||||
// ]
|
||||
// 暂无逻辑，纯展示
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.news-panel {
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-md;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: @font-size-md;
|
||||
color: #ffffff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .text,
|
||||
&.active .text {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&:hover .icon,
|
||||
&.active .icon {
|
||||
background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
|
||||
transform: scale(1.15); // 图标轻微放大
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@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>
|
||||
31
src/views/Ecosystem/Ecosystem.vue
Normal file
31
src/views/Ecosystem/Ecosystem.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>
|
||||
153
src/views/Ecosystem/sections/Banner.vue
Normal file
153
src/views/Ecosystem/sections/Banner.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<section class="banner">
|
||||
<div class="banner-bg">
|
||||
<!-- 替换为实际背景图路径 -->
|
||||
<img src="https://images.health.ufutx.com/202506/13/7c87ebff15ce960d0e58473f401fa91b.png" alt="Banner背景" />
|
||||
</div>
|
||||
<!-- <div class="news-panel">-->
|
||||
<!-- <div-->
|
||||
<!-- v-for="(item, index) in newsList"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- class="news-item"-->
|
||||
<!-- :class="{ active: activeIndex === index }"-->
|
||||
<!-- @mouseenter="activeIndex = index"-->
|
||||
<!-- @mouseleave="activeIndex = null"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="icon">-->
|
||||
<!-- <img :src="activeIndex === index ? item.hoverIcon : item.icon" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <span class="text">{{ item.title }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import { ref } from 'vue'
|
||||
//
|
||||
// const activeIndex = ref<number | null>(null)
|
||||
//
|
||||
// const newsList = [
|
||||
// {
|
||||
// title: '新闻！热门健康方案服务',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻专访！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
// },
|
||||
// {
|
||||
// title: '专访新闻！健康方案',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
||||
// },
|
||||
// {
|
||||
// title: '新闻！健康方案专访频道',
|
||||
// icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
||||
// hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
||||
// }
|
||||
// ]
|
||||
// 暂无逻辑，纯展示
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.news-panel {
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-md;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: @font-size-md;
|
||||
color: #ffffff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .text,
|
||||
&.active .text {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&:hover .icon,
|
||||
&.active .icon {
|
||||
background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
|
||||
transform: scale(1.15); // 图标轻微放大
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@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>
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<h1>欢迎来到极简官网</h1>
|
||||
<p>这是首页内容，展示公司核心信息。</p>
|
||||
<router-link to="/about">了解更多关于我们</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 首页逻辑（可添加数据请求等）
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -4,6 +4,21 @@
|
||||
<!-- 替换为实际背景图路径 -->
|
||||
<img src="https://images.health.ufutx.com/202506/12/e6ea04327d2b5dbd9e4ae441431018df.png" alt="Banner背景" />
|
||||
</div>
|
||||
<div class="news-panel">
|
||||
<div
|
||||
v-for="(item, index) in newsList"
|
||||
:key="index"
|
||||
class="news-item"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mouseleave="activeIndex = null"
|
||||
>
|
||||
<div class="icon">
|
||||
<img :src="activeIndex === index ? item.hoverIcon : item.icon" />
|
||||
</div>
|
||||
<span class="text">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="banner-content">-->
|
||||
<!-- <h1 class="main-title">友福同享智能AI健康方案</h1>-->
|
||||
<!-- <h2 class="sub-title">智慧科技创造未来</h2>-->
|
||||
@ -14,6 +29,37 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeIndex = ref<number | null>(null)
|
||||
|
||||
const newsList = [
|
||||
{
|
||||
title: '新闻！热门健康方案服务',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
||||
},
|
||||
{
|
||||
title: '新闻专访！健康方案',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
},
|
||||
{
|
||||
title: '新闻！健康方案专访频道',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
},
|
||||
{
|
||||
title: '专访新闻！健康方案',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
||||
},
|
||||
{
|
||||
title: '新闻！健康方案专访频道',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
||||
}
|
||||
]
|
||||
// 暂无逻辑，纯展示
|
||||
</script>
|
||||
|
||||
@ -35,44 +81,62 @@
|
||||
}
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
.news-panel {
|
||||
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;
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-md;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
margin-bottom: 12px;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #005eb8;
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-phone {
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
.text {
|
||||
font-size: @font-size-md;
|
||||
color: #ffffff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .text,
|
||||
&.active .text {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&:hover .icon,
|
||||
&.active .icon {
|
||||
background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
|
||||
transform: scale(1.15); // 图标轻微放大
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,25 +19,25 @@
|
||||
|
||||
<style scoped lang="less">
|
||||
.core-value {
|
||||
padding: 80px 0;
|
||||
//background-color: #f9fcff;
|
||||
|
||||
//padding: 80px 0;
|
||||
.pt(100px);
|
||||
//background-color: red;
|
||||
.container {
|
||||
//max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 40px;
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.diagram {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section class="feedback-section">
|
||||
<h2 class="feedback-title">客户反馈</h2>
|
||||
<div class="feedback-title">客户反馈</div>
|
||||
<div class="feedback-list">
|
||||
<div v-for="(item, index) in feedbackList" :key="index" class="feedback-card">
|
||||
<div class="avatar-container">
|
||||
@ -107,22 +107,23 @@ const feedbackList = [
|
||||
@card-bg: #ffffff;
|
||||
@radius: 12px;
|
||||
@padding: 16px;
|
||||
@gap: 24px;
|
||||
@avatar-size: 40px;
|
||||
@gap: 50px;
|
||||
@avatar-size: 60px;
|
||||
@text-color: #333;
|
||||
@subtext-color: #999;
|
||||
@transition: all 0.3s ease;
|
||||
|
||||
.feedback-section {
|
||||
background-color: @bg-color;
|
||||
padding: 48px @padding;
|
||||
.px(100px);
|
||||
text-align: center;
|
||||
|
||||
.pb(100px);
|
||||
.feedback-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: @text-color;
|
||||
margin-bottom: 32px;
|
||||
.pb(60px);
|
||||
.pt(100px);
|
||||
}
|
||||
|
||||
.feedback-list {
|
||||
@ -135,11 +136,9 @@ const feedbackList = [
|
||||
.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);
|
||||
border-radius: 16px;
|
||||
background: var(--ffffff, #fff);
|
||||
transition: @transition;
|
||||
|
||||
&:hover {
|
||||
@ -163,7 +162,7 @@ const feedbackList = [
|
||||
text-align: left;
|
||||
|
||||
.username {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: @text-color;
|
||||
margin-bottom: 4px;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="global-service">
|
||||
<div class="container">
|
||||
<h3 class="section-title">我们全球服务覆盖范围</h3>
|
||||
<p class="section-desc">覆盖国家/地区：6+ · 客户产业覆盖范围：15+</p>
|
||||
<p class="section-desc">覆盖国家/地区：65+ · 客户产业覆盖范围：18+</p>
|
||||
<!-- 替换为实际地图路径 -->
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/12/2acedc9535b108d6cd079b34bb01e78e.jpeg"
|
||||
@ -19,31 +19,32 @@
|
||||
|
||||
<style scoped lang="less">
|
||||
.global-service {
|
||||
padding: 80px 0;
|
||||
//padding: 80px 0;
|
||||
background-color: #fff;
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.px(192px);
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
//background: red;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
.mt(100px);
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.world-map {
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
.mb(70px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,12 +60,10 @@
|
||||
|
||||
.partner-section {
|
||||
width: 100%;
|
||||
padding: @space-xl @container-padding;
|
||||
text-align: center;
|
||||
|
||||
.partner-header {
|
||||
.mb(50px);
|
||||
|
||||
.my(50px);
|
||||
.partner-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: @font-weight-bold;
|
||||
@ -74,7 +72,7 @@
|
||||
}
|
||||
|
||||
.partner-subtitle {
|
||||
font-size: @font-size-md;
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
.mt(20px);
|
||||
}
|
||||
@ -86,6 +84,7 @@
|
||||
gap: @space-xl;
|
||||
justify-items: center;
|
||||
.px(160px);
|
||||
.pb(50px);
|
||||
.partner-logo-item {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
|
||||
@ -3,11 +3,13 @@
|
||||
<h2 class="scene-title">友福同享AI健康解决方案应用场景</h2>
|
||||
<div class="scene-list">
|
||||
<div v-for="(item, index) in sceneList" :key="index" class="scene-item">
|
||||
<div class="scene-inner">
|
||||
<img :src="item.icon" alt="场景图标" class="scene-icon" />
|
||||
<p class="scene-name">{{ item.name }}</p>
|
||||
<p class="scene-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -15,12 +17,12 @@
|
||||
const sceneList = [
|
||||
{
|
||||
name: '地区政府/社区健康服务',
|
||||
desc: '',
|
||||
desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
|
||||
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
|
||||
},
|
||||
{
|
||||
name: '医院体检中心/健康管理机构',
|
||||
desc: '',
|
||||
desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
|
||||
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
|
||||
},
|
||||
{
|
||||
@ -30,12 +32,12 @@ const sceneList = [
|
||||
},
|
||||
{
|
||||
name: '健康产业链供应商',
|
||||
desc: '',
|
||||
desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
|
||||
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
|
||||
},
|
||||
{
|
||||
name: '健康管理专业培训',
|
||||
desc: '',
|
||||
desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
|
||||
icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
|
||||
}
|
||||
]
|
||||
@ -45,15 +47,15 @@ const sceneList = [
|
||||
@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-size: @font-size-xxl;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @text-color;
|
||||
margin-bottom: @space-xl;
|
||||
.pb(60px);
|
||||
.pt(100px);
|
||||
}
|
||||
|
||||
.scene-list {
|
||||
@ -61,45 +63,74 @@ const sceneList = [
|
||||
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;
|
||||
width: 284px;
|
||||
height: 336px;
|
||||
perspective: 1000px; // 3D透视效果
|
||||
cursor: pointer;
|
||||
|
||||
.scene-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 16px;
|
||||
display: flex;
|
||||
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; // 基础过渡动画
|
||||
border-radius: @border-radius-md;
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); // 平滑过渡
|
||||
|
||||
// 悬停放大效果
|
||||
&: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;
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.scene-name {
|
||||
font-size: @font-size-md;
|
||||
font-weight: @font-weight-medium;
|
||||
color: @text-color;
|
||||
margin-bottom: @space-xs;
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.scene-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
line-height: 1.4;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
margin-top: -10px; // 初始位置向上偏移
|
||||
}
|
||||
}
|
||||
|
||||
// 悬停状态
|
||||
&:hover .scene-inner {
|
||||
transform: translateY(-10px) scale(1.05);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(180deg, #fff 0%, #e6f0ff 100%);
|
||||
}
|
||||
|
||||
&:hover .scene-icon {
|
||||
transform: scale(1.1);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&:hover .scene-name {
|
||||
color: @primary-color;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
|
||||
&:hover .scene-desc {
|
||||
max-height: 100px;
|
||||
opacity: 1;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
31
src/views/Network/Network.vue
Normal file
31
src/views/Network/Network.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>
|
||||
159
src/views/Network/sections/Banner.vue
Normal file
159
src/views/Network/sections/Banner.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<section class="banner">
|
||||
<div class="banner-bg">
|
||||
<!-- 替换为实际背景图路径 -->
|
||||
<img src="https://images.health.ufutx.com/202506/13/c963e7b0e605f16d139fb88789f3a452.png" alt="Banner背景" />
|
||||
</div>
|
||||
<div class="news-panel">
|
||||
<div
|
||||
v-for="(item, index) in newsList"
|
||||
:key="index"
|
||||
class="news-item"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mouseleave="activeIndex = null"
|
||||
>
|
||||
<div class="icon">
|
||||
<img :src="activeIndex === index ? item.hoverIcon : item.icon" />
|
||||
</div>
|
||||
<span class="text">{{ item.title }}</span>
|
||||
</div>
|
||||
</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">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeIndex = ref<number | null>(null)
|
||||
|
||||
const newsList = [
|
||||
{
|
||||
title: '新闻！热门健康方案服务',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
||||
},
|
||||
{
|
||||
title: '新闻专访！健康方案',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
},
|
||||
{
|
||||
title: '新闻！健康方案专访频道',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
},
|
||||
{
|
||||
title: '专访新闻！健康方案',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
||||
},
|
||||
{
|
||||
title: '新闻！健康方案专访频道',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
||||
}
|
||||
]
|
||||
// 暂无逻辑，纯展示
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.news-panel {
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-md;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: @font-size-md;
|
||||
color: #ffffff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .text,
|
||||
&.active .text {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&:hover .icon,
|
||||
&.active .icon {
|
||||
background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
|
||||
transform: scale(1.15); // 图标轻微放大
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@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/Network/sections/CoreValue.vue
Normal file
50
src/views/Network/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;
|
||||
.pt(100px);
|
||||
//background-color: red;
|
||||
.container {
|
||||
//max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.section-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.diagram {
|
||||
//max-width: 800px;
|
||||
width: 1920px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
src/views/Network/sections/CustomerFeedback.vue
Normal file
187
src/views/Network/sections/CustomerFeedback.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<section class="feedback-section">
|
||||
<div class="feedback-title">客户反馈</div>
|
||||
<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: 50px;
|
||||
@avatar-size: 60px;
|
||||
@text-color: #333;
|
||||
@subtext-color: #999;
|
||||
@transition: all 0.3s ease;
|
||||
|
||||
.feedback-section {
|
||||
background-color: @bg-color;
|
||||
.px(100px);
|
||||
text-align: center;
|
||||
.pb(100px);
|
||||
.feedback-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: @text-color;
|
||||
.pb(60px);
|
||||
.pt(100px);
|
||||
}
|
||||
|
||||
.feedback-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: @gap;
|
||||
}
|
||||
|
||||
.feedback-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: @padding;
|
||||
border-radius: 16px;
|
||||
background: var(--ffffff, #fff);
|
||||
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: 18px;
|
||||
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>
|
||||
51
src/views/Network/sections/GlobalService.vue
Normal file
51
src/views/Network/sections/GlobalService.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<section class="global-service">
|
||||
<div class="container">
|
||||
<h3 class="section-title">我们全球服务覆盖范围</h3>
|
||||
<p class="section-desc">覆盖国家/地区：65+ · 客户产业覆盖范围：18+</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 {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
.px(192px);
|
||||
.section-title {
|
||||
//background: red;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
.mt(100px);
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.world-map {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
.mb(70px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
src/views/Network/sections/Partners.vue
Normal file
123
src/views/Network/sections/Partners.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<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%;
|
||||
text-align: center;
|
||||
|
||||
.partner-header {
|
||||
.my(50px);
|
||||
.partner-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @text-color;
|
||||
margin-bottom: @space-sm;
|
||||
}
|
||||
|
||||
.partner-subtitle {
|
||||
font-size: 20px;
|
||||
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);
|
||||
.pb(50px);
|
||||
.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>
|
||||
144
src/views/Network/sections/UseCases.vue
Normal file
144
src/views/Network/sections/UseCases.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<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">
|
||||
<div class="scene-inner">
|
||||
<img :src="item.icon" alt="场景图标" class="scene-icon" />
|
||||
<p class="scene-name">{{ item.name }}</p>
|
||||
<p class="scene-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</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 {
|
||||
text-align: center;
|
||||
background-color: @bg-color;
|
||||
|
||||
.scene-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @text-color;
|
||||
.pb(60px);
|
||||
.pt(100px);
|
||||
}
|
||||
|
||||
.scene-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: @space-lg;
|
||||
}
|
||||
|
||||
.scene-item {
|
||||
width: 284px;
|
||||
height: 336px;
|
||||
perspective: 1000px; // 3D透视效果
|
||||
cursor: pointer;
|
||||
|
||||
.scene-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
|
||||
border-radius: @border-radius-md;
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); // 平滑过渡
|
||||
|
||||
// 初始状态
|
||||
.scene-icon {
|
||||
width: 150px;
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.scene-name {
|
||||
font-size: @font-size-md;
|
||||
font-weight: @font-weight-medium;
|
||||
color: @text-color;
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.scene-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
line-height: 1.4;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
margin-top: -10px; // 初始位置向上偏移
|
||||
}
|
||||
}
|
||||
|
||||
// 悬停状态
|
||||
&:hover .scene-inner {
|
||||
transform: translateY(-10px) scale(1.05);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(180deg, #fff 0%, #e6f0ff 100%);
|
||||
}
|
||||
|
||||
&:hover .scene-icon {
|
||||
transform: scale(1.1);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&:hover .scene-name {
|
||||
color: @primary-color;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
|
||||
&:hover .scene-desc {
|
||||
max-height: 100px;
|
||||
opacity: 1;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.scene-item {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
459
src/views/News/News.vue
Normal file
459
src/views/News/News.vue
Normal file
@ -0,0 +1,459 @@
|
||||
<template>
|
||||
<!-- 整体布局：导航 + Banner + 内容 + 页脚 -->
|
||||
<div class="page-container">
|
||||
<!-- 已有Banner组件（保持设计中的顶部视觉） -->
|
||||
<Banner />
|
||||
|
||||
<!-- 核心内容区 -->
|
||||
<div class="news-content">
|
||||
<!-- 标签切换（友福动态 / 媒体报道） -->
|
||||
<el-tabs v-model="activeTab" class="news-tabs" @tab-click="resetPage">
|
||||
<el-tab-pane label="友福动态" name="dynamic"></el-tab-pane>
|
||||
<el-tab-pane label="媒体报道" name="report"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 新闻列表 -->
|
||||
<div class="news-list">
|
||||
<div v-for="(item, idx) in filteredNews" :key="idx" class="news-item">
|
||||
<img :src="item.cover" alt="新闻封面" class="news-cover" />
|
||||
<div class="news-info">
|
||||
<h3 class="news-title">{{ item.title }}</h3>
|
||||
<h3 class="news-label">友福新闻</h3>
|
||||
<div class="news-wrap">
|
||||
<el-button type="primary" class="view-btn" plain color="#1060FF"> 查看详情</el-button>
|
||||
<div class="news-date">
|
||||
<img
|
||||
class="icon"
|
||||
src="https://images.health.ufutx.com/202506/13/c5e3552a870fd254610290bbabce5e30.png"
|
||||
/>
|
||||
<p>{{ item.date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页（Element Plus 分页组件） -->
|
||||
<div class="pagination-wrap">
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalCount"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
// 引入已有组件（需确保路径正确）
|
||||
import Banner from '@/views/News/sections/Banner.vue'
|
||||
|
||||
// 模拟新闻数据（根据设计图，友福动态和媒体报道的差异）
|
||||
const dynamicNews = [
|
||||
{
|
||||
cover: 'https://images.health.ufutx.com/202506/13/b604685780bdb4ea4906e751b14590ec.png', // 替换为实际封面图
|
||||
title: '体管理年：政策驱动，AI+全利管理重塑健康服务体系...',
|
||||
date: '2025-06-02',
|
||||
type: 'dynamic'
|
||||
},
|
||||
{
|
||||
cover: 'https://images.health.ufutx.com/202506/13/73e74b753e7fc7c8b00cecc0535a6a91.png',
|
||||
title: '权威媒体专访：友福同享的创新健康生态',
|
||||
date: '2025-05-30',
|
||||
type: 'report'
|
||||
}
|
||||
]
|
||||
const reportNews = [
|
||||
{
|
||||
cover: 'https://images.health.ufutx.com/202506/13/73e74b753e7fc7c8b00cecc0535a6a91.png',
|
||||
title: '媒体报道：友福同享如何用AI颠覆健康管理？',
|
||||
date: '2025-06-01',
|
||||
type: 'report'
|
||||
}
|
||||
]
|
||||
|
||||
// 循环添加数据到两个数组
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const newsItem = {
|
||||
cover: 'https://images.health.ufutx.com/202506/13/b604685780bdb4ea4906e751b14590ec.png',
|
||||
title: `友福动态：健康管理服务升级发布会圆满成功 ${i + 1}`,
|
||||
date: `2025-05-${28 - i}`,
|
||||
type: 'dynamic'
|
||||
}
|
||||
|
||||
// 同时添加到两个数组
|
||||
dynamicNews.push(newsItem)
|
||||
reportNews.push({ ...newsItem, type: 'report' }) // 复制对象并修改 type
|
||||
}
|
||||
// 响应式数据
|
||||
const activeTab = ref('dynamic') // 默认显示“友福动态”
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const totalCount = ref(502) // 设计图中的“共502条”
|
||||
|
||||
// 计算当前显示的新闻（根据标签切换）
|
||||
const filteredNews = computed(() => {
|
||||
const list = activeTab.value === 'dynamic' ? dynamicNews : reportNews
|
||||
// 模拟分页截取（实际需结合后端接口）
|
||||
const start = (currentPage.value - 1) * pageSize.value
|
||||
return list.slice(start, start + pageSize.value)
|
||||
})
|
||||
|
||||
// 分页事件
|
||||
const handleSizeChange = (val: number) => {
|
||||
pageSize.value = val
|
||||
currentPage.value = 1
|
||||
}
|
||||
const handlePageChange = (val: number) => {
|
||||
currentPage.value = val
|
||||
}
|
||||
const resetPage = () => {
|
||||
currentPage.value = 1 // 切换标签时重置页码
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '@/styles/global.less';
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background-color: @bg-color;
|
||||
}
|
||||
|
||||
/* 内容区容器 */
|
||||
.news-content {
|
||||
max-width: 1920px;
|
||||
}
|
||||
|
||||
/* 标签切换样式（还原设计的蓝色下划线） */
|
||||
.news-tabs {
|
||||
.pt(50px);
|
||||
//align-items: center;
|
||||
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
//margin-bottom: 1.04167vw;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 0.3px;
|
||||
background-color: #b5b5b5;
|
||||
z-index: var(--el-index-normal);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
background-color: @primary-dark; // 下划线颜色
|
||||
height: 3px;
|
||||
bottom: -20px !important;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin: 0;
|
||||
.el-tabs__nav {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-tabs__item {
|
||||
font-size: @font-size-xxl;
|
||||
color: @text-color-secondary;
|
||||
margin-right: 104px;
|
||||
|
||||
&.is-active {
|
||||
color: @primary-dark; // 激活态文字颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.news-tabs {
|
||||
// 关键：让选项卡居中
|
||||
:deep(.el-tabs__header) {
|
||||
width: 100%; // 占满容器宽度，为居中提供基础
|
||||
.el-tabs__nav {
|
||||
justify-content: center; // 水平居中对齐
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 新闻列表 */
|
||||
.news-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
.px(192px);
|
||||
.pt(100px);
|
||||
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: @transition;
|
||||
border-bottom: 0.3px solid #b5b5b5;
|
||||
.pb(50px);
|
||||
&:hover {
|
||||
//box-shadow: @shadow-hover;
|
||||
//transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.news-cover {
|
||||
width: 500px;
|
||||
height: 260px;
|
||||
object-fit: cover;
|
||||
border-radius: @border-radius-md;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.news-info {
|
||||
.news-wrap {
|
||||
.flex-between();
|
||||
}
|
||||
width: 100%;
|
||||
.pt(20px);
|
||||
text-align: left;
|
||||
.news-label {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-secondary;
|
||||
.mt(13px);
|
||||
.mb(76px);
|
||||
}
|
||||
.news-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-medium;
|
||||
color: @text-color;
|
||||
margin-bottom: @space-sm;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
display: flex; // 启用 Flex 布局
|
||||
align-items: center; // 子元素垂直居中
|
||||
gap: 8px;
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.view-btn {
|
||||
width: 100px;
|
||||
align-self: flex-start;
|
||||
padding: @space-xs @space-md;
|
||||
font-size: @font-size-sm;
|
||||
background-color: @bg-color;
|
||||
color: @primary-dark;
|
||||
//padding: 6px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//// Less 样式
|
||||
//.vertical-center {
|
||||
// display: flex; // 启用 Flex 布局
|
||||
// align-items: center; // 子元素垂直居中
|
||||
// gap: 8px; // 图标与文字的间距（替代 margin，更优雅）
|
||||
//
|
||||
// .center-icon {
|
||||
// width: 20px; // 图标尺寸
|
||||
// height: 20px;
|
||||
// object-fit: contain; // 保持图标比例，避免拉伸
|
||||
// }
|
||||
//
|
||||
// .center-text {
|
||||
// font-size: @font-size-sm; // 继承全局变量
|
||||
// color: @text-color-light;
|
||||
// }
|
||||
//}
|
||||
|
||||
/* 分页样式 */
|
||||
.pagination-wrap {
|
||||
margin-top: 50px;
|
||||
.pb(170px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
:deep(.el-pager li.is-active) {
|
||||
color: @primary-dark;
|
||||
}
|
||||
.el-pagination {
|
||||
.el-pagination__total {
|
||||
color: @text-color-light;
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
&.active {
|
||||
background-color: @primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination__sizes {
|
||||
margin: 0 @space-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配（平板以下） */
|
||||
//@media (max-width: @tablet-breakpoint) {
|
||||
// .news-item {
|
||||
// flex-direction: column;
|
||||
// align-items: flex-end;
|
||||
// .news-cover {
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
// margin: 0 0 @space-md 0;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
/* 响应式适配（细分平板和手机端） */
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
/* 平板端（768px-1024px）适配 */
|
||||
.news-content {
|
||||
padding: @space-xl @space-md; // 减少两侧边距
|
||||
}
|
||||
|
||||
.news-tabs {
|
||||
:deep(.el-tabs__item) {
|
||||
margin-right: @space-md; // 减少标签间距
|
||||
font-size: @font-size-lg; // 缩小标签字体
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
bottom: -15px !important; // 调整下划线位置
|
||||
}
|
||||
}
|
||||
|
||||
.news-list {
|
||||
.px(@space-lg); // 减少新闻列表左右边距
|
||||
.pt(@space-xl); // 调整顶部间距
|
||||
|
||||
.news-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start; // 左对齐
|
||||
gap: @space-lg; // 增加内容间距
|
||||
|
||||
.news-cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: @space-lg; // 图片与文字间距
|
||||
}
|
||||
|
||||
.news-info {
|
||||
.news-title {
|
||||
font-size: @font-size-md; // 缩小标题字体
|
||||
}
|
||||
|
||||
.news-label {
|
||||
.mb(@space-md); // 调整标签间距
|
||||
}
|
||||
|
||||
.news-wrap {
|
||||
flex-direction: column; // 日期和按钮垂直排列
|
||||
gap: @space-sm; // 增加间距
|
||||
|
||||
.view-btn {
|
||||
align-self: flex-start; // 按钮左对齐
|
||||
}
|
||||
|
||||
.news-date {
|
||||
order: -1; // 日期显示在按钮上方
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
.el-pagination {
|
||||
.el-pagination__sizes {
|
||||
margin: 0 @space-sm; // 缩小尺寸选择器间距
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
/* 手机端（<768px）适配 */
|
||||
.news-content {
|
||||
padding: @space-lg; // 进一步减少边距
|
||||
}
|
||||
|
||||
.news-tabs {
|
||||
:deep(.el-tabs__item) {
|
||||
margin-right: @space-sm; // 标签间距最小化
|
||||
font-size: @font-size-md; // 手机端标签字体
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
bottom: -10px !important; // 调整下划线位置
|
||||
}
|
||||
}
|
||||
|
||||
.news-list {
|
||||
.px(@space-md); // 最小化左右边距
|
||||
gap: @space-xl; // 新闻项间距适中
|
||||
|
||||
.news-item {
|
||||
.pb(@space-lg); // 减少底部边距
|
||||
|
||||
.news-cover {
|
||||
height: 180px; // 固定图片高度
|
||||
}
|
||||
|
||||
.news-info {
|
||||
.news-title {
|
||||
font-size: @font-size-md; // 标题字体
|
||||
}
|
||||
|
||||
.news-label {
|
||||
.mb(@space-md); // 标签间距
|
||||
}
|
||||
|
||||
.news-wrap {
|
||||
.view-btn {
|
||||
width: 80px; // 缩小按钮宽度
|
||||
padding: @space-xs @space-sm; // 按钮内边距
|
||||
}
|
||||
|
||||
.news-date {
|
||||
font-size: @font-size-xs; // 最小化日期字体
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分页组件适配 */
|
||||
.pagination-wrap {
|
||||
.el-pagination {
|
||||
.el-pagination__total {
|
||||
font-size: @font-size-xs; // 缩小总条数字体
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: @font-size-xs; // 页码字体
|
||||
}
|
||||
|
||||
.el-pagination__sizes {
|
||||
margin: 0 @space-xs; // 尺寸选择器间距
|
||||
.el-input {
|
||||
font-size: @font-size-xs; // 下拉框字体
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
153
src/views/News/sections/Banner.vue
Normal file
153
src/views/News/sections/Banner.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<section class="banner">
|
||||
<div class="banner-bg">
|
||||
<!-- 替换为实际背景图路径 -->
|
||||
<img src="https://images.health.ufutx.com/202506/13/25aeff6e015162aeb316983d8bd61558.png" alt="Banner背景" />
|
||||
</div>
|
||||
<div class="news-panel">
|
||||
<div
|
||||
v-for="(item, index) in newsList"
|
||||
:key="index"
|
||||
class="news-item"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mouseleave="activeIndex = null"
|
||||
>
|
||||
<div class="icon">
|
||||
<img :src="activeIndex === index ? item.hoverIcon : item.icon" />
|
||||
</div>
|
||||
<span class="text">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeIndex = ref<number | null>(null)
|
||||
|
||||
const newsList = [
|
||||
{
|
||||
title: '新闻！热门健康方案服务',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
||||
},
|
||||
{
|
||||
title: '新闻专访！健康方案',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
},
|
||||
{
|
||||
title: '新闻！健康方案专访频道',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
||||
},
|
||||
{
|
||||
title: '专访新闻！健康方案',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
||||
},
|
||||
{
|
||||
title: '新闻！健康方案专访频道',
|
||||
icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
||||
hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
||||
}
|
||||
]
|
||||
// 暂无逻辑，纯展示
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.news-panel {
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
right: 169px;
|
||||
padding: 20px 20px 0 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(51, 51, 51, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-md;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: @font-size-md;
|
||||
color: #ffffff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .text,
|
||||
&.active .text {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&:hover .icon,
|
||||
&.active .icon {
|
||||
background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
|
||||
transform: scale(1.15); // 图标轻微放大
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@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>
|
||||
Loading…
Reference in New Issue
Block a user