296 lines
6.1 KiB
Vue
296 lines
6.1 KiB
Vue
<script setup>
|
||
import Head_menu from "@/module/head_menu.vue";
|
||
import Footer from "@/module/footer.vue";
|
||
|
||
// 轮播图数据
|
||
const carouselImages = [
|
||
{id: 1, src: new URL('./img/background.png', import.meta.url).href, title: '<团队名>', desc: '<团队简介>'},
|
||
{
|
||
id: 2,
|
||
src: new URL('./img/background.png', import.meta.url).href,
|
||
title: '智能解决方案',
|
||
desc: '为您提供全方位服务'
|
||
},
|
||
{id: 3, src: new URL('./img/background.png', import.meta.url).href, title: '专业团队', desc: '打造卓越产品体验'}
|
||
]
|
||
|
||
// 核心特性数据
|
||
const features = [
|
||
{
|
||
icon: '🚀',
|
||
title: '特性&优势',
|
||
description: '简介'
|
||
},
|
||
{
|
||
icon: '🔒',
|
||
title: '特性&优势',
|
||
description: '简介'
|
||
},
|
||
{
|
||
icon: '💡',
|
||
title: '特性&优势',
|
||
description: '简介'
|
||
},
|
||
{
|
||
icon: '🌐',
|
||
title: '特性&优势',
|
||
description: '简介'
|
||
}
|
||
]
|
||
|
||
// 统计数据
|
||
const stats = [
|
||
{value: '1000+', label: '加入我们的伙伴们'},
|
||
{value: '24/7', label: '客服在线'},
|
||
{value: '50+', label: '我们的案例'}
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="home-page">
|
||
<!--顶部导航栏-->
|
||
<head_menu></head_menu>
|
||
|
||
<!--轮播图区域-->
|
||
<section class="hero-section">
|
||
<el-carousel :interval="5000" arrow="always" height="500px" indicator-position="outside">
|
||
<el-carousel-item v-for="item in carouselImages" :key="item.id">
|
||
<div class="carousel-content">
|
||
<img :alt="item.title" :src="item.src" class="carousel-img">
|
||
<div class="carousel-overlay">
|
||
<div class="carousel-text">
|
||
<h1 class="carousel-title">{{ item.title }}</h1>
|
||
<p class="carousel-desc">{{ item.desc }}</p>
|
||
<el-button class="cta-button" size="large" type="primary">了解更多</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</section>
|
||
|
||
<!--核心特性区域-->
|
||
<section class="features-section container">
|
||
<h2 class="section-title">核心优势</h2>
|
||
<p class="section-subtitle">我们致力于为客户提供最优质的技术服务</p>
|
||
<div class="features-grid">
|
||
<div v-for="(feature, index) in features" :key="index" class="feature-card card fade-in-up">
|
||
<div class="feature-icon">{{ feature.icon }}</div>
|
||
<h3 class="feature-title">{{ feature.title }}</h3>
|
||
<p class="feature-desc">{{ feature.description }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--数据统计区域-->
|
||
<section class="stats-section">
|
||
<div class="container">
|
||
<div class="stats-grid">
|
||
<div v-for="(stat, index) in stats" :key="index" class="stat-item">
|
||
<div class="stat-value">{{ stat.value }}</div>
|
||
<div class="stat-label">{{ stat.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--行动号召区域-->
|
||
<section class="cta-section container">
|
||
<div class="cta-content card">
|
||
<h2 class="cta-title">准备好开始了吗？</h2>
|
||
<p class="cta-desc">点击下方立即加入我们吧！</p>
|
||
<div class="cta-buttons">
|
||
<router-link class="btn-primary" to="/contact">联系我们</router-link>
|
||
<router-link class="btn-outline" to="/products">查看服务</router-link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--页脚-->
|
||
<Footer/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.home-page {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 轮播图区域 */
|
||
.hero-section {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.carousel-content {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 500px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.carousel-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.carousel-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(0, 102, 255, 0.7) 0%, rgba(0, 212, 255, 0.5) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.carousel-text {
|
||
text-align: center;
|
||
color: white;
|
||
padding: 20px;
|
||
}
|
||
|
||
.carousel-title {
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
animation: fadeInUp 0.8s ease-out;
|
||
}
|
||
|
||
.carousel-desc {
|
||
font-size: 20px;
|
||
margin-bottom: 32px;
|
||
opacity: 0.95;
|
||
animation: fadeInUp 0.8s ease-out 0.2s both;
|
||
}
|
||
|
||
.cta-button {
|
||
animation: fadeInUp 0.8s ease-out 0.4s both;
|
||
}
|
||
|
||
/* 核心特性区域 */
|
||
.features-section {
|
||
padding: 80px 20px;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.feature-card {
|
||
text-align: center;
|
||
padding: 40px 30px;
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.feature-desc {
|
||
font-size: 15px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
/* 数据统计区域 */
|
||
.stats-section {
|
||
background: var(--gradient-dark);
|
||
padding: 60px 20px;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-item {
|
||
color: white;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
background: linear-gradient(135deg, #ffffff 0%, #00d4ff 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 16px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* 行动号召区域 */
|
||
.cta-section {
|
||
padding: 80px 20px;
|
||
}
|
||
|
||
.cta-content {
|
||
text-align: center;
|
||
padding: 60px 40px;
|
||
background: var(--bg-light);
|
||
}
|
||
|
||
.cta-title {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.cta-desc {
|
||
font-size: 18px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.cta-buttons {
|
||
display: flex;
|
||
gap: 20px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.carousel-title {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.carousel-desc {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.features-section,
|
||
.cta-section {
|
||
padding: 60px 16px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.cta-buttons {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style> |