714 lines
18 KiB
Vue
714 lines
18 KiB
Vue
<script setup>
|
||
import { corpProfiles } from '../../data/corpProfiles'
|
||
|
||
const c = corpProfiles.tech
|
||
const solutions = [
|
||
{ icon: 'M3 20V10l5 3v-3l5 3V6l8-2v16H3zM7.2 16H9M11.1 16h1.8M15 16h1.8', name: '智能制造', desc: '产线视觉质检与预测性维护' },
|
||
{ icon: 'M3 15.5l1.6-4.9C4.9 9.6 5.8 9 6.8 9h10.4c1 0 1.9.6 2.2 1.6l1.6 4.9M3 15.5h18M3 15.5v3h2.8v-3M18.2 15.5v3H21v-3M6.8 12.3H9M15 12.3h2.2', name: '智能座舱', desc: '车规级芯片与多模态交互' },
|
||
{ icon: 'M2.5 20.5h19M4.5 20.5V8h6v12.5M13.5 20.5V3.5h6v17M6.5 11h2M6.5 14.5h2M6.5 18h2M15.5 7h2M15.5 10.5h2M15.5 14h2', name: '智慧城市', desc: '边缘计算节点与城市大脑' },
|
||
{ icon: 'M12 2.5c2.4 2.3 3.6 5.5 3.6 8.9v4.1H8.4v-4.1c0-3.4 1.2-6.6 3.6-8.9zM8.4 13l-2.9 4.8 2.9-1M15.6 13l2.9 4.8-2.9-1M10.4 15.5v3M13.6 15.5v3M13.6 9a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 1 1 3.2 0', name: '商业航天', desc: '星载计算与在轨数据处理' },
|
||
{ icon: 'M13 2.5L4.5 13h6L9 21.5 19.5 10.5h-6.3L13 2.5z', name: '能源电力', desc: '电网巡检与负荷预测' },
|
||
{ icon: 'M3 12h4.5l2-5 3.5 10 2-5H21', name: '医疗影像', desc: '端侧推理的影像辅助分析' },
|
||
]
|
||
const serviceIcons = [
|
||
'M8 8h8v8H8zM5 5h14v14H5zM9.5 2.5V5M14.5 2.5V5M9.5 19v2.5M14.5 19v2.5M2.5 9.5H5M2.5 14.5H5M19 9.5h2.5M19 14.5h2.5',
|
||
'M4 10a7.31 7.31 0 0 0 10 10zM9 15l3-3M17 13a6 6 0 0 0-6-6M21 13A10 10 0 0 0 11 3',
|
||
'M4 4.5h16v5H4zM4 14.5h16v5H4zM7 7h1.5M7 17h1.5M15.5 7H17M15.5 17H17M12 9.5v5',
|
||
'M8.5 8L4.5 12l4 4M15.5 8l4 4-4 4M13.2 5.5l-2.4 13',
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="te">
|
||
<nav class="te-nav">
|
||
<b class="te-logo">
|
||
<svg class="te-logo-ic" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M12 2.5l8.2 4.75v9.5L12 21.5l-8.2-4.75v-9.5L12 2.5zM12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 1 0 0-7" />
|
||
</svg>
|
||
{{ c.name }}
|
||
</b>
|
||
<div class="te-menu">
|
||
<a href="#solutions">解决方案</a>
|
||
<a href="#products">产品</a>
|
||
<a href="#partners">合作伙伴</a>
|
||
</div>
|
||
<router-link to="/corp" class="te-back">返回合集</router-link>
|
||
</nav>
|
||
|
||
<header class="te-hero">
|
||
<p class="te-kicker">{{ c.nameEn }} · EST. {{ c.founded }}</p>
|
||
<h1>{{ c.slogan }}</h1>
|
||
<p class="te-sub">{{ c.desc }}</p>
|
||
<div class="te-hero-btns">
|
||
<a href="#solutions" class="te-btn-main">探索解决方案</a>
|
||
<a href="#products" class="te-btn-sub">查看产品 →</a>
|
||
</div>
|
||
<div class="te-glow" aria-hidden="true"></div>
|
||
<!-- 算力网络拓扑 -->
|
||
<svg class="te-net" viewBox="0 0 380 380" aria-hidden="true">
|
||
<g stroke="rgba(124, 155, 255, 0.35)" stroke-width="1.2" fill="none">
|
||
<path d="M190 66 L84 150 M190 66 L296 150 M84 150 L128 268 M296 150 L252 268 M128 268 L252 268 M84 150 L252 268 M296 150 L128 268 M190 66 L190 190 M190 190 L128 268 M190 190 L252 268 M84 150 L190 190 M296 150 L190 190" />
|
||
</g>
|
||
<g fill="#0d1530" stroke="#7c9bff" stroke-width="1.6">
|
||
<circle cx="190" cy="66" r="13" />
|
||
<circle cx="84" cy="150" r="10" />
|
||
<circle cx="296" cy="150" r="10" />
|
||
<circle cx="128" cy="268" r="11" />
|
||
<circle cx="252" cy="268" r="11" />
|
||
<circle cx="190" cy="190" r="16" />
|
||
</g>
|
||
<circle cx="190" cy="190" r="6" fill="#b58cff">
|
||
<animate attributeName="r" values="4;7;4" dur="2.8s" repeatCount="indefinite" />
|
||
</circle>
|
||
<g fill="#7c9bff">
|
||
<circle r="3">
|
||
<animateMotion dur="4.5s" repeatCount="indefinite" path="M190 66 L190 190" />
|
||
</circle>
|
||
<circle r="3">
|
||
<animateMotion dur="5.5s" begin="-2s" repeatCount="indefinite" path="M84 150 L190 190" />
|
||
</circle>
|
||
<circle r="3">
|
||
<animateMotion dur="5s" begin="-1s" repeatCount="indefinite" path="M296 150 L190 190" />
|
||
</circle>
|
||
<circle r="3">
|
||
<animateMotion dur="6s" begin="-3s" repeatCount="indefinite" path="M190 190 L252 268" />
|
||
</circle>
|
||
</g>
|
||
<g font-size="9" fill="#6d7cc9" letter-spacing="1" text-anchor="middle" font-family="Consolas, monospace">
|
||
<text x="190" y="46">CLOUD</text>
|
||
<text x="60" y="132">EDGE-01</text>
|
||
<text x="322" y="132">EDGE-02</text>
|
||
<text x="190" y="222">CORE</text>
|
||
<text x="112" y="294">NODE-A</text>
|
||
<text x="268" y="294">NODE-B</text>
|
||
</g>
|
||
</svg>
|
||
</header>
|
||
|
||
<!-- 数据 -->
|
||
<div class="te-stats">
|
||
<div class="te-stats-grid">
|
||
<div v-for="(s, i) in c.stats" :key="s.label" :style="{ '--i': i }"><b>{{ s.value }}</b><span>{{ s.label }}</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 解决方案矩阵 -->
|
||
<section id="solutions" class="te-sec">
|
||
<div class="te-sechead"><span>01 / SOLUTIONS</span></div>
|
||
<h2 class="te-h2">解决方案矩阵</h2>
|
||
<div class="te-solutions">
|
||
<div v-for="(s, i) in solutions" :key="s.name" class="te-solution" :style="{ '--i': i }">
|
||
<svg class="te-icon te-sol-ic" viewBox="0 0 24 24" aria-hidden="true"><path :d="s.icon" /></svg>
|
||
<b>{{ s.name }}</b>
|
||
<p>{{ s.desc }}</p>
|
||
<i>了解更多 →</i>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 产品 -->
|
||
<section id="products" class="te-sec">
|
||
<div class="te-sechead"><span>02 / PRODUCTS</span></div>
|
||
<h2 class="te-h2">核心产品</h2>
|
||
<div class="te-products">
|
||
<article v-for="p in c.cases" :key="p.name" class="te-product">
|
||
<img :src="p.image" :alt="p.name" loading="lazy" />
|
||
<div>
|
||
<span>{{ p.tag }}</span>
|
||
<h3>{{ p.name }}</h3>
|
||
<p>{{ p.desc }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 服务 -->
|
||
<section class="te-sec">
|
||
<div class="te-sechead"><span>03 / PLATFORM</span></div>
|
||
<h2 class="te-h2">四大技术底座</h2>
|
||
<div class="te-services">
|
||
<div v-for="(s, i) in c.services" :key="s.name" class="te-service" :style="{ '--i': i }">
|
||
<span class="te-svc-idx">0{{ i + 1 }}</span>
|
||
<svg class="te-icon te-svc-ic" viewBox="0 0 24 24" aria-hidden="true"><path :d="serviceIcons[i]" /></svg>
|
||
<div class="te-svc-txt"><b>{{ s.name }}</b><p>{{ s.desc }}</p></div>
|
||
<span class="te-svc-arrow" aria-hidden="true">→</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 伙伴墙 -->
|
||
<section id="partners" class="te-sec">
|
||
<div class="te-sechead"><span>04 / ECOSYSTEM</span></div>
|
||
<h2 class="te-h2">合作伙伴</h2>
|
||
<div class="te-partners">
|
||
<span v-for="p in c.partners" :key="p">{{ p }}</span>
|
||
</div>
|
||
<blockquote class="te-quote">“{{ c.testimonials[0].text }}”<cite>—— {{ c.testimonials[0].author }} · {{ c.testimonials[0].role }}</cite></blockquote>
|
||
</section>
|
||
|
||
<footer class="te-footer">
|
||
<b>{{ c.name }} {{ c.nameEn }}</b>
|
||
<p>{{ c.contacts.phone }} · {{ c.contacts.email }} · {{ c.contacts.addr }}</p>
|
||
<p class="te-links">
|
||
<router-link to="/corp">返回企业官网合集</router-link> ·
|
||
<router-link to="/">个人页面合集</router-link>
|
||
</p>
|
||
<p class="te-copy">© {{ c.founded }}–2026 · 风格演示页，公司与数据均为虚构</p>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.te {
|
||
min-height: 100vh;
|
||
background: linear-gradient(150deg, #0d1530 0%, #1a1245 60%, #0d1530 100%);
|
||
color: #e6eaff;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
overflow-x: clip;
|
||
}
|
||
|
||
.te-icon path {
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 1.5;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
@keyframes te-rise {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(14px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
.te-nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 40;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
padding: 14px clamp(16px, 5vw, 56px);
|
||
background: rgba(13, 21, 48, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid rgba(110, 130, 255, 0.22);
|
||
}
|
||
.te-logo {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
font-size: 17px;
|
||
font-weight: 800;
|
||
color: #9db6ff;
|
||
}
|
||
.te-logo-ic {
|
||
width: 19px;
|
||
height: 19px;
|
||
color: #7c9bff;
|
||
}
|
||
.te-logo-ic path {
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 1.6;
|
||
stroke-linejoin: round;
|
||
}
|
||
.te-menu {
|
||
display: flex;
|
||
gap: 22px;
|
||
}
|
||
.te-menu a {
|
||
color: #a8b3e0;
|
||
text-decoration: none;
|
||
font-size: 13.5px;
|
||
}
|
||
.te-menu a:hover {
|
||
color: #fff;
|
||
}
|
||
@media (max-width: 640px) {
|
||
.te-menu {
|
||
display: none;
|
||
}
|
||
}
|
||
.te-back {
|
||
margin-left: auto;
|
||
color: #0d1530;
|
||
background: linear-gradient(90deg, #7c9bff, #b58cff);
|
||
text-decoration: none;
|
||
font-size: 12.5px;
|
||
font-weight: 700;
|
||
padding: 7px 18px;
|
||
border-radius: 2px;
|
||
}
|
||
.te-back:hover {
|
||
filter: brightness(1.15);
|
||
}
|
||
|
||
.te-hero {
|
||
position: relative;
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: clamp(64px, 10vw, 120px) clamp(16px, 4vw, 26px) 60px;
|
||
}
|
||
/* IBM 式基准网格 */
|
||
.te-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(124, 155, 255, 0.06) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(124, 155, 255, 0.06) 1px, transparent 1px);
|
||
background-size: 56px 56px;
|
||
-webkit-mask-image: radial-gradient(85% 85% at 65% 35%, #000 25%, transparent 100%);
|
||
mask-image: radial-gradient(85% 85% at 65% 35%, #000 25%, transparent 100%);
|
||
pointer-events: none;
|
||
}
|
||
.te-kicker {
|
||
margin: 0 0 16px;
|
||
font-family: Consolas, monospace;
|
||
font-size: 12px;
|
||
letter-spacing: 0.3em;
|
||
color: #6d7cc9;
|
||
animation: te-rise 0.7s 0.05s both;
|
||
}
|
||
.te-hero h1 {
|
||
margin: 0 0 20px;
|
||
font-size: clamp(34px, 6vw, 62px);
|
||
font-weight: 900;
|
||
line-height: 1.2;
|
||
background: linear-gradient(100deg, #ffffff 30%, #9db6ff 70%, #d5b8ff);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
max-width: 720px;
|
||
animation: te-rise 0.7s 0.15s both;
|
||
}
|
||
.te-sub {
|
||
margin: 0 0 30px;
|
||
max-width: 600px;
|
||
font-size: 14.5px;
|
||
line-height: 2;
|
||
color: #a8b3e0;
|
||
animation: te-rise 0.7s 0.25s both;
|
||
}
|
||
.te-hero-btns {
|
||
display: flex;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
animation: te-rise 0.7s 0.35s both;
|
||
}
|
||
.te-btn-main {
|
||
background: linear-gradient(90deg, #4d74ff, #8a5cff);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
padding: 13px 32px;
|
||
border-radius: 2px;
|
||
box-shadow: 0 10px 30px rgba(77, 116, 255, 0.35);
|
||
}
|
||
.te-btn-main:hover {
|
||
filter: brightness(1.12);
|
||
}
|
||
.te-btn-sub {
|
||
border: 1px solid rgba(157, 182, 255, 0.5);
|
||
color: #9db6ff;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
padding: 13px 32px;
|
||
border-radius: 2px;
|
||
}
|
||
.te-btn-sub:hover {
|
||
border-color: #9db6ff;
|
||
color: #fff;
|
||
}
|
||
.te-glow {
|
||
position: absolute;
|
||
right: -120px;
|
||
top: 40px;
|
||
width: 380px;
|
||
height: 380px;
|
||
background: radial-gradient(circle, rgba(77, 116, 255, 0.35), transparent 65%);
|
||
filter: blur(20px);
|
||
pointer-events: none;
|
||
}
|
||
.te-net {
|
||
position: absolute;
|
||
right: clamp(-30px, 2vw, 60px);
|
||
top: 50%;
|
||
transform: translateY(-52%);
|
||
width: clamp(240px, 30vw, 380px);
|
||
height: auto;
|
||
pointer-events: none;
|
||
animation: te-fade 1.2s 0.3s both;
|
||
}
|
||
@keyframes te-fade {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
.te-net {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* 数据带：共边单元 + 角标 */
|
||
.te-stats {
|
||
max-width: 1100px;
|
||
margin: 0 auto 60px;
|
||
padding: 0 clamp(16px, 4vw, 26px);
|
||
}
|
||
.te-stats-grid {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
border-top: 1px solid rgba(110, 130, 255, 0.35);
|
||
border-left: 1px solid rgba(110, 130, 255, 0.35);
|
||
}
|
||
.te-stats-grid::before,
|
||
.te-stats-grid::after {
|
||
font-family: Consolas, monospace;
|
||
font-size: 15px;
|
||
color: rgba(157, 182, 255, 0.55);
|
||
position: absolute;
|
||
}
|
||
.te-stats-grid::before {
|
||
content: '+';
|
||
left: -6px;
|
||
top: -12px;
|
||
}
|
||
.te-stats-grid::after {
|
||
content: '+';
|
||
right: -6px;
|
||
bottom: -12px;
|
||
}
|
||
.te-stats-grid > div {
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
padding: 22px 20px 18px;
|
||
border-right: 1px solid rgba(110, 130, 255, 0.35);
|
||
border-bottom: 1px solid rgba(110, 130, 255, 0.35);
|
||
transition: background 0.25s ease;
|
||
animation: te-rise 0.6s calc(var(--i) * 0.07s) both;
|
||
}
|
||
.te-stats-grid > div:hover {
|
||
background: rgba(77, 116, 255, 0.08);
|
||
}
|
||
.te-stats b {
|
||
font-family: Consolas, monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: clamp(24px, 4vw, 32px);
|
||
font-weight: 700;
|
||
color: #9db6ff;
|
||
}
|
||
.te-stats span {
|
||
font-size: 12px;
|
||
color: #6d7cc9;
|
||
}
|
||
|
||
.te-sec {
|
||
max-width: 1100px;
|
||
margin: 0 auto 60px;
|
||
padding: 0 clamp(16px, 4vw, 26px);
|
||
}
|
||
.te-sechead {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.te-sechead span {
|
||
font-family: Consolas, monospace;
|
||
font-size: 11px;
|
||
letter-spacing: 0.22em;
|
||
color: #6d7cc9;
|
||
}
|
||
.te-sechead::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: rgba(110, 130, 255, 0.25);
|
||
}
|
||
.te-h2 {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
margin: 0 0 22px;
|
||
}
|
||
|
||
/* 企业级共边矩阵：无圆角、无间隙 */
|
||
.te-solutions {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
border-top: 1px solid rgba(110, 130, 255, 0.35);
|
||
border-left: 1px solid rgba(110, 130, 255, 0.35);
|
||
counter-reset: te-sol;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.te-solutions {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
@media (max-width: 560px) {
|
||
.te-solutions {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
.te-solution {
|
||
position: relative;
|
||
border-right: 1px solid rgba(110, 130, 255, 0.35);
|
||
border-bottom: 1px solid rgba(110, 130, 255, 0.35);
|
||
padding: 26px 22px 22px;
|
||
transition: background 0.25s ease;
|
||
counter-increment: te-sol;
|
||
animation: te-rise 0.55s calc(var(--i) * 0.06s) both;
|
||
}
|
||
.te-solution::before {
|
||
content: '0' counter(te-sol);
|
||
position: absolute;
|
||
right: 18px;
|
||
top: 18px;
|
||
font-family: Consolas, monospace;
|
||
font-size: 11px;
|
||
color: #4d5aa0;
|
||
}
|
||
.te-solution::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: -1px;
|
||
height: 2px;
|
||
width: 0;
|
||
background: linear-gradient(90deg, #4d74ff, #8a5cff);
|
||
transition: width 0.3s ease;
|
||
}
|
||
.te-solution:hover {
|
||
background: linear-gradient(180deg, rgba(77, 116, 255, 0.16), rgba(138, 92, 255, 0.08));
|
||
}
|
||
.te-solution:hover::after {
|
||
width: 100%;
|
||
}
|
||
.te-sol-ic {
|
||
width: 27px;
|
||
height: 27px;
|
||
color: #9db6ff;
|
||
transition: color 0.25s ease, filter 0.25s ease;
|
||
}
|
||
.te-solution:hover .te-sol-ic {
|
||
color: #d5b8ff;
|
||
filter: drop-shadow(0 0 7px rgba(157, 182, 255, 0.75));
|
||
}
|
||
.te-solution b {
|
||
display: block;
|
||
margin: 12px 0 6px;
|
||
font-size: 15.5px;
|
||
}
|
||
.te-solution p {
|
||
margin: 0 0 14px;
|
||
font-size: 12.5px;
|
||
line-height: 1.8;
|
||
color: #a8b3e0;
|
||
}
|
||
.te-solution i {
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
color: #7c9bff;
|
||
transition: letter-spacing 0.25s ease;
|
||
}
|
||
.te-solution:hover i {
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.te-products {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
.te-product {
|
||
position: relative;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(110, 130, 255, 0.2);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
.te-product::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: -45%;
|
||
width: 32%;
|
||
background: linear-gradient(105deg, transparent, rgba(157, 182, 255, 0.14), transparent);
|
||
transform: translateX(0) skewX(-14deg);
|
||
transition: transform 0.55s ease;
|
||
pointer-events: none;
|
||
}
|
||
.te-product:hover {
|
||
transform: translateY(-4px);
|
||
border-color: #7c9bff;
|
||
}
|
||
.te-product:hover::after {
|
||
transform: translateX(520%) skewX(-14deg);
|
||
}
|
||
.te-product img {
|
||
width: 100%;
|
||
aspect-ratio: 16 / 9;
|
||
object-fit: cover;
|
||
display: block;
|
||
opacity: 0.9;
|
||
}
|
||
.te-product > div {
|
||
padding: 14px 16px 16px;
|
||
}
|
||
.te-product span {
|
||
font-family: Consolas, monospace;
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
color: #b58cff;
|
||
border: 1px solid rgba(181, 140, 255, 0.4);
|
||
padding: 2px 9px;
|
||
border-radius: 2px;
|
||
}
|
||
.te-product h3 {
|
||
margin: 10px 0 6px;
|
||
font-size: 16px;
|
||
}
|
||
.te-product p {
|
||
margin: 0;
|
||
font-size: 12.5px;
|
||
line-height: 1.8;
|
||
color: #a8b3e0;
|
||
}
|
||
|
||
/* 技术底座：编号行式清单 */
|
||
.te-services {
|
||
border-top: 1px solid rgba(110, 130, 255, 0.3);
|
||
}
|
||
.te-service {
|
||
display: grid;
|
||
grid-template-columns: 52px 42px 1fr 32px;
|
||
align-items: center;
|
||
gap: 18px;
|
||
padding: 20px 10px;
|
||
border-bottom: 1px solid rgba(110, 130, 255, 0.3);
|
||
transition: background 0.25s ease, padding-left 0.25s ease;
|
||
animation: te-rise 0.55s calc(var(--i) * 0.08s) both;
|
||
}
|
||
.te-service:hover {
|
||
background: linear-gradient(90deg, rgba(77, 116, 255, 0.12), transparent 70%);
|
||
padding-left: 18px;
|
||
}
|
||
.te-svc-idx {
|
||
font-family: Consolas, monospace;
|
||
font-size: 12px;
|
||
letter-spacing: 0.1em;
|
||
color: #4d5aa0;
|
||
}
|
||
.te-svc-ic {
|
||
width: 30px;
|
||
height: 30px;
|
||
color: #9db6ff;
|
||
transition: color 0.25s ease;
|
||
}
|
||
.te-service:hover .te-svc-ic {
|
||
color: #d5b8ff;
|
||
}
|
||
.te-svc-txt b {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
font-size: 15px;
|
||
}
|
||
.te-svc-txt p {
|
||
margin: 0;
|
||
font-size: 12.5px;
|
||
line-height: 1.7;
|
||
color: #a8b3e0;
|
||
}
|
||
.te-svc-arrow {
|
||
color: #7c9bff;
|
||
font-size: 15px;
|
||
transition: transform 0.25s ease;
|
||
}
|
||
.te-service:hover .te-svc-arrow {
|
||
transform: translateX(6px);
|
||
}
|
||
@media (max-width: 560px) {
|
||
.te-service {
|
||
grid-template-columns: 36px 32px 1fr;
|
||
gap: 12px;
|
||
}
|
||
.te-svc-arrow {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* 伙伴墙：共边网格 */
|
||
.te-partners {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||
border-top: 1px solid rgba(110, 130, 255, 0.3);
|
||
border-left: 1px solid rgba(110, 130, 255, 0.3);
|
||
margin-bottom: 34px;
|
||
}
|
||
.te-partners span {
|
||
border-right: 1px solid rgba(110, 130, 255, 0.3);
|
||
border-bottom: 1px solid rgba(110, 130, 255, 0.3);
|
||
color: #a8b3e0;
|
||
font-size: 13px;
|
||
padding: 18px 12px;
|
||
text-align: center;
|
||
transition: background 0.25s ease, color 0.25s ease;
|
||
}
|
||
.te-partners span:hover {
|
||
background: rgba(77, 116, 255, 0.1);
|
||
color: #fff;
|
||
}
|
||
.te-quote {
|
||
margin: 0;
|
||
max-width: 680px;
|
||
font-size: 15.5px;
|
||
line-height: 2;
|
||
color: #c6cff2;
|
||
border-left: 2px solid #7c9bff;
|
||
padding-left: 22px;
|
||
}
|
||
.te-quote cite {
|
||
display: block;
|
||
margin-top: 10px;
|
||
font-style: normal;
|
||
font-size: 12.5px;
|
||
color: #6d7cc9;
|
||
}
|
||
|
||
.te-footer {
|
||
border-top: 1px solid rgba(110, 130, 255, 0.22);
|
||
text-align: center;
|
||
padding: 32px 20px 44px;
|
||
}
|
||
.te-footer b {
|
||
font-size: 15px;
|
||
}
|
||
.te-footer p {
|
||
margin: 8px 0 0;
|
||
font-size: 12.5px;
|
||
color: #a8b3e0;
|
||
}
|
||
.te-links a {
|
||
color: #9db6ff;
|
||
text-decoration: none;
|
||
}
|
||
.te-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.te-copy {
|
||
font-size: 11px !important;
|
||
color: #6d7cc9 !important;
|
||
}
|
||
</style>
|