style: background panel

src/components/business/image-cutout/ImageCutout.vue

@@ -3,7 +3,7 @@
  * @Date: 2023-07-11 23:50:22
  * @Description: 抠图组件
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-30 12:21:22
+ * @LastEditTime: 2023-09-30 12:23:39
 -->
 <template>
   <el-dialog v-model="show" title="AI 智能抠图" width="650" @close="handleClose">
@@ -76,13 +76,12 @@ export default defineComponent({
       // 返回抠图结果
       const result: any = await api.upload(file, (up: number, dp: number) => {
         if (dp) {
-          state.progressText = '导入中..'
+          state.progressText = dp === 100 ? '' : '导入中..'
           state.progress = dp
         } else {
           state.progressText = up < 100 ? '上传中..' : '正在处理，请稍候..'
           state.progress = up < 100 ? up : 0
         }
-        dp === 100 && (state.progressText = '')
       })
       if (result.type !== 'application/json') {
         const resultImage = URL.createObjectURL(result)

src/components/modules/panel/wrap/BgImgListWrap.vue

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-27 15:16:07
  * @Description: 背景图
- * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-09-01 14:18:54
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-10-03 18:53:02
 -->
 <template>
   <div class="wrap">
@@ -11,11 +11,11 @@
       <div v-for="c in colors" :key="c" :style="{ background: c }" class="color__item" @click="setBGcolor(c)"></div>
     </div>
     <ul v-if="showList" v-infinite-scroll="loadData" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
-      <el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
-        <div v-for="(item, i) in bgList" :key="i + 'i'" draggable="false" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
-          <el-image class="list__img" :src="item.thumb" fit="cover"></el-image>
-        </div>
-      </el-space>
+      <div class="list">
+        <el-tooltip v-for="(item, i) in bgList" :key="i + 'i'" :content="`<p style='max-width:140px;'><b>${item.description}</b></p><p>@${item.author}</p>`" offset="0" effect="light" placement="top-start" hide-after="0" :enterable="false" raw-content>
+          <el-image class="list__img" :src="item.thumb" fit="cover" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)"></el-image>
+        </el-tooltip>
+      </div>
       <div v-show="loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
       <div v-show="loadDone" class="loading">全部加载完毕</div>
     </ul>
@@ -137,11 +137,14 @@ export default defineComponent({
 // }
 .list {
   width: 100%;
-  padding: 0 0 0 1rem;
+  padding: 0 1rem;
+  display: grid;
+  grid-template-columns: auto auto auto;
   &__img {
     cursor: pointer;
     width: 92px;
     height: 92px;
+    margin-bottom: 5px;
   }
   &__img:hover::before {
     content: ' ';