TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelDeck ​

⚡WASM 驱动
🏅原创

科幻面板-德克 是 TechUI Scifi 面板系列中的横向展开型容器。

它的设计灵感源自 “宽银幕画幅 (Widescreen Format)”。与传统全封闭面板不同，它的视觉重心高度集中在顶部或底部的水平横梁 ，而左右两侧则保持开放或仅保留极简连接。

它的水平横梁 可以作为标题的底座或者顶栏。

提示：该组件可以通过 ScifiPanelB2 或其语义化别名 ScifiPanelDeck 进行调用。

基础用法 ​

默认形态 ​

默认情况下，B2 会渲染上下两条带有科幻倒角的横梁。组件加载时，这两条横梁会自动执行从中心向两侧展开的入场动画，瞬间提升界面的科技动态感。

vue
<template>
  <div style="width: 100%; height: 150px;">
    <ScifiPanelDeck>
      <div class="data-stream">
        <span>> System Logs Loading... [Done]</span>
        <span>> Establishing Connection... [Success]</span>
      </div>
    </ScifiPanelDeck>
  </div>
</template>

<style scoped>
.data-stream {
  padding: 20px;
  color: #00eeff;
  font-family: monospace;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>

视觉变体 ​

B2 的形态变化主要围绕“动态”和“简洁度”展开。

入场动画 ​

B2 的标志性特征是其线条入场动画。

  • animation: 控制是否开启入场动画（默认为 true）。
  • aniDuration: 控制线条展开的持续时间（秒）。

对于需要快速展示信息的场景，可以缩短动画时间；对于强调仪式感的大屏开场，可以适当延长。

vue
<template>
  <div class="grid">
    <ScifiPanelDeck :aniDuration="1">
      <div class="p-4">Fast Boot</div>
    </ScifiPanelDeck>

    <ScifiPanelDeck :aniDuration="3">
      <div class="p-4">System Initialization...</div>
    </ScifiPanelDeck>
    
    <ScifiPanelDeck :animation="false">
      <div class="p-4">Static View</div>
    </ScifiPanelDeck>
  </div>
</template>

极简模式 (Decoration & Border) ​

B2 的上下横梁两端默认带有精细的几何装饰（加厚的端点或刻度）。

  • decoration: false：关闭装饰后，面板变为两条纯粹的直线，风格更加极简。
  • borderWidth: 增加线条厚度可强化“夹具”的物理感。
vue
<template>
  <ScifiPanelDeck 
    :decoration="false" 
    :borderWidth="3"
  >
    <div class="simple-content">Minimal & Heavy</div>
  </ScifiPanelDeck>
</template>

发光效果 (Glow) ​

开启 glow 后，上下横梁会产生强烈的光晕，仿佛是悬浮的霓虹灯管。

vue
<template>
  <ScifiPanelDeck 
    :glow="true" 
    className="neon-bar"
    :backgroundOpacity="0.8"
  >
    <div class="status-bar">SYSTEM ONLINE</div>
  </ScifiPanelDeck>
</template>

CSS变量 ​

B2 的横向结构非常适合模拟“电影字幕”或“全息横幅”。通过 CSS 变量，我们可以定义出一种具有未来感的紫罗兰风格。

案例：紫罗兰数据流 (Violet Stream) ​

这种风格使用紫色和洋红色的渐变，适合作为次级信息的展示容器。

vue
<template>
  <ScifiPanelDeck 
    className="panel-violet"
    :aniDuration="2"
    :glow="true"
    :backgroundBlur="true"
  >
    <div class="stream-content">
      上传速率: 890 MB/s | 下载速率: 1.2 GB/s
    </div>
  </ScifiPanelDeck>
</template>

<style lang="less">
/* 自定义紫罗兰风格 */
.panel-violet {
  /* 边框：紫色 */
  --sf-panel-bd: #a855f7;
  
  /* 背景：深紫半透明 */
  --sf-panel-bg: rgba(20, 0, 40, 0.6);
  
  /* 发光：洋红光晕 */
  --sf-panel-glow: #d946ef;
  
  /* 装饰高亮：粉色 */
  --sf-panel-hlite: #f5d0fe;
}
</style>

组合使用 ​

搭配悬浮标题 ​

ScifiPanelDeck 非常适合与 ScifiPanelTitle 配合。一种经典的布局是：将标题组件悬浮在 B2 的顶部边框中央或左侧，形成一个“带独立铭牌的显示器”效果。

vue
<template>
  <div class="combo-box" style="position: relative; margin-top: 20px;">
    <div style="position: absolute; top: -12px; left: 20px; z-index: 2;">
      <ScifiPanelTitle text="DATA LOGS" :scale="0.8" />
    </div>

    <ScifiPanelDeck :backgroundBlur="true">
      <div class="logs-area">
        [10:00:01] Auth Check passed.<br>
        [10:00:02] Module loaded.
      </div>
    </ScifiPanelDeck>
  </div>
</template>

API 参考 ​

Props ​

属性名说明类型默认值
animation入场动画。是否开启线条展开动画Booleantrue
aniDuration动画时长。线条展开持续时间 (秒)Number—
decoration是否显示线条两端的装饰端点Booleantrue
borderd是否显示上下边框线Booleantrue
borderWidth边框线条宽度 (px)Number—
backgroundOpacity背景颜色的不透明度 (0-1)Number—
backgroundBlur是否开启背景毛玻璃效果Booleanfalse
glow是否开启外发光滤镜Booleanfalse
glowOpacity外发光的不透明度 (0-1)Number—
rotate旋转/镜像模式 (x, y 等)String—
scale整体缩放比例Number1
className自定义容器类名String—

CSS Variables ​

您可以在组件的父级或通过 className 覆盖以下变量，以控制组件的配色与外观。

变量名说明默认值参考
--sf-panel-bg面板背景填充色var(--scifi-bg)
--sf-panel-bgop背景不透明度var(--cpt-panel-bgop, 1)
--sf-panel-bd边框线条颜色var(--scifi-bd)
--sf-panel-bdw边框线条宽度var(--cpt-panel-bdw, 1px)
--sf-panel-fc标题文字颜色var(--scifi-fc)
--sf-panel-hlite高光颜色var(--scifi-hlite)
--sf-panel-focus焦点颜色var(--scifi-focus)
--sf-panel-glow内发光颜色var(--scifi-focus)
--sf-panel-glowop内发光不透明度var(--cpt-panel-glowop, .5)
--sf-panel-shadow容器阴影var(--shadow-weak)
--sf-panel-scale整体缩放比例var(--cpt-panel-scale)