zzc/api-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rating

Browse Source
This commit is contained in:
zzc
2026-06-01 16:26:51 +08:00
parent ca1585962b
commit af23adfd2b
1 changed files with 111 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/views/rating/topic/index.vue
View File

@@ -14,19 +14,18 @@
</vab-query-form>
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
<el-table-column align="center" label="封面" width="100">
<el-table-column align="left" label="评价主题" min-width="250">
<template #default="{ row }">
<el-image
v-if="row.coverUrl"
:preview-src-list="[row.coverUrl]"
:src="getThumbUrl(row.coverUrl)"
style="width: 50px; height: 50px; border-radius: 4px"
/>
<span v-else>-</span>
<div class="topic-info-cell">
<el-image v-if="row.coverUrl" class="topic-cover" :preview-src-list="[row.coverUrl]" :src="getThumbUrl(row.coverUrl)" />
<div v-else class="topic-cover-placeholder"><i class="el-icon-picture-outline" /></div>
<div class="topic-details">
<div class="topic-title">{{ row.title }}</div>
<div v-if="row.description" class="topic-desc" :title="row.description">{{ row.description }}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="评价主题" min-width="150" prop="title" show-overflow-tooltip />
<el-table-column align="center" label="描述" min-width="200" prop="description" show-overflow-tooltip />
<el-table-column align="center" label="状态" width="100">
<template #default="{ row }">
@@ -45,10 +44,41 @@
</template>
</el-table-column>
<el-table-column align="center" label="参与人数" prop="participantCount" width="100" />
<el-table-column align="center" label="评价人数" prop="scoreCount" width="100" />
<el-table-column align="center" label="评论人数" prop="commentCount" width="100" />
<el-table-column align="center" label="浏览数" prop="viewCount" width="100" />
<el-table-column align="left" label="互动统计" min-width="180">
<template #default="{ row }">
<div class="stat-cell">
<div class="stat-row">
<span class="stat-label">
<i class="el-icon-view" />
浏览数：
</span>
<span class="stat-value">{{ row.viewCount }}</span>
</div>
<div class="stat-row">
<span class="stat-label">
<i class="el-icon-user" />
参与人数：
</span>
<span class="stat-value">{{ row.participantCount }}</span>
</div>
<div class="stat-row">
<span class="stat-label">
<i class="el-icon-star-on" />
评价人数：
</span>
<span class="stat-value">{{ row.scoreCount }}</span>
</div>
<div class="stat-row">
<span class="stat-label">
<i class="el-icon-chat-dot-round" />
评论人数：
</span>
<span class="stat-value">{{ row.commentCount }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="热门分数" prop="hotScore" width="100" />
<el-table-column align="center" label="创建时间" prop="createdAt" width="160">
@@ -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;
}
</style>