586 lines
22 KiB
Vue
586 lines
22 KiB
Vue
<script lang="ts" setup>
|
||
// 公司核心价值数据
|
||
const coreValues = [
|
||
{
|
||
icon: 'i-lucide-zap',
|
||
title: '创新驱动',
|
||
description: '持续技术创新，引领行业发展'
|
||
},
|
||
{
|
||
icon: 'i-lucide-shield-check',
|
||
title: '品质保证',
|
||
description: '严格质量控制，确保产品可靠性'
|
||
},
|
||
{
|
||
icon: 'i-lucide-users',
|
||
title: '客户至上',
|
||
description: '以客户需求为中心，提供优质服务'
|
||
},
|
||
{
|
||
icon: 'i-lucide-globe',
|
||
title: '开放合作',
|
||
description: '开放平台，与合作伙伴共创价值'
|
||
}
|
||
]
|
||
|
||
// 团队数据
|
||
const teamMembers = [
|
||
{
|
||
name: '张总',
|
||
position: '创始人 & CEO',
|
||
avatar: 'https://picsum.photos/200/200?random=1',
|
||
description: '10年物联网行业经验，专注于共享经济解决方案'
|
||
},
|
||
{
|
||
name: '李总',
|
||
position: '技术总监',
|
||
avatar: 'https://picsum.photos/200/200?random=2',
|
||
description: '资深软件架构师，负责技术团队管理和产品研发'
|
||
},
|
||
{
|
||
name: '王总',
|
||
position: '运营总监',
|
||
avatar: 'https://picsum.photos/200/200?random=3',
|
||
description: '丰富的市场运营经验，负责业务拓展和客户服务'
|
||
}
|
||
]
|
||
|
||
// 统计数据
|
||
const stats = [
|
||
{number: '500+', label: '合作客户'},
|
||
{number: '1000+', label: '项目案例'},
|
||
{number: '50+', label: '技术专利'},
|
||
{number: '5年+', label: '行业经验'}
|
||
]
|
||
|
||
// 发展历程
|
||
const timeline = [
|
||
{
|
||
year: '2018',
|
||
title: '公司成立',
|
||
description: '创特物联正式成立，专注于物联网技术研发'
|
||
},
|
||
{
|
||
year: '2019',
|
||
title: '产品上线',
|
||
description: '首款共享电动车管理系统正式上线运营'
|
||
},
|
||
{
|
||
year: '2020',
|
||
title: '业务扩展',
|
||
description: '拓展至共享汽车、共享充电桩等多个领域'
|
||
},
|
||
{
|
||
year: '2021',
|
||
title: '技术突破',
|
||
description: '获得多项技术专利，建立完善的技术体系'
|
||
},
|
||
{
|
||
year: '2022',
|
||
title: '市场领先',
|
||
description: '成为行业领先的共享经济解决方案提供商'
|
||
},
|
||
{
|
||
year: '2023',
|
||
title: '持续创新',
|
||
description: '推出AI智能调度系统，引领行业技术发展'
|
||
}
|
||
]
|
||
|
||
// 合作伙伴
|
||
const partners = [
|
||
{
|
||
name: '华为云',
|
||
logo: 'https://picsum.photos/120/60?random=partner1',
|
||
description: '云计算服务合作伙伴'
|
||
},
|
||
{
|
||
name: '腾讯云',
|
||
logo: 'https://picsum.photos/120/60?random=partner2',
|
||
description: '大数据分析合作伙伴'
|
||
},
|
||
{
|
||
name: '阿里云',
|
||
logo: 'https://picsum.photos/120/60?random=partner3',
|
||
description: '物联网平台合作伙伴'
|
||
},
|
||
{
|
||
name: '百度AI',
|
||
logo: 'https://picsum.photos/120/60?random=partner4',
|
||
description: '人工智能技术合作伙伴'
|
||
},
|
||
{
|
||
name: '京东物流',
|
||
logo: 'https://picsum.photos/120/60?random=partner5',
|
||
description: '物流配送合作伙伴'
|
||
},
|
||
{
|
||
name: '滴滴出行',
|
||
logo: 'https://picsum.photos/120/60?random=partner6',
|
||
description: '出行服务合作伙伴'
|
||
}
|
||
]
|
||
|
||
// 荣誉资质
|
||
const honors = [
|
||
{
|
||
title: '高新技术企业',
|
||
icon: 'i-lucide-award',
|
||
year: '2020'
|
||
},
|
||
{
|
||
title: 'ISO9001质量认证',
|
||
icon: 'i-lucide-shield-check',
|
||
year: '2019'
|
||
},
|
||
{
|
||
title: '软件著作权',
|
||
icon: 'i-lucide-file-text',
|
||
year: '2021'
|
||
},
|
||
{
|
||
title: '发明专利',
|
||
icon: 'i-lucide-lightbulb',
|
||
year: '2022'
|
||
},
|
||
{
|
||
title: '行业创新奖',
|
||
icon: 'i-lucide-trophy',
|
||
year: '2023'
|
||
},
|
||
{
|
||
title: '优秀服务商',
|
||
icon: 'i-lucide-star',
|
||
year: '2023'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
|
||
<!-- Hero Section -->
|
||
<section class="relative py-16 md:py-24 lg:py-24">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center">
|
||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
|
||
关于
|
||
<span class="text-blue-600 dark:text-blue-400">创特物联</span>
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||
专注于共享经济解决方案的物联网科技公司，致力于通过技术创新推动行业发展
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Company Introduction -->
|
||
<section class="py-10 md:py-10">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
|
||
公司简介
|
||
</h2>
|
||
<div class="space-y-4 text-lg text-gray-600 dark:text-gray-300">
|
||
<p>
|
||
创特物联是一家专注于共享经济解决方案的物联网科技公司，成立于2018年。
|
||
我们致力于为共享出行、共享生活等领域提供全方位的技术解决方案。
|
||
</p>
|
||
<p>
|
||
公司拥有专业的技术团队和丰富的行业经验，已为500+客户提供优质服务，
|
||
涵盖共享电动车、共享汽车、共享充电桩等多个领域。
|
||
</p>
|
||
<p>
|
||
我们始终坚持"创新驱动、品质保证、客户至上"的企业理念，
|
||
通过持续的技术创新和优质的服务，为客户创造更大价值。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8">
|
||
<img
|
||
alt="公司环境"
|
||
class="w-full h-64 md:h-80 object-cover rounded-lg mb-6"
|
||
src="https://picsum.photos/600/400?random=company"
|
||
>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">2018</div>
|
||
<div class="text-sm text-gray-600 dark:text-gray-400">成立年份</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">100+</div>
|
||
<div class="text-sm text-gray-600 dark:text-gray-400">团队成员</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Core Values -->
|
||
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||
核心价值
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||
我们的价值观指导着我们的每一个决策和行动
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div
|
||
v-for="value in coreValues"
|
||
:key="value.title"
|
||
class="text-center p-6 rounded-xl bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 hover:shadow-lg transition-all duration-300"
|
||
>
|
||
<div
|
||
class="w-16 h-16 mx-auto mb-4 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center">
|
||
<UIcon :name="value.icon" class="w-8 h-8 text-white"/>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
||
{{ value.title }}
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
{{ value.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Statistics -->
|
||
<section class="py-16 md:py-20">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
<div
|
||
v-for="stat in stats"
|
||
:key="stat.label"
|
||
class="text-center"
|
||
>
|
||
<div class="text-4xl md:text-5xl font-bold text-blue-600 dark:text-blue-400 mb-2">
|
||
{{ stat.number }}
|
||
</div>
|
||
<div class="text-lg text-gray-600 dark:text-gray-300">
|
||
{{ stat.label }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Team Section -->
|
||
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||
核心团队
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||
经验丰富的专业团队，为您提供最优质的服务
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<div
|
||
v-for="member in teamMembers"
|
||
:key="member.name"
|
||
class="text-center bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 rounded-2xl p-8 hover:shadow-xl transition-all duration-300"
|
||
>
|
||
<img
|
||
:alt="member.name"
|
||
:src="member.avatar"
|
||
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
|
||
>
|
||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-1">
|
||
{{ member.name }}
|
||
</h3>
|
||
<p class="text-blue-600 dark:text-blue-400 font-medium mb-3">
|
||
{{ member.position }}
|
||
</p>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm">
|
||
{{ member.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Professional Team Development -->
|
||
<section class="py-16 md:py-20">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="max-w-4xl mx-auto text-center">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-8">
|
||
专业团队研发
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 mb-12 max-w-2xl mx-auto">
|
||
我们的专业团队将为您精心研发更专业的系统
|
||
</p>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
||
<div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
|
||
<div class="w-16 h-16 mx-auto mb-4 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center">
|
||
<UIcon name="i-lucide-code" class="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">技术研发</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">资深工程师团队，专注技术创新与产品优化</p>
|
||
</div>
|
||
|
||
<div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
|
||
<div class="w-16 h-16 mx-auto mb-4 bg-green-600 dark:bg-green-500 rounded-full flex items-center justify-center">
|
||
<UIcon name="i-lucide-settings" class="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">系统集成</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">完善的系统架构，确保稳定可靠的运行</p>
|
||
</div>
|
||
|
||
<div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
|
||
<div class="w-16 h-16 mx-auto mb-4 bg-purple-600 dark:bg-purple-500 rounded-full flex items-center justify-center">
|
||
<UIcon name="i-lucide-headphones" class="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">专业服务</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">7×24小时技术支持，全程贴心服务</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QR Code Section -->
|
||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl max-w-md mx-auto">
|
||
<div class="text-center">
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||
扫码了解更多
|
||
</h3>
|
||
<div class="w-48 h-48 mx-auto mb-4 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||
<div class="text-center">
|
||
<div class="w-32 h-32 mx-auto mb-2 bg-black rounded-lg flex items-center justify-center">
|
||
<div class="w-24 h-24 bg-white rounded-lg flex items-center justify-center">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 rounded-lg flex items-center justify-center">
|
||
<UIcon name="i-lucide-zap" class="w-8 h-8 text-white" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-sm text-gray-600 dark:text-gray-400">微信扫码咨询</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||
专业团队为您提供一对一咨询服务
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Company Timeline -->
|
||
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||
发展历程
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||
从创立到发展，见证我们的成长足迹
|
||
</p>
|
||
</div>
|
||
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="relative">
|
||
<!-- Timeline line -->
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-blue-200 dark:bg-gray-600"></div>
|
||
|
||
<div class="space-y-12">
|
||
<div
|
||
v-for="(item, index) in timeline"
|
||
:key="item.year"
|
||
class="relative flex items-center"
|
||
:class="index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'"
|
||
>
|
||
<!-- Timeline dot -->
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-500 rounded-full border-4 border-white dark:border-gray-800 z-10"></div>
|
||
|
||
<!-- Content -->
|
||
<div
|
||
class="w-5/12 p-6 bg-white dark:bg-gray-700 rounded-xl shadow-lg"
|
||
:class="index % 2 === 0 ? 'mr-auto' : 'ml-auto'"
|
||
>
|
||
<div class="text-blue-600 dark:text-blue-400 font-bold text-lg mb-2">
|
||
{{ item.year }}
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
||
{{ item.title }}
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
{{ item.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Partners Section -->
|
||
<section class="py-16 md:py-20">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||
合作伙伴
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||
与行业领先企业携手，共创美好未来
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
|
||
<div
|
||
v-for="partner in partners"
|
||
:key="partner.name"
|
||
class="text-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
|
||
>
|
||
<img
|
||
:src="partner.logo"
|
||
:alt="partner.name"
|
||
class="w-full h-12 object-contain mb-3"
|
||
>
|
||
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
|
||
{{ partner.name }}
|
||
</h3>
|
||
<p class="text-xs text-gray-600 dark:text-gray-300">
|
||
{{ partner.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Honors Section -->
|
||
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||
荣誉资质
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||
专业认证，品质保证
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div
|
||
v-for="honor in honors"
|
||
:key="honor.title"
|
||
class="text-center p-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 rounded-xl hover:shadow-lg transition-all duration-300"
|
||
>
|
||
<div class="w-16 h-16 mx-auto mb-4 bg-yellow-500 dark:bg-yellow-600 rounded-full flex items-center justify-center">
|
||
<UIcon :name="honor.icon" class="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||
{{ honor.title }}
|
||
</h3>
|
||
<p class="text-blue-600 dark:text-blue-400 font-medium">
|
||
{{ honor.year }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Section -->
|
||
<!-- <section class="py-16 md:py-20">-->
|
||
<!-- <div class="container mx-auto px-4 sm:px-6 lg:px-8">-->
|
||
<!-- <div class="max-w-4xl mx-auto">-->
|
||
<!-- <div class="text-center mb-12">-->
|
||
<!-- <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">-->
|
||
<!-- 联系我们-->
|
||
<!-- </h2>-->
|
||
<!-- <p class="text-xl text-gray-600 dark:text-gray-300">-->
|
||
<!-- 我们期待与您的合作，共创美好未来-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">-->
|
||
<!-- <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg">-->
|
||
<!-- <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">-->
|
||
<!-- 联系信息-->
|
||
<!-- </h3>-->
|
||
<!-- <div class="space-y-4">-->
|
||
<!-- <div class="flex items-center">-->
|
||
<!-- <UIcon class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3" name="i-lucide-phone"/>-->
|
||
<!-- <span class="text-gray-600 dark:text-gray-300">400-123-4567</span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="flex items-center">-->
|
||
<!-- <UIcon class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3" name="i-lucide-mail"/>-->
|
||
<!-- <span class="text-gray-600 dark:text-gray-300">contact@ccttiot.com</span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="flex items-start">-->
|
||
<!-- <UIcon class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3 mt-1" name="i-lucide-map-pin"/>-->
|
||
<!-- <span class="text-gray-600 dark:text-gray-300">-->
|
||
<!-- 北京市朝阳区科技园区创新大厦A座1001室-->
|
||
<!-- </span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg">-->
|
||
<!-- <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">-->
|
||
<!-- 工作时间-->
|
||
<!-- </h3>-->
|
||
<!-- <div class="space-y-3">-->
|
||
<!-- <div class="flex justify-between">-->
|
||
<!-- <span class="text-gray-600 dark:text-gray-300">周一至周五</span>-->
|
||
<!-- <span class="text-gray-900 dark:text-white font-medium">9:00 - 18:00</span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="flex justify-between">-->
|
||
<!-- <span class="text-gray-600 dark:text-gray-300">周六</span>-->
|
||
<!-- <span class="text-gray-900 dark:text-white font-medium">9:00 - 12:00</span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="flex justify-between">-->
|
||
<!-- <span class="text-gray-600 dark:text-gray-300">周日</span>-->
|
||
<!-- <span class="text-gray-900 dark:text-white font-medium">休息</span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-600">-->
|
||
<!-- <UButton-->
|
||
<!-- class="w-full"-->
|
||
<!-- color="primary"-->
|
||
<!-- size="lg"-->
|
||
<!-- @click="() => window.open('tel:400-123-4567')"-->
|
||
<!-- >-->
|
||
<!-- <UIcon class="w-4 h-4 mr-2" name="i-lucide-phone"/>-->
|
||
<!-- 立即咨询-->
|
||
<!-- </UButton>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </section>-->
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义动画效果 */
|
||
.hover\:shadow-lg:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* 响应式字体大小 */
|
||
@media (max-width: 640px) {
|
||
.text-4xl {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.text-5xl {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.text-6xl {
|
||
font-size: 3rem;
|
||
}
|
||
}
|
||
</style>
|