查看“模板:喵呜徽章”的源代码

<includeonly>
{{JS|BadgeSwitch.js}}
{{#set:
|套装名称={{{套装名称|}}}
|沈星回集齐文案={{{沈星回集齐文案|}}}
|黎深集齐文案={{{黎深集齐文案|}}}
|祁煜集齐文案={{{祁煜集齐文案|}}}
|秦彻集齐文案={{{秦彻集齐文案|}}}
|夏以昼集齐文案={{{夏以昼集齐文案|}}}
|徽章1={{{徽章1}}}
|徽章2={{{徽章2}}}
|徽章3={{{徽章3}}}
|徽章4={{{徽章4}}}
|徽章5={{{徽章5}}}
|徽章6={{{徽章6}}}
|徽章7={{{徽章7}}}
|徽章8={{{徽章8}}}
|徽章9={{{徽章9}}}
|徽章描述1={{{徽章描述1}}}
|徽章描述2={{{徽章描述2}}}
|徽章描述3={{{徽章描述3}}}
|徽章描述4={{{徽章描述4}}}
|徽章描述5={{{徽章描述5}}}
|徽章描述6={{{徽章描述6}}}
|徽章描述7={{{徽章描述7}}}
|徽章描述8={{{徽章描述8}}}
|徽章描述9={{{徽章描述9}}}
}}[[分类:喵呜徽章]]
{{#vardefine: 角色|0 }}
{{#ifeq:{{PAGENAME}}|沈星回/喵喵徽章|{{#vardefine: 角色|沈星回 }}|}}
{{#ifeq:{{PAGENAME}}|黎深/喵喵徽章|{{#vardefine: 角色|黎深 }}|}}
{{#ifeq:{{PAGENAME}}|祁煜/喵喵徽章|{{#vardefine: 角色|祁煜 }}|}}
{{#ifeq:{{PAGENAME}}|秦彻/喵喵徽章|{{#vardefine: 角色|秦彻 }}|}}
{{#ifeq:{{PAGENAME}}|夏以昼/喵喵徽章|{{#vardefine: 角色|夏以昼 }}|}}
<div class="miaowu-container">
{{#ifexist:{{{1|}}}|
<div class="more">[[{{{1|}}}|Edit>>]]</div>|}}
<div class="top-box">
<div class="suit-img">
[[file:{{{套装名称|}}}.png|100px|link={{{1|}}}]]
</div>
<div class="top-describe">
<div class="top-title">{{{套装名称|}}}</div>
<div class="describe-box">
{{#vardefine: j|0}}
{{#while:
 |{{#ifexpr: {{#var: j}} < 9|true}}
 |{{#vardefine: j|{{#expr: {{#var: j}} + 1}} }}
 {{#vardefine: 徽章名字|徽章{{#var: j}} }}
 {{#vardefine: 徽章描述|徽章描述{{#var: j}} }}
<div class="describe-item">
<div class="describe-title">{{{{{#var: 徽章名字}}|}}}</div>
<div class="badge-describe">{{{{{#var: 徽章描述}}|}}}</div>
</div>
}}
</div>
</div>
</div>
[[file:名字_分割线.png|link=]]
<div class="badge-content">
{{#vardefine: i|0}}
{{#while:
 |{{#ifexpr: {{#var: i}} < 9|true}}
 |{{#vardefine: i|{{#expr: {{#var: i}} + 1}} }}
 {{#vardefine: name|徽章{{#var: i}} }}
 <div class="badge-item">
    <div class="badge-circle">
[[file:{{{{{#var: name}}|}}}.png|100px|link=]]
    </div>
    <div class="badge-title">{{{{{#var: name}}|}}}</div>
</div>
}}
</div>
{{#ifeq:{{#var:角色}}|0|
<div class="foot-box time-axis">
{{Tab
|选项1=沈星回<div class="split-line">[[file:姓名分割线.png|link=]]</div>
|选项2=黎深  <div class="split-line">[[file:姓名分割线.png|link=]]</div>
|选项3=祁煜  <div class="split-line">[[file:姓名分割线.png|link=]]</div>
|选项4=秦彻  <div class="split-line">[[file:姓名分割线.png|link=]]</div>
|选项5=夏以昼
|内容1='''集齐{{{套装名称|}}}啦：'''{{{沈星回集齐文案|}}}
|内容2='''集齐{{{套装名称|}}}啦：'''{{{黎深集齐文案|}}}
|内容3='''集齐{{{套装名称|}}}啦：'''{{{祁煜集齐文案|}}}
|内容4='''集齐{{{套装名称|}}}啦：'''{{{秦彻集齐文案|}}}
|内容5='''集齐{{{套装名称|}}}啦：'''{{{夏以昼集齐文案|}}}
}}
</div>|
<div class="foot-box time-axis">
<div class="role">{{#var: 角色}}</div>
'''集齐{{{套装名称|}}}啦：'''{{{{{#var: 角色}}集齐文案|}}}
</div>
}}
</div>
{{#CSS:
* {
    box-sizing: border-box;
}

.miaowu-container {
    width:380px;
    /* height: 700px; */
    /* padding: 10px; */
    margin: auto;
    border-radius: 2px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    font-family:"宋体";
    background: linear-gradient(to bottom, #c8c4c7, #f6f5f5,#858585);
    position: relative;
}
        @media screen and (max-width: 400px) {
            .miaowu-container {
                width: calc(100% - 20px);
            }
            .miaowu-container .foot-box {
    min-height: 110px;
    height:auto
}
        }
.more{
position:absolute;
right:20px;
top:20px;
color:#333;
}
.more a{color:#333}
.more a:visited{color:#333}
.top-box {
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: space-between;
    padding:20px 10px;
    /* border-bottom: 1px solid #666; */
}

.suit-img {
    width: 90px;
    height: calc(100% -20px);
    overflow:hidden;
}

.suit-img img {
    width: 100%;
    height: 100%;
}

.top-describe {
    width: calc(75% - 10px);
}

.top-title {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0 0;
    line-height: 1;
    margin-bottom: 10px;
    color:#37353c;
}
.describe-box {
    width: 100%;
    height: 100px;
}
.describe-item {
    display:none;
}
.describe-item.active {
    display:block;
}
.describe-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color:#6b6a6f;
}
.badge-describe{
    font-size: 14px;
    color:#908f93;
}
.badge-content {
    width: 100%;
    height: 450px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
}

.badge-item {
    width: 33.33%;
    height: 150px;
    padding: 5px;
    cursor: pointer;
    text-align:center;
}

.badge-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid transparent;
    overflow: hidden;
    margin: 0 auto;
}

.badge-circle img {
    width: 100%;
    height: 100%;
}

.badge-title {
    line-height: 2;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color:#5c5a5f;
}

.badge-item.active .badge-circle,
.badge-item:hover .badge-circle {
    border-color: #ec5f5f;
    border-width: 3px;
}

.foot-box {
    width: 100%;
    height: 110px;
    padding:10px;
    background:#f8f4f1;
}
.miaowu-container .SwitchContainer .BtnContainer .btn.active,
.miaowu-container .SwitchContainer .BtnContainer .btn:active{
    box-shadow:none;
    -webkit-box-shadow:none;
    font-weight:700;
    color:#535055;
}
.miaowu-container .SwitchContainer .BtnContainer{
display:flex;
}
.miaowu-container .SwitchContainer .BtnContainer .btn{
    position:relative;
    color:#908f93;
    font-size:16px;
}
<!--.miaowu-container .SwitchContainer .BtnContainer .btn:not(:last-child)::after{
    content:"";
    position:absolute;
    top:20%;
    right:0;
    width:1px;
    height:60%;
    background:#333;
}-->
.split-line{
    position:absolute;
    top:20%;
    right:0;   
}
.miaowu-container .BtnContent .content{
    display:none;
    color:#4f4d58;
}
.miaowu-container .BtnContent .content.active {
    display:block;
}
.time-axis{
    display:block;
}
.time-axis.notshow{
    display:none;
}
.role{
font-size:16px;
font-weight:700;
color:#333;
}
}}


</includeonly>
<noinclude>
{{喵呜徽章
|套装名称=超能喵喵
|沈星回集齐文案=如果沈星回也变成这套徽章里的一只小猫……图案会亮得变成一片白茫茫吧？
|黎深集齐文案=除了Evol，黎深一定也有其他超能力，比如……工作时的超——长待机。
|祁煜集齐文案=问祁煜最想要徽章上哪个超能力，答案是都行，除了那个飞来飞去的毯子。我好像明白了什么~
|秦彻集齐文案=
|夏以昼集齐文案=
|徽章1=魔法喵毯
|徽章2=萤光捕喵
|徽章3=喵装重音
|徽章4=潮汐之喵
|徽章5=冰雪奇喵
|徽章6=时间之喵
|徽章7=雷霆滑板
|徽章8=喵洞穿梭
|徽章9=喵语花仙
|徽章描述1=抓稳扶好，大魔法喵要带着你一起出发啦！
|徽章描述2=在微风与夜色中，为你捕捉点点萤光。
|徽章描述3=携带超强重音，看喵全力出击！
|徽章描述4=潮汐啊，变成猫猫最喜欢的形状吧。
|徽章描述5=即使拥有冰雪之力，内心也是温暖的哦。
|徽章描述6=表针转动，猫猫只在乎和你相处的时间。
|徽章描述7=喵喵要以最快的速度赶到你的身边！
|徽章描述8=快看快看，喵抓住了最亮的星星哦。
|徽章描述9=花朵的声音，好温柔。
}}
</noinclude>