684 lines
18 KiB
Vue
684 lines
18 KiB
Vue
<script setup>
|
||
import { corpProfiles } from '../../data/corpProfiles'
|
||
|
||
const c = corpProfiles.tech
|
||
const process1 = [
|
||
{ node: '28nm', year: '2018', use: '车规 MCU' },
|
||
{ node: '14nm', year: '2020', use: '边缘 NPU' },
|
||
{ node: '7nm', year: '2023', use: '旗舰 X1' },
|
||
{ node: '5nm', year: '2026', use: '下一代 · 流片中' },
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="tc">
|
||
<nav class="tc-nav">
|
||
<b class="tc-logo">▣ QLEAP FAB</b>
|
||
<div class="tc-menu">
|
||
<a href="#process">制程演进</a>
|
||
<a href="#wafer">晶圆良率</a>
|
||
</div>
|
||
<router-link to="/corp" class="tc-back">返回合集</router-link>
|
||
</nav>
|
||
|
||
<header class="tc-hero">
|
||
<h1>纳米之间，<br /><span>皆是山海</span></h1>
|
||
<p class="tc-sub">{{ c.name }}半导体事业部 · 从架构设计到流片量产的全链路能力</p>
|
||
<svg class="tc-die" viewBox="0 0 440 300" aria-hidden="true">
|
||
<!-- 图签 -->
|
||
<g font-family="Consolas, monospace" font-size="8.5" fill="#3f6d8a" letter-spacing="1.5">
|
||
<text x="20" y="16">DWG NO. QL-X1-DS-2026 · REV C</text>
|
||
<text x="20" y="294">SCALE 400:1 · UNIT mm</text>
|
||
<text x="370" y="278" text-anchor="middle" letter-spacing="1">5 mm</text>
|
||
</g>
|
||
<g stroke="#3f6d8a" stroke-width="1">
|
||
<path d="M330 288 H 410 M330 283 V 293 M370 285 V 291 M410 283 V 293" />
|
||
</g>
|
||
<!-- 走线 -->
|
||
<g stroke="rgba(80, 220, 255, 0.4)" stroke-width="1.6" fill="none">
|
||
<path id="tc-t1" d="M145 118 H 80 V 48 H 20" />
|
||
<path id="tc-t2" d="M145 150 H 60 V 236 H 14" />
|
||
<path id="tc-t3" d="M295 118 H 356 V 40 H 424" />
|
||
<path id="tc-t4" d="M295 182 H 372 V 250 H 430" />
|
||
<path d="M145 182 H 96 V 268 H 30" />
|
||
<path d="M295 150 H 388 V 140" />
|
||
<path d="M178 98 V 54 H 120 M 220 98 V 30 M 262 98 V 54 H 330" />
|
||
<path d="M178 202 V 252 H 110 M 220 202 V 272 M 262 202 V 252 H 344" />
|
||
</g>
|
||
<!-- 过孔 -->
|
||
<g fill="#0a2438" stroke="rgba(80, 220, 255, 0.6)" stroke-width="1.4">
|
||
<circle cx="20" cy="48" r="4" /><circle cx="14" cy="236" r="4" /><circle cx="424" cy="40" r="4" />
|
||
<circle cx="430" cy="250" r="4" /><circle cx="30" cy="268" r="4" /><circle cx="388" cy="140" r="4" />
|
||
<circle cx="120" cy="54" r="4" /><circle cx="220" cy="30" r="4" /><circle cx="330" cy="54" r="4" />
|
||
<circle cx="110" cy="252" r="4" /><circle cx="220" cy="272" r="4" /><circle cx="344" cy="252" r="4" />
|
||
</g>
|
||
<!-- 封装 -->
|
||
<g>
|
||
<rect x="145" y="98" width="150" height="104" rx="6" fill="#0a2438" stroke="#50dcff" stroke-width="2" />
|
||
<g fill="#50dcff" opacity="0.55">
|
||
<rect x="152" y="92" width="8" height="6" /><rect x="176" y="92" width="8" height="6" /><rect x="200" y="92" width="8" height="6" /><rect x="224" y="92" width="8" height="6" /><rect x="248" y="92" width="8" height="6" /><rect x="272" y="92" width="8" height="6" />
|
||
<rect x="152" y="202" width="8" height="6" /><rect x="176" y="202" width="8" height="6" /><rect x="200" y="202" width="8" height="6" /><rect x="224" y="202" width="8" height="6" /><rect x="248" y="202" width="8" height="6" /><rect x="272" y="202" width="8" height="6" />
|
||
</g>
|
||
<rect x="172" y="120" width="96" height="60" fill="#062030" stroke="rgba(80,220,255,0.7)" stroke-width="1.4" />
|
||
<g stroke="rgba(80, 220, 255, 0.28)" stroke-width="1">
|
||
<path d="M184 120 V 180 M 196 120 V 180 M 208 120 V 180 M 232 120 V 180 M 244 120 V 180 M 256 120 V 180" />
|
||
<path d="M172 132 H 268 M172 144 H 268 M172 168 H 268" />
|
||
</g>
|
||
<rect x="216" y="146" width="14" height="10" fill="#50dcff" opacity="0.85">
|
||
<animate attributeName="opacity" values="0.85;0.3;0.85" dur="2.2s" repeatCount="indefinite" />
|
||
</rect>
|
||
<circle cx="156" cy="110" r="3" fill="#50dcff" />
|
||
<text x="220" y="228" text-anchor="middle" font-family="Consolas, monospace" font-size="11" letter-spacing="2" fill="#8fb8cc">QLEAP X1 · 7nm</text>
|
||
</g>
|
||
<!-- 信号脉冲 -->
|
||
<g fill="#7ff0ff">
|
||
<circle r="3"><animateMotion dur="3.2s" repeatCount="indefinite"><mpath href="#tc-t1" /></animateMotion></circle>
|
||
<circle r="3"><animateMotion dur="4s" begin="-1.2s" repeatCount="indefinite"><mpath href="#tc-t2" /></animateMotion></circle>
|
||
<circle r="3"><animateMotion dur="3.6s" begin="-0.6s" repeatCount="indefinite"><mpath href="#tc-t3" /></animateMotion></circle>
|
||
<circle r="3"><animateMotion dur="4.4s" begin="-2s" repeatCount="indefinite"><mpath href="#tc-t4" /></animateMotion></circle>
|
||
</g>
|
||
</svg>
|
||
</header>
|
||
|
||
<!-- 制程演进 -->
|
||
<section id="process" class="tc-sec">
|
||
<div class="tc-sechead"><span>SHEET 01 / PROCESS ROADMAP</span></div>
|
||
<h2 class="tc-h2">制程演进</h2>
|
||
<div class="tc-process">
|
||
<div v-for="(p, i) in process1" :key="p.node" class="tc-node" :class="{ now: i === process1.length - 1 }" :style="{ '--i': i }">
|
||
<i class="tc-node-via" aria-hidden="true"></i>
|
||
<span class="tc-node-year">{{ p.year }}</span>
|
||
<b>{{ p.node }}</b>
|
||
<p>{{ p.use }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 晶圆 -->
|
||
<section id="wafer" class="tc-sec tc-wafer-sec">
|
||
<div class="tc-wafer-wrap">
|
||
<div class="tc-wafer" aria-hidden="true">
|
||
<i v-for="n in 52" :key="n" :class="{ bad: [7, 19, 33, 46].includes(n) }"></i>
|
||
<em class="tc-wafer-scan" aria-hidden="true"></em>
|
||
</div>
|
||
<div class="tc-wafer-legend" aria-hidden="true">
|
||
<span><i class="ok"></i>良品 ×48</span>
|
||
<span><i class="ng"></i>瑕疵 ×4</span>
|
||
<span class="tc-wafer-id">300MM · LOT#A7</span>
|
||
</div>
|
||
</div>
|
||
<div class="tc-wafer-txt">
|
||
<div class="tc-sechead"><span>SHEET 02 / YIELD REPORT</span></div>
|
||
<h2 class="tc-h2">晶圆良率 92.3%</h2>
|
||
<p>每一片 12 英寸晶圆上有 52 颗跃迁 X1 die。图中亮块为良品、暗块为瑕疵——四颗不合格，我们全部激光打标销毁，绝不流入市场。</p>
|
||
<div class="tc-services">
|
||
<div v-for="(s, i) in c.services" :key="s.name" class="tc-service" :style="{ '--i': i }">
|
||
<b><i class="tc-svc-code">MOD-0{{ i + 1 }}</i>{{ s.name }}</b>
|
||
<p>{{ s.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 产品 -->
|
||
<section class="tc-sec">
|
||
<div class="tc-sechead"><span>SHEET 03 / PRODUCT MATRIX</span></div>
|
||
<h2 class="tc-h2">产品矩阵</h2>
|
||
<div class="tc-products">
|
||
<article v-for="(p, i) in c.cases" :key="p.name" class="tc-product" :style="{ '--i': i }">
|
||
<img :src="p.image" :alt="p.name" loading="lazy" />
|
||
<div>
|
||
<div class="tc-prod-head">
|
||
<span>{{ p.tag }}</span>
|
||
<i>P/N QL-10{{ i + 1 }}</i>
|
||
</div>
|
||
<h3>{{ p.name }}</h3>
|
||
<p>{{ p.desc }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="tc-stats">
|
||
<div v-for="s in c.stats" :key="s.label"><b>{{ s.value }}</b><span>{{ s.label }}</span></div>
|
||
</div>
|
||
|
||
<footer class="tc-footer">
|
||
<b>{{ c.name }} · 半导体事业部</b>
|
||
<p>{{ c.contacts.phone }} · {{ c.contacts.email }} · {{ c.contacts.addr }}</p>
|
||
<p class="tc-links">
|
||
<router-link to="/corp">返回企业官网合集</router-link> ·
|
||
<router-link to="/">个人页面合集</router-link>
|
||
</p>
|
||
<p class="tc-copy">© {{ c.founded }}–2026 · 风格演示页，制程与良率均为虚构</p>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.tc {
|
||
min-height: 100vh;
|
||
background:
|
||
repeating-linear-gradient(0deg, transparent 0 34px, rgba(80, 220, 255, 0.05) 34px 35px),
|
||
repeating-linear-gradient(90deg, transparent 0 34px, rgba(80, 220, 255, 0.05) 34px 35px),
|
||
#041220;
|
||
color: #d8f2ff;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
overflow-x: clip;
|
||
}
|
||
|
||
@keyframes tc-rise {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(14px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
@keyframes tc-fade {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
@keyframes tc-blink {
|
||
50% { opacity: 0; }
|
||
}
|
||
|
||
.tc-nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 40;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 22px;
|
||
padding: 13px clamp(16px, 5vw, 48px);
|
||
background: rgba(4, 18, 32, 0.92);
|
||
backdrop-filter: blur(8px);
|
||
border-bottom: 1px solid rgba(80, 220, 255, 0.3);
|
||
}
|
||
.tc-logo {
|
||
font-family: Consolas, monospace;
|
||
font-size: 15px;
|
||
color: #50dcff;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.tc-menu {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
.tc-menu a {
|
||
color: #8fb8cc;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
}
|
||
.tc-menu a:hover {
|
||
color: #50dcff;
|
||
}
|
||
@media (max-width: 600px) {
|
||
.tc-menu {
|
||
display: none;
|
||
}
|
||
}
|
||
.tc-back {
|
||
margin-left: auto;
|
||
color: #041220;
|
||
background: #50dcff;
|
||
text-decoration: none;
|
||
font-size: 12.5px;
|
||
font-weight: 700;
|
||
padding: 6px 16px;
|
||
border-radius: 4px;
|
||
}
|
||
.tc-back:hover {
|
||
background: #a8ecff;
|
||
}
|
||
|
||
.tc-hero {
|
||
position: relative;
|
||
max-width: 1060px;
|
||
margin: 0 auto;
|
||
padding: clamp(60px, 10vw, 110px) clamp(16px, 4vw, 26px) 70px;
|
||
}
|
||
.tc-hero h1 {
|
||
margin: 0 0 16px;
|
||
font-size: clamp(36px, 7vw, 72px);
|
||
font-weight: 900;
|
||
line-height: 1.15;
|
||
animation: tc-rise 0.7s 0.05s both;
|
||
}
|
||
.tc-hero h1 span {
|
||
color: #50dcff;
|
||
}
|
||
@media (min-width: 761px) {
|
||
.tc-hero h1,
|
||
.tc-sub {
|
||
max-width: 52%;
|
||
}
|
||
}
|
||
.tc-sub {
|
||
margin: 0;
|
||
max-width: 480px;
|
||
font-size: 14px;
|
||
line-height: 2;
|
||
color: #8fb8cc;
|
||
animation: tc-rise 0.7s 0.18s both;
|
||
}
|
||
.tc-die {
|
||
position: absolute;
|
||
right: clamp(-20px, 3vw, 60px);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: clamp(300px, 36vw, 460px);
|
||
height: auto;
|
||
pointer-events: none;
|
||
animation: tc-fade 1.2s 0.3s both;
|
||
}
|
||
|
||
.tc-sec {
|
||
max-width: 1060px;
|
||
margin: 0 auto 56px;
|
||
padding: 0 clamp(16px, 4vw, 26px);
|
||
}
|
||
.tc-sechead {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.tc-sechead span {
|
||
font-family: Consolas, monospace;
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.22em;
|
||
color: #3f6d8a;
|
||
}
|
||
.tc-sechead::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: rgba(80, 220, 255, 0.2);
|
||
}
|
||
.tc-h2 {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
margin: 0 0 20px;
|
||
}
|
||
|
||
/* 制程演进：路线轨道 */
|
||
.tc-process {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||
}
|
||
.tc-node {
|
||
position: relative;
|
||
border-top: 2px solid rgba(80, 220, 255, 0.28);
|
||
padding: 20px 22px 6px 0;
|
||
animation: tc-rise 0.6s calc(var(--i) * 0.09s) both;
|
||
}
|
||
.tc-node-via {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -5px;
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #041220;
|
||
border: 2px solid rgba(80, 220, 255, 0.7);
|
||
}
|
||
.tc-node-year {
|
||
display: block;
|
||
font-family: Consolas, monospace;
|
||
font-size: 11.5px;
|
||
color: #5d87a0;
|
||
margin-bottom: 2px;
|
||
}
|
||
.tc-node b {
|
||
display: block;
|
||
font-family: Consolas, monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 30px;
|
||
color: #50dcff;
|
||
}
|
||
.tc-node p {
|
||
margin: 8px 0 0;
|
||
font-size: 13px;
|
||
color: #b3d9e8;
|
||
}
|
||
.tc-node.now {
|
||
border-top-color: #50dcff;
|
||
}
|
||
.tc-node.now .tc-node-via {
|
||
background: #50dcff;
|
||
border-color: #50dcff;
|
||
}
|
||
.tc-node.now .tc-node-via::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -7px;
|
||
border: 1px solid rgba(80, 220, 255, 0.7);
|
||
animation: tc-halo 2s ease-out infinite;
|
||
}
|
||
@keyframes tc-halo {
|
||
from {
|
||
transform: scale(0.5);
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
transform: scale(1.6);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
.tc-node.now b {
|
||
text-shadow: 0 0 18px rgba(80, 220, 255, 0.55);
|
||
}
|
||
.tc-node.now p::after {
|
||
content: '_';
|
||
color: #50dcff;
|
||
animation: tc-blink 1.1s steps(1) infinite;
|
||
}
|
||
|
||
/* 晶圆图 */
|
||
.tc-wafer-sec {
|
||
display: grid;
|
||
grid-template-columns: minmax(220px, 300px) 1fr;
|
||
gap: 34px;
|
||
align-items: start;
|
||
}
|
||
.tc-wafer {
|
||
position: relative;
|
||
aspect-ratio: 1;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, #0a2438 30%, #06182a 70%);
|
||
border: 2px solid rgba(80, 220, 255, 0.5);
|
||
display: grid;
|
||
grid-template-columns: repeat(8, 1fr);
|
||
gap: 4px;
|
||
padding: 24px;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 40px rgba(80, 220, 255, 0.2);
|
||
}
|
||
/* 光刻对位十字线 */
|
||
.tc-wafer::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(80, 220, 255, 0.2) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
|
||
linear-gradient(to right, transparent calc(50% - 0.5px), rgba(80, 220, 255, 0.2) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
|
||
pointer-events: none;
|
||
}
|
||
/* 定位缺口 notch */
|
||
.tc-wafer::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -3px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 20px;
|
||
height: 10px;
|
||
background: #041220;
|
||
border-top: 2px solid rgba(80, 220, 255, 0.5);
|
||
border-radius: 6px 6px 0 0;
|
||
}
|
||
.tc-wafer i {
|
||
background: rgba(80, 220, 255, 0.5);
|
||
border-radius: 2px;
|
||
animation: tc-die-blink 2.6s ease-in-out infinite;
|
||
}
|
||
.tc-wafer i:nth-child(3n) {
|
||
animation-delay: 0.6s;
|
||
}
|
||
.tc-wafer i:nth-child(5n) {
|
||
animation-delay: 1.2s;
|
||
}
|
||
.tc-wafer i.bad {
|
||
background: rgba(255, 90, 90, 0.35);
|
||
animation: none;
|
||
}
|
||
@keyframes tc-die-blink {
|
||
50% { background: rgba(80, 220, 255, 0.85); }
|
||
}
|
||
.tc-wafer-scan {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: -24%;
|
||
height: 22%;
|
||
background: linear-gradient(180deg, transparent, rgba(80, 220, 255, 0.16), transparent);
|
||
animation: tc-scan 4.5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
@keyframes tc-scan {
|
||
to { transform: translateY(560%); }
|
||
}
|
||
.tc-wafer-legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px 14px;
|
||
margin-top: 14px;
|
||
font-family: Consolas, monospace;
|
||
font-size: 11.5px;
|
||
color: #5d87a0;
|
||
}
|
||
.tc-wafer-legend span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.tc-wafer-legend i {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 2px;
|
||
}
|
||
.tc-wafer-legend i.ok {
|
||
background: rgba(80, 220, 255, 0.7);
|
||
}
|
||
.tc-wafer-legend i.ng {
|
||
background: rgba(255, 90, 90, 0.5);
|
||
}
|
||
.tc-wafer-id {
|
||
margin-left: auto;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.tc-wafer-txt p {
|
||
margin: 0 0 20px;
|
||
font-size: 13px;
|
||
line-height: 2;
|
||
color: #8fb8cc;
|
||
}
|
||
.tc-services {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
.tc-service {
|
||
background: rgba(80, 220, 255, 0.04);
|
||
border: 1px solid rgba(80, 220, 255, 0.22);
|
||
border-left: 2px solid #50dcff;
|
||
border-radius: 2px;
|
||
padding: 14px 16px;
|
||
transition: background 0.2s ease, border-color 0.2s ease;
|
||
animation: tc-rise 0.55s calc(var(--i) * 0.07s) both;
|
||
}
|
||
.tc-service:hover {
|
||
background: rgba(80, 220, 255, 0.09);
|
||
border-color: rgba(80, 220, 255, 0.5);
|
||
border-left-color: #50dcff;
|
||
}
|
||
.tc-svc-code {
|
||
font-style: normal;
|
||
font-family: Consolas, monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
color: #50dcff;
|
||
border: 1px solid rgba(80, 220, 255, 0.35);
|
||
border-radius: 2px;
|
||
padding: 1.5px 6px;
|
||
margin-right: 8px;
|
||
vertical-align: 1px;
|
||
}
|
||
.tc-service b {
|
||
display: block;
|
||
font-size: 13.5px;
|
||
margin-bottom: 7px;
|
||
}
|
||
.tc-service p {
|
||
margin: 0;
|
||
font-size: 12px;
|
||
line-height: 1.7;
|
||
color: #8fb8cc;
|
||
}
|
||
|
||
/* 产品：工程图纸框 */
|
||
.tc-products {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
.tc-product {
|
||
position: relative;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(80, 220, 255, 0.25);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||
animation: tc-rise 0.6s calc(var(--i) * 0.08s) both;
|
||
}
|
||
.tc-product::before,
|
||
.tc-product::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 11px;
|
||
height: 11px;
|
||
opacity: 0.6;
|
||
transition: opacity 0.2s ease;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
.tc-product::before {
|
||
left: -1px;
|
||
top: -1px;
|
||
border-top: 2px solid #50dcff;
|
||
border-left: 2px solid #50dcff;
|
||
}
|
||
.tc-product::after {
|
||
right: -1px;
|
||
bottom: -1px;
|
||
border-bottom: 2px solid #50dcff;
|
||
border-right: 2px solid #50dcff;
|
||
}
|
||
.tc-product:hover {
|
||
transform: translateY(-4px);
|
||
border-color: #50dcff;
|
||
box-shadow: 0 0 26px rgba(80, 220, 255, 0.14);
|
||
}
|
||
.tc-product:hover::before,
|
||
.tc-product:hover::after {
|
||
opacity: 1;
|
||
}
|
||
.tc-product img {
|
||
width: 100%;
|
||
aspect-ratio: 16 / 9;
|
||
object-fit: cover;
|
||
display: block;
|
||
filter: hue-rotate(160deg) saturate(0.7);
|
||
opacity: 0.88;
|
||
transition: filter 0.3s ease, opacity 0.3s ease;
|
||
}
|
||
.tc-product:hover img {
|
||
filter: none;
|
||
opacity: 1;
|
||
}
|
||
.tc-product > div {
|
||
padding: 12px 16px 16px;
|
||
}
|
||
.tc-prod-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: Consolas, monospace;
|
||
}
|
||
.tc-prod-head span {
|
||
font-size: 11px;
|
||
color: #50dcff;
|
||
}
|
||
.tc-prod-head i {
|
||
font-style: normal;
|
||
font-size: 10px;
|
||
letter-spacing: 0.06em;
|
||
color: #3f6d8a;
|
||
}
|
||
.tc-product h3 {
|
||
margin: 8px 0 6px;
|
||
font-size: 15.5px;
|
||
}
|
||
.tc-product p {
|
||
margin: 0;
|
||
font-size: 12.5px;
|
||
line-height: 1.8;
|
||
color: #8fb8cc;
|
||
}
|
||
|
||
.tc-stats {
|
||
max-width: 1060px;
|
||
margin: 0 auto 56px;
|
||
padding: 22px clamp(16px, 4vw, 26px);
|
||
border: 1px solid rgba(80, 220, 255, 0.3);
|
||
border-left: none;
|
||
border-right: none;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 14px;
|
||
text-align: center;
|
||
}
|
||
.tc-stats b {
|
||
display: block;
|
||
font-family: Consolas, monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: clamp(24px, 4vw, 32px);
|
||
color: #50dcff;
|
||
}
|
||
.tc-stats span {
|
||
font-size: 12px;
|
||
color: #5d87a0;
|
||
}
|
||
|
||
.tc-footer {
|
||
text-align: center;
|
||
padding: 8px 20px 44px;
|
||
}
|
||
.tc-footer b {
|
||
font-size: 14.5px;
|
||
}
|
||
.tc-footer p {
|
||
margin: 8px 0 0;
|
||
font-size: 12.5px;
|
||
color: #8fb8cc;
|
||
}
|
||
.tc-links a {
|
||
color: #50dcff;
|
||
text-decoration: none;
|
||
}
|
||
.tc-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.tc-copy {
|
||
font-size: 11px !important;
|
||
color: #5d87a0 !important;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.tc-die {
|
||
display: none;
|
||
}
|
||
.tc-wafer-sec {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.tc-wafer-wrap {
|
||
max-width: 280px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
</style>
|