查看“模板:他的小事卡片”的源代码

<includeonly><!-- 下拉按钮的监听在RoleMainPage.js -->
{{#vardefine:type|{{#switch:{{{类型|日常}}}|日常=1|喜好=2|经历=3|我们=4}} }}
<div class="sth-item"><div style="position: absolute;top: -10px;left: 20px;">[[File:{{{角色|}}}小头标{{#var:type}}.png|60px]]</div><div class="bubble bubble{{#var:type}}">
====== {{{类型|}}} ======
</div><div class="his-event" data-param="{{#switch:{{{类型|}}}|日常={{{内容1|}}}/{{{内容2|}}}|#default={{{内容1|}}}}}"><div class="show-content show-content-top"><!--标题内容滚动前--></div><div class="show-content show-content-bottom"><!--标题内容滚动后--></div></div><div class="arrow" title="展开">[[File:下拉箭头.png]]</div><!-- 事件展开 --><div class="event-unfold"  style="display: none;"><div class="event-container">{{#switch:{{{类型|}}}
|日常=<div class="event-title">[[File:标题前缀.png]] 工作</div><div class="event-content">{{#arraydefine:内容-工作|{{{内容1|}}}|/}}{{#loop: index|0|{{#arraysize:内容-工作}}|
{{#vardefine:触发|{{#explode:{{#arrayindex:内容-工作|{{#var:index}}}}|:|0}}}}<p><span class="ques-img"></span>{{#explode:{{#arrayindex:内容-工作|{{#var:index}}}}|:|1}}</p><span class="sth-from" style="display:none;">{{#var:触发}}</span>}}</div>
<div class="event-title">[[File:标题前缀.png]] 生活</div><div class="event-content">{{#arraydefine:内容-生活|{{{内容2|}}}|/}}{{#loop: index|0|{{#arraysize:内容-生活}}|
{{#vardefine:触发|{{#explode:{{#arrayindex:内容-生活|{{#var:index}}}}|:|0}}}}<p><span class="ques-img"></span>{{#explode:{{#arrayindex:内容-生活|{{#var:index}}}}|:|1}}</p> <span class="sth-from" style="display:none;">{{#var:触发}}</span>}}</div>
|#default = <div class="event-content">{{#arraydefine:内容|{{{内容1|}}}|/}}{{#loop: index|0|{{#arraysize:内容}}|
{{#vardefine:触发|{{#explode:{{#arrayindex:内容|{{#var:index}}}}|:|0}}}}<p><span class="ques-img"></span>{{#explode:{{#arrayindex:内容|{{#var:index}}}}|:|1}}</p> <span class="sth-from" style="display:none;">{{#var:触发}}</span>
}}</div>}}</div></div></div>{{#ifeq:{{#var:他的小事卡片css防重复加载}}||{{#vardefine:他的小事卡片css防重复加载|1}}
{{#tag:bstyle|/*{{#tag:pre|*/
.bubble1{ background-image:url({{filepath:气泡-日常.png}}); } 
.bubble2{ background-image:url({{filepath:气泡-喜好.png}}); background-size: 54px 44px; background-position-x: -3px;} 
.bubble3{ background-image:url({{filepath:气泡-经历.png}}); background-size: 54px 44px; background-position-x: -3px;} 
.bubble4{ background-image:url({{filepath:气泡-我们.png}}); background-size: 54px 44px; background-position-x: -3px;} 
.event-unfold{ background-image:url({{filepath:事件展开底.png}}); } 
.ques-img{ background-image:url({{filepath:问号-前缀.png}}) !important;  }
.ques-img:hover{ cursor:url({{filepath:鼠标hover.png }}) ,pointer  }
/*}}*/}}
{{#CSS:
.sth-item{ position: relative; width: 50%; min-width: 300px; margin-top: 40px;}
.sth-item>.bubble {
    width: 50px;
    height: 45px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding-top: 8px;
    position: absolute;
    top: -37px;
    left: 70px;
    background-repeat: no-repeat;
}
.bubble span { color: #fff; }
.bubble>h6 { margin:0; padding:0;}
.bubble>h6>.mw-editsection { display:none; }
.sth-item>.his-event {
    height: 33px;
    color: #544e4e;
    font-size: 14px;
    font-weight: bold;
    background: #f3e9e1;
    border: 2px solid #fff;
    border-radius: 25px;
    box-shadow: 2px 2px 1px #e1dfe0;
    padding: 5px 20px;
    overflow: hidden;
    margin-left: 60px;
    margin-right: 20px;
}
.sth-item>.his-event>.show-content{
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 2px;
}
@keyframes moveTop {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-21px); }
}
.sth-item>.arrow { position: absolute; right: 20px; top: 12px; transition: transform 0.5s; transform-origin: 40% 40%;}
.sth-item>.arrow:hover { cursor: pointer; }
.sth-item>.arrow a{ pointer-events: none; }
.sth-item>.event-unfold {
    background-repeat: no-repeat;
    width: 100%;
    height: 300px;
    background-size: 113% 117%;
    background-position: 35% 70%;
    border-radius: 10px;
    padding: 30px 10px 40px 13%;
}
.sth-item>.event-unfold .event-title {
    color: #bc6c61;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #d9d5d4;
    padding: 10px 10px 2px 10px;
    margin: 0 10px;
}
.sth-item>.event-unfold>.event-container{
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #e9e0dd transparent;
}
<!-- 滚动条的chrome兼容 -->
.sth-item>.event-unfold>.event-container::-webkit-scrollbar {
    width: 10px;
   background: transparent; <!--滚动条的背景色 -->
}
.sth-item>.event-unfold>.event-container::-webkit-scrollbar-thumb {
    background: #e9e0dd; <!-- 滚动条的颜色 -->
    border-radius: 8px;
}
.sth-item>.event-unfold .event-content p {
    color: #686667;
    font-size: 14px;
    font-weight: bold;
    padding: 2px 5px 2px 25px;
    position: relative;
}
.sth-item>.event-unfold .event-content p img {
    width: 10px;
    height: 10px;
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 8px;
}
.sth-item>.event-unfold .event-content p>img:hover { cursor: pointer; }
<!--.sth-item>.event-unfold .event-content p>a { pointer-events: none; }-->
.sth-item>.event-unfold .event-content>span {
    position: absolute;
    background: #1c1c3bc2;
    color: #fcfafa;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
}
span.ques-img{
    width: 10px;
    height: 10px;
    position: absolute;
    left: 12px;
    top: 8px;
}
}}}}
</includeonly><noinclude>
{{他的小事卡片
|角色=祁煜
|类型=日常
|内容1=点滴日常:家就是工作地点，住在位于白沙湾的个人创作室里。/点滴日常:没灵感的时候，买了一堆奇怪但有趣的东西。
|内容2=点滴日常:骑自行车的技术，很差！/点滴日常:怕猫，但嘴上又不肯承认。/点滴日常:会吹口琴，还能用口琴指引海鸥回家的路/点滴日常:能喝酒，但上脸速度惊人的快，酒后似乎会变得尤其……开心？/点滴日常:摄影技术不错，随手一拍的构图都很巧妙。
}}{{ResourceLoader|RoleMainPage.js}}
</noinclude>