first commit
This commit is contained in:
PC-202306242200\Administrator
25
src/App.vue
Normal file
25
src/App.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div id="app-root">
|
||||
<AppHeader />
|
||||
<main>
|
||||
<RouterView />
|
||||
</main>
|
||||
<AppFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AppHeader from '@/components/AppHeader.vue'
|
||||
import AppFooter from '@/components/AppFooter.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
122
src/assets/styles/global.css
Normal file
122
src/assets/styles/global.css
Normal file
@@ -0,0 +1,122 @@
|
||||
/* ===== 全局样式重置 ===== */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-primary: #00c853;
|
||||
--color-primary-dark: #009624;
|
||||
--color-primary-light: #5efc82;
|
||||
--color-secondary: #1a237e;
|
||||
--color-accent: #ffab00;
|
||||
--color-text: #212121;
|
||||
--color-text-light: #757575;
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-gray: #f5f5f5;
|
||||
--color-border: #e0e0e0;
|
||||
--font-main: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
|
||||
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
|
||||
--shadow-md: 0 4px 20px rgba(0,0,0,0.12);
|
||||
--shadow-lg: 0 8px 40px rgba(0,0,0,0.16);
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 20px;
|
||||
--transition: 0.3s ease;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-main);
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: var(--font-main);
|
||||
}
|
||||
|
||||
/* ===== 通用工具类 ===== */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1rem;
|
||||
color: var(--color-text-light);
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
padding: 12px 32px;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
display: inline-block;
|
||||
padding: 12px 32px;
|
||||
border: 2px solid var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* ===== 响应式断点 ===== */
|
||||
@media (max-width: 768px) {
|
||||
.section-title { font-size: 1.5rem; }
|
||||
.container { padding: 0 16px; }
|
||||
}
|
||||
181
src/components/AppFooter.vue
Normal file
181
src/components/AppFooter.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<!-- 品牌介绍 -->
|
||||
<div class="footer-brand">
|
||||
<div class="footer-logo">⚡ 河南星动</div>
|
||||
<p>致力于推动清洁能源转型，为全球提供可持续的新能源解决方案。</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="social-btn" title="微信">💬</a>
|
||||
<a href="#" class="social-btn" title="微博">🌐</a>
|
||||
<a href="#" class="social-btn" title="LinkedIn">💼</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速链接 -->
|
||||
<div class="footer-col">
|
||||
<h4>快速导航</h4>
|
||||
<ul>
|
||||
<li><RouterLink to="/">首页</RouterLink></li>
|
||||
<li><RouterLink to="/about">关于我们</RouterLink></li>
|
||||
<li><RouterLink to="/products">产品中心</RouterLink></li>
|
||||
<li><RouterLink to="/solutions">解决方案</RouterLink></li>
|
||||
<li><RouterLink to="/news">新闻资讯</RouterLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 产品 -->
|
||||
<div class="footer-col">
|
||||
<h4>核心产品</h4>
|
||||
<ul>
|
||||
<li><a href="#">光伏组件</a></li>
|
||||
<li><a href="#">储能系统</a></li>
|
||||
<li><a href="#">风力发电</a></li>
|
||||
<li><a href="#">智能逆变器</a></li>
|
||||
<li><a href="#">充电桩</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<div class="footer-col">
|
||||
<h4>联系我们</h4>
|
||||
<ul class="contact-list">
|
||||
<li>📍 河南省郑州市郑东新区智慧岛</li>
|
||||
<li>📞 400-888-0000</li>
|
||||
<li>✉️ info@henanxingdong.com</li>
|
||||
<li>🕐 周一至周五 9:00-18:00</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 河南星动科技有限公司 版权所有</p>
|
||||
<div class="footer-links">
|
||||
<a href="#">隐私政策</a>
|
||||
<a href="#">服务条款</a>
|
||||
<a href="#">网站地图</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
background: #0d1b2a;
|
||||
color: rgba(255,255,255,0.75);
|
||||
padding: 64px 0 0;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1.5fr;
|
||||
gap: 48px;
|
||||
padding-bottom: 48px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.social-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.social-btn:hover {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.footer-col h4 {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-col ul li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-col ul li a {
|
||||
color: rgba(255,255,255,0.65);
|
||||
font-size: 0.9rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-col ul li a:hover {
|
||||
color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
.contact-list li {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px 0;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255,255,255,0.45);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: rgba(255,255,255,0.45);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
191
src/components/AppHeader.vue
Normal file
191
src/components/AppHeader.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<header class="header" :class="{ scrolled: isScrolled }">
|
||||
<div class="container header-inner">
|
||||
<!-- Logo -->
|
||||
<RouterLink to="/" class="logo">
|
||||
<span class="logo-icon">⚡</span>
|
||||
<span class="logo-text">河南星动</span>
|
||||
</RouterLink>
|
||||
|
||||
<!-- 导航 -->
|
||||
<nav class="nav" :class="{ open: menuOpen }">
|
||||
<RouterLink v-for="item in navItems" :key="item.path"
|
||||
:to="item.path" class="nav-link" @click="menuOpen = false">
|
||||
{{ item.label }}
|
||||
</RouterLink>
|
||||
<RouterLink to="/contact" class="btn-primary nav-cta" @click="menuOpen = false">
|
||||
联系我们
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<!-- 汉堡菜单 -->
|
||||
<button class="hamburger" @click="menuOpen = !menuOpen" aria-label="菜单">
|
||||
<span :class="{ active: menuOpen }"></span>
|
||||
<span :class="{ active: menuOpen }"></span>
|
||||
<span :class="{ active: menuOpen }"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const isScrolled = ref(false)
|
||||
const menuOpen = ref(false)
|
||||
|
||||
const navItems = [
|
||||
{ path: '/', label: '首页' },
|
||||
{ path: '/about', label: '关于我们' },
|
||||
{ path: '/products', label: '产品中心' },
|
||||
{ path: '/solutions', label: '解决方案' },
|
||||
{ path: '/news', label: '新闻资讯' }
|
||||
]
|
||||
|
||||
const handleScroll = () => {
|
||||
isScrolled.value = window.scrollY > 60
|
||||
}
|
||||
|
||||
onMounted(() => window.addEventListener('scroll', handleScroll))
|
||||
onUnmounted(() => window.removeEventListener('scroll', handleScroll))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
transition: background 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.header.scrolled {
|
||||
background: rgba(255,255,255,0.97);
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.header.scrolled .logo {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 8px 16px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.router-link-active {
|
||||
color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
.header.scrolled .nav-link {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.header.scrolled .nav-link:hover,
|
||||
.header.scrolled .nav-link.router-link-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
margin-left: 8px;
|
||||
padding: 10px 24px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.header.scrolled .hamburger span {
|
||||
background: var(--color-text);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hamburger { display: flex; }
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
gap: 4px;
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-120%);
|
||||
opacity: 0;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.nav.open {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--color-text) !important;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
8
src/main.js
Normal file
8
src/main.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './assets/styles/global.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
26
src/router/index.js
Normal file
26
src/router/index.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '@/views/Home.vue'
|
||||
import About from '@/views/About.vue'
|
||||
import Products from '@/views/Products.vue'
|
||||
import Solutions from '@/views/Solutions.vue'
|
||||
import News from '@/views/News.vue'
|
||||
import Contact from '@/views/Contact.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', name: 'Home', component: Home },
|
||||
{ path: '/about', name: 'About', component: About },
|
||||
{ path: '/products', name: 'Products', component: Products },
|
||||
{ path: '/solutions', name: 'Solutions', component: Solutions },
|
||||
{ path: '/news', name: 'News', component: News },
|
||||
{ path: '/contact', name: 'Contact', component: Contact }
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
scrollBehavior() {
|
||||
return { top: 0 }
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
586
src/views/About.vue
Normal file
586
src/views/About.vue
Normal file
@@ -0,0 +1,586 @@
|
||||
<template>
|
||||
<div class="about-page">
|
||||
<!-- 页面 Banner -->
|
||||
<section class="page-banner">
|
||||
<div class="banner-bg"></div>
|
||||
<div class="container">
|
||||
<h1 data-aos="fade-up">关于我们</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="100">20年专注新能源，引领绿色能源革命</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 公司简介 -->
|
||||
<section class="company-intro">
|
||||
<div class="container intro-grid">
|
||||
<div class="intro-text" data-aos="fade-right">
|
||||
<div class="tag">公司简介</div>
|
||||
<h2>河南星动，让清洁能源触手可及</h2>
|
||||
<p>河南星动成立于2004年，是一家专注于新能源技术研发、生产和服务的高科技企业。公司总部位于郑州，在全球50余个国家和地区设有分支机构，员工超过15,000人。</p>
|
||||
<p>我们始终坚持"技术创新、绿色发展"的核心理念，致力于为全球客户提供高效、可靠、经济的新能源解决方案，推动人类社会向清洁能源时代迈进。</p>
|
||||
<div class="intro-highlights">
|
||||
<div class="highlight-item" v-for="(h, i) in highlights" :key="i" :style="{animationDelay: `${i * 0.1}s`}">
|
||||
<span class="h-value">{{ h.value }}</span>
|
||||
<span class="h-label">{{ h.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro-visual" data-aos="fade-left">
|
||||
<div class="visual-card" v-for="(v, i) in vision" :key="i" :style="{animationDelay: `${i * 0.15}s`}">
|
||||
<div class="visual-icon">{{ v.icon }}</div>
|
||||
<h3>{{ v.title }}</h3>
|
||||
<p>{{ v.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 发展历程 -->
|
||||
<section class="timeline-section">
|
||||
<div class="timeline-bg"></div>
|
||||
<div class="container">
|
||||
<h2 class="section-title" data-aos="fade-up">发展历程</h2>
|
||||
<p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">二十年砥砺前行，每一步都是里程碑</p>
|
||||
<div class="timeline">
|
||||
<div v-for="(item, i) in milestones" :key="item.year"
|
||||
class="timeline-item" :class="{ right: i % 2 === 1 }"
|
||||
data-aos="fade-up" :data-aos-delay="i * 100">
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-year">{{ item.year }}</div>
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.desc }}</p>
|
||||
</div>
|
||||
<div class="timeline-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 团队 -->
|
||||
<section class="team-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title" data-aos="fade-up">核心团队</h2>
|
||||
<p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">汇聚全球顶尖人才，共创绿色未来</p>
|
||||
<div class="team-grid">
|
||||
<div v-for="(member, i) in team" :key="member.name"
|
||||
class="team-card"
|
||||
data-aos="zoom-in"
|
||||
:data-aos-delay="i * 150">
|
||||
<div class="member-avatar">{{ member.avatar }}</div>
|
||||
<h3>{{ member.name }}</h3>
|
||||
<div class="member-title">{{ member.title }}</div>
|
||||
<p>{{ member.bio }}</p>
|
||||
<div class="member-social">
|
||||
<span>📱</span><span>💼</span><span>✉️</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 荣誉资质 -->
|
||||
<section class="honors-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title" data-aos="fade-up">荣誉资质</h2>
|
||||
<p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">实力与信誉的最佳证明</p>
|
||||
<div class="honors-grid">
|
||||
<div v-for="(honor, i) in honors" :key="honor.title"
|
||||
class="honor-card"
|
||||
data-aos="flip-left"
|
||||
:data-aos-delay="i * 100">
|
||||
<div class="honor-icon">{{ honor.icon }}</div>
|
||||
<h4>{{ honor.title }}</h4>
|
||||
<p>{{ honor.year }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const highlights = [
|
||||
{ value: '2004', label: '年成立' },
|
||||
{ value: '15,000+', label: '名员工' },
|
||||
{ value: '800+', label: '项专利' }
|
||||
]
|
||||
|
||||
const vision = [
|
||||
{ icon: '🌱', title: '使命', desc: '推动全球能源转型，让清洁能源惠及每一个人' },
|
||||
{ icon: '🔭', title: '愿景', desc: '成为全球最受信赖的新能源解决方案提供商' },
|
||||
{ icon: '💎', title: '价值观', desc: '创新、诚信、协作、可持续' }
|
||||
]
|
||||
|
||||
const milestones = [
|
||||
{ year: '2004', title: '公司成立', desc: '河南星动在郑州正式成立，专注光伏技术研发。' },
|
||||
{ year: '2008', title: '首条生产线投产', desc: '年产能达到500MW，成为国内重要的光伏组件制造商。' },
|
||||
{ year: '2012', title: '进军海外市场', desc: '产品出口至欧洲、北美等20个国家，国际化战略全面启动。' },
|
||||
{ year: '2016', title: '储能业务布局', desc: '成立储能事业部，推出首款家用储能系统，开拓新赛道。' },
|
||||
{ year: '2019', title: '上市融资', desc: '在上海证券交易所科创板成功上市，募资50亿元用于扩产研发。' },
|
||||
{ year: '2022', title: '碳中和承诺', desc: '发布碳中和路线图，承诺2030年实现运营碳中和，2050年全价值链碳中和。' },
|
||||
{ year: '2024', title: '技术新突破', desc: '钙钛矿叠层电池效率突破33%，引领下一代光伏技术革命。' }
|
||||
]
|
||||
|
||||
const team = [
|
||||
{ avatar: '👨💼', name: '张明远', title: '董事长 & CEO', bio: '清华大学工学博士，20年新能源行业经验，带领公司从初创到行业领军。' },
|
||||
{ avatar: '👩🔬', name: '李晓燕', title: '首席技术官', bio: '麻省理工学院博士后，主导800+项核心专利研发，国家科技进步奖获得者。' },
|
||||
{ avatar: '👨💻', name: '王建国', title: '首席运营官', bio: '哈佛商学院MBA，曾任职于麦肯锡，主导公司全球化运营体系建设。' },
|
||||
{ avatar: '👩💼', name: '陈雨薇', title: '首席财务官', bio: '注册会计师，15年上市公司财务管理经验，主导公司科创板上市工作。' }
|
||||
]
|
||||
|
||||
const honors = [
|
||||
{ icon: '🏆', title: '国家科技进步奖', year: '2023年' },
|
||||
{ icon: '🌟', title: '中国新能源企业50强', year: '2024年' },
|
||||
{ icon: '🎖️', title: 'ISO 9001质量认证', year: '持续有效' },
|
||||
{ icon: '🌍', title: 'IEC国际标准认证', year: '持续有效' },
|
||||
{ icon: '💚', title: '绿色工厂认证', year: '2022年' },
|
||||
{ icon: '🔬', title: '国家级企业技术中心', year: '2020年' }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('aos-animate')
|
||||
}
|
||||
})
|
||||
}, { threshold: 0.1 })
|
||||
|
||||
document.querySelectorAll('[data-aos]').forEach(el => observer.observe(el))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-banner {
|
||||
background: linear-gradient(135deg, #0a2e1a, #1a6b3a);
|
||||
padding: 140px 0 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></svg>');
|
||||
background-size: 50px 50px;
|
||||
animation: bgMove 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bgMove {
|
||||
from { transform: translate(0, 0); }
|
||||
to { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
.page-banner h1 {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-banner p {
|
||||
font-size: 1.1rem;
|
||||
color: rgba(255,255,255,0.75);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.company-intro {
|
||||
padding: 96px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.intro-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 64px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 4px 14px;
|
||||
background: rgba(0,200,83,0.1);
|
||||
color: var(--color-primary-dark);
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.intro-text h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.intro-text p {
|
||||
color: var(--color-text-light);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.intro-highlights {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-top: 32px;
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.highlight-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.highlight-item:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.h-value {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.h-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.intro-visual {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.visual-card {
|
||||
background: var(--color-bg-gray);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
transition: all 0.4s ease;
|
||||
animation: fadeInRight 0.6s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from { opacity: 0; transform: translateX(30px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.visual-card:hover {
|
||||
transform: translateX(10px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.visual-icon {
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.visual-card:hover .visual-icon {
|
||||
transform: scale(1.2) rotate(10deg);
|
||||
}
|
||||
|
||||
.visual-card h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.visual-card p {
|
||||
font-size: 0.88rem;
|
||||
color: var(--color-text-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 时间线 */
|
||||
.timeline-section {
|
||||
padding: 96px 0;
|
||||
background: var(--color-bg-gray);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeline-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 30% 50%, rgba(0,200,83,0.05) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-light));
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: calc(50% + 32px);
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-item.right {
|
||||
justify-content: flex-start;
|
||||
padding-right: 0;
|
||||
padding-left: calc(50% + 32px);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background: #fff;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 24px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
max-width: 320px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.timeline-content:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.timeline-content h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
font-size: 0.88rem;
|
||||
color: var(--color-text-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 24px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 0 0 2px var(--color-primary);
|
||||
animation: dotPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes dotPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 2px var(--color-primary); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(0,200,83,0.3); }
|
||||
}
|
||||
|
||||
/* 团队 */
|
||||
.team-section {
|
||||
padding: 96px 0;
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.team-card {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.team-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.team-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.team-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 16px;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.team-card:hover .member-avatar {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.team-card h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.member-title {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.team-card p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-light);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.member-social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.team-card:hover .member-social {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.member-social span {
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.member-social span:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* 荣誉 */
|
||||
.honors-section {
|
||||
padding: 96px 0;
|
||||
background: var(--color-bg-gray);
|
||||
}
|
||||
|
||||
.honors-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.honor-card {
|
||||
background: #fff;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 28px 16px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.honor-card:hover {
|
||||
transform: translateY(-8px) rotate(2deg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.honor-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.honor-card:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.honor-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 12px;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.honor-card:hover .honor-icon {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.honor-card h4 {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.honor-card p {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.honors-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.team-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.intro-grid { grid-template-columns: 1fr; gap: 40px; }
|
||||
.timeline::before { left: 20px; }
|
||||
.timeline-item, .timeline-item.right {
|
||||
padding: 0 0 0 52px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.timeline-dot { left: 20px; }
|
||||
.honors-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.team-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
304
src/views/Contact.vue
Normal file
304
src/views/Contact.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div class="contact-page">
|
||||
<!-- Banner -->
|
||||
<section class="page-banner">
|
||||
<div class="banner-bg"></div>
|
||||
<div class="container">
|
||||
<h1 data-aos="fade-up">联系我们</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="100">有任何问题？我们随时为您服务</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系内容 -->
|
||||
<section class="contact-section">
|
||||
<div class="container">
|
||||
<div class="contact-grid">
|
||||
<!-- 联系表单 -->
|
||||
<div class="contact-form-wrapper">
|
||||
<h2>在线留言</h2>
|
||||
<p class="form-desc">填写以下信息，我们的专业团队将在24小时内与您联系</p>
|
||||
<form class="contact-form" @submit.prevent="submitForm">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>姓名 <span class="required">*</span></label>
|
||||
<input type="text" v-model="form.name" placeholder="请输入您的姓名" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>电话 <span class="required">*</span></label>
|
||||
<input type="tel" v-model="form.phone" placeholder="请输入您的电话号码" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>邮箱</label>
|
||||
<input type="email" v-model="form.email" placeholder="请输入您的邮箱地址">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>公司名称</label>
|
||||
<input type="text" v-model="form.company" placeholder="请输入公司名称（如有）">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>咨询内容 <span class="required">*</span></label>
|
||||
<select v-model="form.type" required>
|
||||
<option value="">请选择咨询类型</option>
|
||||
<option value="product">产品咨询</option>
|
||||
<option value="solution">解决方案</option>
|
||||
<option value="cooperation">商务合作</option>
|
||||
<option value="support">售后服务</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>留言内容 <span class="required">*</span></label>
|
||||
<textarea v-model="form.message" rows="5" placeholder="请详细描述您的需求..." required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary submit-btn">提交留言</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<div class="contact-info-wrapper">
|
||||
<div class="info-card">
|
||||
<h2>联系我们</h2>
|
||||
<p class="info-desc">绿能科技期待与您的合作</p>
|
||||
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<span class="info-icon">📍</span>
|
||||
<div>
|
||||
<h4>公司地址</h4>
|
||||
<p>河南省郑州市郑东新区智慧岛</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">📞</span>
|
||||
<div>
|
||||
<h4>客服热线</h4>
|
||||
<p>400-888-0000</p>
|
||||
<p class="info-note">周一至周五 9:00-18:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">✉️</span>
|
||||
<div>
|
||||
<h4>商务邮箱</h4>
|
||||
<p>business@henanxingdong.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">💬</span>
|
||||
<div>
|
||||
<h4>官方微信</h4>
|
||||
<p>扫码关注公众号</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-section">
|
||||
<h4>关注我们</h4>
|
||||
<div class="social-icons">
|
||||
<a href="#" class="social-icon">💬</a>
|
||||
<a href="#" class="social-icon">🌐</a>
|
||||
<a href="#" class="social-icon">📱</a>
|
||||
<a href="#" class="social-icon">▶️</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图占位 -->
|
||||
<div class="map-placeholder">
|
||||
<span>🗺️ 地图区域</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 分支机构 -->
|
||||
<section class="branches-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">分支机构</h2>
|
||||
<p class="section-subtitle">全球50+国家和地区，服务网络覆盖</p>
|
||||
<div class="branches-grid">
|
||||
<div v-for="b in branches" :key="b.city" class="branch-card">
|
||||
<span class="branch-icon">{{ b.icon }}</span>
|
||||
<h4>{{ b.city }}</h4>
|
||||
<p>{{ b.address }}</p>
|
||||
<p>{{ b.phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
company: '',
|
||||
type: '',
|
||||
message: ''
|
||||
})
|
||||
|
||||
const submitForm = () => {
|
||||
alert('感谢您的留言！我们会尽快与您联系。')
|
||||
form.value = { name: '', phone: '', email: '', company: '', type: '', message: '' }
|
||||
}
|
||||
|
||||
const branches = [
|
||||
{ icon: '🏢', city: '北京', address: '朝阳区建国门外大街1号', phone: '010-12345678' },
|
||||
{ icon: '🏙️', city: '深圳', address: '南山区科技园南区', phone: '0755-12345678' },
|
||||
{ icon: '🌸', city: '广州', address: '天河区珠江新城', phone: '020-12345678' },
|
||||
{ icon: '🦁', city: '新加坡', address: 'Marina Bay Financial Centre', phone: '+65-12345678' },
|
||||
{ icon: '🗽', city: '洛杉矶', address: '1000 Wilshire Blvd', phone: '+1-12345678' },
|
||||
{ icon: '🏰', city: '法兰克福', address: 'Taunusanlage 8', phone: '+49-12345678' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-banner {
|
||||
background: linear-gradient(135deg, #0a2e1a, #1a6b3a);
|
||||
padding: 140px 0 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></svg>');
|
||||
background-size: 40px 40px;
|
||||
animation: bgMove 15s linear infinite;
|
||||
}
|
||||
.page-banner h1 { font-size: 2.8rem; font-weight: 800; margin-bottom: 16px; }
|
||||
.page-banner p { font-size: 1.1rem; color: rgba(255,255,255,0.75); }
|
||||
|
||||
.contact-section { padding: 80px 0; }
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.contact-form-wrapper {
|
||||
background: #fff;
|
||||
padding: 48px;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.contact-form-wrapper h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
|
||||
.form-desc { color: var(--color-text-light); margin-bottom: 32px; }
|
||||
|
||||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.95rem; }
|
||||
.required { color: #f44336; }
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--font-main);
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(0,200,83,0.1);
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/* 联系信息 */
|
||||
.contact-info-wrapper { display: flex; flex-direction: column; gap: 24px; }
|
||||
|
||||
.info-card {
|
||||
background: #fff;
|
||||
padding: 40px;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.info-card h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
|
||||
.info-desc { color: var(--color-text-light); margin-bottom: 32px; }
|
||||
|
||||
.info-list { display: flex; flex-direction: column; gap: 24px; }
|
||||
.info-item { display: flex; gap: 16px; }
|
||||
.info-icon { font-size: 1.8rem; }
|
||||
.info-item h4 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
|
||||
.info-item p { font-size: 0.9rem; color: var(--color-text-light); }
|
||||
.info-note { font-size: 0.8rem !important; color: var(--color-text-light); opacity: 0.7; }
|
||||
|
||||
.social-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); }
|
||||
.social-section h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 16px; }
|
||||
.social-icons { display: flex; gap: 12px; }
|
||||
.social-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--color-bg-gray);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
transition: background 0.3s, transform 0.3s;
|
||||
}
|
||||
.social-icon:hover { background: var(--color-primary); transform: scale(1.1); }
|
||||
|
||||
.map-placeholder {
|
||||
height: 300px;
|
||||
background: var(--color-bg-gray);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text-light);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* 分支机构 */
|
||||
.branches-section {
|
||||
padding: 96px 0;
|
||||
background: var(--color-bg-gray);
|
||||
}
|
||||
|
||||
.branches-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.branch-card {
|
||||
background: #fff;
|
||||
padding: 28px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.branch-icon { font-size: 2rem; margin-bottom: 12px; display: block; }
|
||||
.branch-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
|
||||
.branch-card p { font-size: 0.85rem; color: var(--color-text-light); }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.contact-grid { grid-template-columns: 1fr; }
|
||||
.branches-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
.contact-form-wrapper { padding: 32px 24px; }
|
||||
.branches-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
1034
src/views/Home.vue
Normal file
1034
src/views/Home.vue
Normal file
File diff suppressed because it is too large
Load Diff
198
src/views/News.vue
Normal file
198
src/views/News.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="news-page">
|
||||
<!-- Banner -->
|
||||
<section class="page-banner">
|
||||
<div class="banner-bg"></div>
|
||||
<div class="container">
|
||||
<h1 data-aos="fade-up">新闻资讯</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="100">了解行业动态，掌握技术前沿</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新闻分类 -->
|
||||
<section class="news-section">
|
||||
<div class="container">
|
||||
<div class="news-filter">
|
||||
<button v-for="cat in categories" :key="cat.id"
|
||||
class="filter-btn" :class="{ active: activeCategory === cat.id }"
|
||||
@click="activeCategory = cat.id">
|
||||
{{ cat.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="news-list">
|
||||
<article v-for="news in filteredNews" :key="news.id" class="news-item">
|
||||
<div class="news-date">
|
||||
<span class="date-day">{{ news.day }}</span>
|
||||
<span class="date-month">{{ news.month }}</span>
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<div class="news-meta">
|
||||
<span class="news-tag">{{ news.tag }}</span>
|
||||
<span class="news-author">作者：{{ news.author }}</span>
|
||||
</div>
|
||||
<h3>{{ news.title }}</h3>
|
||||
<p>{{ news.summary }}</p>
|
||||
<a href="#" class="news-link">阅读全文 →</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="news-pagination">
|
||||
<button class="page-btn">上一页</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const activeCategory = ref('all')
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', name: '全部' },
|
||||
{ id: 'company', name: '公司动态' },
|
||||
{ id: 'tech', name: '技术前沿' },
|
||||
{ id: 'industry', name: '行业资讯' },
|
||||
{ id: 'policy', name: '政策法规' }
|
||||
]
|
||||
|
||||
const newsData = [
|
||||
{ id: 1, category: 'company', tag: '公司动态', title: '绿能科技荣获2024年度"最佳新能源企业"大奖', summary: '在第十届中国新能源产业峰会上，绿能科技凭借卓越的技术创新和市场表现，荣获年度最高荣誉，这是对公司多年努力的充分肯定。', day: '15', month: '2024.03', author: '企业宣传部' },
|
||||
{ id: 2, category: 'tech', tag: '技术前沿', title: '新一代钙钛矿-晶硅叠层电池效率突破33%', summary: '我司研发团队历时三年攻关，成功将叠层电池光电转化效率提升至33.2%，创造新的世界纪录，标志着公司在下一代光伏技术上取得重大突破。', day: '08', month: '2024.03', author: '研发中心' },
|
||||
{ id: 3, category: 'industry', tag: '行业资讯', title: '2024年全球新能源装机容量有望突破500GW', summary: '国际能源署最新报告显示，受政策支持和成本下降双重驱动，今年全球可再生能源新增装机将创历史新高，行业发展前景广阔。', day: '28', month: '2024.02', author: '行业分析组' },
|
||||
{ id: 4, category: 'policy', tag: '政策法规', title: '国家发布新能源消纳新政，利好储能产业发展', summary: '发改委、能源局联合发布《关于促进新能源消纳的若干意见》，明确提出加强储能建设，完善电力市场机制，为储能产业带来重大利好。', day: '20', month: '2024.02', author: '政策研究组' },
|
||||
{ id: 5, category: 'company', tag: '公司动态', title: '绿能科技与沙特签署1GW光伏电站合作协议', summary: '在"一带一路"合作框架下，绿能科技与沙特能源部签署协议，将参与建设总装机1GW的光伏电站项目，助力沙特能源转型。', day: '15', month: '2024.02', author: '国际业务部' },
|
||||
{ id: 6, category: 'tech', tag: '技术前沿', title: '智能微电网系统助力工商业用户降本增效', summary: '公司最新研发的智能微电网系统正式商用，通过AI算法优化调度，帮助工商业用户实现峰谷套利，降低用电成本30%以上。', day: '06', month: '2024.02', author: '产品部' }
|
||||
]
|
||||
|
||||
const filteredNews = computed(() => {
|
||||
if (activeCategory.value === 'all') return newsData
|
||||
return newsData.filter(n => n.category === activeCategory.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-banner {
|
||||
background: linear-gradient(135deg, #0a2e1a, #1a6b3a);
|
||||
padding: 140px 0 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></svg>');
|
||||
background-size: 40px 40px;
|
||||
animation: bgMove 15s linear infinite;
|
||||
}
|
||||
.page-banner h1 { font-size: 2.8rem; font-weight: 800; margin-bottom: 16px; }
|
||||
.page-banner p { font-size: 1.1rem; color: rgba(255,255,255,0.75); }
|
||||
|
||||
.news-section { padding: 80px 0; }
|
||||
|
||||
.news-filter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 48px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 10px 24px;
|
||||
background: var(--color-bg-gray);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.filter-btn:hover { border-color: var(--color-primary); }
|
||||
.filter-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.news-list { display: flex; flex-direction: column; gap: 24px; }
|
||||
|
||||
.news-item {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
padding: 32px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.news-item:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.news-date {
|
||||
flex-shrink: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--color-bg-gray);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.date-day { font-size: 1.8rem; font-weight: 800; color: var(--color-primary); }
|
||||
.date-month { font-size: 0.7rem; color: var(--color-text-light); }
|
||||
|
||||
.news-content { flex: 1; }
|
||||
.news-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
|
||||
.news-tag {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
background: rgba(0,200,83,0.1);
|
||||
color: var(--color-primary-dark);
|
||||
border-radius: 20px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.news-author { font-size: 0.8rem; color: var(--color-text-light); }
|
||||
|
||||
.news-content h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; transition: color 0.3s; }
|
||||
.news-item:hover h3 { color: var(--color-primary); }
|
||||
.news-content p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.7; margin-bottom: 16px; }
|
||||
.news-link { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; transition: color 0.3s; }
|
||||
.news-link:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.news-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
background: var(--color-bg-gray);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.page-btn:hover { background: var(--color-primary); color: #fff; }
|
||||
.page-btn.active { background: var(--color-primary); color: #fff; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.news-item { flex-direction: column; gap: 20px; }
|
||||
.news-date { width: 100%; height: auto; padding: 16px; flex-direction: row; gap: 8px; }
|
||||
}
|
||||
</style>
|
||||
347
src/views/Products.vue
Normal file
347
src/views/Products.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="products-page">
|
||||
<!-- Banner -->
|
||||
<section class="page-banner">
|
||||
<div class="banner-bg"></div>
|
||||
<div class="container">
|
||||
<h1 data-aos="fade-up">产品中心</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="100">覆盖发电、储能、用电全链路的高品质产品</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品分类 -->
|
||||
<section class="category-section">
|
||||
<div class="container">
|
||||
<div class="category-tabs">
|
||||
<button v-for="cat in categories" :key="cat.id"
|
||||
class="tab-btn" :class="{ active: activeCategory === cat.id }"
|
||||
@click="activeCategory = cat.id">
|
||||
<span class="tab-icon">{{ cat.icon }}</span>
|
||||
<span>{{ cat.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 光伏产品 -->
|
||||
<div v-if="activeCategory === 'solar'" class="products-list">
|
||||
<div v-for="p in solarProducts" :key="p.name" class="product-detail-card">
|
||||
<div class="product-detail-img" :style="{ background: p.gradient }">
|
||||
<span class="detail-emoji">{{ p.icon }}</span>
|
||||
</div>
|
||||
<div class="product-detail-info">
|
||||
<h3>{{ p.name }}</h3>
|
||||
<p class="product-detail-desc">{{ p.desc }}</p>
|
||||
<div class="product-specs">
|
||||
<div v-for="spec in p.specs" :key="spec.label" class="spec-item">
|
||||
<span class="spec-label">{{ spec.label }}</span>
|
||||
<span class="spec-value">{{ spec.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-primary">获取报价</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 储能产品 -->
|
||||
<div v-if="activeCategory === 'storage'" class="products-list">
|
||||
<div v-for="p in storageProducts" :key="p.name" class="product-detail-card">
|
||||
<div class="product-detail-img" :style="{ background: p.gradient }">
|
||||
<span class="detail-emoji">{{ p.icon }}</span>
|
||||
</div>
|
||||
<div class="product-detail-info">
|
||||
<h3>{{ p.name }}</h3>
|
||||
<p class="product-detail-desc">{{ p.desc }}</p>
|
||||
<div class="product-specs">
|
||||
<div v-for="spec in p.specs" :key="spec.label" class="spec-item">
|
||||
<span class="spec-label">{{ spec.label }}</span>
|
||||
<span class="spec-value">{{ spec.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-primary">获取报价</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 充电桩 -->
|
||||
<div v-if="activeCategory === 'charging'" class="products-list">
|
||||
<div v-for="p in chargingProducts" :key="p.name" class="product-detail-card">
|
||||
<div class="product-detail-img" :style="{ background: p.gradient }">
|
||||
<span class="detail-emoji">{{ p.icon }}</span>
|
||||
</div>
|
||||
<div class="product-detail-info">
|
||||
<h3>{{ p.name }}</h3>
|
||||
<p class="product-detail-desc">{{ p.desc }}</p>
|
||||
<div class="product-specs">
|
||||
<div v-for="spec in p.specs" :key="spec.label" class="spec-item">
|
||||
<span class="spec-label">{{ spec.label }}</span>
|
||||
<span class="spec-value">{{ spec.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-primary">获取报价</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 优势 -->
|
||||
<section class="features-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">产品优势</h2>
|
||||
<p class="section-subtitle">品质卓越，值得信赖</p>
|
||||
<div class="features-grid">
|
||||
<div v-for="f in features" :key="f.title" class="feature-card">
|
||||
<div class="feature-icon">{{ f.icon }}</div>
|
||||
<h3>{{ f.title }}</h3>
|
||||
<p>{{ f.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeCategory = ref('solar')
|
||||
|
||||
const categories = [
|
||||
{ id: 'solar', name: '光伏组件', icon: '☀️' },
|
||||
{ id: 'storage', name: '储能系统', icon: '🔋' },
|
||||
{ id: 'charging', name: '充电桩', icon: '⚡' }
|
||||
]
|
||||
|
||||
const solarProducts = [
|
||||
{
|
||||
icon: '☀️', name: '高效单晶硅组件 Pro',
|
||||
desc: '采用新一代PERC+技术，转化效率高达23.5%，适用于大型地面电站和分布式项目。',
|
||||
gradient: 'linear-gradient(135deg, #ff9800, #ffeb3b)',
|
||||
specs: [
|
||||
{ label: '功率', value: '550W' },
|
||||
{ label: '效率', value: '23.5%' },
|
||||
{ label: '质保', value: '25年' },
|
||||
{ label: '温度系数', value: '-0.35%/℃' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '🏠', name: '户用光伏组件',
|
||||
desc: '专为家庭屋顶设计，超高颜值，兼容各种屋顶类型，25年线性功率质保。',
|
||||
gradient: 'linear-gradient(135deg, #ff5722, #ff9800)',
|
||||
specs: [
|
||||
{ label: '功率', value: '450W' },
|
||||
{ label: '效率', value: '22.3%' },
|
||||
{ label: '尺寸', value: '1722×1134mm' },
|
||||
{ label: '重量', value: '21.5kg' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '🏭', name: '双面双玻组件',
|
||||
desc: '双面发电设计，背面可额外获取10-25%发电增益，适合地面电站。',
|
||||
gradient: 'linear-gradient(135deg, #ffc107, #ffeb3b)',
|
||||
specs: [
|
||||
{ label: '功率', value: '600W' },
|
||||
{ label: '双面率', value: '70%' },
|
||||
{ label: '抗PID', value: '是' },
|
||||
{ label: '防火等级', value: 'Class A' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const storageProducts = [
|
||||
{
|
||||
icon: '🔋', name: '家庭储能系统 HomeGuard',
|
||||
desc: '磷酸铁锂电芯，循环寿命6000次，支持并离网切换，智能APP监控。',
|
||||
gradient: 'linear-gradient(135deg, #00c853, #69f0ae)',
|
||||
specs: [
|
||||
{ label: '容量', value: '13.3kWh' },
|
||||
{ label: '功率', value: '5kW' },
|
||||
{ label: '循环', value: '6000次' },
|
||||
{ label: '质保', value: '10年' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '🏢', name: '工商业储能系统',
|
||||
desc: '模块化设计，灵活扩容，峰谷套利、需量管理、应急备电三位一体。',
|
||||
gradient: 'linear-gradient(135deg, #00bcd4, #00e5ff)',
|
||||
specs: [
|
||||
{ label: '容量', value: '100-500kWh' },
|
||||
{ label: '功率', value: '50-250kW' },
|
||||
{ label: '效率', value: '95%' },
|
||||
{ label: '防护', value: 'IP54' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '🔌', name: '便携储能电源',
|
||||
desc: '户外露营、应急备电首选，大容量、高功率、多接口输出。',
|
||||
gradient: 'linear-gradient(135deg, #7c4dff, #b388ff)',
|
||||
specs: [
|
||||
{ label: '容量', value: '1000Wh' },
|
||||
{ label: '功率', value: '1000W' },
|
||||
{ label: '输出', value: '8个接口' },
|
||||
{ label: '重量', value: '10kg' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const chargingProducts = [
|
||||
{
|
||||
icon: '🚗', name: '家用充电桩 WallBox',
|
||||
desc: '7kW/22kW可选，APP控制，预约充电，兼容所有国标电动车。',
|
||||
gradient: 'linear-gradient(135deg, #2196f3, #03a9f4)',
|
||||
specs: [
|
||||
{ label: '功率', value: '7-22kW' },
|
||||
{ label: '电压', value: '220V/380V' },
|
||||
{ label: '防护', value: 'IP65' },
|
||||
{ label: '认证', value: 'CQC' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '⚡', name: '超充桩 SuperCharge',
|
||||
desc: '直流快充，30分钟充满80%，支持智能功率分配。',
|
||||
gradient: 'linear-gradient(135deg, #f44336, #ff5722)',
|
||||
specs: [
|
||||
{ label: '功率', value: '120-360kW' },
|
||||
{ label: '电压', value: '200-1000V' },
|
||||
{ label: '效率', value: '96%' },
|
||||
{ label: '枪线', value: '5米' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const features = [
|
||||
{ icon: '🔬', title: '尖端技术', desc: '持续研发投入，光电转化效率行业领先。' },
|
||||
{ icon: '🛡️', title: '严苛品控', desc: '通过ISO9001、IEC等国际认证，100%出厂检测。' },
|
||||
{ icon: '📈', title: '长期质保', desc: '光伏组件25年线性功率质保，储能系统10年质保。' },
|
||||
{ icon: '🌍', title: '全球服务', desc: '50+国家服务网络，本地化技术支持。' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-banner {
|
||||
background: linear-gradient(135deg, #0a2e1a, #1a6b3a);
|
||||
padding: 140px 0 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></svg>');
|
||||
background-size: 40px 40px;
|
||||
animation: bgMove 15s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bgMove {
|
||||
from { transform: translate(0, 0); }
|
||||
to { transform: translate(40px, 40px); }
|
||||
}
|
||||
|
||||
.page-banner h1 { font-size: 2.8rem; font-weight: 800; margin-bottom: 16px; }
|
||||
.page-banner p { font-size: 1.1rem; color: rgba(255,255,255,0.75); }
|
||||
|
||||
.category-section { padding: 64px 0 96px; }
|
||||
|
||||
.category-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 48px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
background: var(--color-bg-gray);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-btn:hover { border-color: var(--color-primary); }
|
||||
.tab-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab-icon { font-size: 1.4rem; }
|
||||
|
||||
.products-list { display: flex; flex-direction: column; gap: 32px; }
|
||||
|
||||
.product-detail-card {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
background: #fff;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.product-detail-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.detail-emoji { font-size: 6rem; }
|
||||
|
||||
.product-detail-info { padding: 40px; }
|
||||
.product-detail-info h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 12px; }
|
||||
.product-detail-desc { color: var(--color-text-light); line-height: 1.7; margin-bottom: 24px; }
|
||||
|
||||
.product-specs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background: var(--color-bg-gray);
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spec-label { font-size: 0.8rem; color: var(--color-text-light); }
|
||||
.spec-value { font-size: 1rem; font-weight: 700; color: var(--color-primary-dark); }
|
||||
|
||||
.features-section {
|
||||
padding: 96px 0;
|
||||
background: var(--color-bg-gray);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: #fff;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 32px 24px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:hover { transform: translateY(-4px); }
|
||||
.feature-icon { font-size: 2.5rem; margin-bottom: 16px; }
|
||||
.feature-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
|
||||
.feature-card p { font-size: 0.9rem; color: var(--color-text-light); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.product-detail-card { grid-template-columns: 1fr; }
|
||||
.features-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
</style>
|
||||
270
src/views/Solutions.vue
Normal file
270
src/views/Solutions.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="solutions-page">
|
||||
<!-- Banner -->
|
||||
<section class="page-banner">
|
||||
<div class="banner-bg"></div>
|
||||
<div class="container">
|
||||
<h1 data-aos="fade-up">解决方案</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="100">针对不同场景，提供定制化新能源整体方案</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 解决方案列表 -->
|
||||
<section class="solutions-section">
|
||||
<div class="container">
|
||||
<div class="solutions-list">
|
||||
<div v-for="(sol, index) in solutions" :key="sol.title"
|
||||
class="solution-card" :class="{ reverse: index % 2 === 1 }">
|
||||
<div class="solution-visual" :style="{ background: sol.gradient }">
|
||||
<span class="solution-emoji">{{ sol.icon }}</span>
|
||||
</div>
|
||||
<div class="solution-content">
|
||||
<div class="solution-tag">{{ sol.tag }}</div>
|
||||
<h2>{{ sol.title }}</h2>
|
||||
<p class="solution-desc">{{ sol.desc }}</p>
|
||||
<div class="solution-features">
|
||||
<div v-for="f in sol.features" :key="f.title" class="feature-row">
|
||||
<span class="feature-icon">{{ f.icon }}</span>
|
||||
<div>
|
||||
<h4>{{ f.title }}</h4>
|
||||
<p>{{ f.detail }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-metrics">
|
||||
<div v-for="m in sol.metrics" :key="m.label" class="metric-item">
|
||||
<span class="metric-value">{{ m.value }}</span>
|
||||
<span class="metric-label">{{ m.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-primary">咨询方案</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 流程 -->
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">服务流程</h2>
|
||||
<p class="section-subtitle">从需求调研到落地运维，全流程专业服务</p>
|
||||
<div class="process-steps">
|
||||
<div v-for="(step, i) in process" :key="step.title" class="process-step">
|
||||
<div class="step-number">{{ i + 1 }}</div>
|
||||
<div class="step-icon">{{ step.icon }}</div>
|
||||
<h3>{{ step.title }}</h3>
|
||||
<p>{{ step.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const solutions = [
|
||||
{
|
||||
tag: '工商业',
|
||||
icon: '🏭',
|
||||
title: '工商业光储一体化',
|
||||
desc: '为工业园区、写字楼、商场等提供光伏+储能整体解决方案，降低用电成本，提升能源可靠性。',
|
||||
gradient: 'linear-gradient(135deg, #1a237e, #3949ab)',
|
||||
features: [
|
||||
{ icon: '📊', title: '能耗分析', detail: '专业能耗诊断，挖掘节能空间' },
|
||||
{ icon: '🔧', title: '方案设计', detail: '资深团队定制最优方案' },
|
||||
{ icon: '⚡', title: '峰谷套利', detail: '低储高放，降低电费支出' },
|
||||
{ icon: '🛡️', title: '应急备电', detail: '断电时无缝切换，保障运营' }
|
||||
],
|
||||
metrics: [
|
||||
{ value: '30%', label: '电费节省' },
|
||||
{ value: '20年', label: '收益周期' },
|
||||
{ value: '98%', label: '系统可用率' }
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: '户用',
|
||||
icon: '🏠',
|
||||
title: '家庭绿电系统',
|
||||
desc: '屋顶光伏+储能一体化，打造零碳家庭。发电自用，余电上网，还能作为应急电源。',
|
||||
gradient: 'linear-gradient(135deg, #00c853, #69f0ae)',
|
||||
features: [
|
||||
{ icon: '🏡', title: '屋顶光伏', detail: '高效单晶硅，25年稳定发电' },
|
||||
{ icon: '🔋', title: '家庭储能', detail: '白天储电，晚上使用' },
|
||||
{ icon: '📱', title: '智能监控', detail: 'APP实时查看发电用电' },
|
||||
{ icon: '🔌', title: '并网兼容', detail: '余电上网，卖电赚钱' }
|
||||
],
|
||||
metrics: [
|
||||
{ value: '0元', label: '年电费' },
|
||||
{ value: '25年', label: '组件质保' },
|
||||
{ value: '80%', label: '自发自用率' }
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: '公共设施',
|
||||
icon: '🌾',
|
||||
title: '农业光伏互补',
|
||||
desc: '农光互补、牧光互补等模式，上层发电、下层种植养殖，土地综合利用，助力乡村振兴。',
|
||||
gradient: 'linear-gradient(135deg, #4caf50, #8bc34a)',
|
||||
features: [
|
||||
{ icon: '🌱', title: '智慧农业', detail: '光伏+农业科学结合' },
|
||||
{ icon: '💧', title: '节水灌溉', detail: '光伏供电，智能灌溉' },
|
||||
{ icon: '👨🌾', title: '助农增收', detail: '土地租金+务工收入' },
|
||||
{ icon: '🦋', title: '生态友好', detail: '减少蒸发，保护土壤' }
|
||||
],
|
||||
metrics: [
|
||||
{ value: '2倍', label: '土地产出' },
|
||||
{ value: '50%', label: '节水率' },
|
||||
{ value: '100MW', label: '装机容量' }
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: '交通',
|
||||
icon: '🚄',
|
||||
title: '光储充一体化',
|
||||
desc: '将光伏、储能与充电桩结合，为电动汽车提供清洁电力，打造零碳充电站。',
|
||||
gradient: 'linear-gradient(135deg, #ff9800, #ffeb3b)',
|
||||
features: [
|
||||
{ icon: '☀️', title: '光伏车棚', detail: '遮阳棚+发电双功能' },
|
||||
{ icon: '🔋', title: '储能缓冲', detail: '缓解充电峰谷压力' },
|
||||
{ icon: '⚡', title: '快速充电', detail: '支持大功率快充' },
|
||||
{ icon: '💰', title: '收益多元', detail: '充电+卖电+碳交易' }
|
||||
],
|
||||
metrics: [
|
||||
{ value: '50%', label: '绿电比例' },
|
||||
{ value: '30%', label: '运营成本降' },
|
||||
{ value: '15年', label: '收益周期' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const process = [
|
||||
{ icon: '🔍', title: '需求调研', desc: '专业团队现场勘测，了解用电需求和场地条件' },
|
||||
{ icon: '📐', title: '方案设计', desc: '根据需求定制最优系统方案，提供详细投资回报分析' },
|
||||
{ icon: '🛠️', title: '安装调试', desc: '资深工程团队施工，专业调试确保系统最佳运行' },
|
||||
{ icon: '✅', title: '验收交付', desc: '严格验收流程，完整交付文档和培训服务' },
|
||||
{ icon: '🛡️', title: '运维服务', desc: '7×24小时远程监控，定期巡检和及时维护' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-banner {
|
||||
background: linear-gradient(135deg, #0a2e1a, #1a6b3a);
|
||||
padding: 140px 0 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></svg>');
|
||||
background-size: 40px 40px;
|
||||
animation: bgMove 15s linear infinite;
|
||||
}
|
||||
.page-banner h1 { font-size: 2.8rem; font-weight: 800; margin-bottom: 16px; }
|
||||
.page-banner p { font-size: 1.1rem; color: rgba(255,255,255,0.75); }
|
||||
|
||||
.solutions-section { padding: 80px 0; }
|
||||
|
||||
.solution-card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 64px;
|
||||
align-items: center;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
.solution-card.reverse { direction: rtl; }
|
||||
.solution-card.reverse > * { direction: ltr; }
|
||||
|
||||
.solution-visual {
|
||||
height: 400px;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.solution-emoji { font-size: 10rem; }
|
||||
|
||||
.solution-content { padding: 20px 0; }
|
||||
.solution-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 14px;
|
||||
background: rgba(0,200,83,0.1);
|
||||
color: var(--color-primary-dark);
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.solution-content h2 { font-size: 2rem; font-weight: 800; margin-bottom: 16px; }
|
||||
.solution-desc { color: var(--color-text-light); line-height: 1.8; margin-bottom: 28px; font-size: 1.05rem; }
|
||||
|
||||
.solution-features { margin-bottom: 32px; }
|
||||
.feature-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.feature-icon { font-size: 1.5rem; }
|
||||
.feature-row h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; }
|
||||
.feature-row p { font-size: 0.85rem; color: var(--color-text-light); }
|
||||
|
||||
.solution-metrics {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-bottom: 32px;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.metric-item { display: flex; flex-direction: column; }
|
||||
.metric-value { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); }
|
||||
.metric-label { font-size: 0.8rem; color: var(--color-text-light); }
|
||||
|
||||
.process-section {
|
||||
padding: 96px 0;
|
||||
background: var(--color-bg-gray);
|
||||
}
|
||||
|
||||
.process-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.process-step {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.step-number {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.step-icon { font-size: 2.5rem; margin-bottom: 12px; margin-top: 16px; }
|
||||
.process-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
|
||||
.process-step p { font-size: 0.85rem; color: var(--color-text-light); }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.solution-card, .solution-card.reverse { grid-template-columns: 1fr; gap: 32px; }
|
||||
.solution-visual { height: 280px; }
|
||||
.process-steps { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.process-steps { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user