@font-face { font-family: 'tttgbnumber'; src: url('../../font/tttgbnumber.ttf'); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } body { font-size: 14px; color: #fff; font-family: PingFangSC-Medium, PingFang SC, sans-serif; width: 400px; /*height: 265px;*/ transform: scale(1.8); transform-origin: 0 0; } .container { width: 400px; /*height: 265px;*/ background-image: url(../../img/abyss/bg.png); background-size: 100%; background-repeat: no-repeat; padding: 7px 0 0 0; font-family: 'tttgbnumber'; } .row { width: 100%; background: rgba(56, 74, 91, 0.59); padding: 0px 0px 0px 40px; display: flex; font-size: 14px; } .container .row { padding-bottom: 3px; } .row .item { flex: 1; padding-top: 4px; position: relative; } .role { margin-top: 5px; } .title { padding-left: 20px; font-weight: 500; color: #d3bc8d; } .role .list { display: flex; justify-content: center; margin-top: 7px; } .role .list .item { overflow: hidden; width: 58px; height: 70px; border-radius: 5px; position: relative; /*border: 2px solid #d3bc8d;*/ /*background: #e9e5dc;*/ box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3); margin: 0 13px; } .role .list .item .role_img { width: 100%; overflow: hidden; background-size: 100%; background-repeat: no-repeat; } .role .list .item .desc { font-weight: 500; text-align: center; line-height: 16px; position: absolute; bottom: 0; background: #e9e5dc; width: 100%; height: 16px; color: #1e1f20; } .role .list .item .fill_img { position: absolute; width: 14px; right: 0; bottom: 14px; } .bg5 { background-image: url(../../img/other/bg5.png); background-size: 100%; background-repeat: no-repeat; } .bg4 { background-image: url(../../img/other/bg4.png); background-size: 100%; background-repeat: no-repeat; } .bg105 { background-image: url(../../img/other/bg105.png); background-size: 100%; background-repeat: no-repeat; } .detail { margin-top: 7px; padding-bottom: 5px; } .detail .title { margin-bottom: 5px; } .detail .row { width: 100%; background: rgba(56, 74, 91, 0.59); padding: 4px 0px 4px 40px; margin-top: 0px; display: flex; font-size: 14px; } .detail .row .item { padding-top: 0px; } .detail .two { background: none; } .line-icon { position: absolute; top: -4px; right: 36px; display: inline-block; background-size: auto 100%; width: 24px; height: 24px; background-repeat: no-repeat; vertical-align: middle; } .two_img { right: 46px; } .life1 { background-color: #62a8ea; } .life2 { background-color: #62a8ea; } .life3 { background-color: #45b97c; } .life4 { background-color: #45b97c; } .life5 { background-color: #ff5722; } .life6 { background-color: #ff5722; } .item .life { position: absolute; top: 0px; right: 0px; z-index: 9; font-size: 12px; text-align: center; color: #fff; border-radius: 2px; padding: 0px 3px; border-radius: 3px; font-family: 'tttgbnumber'; } /*# sourceMappingURL=abyss.css.map */