|
|
@@ -83,9 +83,14 @@
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 文本 -->
|
|
|
- <p class="card-text">{{ sentence.content }}</p>
|
|
|
- <p v-if="sentence.contentZh" class="card-text-zh">{{ sentence.contentZh }}</p>
|
|
|
+ <!-- 文本 / 图片 -->
|
|
|
+ <template v-if="sentence.imageUrl">
|
|
|
+ <img :src="sentence.imageUrl" class="card-image" alt="AI generated image" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <p class="card-text">{{ sentence.content }}</p>
|
|
|
+ <p v-if="sentence.contentZh" class="card-text-zh">{{ sentence.contentZh }}</p>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
|
|
|
<!-- 评分标签 -->
|
|
|
@@ -310,6 +315,15 @@ function getScoreClass(score: number) {
|
|
|
.card-text { font-size: 12px; color: #1f2937; margin: 0; line-height: 1.5; }
|
|
|
.card-text-zh { font-size: 10px; color: #9ca3af; margin: 2px 0 0; }
|
|
|
|
|
|
+.card-image {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 320px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: block;
|
|
|
+ background: #f3f4f6;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+}
|
|
|
+
|
|
|
.card-right {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|