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

<includeonly>{{ResourceLoader|RoleMainPage.js}}
<div class="roles-mainpage videoTab" style="" data-param="{{{角色|}}}">{{{视频|}}}
<!-- 他的小事 --><div class="sth-title"><div class="sth-icon">[[File:他的小事_图标.png|link=]]</div><div class="sth-text">
===== 他的小事 =====
</div></div>
{{照片墙|角色={{{角色|}}}|年龄={{{年龄|}}}|身高={{{身高|}}}|生日={{{生日|}}}|星座={{{星座|}}}|职业={{{职业|}}}|EVOL={{{EVOL|}}}|工作地={{{工作地|}}}}}
<div class="his-sth"><div class="his-sth-bg"><div style="height: 3px; background: #f3e7e8; width: 100%; position: absolute; top: 15px;"></div><div style="top: -40px; left: -70px;">[[File:贴纸左.png|link=]]</div><div style="top: -35px; right: -45px;">[[File:胶带右.png|link=]]</div><div style="right: 25%; bottom: 20%;">[[File:事件底_装饰01.png|link=]]</div><div style="left: 30%; top: 20%;">[[File:事件底_装饰02.png|link=]]</div><div style="right: -25px; bottom: 0;">[[File:事件底_装饰03.png|link=]]</div><div style="bottom: 0px; left: -40px;">[[File:事件底_装饰04.png|link=]]</div></div><!-- 他的小事 内容 --> <div class="his-sth-content">
{{他的小事卡片|角色={{{角色|}}}|类型=日常|内容1={{{工作内容|}}}|内容2={{{生活内容|}}}}}
{{他的小事卡片|角色={{{角色|}}}|类型=经历|内容1={{{经历内容|}}}}}
{{他的小事卡片|角色={{{角色|}}}|类型=喜好|内容1={{{喜好内容|}}}}}
{{他的小事卡片|角色={{{角色|}}}|类型=我们|内容1={{{我们内容|}}}}}
</div></div> <!--他的小事 end-->
<!-- 拾光轴 --><div class="sth-title"><div class="sth-icon">[[File:时光轴_图标.png]]</div><div class="sth-text">
===== 拾光轴 =====
</div></div><div class="time-axis-bg">
<!-- 拾光轴装饰 --><div class="fore-bg" sty></div><div class="back-bg"></div><div class="bg-tag1">[[File:背景1.png|link=]]</div><div class="bg-tag2">[[File:标签1.png|link=]]</div><div class="bg-tag3">[[File:标签2.png|link=]]</div><div class="bg-grid"></div><div class="bg-linergra"></div><div class="bg-white-circle"></div><div class="img-tr">[[File:装饰.png|link=]]</div><div class="img-tl">[[File:装饰线.png|link=]]</div><div class="line-t"></div><div class="img-br"><!-- [[File:{{{角色|}}}-花瓣.png|link=]] --></div><div style="right: 60px; top: 33%;">[[File:事件底_装饰01.png|150px|link=]]</div><div style="left: 144px;bottom: 84px;transform: rotate(-56deg);">[[File:事件底_装饰01.png|link=]]</div><div style="left: 50px; top: 20%;">[[File:事件底_装饰02.png|link=]]</div><div style="right: 50px;bottom: 240px;">[[File:事件底_装饰03.png|link=]]</div>
<!-- 拾光轴内容 --><div class="time-axis-content"><!-- 时间 --><div class="time-until"><span class="time-axis-date">{{#switch:{{{角色|}}}|秦彻=2024/07/15 9：00|夏以昼=2025/01/22 10:00|#default=2024/01/18 9:00}}</span><span>在{{#ifeq:{{{角色|}}}|夏以昼|重逢|相伴}}的第<span id="days">1</span>天</span><span id="time" class="time-axis-date"></span></div><!-- 拾光轴卡片 --><div class="time-axis-type"><div class="time-axis-title">
====== 主线 ======
</div><div class="time-axis-cards">{{{主线}}}</div></div><div class="time-axis-type"><div class="time-axis-title">
====== 倾心之约 ======
</div><div class="time-axis-cards">{{{倾心之约}}}</div></div> 
<div class="time-axis-type"><div class="time-axis-title">
====== 其他 ======
</div><div class="time-axis-cards">{{{其他}}}</div></div>{{{对话}}}</div>
</div><!-- 拾光轴 end-->
</div>
</includeonly><noinclude>
<pre>{{男主主页
|角色=黎深
|视频={{Tab|选项1=视频1|选项2=视频2|选项3=视频3|内容1={{#Widget:Biliplayer|bv=BV1Qv411L74A|P=1}}|内容2={{#Widget:Biliplayer|bv=BV1Qv411L74A|P=1}} }}
|年龄=27|身高=186cm|生日=9.5|星座=处女座|职业=心脏外科医生|EVOL=冰|工作地=Akso医院
|工作内容=点滴日常:家就是工作地点，住在位于白沙湾的个人创作室里。/点滴日常:没灵感的时候，买了一堆奇怪但有趣的东西。|生活内容=点滴日常:骑自行车的技术，很差！/点滴日常:怕猫，但嘴上又不肯承认。/点滴日常:会吹口琴，还能用口琴指引海鸥回家的路/点滴日常:能喝酒，但上脸速度惊人的快，酒后似乎会变得尤其……开心？/点滴日常:摄影技术不错，随手一拍的构图都很巧妙。
|经历内容=点滴日常:骑自行车的技术，很差！/点滴日常:怕猫，但嘴上又不肯承认。
|喜好内容=点滴日常:骑自行车的技术，很差！/点滴日常:怕猫，但嘴上又不肯承认。
|我们内容=点滴日常:骑自行车的技术，很差！/点滴日常:怕猫，但嘴上又不肯承认。
|主线={{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深|触发=阅读主线5-8}}
{{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深|触发=阅读主线5-8}}
{{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深黎深和极地的渊源比我们想象中要深|触发=阅读主线5-8}}
|倾心之约={{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深黎深和想象中要深深|触发=阅读主线5-8}}
|其他={{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深黎深象中要深|触发=阅读主线5-8}}
|对话={{对话选项卡
|选项列表=黎深:解锁条件;祁煜:解锁条件;沈星回:解锁条件
|黎深={{对话Unit|角色=黎深|内容=这是角色说的话}}{{对话Unit|角色=旁白|内容=这是旁白}}{{对话Unit|角色=玩家|内容=这是角色说的话}}
|祁煜={{对话Unit|角色=祁煜|内容=这是角色说的话}}{{对话Unit|角色=旁白|内容=这是旁白}}{{对话Unit|角色=玩家|内容=这是角色说的话}}
|沈星回={{对话Unit|角色=沈星回|内容=这是角色说的话}}{{对话Unit|角色=旁白|内容=这是旁白}}{{对话Unit|角色=玩家|内容=这是角色说的话}}
}}
}}</pre>
{{男主主页
|角色=黎深
|视频={{Tab|选项1=视频1|选项2=视频2|选项3=视频3|内容1={{#Widget:Biliplayer|bv=BV1Qv411L74A|P=1|autoplay=1}}|内容2={{#Widget:Biliplayer|bv=BV1Qv411L74A|P=1}} }}
|年龄=27|身高=186cm|生日=9.5|星座=处女座|职业=心脏外科医生|EVOL=冰|工作地=Akso医院
|工作内容=点滴日常:家就是工作地点，住在位于白沙湾的个人创作室里。/点滴日常:没灵感的时候，买了一堆奇怪但有趣的东西。|生活内容=点滴日常:骑自行车的技术，很差！/点滴日常:怕猫，但嘴上又不肯承认。/点滴日常:会吹口琴，还能用口琴指引海鸥回家的路/点滴日常:能喝酒，但上脸速度惊人的快，酒后似乎会变得尤其……开心？/点滴日常:摄影技术不错，随手一拍的构图都很巧妙。
|经历内容=点滴日常:骑自行车的技术，很差！/点滴日常:怕猫，但嘴上又不肯承认。
|喜好内容=点滴日常:骑自行车的技术，很差！/点滴日常:怕猫，但嘴上又不肯承认。
|我们内容=点滴日常:骑自行车的技术，很差！/点滴日常:怕猫，但嘴上又不肯承认。
|主线={{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深|触发=阅读主线5-8阅读主线5-8阅读主线5-8}}
{{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深|触发=阅读主线5-8}}
{{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深黎深和极地的渊源比我们想象中要深|触发=阅读主线5-8}}
|倾心之约={{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深黎深和想象中要深深|触发=阅读主线5-8}}
|其他={{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深黎深象中要深|触发=阅读主线5-8}}
|对话={{对话选项卡
|选项列表=黎深:解锁条件;祁煜:解锁条件;沈星回:解锁条件
|黎深={{对话Unit|角色=黎深|内容=这是角色说的话}}{{对话Unit|角色=旁白|内容=这是旁白}}{{对话Unit|角色=玩家|内容=这是角色说的话}}
|祁煜={{对话Unit|角色=祁煜|内容=这是角色说的话}}{{对话Unit|角色=旁白|内容=这是旁白}}{{对话Unit|角色=玩家|内容=这是角色说的话}}
|沈星回={{对话Unit|角色=沈星回|内容=这是角色说的话}}{{对话Unit|角色=旁白|内容=这是旁白}}{{对话Unit|角色=玩家|内容=这是角色说的话}}
}}
}}</noinclude>
{{通用CSS|切换页签=videoTab}}
{{#tag:bstyle|
.sth-title{ background-image:url({{filepath:他的小事_标题底.png}}); }
.his-sth-bg{ background-image:url({{filepath:文章底_横线.png}}); } 
.time-axis-bg>.bg-grid{ background-image:url({{filepath:方格子_底图.png}}); }
.time-axis-bg>.bg-white-circle{ background-image:url({{filepath:白色模糊背景底.png}}); }
.time-axis-title{ background-image:url({{filepath:时光轴_标题底.png}}); }
}}
{{#CSS:
h5>span { color: #fff; }
h5>.mw-editsection{ display:none; }
.time-axis-type>.time-axis-title span { padding:0; color: #545254;}
h6>.mw-editsection{ display:none; }

.time-axis-bg { width: 100%;  height: fit-content; position: relative; padding: 50px;}
.time-axis-bg div {  position: absolute;}
.time-axis-bg>.fore-bg{ width: calc(100% - 100px); height: calc(100% - 100px); background: #fffcf7; border-radius: 5px; box-shadow: 5px 5px 5px #0000002b;}
.time-axis-bg>.back-bg {
    height: calc(100% - 90px);
    width: calc(100% - 78px);
    transform: rotate(-1.12deg);
    left: 40px;
    z-index: -1;
    background: linear-gradient(to bottom, #d6c2b1, #bc9987);
    border-radius: 5px;   
    top: 50px;
}
.time-axis-bg>.bg-tag1 {  left: 50px; top: 26px; }
.time-axis-bg>.bg-tag2 {  left: 215px; top: 27px; }
.time-axis-bg>.bg-tag3 {  left: 419px; top: 27px; }
.time-axis-bg>.bg-grid {
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    top: 50px;
    left: 50px;
}
.time-axis-bg>.bg-linergra {
    width: calc(100% - 100px);
    height: calc(100% - 100px);    
    top: 50px;
    left: 50px;
    background-image: linear-gradient(to bottom, #fffcf7cc 0%, transparent 40%, transparent 85%, #fffcf7cc 100%);
}
.time-axis-bg>.bg-white-circle{
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    background-repeat: no-repeat;
    background-position-x: 50%;
    top: 50px;
    left: 50px;
    background-size: contain;
}
.time-axis-bg>.img-tl{top: 85px;left: 170px;}
.time-axis-bg>.img-tr{top: 31px;right: 60px;}
.time-axis-bg>.line-t{top: 91px;left: 321px;width: calc(100% - 475px);height: 2px;background: #d1b0b6;}
.time-axis-bg>.img-br { right:10px; bottom:50px; }
.time-axis-content{ 
  width: 100%; 
  height: 100%; 
  position: relative !important; 
  padding: 40px 16px; 
  font-family: 'SimSun', sans-serif;
}
.time-axis-content div{position:unset;}
.time-axis-content>.time-until{
    width: calc(100% - 40px);
    color: #bcb8b7;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    padding: 5px 90px;
}
.time-axis-type{ padding:10px; }
.time-axis-type>.time-axis-title {
    background-repeat: no-repeat;
    background-position-x: 50%;
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #545254;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 1.5px;
}
.time-axis-type>.time-axis-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
p.role-common {
    font-weight: normal !important;
    font-size: 19px !important;
}

.sth-title{ 
  position: relative;
  width: 350px;
  height: 70px;
  background-size: contain;
}
.sth-icon {
  position: absolute;
  left: 34px;
  top: 18px;
}
.sth-text {
  position: absolute;
  left: 92px;
  bottom: 13px;
  font-size: 22px;
  color: #ffff;
  font-family: 'SimSun', sans-serif;
  font-weight: bold;
  text-shadow: 6px 8px 2px #ffffff2b;
}
.his-sth{
    background: #fbfbfb;
    border: 2px solid #cfcad5;
    border-radius: 10px;
    margin: 30px 50px;
    position: relative;
}
.his-sth>.his-sth-bg{
    width: calc(100% - 50px);
    height: 100%;
    margin: 0px 25px;
    position: absolute;
    background-position-y: 17px;
}
.his-sth>.his-sth-bg div{ position: absolute; }
.his-sth>.his-sth-content{
    padding: 30px 20px 60px 50px;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.his-event:hover{ cursor:pointer;}

/* 视频的最大高度 */
iframe {  
    max-height: 600px;
    width:100%;
}


@media screen and (max-width:768px){
.roles-mainpage{ padding: 0 !important; }
<!--顶部视频样式-->
.roles-mainpage .videoTabs>.tab-nav>.tab-btn>a{padding:unset;font-size:13px;}
.roles-mainpage .videoTabs>.tab-nav{gap:unset;}

<!--他的小事-->
.his-sth {margin:0 0 !important;  }
.his-sth-bg div { transform: scale(0.8); }
.his-sth>.his-sth-content{ padding: 10px 30px 60px 30px !important; }
.his-sth-content>.sth-item>.event-unfold{padding: 15px 5px 20px 10px;}

<!--时光轴-->
.time-axis-bg { padding: 10px 10px !important; width: calc(100% + 40px);margin-left: -22px;}
.time-axis-bg>.fore-bg{ width: calc(100% - 25px) !important; height: calc(100% - 60px) !important;margin-top: 20px; margin-left: 6px; }
.time-axis-bg>.back-bg{     width: calc(100% - 50px) !important;
    height: calc(100% - 63px) !important;
    left: 25px !important; }
.time-axis-bg>.bg-tag1{ top: 8px !important ; left: -20px !important;  transform: scale(0.6); }
.time-axis-bg>.bg-tag2{ top: 13px !important; left: 65px !important; transform: scale(0.5); }
.time-axis-bg>.bg-tag3{ top: 13px !important; left: 166px !important; transform: scale(0.5); }
..time-axis-bg>.bg-grid{
    width: calc(100% - 30px) !important;
    height: calc(100% - 60px) !important;
    left: 15px !important;
    top: 30px !important;
}
.time-axis-bg>.bg-grid{
    width: calc(100% - 30px) !important;
    height: calc(100% - 60px) !important;
    left: 15px !important;
    top: 30px !important;
}
.time-axis-bg>.bg-linergra{
    width: calc(100% - 30px) !important;
    height: calc(100% - 60px) !important;
    left: 15px !important;
    top: 30px !important;
}
.time-axis-bg>.img-tl{transform: scale(0.6); left: 22px !important; top: 55px !important;}
.time-axis-bg>.img-tr{ transform: scale(0.6); right: 0px !important; top: 0 !important;}
.time-axis-bg>.line-t{
    width: calc(100% - 196px) !important;
    left: 130px !important;
    top: 61px !important;
}
.time-axis-bg>.img-br {
    right: 0px !important;
    bottom: -20px !important;
}
.time-axis-content {
    padding: 50px 0px !important;
}
.time-axis-content>.time-until {
    padding: 0 10px !important;
    width: 100% !important;
    font-size: 14px !important;
    margin-top: 15px;
}
.time-axis-date{max-width:5em;}
.time-axis-content>.time-axis-type{
    padding: 0 !important;
}
.time-axis-cards>.time-axis-card {
    background-size: 100% 100%;
    margin-left: 10px;
}
.dialog-content{
    margin: 10px !important;
    width: calc(100% - 20px) !important;
    padding: 10px 10px 30px 10px !important;
}
.dialog-content>.dialog-container{
    padding: 10px 15px !important;
}
.dialog-filter{
    width: calc(100% - 20px);
    margin-left: 10px;
}
.mobile-mask{z-index: 2;}
#toc{z-index:3;}
iframe {
  height: calc((100vw - 140px)* 0.75) !important;
}
}
@media screen and (max-width: 682px){
  .time-axis-cards>.time-axis-card{
    width: calc(100% - 10px) !important;
  }
}
@media (min-width: 768px) and  (max-width: 992px){
  .bg-tag2,.bg-tag3 { transform:scale(0.8); transform-origin:left bottom; }
  .bg-tag3{ margin-left: -40px; }
}
@media (max-width: 800px) {
    .videoTabs>.tab-nav>.tab-btn {
        min-width: unset!important;
    }
}
}}