查看“模板:驱动图鉴/立绘”的源代码

<includeonly>
<!-- <h2> {{#var:驱动名称国服}} {{#var:驱动名称日服}} 音擎 </h2> -->
<!-- <tabber>
高稀有度=
<center>
<div class="weapon-item-container">
  [[File:{{#var:驱动名称}}1.png|center|class=weapon-item-image|alt=图片1]]
  <div class="weapon-item-highlight"></div>
</div>
</center>
|-|
次稀有度=
<center>
<div class="weapon-item-container">
  [[File:{{#var:驱动名称}}2.png|center|class=weapon-item-image|alt=图片2]]
  <div class="weapon-item-highlight"></div>
</div>
</center>
</tabber> -->

<center>
<div class="weapon-item-container">
  <div class="soc-focus-c">
    <div class="soc-swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a target="_blank" class="item" link=首页 >[[File:{{#var:驱动名称}}1.png|link=]]<div class="title"> </div></a>
        </div>
        {{#ifexist: File:{{#var:驱动名称}}2.png|<div class="swiper-slide"><a target="_blank" class="item" link=>[[File:{{#var:驱动名称}}2.png|link=]]</a></div>|}}
        {{#ifexist: File:{{#var:驱动名称}}3.png|<div class="swiper-slide"><a target="_blank" class="item" link=>[[File:{{#var:驱动名称}}3.png|link=]]</a></div>|}}
      </div>
      <div class="weapon-item-highlight"></div>
      <div class="soc-swiper-pagination"></div>
      <div class="soc-swiper-button-prev"></div>
      <div class="soc-swiper-button-next"></div>
    </div>
  </div>
</div>

</center>



{{#CSS:
.weapon-item-container{
    position: relative;
    bottom: 10px;
    top: -10;
}
<!-- .soc-focus-c .soc-swiper-container {
    height: 166px !important;
    width: 166px !important;
} -->
.soc-focus-c {
    width: 166px!important;
    height: 166px!important;
}
.soc-focus-c .swiper-slide {
    background: none!important;
}
<!-- 标签选中时 -->
.tabber__tab[aria-selected='true'], .tabber__tab[aria-selected='true']:visited {
    color: #222122 !important;
    background: #d8fa00;
}
<!-- 未选中时 -->
<!-- .so-content-in a:visited {
    color: #bad700 !important;
} -->
<!-- 标签下面的样式线 -->
.tabber__indicator {
    background: #222122;
}
<!-- 选中时的文字的下划线 -->
.so-content-in a:hover, .so-content-in a:focus {
    text-decoration: none !important;
}
<!-- 未选中标签的文字被按住时 -->
.so-content-in a:active {
    color: #BAD700 !important;
}
<!-- .tabber {
    width: 156px; /* 设置选项卡宽度为156px */
} -->
<!-- 调整标签位置 -->
.tabber__tabs {
    padding-left: 6px;
    padding-right: 6px;
}
.tabber__panel{
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding: 0 !important;
}
.weapon-item-container {
    <!-- width: 100%; /* 调整为100%，使其填充父容器 */ -->
    width: 170px;
    height: 170px;
    background: linear-gradient(to bottom, #000, #333);
    border-radius: 5px;
    border: 2px solid #555;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.weapon-item-image {
    width: 90%;
    height: auto;
    z-index: 2;
}

.weapon-item-highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 14px;
    background-color: #8f6f216e;
}

}}

</includeonly><noinclude>


{{设定参数
|驱动名称=啄木鸟电
}}{{驱动图鉴/立绘}}