diff --git a/src/views/rating/topic/index.vue b/src/views/rating/topic/index.vue index c8b6d68..4b8f609 100644 --- a/src/views/rating/topic/index.vue +++ b/src/views/rating/topic/index.vue @@ -14,19 +14,18 @@ - + - - - - - - + + + + @@ -141,4 +171,71 @@ .rating-topic-container { padding: 20px; } + + .topic-info-cell { + display: flex; + align-items: center; + } + + .topic-cover, + .topic-cover-placeholder { + width: 50px; + height: 50px; + border-radius: 4px; + margin-right: 12px; + flex-shrink: 0; + } + + .topic-cover-placeholder { + background-color: #f0f2f5; + display: flex; + align-items: center; + justify-content: center; + color: #909399; + font-size: 20px; + } + + .topic-details { + display: flex; + flex-direction: column; + overflow: hidden; + } + + .topic-title { + font-weight: bold; + color: #303133; + margin-bottom: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .topic-desc { + font-size: 12px; + color: #909399; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .stat-cell { + display: flex; + flex-direction: column; + gap: 4px; + } + + .stat-row { + display: flex; + align-items: center; + font-size: 13px; + } + + .stat-label { + color: #909399; + width: 90px; + } + + .stat-value { + color: #606266; + }