第一页部分开发
This commit is contained in:
@@ -1,174 +1,110 @@
|
||||
<template>
|
||||
<section class="page page-advantage">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">核心优势</h2>
|
||||
<div class="section-line"></div>
|
||||
<p class="section-desc">我们的独特竞争力</p>
|
||||
</div>
|
||||
<div class="advantage-layout">
|
||||
<div class="advantage-left">
|
||||
<!-- 预留左侧大图位置 -->
|
||||
<div class="left-image-placeholder">
|
||||
<span>展示图片</span>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="image-side">
|
||||
<div class="phone-placeholder"><span>手机截图</span></div>
|
||||
</div>
|
||||
<div class="advantage-right">
|
||||
<div class="advantage-item" v-for="(item, index) in advantages" :key="index">
|
||||
<div class="item-icon-placeholder">
|
||||
<span>{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-side">
|
||||
<h2 class="section-title">
|
||||
Every opening is an<br />
|
||||
unknown encounter
|
||||
</h2>
|
||||
<p class="section-desc">
|
||||
每一次开启都是一场未知的邂逅。探索全新的交互体验，让沟通充满惊喜与期待。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deco deco-1">💎</div>
|
||||
<div class="deco deco-2">🎁</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const advantages = [
|
||||
{ title: '技术领先', desc: '持续投入研发，掌握行业核心技术，保持产品竞争力' },
|
||||
{ title: '品质保障', desc: '严格的质量管控体系，从设计到交付全流程把控' },
|
||||
{ title: '快速响应', desc: '敏捷的服务团队，7×24小时响应客户需求' },
|
||||
{ title: '生态完善', desc: '开放的合作生态，携手伙伴共建行业解决方案' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="less">
|
||||
|
||||
.page-advantage {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #0a0e27 0%, #111538 50%, #0d1137 100%);
|
||||
color: #fff;
|
||||
background: #ffffff;
|
||||
color: #222;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-advantage::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
|
||||
top: 10%;
|
||||
left: -100px;
|
||||
border-radius: 50%;
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: @gap-section;
|
||||
max-width: @content-max;
|
||||
width: 100%;
|
||||
padding: 0 @gap-content;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.text-side { flex: 1; }
|
||||
|
||||
.section-title {
|
||||
font-size: 38px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-line {
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #6366f1, #a855f7);
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 2px;
|
||||
font-size: @font-title;
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
margin-bottom: clamp(12px, 1.2vh, 28px);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 2px;
|
||||
font-size: @font-desc;
|
||||
line-height: 1.8;
|
||||
color: #888;
|
||||
max-width: clamp(260px, 22vw, 480px);
|
||||
}
|
||||
|
||||
.advantage-layout {
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
max-width: 1100px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.advantage-left {
|
||||
.image-side {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left-image-placeholder {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: 2px dashed rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px;
|
||||
.phone-placeholder {
|
||||
width: @phone-w-main;
|
||||
height: @phone-h-main;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: clamp(16px, 1.5vw, 36px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
font-size: 16px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: #bbb;
|
||||
font-size: @font-small;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.advantage-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
.deco {
|
||||
position: absolute;
|
||||
font-size: clamp(24px, 2.5vw, 60px);
|
||||
opacity: 0.15;
|
||||
animation: float 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.advantage-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
transition: all 0.3s ease;
|
||||
.deco-1 { top: 15%; left: 8%; animation-delay: 0.3s; }
|
||||
.deco-2 { bottom: 12%; right: 10%; animation-delay: 1.2s; }
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-12px); }
|
||||
}
|
||||
|
||||
.advantage-item:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-color: rgba(99, 102, 241, 0.25);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.item-icon-placeholder {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
min-width: 48px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #6366f1, #a855f7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.item-content h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.item-content p {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.advantage-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
.left-image-placeholder {
|
||||
height: 240px;
|
||||
@media (max-width: 768px) {
|
||||
.content-wrapper {
|
||||
flex-direction: column-reverse;
|
||||
gap: 32px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.section-title { text-align: center; }
|
||||
.section-desc { text-align: center; }
|
||||
.phone-placeholder { width: 180px; height: 333px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user