From b9ed187274d884d31e7c27f248de38a330a89fac Mon Sep 17 00:00:00 2001
From: yanghao05 <yanghao05@qianxin.com>
Date: Tue, 29 Apr 2025 14:30:05 +0800
Subject: [PATCH] fix: ui

---
 frontend/wechat/src/views/ArticleDetail.vue | 31 ++++++++++++---------
 frontend/wechat/src/views/ArticleList.vue   |  3 +-
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/wechat/src/views/ArticleDetail.vue b/frontend/wechat/src/views/ArticleDetail.vue
index 00050f6..1ee7113 100644
--- a/frontend/wechat/src/views/ArticleDetail.vue
+++ b/frontend/wechat/src/views/ArticleDetail.vue
@@ -128,8 +128,25 @@ onUnmounted(() => {
                     <source type="video/mp4" />
                     Your browser does not support the video tag.
                 </video>
+
+                <div v-if="article && !article.bought" class="bg-white border-b border-gray-200 p-4">
+                    <div class="flex items-center justify-between max-w-md mx-auto">
+                        <div class="text-orange-600 text-2xl">
+                            <span class="mr-2 text-xl">&yen;</span>
+                            <span class="font-bold  font-mono">
+                                {{ (article.price / 100).toFixed(2) }}
+                            </span>
+                        </div>
+                        <button @click="handleBuy" :disabled="buying"
+                            class="bg-orange-600 text-white px-8 py-2 rounded hover:bg-orange-500 active:bg-orange-600 transition-colors disabled:opacity-50">
+                            <span v-if="buying">处理中...</span>
+                            <span v-else>立即购买</span>
+                        </button>
+                    </div>
+                </div>
+
                 <div class="p-4">
-                    <h1 class="text-2xl my-1.5">{{ article.title }}</h1>
+                    <h1 class="text-2xl my-1.5 break-all">{{ article.title }}</h1>
                     <div class="py-2 flex items-center gap-2">
                         <span v-for="tag in article.tags" :key="tag"
                             class="px-1.5 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
@@ -145,18 +162,6 @@ onUnmounted(() => {
             </div>
         </div>
 
-        <div v-if="article && !article.bought" class="bg-white border-t border-gray-200 p-4">
-            <div class="flex items-center justify-between max-w-md mx-auto">
-                <div class="text-orange-600 font-bold text-xl">
-                    ¥{{ (article.price / 100).toFixed(2) }}
-                </div>
-                <button @click="handleBuy" :disabled="buying"
-                    class="bg-orange-600 text-white px-8 py-3 rounded-full hover:bg-orange-500 active:bg-orange-600 transition-colors disabled:opacity-50">
-                    <span v-if="buying">处理中...</span>
-                    <span v-else>立即购买</span>
-                </button>
-            </div>
-        </div>
     </div>
 </template>
 
diff --git a/frontend/wechat/src/views/ArticleList.vue b/frontend/wechat/src/views/ArticleList.vue
index ab7da51..7500555 100644
--- a/frontend/wechat/src/views/ArticleList.vue
+++ b/frontend/wechat/src/views/ArticleList.vue
@@ -83,8 +83,7 @@ onMounted(() => {
                     暂无文章
                 </div>
 
-                <ArticleListItem v-for="article in articles" :key="article.id" :article="{ ...article, bought: true }"
-                    class="mb-4" />
+                <ArticleListItem v-for="article in articles" :key="article.id" :article="article" class="mb-4" />
 
                 <div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
                     <div v-if="loading"