.font-YS { font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif; } .font-NZBZ { font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif; } body, .container { width: 970px; } .container { padding: 5px 0 10px 5px; } .head-box { display: flex; width: 100%; } .head-box .title { font-size: 45px; padding-bottom: 10px; width: 70%; } .head-box .title span { font-size: 30px; margin-left: 10px; color: #d3bc8e; } .head-box .uid { text-align: right; width: 30%; padding-top: 25px; padding-right: 10px; font-size: 25px; } .role-stat-cont { display: flex; padding: 5px; } .role-stat { display: flex; } .role-stat .cont { margin: 5px 10px 5px 5px; width: 150px; height: 82px; } .role-stat .cont.star-display { width: 300px; } .role-stat strong { text-shadow: 0 0 3px #000; } .role-stat .stat-title { position: absolute; top: 0; background: rgba(0, 0, 0, 0.5); padding: 5px 10px; width: 100%; text-shadow: 0 0 1px #000; } .role-stat .stat-title span { display: block; font-weight: normal; font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif; font-size: 20px; } .role-stat .stat-title strong { display: block; font-size: 30px; } .role-stat .stat-msg { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); padding: 5px 10px; width: 100%; text-shadow: 0 0 1px #000; font-size: 30px; height: 45px; display: flex; justify-content: flex-start; } .role-stat .stat-msg .stat-star-container { flex: 0 0 10%; margin-bottom: 10px; } .role-stat .stat-msg .stat-star-container .stat-star { width: 25px; height: 25px; background-size: cover; margin-top: 4px; } .role-title { margin: -3px 0 8px; display: flex; align-items: flex-end; } .role-title strong { margin-left: 3px; color: #d3bc8e; font-size: 18px; font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif; font-weight: normal; margin-right: 10px; } .role-title .role-star { width: 20px; height: 20px; background-size: cover; } .role-floor-team { display: flex; } .role-floor-team .line { width: 1px; background: rgba(255, 255, 255, 0.5); height: 80px; vertical-align: middle; margin: 15px 8px 0; } .role-team { display: flex; margin-right: -5px; margin-left: -5px; } .role-buff { display: flex; margin-right: -5px; margin-left: -5px; flex-direction: column; width: 50%; } .role-buff .role-choice-cards-container { width: 100%; height: 100%; background-color: #e7e5d9; display: flex; border-radius: 10px; overflow: hidden; flex-direction: column; } .role-buff .role-enemy-container { width: 20%; height: 100%; background-color: #e7e5d9; display: flex; border-radius: 10px; overflow: hidden; flex-direction: column; } .role-buff .role-splendour-container { width: 40%; height: 100%; background-color: #e7e5d9; display: flex; border-radius: 10px; overflow: hidden; flex-direction: column; } .role-buff .role-splendour-buff-container { width: 40%; height: 100%; background-color: #e7e5d9; display: flex; border-radius: 10px; overflow: hidden; flex-direction: column; } .role-buff .role-choice-cards-header { width: 100%; height: 30px; background-color: #8b8b83; padding: 5px; font-size: 18px; } .role-buff .role-choice-cards-content { width: 100%; padding: 5px; display: flex; } .role-buff .role-choice-cards-content .role-content-container { width: 40px; display: flex; margin-top: 5px; margin-left: 5px; flex-direction: column; align-items: center; margin-right: 5px; } .role-buff .role-choice-cards-content .role-content-icon { width: 40px; height: 40px; background-size: cover; background-color: black; border-radius: 50%; } .role-buff .role-buff-line { width: 100%; height: 46%; display: flex; flex-direction: row; } .role-buff .role-buff-line + .role-buff-line { margin-top: 4%; /* 两个子元素之间的间距4% */ }