查看“模板:朋友圈/条”的源代码

<includeonly>
<div class="MomentContainer">
<div class="ContainerBg">[[file:{{{背景|手机背景.png}}}|link=]]</div>
<div class="ContainerBg2">
<div class="Scroll whiteScrollbar" style="min-height:{{{min-height|}}};max-height:{{{max-height|}}}">
<div class="MomentContent">
<div class="Header">[[file:对话头像-{{{头像|{{{1|}}}}}}-{{{id|0}}}.png|link=]]</div><!--不指定头像，就用名字-->
<div class="Body {{#if:{{{max-height|}}}|BodyMaxHeight}}">
<div class="Name NSimSunFont">{{{1|}}}</div>
<div class="Img">{{图片放大|{{{内容图片|}}}}}</div>
<div class="Text">{{{内容文本|}}}</div>
<div class="Show">[[file:点赞1.png|25x25px|link=]]</div>
<div class="CommentArea">
<div class="Like commentName">[[file:点赞.png|25x25px|link=]]&nbsp;{{{点赞|}}}<hr></div>
{{#forargs:|key|val|{{#ifeq:{{#count:{{#var:key}}|评论}}|1|
<div class="Comment"><span class="commentName">{{#explode:{{#var:val}}|@@@|0}}</span>{{#ifeq:{{#count:{{#var:val}}|@@@}}|2|回复<span class="commentName">{{#explode:{{#var:val}}|@@@|1}}</span>|}}：{{#explode:{{#var:val}}|@@@|-1}}</div>
}}}}
</div><!--CommentArea-->
</div><!--Body-->
</div><!--MomentContent--><hr>
</div></div></div>

</includeonly><noinclude>
<!-- {{朋友圈/条|沈星回|id=1|背景=|min-height=|max-height= -->
{{朋友圈/条|沈星回|头像=玩家
|内容图片=思念图标-花落未夏
|内容文本=这是朋友圈测试
|点赞=黎深
|评论1=玩家@@@哇，可以变南瓜车吗？
|评论2=沈星回@@@玩家@@@这个属于魔法的范畴，我得研究一下
}}
</noinclude>
{{#CSS:<!--手机背景设定&内容叠图配置-->
.MomentContainer {position: relative;overflow: hidden;border-radius:3px;padding:50px 30px;}
.MomentContainer .ContainerBg {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;}
.MomentContainer .ContainerBg2 {position: relative;z-index: 2;border-radius:3px;background: linear-gradient(to bottom, rgb(255 255 255 / 41%), rgb(255 255 255 / 14%));box-shadow: -20px 0 20px -20px #6b6b6b, 7px 0 7px -7px #71717166;border-left: 3px solid white;border-image: linear-gradient(to bottom, #fff, transparent) 1;}
.MomentContainer .ContainerBg img {width: 100%;height: 100%;object-fit: cover;}
.MomentContainer .MomentContent{display:flex;position: relative;z-index: 1;padding:20px 20px 10px 20px;}
.ContainerBg2::before{height:30px;content:"";display:block;position: relative;z-index: 2;box-shadow: 0 20px 20px -5px #ffffff6b;}
.Scroll{overflow-y: auto;}
.MomentContent .Body{width:100%;}
.MomentContent .Body>div{margin:0 0 10px 0;}
.MomentContent .Header>img{
    min-width: 64px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 100%;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 15px 0 0;
}
.MomentContent .Name{color:c46e5c;font-size:18px;font-weight:bolder;}
.MomentContent .NSimSunFont {font-family: NSimSun, SimSun, serif;}
.MomentContent .Img .showOnBox{margin:0;}<!--内容图片边距置空-->
.MomentContent .Show{text-align:right;color: #615c67;}
.MomentContent .CommentArea{background-color: rgba(222,222,224,0.41);border-radius: 2px;padding: 10px;box-shadow: inset 0 0 1px 1px #7f7f7f03;}
.MomentContent .Text,.MomentContainer .CommentArea{color: #615c67;font-size: 15;}
.MomentContainer hr{width:95%;margin:auto;}
.MomentContent .CommentArea hr{background-color: #a2a9b142;margin: 0.5em 0;}
.MomentContent .commentName{Color:c46e5c;}

@media (max-width: 768px) {
.MomentContainer{padding:50px 0 0 10px;margin:0px 2px;}
.MomentContainer .ContainerBg2{padding:30px 0px 30px 10px;}
.MomentContainer .Scroll{max-height:none!important;}
.MomentContainer .MomentContent{padding:20px 20px 10px 0px;}
.MomentContent .Header>img{margin:0 10px 0 0;width:50px;height:50px;min-width: 50px;}
.MomentContent .Body>div{margin:0 0 7px 0;}
.MomentContent .Show img,.Like img{width:20px}

.container{padding-right: 0px!important;padding-left: 0px!important;}
}
}}
{{#ifeq:{{#var:whiteScrollbarCSS}}||{{#vardefine:whiteScrollbarCSS|1}}{{#css:
<!-- Firefox -->
.whiteScrollbar{
    scrollbar-width: thin;  
    scrollbar-color: rgba(255,255,255,0.5) rgba(255,255,255,0.3); 
}
<!-- Chrome、Safari 和 Opera -->
.whiteScrollbar::-webkit-scrollbar {
    width: 12px;
   background: rgba(0,0,0,0.3); <!--滚动条的背景色 -->
}
.whiteScrollbar::-webkit-scrollbar-thumb {
    background: rgba(200,200,200,0.3); <!-- 滚动条的颜色 -->
    border-radius: 10px;
}
}}}}
<!-- {{通用CSS|滑动条=0|}} -->