save

components.d.ts

@@ -36,6 +36,7 @@ declare module 'vue' {
     IconBxVolumeMute: typeof import('~icons/bx/volume-mute')['default']
     IconEosIconsLoading: typeof import('~icons/eos-icons/loading')['default']
     IconFluentAdd16Regular: typeof import('~icons/fluent/add16-regular')['default']
+    IconFluentAdd20Filled: typeof import('~icons/fluent/add20-filled')['default']
     IconFluentAdd20Regular: typeof import('~icons/fluent/add20-regular')['default']
     IconFluentAddSquare20Regular: typeof import('~icons/fluent/add-square20-regular')['default']
     IconFluentArrowBounce20Regular: typeof import('~icons/fluent/arrow-bounce20-regular')['default']
@@ -91,6 +92,7 @@ declare module 'vue' {
     IconFluentSlideTextTitleEdit20Regular: typeof import('~icons/fluent/slide-text-title-edit20-regular')['default']
     IconFluentSpeakerEdit20Regular: typeof import('~icons/fluent/speaker-edit20-regular')['default']
     IconFluentSpeakerSettings20Regular: typeof import('~icons/fluent/speaker-settings20-regular')['default']
+    IconFluentStar12Regular: typeof import('~icons/fluent/star12-regular')['default']
     IconFluentStar16Filled: typeof import('~icons/fluent/star16-filled')['default']
     IconFluentStar16Regular: typeof import('~icons/fluent/star16-regular')['default']
     IconFluentStar20Filled: typeof import('~icons/fluent/star20-filled')['default']
@@ -105,8 +107,12 @@ declare module 'vue' {
     IconFluentWeatherSunny16Regular: typeof import('~icons/fluent/weather-sunny16-regular')['default']
     IconIconParkOutlineAddMusic: typeof import('~icons/icon-park-outline/add-music')['default']
     IconIxWechatLogo: typeof import('~icons/ix/wechat-logo')['default']
+    IconMaterialSymbolsMail: typeof import('~icons/material-symbols/mail')['default']
     IconPhExportLight: typeof import('~icons/ph/export-light')['default']
+    IconRiTwitterFill: typeof import('~icons/ri/twitter-fill')['default']
+    IconSimpleIconsGithub: typeof import('~icons/simple-icons/github')['default']
     IconSimpleIconsWechat: typeof import('~icons/simple-icons/wechat')['default']
+    IconSimpleIconsXiaohongshu: typeof import('~icons/simple-icons/xiaohongshu')['default']
     IconStreamlineDiscountPercentCoupon: typeof import('~icons/streamline/discount-percent-coupon')['default']
     IconSystemUiconsImport: typeof import('~icons/system-uicons/import')['default']
     IconUiwAlipay: typeof import('~icons/uiw/alipay')['default']

src/components/Book.vue

@@ -2,6 +2,7 @@
 import { Dict } from "@/types/types.ts";
 import Progress from '@/components/base/Progress.vue'
 import Checkbox from "@/components/base/checkbox/Checkbox.vue";
+import { isMobile } from "@/utils";
 
 interface IProps {
   item?: Partial<Dict>;
@@ -33,7 +34,7 @@ const studyProgress = $computed(() => {
 </script>
 
 <template>
-  <div class="book relative overflow-hidden">
+  <div class="book relative overflow-hidden" :class="isMobile() && 'book-mobile'">
     <template v-if="!isAdd">
       <div>
         <div class="text-base">{{ item?.name }}</div>
@@ -60,7 +61,7 @@ const studyProgress = $computed(() => {
 </template>
 
 <style scoped lang="scss">
-.book {
+.book-mobile {
   display: flex;
   flex-direction: column;
   justify-content: space-between;

src/pages/article/ArticlesPage.vue

@@ -299,7 +299,6 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
   &__record {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
   }
 
   &__record-header {
@@ -340,7 +339,6 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
 }
 
 .articles-list {
-  gap: 1rem;
 
   &__header {
     display: flex;
@@ -359,9 +357,7 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
   }
 
   &__grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-    gap: 1rem;
+    @apply flex gap-4 flex-wrap;
   }
 }
 

uno.config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
     'px-space': 'px-[var(--space)]',
     'py-space': 'py-[var(--space)]',
     'border-item': 'border-[var(--color-item-border)]',
+    'center':'flex justify-center items-center',
   },
   presets: [
     presetWind3(),