This commit is contained in:
pipipi-pikachu 2021-01-07 23:42:40 +08:00
parent 7cfdfe5e59
commit 922415ee93
2 changed files with 9 additions and 24 deletions

View File

@ -24,7 +24,6 @@ export default {
font-size: 12px; font-size: 12px;
padding: 0 15px; padding: 0 15px;
height: 32px; height: 32px;
transition: all 0.3s;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;

View File

@ -39,11 +39,10 @@
<template #item="{ element, index }"> <template #item="{ element, index }">
<div class="sequence-item"> <div class="sequence-item">
<div class="index">{{index + 1}}</div> <div class="index">{{index + 1}}</div>
<div class="el-type">{{element.elType}}</div> <div class="text">{{element.elType}}{{element.animationType}}</div>
<div class="animation-type">{{element.animationType}}</div>
<div class="handler"> <div class="handler">
<PlayCircleOutlined class="handler-btn" /> <PlayCircleOutlined class="handler-btn" />
<DeleteOutlined class="handler-btn" /> <CloseOutlined class="handler-btn" />
</div> </div>
</div> </div>
</template> </template>
@ -63,7 +62,7 @@ import Draggable from 'vuedraggable'
import { Button, Divider, Popover } from 'ant-design-vue' import { Button, Divider, Popover } from 'ant-design-vue'
import { import {
PlayCircleOutlined, PlayCircleOutlined,
DeleteOutlined, CloseOutlined,
} from '@ant-design/icons-vue' } from '@ant-design/icons-vue'
const animationTypes: { [key: string]: string } = {} const animationTypes: { [key: string]: string } = {}
@ -80,7 +79,7 @@ export default defineComponent({
Button, Button,
Divider, Divider,
PlayCircleOutlined, PlayCircleOutlined,
DeleteOutlined, CloseOutlined,
Popover, Popover,
}, },
setup() { setup() {
@ -163,32 +162,19 @@ export default defineComponent({
border-radius: $borderRadius; border-radius: $borderRadius;
margin-bottom: 5px; margin-bottom: 5px;
&:hover {
.animation-type {
display: none;
}
.handler {
display: block;
}
}
.index { .index {
flex: 1; flex: 1;
} }
.el-type { .text {
flex: 2; flex: 6;
}
.animation-type {
flex: 3;
text-align: right;
} }
.handler { .handler {
display: none; flex: 2;
flex: 3; font-size: 15px;
text-align: right; text-align: right;
} }
.handler-btn { .handler-btn {
margin-left: 10px; margin-left: 8px;
cursor: pointer; cursor: pointer;
} }
} }