172 lines
3.6 KiB
Vue
172 lines
3.6 KiB
Vue
<!-- src/views/HomePage.vue -->
|
||
<template>
|
||
<div class="home-page">
|
||
<!-- 首页横幅 -->
|
||
<section id="home" class="hero-section">
|
||
<div class="hero-content">
|
||
<h1>Professional Software Solutions</h1>
|
||
<p>We deliver innovative technology solutions for businesses</p>
|
||
<div class="cta-buttons">
|
||
<a href="#about" class="btn-primary">{{ t('nav.about') }}</a>
|
||
<a href="#contact" class="btn-secondary">{{ t('nav.contact') }}</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 工作室介绍 -->
|
||
<AboutUs />
|
||
|
||
<!-- 团队介绍 -->
|
||
<TeamMembers />
|
||
|
||
<!-- 成功案例 -->
|
||
<ProjectShowcase />
|
||
|
||
<!-- 公司历程 -->
|
||
<CompanyTimeline />
|
||
|
||
<!-- 联系我们 -->
|
||
<ContactForm />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// 导入首页所需的组件
|
||
import AboutUs from '@/components/company/AboutUs.vue'
|
||
import TeamMembers from '@/components/team/TeamMembers.vue'
|
||
import ProjectShowcase from '@/components/projects/ProjectShowcase.vue'
|
||
import ContactForm from '@/components/contact/ContactForm.vue'
|
||
import CompanyTimeline from '@/components/timeline/CompanyTimeline.vue'
|
||
import { inject } from 'vue'
|
||
|
||
// 注入翻译函数（与原App.vue保持一致）
|
||
const t = inject<(key: string) => string>('t') || ((key) => key)
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
.hero-section {
|
||
height: 100vh;
|
||
background-color: var(--bg-color);
|
||
color: var(--text-color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/src/assets/images/hero-bg.jpg'); /* 绝对路径，基于项目根目录 */
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-attachment: fixed;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-section::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(45deg, var(--primary-color) 0%, transparent 70%);
|
||
opacity: 0.5;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 800px;
|
||
padding: 2rem;
|
||
position: relative;
|
||
z-index: 2;
|
||
animation: fadeInUp 1s ease-out;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 3.5rem;
|
||
margin-bottom: 1rem;
|
||
background: linear-gradient(90deg, white, var(--primary-light));
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
line-height: 1.1;
|
||
letter-spacing: -1px;
|
||
}
|
||
|
||
.hero-content p {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 2.5rem;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.cta-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.btn-primary, .btn-secondary {
|
||
padding: 0.8rem 2rem;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
transition: var(--transition);
|
||
display: inline-block;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: var(--primary-dark);
|
||
transform: translateY(-3px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background-color: transparent;
|
||
color: white;
|
||
border: 2px solid white;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background-color: white;
|
||
color: var(--bg-color);
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-content h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.hero-content p {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.footer-content {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: 1rem;
|
||
}
|
||
}
|
||
</style> |