查看“模板:照片墙”的源代码

<includeonly>{{#vardefine:角色图片|思念长图-{{#switch:{{{角色}}}|祁煜=迷思|黎深=静谧心声|沈星回=微光懒阳|秦彻=锋尖流连|夏以昼=长昼如昨}}}}<div class="photo-info">
<div class="photo-rope">[[File:绳子.png|link=]]</div><div class="role-photo"><div class="photo-frame">[[File:照片框.png|link=]]</div><div class="photo-img">[[File:{{#var:角色图片}}.png|260px|link=]]</div><div class="flower">[[File:照片花_{{{角色}}}.png|link=]]</div></div><div class="role-infos"><div class="info-name">[[File:{{{角色}}}-name2.png|x35px|link=]]</div><div class="info-details">年 龄 / <span>{{{年龄}}}</span><br/>身 高 / <span>{{{身高}}}</span><br/>生 日 / <span>{{{生日}}}</span><br/>星 座 / <span>{{{星座}}}</span><br/>职 业 / <span>{{{职业}}}</span><br/>E V O L / <span>{{{EVOL}}}</span><br/>工 作 地 / <span>{{{工作地}}}</span><br/></div></div></div></includeonly><noinclude>
{{照片墙
|角色=黎深
|年龄=27
|身高=186cm
|生日=9.5
|星座=处女座
|职业=心脏外科医生
|EVOL=冰
|工作地=Akso医院
}}
</noinclude>{{#tag:bstyle
|.role-infos{ background-image:url({{filepath:姓名底.png}}); }
}}{{#CSS:
<!-- 手机屏幕 -->
@media screen and (max-width:584px){
  .photo-info>.photo-rope{ top:0 !important; }
  .mw-parser-output .photo-info>.role-infos {
        background-repeat: no-repeat;
        padding: 0 0 !important;
        text-align: center;
        width: 326px !important;
        height: 326px;
        background-size: contain;        
        margin-left: 10px;
        margin-top:-15px;
    }
  .photo-info>.role-infos span{font-size:14px;}
  .photo-info>.role-infos>.info-name{margin: 30px 0 5px 0;display:block}
  .info-details{
    text-align: left;
    padding: 0 50px;
    font-size: 14px;
    margin: 0 0 0 20px;
  }
  .mw-parser-output .photo-info>.role-infos span{font-size:14px;}
}

.photo-info { display: flex; justify-content: center; position: relative; flex-wrap: wrap;}
.photo-info>.role-photo{ position: relative; }
.photo-info>.photo-rope { position: absolute; top: -45px;}
.role-photo>.photo-frame {
  display: inline-block;
  overflow: hidden;
  position: inherit;
  z-index: 2;
}
.role-photo>.photo-img {
  position: absolute;
  left: 37px;
  top: 23px;
  transform: rotate(-2deg);
  height: 310px;
  overflow: hidden;
}
.role-photo>.flower {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}
.photo-info>.role-infos{
  width:300px;
  background-position-x: right;
  background-size: cover;
  margin-left: -30px;
  font-family: 'SimSun', sans-serif;
  padding: 50px 40px;
  color: #575258;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  z-index: -1;gf
}
.photo-info>.role-infos span{
  color: #322d32;
  font-size: 18px;
}

}}