67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<template>
|
|
<CollapsePanel :key="activeKey">
|
|
<template #header>
|
|
<div class="w-full">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<span>{{ props.title }}</span>
|
|
<BaseIcon :class="[{ rotate: props.actives.includes(props.activeKey) }]" icon="vuesax-linear:arrow-left-1" size="17" />
|
|
</div>
|
|
<div :class="[{ open: props.actives.includes(props.activeKey) }]"></div>
|
|
</div>
|
|
</template>
|
|
<slot name="content"></slot>
|
|
</CollapsePanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { CollapsePanel } from 'ant-design-vue'
|
|
|
|
interface Props {
|
|
title: string
|
|
activeKey: string | number
|
|
actives: string[] | number[]
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {})
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.open {
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #E5E7EB;
|
|
}
|
|
|
|
.rotate {
|
|
transform: rotate(-90deg);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
|
|
direction: rtl !important;
|
|
justify-content: space-between !important;
|
|
background-color: #fff !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ant-collapse{
|
|
border: none !important;
|
|
}
|
|
|
|
.ant-collapse > .ant-collapse-item {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.ant-collapse-content {
|
|
border-top: none;
|
|
}
|
|
|
|
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
|
|
display: none !important;
|
|
}
|
|
|
|
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
|
|
padding: 12px 16px 0 !important;
|
|
}
|
|
</style>
|