查看“沙盒:面板计算器”的源代码

{{数据库加载|Role/NumValue|RoleNumValue}}
{{数据库加载|StarStone/Value|StarStoneValue}}
{{数据库加载|StarStone/Combo|StarStoneGroup}}
{{JS|Calculator_RoleAttribute}}
<div class="box-4" style="">
<div class="BOX-title-1">密探信息</div>
<div class="BOX-N" style="">
</div>
<div class="DrawTarget">
</div>
</div>
<div class=role-draw-portrait"" id="role-draw-portrait" style="display: none;" >
{{#ask:[[分类:密探]]
|?品质
|?职业
|?属性
|?标签1
|?标签2
|sort=品质
|template=面板计算器/头像绘制
|headers=hide
|format=template
|limit=1000
|link=none
|order=desc
}}</div>
{{#css:
.DrawTarget {
    color: #7a5d4b;
}

li {
    list-style: none;
}

.DrawTarget img {
    width: 40px;
    margin: 0;
}

.DrawTarget li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    justify-content: space-between;
}
.star-1{
font-weight: bold;
color: #d7aa0a;
}
.star-2{
color: #8313d7;
}
.star-3{
color: #0c75bf;
}
#tupo img {
    width: 30px;
    border-radius: 50%;
}

#tupo {
    width: 90%;
    background: #fdfdfd;
    padding: 10px;
    border: 1px #ad9381 solid;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

input {
    width: 150px;
    padding-left: 80px;
}

.input-entry {
    border: 1px #ad9381 solid;
    border-radius: 10px;
    padding: 0 10px;
    margin: 0 5px;
    min-width: 20%;
    position: relative;
}

.input-num {
    position: relative;
    padding: 0;
}

.input-num span {
    position: absolute;
    left: 20px;
}

input,
select {
    border: 0;
    border-radius: 50px;
    margin: 0 5px;
}

.btn {
    border-radius: 50px;
    width: 100%;
    background: #9c877a;
    color: #fff;
}

.BF-SliderBox {
    display: inline-block;<!--将容器设置为内联块级元素-->
    margin: 0 20px;<!--设置容器之间的右边距-->
}

.BF-Slider {
    padding: 0;
}
.StoneCombo-Box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}
.StoneCombo-Button{
    box-sizing: border-box;
    flex-basis: 40%
}

.StoneCombo-Button.pressed {
    background-color: #ffb88a;/* 按钮被按下时的背景颜色 */
    color: #220a05;/* 按钮被按下时的文本颜色 */
    border-radius: 4px;
}
.btn-disabled
    background-color: #bfbfbf; /* 按钮禁用时的背景颜色 */
    color: #ada5a1; /* 按钮禁用时的文本颜色 */
    border-radius: 2px;
}
.com_li {
    padding: 10px;
    background: #fbfbfb;
    margin: 10px;
    border: 1px #ad9381 solid;
    border-radius: 10px;
}
@media (max-width: 768px){
.Box-4{
margin: 0 -15px;
}
.DrawTarget ul{
margin:0;
}
}
}}