|
|
| （未显示同一用户的10个中间版本） |
| 第1行： |
第1行： |
| <div class="row"> | | <div class="desktop-only "> |
| <div class="large-8 columns">
| | {{首页/PC端}} |
| {{轮播图 | |
| |图1=banner_001.png
| |
| |图1标题=2025年10月22日确定全球上线！
| |
| |图2=banner_002.png
| |
| |图2标题=事前登录正式开放
| |
| }}
| |
| </div>
| |
| <div class="large-4 columns">
| |
| <div style="position: relative; display:inline-block; width: 100%; height: 50px"><!-- 公告标题开始 -->
| |
| <div class="decorative-lines" style="position: absolute; top: 0px; right: 0px"></div>
| |
| <div class="plus-signs" style="position: absolute; bottom: 15px; right: 120px">+ + +</div>
| |
| <div class="english-text" style="position: absolute; bottom: 0px; right: 115px"">NEWS</div>
| |
| <div class="chinese-news" style="position: absolute; bottom: -1px; right: 65px"">新闻</div>
| |
| <div class="chinese-info" style="position: absolute; bottom: 0px; right: 15px"">情报</div>
| |
| </div><!-- 公告标题结束 -->
| |
| <div class="main-line-wrap"><!-- 切换开始 -->
| |
| <div class="resp-tabs">
| |
| <ul class="resp-tabs-list clearfix" style="margin:0px 0px">
| |
| <li class="active czn-list-style"><span class="tab-panel">国服</span></li><!-- 第1个标签 -->
| |
| <li class="czn-list-style" ><span class="tab-panel" >国际服</span></li><!-- 第2个标-->
| |
| <li class="czn-list-style" ><span class="tab-panel" >WIKI</span></li><!-- 第3个标签 -->
| |
| </ul>
| |
| <div class="resp-tabs-container">
| |
| <div class="resp-tab-content" style="display:block"><!-- 第1个标签的内--><!--
| |
| -->{{#ask:[[分类:官方公告]]
| |
| |?发布时间
| |
| |?标题
| |
| |?类型
| |
| |sort=发布时间
| |
| |mainlabel=-
| |
| |format=template
| |
| |template=自动更新文章列表
| |
| |limit=6
| |
| |order=desc
| |
| |link=none
| |
| }} | |
| </div>
| |
| <div class="resp-tab-content"><!-- 第2个标签的内 -->
| |
| | |
| </div>
| |
| <div class="resp-tab-content"><!-- 第3个标签的内容 -->
| |
| | |
| </div>
| |
| </div></div></div><!-- 切换结束 -->
| |
| </div> | | </div> |
| | <div class="mobile-only "> |
| | {{首页/移动端}} |
| </div> | | </div> |
| {{#css: | | {{#css: |
| 第62行： |
第20行： |
| #page-content { | | #page-content { |
| margin: 0px; | | margin: 0px; |
| | } |
| | |
| | .czn-block{ |
| | background-color: #fff; |
| | padding: 10px 10px; |
| | border: 1px solid #dddddd; |
| | border-radius: 0px; |
| | box-shadow: 1px 0 3px rgba(0, 0, 0, .1); |
| | } |
| | |
| | .czn-title { |
| | font-size: 18px; |
| | color: #333; |
| | margin-bottom: 10px; |
| | padding-left: 10px; |
| | border-left: 4px solid #ff5514; |
| } | | } |
|
| |
|
| 第101行： |
第75行： |
| font-weight: bold; | | font-weight: bold; |
| color: #ff6600; | | color: #ff6600; |
| }
| |
|
| |
| .main-line-wrap {
| |
| width: 100%;
| |
| margin: 0px;
| |
| }
| |
| .resp-tabs {
| |
| width: 100%;
| |
| }
| |
|
| |
| .resp-tabs-list {
| |
| list-style: none;
| |
| padding: 0;
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 10px;
| |
| }
| |
| .resp-tabs-list.clearfix::after {
| |
| content: "";
| |
| display: table;
| |
| clear: both;
| |
| }
| |
|
| |
| .czn-list-style {
| |
| display: inline-block;
| |
| cursor: pointer;
| |
| transition: all 0.3s ease;
| |
| }
| |
|
| |
| .tab-panel {
| |
| position: relative;
| |
| display: inline-block;
| |
| background: #b9b9b9;
| |
| color: #000;
| |
| padding: 5px 30px;
| |
| font-size: 12px;
| |
| text-align: center;
| |
| clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
| |
| min-width: auto;
| |
| transition: all 0.3s ease;
| |
| }
| |
|
| |
| .czn-list-style.active .tab-panel {
| |
| background: #ff5514;
| |
| color: white;
| |
| }
| |
|
| |
| .tab-panel::before {
| |
| content: "✦";
| |
| position: absolute;
| |
| left: 5px;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| font-size: 16px;
| |
| color: inherit;
| |
| opacity: 0;
| |
| transition: opacity 0.3s ease;
| |
| }
| |
|
| |
| .tab-panel::after {
| |
| content: "✦";
| |
| position: absolute;
| |
| right: 5px;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| font-size: 16px;
| |
| color: inherit;
| |
| opacity: 0;
| |
| transition: opacity 0.3s ease;
| |
| }
| |
|
| |
| .czn-list-style.active .tab-panel::before,
| |
| .czn-list-style.active .tab-panel::after {
| |
| opacity: 1;
| |
| }
| |
|
| |
| .resp-tabs-container {
| |
| padding-left: 0px;
| |
| }
| |
|
| |
| .resp-tab-content {
| |
| display: none;
| |
| animation: fadeIn 0.3s ease;
| |
| }
| |
| .resp-tab-content[style*="display:block"],
| |
| .resp-tab-content[style*="display: block"] {
| |
| display: block !important;
| |
| }
| |
|
| |
| @keyframes fadeIn {
| |
| from {
| |
| opacity: 0;
| |
| }
| |
| to {
| |
| opacity: 1;
| |
| }
| |
| } | | } |
| }} | | }} |
