查看“模板:男主留音”的源代码

<includeonly>{{#switch:{{{1}}}|头=[[分类:男主留音]]{{面包屑|留音匣}}
<div class="chuanyu">
<div class="title"><span>{{{3|}}}</span><span>
<table class="wikitable " style="margin-left:7px;">
<tr><th style="background: #E9E9E9;border: 2px #B69A7C solid;font-size:55%;padding: 7px;">[[{{{2|}}}-留声/{{{3|}}}|<font color=#8C6349>文字版</font>]]
</th><th style="background: #8C6349;border: 2px #8C6349 solid;font-size:60%;padding:7px;font-weight:bold;">[[{{{2|}}}-留声/{{{3|}}}字幕版|<font color=#FFF8C>字幕版</font>]]</th></tr>
</table><!-- {{板块|按钮|滚动字幕沙盒|字幕版}} --></span></div>
<div>{{提示|橙色|'''{{颜色|白|电脑端移动鼠标，手机端点击文字可以}}{{颜色|命盘橙|放大文字}}。'''}}</div><!--tab嵌套便签开始-->
<!--{{Tab|01节=<div class="text"><p>上次说过，七夕的时候，我要让你看见与以往不同的我。</p></div>}}-->
|尾=</div><!--tab嵌套便签结束-->
|#default={{#switch:{{{2|}}}|开始=<div class="text">|结束=</div>}}
}}
<bstyle>
.chuanyu {
width: 768px;
overflow: hidden;
position: relative;
background: url(https://wiki.biligame.com/yuan/special:filepath/%E7%95%99%E5%A3%B0%E8%83%8C%E6%99%AF-%E5%88%98%E8%BE%A9.png) no-repeat center /100%;
background-size: cover;
margin: 0 auto;
font-family: kaiti;
display:flex;
flex-direction: column;
justify-content: space-between;
}
.chuanyu .title {
margin:15px 30px;
font-size: 48px;
color:#FFF8CB;
display: flex;
justify-content: space-between;
}
.chuanyu .text {
display: flex;
padding-top: 30px;
flex-direction: column;
align-items: center;
}
.chuanyu .text p {
margin: 20px;
line-height: 25px;
font-size: 20px;
color: #B69A7C;
transition: color 1;
text-shadow: 0.5px 0.5px 0px  #000;
}
.chuanyu .text p:hover {
color: #F8E7D9;
font-size:24px;
text-shadow: 1px 0.5px 1px #000;
}
.chuanyu .tab {
display: flex;
flex-direction: column-reverse;
}
.chuanyu .tab ul {
display: flex;
margin: 0 15px;
flex-wrap: wrap;
}
.chuanyu .tab>ul>li {
display: inline-flex;
width:150px;
height:165px;
margin:0 5px;
padding:0;
color:#666;
background:url(https://wiki.biligame.com/yuan/special:filepath/%E7%95%99%E5%A3%B0%E6%8C%89%E9%92%AE.png) no-repeat center / 150px;
}
.chuanyu .tab>ul>li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 82%;
font-size: 20px;
}
.chuanyu .tab>ul>li:hover {
color:#666;
font-weight:bold;
}
.chuanyu .tab>ul>li.active {
background:url(https://wiki.biligame.com/yuan/special:filepath/%E7%95%99%E5%A3%B0%E6%8C%89%E9%92%AE%E9%80%89%E4%B8%AD.png) no-repeat center / 150px !important;
color:#fff;
font-weight:bold;
}
.chuanyu .tab>.tab-content {
margin:15px;
padding:15px 0;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.chuanyu .tab>.tab-content>.tab-pane {
width:100%;
aspect-ratio: 1 / 1.6;
overflow-y:scroll;
}
.chuanyu .tab>.tab-content>.tab-pane.active {
background: transparent!important;
}
.chuanyu .tab>ul>li>a, .chuanyu .tab>ul>li>a:hover, .chuanyu .tab>ul>li>a:active, .chuanyu .tab>ul>li>a:focus {
text-decoration:none;
color:inherit;
}
.chuanyu .tab>ul>li.active>a, .chuanyu .tab>ul>li>a:hover, .chuanyu .tab>ul>li.active>a:active, .chuanyu .tab>ul>li.active>a:focus {
color:inherit;
}
.chuanyu ::-webkit-scrollbar {
width:12px;
border-radius: 20px;
background: #775743;
}
.chuanyu ::-webkit-scrollbar-thumb {
border-radius: 20px;
background:#736758;
}
@media only screen and (max-width: 870px) {
.chuanyu {
width:100%;
}
.chuanyu .title {
font-size: 24px;
}
.chuanyu .tab>ul>li {
width: 90px !important;
height: 95px !important;
background:url(https://patchwiki.biligame.com/images/yuan/2/2b/cv2nrrzvd0qtx07f71k2bjolz5im8ji.png) no-repeat center / 90px !important;
}
.chuanyu .tab>ul>li.active {
background:url(https://patchwiki.biligame.com/images/yuan/0/08/k5jfts3hi6b4f94qw2ywo5tmjb35rlk.png) no-repeat center / 90px !important;
}
.chuanyu .text p {
margin: 16px;
line-height: 21px;
font-size:16px;
text-shadow: 0.5px 0.5px 0px  #000;
}
.chuanyu .text p:hover {
font-size:20px;
text-shadow: 1px 0.5px 1px #000;
}
}
</bstyle>
</includeonly>
<noinclude>
==模板说明==
此模板用于录入男主留音
==使用方法==
<pre>
{{男主留音|头|角色名称|剧情名称}}
{{男主留音|剧情节数|开始}}
内容1内容1内容1内容1内容1
{{男主留音|剧情节数|结束}}
{{男主留音|尾}}
</pre>
==效果展示==
<pre>
{{男主留音|头|刘辩|七夕特卖}}
{{男主留音|01节|开始}}
内容1内容1内容1内容1内容1
{{男主留音|01节|结束}}
{{男主留音|02节|开始}}
内容2内容2内容2内容2内容2
{{男主留音|02节|结束}}
{{男主留音|尾}}
</pre>
{{男主留音|头|刘辩|七夕特卖}}
{{男主留音|01节|开始}}
内容1内容1内容1内容1内容1
{{男主留音|01节|结束}}
{{男主留音|02节|开始}}
内容2内容2内容2内容2内容2
{{男主留音|02节|结束}}
{{男主留音|尾}}
</noinclude>