按钮 · Button
厚重双色渐变钮,绿/蓝/红/金四色,硬顶光泽 + 双层 3D 投影,按下真实下沉。
sc-btn ( --green/--blue/--red/--gold · --sm/--lg/--block/--round )
面板 · Panel
羊皮纸底 + 蓝色标题条 + 可选四角金铆钉。
部落战开启!
集结 10 名部落成员,赢下部落战即可瓜分丰厚战利品!
sc-panel > sc-panel__hd + sc-panel__bd · 四角铆钉:sc-rivet tl/tr/bl/br
弹窗 · Modal
遮罩 + 面板 + 圆形红关闭钮。点击预览。
sc-modal-mask > sc-modal ( sc-modal__close + sc-panel )
进度条 · Bar
深槽光泽条,金币/生命/圣水三色,可加 label。
sc-bar > sc-bar__fill --gold/--hp/--elixir + sc-bar__label
货币条 · Currency
金币/宝石/圣水三种,深蓝内嵌胶囊。
$128,400
◆2,450
💧86,200
sc-currency > sc-currency__coin --gold/--gem/--elixir + 数值
圣水计量 · Elixir Meter
出兵圣水槽,水滴逐格点亮,满槽数字金色闪烁。
sc-meter > 多个 sc-meter__seg(点亮加 .on) + sc-meter__num(满槽加 .max)
图标底座 · Icon Slot
卡牌槽,普通/稀有/史诗/传说底色 + 冷却遮罩。
sc-icon ( --rare / --epic / --legend ) · 冷却:sc-icon__cd
卡牌 · Card
兵种卡,稀有度渐变边 + 等级角标,悬停上浮。
sc-card ( --rare/--epic/--legend ) > __art(含 __tag) + __lv + __name + __foot
列表项 · List
兵种/建筑通用行,左图标 + 主副标题 + 右值。
sc-list > sc-list__item ( __ic + __tx(b+small) + __val )
顶部 HUD · HUD Bar
头像 + 名称/奖杯 + 右侧货币,深蓝底。
sc-hud > sc-hud__ava + sc-hud__who(b+small) + sc-hud__spacer + 右侧组件
导航栏 · Nav Bar
底部主导航,金色高亮当前页。点击切换。
sc-nav > sc-nav__tab ( --active ) > span.i + 文字
标签页 · Tabs
面板分页,点击切换。
军队:野蛮人 ×24 · 弓箭手 ×18 · 巨人 ×4
sc-tabs > sc-tabs__tab ( --active )
输入框 · Input
深蓝内嵌槽,聚焦蓝光环;可选前置图标 sc-field。
<input class="sc-input"> · 带图标:sc-field > sc-field__ic + sc-input
下拉选择 · Select
深蓝立体钮 + 金色箭头。
sc-select > <select> > <option>
徽章 · Badge
红/金徽章,可贴图标右上。
sc-badge ( --gold ) · 贴角:sc-badge-wrap > 内容 + sc-badge
角标 · Ribbon
卡片左上丝带。放 position:relative 容器内。
sc-ribbon ( --gold ) · 置于 relative 容器内
标签 · Tag
属性小标签,红/绿/圣水紫变体。
对空
🔥 溅射伤害
🛡️ 高血量
💧 圣水 5
sc-tag ( --red / --green / --elixir )
提示 · Tooltip
悬停显示羊皮纸提示,内容取 data-tip。悬停试试。
飞龙宝宝
巨人
骷髅军团
<span class="sc-tooltip" data-tip="内容">
通知 · Toast
羊皮纸提示,普通/危险/金币三种图标色。
🪙掠夺成功!获得 82,000 金币 · 64,500 圣水。
⚠️村庄遭到进攻护盾已破,损失 12,400 金币。
sc-toast ( --danger / --gold ) > sc-toast__ic + 内容(b 标题)
对话气泡 · Bubble
村庄建筑工对话框,含说话人名与尖角。
建筑工人 · Bob
大本营升级还需要 2 天!要不要花 350 宝石立刻完成?嘿嘿。
sc-bubble > sc-bubble__who + 对话文字
加载 · Spinner
旋转绿宝石(rotateY 翻转)。
sc-spinner
头像组 · Avatar Group
部落成员叠放 + 溢出计数。
sc-avatars > 多个 sc-avatars__a + sc-avatars__more
星级评分 · Stars
进攻评级,.on 点亮金星。
★★★
★★★
sc-stars > 多个 <span>★,点亮加 .on
分隔线 · Divider
渐隐线,可带中心标签。
sc-divider > sc-divider__mark
空状态 · Empty
列表为空占位,图标+标题+说明。
sc-empty > sc-empty__ic + sc-empty__tt + sc-empty__ds
⚔ 进阶组件 · Advanced
复杂交互组件,均可操作。
步进器 · Stepper
立体钮数量选择,可点增减。
sc-stepper > sc-stepper__btn(−) + sc-stepper__val + sc-stepper__btn(+)
面包屑 · Breadcrumb
层级路径,末项高亮。
sc-breadcrumb > a + __sep … + __cur
手风琴 · Accordion
原生 details,无需 JS。
护盾是怎么工作的?
被打掉大本营或损失超过 90% 建筑后获得护盾,期间不会被进攻,但主动进攻会缩短护盾时间。
宝石从哪里来?
清理障碍物、完成成就、开启宝箱都能获得宝石,商店也可直接购买。
部落战怎么开?
首领和副首领可以发起部落战,双方各自进攻两次,总星数多者获胜。
sc-accordion > <details> ( <summary> + sc-accordion__bd )
侧边抽屉 · Drawer
右滑面板。点击预览。
sc-drawer-mask + sc-drawer ( __hd + __bd ) · 加 .open 展开
数据表格 · Table
部落排行榜,斑马纹 + 悬停高亮。
| 排名 | 成员 | 职位 | 奖杯 |
|---|
| ① | 酋长大人 | 首领 | 🏆 5,204 |
| ② | 哥布林之王 | 副首领 | 🏆 5,011 |
| ③ | 亡灵法师 | 长老 | 🏆 4,876 |
| 4 | 飞斧屠夫 | 成员 | 🏆 4,690 |
table.sc-table > thead th + tbody td · 名次:sc-table__rank
分页器 · Pagination
翻页,--active 当前 / --dis 禁用。点击切换。
sc-pagination > sc-pagination__pg ( --active / --dis )
时间轴 · Timeline
赛季进度,--done 完成 / --now 当前(金色发光)。
sc-timeline > sc-timeline__item ( --done/--now ) ( __t + __d )
树形菜单 · Tree
嵌套分类,details 折叠。
⚔️ 兵种
野蛮人 (Lv.9)
弓箭手 (Lv.9)
暗黑兵种
亡灵 (Lv.7)
野猪骑士 (Lv.8)
🧪 法术
狂暴法术 (Lv.6)
治疗法术 (Lv.5)
sc-tree > 嵌套 <details> + sc-tree__leaf
能量条倒计时 · Energy
圣水回复,含实时倒计时。
💧
圣水 86,200 / 120,000+500 · 04:59
sc-energy > __orb + __body ( __top(含 __timer) + sc-bar )
签到日历 · Calendar
7 日签到,--done 已领 / --today 当天金框发光。
sc-calendar > sc-calendar__day ( --done / --today )
奖杯之路 · Trophy Road
竞技场晋级路径,--done/--now + 连接线。
sc-questchain > __node( --done/--now ) 与 __link( --done ) 交替
成就解锁 · Achievement
奖章+标题+描述,--locked 灰化。
sc-achievement ( --locked ) > __medal + __tx(b+small)
翻牌 · Flip Card
CSS 3D 翻转,卡背菱纹 → 新卡揭晓。点击翻。
sc-flipcard > __inner > __face __back + __face __front · 加 .flipped
开宝箱 · Chest
点击摇晃开箱,揭示战利品。
sc-chest > __box + __label + __glow · 加 .opened
背包网格 · Inventory Grid
资源仓库,稀有度底色、数量角标、空格。
sc-invgrid > sc-invgrid__cell ( --rare/--epic/--empty ) + sc-invgrid__qty
卡牌对比 · Compare
当前 vs 升级后,属性升降绿/红标注。
VS
⚔️
野蛮人 Lv.9
生命值520 ▲
每秒伤害104 ▲
sc-compare > __side + __vs + __side · 升降:sc-compare__up / __down