Bladeren bron

feat: 修改文章卡片样式

IlhamTahir 1 jaar geleden
bovenliggende
commit
8bc5c2892a
5 gewijzigde bestanden met toevoegingen van 19 en 25 verwijderingen
  1. 2 0
      package.json
  2. 6 15
      pnpm-lock.yaml
  3. 1 0
      src/model/pet-manual.ts
  4. 9 9
      src/pages/pet-manual/components/CardList.vue
  5. 1 1
      src/pages/pet-manual/index.vue

+ 2 - 0
package.json

@@ -79,8 +79,10 @@
     "@mini-types/alipay": "^3.0.14",
     "@types/node": "^22.9.0",
     "@uni-helper/eslint-config": "^0.2.1",
+    "@uni-helper/uni-app-types": "1.0.0-alpha.6",
     "@uni-helper/uni-env": "^0.1.7",
     "@uni-helper/uni-types": "^1.0.0-alpha.6",
+    "@uni-helper/uni-ui-types": "1.0.0-alpha.6",
     "@uni-helper/unocss-preset-uni": "^0.2.10",
     "@uni-helper/vite-plugin-uni-components": "^0.1.0",
     "@uni-helper/vite-plugin-uni-layouts": "^0.1.10",

+ 6 - 15
pnpm-lock.yaml

@@ -105,12 +105,18 @@ importers:
       '@uni-helper/eslint-config':
         specifier: ^0.2.1
         version: 0.2.1(@antfu/eslint-config@3.8.0(@typescript-eslint/utils@8.13.0(eslint@9.14.0(jiti@2.4.0))(typescript@5.5.4))(@unocss/eslint-plugin@0.64.0(eslint@9.14.0(jiti@2.4.0))(typescript@5.5.4))(@vue/compiler-sfc@3.5.12)(eslint@9.14.0(jiti@2.4.0))(typescript@5.5.4))(eslint@9.14.0(jiti@2.4.0))
+      '@uni-helper/uni-app-types':
+        specifier: 1.0.0-alpha.6
+        version: 1.0.0-alpha.6(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
       '@uni-helper/uni-env':
         specifier: ^0.1.7
         version: 0.1.7
       '@uni-helper/uni-types':
         specifier: ^1.0.0-alpha.6
         version: 1.0.0-alpha.6(@uni-helper/uni-app-types@1.0.0-alpha.6(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4)))(@uni-helper/uni-cloud-types@1.0.0-alpha.6(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4)))(@uni-helper/uni-ui-types@1.0.0-alpha.6(@uni-helper/uni-app-types@1.0.0-alpha.6(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4)))(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4)))(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
+      '@uni-helper/uni-ui-types':
+        specifier: 1.0.0-alpha.6
+        version: 1.0.0-alpha.6(@uni-helper/uni-app-types@1.0.0-alpha.6(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4)))(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
       '@uni-helper/unocss-preset-uni':
         specifier: ^0.2.10
         version: 0.2.10(@unocss/preset-mini@0.64.0)(@unocss/rule-utils@0.64.0)(@unocss/vite@0.64.0(rollup@4.24.4)(vite@5.4.10(@types/node@22.9.0)(sass@1.81.0)(terser@5.36.0))(vue@3.4.38(typescript@5.5.4)))(unocss-applet@0.8.5(@unocss/core@0.64.0)(@unocss/preset-mini@0.64.0)(@unocss/preset-uno@0.64.0)(unocss@0.64.0(postcss@8.4.49)(rollup@4.24.4)(vite@5.4.10(@types/node@22.9.0)(sass@1.81.0)(terser@5.36.0))(vue@3.4.38(typescript@5.5.4))))(unocss@0.64.0(postcss@8.4.49)(rollup@4.24.4)(vite@5.4.10(@types/node@22.9.0)(sass@1.81.0)(terser@5.36.0))(vue@3.4.38(typescript@5.5.4)))
@@ -2085,42 +2091,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.0':
     resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.0':
     resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.0':
     resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.0':
     resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.0':
     resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.0':
     resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
@@ -2198,55 +2198,46 @@ packages:
     resolution: {integrity: sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.24.4':
     resolution: {integrity: sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.24.4':
     resolution: {integrity: sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.24.4':
     resolution: {integrity: sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.24.4':
     resolution: {integrity: sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.24.4':
     resolution: {integrity: sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.24.4':
     resolution: {integrity: sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.24.4':
     resolution: {integrity: sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.24.4':
     resolution: {integrity: sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.24.4':
     resolution: {integrity: sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==}

+ 1 - 0
src/model/pet-manual.ts

@@ -24,6 +24,7 @@ export interface Article {
   content: string
   status: string
   title: string
+  description: string
   updatedTime?: string
   imageUrl?: string
 }

+ 9 - 9
src/pages/pet-manual/components/CardList.vue

@@ -37,25 +37,25 @@ function handleLoadMore() {
 </script>
 
 <template>
-  <view
-    v-for="(item, index) in props.cardList" :key="index" class="bg-[white] rounded-md shadow-lg mx-4 mb-4 w-[calc(100% - 32px)] mt-3"
-  >
-    <view class="flex">
-      <image class="w-28 h-28 rounded-l-md" :src="item?.imageUrl || titleBg" />
-      <view class="p-4">
+  <view class="flex flex-col gap-4 px-4">
+    <view
+      v-for="(item, index) in props.cardList" :key="index" class="bg-[white] rounded-md shadow-lg flex w-full h-[120px] overflow-hidden"
+    >
+      <image class="w-[120px] h-[120px] rounded-l-md shrink-0" :src="item?.imageUrl || titleBg" />
+      <view class="p-4 flex flex-col">
         <view class="text-[14px]">
           {{ item.title }}
         </view>
-        <view class="mt-2 text-[11px] text-[#999] whitespace-pre-line">
-          {{ item.content }}
+        <view class="mt-2 flex-1 text-[11px] text-[#999] whitespace-pre-line">
+          {{ item.description }}
         </view>
         <view class="mt-3 text-[10px] text-[#D8D8D8]">
           {{ item.updatedTime }}
         </view>
       </view>
     </view>
+    <uni-load-more :status="loadMoreStatus" :content-text="contentText" @click-load-more="handleLoadMore" />
   </view>
-  <uni-load-more :status="loadMoreStatus" :content-text="contentText" @click-load-more="handleLoadMore" />
 </template>
 
 <style scoped>

+ 1 - 1
src/pages/pet-manual/index.vue

@@ -208,7 +208,7 @@ init()
         养宠贴士
       </view>
       <view class="mx-4 sticky top-0 bg-[#f5f6f7]">
-        <scroll-view class="scroll mt-2" scroll-x="auto">
+        <scroll-view class="scroll mt-2" :scroll-x="true">
           <view class="group h-[40px] mt-1">
             <view
               v-for="(item, index) in typeList" :key="index" class="item h-[30px] w-[28%] rounded-15px relative" style="border: 1px solid #E7E7E7"