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

<includeonly>__NOTOC__{{#switch:{{{1|}}}
|头=<!-- {{板块|开始|标题=敬告读者|CSS=box-3|追加CSS=max-width:100%}}
{{板块|内容开始|追加CSS= color: #7a5d4b;}}
<center>点击'''标题'''可以查看留声匣内容；点击<big><i class="fa-question-circle fa"></i></big>可以查看获取方式</center>
{{板块|内容结束}}
{{板块|结束}} --><div class="story_bg" style=""><div style="width: 100%;left:0">[[File:留声匣背景-{{{2|}}}.png|link=|1000px|center]]</div>
<div class="dxtext" style="">
|尾=</div></div>
|#default=<div class="story_img" style="">[[File:留声匣按钮-{{{1|}}}.png|link={{{3}}}]][[{{{3}}}|<span class="story_title" style="">{{{2|}}}</span>]]<br><span class=" story_brief " style="border:none;">{{{5|待补}}}</span><span class=" story_way " style="border:none;"><hr>获取方式：{{{4|待补}}}<br>消耗环纽：{{{消耗|对应环纽×8/8/10}}}</span><span class="bili-tt story_info" data-type="child" style="border:#000 solid 0px; color: #7a5d4b;"></span></div>
}}
{{#css:
 .story_bg {
width: 80%;
position: relative;
overflow: hidden;
left:3.5vw
}
.dxtext{
position: absolute;
top:40%;
padding: 3% 6%;
width: 100%;height: 60%;
flex-wrap: wrap;
justify-content:start;align-content: start;
flex-direction:column;
overflow-y:auto;
}
 .story_img {
     width:200px;
     position: relative;
     left:1vw;
     }
.story_title {
position: absolute; 
font-size: 36px;
color: #fcefc5; 
top:60px;
font-family: monospace;
font-weight:900;
left: 200px;
width:300px;
}
.story_brief{
position: absolute; 
font-size: 18px;
color: #fcefc5; 
font-family: monospace;
font-weight:600;
left: 200px;
width:360px;
top:110px;
}
.story_way{
position: absolute; 
font-size: 14px;
color: #fcefc5; 
font-family: monospace;
font-weight:600;
left: 200px;
width:300px;
bottom:140px;
}
.story_title:hover {
    color: #FFA500;
font-weight: bolder;
text-decoration:underline;
    }

@media screen and (max-width: 768px){
.dxtext{
padding: 3% 2%;
flex-direction:column;
overflow-y:auto;
overflow-x:hidden;
}
 .story_bg {
width: 100%;
left:0vw
}
 .story_img {
width:130px;
left:0px;
}
.story_title {
font-size:18px;
top:39.5px;
font-family: monospace;
left: 120px;
}
.story_brief{
font-size: 12px;
left: 120px;
width:180px;
top:72px;
}
.story_way{
font-size: 10px;
font-weight:600;
left: 120px;
width:180px;
bottom:120px;
}
}
}}</includeonly><noinclude>
<font color=red>此模板主要用于留声匣录入</font>
==使用方法==
===用来开始留声匣目录===
<pre>
{{留声匣|头|男主}}
</pre>
===用来结束留声匣目录===
<pre>
{{留声匣|尾}}
</pre>
===目录录入===
<pre>
{{留声匣|男主|标题|跳转路径|获取方式}}
</pre>
==效果展示==
<pre>
{{留声匣|头|傅融}}
{{留声匣|傅融|建安二年工作报告|傅融-留声/新居|2024年【夕情欢馀】活动解锁|成年人的生活里，只有财年，没有七夕}}
{{留声匣|刘辩|七夕特卖|刘辩-留声/七夕特卖|2024年【夕情欢馀】活动解锁|广陵王，教主来给信徒们谋福利了}}
{{留声匣|袁基|袁氏族会|袁基-留声/袁氏族会|2024年【夕情欢馀】活动解锁|族内互称字加姓}}
{{留声匣|左慈|仙门表彰大会|左慈-留声/仙门表彰大会|2024年【夕情欢馀】活动解锁|会上禁止烤兔子！}}
{{留声匣|孙策|船语|孙策-留声/船语|2024年初见日活动|满船星梦，一枕星河。}}
{{留声匣|尾}}
</pre>
{{留声匣|头|傅融}}
{{留声匣|傅融|建安二年工作报告|傅融-留声/新居|2024年【夕情欢馀】活动解锁|成年人的生活里，只有财年，没有七夕
|消耗={道具ask|环纽·云帆|8/8/10}}}}
{{留声匣|刘辩|七夕特卖|刘辩-留声/七夕特卖|2024年【夕情欢馀】活动解锁|广陵王，教主来给信徒们谋福利了}}
{{留声匣|袁基|袁氏族会|袁基-留声/袁氏族会|2024年【夕情欢馀】活动解锁|族内互称字加姓}}
{{留声匣|左慈|仙门表彰大会|左慈-留声/仙门表彰大会|2024年【夕情欢馀】活动解锁|会上禁止烤兔子！}}
{{留声匣|孙策|船语|孙策-留声/船语|2024年初见日活动|满船星梦，一枕星河。|消耗={{道具ask|环纽·云帆|8/8/8/10/10}}}}
{{留声匣|尾}}
</noinclude>