Sandbox/2.0:修订间差异
更多操作
邀约模块重新设计:SVG弯曲红线引导+简化票券+CSS占位图;去掉img标签 (via update-page on MediaWiki MCP Server) |
邀约模块重写:class改date-,去标题,去行首空格,磨砂卡片,占位图内嵌,数字左上角,SVG红线设计感优化 (via update-page on MediaWiki MCP Server) |
||
| 第123行: | 第123行: | ||
<!--2-4. 邀约--> | <!--2-4. 邀约--> | ||
<!-- | <!-- | ||
邀约模块结构说明: | |||
- .card_content_date-track 是 relative 容器,SVG 红线绝对定位覆盖其上 | |||
- SVG 由多段贝塞尔曲线组成,粗细不同,形成有设计感的引导线 | |||
- 奇数卡(01/03/05)偏上,偶数卡(02/04)偏下 | |||
- 有占位图的卡片:.card_content_date-img 放在卡片顶部(不额外占独立空间) | |||
- 大数字装饰放左上角,不与 Story/END 标签重叠 | |||
--> | --> | ||
<div class=" | <div class="card_content_date"> | ||
<div class=" | <div class="card_content_date-track"> | ||
<!-- | |||
SVG 引导红线设计说明: | |||
- viewBox="0 0 1000 320",preserveAspectRatio="none" 自适应宽度 | |||
- 用三段不同 stroke-width 的路径叠加,模拟粗细变化(笔触感) | |||
- 主线较细(1.2px),中段经过偶数票时加粗(3px),收尾渐细 | |||
- 五个菱形节点(◇)标记每张票的停靠点,比圆点更有设计感 | |||
- 整体走向:从左上(01)→ 右下(02)→ 左上(03)→ 右下(04)→ 左上(05) | |||
- 贝塞尔控制点使曲线弧度圆润自然 | |||
--> | |||
<svg class="card_content_date-svg" viewBox="0 0 1000 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> | |||
<defs> | |||
<linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%"> | |||
<stop offset="0%" stop-color="#ed4141" stop-opacity="0.25"/> | |||
<stop offset="20%" stop-color="#ed4141" stop-opacity="0.6"/> | |||
<stop offset="50%" stop-color="#ed4141" stop-opacity="0.85"/> | |||
<stop offset="80%" stop-color="#ed4141" stop-opacity="0.6"/> | |||
<stop offset="100%" stop-color="#ed4141" stop-opacity="0.2"/> | |||
</linearGradient> | |||
</defs> | |||
<!-- 底层:细描边,完整路径,营造阴影/光晕感 --> | |||
<path d="M 80,90 C 140,90 160,220 260,220 C 340,220 380,90 460,90 C 540,90 560,220 660,220 C 740,220 780,90 900,90" fill="none" stroke="#ed4141" stroke-width="4" stroke-linecap="round" opacity="0.08"/> | |||
<!-- 主线:用渐变色,中等粗细 --> | |||
<path d="M 80,90 C 140,90 160,220 260,220 C 340,220 380,90 460,90 C 540,90 560,220 660,220 C 740,220 780,90 900,90" fill="none" stroke="url(#lineGrad)" stroke-width="1.5" stroke-linecap="round"/> | |||
<!-- 强调段:01→02 这段加粗,暗示"开始" --> | |||
<path d="M 80,90 C 140,90 160,220 260,220" fill="none" stroke="#ed4141" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/> | |||
<!-- 强调段:04→05 这段加粗,暗示"结束" --> | |||
<path d="M 660,220 C 740,220 780,90 900,90" fill="none" stroke="#ed4141" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/> | |||
<!-- 节点:菱形,标记五张票的停靠点 --> | |||
<!-- 01:左上 --> | |||
<polygon points="80,82 87,90 80,98 73,90" fill="#ed4141" opacity="0.7"/> | |||
<!-- 02:右下 --> | |||
<polygon points="260,212 267,220 260,228 253,220" fill="#ed4141" opacity="0.7"/> | |||
<!-- 03:中上 --> | |||
<polygon points="460,82 467,90 460,98 453,90" fill="#ed4141" opacity="0.7"/> | |||
<!-- 04:右下 --> | |||
<polygon points="660,212 667,220 660,228 653,220" fill="#ed4141" opacity="0.7"/> | |||
<!-- 05:右上 --> | |||
<polygon points="900,82 907,90 900,98 893,90" fill="#ed4141" opacity="0.7"/> | |||
</svg> | |||
<!-- 五张邀约卡片 --> | |||
</div><!-- | <ul class="card_content_date-list"> | ||
</div><!-- | <!-- 01:无图,偏上 --> | ||
<li class="card_content_date-item"> | |||
<div class="card_content_date-body"> | |||
<span class="card_content_date-num">01</span> | |||
<span class="card_content_date-label">Story</span> | |||
</div> | |||
</li> | |||
<!-- 02:有占位图,偏下 --> | |||
<li class="card_content_date-item"> | |||
<div class="card_content_date-img">image</div> | |||
<div class="card_content_date-body"> | |||
<span class="card_content_date-num">02</span> | |||
<span class="card_content_date-label">Story</span> | |||
</div> | |||
</li> | |||
<!-- 03:无图,偏上 --> | |||
<li class="card_content_date-item"> | |||
<div class="card_content_date-body"> | |||
<span class="card_content_date-num">03</span> | |||
<span class="card_content_date-label">Story</span> | |||
</div> | |||
</li> | |||
<!-- 04:有占位图,偏下 --> | |||
<li class="card_content_date-item"> | |||
<div class="card_content_date-img">image</div> | |||
<div class="card_content_date-body"> | |||
<span class="card_content_date-num">04</span> | |||
<span class="card_content_date-label">Story</span> | |||
</div> | |||
</li> | |||
<!-- 05:无图,偏上,END --> | |||
<li class="card_content_date-item"> | |||
<div class="card_content_date-body"> | |||
<span class="card_content_date-num">05</span> | |||
<span class="card_content_date-label">END</span> | |||
</div> | |||
</li> | |||
</ul> | |||
</div> | |||
</div> | |||
</div><!--右栏结束--> | </div><!--右栏结束--> | ||
2026年3月5日 (四) 20:27的版本
STAGE
01终结技对存在[持续伤害]的目标,伤害额外提升10%。
攻击加成提升3.0%「沉默是金Ⅰ」STAGE
02攻击加成提升3.0%「沉默是金Ⅱ」STAGE
03攻击加成提升3.0%「沉默是金Ⅲ」STAGE
04攻击加成提升3.0%「沉默是金Ⅳ」STAGE
05情报适配度提升1级:※2 → ※3
攻击加成提升3.0%「沉默是金Ⅴ」
今年格外寒冷,还不到落雪的时候,霜就已经攀上窗户。
壁炉熊熊燃烧着,身穿洁白睡衣的孩子们围在壁炉边,像一群染上橘色的雪人。幽灵被他们簇拥于中间,面上仍然平淡地维持笑意。
这群新收容的孩子格外闹腾,没有半点面对新环境的不安,几分钟前甚至还吵着让幽灵念睡前故事。
抵不过他们的强烈要求,幽灵叹了口气,打开故事书。
《愿望精灵》是那种普通、平淡,但又能在畅销榜上占据一席的故事。大概讲述了一个出身凄苦的男孩,身边人救助他并将这种救助包装成"精灵"实现愿望,而长大后的男孩以同样的方式救助别人。
"最后,愿望精灵越来越多,大家都过上了幸福快乐的生活……"
基本上都是幽灵无法理解的内容。
故事果然是故事,全是放现实里行不通的事。说到底,没有利益,怎么可能将人群联系到一起?
这些孩子们却对这个故事充满向往。幽灵看着他们的笑脸,摇摇头。他们和故事里的男孩处境相似,然而现实里哪里有无条件的救助,不过是接纳、笼络、而后利用罢了。
"爱德华多哥哥,你也有愿望精灵吗?"
<svg class="card_content_date-svg" viewBox="0 0 1000 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <defs> <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#ed4141" stop-opacity="0.25"/> <stop offset="20%" stop-color="#ed4141" stop-opacity="0.6"/> <stop offset="50%" stop-color="#ed4141" stop-opacity="0.85"/> <stop offset="80%" stop-color="#ed4141" stop-opacity="0.6"/> <stop offset="100%" stop-color="#ed4141" stop-opacity="0.2"/> </linearGradient> </defs> <path d="M 80,90 C 140,90 160,220 260,220 C 340,220 380,90 460,90 C 540,90 560,220 660,220 C 740,220 780,90 900,90" fill="none" stroke="#ed4141" stroke-width="4" stroke-linecap="round" opacity="0.08"/> <path d="M 80,90 C 140,90 160,220 260,220 C 340,220 380,90 460,90 C 540,90 560,220 660,220 C 740,220 780,90 900,90" fill="none" stroke="url(#lineGrad)" stroke-width="1.5" stroke-linecap="round"/> <path d="M 80,90 C 140,90 160,220 260,220" fill="none" stroke="#ed4141" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/> <path d="M 660,220 C 740,220 780,90 900,90" fill="none" stroke="#ed4141" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/> <polygon points="80,82 87,90 80,98 73,90" fill="#ed4141" opacity="0.7"/> <polygon points="260,212 267,220 260,228 253,220" fill="#ed4141" opacity="0.7"/> <polygon points="460,82 467,90 460,98 453,90" fill="#ed4141" opacity="0.7"/> <polygon points="660,212 667,220 660,228 653,220" fill="#ed4141" opacity="0.7"/> <polygon points="900,82 907,90 900,98 893,90" fill="#ed4141" opacity="0.7"/> </svg>
-
01 Story
-
image
02 Story
-
03 Story
-
image
04 Story
-
05 END
