.score-content { width: 100%; background-color: #09f; } .score-report { width: 100%; padding: 30px 12px 45px 12px; color: #fff; .tab-list { display: flex; justify-content: space-around; font-size: 18px; li { padding-bottom: 6px; } .active { border-bottom: 2px solid #fff; } } .score-list-box { width: 100%; height: 434px; position: relative; margin-top: 20px; } .imgUrl { width: 100%; height: 434px; position: absolute; left: 0; top: 0; } .score-list { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; text-align: center; .title { font-size: 22px; color: #000; padding-top: 40px; img { width: 16px; height: 11px; margin: 0 20px; position: relative; top: -1px; } } table { margin: 15px 33px 0; text-align: center; border: 1px solid #e5e5e5; border-radius: 4px; background-color: #fff; tr { height: 40px; line-height: 40px; } thead { color: #525c65; font-size: 16px; font-weight: 400; } tbody { color: #525c65; font-size: 16px; font-weight: 500; td { border-top: 1px solid #e5e5e5; } } td { border-left: 1px solid #e5e5e5; width: 80px; &:first-child { border-left: none; } &:nth-of-type(2) { width: 124px; } } .has { color: #09f; } .rank { color: #ff2121; } } .comment { text-align: left; color: #333; font-size: 14px; line-height: 21px; margin: 15px 33px 0; em { text-decoration: line-through; } } .code { width: 80px; position: absolute; bottom: 40px; right: 25px; img { width: 80px; height: 80px; } p { color: #000; font-size: 12px; } } } .tip { text-align: center; margin-top: 20px; font-size: 16px; color: #fff; } .avatar_file { width: 49px; height: 49px; border-radius: 50%; float: left; margin-right: 10px; } }