用户讨论:Neko copper：修订间差异

来自Mindustry中文wiki
小无编辑摘要
小无编辑摘要
第2行： 第2行：
<div class="mdtMain">
<div class="mdtMain">
<span class="heimu"> 测试 </span>
<span class="heimu"> 测试 </span>
<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-button active" data-tab="tab1">煤炭发电机</button>
    <button class="tab-button" data-tab="tab2">太阳能发电机</button>
  </div>
 
  <div id="tab1" class="tab-content active">
    {| class="mdtSideTable"
    ! 输入 !!<!-- 不要删除这里的空白表头 -->
    ! 输出 !!
    ! 消耗电力
    ! 生产时间
    |-
    | 1.33[[File:Item-coal-ui.png|18px|link=煤炭]]/秒 || (2[[File:Item-coal-ui.png|18px|link=煤炭]])
    | 0.66[[File:Item-graphite-ui.png|18px|link=石墨]]/秒 || (1[[File:Item-graphite-ui.png|18px|link=石墨]])
    | 无
    | 1.5秒
    |}
  </div>
 
  <div id="tab2" class="tab-content">
    {| class="mdtSideTable"
    ! 输入 !!<!-- 不要删除这里的空白表头 -->
    ! 输出 !!
    ! 消耗电力
    ! 生产时间
    |-
    | 无 ||
    | 1[[File:Item-energy-ui.png|18px|link=能量]]/秒 ||
    | 无
    | 持续
    |}
  </div>
</div>


2024年数据=
<style>
{| class="wikitable"
.tab-container {
|+ 2024年销售数据
  margin: 1em 0;
! 季度 !! 销售额（万） !! 增长率
}
|-
.tab-buttons {
| Q1 || 150 || 10%
  display: flex;
|-
  border-bottom: 1px solid #ccc;
| Q2 || 180 || 20%
}
|-
.tab-button {
| Q3 || 210 || 17%
  padding: 8px 16px;
|-
  background: #f5f5f5;
| Q4 || 250 || 19%
  border: 1px solid #ccc;
|}
  border-bottom: none;
|-|
  cursor: pointer;
2025年数据=
  margin-right: 4px;
{| class="wikitable"
  border-radius: 4px 4px 0 0;
|+ 2025年销售数据
}
! 季度 !! 销售额（万） !! 增长率
.tab-button.active {
|-
  background: white;
| Q1 || 280 || 12%
  border-bottom: 1px solid white;
|-
  margin-bottom: -1px;
| Q2 || 320 || 14%
}
|-
.tab-content {
| Q3 || 350 || 9%
  display: none;
|-
  padding: 10px;
| Q4 || 400 || 14%
  border: 1px solid #ccc;
|}
  border-top: none;
|-|
}
对比分析=
.tab-content.active {
{| class="wikitable"
  display: block;
|+ 年度对比
}
! 指标 !! 2024年 !! 2025年 !! 变化
</style>
|-
| 总销售额 || 790 || 1350 || +71%
|-
| 平均增长率 || 16.5% || 12.3% || -4.2%
|-
| 最佳季度 || Q4 || Q4 || 持平
|}


</div>
<script>
document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', function() {
    // 移除所有active类
    document.querySelectorAll('.tab-button, .tab-content').forEach(el => {
      el.classList.remove('active');
    });
   
    // 激活当前按钮和对应内容
    this.classList.add('active');
    const tabId = this.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  });
});
</script>


</div>
</div>

2026年2月22日 (日) 09:32的版本

测试 

   <button class="tab-button active" data-tab="tab1">煤炭发电机</button>
   <button class="tab-button" data-tab="tab2">太阳能发电机</button>
输入 输出 消耗电力 生产时间
1.33/秒 (2) 0.66/秒 (1) 无 1.5秒
输入 输出 消耗电力 生产时间
无 1文件:Item-energy-ui.png/秒 无 持续

<style> .tab-container { 

 margin: 1em 0;

} .tab-buttons { 

 display: flex;
 border-bottom: 1px solid #ccc;

} .tab-button { 

 padding: 8px 16px;
 background: #f5f5f5;
 border: 1px solid #ccc;
 border-bottom: none;
 cursor: pointer;
 margin-right: 4px;
 border-radius: 4px 4px 0 0;

} .tab-button.active { 

 background: white;
 border-bottom: 1px solid white;
 margin-bottom: -1px;

} .tab-content { 

 display: none;
 padding: 10px;
 border: 1px solid #ccc;
 border-top: none;

} .tab-content.active { 

 display: block;

} </style>

<script> document.querySelectorAll('.tab-button').forEach(button => { 

 button.addEventListener('click', function() {
   // 移除所有active类
   document.querySelectorAll('.tab-button, .tab-content').forEach(el => {
     el.classList.remove('active');
   });
   
   // 激活当前按钮和对应内容
   this.classList.add('active');
   const tabId = this.getAttribute('data-tab');
   document.getElementById(tabId).classList.add('active');
 });

}); </script>

取自“https://mdtwiki.top/index.php?title=用户讨论:Neko_copper&oldid=3499”