From babfd2758091a6138fd57c04daa7577a77b29fb0 Mon Sep 17 00:00:00 2001
From: SMGDev <smgdev@smgoro.com>
Date: Fri, 21 Nov 2025 17:27:47 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96ArticlesPage=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=8C=E5=A2=9E=E5=BC=BA=E5=93=8D=E5=BA=94=E5=BC=8F?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=92=8C=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/article/ArticlesPage.vue | 41 +++++++++++++++---------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/pages/article/ArticlesPage.vue b/src/pages/article/ArticlesPage.vue
index 0918ef86..04798fe3 100644
--- a/src/pages/article/ArticlesPage.vue
+++ b/src/pages/article/ArticlesPage.vue
@@ -167,8 +167,8 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
 
 <template>
   <BasePage>
-    <div class="card flex justify-between gap-space">
-      <div>
+    <div class="card flex flex-col md:flex-row justify-between gap-space p-4 md:p-6">
+      <div class="mb-4 md:mb-0 md:w-44">
         <Book
             v-if="base.sbook.id"
             :is-add="false"
@@ -180,12 +180,12 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
               :is-add="true"
               @click="router.push('/book-list')"/>
       </div>
-      <div class="flex-1">
-        <div class="flex items-center">
-          <div class="title mr-4">本周学习记录</div>
+      <div class="flex-1 md:px-4 min-w-0">
+        <div class="flex items-center min-w-0">
+          <div class="title mr-4 truncate">本周学习记录</div>
           <div class="flex gap-4 color-gray">
             <div
-                class="w-8 h-8 rounded-md center"
+                class="w-6 h-6 md:w-8 md:h-8 rounded-md center text-sm md:text-base"
                 :class="item ? 'bg-[#409eff] color-white' : 'bg-gray-200'"
                 v-for="(item, i) in weekList"
                 :key="i"
@@ -193,34 +193,33 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
             </div>
           </div>
         </div>
-        <div class="flex gap-4 items-center mt-3 gap-space">
-          <div class="stat">
-            <div class="num">{{ todayTotalSpend }}</div>
-            <div class="txt">今日学习时长</div>
+        <div class="flex flex-col sm:flex-row gap-4 items-center mt-3 gap-space w-full">
+          <div class="w-full sm:flex-1 rounded-xl p-4 box-border relative bg-[var(--bg-history)] border border-gray-200">
+            <div class="text-[#409eff] text-xl font-bold">{{ todayTotalSpend }}</div>
+            <div class="text-gray-500">今日学习时长</div>
           </div>
-          <div class="stat">
-            <div class="num">{{ totalDay }}</div>
-            <div class="txt">总学习天数</div>
+          <div class="w-full sm:flex-1 rounded-xl p-4 box-border relative bg-[var(--bg-history)] border border-gray-200">
+            <div class="text-[#409eff] text-xl font-bold">{{ totalDay }}</div>
+            <div class="text-gray-500">总学习天数</div>
           </div>
-          <div class="stat">
-            <div class="num">{{ totalSpend }}</div>
-            <div class="txt">总学习时长</div>
+          <div class="w-full sm:flex-1 rounded-xl p-4 box-border relative bg-[var(--bg-history)] border border-gray-200">
+            <div class="text-[#409eff] text-xl font-bold">{{ totalSpend }}</div>
+            <div class="text-gray-500">总学习时长</div>
           </div>
         </div>
-
-        <Progress class="mt-3"
+        <Progress class="mt-3 w-full md:w-auto"
                   :percentage="base.currentBookProgress"
                   :format="()=> `${ base.sbook?.lastLearnIndex || 0 }/${base.sbook?.length || 0}篇`"
                   :show-text="true"></Progress>
       </div>
-      <div class="flex flex-col justify-between items-end">
+      <div class="flex flex-row md:flex-col justify-between items-center md:items-end gap-3 mt-4 md:mt-0 min-w-0">
         <div class="flex gap-4 items-center" v-opacity="base.sbook.id">
           <div class="color-link cursor-pointer" @click="router.push('/book-list')">更换</div>
         </div>
-        <BaseButton size="large"
+        <BaseButton size="large" class="w-full md:w-auto"
                     @click="startStudy"
                     :disabled="!base.currentBook.name">
-          <div class="flex items-center gap-2">
+          <div class="flex items-center gap-2 justify-center w-full">
             <span class="line-height-[2]">{{ isSaveData ? '继续学习' : '开始学习' }}</span>
             <IconFluentArrowCircleRight16Regular class="text-xl"/>
           </div>