查看“模板:聊天气泡/个”的源代码

<includeonly>
<div class="divsort bubble" data-param1="{{{角色|}}}">
<div class="cp-icon">[[file:{{{名称|}}}.png|75x75px|link={{{1|}}}]]<br>{{{名称|}}}<div class="cp-tag"><div>{{{角色|}}}</div></div></div>
<div class="cp-desc">{{{描述|}}}<div class="cp-getWay">{{{获取途径|}}}</div></div>
</div>{{#if:{{#var:防重复加载聊天气泡/个CSS}}||{{#vardefine:防重复加载聊天气泡/个CSS|1}}{{#CSS:
.divsort.bubble{
    position: relative;
    width: 210px;
    height: 260px;
    border: 1px solid white;
    border-radius: 0 15px;
    background: linear-gradient(138deg, #e2e2e2, #f9f8f8 50%);
    padding: 10px;
    flex: 0 0 calc(20% - 16px);
    box-shadow: 2px 2px 2px 0 #cfcfcf7a;
    }
.cp-icon{
    text-align: center;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #846d79;
    border-bottom: 1px solid #bfbfbf;
    }

.cp-tag{
    position: absolute;
    top: 10px;
    right: 0px;
    }
.cp-tag div{
    background: linear-gradient(to left, #846d796e, transparent);
    font-size: 12px;
    color: white;
    font-weight: normal;
    margin-bottom: 2px;
    padding: 0 5px 0 10px;
    }
.cp-desc{margin-top: 5px;height:130px;overflow:auto}
.cp-getWay{
    color: #717171;
    font-size: 12px;
}
#CardSelectTr{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
@media (max-width:767px){
.divsort.bubble{
    flex: 0 0 calc(50% - 10px)
}
}
@media (min-width:768px) and (max-width: 1023px){
.divsort.bubble{
    flex: 0 0 calc(33.33% - 15px)
}
}
}}
}}</includeonly><noinclude>
<div id="CardSelectTr">
{{聊天气泡/个
|名称=乌云黑
|描述=描述描述描述描述描述
|获取途径=获取途径获取途径获取途径途径获取途径
|角色=111
}}
{{聊天气泡/个
|名称=乌云黑
|描述=描述描述描述描述描述
|获取途径=获取途径获取途径获取途径途径获取途径
|角色=我
|类1=通用
}}
</div>
</noinclude>