fix(components): 为录音名称添加标题提示和文本溢出处理
添加标题提示以显示完整录音名称,并设置文本溢出样式防止布局问题
This commit is contained in:
@@ -336,7 +336,7 @@
|
||||
<div class="recording-item" v-for="recording in filteredRecordings" :key="recording.id">
|
||||
<div class="recording-info">
|
||||
<div class="recording-header">
|
||||
<span class="recording-name">{{ recording.name }}</span>
|
||||
<span class="recording-name" :title="recording.name">{{ recording.name }}</span>
|
||||
<span class="recording-score">分数: {{ recording.score }}</span>
|
||||
</div>
|
||||
<span class="recording-time">{{ recording.time }}</span>
|
||||
@@ -877,7 +877,14 @@ $indigo: #4f46e5;
|
||||
.recording-item { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 16px; background-color: $slate-50; border-radius: 8px; transition: all 0.2s ease; &:hover { background-color: $slate-100; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } }
|
||||
.recording-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
|
||||
.recording-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
.recording-name { font-weight: 500; color: $slate-800; }
|
||||
.recording-name {
|
||||
font-weight: 500;
|
||||
color: $slate-800;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100% - 80px);
|
||||
}
|
||||
.recording-time { font-size: 0.8rem; color: $slate-600; }
|
||||
.recording-type { font-size: 0.75rem; color: $slate-500; background-color: $slate-200; padding: 2px 8px; border-radius: 12px; display: inline-block; width: fit-content; }
|
||||
.recording-score { font-size: 0.8rem; color: $warning; font-weight: 600; }
|
||||
|
||||
Reference in New Issue
Block a user