.arti-detail { width: 185px; border-radius: 10px; background: url("./cont/card-bg.png") top left repeat-x; background-size: auto 100%; margin: 5px; position: relative; box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8); height: 205px; overflow: hidden; .arti-icon { width: 60px; height: 60px; position: absolute; left: 2px; top: 3px; span { position: absolute; right: 2px; bottom: 0; margin-left: 5px; background: rgba(0, 0, 0, .5); border-radius: 5px; height: 18px; line-height: 18px; padding: 0 3px; color: #fff; font-size: 12px; display: block; } img { width: 60px; height: 60px; } } .head { color: #fff; padding: 12px 0 8px 68px; strong { font-size: 15px; display: block; white-space: nowrap; overflow: hidden; } span { font-size: 14px; } .mark { } } ul.detail { width: 100%; padding: 0; position: initial; li { padding: 0 3px; font-size: 14px; position: initial; width: 100%; display: table; line-height: 26px; height: 26px; &.nouse span { color: #888; } &.arti-main { font-size: 16px; padding: 3px 3px; font-weight: bold; } span { position: initial; display: table-cell; color: #fff; &.title { text-align: left; padding-left: 10px; } &.val { text-align: right; padding-right: 10px; } } &:nth-child(even) { background: rgba(0, 0, 0, .4) } &:nth-child(odd) { background: rgba(50, 50, 50, .4) } } } .avatar-icon { position: absolute; left: 32px; top: 26px; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; z-index: 3; img { max-width: 100%; max-height: 100%; } } .arti-icon img { width: 52px; height: 52px; } }