# 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
```