style: 从图片库/收藏选择图片组件的已选图片图标更换

src/component/common/SelectImages.vue

@@ -38,9 +38,10 @@
                 <span class="image-name">{{ item.name || '未命名' }}</span>
               </div>
             </div>
-            <div class="image-select" v-show="selectList.includes(item.url)">
+            <img class="selected-icon image-select" src="@/assets/images/icon/selected.png" v-show="selectList.includes(item.url)">
+            <!-- <div class="" v-show="selectList.includes(item.url)">
               <i class="fi fi-sr-check-circle"></i>
-            </div>
+            </div> -->
           </div>
         </div>
 
@@ -242,8 +243,8 @@ const resetAndLoad = (category = selectedCategory.value) => {
   list.value = []
   hasMore.value = true
   currentPage.value = 0
-  console.log('默认选择----',getDefaultCategory())
-  selectedCategory.value = getDefaultCategory()
+  // console.log('默认选择----',getDefaultCategory())
+  selectedCategory.value =category ||  getDefaultCategory()
   fetchImages(1, category, true)
 
   // 检查是否需要自动加载更多数据
@@ -280,6 +281,7 @@ const handleImageClick = item => {
 
 // 处理分类切换
 const handleChangeCategory = category => {
+  // console.log('handleChangeCategory',category)
   selectedCategory.value = category
 
   // 如果提供了API，则重新加载数据
@@ -508,8 +510,9 @@ defineExpose({
   overflow-y: auto;
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 16px;
-  min-height: 20rem;
+  min-height: 22rem;
   max-height: 50rem;
+  padding-bottom: 2rem;
 
   @media screen and (max-width: 768px) {
     grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
@@ -574,12 +577,16 @@ defineExpose({
 
 .image-select {
   position: absolute;
-  bottom: 0;
-  right: 0;
+  bottom: -1.25rem;
+  right: -1.25rem;
   z-index: 2;
-  transform: translate(50%, 50%);
-  i {
-    font-size: 2.5rem;
+  // transform: translate(50%, 50%);
+  // i {
+  //   font-size: 2.5rem;
+  // }
+  &.selected-icon{
+    width:2.5rem;
+    height: 2.5rem;
   }
 }