查看“模板:商品数据”的源代码

<includeonly>{{#invoke:数据库调用|Prop|name={{{1|}}}|type=商品}}{{#set:
|稀有度={{#var:稀有度}}
|类型=商品
|商品类型 = {{#var:分类}}
|特产={{#ifeq:{{#var:分类}}|特产商品|true}}{{#ifeq:{{#var:分类}}|特产制造商品|true}}
}}{{面包屑|商品一览}}
<div class="prop-topline"></div>
<div class="prop-box">
	<div class="prop-basics prop-{{#var:分类}}">
		<div class="prop-left">
			<div class="prop-img">{{图标|{{{1|}}}|大}}</div>
		</div>
		<div class="prop-info">
			<div class="rarity" style="color:{{#var:稀有度颜色}}">{{#var:稀有度}}</div>
			<div class="sort">商品 > {{#var:分类}}</div>
			<div class="name">{{{1|}}}</div>
			<div class="info-main visible-md visible-sm visible-lg">{{#var:信息}}{{{简介补充|}}}</div>
		</div>
	</div>
	<div class="info-main visible-xs">{{#var:信息}}{{{简介补充|}}}
</div>
----{{#if:{{#var:解锁方式}}|<span class="prop-acquisition-head">解锁方式:</span>
	<div class="prop-acquisition">{{#arraymap:{{#var:解锁方式}}|、|@@@|[[@@@]]|&nbsp;&nbsp;}}</div>}}
	<span class="prop-acquisition-head">获取途径:</span>
	<div class="prop-acquisition">{{#arraymap:{{#var:获取途径}}|、|@@@|[[@@@]]|&nbsp;&nbsp;}}</div>
</div><br><br>[[分类:商品]][[分类:商品-{{#var:分类}}]]{{#CSS:
.prop-topline{
    width: 100%;
    height: 5px;
    background-color: #2089cd;
}
.prop-box{
    background-color: #1f2228;
    padding: 0 15px 10px 10px;
}

.prop-basics{
    display: flex;
}
.prop-left{
    width: 320px;
    height: 260px;
    margin: auto;
}
.prop-img{
    width: 100%;
    margin: 5%;
}
.prop-img img{
    height: 100%;
    width: auto;
    max-width: 9999px;
}
.prop-info{
    float: right;
    width: 72%;
}
.prop-info .rarity{
    margin-bottom: -10px;
    font-weight: bold;
    font-size: 20px;
    color: #ffffff;
}
.prop-info .sort{
    margin-bottom: -10px;
}
.prop-info .name{
    font-size: 24px;
    font-weight: bold;
    color: white;
}

.prop-info .base-attr, .info-main{
    box-shadow: 0 0 5px #0009;
    background-color: #00000030;
    border: 1px solid #000000a1;
    border-radius: 6px;
    margin-bottom: 10px;
}
.prop-info .base-attr{
    padding: 10px;
    font-weight: bold;
    font-size: 16;
}
.base-attr > img{
	width: 36px;
    margin-right: 10px;}
.base-attr > span{	margin-left: 5%;}
.base-attr > font{	color: #ff9900;	}
.info-main{
    padding: 10px;    
    min-height: 190px;
}
.info-propInBox{
    background-color: #323133;
    border-radius: 4px;
    width:70px;
    text-align: center;
    line-height:1.5em
}
.img-propInBox{
    display: flex;
    flex-wrap: wrap;
}
.perkText{
    min-width: 100px;
}
.prop-info .info-prefix{
}
.prop-acquisition-head{
    font-size: 24px;
    font-weight: bold;
    color: white;
}
@media(max-width:768px){
.prop-left{
    width: 85%;
    height: 125px;
	margin-bottom: 20px;
}
}
}}
</includeonly>
<noinclude>{{商品数据|桦石发财树}}{{doc}}[[分类:模板]]</noinclude>