AMAZEHOME/TypeWords
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化ArticlesPage布局，增强响应式设计和视觉效果

Browse Source
This commit is contained in:
SMGDev
2025-11-21 17:27:47 +00:00
parent 0b7c4dcea9
commit babfd27580
1 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/article/ArticlesPage.vue
View File

@@ -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>