TankIC/3DTank/docs/ShopStyleTable.md

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）：

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)：

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）：

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）：

font:500 1em/1 BaseFontMedium; text-transform:uppercase;
color:white; /* active: rgb(255,204,0) */
margin:.2em 0 0;

2.2 主容器

commonContainer（b1k7）：

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）：

font:500 1.875em/1.4em BaseFontBold; margin:1em 0 0; text-transform:uppercase;

描述（gax）：

opacity:.6; line-height:1.25em; font-size:.938em;

物品容器 u1su(rec, bonus)：

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）：

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：

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：

width:calc(100% - 1.5em); position:absolute; left:.75em; top:.75em;
display:flex; align-items:center; justify-content:flex-start; z-index:1;

标题文字 y1sx：

font:500 1em/1 BaseFontMedium; text-transform:uppercase; color:white; margin-top:.2em;

价格文字 h1sy：

font:500 1.125em/1.125 BaseFontMedium; text-transform:uppercase; margin-top:.125em;

预览 n1sy：

display:flex; align-items:center; justify-content:center;
height:auto; width:auto; max-width:80%; z-index:3;

折扣 e1mb：

position:absolute; right:.625em; bottom:1em;
line-height:1.333em; font-size:.938em; font-weight:bold;

2.5 底部栏

ShopFooterComponentStyle-mainContainer（u1hz）：

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）：

width:auto; height:2.2em; margin-left:1.8em;
display:flex; align-items:center; justify-content:flex-start;

exclamation（o1sw）：

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. 验收

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"

实测：

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