@import "../common/base.less"; @scale: 1.4; body, .container { width: 970px; } .container { padding: 5px 0 10px 5px; } .head-box { display: flex; width: 100%; .title { font-size: 45px; padding-bottom: 10px; width: 70%; span { font-size: 30px; margin-left: 10px; color: #d3bc8e; } } .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; .cont { // position: relative; margin: 5px 10px 5px 5px; width: 175px; height: 90px; } .cont.star-display { width: 230px; } strong { text-shadow: 0 0 3px #000; } .stat-title { position: absolute; top: 0; background: rgba(0, 0, 0, 0.5); padding: 5px 10px; width: 100%; text-shadow: 0 0 1px #000; span { display: block; font-weight: normal; .font-NZBZ; font-size: 24px; } strong { display: block; font-size: 30px; } } .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; .stat-star-container { flex: 0 0 11%; /* 23% 是为了在有间隙的情况下,四个元素一行 */ margin-bottom: 10px; .stat-star { width: 25px; height: 25px; background-size: cover; margin-top: 4px; } } } } .role-title { margin: -3px 0 8px; display: flex; align-items: flex-end; strong { margin-left: 3px; color: #d3bc8e; font-size: 18px; .font-NZBZ; font-weight: normal; margin-right: 10px; } .role-star { width: 20px; height: 20px; background-size: cover; } } .role-floor-team { display: flex; .line { width: 1px; background: rgba(255, 255, 255, .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-choice-cards-container { width: 100%; height: 46%; background-color: rgb(231, 229, 217); display: flex; border-radius: 10px; overflow: hidden; flex-direction: column; .role-choice-cards-header { width: 100%; height: 30px; background-color: rgb(139, 139, 131); padding: 5px; font-size: 18px; } .role-choice-cards-content { width: 100%; padding: 5px; display: flex; .role-content-container { width: 40px; display: flex; margin-top: 5px; margin-left: 5px; flex-direction: column; align-items: center; margin-right: 5px } .role-content-icon { width: 40px; height: 40px; background-size: cover; background-color: black; border-radius: 50%; } } } .role-choice-cards-container + .role-choice-cards-container { margin-top: 4%; /* 两个子元素之间的间距4% */ } }