<template>
|
<div class="wrap-2 p-events-auto">
|
<el-space>
|
<span class="close-icon" @click="showToggle">
|
<el-icon :size="16">
|
<!-- <Transition name="rotate">
|
<Close v-if="show" />
|
</Transition>
|
<Transition name="rotate-reverse">
|
<Plus v-if="!show" />
|
</Transition> -->
|
<Close :class="closeRotate" />
|
</el-icon>
|
</span>
|
<el-row justify="space-between" align="middle">
|
<span>{{ title }}</span>
|
<div class="m-l-16">
|
<slot name="expand"></slot>
|
</div>
|
</el-row>
|
</el-space>
|
<!-- <Transition name="el-zoom-in-left"> -->
|
<div class="m-t-8" v-if="show">
|
<slot></slot>
|
</div>
|
<!-- </Transition> -->
|
</div>
|
</template>
|
<script setup>
|
import { ref } from 'vue'
|
|
const props = defineProps({
|
title: String
|
})
|
|
const show = ref(true)
|
const closeRotate = ref('')
|
|
function showToggle() {
|
show.value = !show.value
|
if (show.value) {
|
closeRotate.value = 'rotate-enter-active close-rotate'
|
} else {
|
closeRotate.value = 'rotate-enter-active close-rotate-reverse'
|
}
|
}
|
</script>
|
<style scoped>
|
.wrap {
|
background-image: url('@/assets/icon/bg-border-1.png');
|
background-repeat: no-repeat;
|
/* background-position: center; */
|
background-size: cover;
|
/* background-color: white; */
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
margin: 10px;
|
}
|
|
.wrap-2 {
|
border: 2px solid rgb(255, 255, 255);
|
border-radius: 8px;
|
padding: 4px;
|
/* background: linear-gradient(#14428be8, #14428b8f); */
|
background: #14428be8;
|
}
|
|
.close-icon {
|
border: 1px solid white;
|
border-radius: 4px;
|
width: 20px;
|
height: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
}
|
.close-icon:hover {
|
border-color: #87f8f2;
|
color: #87f8f2;
|
}
|
.close-rotate {
|
transform: rotate(90deg);
|
}
|
.close-rotate-reverse {
|
transform: rotate(-135deg);
|
}
|
.rotate-enter-active {
|
transition: transform 0.5s ease;
|
}
|
</style>
|
<!-- <style>
|
|
.rotate-enter-from {
|
transform: rotate(135deg);
|
}
|
|
.rotate-reverse-enter-active {
|
transition: transform 0.5s ease;
|
/* transition: opacity 0.5s ease; */
|
}
|
.rotate-reverse-enter-from {
|
transform: rotate(-135deg);
|
}
|
</style> -->
|
