|
|
|
|
@ -0,0 +1,600 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="cart-container">
|
|
|
|
|
<el-popover
|
|
|
|
|
placement="top"
|
|
|
|
|
width="500"
|
|
|
|
|
trigger="click">
|
|
|
|
|
<div class="cart-panel" :style="{'--current-color': theme}">
|
|
|
|
|
<div class="image-area" v-show="!chooseTask">
|
|
|
|
|
<div class="cart-title">图片购物车</div>
|
|
|
|
|
<div class="image-list">
|
|
|
|
|
<div v-for="(item, index) in list" :key="index" class="image-item" :class="{'image-item-active': item._check}" @click="imageClick(item)">
|
|
|
|
|
<img :src="imageUrl(item)" alt="" class="image">
|
|
|
|
|
<el-checkbox class="checkbox" v-model="item._check" @change="handleCheckChange"></el-checkbox>
|
|
|
|
|
<div class="image-delete" @click.stop="deleteImage(index)">
|
|
|
|
|
<i class="el-icon-delete"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cart-tool">
|
|
|
|
|
<div style="margin-right: 16px;">
|
|
|
|
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选（{{list.filter(val => val._check).length}}）</el-checkbox>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dropdown @command="handleImageCommand" v-loading="genImaging">
|
|
|
|
|
<span class="el-dropdown-link">
|
|
|
|
|
图片合并<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<el-dropdown-item command="nineGrid">九宫格</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item command="fourGrid">四宫格</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item command="horizontalMerge">水平合并</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item command="verticalMerge">垂直合并</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item command="video">生成视频</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
<el-button type="warning" size="small" plain @click="clear">清空购物车</el-button>
|
|
|
|
|
<el-button type="info" size="small" v-loading="taskCreating" plain @click.stop="goCreateTask">创建任务</el-button>
|
|
|
|
|
<el-button type="primary" size="small" plain @click.stop="addToTask">反馈到任务<i class="el-icon-right"></i></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="image-area task-area" v-show="chooseTask">
|
|
|
|
|
<div class="cart-title" @click="goBack"><i class="el-icon-back"></i>返回</div>
|
|
|
|
|
<div class="task-list" v-loading="loadingTask">
|
|
|
|
|
<el-table
|
|
|
|
|
ref="multipleTable"
|
|
|
|
|
tooltip-effect="dark"
|
|
|
|
|
:data="taskList"
|
|
|
|
|
border
|
|
|
|
|
height="460"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="任务名称"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
min-width="160"
|
|
|
|
|
prop="taskTitle"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column label="任务类型" align="center" prop="taskType" min-width="100">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<dict-tag :options="dict.type.task_type" :value="scope.row.taskType"/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="任务内容"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
min-width="160"
|
|
|
|
|
prop="taskContent"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="发布单位"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
min-width="160"
|
|
|
|
|
prop="branchName"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="发布部门"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
min-width="160"
|
|
|
|
|
prop="deptName"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="发布人"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
min-width="160"
|
|
|
|
|
prop="taskInitiator"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="任务期限"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
min-width="200"
|
|
|
|
|
prop="startToEndDate"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="任务状态" align="center" prop="taskStatus" min-width="100">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus"/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="状态"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
min-width="90"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot="{ row }">
|
|
|
|
|
<template v-if="row.sdTaskOther && row.sdTaskOther.status === '2'">
|
|
|
|
|
<el-tag
|
|
|
|
|
type="success">已办结</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="row.sdTaskOtherFeedbackByCreate">
|
|
|
|
|
<el-tag v-if="row.sdTaskOtherFeedbackByCreate.status === '1'"
|
|
|
|
|
>已反馈</el-tag
|
|
|
|
|
>
|
|
|
|
|
<el-tag
|
|
|
|
|
v-else-if="row.sdTaskOtherFeedbackByCreate.status === '2'"
|
|
|
|
|
type="success"
|
|
|
|
|
>已通过</el-tag
|
|
|
|
|
>
|
|
|
|
|
<el-tag
|
|
|
|
|
v-else-if="row.sdTaskOtherFeedbackByCreate.status === '-1'"
|
|
|
|
|
type="danger"
|
|
|
|
|
>驳回</el-tag
|
|
|
|
|
>
|
|
|
|
|
<el-tag v-else type="info">未反馈</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
<el-tag v-else type="info">未反馈</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column width="80px" align="center" label="操作" fixed="right">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-link
|
|
|
|
|
class="table-opretar"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="confirmAddToTask(scope.row)"
|
|
|
|
|
>确定反馈</el-link
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="visible" slot="reference" class="cart-content" ref="cartContent" :class="{'playAnimation': isAnimation}">
|
|
|
|
|
<el-badge :value="list.length" class="item">
|
|
|
|
|
<div class="cart-btn">
|
|
|
|
|
<i class="el-icon-shopping-cart-full"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-badge>
|
|
|
|
|
</div>
|
|
|
|
|
</el-popover>
|
|
|
|
|
<transition
|
|
|
|
|
appear
|
|
|
|
|
@before-enter="beforeEnter"
|
|
|
|
|
@enter="afterEnter"
|
|
|
|
|
@after-leave="animationEnd"
|
|
|
|
|
>
|
|
|
|
|
<div class="ball" v-show="showBall" :style="ballStyle">
|
|
|
|
|
<i class="el-icon-shopping-cart-full"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<AuditDialog ref="editDialog" ></AuditDialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { mapState } from 'vuex';
|
|
|
|
|
import { pageListByUser } from "@/api/task/branch";
|
|
|
|
|
import { addImageFeedback } from "@/api/task/feedback";
|
|
|
|
|
import { generateTasks } from "@/api/task/images";
|
|
|
|
|
import { imageToGroup } from "@/api/gallery/images";
|
|
|
|
|
import AuditDialog from "@/views/task-distribut/send/other-task/components/AuditDialog";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'PhotoCart',
|
|
|
|
|
dicts: ['task_type','task_status'],
|
|
|
|
|
components: {
|
|
|
|
|
AuditDialog
|
|
|
|
|
},
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
list: [
|
|
|
|
|
// {
|
|
|
|
|
// id: 1,
|
|
|
|
|
// url: '',
|
|
|
|
|
// _check: true
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// id: 2,
|
|
|
|
|
// url: '',
|
|
|
|
|
// _check: true
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// id: 3,
|
|
|
|
|
// url: '',
|
|
|
|
|
// _check: true
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// id: 4,
|
|
|
|
|
// url: '',
|
|
|
|
|
// _check: true
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// id: 5,
|
|
|
|
|
// url: '',
|
|
|
|
|
// _check: true
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// id: 6,
|
|
|
|
|
// url: '',
|
|
|
|
|
// _check: true
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// id: 7,
|
|
|
|
|
// url: '',
|
|
|
|
|
// _check: true
|
|
|
|
|
// },
|
|
|
|
|
],
|
|
|
|
|
isIndeterminate: false,
|
|
|
|
|
checkAll: true,
|
|
|
|
|
visible: false,
|
|
|
|
|
chooseTask: false,
|
|
|
|
|
loadingTask: false,
|
|
|
|
|
taskList: [],
|
|
|
|
|
ballStyle: {},
|
|
|
|
|
isAnimation: false,
|
|
|
|
|
addX: 0,
|
|
|
|
|
addY: 0,
|
|
|
|
|
showBall: false,
|
|
|
|
|
taskCreating: false,
|
|
|
|
|
genImaging: false,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState({
|
|
|
|
|
theme: state => state.settings.theme,
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$eventBus.$on('addImageToCart', this.addImageToCart);
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
this.$eventBus.$off('addImageToCart', this.addImageToCart);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
addImageToCart({ item, x, y }) {
|
|
|
|
|
if (this.list.some(val => val.id === item.id)) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.addX = x;
|
|
|
|
|
this.addY = y;
|
|
|
|
|
|
|
|
|
|
this.list.push({
|
|
|
|
|
...item,
|
|
|
|
|
_check: true
|
|
|
|
|
});
|
|
|
|
|
this.visible = true;
|
|
|
|
|
this.ballStyle = {
|
|
|
|
|
left: x - 20 + 'px',
|
|
|
|
|
top: y - 20 + 'px'
|
|
|
|
|
};
|
|
|
|
|
this.showBall = true;
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
imageUrl(item) {
|
|
|
|
|
let url = item.imagePath;
|
|
|
|
|
if (item.file?.length > 0) {
|
|
|
|
|
url = item.file[0].attachFileUrl || item.imagePath;
|
|
|
|
|
}
|
|
|
|
|
if (url.indexOf("http") === 0) {
|
|
|
|
|
return url;
|
|
|
|
|
}
|
|
|
|
|
return process.env.VUE_APP_BASE_API + url;
|
|
|
|
|
},
|
|
|
|
|
handleCheckAllChange(val) {
|
|
|
|
|
this.list.forEach(item => {
|
|
|
|
|
item._check = val;
|
|
|
|
|
});
|
|
|
|
|
this.isIndeterminate = false;
|
|
|
|
|
},
|
|
|
|
|
handleCheckChange(val) {
|
|
|
|
|
this.updateCheckAllState();
|
|
|
|
|
},
|
|
|
|
|
imageClick(item) {
|
|
|
|
|
item._check = !item._check;
|
|
|
|
|
this.updateCheckAllState();
|
|
|
|
|
},
|
|
|
|
|
updateCheckAllState() {
|
|
|
|
|
this.checkAll = this.list.every(item => item._check);
|
|
|
|
|
this.isIndeterminate = this.list.some(item => item._check) && !this.checkAll;
|
|
|
|
|
},
|
|
|
|
|
checkVisible() {
|
|
|
|
|
if (this.list.length === 0) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
}, 500);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
deleteImage(index) {
|
|
|
|
|
this.list.splice(index, 1);
|
|
|
|
|
this.checkVisible();
|
|
|
|
|
},
|
|
|
|
|
clear() {
|
|
|
|
|
this.$confirm('确定清空图片购物车吗？', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.list = [];
|
|
|
|
|
this.checkAll = true;
|
|
|
|
|
this.isIndeterminate = false;
|
|
|
|
|
this.visible = false;
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
},
|
|
|
|
|
goCreateTask() {
|
|
|
|
|
if (this.list.some(val => val._check) === false) {
|
|
|
|
|
this.$message.warning('请至少选择一张图片');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const images = this.list.filter(val => val._check);
|
|
|
|
|
const ids = images.map(val => val.id);
|
|
|
|
|
this.taskCreating = true;
|
|
|
|
|
generateTasks({
|
|
|
|
|
ids,
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.taskCreating = false;
|
|
|
|
|
const list = this.list.filter(val => !val._check);
|
|
|
|
|
this.list = list;
|
|
|
|
|
this.$refs.editDialog.open(res.data || {}, images);
|
|
|
|
|
this.checkVisible();
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
this.taskCreating = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
addToTask() {
|
|
|
|
|
if (this.list.some(val => val._check) === false) {
|
|
|
|
|
this.$message.warning('请至少选择一张图片');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.taskList = [];
|
|
|
|
|
this.chooseTask = true;
|
|
|
|
|
this.loadingTask = true;
|
|
|
|
|
pageListByUser({
|
|
|
|
|
isPublish: "1",
|
|
|
|
|
taskStatus: 0,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 100,
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.loadingTask = false;
|
|
|
|
|
this.taskList = res.rows || [];
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
this.loadingTask = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
goBack() {
|
|
|
|
|
this.chooseTask = false;
|
|
|
|
|
},
|
|
|
|
|
confirmAddToTask(task) {
|
|
|
|
|
this.loadingTask = true;
|
|
|
|
|
const ids = this.list.filter(val => val._check).map(val => val.id);
|
|
|
|
|
addImageFeedback({
|
|
|
|
|
imageIds: ids,
|
|
|
|
|
taskId: task.id,
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.loadingTask = false;
|
|
|
|
|
this.chooseTask = false;
|
|
|
|
|
if (res.data && res.data.length > 0) {
|
|
|
|
|
if (ids.length === res.data.length) {
|
|
|
|
|
this.$message.error(`反馈失败，所选图片与任务标签不符合`);
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning(`图片已反馈到任务中，其中${res.data.length}张图片标签不符合`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.success('图片已反馈到任务中');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const list = this.list.filter(val => {
|
|
|
|
|
if (val._check) {
|
|
|
|
|
if (res.data && res.data.length > 0) {
|
|
|
|
|
return res.data.includes(val.id);
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
});
|
|
|
|
|
this.list = list;
|
|
|
|
|
this.checkVisible();
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
this.loadingTask = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleImageCommand(command) {
|
|
|
|
|
this.genImaging = true;
|
|
|
|
|
const ids = this.list.filter(val => val._check).map(val => val.id);
|
|
|
|
|
imageToGroup({
|
|
|
|
|
ids,
|
|
|
|
|
imageType: command,
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.genImaging = false;
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
this.genImaging = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
animationEnd() {
|
|
|
|
|
this.isAnimation = true;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.isAnimation = false;
|
|
|
|
|
}, 500);
|
|
|
|
|
console.log('动画结束了');
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
beforeEnter(el) {
|
|
|
|
|
el.style.transform = `translate3d(${0}px,${0}px,0)`
|
|
|
|
|
console.log('动画开始了', this.addX, this.addY);
|
|
|
|
|
},
|
|
|
|
|
afterEnter(el) {
|
|
|
|
|
const rect = this.$refs.cartContent.getBoundingClientRect();
|
|
|
|
|
console.log('afterEnter',rect);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
el.style.transform = `translate3d(${rect.left - this.addX + rect.width / 2}px,${rect.top - this.addY + rect.height / 2}px,0)`
|
|
|
|
|
el.style.transition = 'transform .3s cubic-bezier(1,0,1,0)'
|
|
|
|
|
// el.style.transition = 'transform .3s linear'
|
|
|
|
|
|
|
|
|
|
this.showBall = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.playAnimation{
|
|
|
|
|
animation: cartScale 0.5s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
//实现购物车弹簧动画
|
|
|
|
|
@keyframes cartScale {
|
|
|
|
|
0%{
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
}
|
|
|
|
|
20%{
|
|
|
|
|
transform: scale(1.2);
|
|
|
|
|
}
|
|
|
|
|
60%{
|
|
|
|
|
transform: scale(0.8);
|
|
|
|
|
}
|
|
|
|
|
80%{
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
100%{
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cart-container {
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
left: 32px;
|
|
|
|
|
bottom: 40px;
|
|
|
|
|
|
|
|
|
|
.el-dropdown-link {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #409EFF;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ball {
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
// background-color: var(--current-color);
|
|
|
|
|
background-color: white;
|
|
|
|
|
border: 1px solid #d3d4d6;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #909399;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cart-panel {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 500px;
|
|
|
|
|
|
|
|
|
|
.cart-title {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-area {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
.image-list {
|
|
|
|
|
height: 0;
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
.image-item {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 180px;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
|
|
|
|
|
.image-delete {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
display: none;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.checkbox {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-item:hover {
|
|
|
|
|
.image-delete {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-item-active {
|
|
|
|
|
border: 1px solid var(--current-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cart-tool {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-area {
|
|
|
|
|
|
|
|
|
|
.task-list {
|
|
|
|
|
height: 0;
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cart-content {
|
|
|
|
|
width: 56px;
|
|
|
|
|
height: 56px;
|
|
|
|
|
|
|
|
|
|
.cart-btn {
|
|
|
|
|
width: 56px;
|
|
|
|
|
height: 56px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background-color: white;
|
|
|
|
|
box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
|
|
|
|
.el-icon-shopping-cart-full {
|
|
|
|
|
color: var(--current-color);
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
wx-jincw
5 days ago
