github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: background panel

Browse Source
This commit is contained in:
ShawnPhang 2023-10-03 21:34:09 +08:00
parent 23a6e08e04
commit 91213c4f97
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/business/image-cutout/ImageCutout.vue
View File

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

17
src/components/modules/panel/wrap/BgImgListWrap.vue
View File

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