1026 lines
28 KiB
Vue
1026 lines
28 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { corpProfiles } from '../../data/corpProfiles'
|
||
|
||
const c = corpProfiles.ai
|
||
|
||
/* 参数铭牌 */
|
||
const plateIdx = ref(-1)
|
||
const plate = ref(null)
|
||
function openPlate(i) {
|
||
plateIdx.value = i
|
||
plate.value = c.cases[i]
|
||
}
|
||
function closePlate() {
|
||
plateIdx.value = -1
|
||
plate.value = null
|
||
}
|
||
|
||
const specs = [
|
||
{ k: '重复定位精度', v: '±0.02mm' },
|
||
{ k: '最大负载', v: '35kg' },
|
||
{ k: '工作半径', v: '1.8m' },
|
||
{ k: '关节自由度', v: '6 轴' },
|
||
{ k: '循环节拍', v: '0.38s' },
|
||
{ k: '防护等级', v: 'IP67' },
|
||
]
|
||
const scenes = [
|
||
{ name: '精密装配', desc: '3C 产线螺丝锁附与部件贴合' },
|
||
{ name: '智能分拣', desc: '视觉引导抓取，混料分拣不出错' },
|
||
{ name: '焊接打磨', desc: '轨迹自学习，焊缝一致性 99.4%' },
|
||
{ name: '实验室自动化', desc: '移液、离心、检测全流程无人' },
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="ar">
|
||
<nav class="ar-nav">
|
||
<b class="ar-logo">🦾 深思·机器人</b>
|
||
<div class="ar-menu">
|
||
<a href="#arm">整机参数</a>
|
||
<a href="#scenes">场景</a>
|
||
</div>
|
||
<router-link to="/corp" class="ar-back">返回合集</router-link>
|
||
</nav>
|
||
|
||
<header class="ar-hero">
|
||
<div class="ar-hero-txt">
|
||
<p class="ar-kicker">DEEPTHINK ROBOTICS · DT-ARM 6</p>
|
||
<h1>给产线装上<br /><span>不知疲倦的手</span></h1>
|
||
<p class="ar-sub">搭载深思视觉大模型的六轴协作机械臂，装配、分拣、焊接一臂多用，两小时完成产线换型。</p>
|
||
<div class="ar-hero-btns">
|
||
<a href="#scenes" class="ar-btn-main">查看场景方案</a>
|
||
<a href="#arm" class="ar-btn-sub">下载规格书</a>
|
||
</div>
|
||
</div>
|
||
<div class="ar-arm" aria-hidden="true">
|
||
<svg class="ar-rig" viewBox="0 0 380 332">
|
||
<defs>
|
||
<linearGradient id="ar-metal" x1="0" y1="0" x2="1" y2="0">
|
||
<stop offset="0" stop-color="#55585f" />
|
||
<stop offset="0.5" stop-color="#3a3d44" />
|
||
<stop offset="1" stop-color="#2a2c33" />
|
||
</linearGradient>
|
||
<pattern id="ar-hz" width="14" height="8" patternUnits="userSpaceOnUse" patternTransform="skewX(-30)">
|
||
<rect width="7" height="8" fill="#ffb020" />
|
||
<rect x="7" width="7" height="8" fill="#22242a" />
|
||
</pattern>
|
||
</defs>
|
||
|
||
<!-- 地面 -->
|
||
<line x1="8" y1="292" x2="372" y2="292" stroke="#3a3d44" stroke-width="2" />
|
||
<line x1="30" y1="302" x2="120" y2="302" stroke="#2e3037" stroke-width="2" />
|
||
|
||
<!-- 传送带与纸箱 -->
|
||
<g>
|
||
<rect x="248" y="256" width="124" height="16" rx="8" fill="#26282e" stroke="#4b4e55" />
|
||
<circle cx="262" cy="264" r="5" fill="#16171b" stroke="#55585f" />
|
||
<circle cx="296" cy="264" r="5" fill="#16171b" stroke="#55585f" />
|
||
<circle cx="330" cy="264" r="5" fill="#16171b" stroke="#55585f" />
|
||
<circle cx="358" cy="264" r="5" fill="#16171b" stroke="#55585f" />
|
||
<g class="ar-box">
|
||
<rect x="288" y="224" width="32" height="32" rx="3" fill="#7a5230" stroke="#54371e" stroke-width="1.5" />
|
||
<line x1="304" y1="224" x2="304" y2="256" stroke="#54371e" stroke-width="1.5" />
|
||
<rect x="296" y="224" width="16" height="7" fill="#c8a06a" opacity="0.7" />
|
||
</g>
|
||
</g>
|
||
|
||
<!-- 基座 -->
|
||
<rect x="94" y="250" width="112" height="42" rx="6" fill="#26282e" stroke="#4b4e55" />
|
||
<rect x="102" y="274" width="96" height="10" fill="url(#ar-hz)" opacity="0.85" rx="2" />
|
||
<text x="150" y="266" text-anchor="middle" font-family="Consolas, monospace" font-size="9" fill="#8b8d92">DT-ARM 6</text>
|
||
|
||
<!-- 六轴臂：三级嵌套关节 -->
|
||
<g class="ar-j1">
|
||
<rect x="137" y="166" width="26" height="92" rx="12" fill="url(#ar-metal)" stroke="#55585f" stroke-width="1.5" />
|
||
<circle cx="150" cy="252" r="17" fill="#2e3037" stroke="#ffb020" stroke-width="2.5" />
|
||
<circle cx="150" cy="252" r="6" fill="#16171b" stroke="#55585f" />
|
||
<g class="ar-j2">
|
||
<rect x="141" y="94" width="18" height="88" rx="9" fill="url(#ar-metal)" stroke="#55585f" stroke-width="1.5" />
|
||
<circle cx="150" cy="176" r="12" fill="#2e3037" stroke="#ffb020" stroke-width="2.5" />
|
||
<circle cx="150" cy="176" r="4" fill="#16171b" />
|
||
<g class="ar-j3">
|
||
<circle cx="150" cy="100" r="9" fill="#2e3037" stroke="#ffb020" stroke-width="2.5" />
|
||
<rect x="145" y="62" width="10" height="34" rx="4" fill="#4b4e55" stroke="#55585f" />
|
||
<!-- 夹爪 -->
|
||
<path d="M138 62 Q134 48 142 42" fill="none" stroke="#a7a9ad" stroke-width="4.5" stroke-linecap="round" />
|
||
<path d="M162 62 Q166 48 158 42" fill="none" stroke="#a7a9ad" stroke-width="4.5" stroke-linecap="round" />
|
||
<rect x="140" y="56" width="20" height="9" rx="3" fill="#34363c" stroke="#55585f" />
|
||
<circle class="ar-led" cx="150" cy="60" r="2.6" fill="#58e0a0" />
|
||
</g>
|
||
</g>
|
||
</g>
|
||
|
||
<!-- 状态标签 -->
|
||
<g font-family="Consolas, monospace" font-size="9" fill="#8b8d92">
|
||
<rect x="238" y="96" width="112" height="44" rx="4" fill="rgba(34,36,42,0.9)" stroke="#34363c" />
|
||
<text x="248" y="113">STATUS <tspan fill="#58e0a0">RUNNING</tspan></text>
|
||
<text x="248" y="129">CYCLE <tspan fill="#ffb020">0.38s</tspan></text>
|
||
<line x1="238" y1="118" x2="196" y2="130" stroke="#4b4e55" stroke-dasharray="3 3" />
|
||
</g>
|
||
|
||
<!-- 图纸标注 -->
|
||
<g font-family="Consolas, monospace" font-size="8.5" fill="#75787f" stroke="#565962" stroke-width="1">
|
||
<line x1="150" y1="310" x2="330" y2="310" stroke-dasharray="4 3" />
|
||
<line x1="150" y1="304" x2="150" y2="316" />
|
||
<line x1="330" y1="304" x2="330" y2="316" />
|
||
<path d="M158 307l-8 3 8 3" fill="none" />
|
||
<path d="M322 307l8 3-8 3" fill="none" />
|
||
<text x="240" y="326" text-anchor="middle" stroke="none">R 1800</text>
|
||
<line x1="56" y1="252" x2="56" y2="56" stroke-dasharray="4 3" />
|
||
<line x1="50" y1="252" x2="62" y2="252" />
|
||
<line x1="50" y1="56" x2="62" y2="56" />
|
||
<text x="44" y="158" text-anchor="middle" stroke="none" transform="rotate(-90 44 158)">H 1120</text>
|
||
<path d="M18 36h10M23 31v10" />
|
||
<path d="M352 196h10M357 191v10" />
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 参数 -->
|
||
<section id="arm" class="ar-sec">
|
||
<h2 class="ar-h2">// DT-ARM 6 整机参数</h2>
|
||
<div class="ar-plate">
|
||
<i class="ar-screw tl" aria-hidden="true"></i>
|
||
<i class="ar-screw tr" aria-hidden="true"></i>
|
||
<i class="ar-screw bl" aria-hidden="true"></i>
|
||
<i class="ar-screw br" aria-hidden="true"></i>
|
||
<div class="ar-plate-head">
|
||
<span>RATING PLATE · 整机铭牌</span>
|
||
<span>SN 2026-DT6-0812</span>
|
||
</div>
|
||
<div class="ar-specs">
|
||
<div v-for="(s, i) in specs" :key="s.k" class="ar-spec" :style="{ '--d': i * 0.05 + 's' }">
|
||
<span class="ar-spec-no">P{{ i + 1 }}</span>
|
||
<b>{{ s.v }}</b>
|
||
<span class="ar-spec-k">{{ s.k }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 场景 -->
|
||
<section id="scenes" class="ar-sec">
|
||
<h2 class="ar-h2">// 场景方案</h2>
|
||
<div class="ar-scenes">
|
||
<div v-for="(s, i) in scenes" :key="s.name" class="ar-scene" :style="{ '--d': i * 0.07 + 's' }">
|
||
<i class="ar-screw tl" aria-hidden="true"></i>
|
||
<i class="ar-screw tr" aria-hidden="true"></i>
|
||
<div class="ar-scene-head">
|
||
<span class="ar-scene-code">SCN-0{{ i + 1 }}</span>
|
||
<span class="ar-scene-ic" aria-hidden="true">
|
||
<svg v-if="i === 0" viewBox="0 0 24 24"><path d="M12 3.4 19.2 7.6v8.8L12 20.6 4.8 16.4V7.6z" /><circle cx="12" cy="12" r="3" /></svg>
|
||
<svg v-else-if="i === 1" viewBox="0 0 24 24"><path d="M4 8l8-4.2L20 8v8l-8 4.2L4 16z" /><path d="M4 8l8 4 8-4M12 12v8.2" /></svg>
|
||
<svg v-else-if="i === 2" viewBox="0 0 24 24"><path d="M13.4 2.8 6 13.2h4.8L9.6 21l7.6-10.4h-4.8z" /></svg>
|
||
<svg v-else viewBox="0 0 24 24"><path d="M9.6 3h4.8M11 3v5.2L5.6 17a2.2 2.2 0 0 0 1.9 3.3h9a2.2 2.2 0 0 0 1.9-3.3L13 8.2V3" /><path d="M7.6 14.6h8.8" /></svg>
|
||
</span>
|
||
</div>
|
||
<b>{{ s.name }}</b>
|
||
<p>{{ s.desc }}</p>
|
||
<i class="ar-scene-stripe" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 产品案例 -->
|
||
<section class="ar-sec">
|
||
<h2 class="ar-h2">// 与深思大模型协同</h2>
|
||
<div class="ar-cases">
|
||
<article v-for="(p, i) in c.cases" :key="p.name" class="ar-case" :style="{ '--d': i * 0.06 + 's' }" @click="openPlate(i)">
|
||
<div class="ar-case-head">
|
||
<span>COOP-FILE 0{{ i + 1 }} · {{ p.tag }}</span>
|
||
<i class="ar-case-led" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="ar-case-row">
|
||
<img :src="p.image" :alt="p.name" loading="lazy" />
|
||
<div>
|
||
<h3>{{ p.name }}</h3>
|
||
<p>{{ p.desc }}</p>
|
||
<i class="ar-case-more">READ NAMEPLATE ▸</i>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 参数铭牌 -->
|
||
<Transition name="ar-bolt">
|
||
<div v-if="plate" class="ar-mask" @click.self="closePlate">
|
||
<article class="ar-plate">
|
||
<i class="ar-rivet tl" aria-hidden="true"></i>
|
||
<i class="ar-rivet tr" aria-hidden="true"></i>
|
||
<i class="ar-rivet bl" aria-hidden="true"></i>
|
||
<i class="ar-rivet br" aria-hidden="true"></i>
|
||
<button class="ar-plate-x" aria-label="关闭" @click="closePlate">✕</button>
|
||
<header class="ar-plate-head">
|
||
<p class="ar-plate-kicker">DEEPTHINK ROBOTICS · NAMEPLATE</p>
|
||
<h3>{{ plate.name }}</h3>
|
||
<span class="ar-plate-model">MODEL DT-{{ 100 + plateIdx * 11 }} · {{ plate.tag }}</span>
|
||
</header>
|
||
<div class="ar-plate-img">
|
||
<img :src="plate.image" :alt="plate.name" />
|
||
<span class="ar-plate-warn" aria-hidden="true">⚠ 运行区域 · 请勿倚靠</span>
|
||
</div>
|
||
<section class="ar-plate-block">
|
||
<b>// DESIGN LOG 研发志</b>
|
||
<p>{{ plate.story }}</p>
|
||
</section>
|
||
<section class="ar-plate-block">
|
||
<b>// RATED SPECS 额定参数</b>
|
||
<ul>
|
||
<li v-for="h in plate.highlights" :key="h">{{ h }}</li>
|
||
</ul>
|
||
</section>
|
||
<div class="ar-plate-cols">
|
||
<section class="ar-plate-block">
|
||
<b>// SERVICE RECORD 服役记录</b>
|
||
<p v-for="t in plate.timeline" :key="t.at" class="ar-plate-tl"><i>{{ t.at }}</i>{{ t.event }}</p>
|
||
</section>
|
||
<section class="ar-plate-block">
|
||
<b>// GAUGES 表盘</b>
|
||
<div class="ar-plate-mx">
|
||
<div v-for="m in plate.metrics" :key="m.label"><b>{{ m.value }}</b><span>{{ m.label }}</span></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<footer class="ar-plate-foot">SN 2026-{{ String(plateIdx + 1).padStart(4, '0') }} · MADE BY DEEPTHINK · 铭牌为风格演示</footer>
|
||
</article>
|
||
</div>
|
||
</Transition>
|
||
|
||
<div class="ar-stats">
|
||
<div v-for="s in c.stats" :key="s.label"><b>{{ s.value }}</b><span>{{ s.label }}</span></div>
|
||
</div>
|
||
|
||
<footer class="ar-footer">
|
||
<b>深思机器人 · {{ c.nameEn }} ROBOTICS</b>
|
||
<p>{{ c.contacts.phone }} · {{ c.contacts.email }} · {{ c.contacts.addr }}</p>
|
||
<p class="ar-links">
|
||
<router-link to="/corp">返回企业官网合集</router-link> ·
|
||
<router-link to="/">个人页面合集</router-link>
|
||
</p>
|
||
<p class="ar-copy">© {{ c.founded }}–2026 · 风格演示页，产品与参数均为虚构</p>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.ar {
|
||
min-height: 100vh;
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent 0 34px, rgba(255, 176, 32, 0.05) 34px 36px),
|
||
#1c1e22;
|
||
color: #e8e9eb;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
overflow-x: clip;
|
||
}
|
||
|
||
.ar-nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 40;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 22px;
|
||
padding: 13px clamp(16px, 5vw, 48px);
|
||
background: rgba(24, 26, 30, 0.95);
|
||
backdrop-filter: blur(6px);
|
||
border-bottom: 2px solid #ffb020;
|
||
}
|
||
.ar-logo {
|
||
font-size: 16.5px;
|
||
font-weight: 800;
|
||
color: #ffb020;
|
||
}
|
||
.ar-menu {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
.ar-menu a {
|
||
color: #a7a9ad;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
}
|
||
.ar-menu a:hover {
|
||
color: #ffb020;
|
||
}
|
||
.ar-back {
|
||
margin-left: auto;
|
||
color: #1c1e22;
|
||
background: #ffb020;
|
||
text-decoration: none;
|
||
font-size: 12.5px;
|
||
font-weight: 800;
|
||
padding: 7px 16px;
|
||
border-radius: 4px;
|
||
}
|
||
.ar-back:hover {
|
||
background: #ffc95c;
|
||
}
|
||
|
||
.ar-hero {
|
||
max-width: 1080px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 1.2fr 0.8fr;
|
||
gap: 24px;
|
||
align-items: center;
|
||
padding: clamp(50px, 8vw, 90px) clamp(16px, 4vw, 26px) 56px;
|
||
}
|
||
.ar-kicker {
|
||
margin: 0 0 14px;
|
||
font-family: Consolas, monospace;
|
||
font-size: 12px;
|
||
letter-spacing: 0.24em;
|
||
color: #8b8d92;
|
||
animation: ar-rise 0.55s ease both;
|
||
}
|
||
.ar-hero h1 {
|
||
margin: 0 0 18px;
|
||
font-size: clamp(32px, 5.8vw, 56px);
|
||
font-weight: 900;
|
||
line-height: 1.2;
|
||
animation: ar-rise 0.6s ease 0.06s both;
|
||
}
|
||
.ar-hero h1 span {
|
||
color: #ffb020;
|
||
}
|
||
.ar-sub {
|
||
margin: 0 0 26px;
|
||
max-width: 520px;
|
||
font-size: 14px;
|
||
line-height: 2;
|
||
color: #a7a9ad;
|
||
animation: ar-rise 0.6s ease 0.12s both;
|
||
}
|
||
.ar-hero-btns {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
animation: ar-rise 0.6s ease 0.18s both;
|
||
}
|
||
@keyframes ar-rise {
|
||
from { opacity: 0; transform: translateY(12px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.ar-btn-main {
|
||
background: #ffb020;
|
||
color: #1c1e22;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
padding: 12px 28px;
|
||
border-radius: 4px;
|
||
box-shadow: 0 3px 0 #b87708;
|
||
transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
|
||
}
|
||
.ar-btn-main:hover {
|
||
background: #ffc95c;
|
||
}
|
||
.ar-btn-main:active {
|
||
transform: translateY(2px);
|
||
box-shadow: 0 1px 0 #b87708;
|
||
}
|
||
.ar-btn-sub {
|
||
border: 1px solid #4b4e55;
|
||
color: #e8e9eb;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
padding: 12px 28px;
|
||
border-radius: 4px;
|
||
transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
|
||
}
|
||
.ar-btn-sub:hover {
|
||
border-color: #ffb020;
|
||
color: #ffb020;
|
||
}
|
||
.ar-btn-sub:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
.ar-arm {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
.ar-rig {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
height: auto;
|
||
}
|
||
.ar-j1 {
|
||
transform-origin: 150px 252px;
|
||
animation: ar-j1 7s ease-in-out infinite;
|
||
}
|
||
.ar-j2 {
|
||
transform-origin: 150px 176px;
|
||
animation: ar-j2 7s ease-in-out infinite;
|
||
}
|
||
.ar-j3 {
|
||
transform-origin: 150px 100px;
|
||
animation: ar-j3 7s ease-in-out infinite;
|
||
}
|
||
@keyframes ar-j1 {
|
||
0%, 100% { transform: rotate(-5deg); }
|
||
50% { transform: rotate(6deg); }
|
||
}
|
||
@keyframes ar-j2 {
|
||
0%, 100% { transform: rotate(9deg); }
|
||
50% { transform: rotate(-11deg); }
|
||
}
|
||
@keyframes ar-j3 {
|
||
0%, 100% { transform: rotate(-13deg); }
|
||
50% { transform: rotate(15deg); }
|
||
}
|
||
.ar-box {
|
||
animation: ar-belt 7s linear infinite;
|
||
}
|
||
@keyframes ar-belt {
|
||
0% { transform: translateX(64px); opacity: 0; }
|
||
8% { opacity: 1; }
|
||
46%, 54% { transform: translateX(0); }
|
||
92% { opacity: 1; }
|
||
100% { transform: translateX(-52px); opacity: 0; }
|
||
}
|
||
.ar-led {
|
||
animation: ar-led 1.4s step-end infinite;
|
||
}
|
||
@keyframes ar-led {
|
||
50% { fill: #1d5c40; }
|
||
}
|
||
|
||
.ar-sec {
|
||
max-width: 1080px;
|
||
margin: 0 auto 54px;
|
||
padding: 0 clamp(16px, 4vw, 26px);
|
||
}
|
||
.ar-h2 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
font-family: Consolas, monospace;
|
||
font-size: 17px;
|
||
letter-spacing: 0.1em;
|
||
color: #ffb020;
|
||
margin: 0 0 20px;
|
||
}
|
||
.ar-h2::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: repeating-linear-gradient(90deg, #3c3f46 0 10px, transparent 10px 18px);
|
||
}
|
||
|
||
.ar-plate {
|
||
position: relative;
|
||
background:
|
||
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
|
||
linear-gradient(180deg, #292b31, #232529);
|
||
border: 2px solid #3c3f46;
|
||
border-radius: 8px;
|
||
padding: 14px;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||
}
|
||
.ar-plate-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
padding: 2px 8px 12px;
|
||
font-family: Consolas, monospace;
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.16em;
|
||
color: #8b8d92;
|
||
}
|
||
.ar-screw {
|
||
position: absolute;
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 35% 32%, #767a83, #2c2e34 72%);
|
||
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.35);
|
||
z-index: 1;
|
||
}
|
||
.ar-screw::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 1.5px;
|
||
right: 1.5px;
|
||
top: 3.6px;
|
||
height: 1.3px;
|
||
background: #14151a;
|
||
transform: rotate(45deg);
|
||
}
|
||
.ar-screw.tl { top: 6px; left: 6px; }
|
||
.ar-screw.tr { top: 6px; right: 6px; }
|
||
.ar-screw.bl { bottom: 6px; left: 6px; }
|
||
.ar-screw.br { bottom: 6px; right: 6px; }
|
||
.ar-specs {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 1px;
|
||
background: #3c3f46;
|
||
border: 1px solid #3c3f46;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
.ar-spec {
|
||
position: relative;
|
||
background: #1f2126;
|
||
padding: 18px 16px 16px;
|
||
animation: ar-rise 0.55s ease both;
|
||
animation-delay: var(--d, 0s);
|
||
}
|
||
.ar-spec-no {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 10px;
|
||
font-family: Consolas, monospace;
|
||
font-size: 9.5px;
|
||
letter-spacing: 0.1em;
|
||
color: #55585f;
|
||
}
|
||
.ar-spec b {
|
||
display: block;
|
||
font-family: Consolas, monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: clamp(19px, 3vw, 25px);
|
||
color: #ffb020;
|
||
}
|
||
.ar-spec-k {
|
||
font-size: 12px;
|
||
color: #8b8d92;
|
||
}
|
||
|
||
.ar-scenes {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 14px;
|
||
}
|
||
.ar-scene {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background:
|
||
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
|
||
linear-gradient(180deg, #2a2c33, #22242a);
|
||
border: 1px solid #3c3f46;
|
||
border-radius: 6px;
|
||
padding: 16px 16px 26px;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||
animation: ar-rise 0.55s ease both;
|
||
animation-delay: var(--d, 0s);
|
||
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
.ar-scene:hover {
|
||
transform: translateY(-3px);
|
||
border-color: rgba(255, 176, 32, 0.7);
|
||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||
}
|
||
.ar-scene-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 4px 6px 14px;
|
||
}
|
||
.ar-scene-code {
|
||
font-family: Consolas, monospace;
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.14em;
|
||
color: #8b8d92;
|
||
border: 1px solid #3c3f46;
|
||
background: rgba(0, 0, 0, 0.28);
|
||
padding: 2px 8px;
|
||
border-radius: 3px;
|
||
}
|
||
.ar-scene-ic {
|
||
width: 38px;
|
||
height: 38px;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 1px solid #4b4e55;
|
||
border-radius: 5px;
|
||
color: #ffb020;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|
||
.ar-scene-ic svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 1.6;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
.ar-scene b {
|
||
display: block;
|
||
margin: 0 6px 6px;
|
||
font-size: 15px;
|
||
}
|
||
.ar-scene p {
|
||
margin: 0 6px;
|
||
font-size: 12.5px;
|
||
line-height: 1.8;
|
||
color: #a7a9ad;
|
||
}
|
||
.ar-scene-stripe {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 7px;
|
||
background: repeating-linear-gradient(-45deg, #ffb020 0 10px, #23252b 10px 20px);
|
||
opacity: 0.5;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.ar-scene:hover .ar-scene-stripe {
|
||
opacity: 0.95;
|
||
animation: ar-stripe 1.1s linear infinite;
|
||
}
|
||
@keyframes ar-stripe {
|
||
to { background-position: 28.28px 0; }
|
||
}
|
||
|
||
.ar-cases {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 14px;
|
||
}
|
||
.ar-case {
|
||
background: #22242a;
|
||
border: 1px solid #34363c;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
animation: ar-rise 0.55s ease both;
|
||
animation-delay: var(--d, 0s);
|
||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
.ar-case:hover {
|
||
transform: translateY(-3px);
|
||
border-color: rgba(255, 176, 32, 0.7);
|
||
}
|
||
.ar-case-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
padding: 7px 12px;
|
||
background: #1b1d22;
|
||
border-bottom: 1px solid #34363c;
|
||
font-family: Consolas, monospace;
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.12em;
|
||
color: #8b8d92;
|
||
}
|
||
.ar-case-led {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #58e0a0;
|
||
box-shadow: 0 0 8px rgba(88, 224, 160, 0.7);
|
||
animation: ar-blink 2s step-end infinite;
|
||
}
|
||
.ar-case:hover .ar-case-led {
|
||
animation-duration: 0.7s;
|
||
}
|
||
@keyframes ar-blink {
|
||
50% { opacity: 0.25; }
|
||
}
|
||
.ar-case-row {
|
||
display: grid;
|
||
grid-template-columns: 118px 1fr;
|
||
}
|
||
.ar-case-row img {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 100px;
|
||
object-fit: cover;
|
||
display: block;
|
||
filter: grayscale(0.4) sepia(0.14);
|
||
transition: filter 0.3s ease;
|
||
}
|
||
.ar-case:hover .ar-case-row img {
|
||
filter: grayscale(0.1) sepia(0.05);
|
||
}
|
||
.ar-case-row > div {
|
||
padding: 12px 14px 14px;
|
||
}
|
||
.ar-case h3 {
|
||
margin: 0 0 6px;
|
||
font-size: 15px;
|
||
}
|
||
.ar-case p {
|
||
margin: 0;
|
||
font-size: 12.5px;
|
||
line-height: 1.8;
|
||
color: #a7a9ad;
|
||
}
|
||
|
||
.ar-stats {
|
||
max-width: 1080px;
|
||
margin: 0 auto 54px;
|
||
padding: 30px clamp(16px, 4vw, 26px);
|
||
background:
|
||
repeating-linear-gradient(-45deg, rgba(255, 176, 32, 0.3) 0 10px, transparent 10px 20px) top / 100% 5px no-repeat,
|
||
repeating-linear-gradient(-45deg, rgba(255, 176, 32, 0.3) 0 10px, transparent 10px 20px) bottom / 100% 5px no-repeat;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 14px;
|
||
text-align: center;
|
||
}
|
||
.ar-stats b {
|
||
display: block;
|
||
font-family: Consolas, monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: clamp(24px, 4vw, 32px);
|
||
color: #ffb020;
|
||
}
|
||
.ar-stats span {
|
||
font-size: 12px;
|
||
color: #8b8d92;
|
||
}
|
||
|
||
.ar-footer {
|
||
text-align: center;
|
||
padding: 8px 20px 44px;
|
||
}
|
||
.ar-footer b {
|
||
font-size: 14.5px;
|
||
}
|
||
.ar-footer p {
|
||
margin: 8px 0 0;
|
||
font-size: 12.5px;
|
||
color: #a7a9ad;
|
||
}
|
||
.ar-links a {
|
||
color: #ffb020;
|
||
text-decoration: none;
|
||
}
|
||
.ar-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.ar-copy {
|
||
font-size: 11px !important;
|
||
color: #63666d !important;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.ar-hero {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.ar-arm {
|
||
display: none;
|
||
}
|
||
}
|
||
@media (max-width: 460px) {
|
||
.ar-case-row {
|
||
grid-template-columns: 96px 1fr;
|
||
}
|
||
}
|
||
|
||
/* ---- 参数铭牌 ---- */
|
||
.ar-case {
|
||
cursor: pointer;
|
||
}
|
||
.ar-case-more {
|
||
display: inline-block;
|
||
margin-top: 8px;
|
||
font-style: normal;
|
||
font-family: Consolas, monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.16em;
|
||
color: #ffb020;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.ar-case:hover .ar-case-more {
|
||
opacity: 1;
|
||
}
|
||
.ar-mask {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 520;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 20px;
|
||
background: rgba(10, 11, 13, 0.82);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
.ar-plate {
|
||
position: relative;
|
||
width: min(600px, 94vw);
|
||
max-height: 88vh;
|
||
overflow-y: auto;
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent 0 22px, rgba(255, 176, 32, 0.04) 22px 24px),
|
||
linear-gradient(170deg, #26282e, #1b1d21);
|
||
border: 2px solid #3a3d44;
|
||
border-radius: 10px;
|
||
color: #e8e9eb;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 76px rgba(0, 0, 0, 0.7);
|
||
}
|
||
.ar-rivet {
|
||
position: absolute;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 34% 30%, #6a6e77, #2c2e33 70%);
|
||
box-shadow: inset 0 -1.5px 3px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(255, 255, 255, 0.1);
|
||
z-index: 2;
|
||
}
|
||
.ar-rivet.tl { left: 10px; top: 10px; }
|
||
.ar-rivet.tr { right: 10px; top: 10px; }
|
||
.ar-rivet.bl { left: 10px; bottom: 10px; }
|
||
.ar-rivet.br { right: 10px; bottom: 10px; }
|
||
.ar-plate-x {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: 16px;
|
||
z-index: 3;
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 1.5px solid #4a4d55;
|
||
border-radius: 6px;
|
||
background: #26282e;
|
||
color: #ffb020;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: border-color 0.18s ease;
|
||
}
|
||
.ar-plate-x:hover {
|
||
border-color: #ffb020;
|
||
}
|
||
.ar-plate-head {
|
||
padding: 24px 32px 12px;
|
||
border-bottom: 2px solid #3a3d44;
|
||
}
|
||
.ar-plate-kicker {
|
||
margin: 0 0 8px;
|
||
font-family: Consolas, monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.26em;
|
||
color: #8d9099;
|
||
}
|
||
.ar-plate-head h3 {
|
||
margin: 0 0 6px;
|
||
font-size: clamp(21px, 2.8vw, 26px);
|
||
font-weight: 900;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.ar-plate-model {
|
||
display: inline-block;
|
||
font-family: Consolas, monospace;
|
||
font-size: 11px;
|
||
letter-spacing: 0.14em;
|
||
color: #ffb020;
|
||
border: 1px solid rgba(255, 176, 32, 0.45);
|
||
padding: 3px 12px;
|
||
}
|
||
.ar-plate-img {
|
||
position: relative;
|
||
margin: 16px 32px 0;
|
||
border: 2px solid #3a3d44;
|
||
overflow: hidden;
|
||
}
|
||
.ar-plate-img img {
|
||
display: block;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 7;
|
||
object-fit: cover;
|
||
filter: saturate(0.8) contrast(1.05);
|
||
}
|
||
.ar-plate-warn {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
background: repeating-linear-gradient(-45deg, rgba(255, 176, 32, 0.9) 0 14px, #1b1d21 14px 28px);
|
||
color: #1b1d21;
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.14em;
|
||
text-align: center;
|
||
padding: 3px 0;
|
||
text-shadow: 0 0 4px rgba(255, 232, 178, 0.9);
|
||
}
|
||
.ar-plate-block {
|
||
padding: 16px 32px 0;
|
||
}
|
||
.ar-plate-block > b {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-family: Consolas, monospace;
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.16em;
|
||
color: #ffb020;
|
||
}
|
||
.ar-plate-block p {
|
||
margin: 0;
|
||
font-size: 12.5px;
|
||
line-height: 1.95;
|
||
color: #b8bac0;
|
||
}
|
||
.ar-plate-block ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
border: 1px solid #3a3d44;
|
||
}
|
||
.ar-plate-block ul li {
|
||
position: relative;
|
||
padding: 8px 12px 8px 30px;
|
||
font-size: 12.5px;
|
||
color: #d5d7db;
|
||
}
|
||
.ar-plate-block ul li + li {
|
||
border-top: 1px solid #2c2e33;
|
||
}
|
||
.ar-plate-block ul li::before {
|
||
content: '▣';
|
||
position: absolute;
|
||
left: 12px;
|
||
color: #ffb020;
|
||
font-size: 10px;
|
||
}
|
||
.ar-plate-cols {
|
||
display: grid;
|
||
grid-template-columns: 1.25fr 1fr;
|
||
gap: 4px;
|
||
padding-bottom: 12px;
|
||
}
|
||
.ar-plate-tl {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin: 0 0 7px !important;
|
||
font-size: 12px !important;
|
||
}
|
||
.ar-plate-tl i {
|
||
flex: 0 0 62px;
|
||
font-style: normal;
|
||
font-family: Consolas, monospace;
|
||
font-size: 10.5px;
|
||
color: #8d9099;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.ar-plate-mx {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
.ar-plate-mx > div {
|
||
background: #1b1d21;
|
||
border: 1px solid #3a3d44;
|
||
border-left: 3px solid #ffb020;
|
||
padding: 8px 12px;
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
.ar-plate-mx b {
|
||
font-family: Consolas, monospace;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #ffb020;
|
||
text-shadow: 0 0 12px rgba(255, 176, 32, 0.4);
|
||
}
|
||
.ar-plate-mx span {
|
||
font-size: 10.5px;
|
||
color: #8d9099;
|
||
}
|
||
.ar-plate-foot {
|
||
padding: 12px 32px 20px;
|
||
border-top: 2px solid #3a3d44;
|
||
font-family: Consolas, monospace;
|
||
font-size: 9.5px;
|
||
letter-spacing: 0.18em;
|
||
color: #8d9099;
|
||
text-align: center;
|
||
}
|
||
.ar-bolt-enter-active,
|
||
.ar-bolt-leave-active {
|
||
transition: opacity 0.24s ease;
|
||
}
|
||
.ar-bolt-enter-active .ar-plate {
|
||
transition: transform 0.3s cubic-bezier(0.2, 1.2, 0.4, 1);
|
||
}
|
||
.ar-bolt-leave-active .ar-plate {
|
||
transition: transform 0.2s ease;
|
||
}
|
||
.ar-bolt-enter-from,
|
||
.ar-bolt-leave-to {
|
||
opacity: 0;
|
||
}
|
||
.ar-bolt-enter-from .ar-plate {
|
||
transform: translateY(-24px) scale(1.03);
|
||
}
|
||
.ar-bolt-leave-to .ar-plate {
|
||
transform: scale(0.97);
|
||
}
|
||
@media (max-width: 560px) {
|
||
.ar-plate-cols {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|