From 2547159bbd781c8e1a41ecc939385396c85f9766 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期一, 09 六月 2025 23:35:59 +0800
Subject: [PATCH] 2025.6.9（功能编写中）
---
src/components/BaseCard.vue | 90 ++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 85 insertions(+), 5 deletions(-)
diff --git a/src/components/BaseCard.vue b/src/components/BaseCard.vue
index d853a01..dbf4a2c 100644
--- a/src/components/BaseCard.vue
+++ b/src/components/BaseCard.vue
@@ -1,9 +1,50 @@
<template>
- <div class="wrap-2">
- <slot></slot>
+ <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></script>
+<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');
@@ -18,9 +59,48 @@
}
.wrap-2 {
- border: 2px solid rgba(255, 255, 255, 0.829);
+ border: 2px solid rgb(255, 255, 255);
border-radius: 8px;
padding: 4px;
- background: linear-gradient(#14428be8, #14428b8f);
+ /* 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> -->
--
Gitblit v1.9.3