chore: 应用广场添加滚动条

src/views/applications-square/applications-square.vue

@@ -8,7 +8,7 @@ import {
   fetchGetMallCategoryList,
 } from '@/apis/application-square'
 import type { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
-import { PersonalAppConfigState } from '@/store/types/personal-app-config'
+import type { PersonalAppConfigState } from '@/store/types/personal-app-config'
 import { useScroll } from '@vueuse/core'
 import { router } from '@/router'
 import searchEmptyImage from '@/assets/images/search-empty.png'
@@ -105,7 +105,7 @@ function handleGetAgentApplicationList(update = false, search = false) {
   })
 }
 
-function handleCollectOrCancelAgentApplication(id: number | undefined) {
+function handleCollectOrCancelAgentApplication(id: number) {
   fetchCollectOrCancelAgentApplication(id).then(() => {
     handleGetAgentApplicationList(true)
   })
@@ -129,7 +129,11 @@ function handleAddAgentApplications() {
 </script>
 
 <template>
-  <div ref="cardContentWrapRef" class="flex h-full flex-col overflow-y-auto py-6" style="scrollbar-width: none">
+  <div
+    ref="cardContentWrapRef"
+    class="applications-square-content flex h-full flex-col overflow-y-auto py-6"
+    style="scrollbar-width: none"
+  >
     <div class="mb-[19px] flex items-center justify-between">
       <div class="flex flex-col">
         <div class="flex items-center">
@@ -169,13 +173,18 @@ function handleAddAgentApplications() {
       <n-collapse-transition :show="isShowCarousel">
         <div>
           <n-carousel autoplay class="h-[280px] w-full rounded-[10px] object-cover 2xl:object-fill">
-            <img class="h-[280px] w-full cursor-pointer" src="@/assets/images/application-square-carousel.png" />
-            <img class="h-[280px] w-full cursor-pointer" src="@/assets/images/application-square-carousel.png" />
+            <img
+              class="h-[280px] w-full cursor-pointer object-cover"
+              src="@/assets/images/application-square-carousel.png"
+            />
+            <img
+              class="h-[280px] w-full cursor-pointer object-cover"
+              src="@/assets/images/application-square-carousel.png"
+            />
           </n-carousel>
         </div>
         <div class="h-[20px] bg-[#f3f6f9]"></div>
       </n-collapse-transition>
-      <div>
       <div class="sticky top-[-30px] z-10">
         <div class="flex items-center rounded-[5px] bg-white py-[9px] pl-[9px]">
           <button
@@ -190,6 +199,8 @@ function handleAddAgentApplications() {
           </button>
         </div>
       </div>
+      <n-scrollbar style="max-height: 920px">
+        <div>
           <div class="mt-[14px] min-h-[800px]">
             <div class="flex justify-center">
               <n-spin v-show="agentApplicationClassifyIsLoading" size="large" />
@@ -205,7 +216,7 @@ function handleAddAgentApplications() {
                 class="mb-[20px] mr-[15px]"
               >
                 <div
-                class="rounded-[10px]! bg-[#fff] px-[24px] pb-[20px] pt-[20px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
+                  class="rounded-[10px]! max-w-[392px] bg-[#fff] px-[24px] pb-[20px] pt-[20px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
                 >
                   <div class="flex cursor-pointer justify-between">
                     <div class="popover-trigger mr-[22px] text-[14px]">
@@ -245,9 +256,9 @@ function handleAddAgentApplications() {
                             theme="two-tone"
                             size="18"
                             :fill="agentApplicationItem.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']"
-                          :stroke-width="2"
+                            :stroke-width="3"
                             class="cursor-pointer transition-all delay-150 duration-300 ease-in-out"
-                          @click="handleCollectOrCancelAgentApplication(agentApplicationItem.id)"
+                            @click="handleCollectOrCancelAgentApplication(agentApplicationItem.id!)"
                           />
                           <span class="ml-[6px] text-[12px] text-[#333]">{{ agentApplicationItem.collectNumber }}</span>
                         </div>
@@ -256,7 +267,7 @@ function handleAddAgentApplications() {
                             theme="outline"
                             size="18"
                             fill="#333"
-                          :stroke-width="2"
+                            :stroke-width="3"
                             class="ml-[12px] cursor-pointer"
                           />
                           <span class="ml-[6px] text-[12px] text-[#333]">{{ agentApplicationItem.clickNumber }}</span>
@@ -298,6 +309,7 @@ function handleAddAgentApplications() {
             </div>
           </div>
         </div>
+      </n-scrollbar>
     </div>
   </div>
 </template>
@@ -309,6 +321,11 @@ function handleAddAgentApplications() {
   border: 1px #000dff solid;
 }
 
+.cardContentWrap {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
 @media (width >= 1536px) and (width <= 1670px) {
   .popover-trigger,
   .agent-desc {