change responsive]

2026-05-31 11:51:52 +03:30
parent 06568c5858
commit 023b8ee5be
124 changed files with 6296 additions and 4233 deletions
@@ -0,0 +1,66 @@
+<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>