225 lines
7.4 KiB
Markdown
225 lines
7.4 KiB
Markdown
# Shop Style Table
|
||
|
||
> 来源：`3DTank/src/module_82347.js`（与 `3dtank.com/play/static/js/unpacked/module_82347.js` 同构）。
|
||
> 提取方法：`3DTank/tools/headless_probe.js` 加载 `module_37036` + `module_82347`，实例化样式类，执行 `dk(...)` 的 style 函数。
|
||
> Kotlin 侧：`TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt` 的 `ShopScreen` 及其上方 `Shop*` 样式。
|
||
|
||
## 1. 样式类
|
||
|
||
| 类 | 语义名 | 定义 | 访问器 |
|
||
|---|---|---|---|
|
||
| `$Fi` | `NewShopCommonComponentStyle` | `93477` | `e1hz` container / `b1sk` commonBlockMenuShop / `b1k7` commonContainer / `c1sj` gradient / `l1sk` containerAnnouncement |
|
||
| `zHi` | `ShopSelectedSectionComponentStyle` | `94195` | `y1qq` commonCard / `a1sp` gradientCategory / `y1so` limitedOffersCommon / `x1so` mobileCardContainer / `c1sp` scrollContainerShop / `u1ju` commonBlock / `u1sj` activeCategory / `v1sj` notifier / `k1nd` timer；参数化 `t1sj(icon, active)` |
|
||
| `MVi` | `ShopCategoryComponentStyle` | `95731` | `e1hz` container / `ri5` header / `gax` description / `t1su` bonusContainer / `v1su` bonus / `w1su` marginItemsContainer；参数化 `u1su(rec, bonus)` |
|
||
| `YVi` | `ShopCategoryOfferSectionStyle` | `95908` | `x1su` promoCodesItemsContainer / `p1st` widthSearchInput / `b1m1` containerItem / `y1su` containerCoin / `z1su` containerLimitOffers / `a1sv` containerKitOffers |
|
||
| `RKi` | `ShopFooterComponentStyle` | `96243` | `u1hz` mainContainer / `n1sw` buttonAndTextContainer / `o1sw` exclamation / `k1sw` reportButton |
|
||
| `uXi` | `ShopItemComponentStyle` | `96891` | `k1sy` 基础卡片 / `h1sy` footerContent / `h1pt` headerContainer / `j1sy` headerScroll / `y1sx` headerContent / `i1sy` containerName / `n1sy` previewContainer / `e1mb` discount / `s1ma` discountContainer 等 |
|
||
| `PZt` | `ShopBuyButtonComponentStyle` | `31920` | `u11p` root / `vck` price |
|
||
|
||
## 2. 关键 CSS
|
||
|
||
### 2.1 左侧分类菜单
|
||
|
||
`commonBlockMenuShop`（`b1sk`）：
|
||
|
||
```css
|
||
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
|
||
cursor:default; background-color:rgba(3,8,13,.25); backdrop-filter:blur(.781em);
|
||
border-radius:1rem; border-right:1.25em solid transparent;
|
||
height:max-content; margin-left:2em; margin-top:2em;
|
||
max-height:calc(100% - 9.8em); z-index:2;
|
||
padding:1.25em; padding-right:0; width:25em;
|
||
```
|
||
|
||
分类项 `t1sj(icon, active)`：
|
||
|
||
```css
|
||
display:flex; align-items:center; justify-content:flex-start;
|
||
width:23.75em; height:3.5em; min-height:3.5em; max-height:3.5em;
|
||
margin:0; position:relative; overflow:hidden; cursor:pointer;
|
||
/* active */
|
||
background-color:rgba(255,204,0,.25); border-radius:.5rem; color:rgb(255,204,0);
|
||
```
|
||
|
||
图标（`div`）：
|
||
|
||
```css
|
||
width:1.5em; height:1.5em; margin-right:1.25em;
|
||
background-color:white; /* active: rgb(255,204,0) + margin-left:1.25em */
|
||
mask-image:url(icon); mask-position:center; mask-repeat:no-repeat; mask-size:contain;
|
||
```
|
||
|
||
标签（`h4`）：
|
||
|
||
```css
|
||
font:500 1em/1 BaseFontMedium; text-transform:uppercase;
|
||
color:white; /* active: rgb(255,204,0) */
|
||
margin:.2em 0 0;
|
||
```
|
||
|
||
### 2.2 主容器
|
||
|
||
`commonContainer`（`b1k7`）：
|
||
|
||
```css
|
||
background:radial-gradient(50% 100% at 50% 100%, #203040 0%, #03080D 100%);
|
||
display:flex; align-items:stretch; justify-content:space-between;
|
||
height:100%; width:100%; max-height:calc(100% - 6em);
|
||
```
|
||
|
||
原版 `pFi.tap` 的三个子节点：左菜单、分类内容、右侧选中区。
|
||
|
||
### 2.3 分类内容
|
||
|
||
`ShopCategoryComponentStyle-container`（`e1hz`）是 `display:contents`；标题/描述/物品网格直接进入 `commonContainer`。
|
||
|
||
标题（`ri5`）：
|
||
|
||
```css
|
||
font:500 1.875em/1.4em BaseFontBold; margin:1em 0 0; text-transform:uppercase;
|
||
```
|
||
|
||
描述（`gax`）：
|
||
|
||
```css
|
||
opacity:.6; line-height:1.25em; font-size:.938em;
|
||
```
|
||
|
||
物品容器 `u1su(rec, bonus)`：
|
||
|
||
```css
|
||
display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start;
|
||
width:37em; height:100%; gap:1em; margin-left:.25em; margin-top:.25em; /* bonus: .6em */
|
||
```
|
||
|
||
`containerItem`（`b1m1`）：
|
||
|
||
```css
|
||
display:grid; grid-template-columns:50% 50%; grid-template-rows:31.35%;
|
||
gap:1em; width:37.25em; margin:2em .9em 1em .25em; padding:0 0 0 .25em;
|
||
justify-content:flex-start; align-content:flex-start; z-index:3;
|
||
```
|
||
|
||
### 2.4 物品卡片
|
||
|
||
`k1sy`：
|
||
|
||
```css
|
||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||
position:relative; user-select:none; box-sizing:border-box; cursor:pointer;
|
||
border-radius:1rem; background-color:rgba(255,255,255,.15);
|
||
width:17.5em; height:inherit;
|
||
box-shadow:0 0 0 1px rgba(255,255,255,.3);
|
||
```
|
||
|
||
标题容器 `h1pt`：
|
||
|
||
```css
|
||
width:calc(100% - 1.5em); position:absolute; left:.75em; top:.75em;
|
||
display:flex; align-items:center; justify-content:flex-start; z-index:1;
|
||
```
|
||
|
||
标题文字 `y1sx`：
|
||
|
||
```css
|
||
font:500 1em/1 BaseFontMedium; text-transform:uppercase; color:white; margin-top:.2em;
|
||
```
|
||
|
||
价格文字 `h1sy`：
|
||
|
||
```css
|
||
font:500 1.125em/1.125 BaseFontMedium; text-transform:uppercase; margin-top:.125em;
|
||
```
|
||
|
||
预览 `n1sy`：
|
||
|
||
```css
|
||
display:flex; align-items:center; justify-content:center;
|
||
height:auto; width:auto; max-width:80%; z-index:3;
|
||
```
|
||
|
||
折扣 `e1mb`：
|
||
|
||
```css
|
||
position:absolute; right:.625em; bottom:1em;
|
||
line-height:1.333em; font-size:.938em; font-weight:bold;
|
||
```
|
||
|
||
### 2.5 底部栏
|
||
|
||
`ShopFooterComponentStyle-mainContainer`（`u1hz`）：
|
||
|
||
```css
|
||
display:flex; align-items:center; justify-content:flex-start;
|
||
width:100%; height:3.125em; position:absolute; bottom:0;
|
||
border-top:.063em solid rgba(255,255,255,.1);
|
||
backdrop-filter:blur(2.688em); z-index:3;
|
||
```
|
||
|
||
`buttonAndTextContainer`（`n1sw`）：
|
||
|
||
```css
|
||
width:auto; height:2.2em; margin-left:1.8em;
|
||
display:flex; align-items:center; justify-content:flex-start;
|
||
```
|
||
|
||
`exclamation`（`o1sw`）：
|
||
|
||
```css
|
||
margin-left:.7em; opacity:.5;
|
||
font:400 .875em/1 BaseFontRegular;
|
||
```
|
||
|
||
## 3. 资源
|
||
|
||
| 用途 | 资源 |
|
||
|---|---|
|
||
| 红宝石 | `ruby.ce62efbc.svg` |
|
||
| 水晶 | `crystalSmall.242e6c15.svg` |
|
||
| 金币 | `coin.3a16e831.svg` |
|
||
| 红宝石加号 | `addRuby.ff47c8be.svg` |
|
||
| 水晶加号 | `addCrystal.af9a397c.svg` |
|
||
| 金币加号 | `addCoin.cc7a25d3.svg` |
|
||
|
||
## 4. 当前实现状态
|
||
|
||
已还原：
|
||
|
||
- 左侧竖向分类菜单（25em 面板 + 23.75em × 3.5em 分类项 + 图标/激活态）
|
||
- 主容器径向渐变
|
||
- 分类标题/描述
|
||
- 2 列物品网格（37em，gap 1em）
|
||
- 物品卡片（17.5em，1rem 圆角，15% 白底，1px 内描边）
|
||
- 物品名称/价格/货币图标
|
||
- 右侧选中卡片（22.5em）
|
||
- 底部 3.125em 栏 + 购买按钮 + 价格
|
||
|
||
未展开：
|
||
|
||
- `containerItem` 的 `grid-template-rows:31.35%` 动态行高（当前固定 11.5em）
|
||
- `ShopBuyButtonComponentStyle` 的共享按钮外观（当前用金色按钮近似）
|
||
- `ShopSelectedSectionComponentStyle` 的 `commonCard` / `limitedOffersCommon` 轮播（当前是单个选中卡片）
|
||
- `ShopCategoryOfferSectionStyle` 的 `containerCoin` / `containerLimitOffers` / `containerKitOffers` 特殊分类
|
||
- 折扣/加成/礼包/促销码/能源条等子组件（当前数据模型没有这些字段）
|
||
- 分类菜单的 `(any-hover:hover)` 悬停样式（当前未加）
|
||
|
||
## 5. 验收
|
||
|
||
```powershell
|
||
node 3DTank/tools/headless_probe.js `
|
||
--url "http://localhost:8080/?autoconnect=1" `
|
||
--out "build/probe/shop" `
|
||
--width 1296 --height 1006 --wait 14000 `
|
||
--eval-file "C:\Users\TermiNexus\AppData\Local\Temp\opencode\goto_shop.js"
|
||
```
|
||
|
||
实测：
|
||
|
||
```text
|
||
shop.menu x=36 y=104 w=328 h=452
|
||
shop.category x=362 y=104 w=... h=...
|
||
shop.item 226.8 × 149.0
|
||
shop.selected 22.5em 宽
|
||
shop.footer y=966 h=40
|
||
```
|