|
|
(未显示同一用户的25个中间版本) |
第1行: |
第1行: |
| <div id="home-nav" class="home-grid" role="navigation"> | | <html> |
| <div class="home-card home-card--button" id="home-nav-jizhi">
| | <script> |
| <div class="home-card__background">[[File:MainTab-B.png|300px|link=机制]]</div>
| | // 切换难度(EZ 1 / HD 6 / IN 9) |
| <div class="home-card__foreground">机制</div>
| | function cycleDifficulty(element) { |
| </div>
| | const states = JSON.parse(element.dataset.states); |
| <div class="home-card home-card--button" id="home-nav-qumu">
| | const currentIndex = parseInt(element.dataset.current); |
| <div class="home-card__background">[[File:MainTab-B.png|300px|link=曲目列表]]</div>
| | const nextIndex = (currentIndex + 1) % states.length; |
| <div class="home-card__foreground">曲目列表</div>
| | |
| </div>
| | element.textContent = states[nextIndex]; |
| <div class="home-card home-card--button" id="home-nav-kaishi">
| | element.dataset.current = nextIndex; |
| <div class="home-card__background">[[File:MainTab-B.png|300px|link=开始]]</div>
| | |
| <div class="home-card__foreground">开始</div>
| | updateOutput(); // 更新输出 |
| </div>
| |
| <div class="home-card home-card--button" id="home-nav-chenghao">
| |
| <div class="home-card__background">[[File:MainTab-P.png|300px|link=称号列表]]</div>
| |
| <div class="home-card__foreground">称号列表</div>
| |
| </div>
| |
| <div class="home-card home-card--button" id="home-nav-tansuo">
| |
| <div class="home-card__background">[[File:MainTab-O.png|300px|link=活动]]</div>
| |
| <div class="home-card__foreground">活动</div>
| |
| </div>
| |
| <div class="home-card home-card--button" id="home-nav-chengjiu">
| |
| <div class="home-card__background">[[File:MainTab-P.png|300px|link=成就列表]]</div>
| |
| <div class="home-card__foreground">成就列表</div>
| |
| </div>
| |
| <div class="home-card home-card--button" id="home-nav-shoucang">
| |
| <div class="home-card__background">[[File:MainTab-P.png|300px|link=收藏]]</div>
| |
| <div class="home-card__foreground">收藏</div>
| |
| </div>
| |
| <div class="home-card home-card--button" id="home-nav-条目">
| |
| <div class="home-card__background">[[File:MainTab-B.png|300px|link=分类:条目]]</div>
| |
| <div class="home-card__foreground">所有条目</div>
| |
| </div>
| |
| </div>
| |
| <small><font color=#888888>近期热点页面</font></small>
| |
| <div id="home-nav" class="home-grid" role="navigation">
| |
| <div class="home-card home-card--button" id="home-nav-redian">
| |
| <div class="home-card__background">[[File:圣诞单曲更新条幅20241225.png|300px|link=Frozen Heart]]</div>
| |
| <div class="home-card__foreground">Disc EX更新曲目</div>
| |
| </div>
| |
| </div>
| |
| <templatestyles src="Template:首页/shared/styles.css"/>
| |
| {{#css:#home-nav {
| |
| margin-top: 0.8rem;
| |
| } | | } |
| #home-nav .home-card__background:after {
| | |
| position: absolute;
| | // 切换比例(4:3 / 16:9) |
| pointer-events: none;
| | function cycleRatio(element) { |
| top: 0;
| | const states = JSON.parse(element.dataset.states); |
| right: 0;
| | const currentIndex = parseInt(element.dataset.current); |
| bottom: 0;
| | const nextIndex = (currentIndex + 1) % states.length; |
| left: 0;
| | |
| display: block;
| | element.textContent = states[nextIndex]; |
| background: linear-gradient(to right,#000,transparent);
| | element.dataset.current = nextIndex; |
| content: "";
| | |
| | updateOutput(); // 更新输出 |
| } | | } |
| #home-nav .home-card__foreground {
| | |
| pointer-events: none;
| | // 根据当前难度和比例更新输出 |
| height: 100%;
| | function updateOutput() { |
| width: 100%; | | const difficulty = document.getElementById("difficulty").textContent; |
| display: flex; | | const ratio = document.getElementById("ratio").textContent; |
| align-items: center; | | |
| padding: 0 15px;
| | // 定义输出规则 |
| color: #fff;
| | const outputRules = { |
| font-weight: 500;
| | "EZ 1": { "4:3": "111aaa", "16:9": "222aaa" }, |
| | "HD 6": { "4:3": "111bbb", "16:9": "222bbb" }, |
| | "IN 9": { "4:3": "111ccc", "16:9": "222ccc" } |
| | }; |
| | |
| | // 获取当前输出 |
| | const output = outputRules[difficulty]?.[ratio] || "Unknown"; |
| | document.getElementById("output").textContent = output; |
| } | | } |
| }}
| | </script> |
| | <table width="100%" style="border:none; border-collapse:collapse;"> |
| | <tr> |
| | <td colspan="2" style="text-align:center; background-color:#A9FBFF;"><div id="difficulty" onclick="cycleDifficulty(this)" |
| | data-states='["EZ 1", "HD 6", "IN 9"]' data-current="0" style="cursor:pointer;"> |
| | EZ 1 |
| | </div></td> |
| | </tr> |
| | <tr> |
| | <td width="15%" height="300px" style="text-align:center; background-color:#ABCDEF;"><div id="ratio" onclick="cycleRatio(this)" |
| | data-states='["4:3", "16:9"]' data-current="0" style="cursor:pointer;"> |
| | 4:3 |
| | </div></td> |
| | <td><span id="output">111aaa</span></td> |
| | </tr> |
| | </table> |
| | </html> |