2025.6.23

Riku

2025-06-23 ff82e86becbd200adabd2ce56fba1f6b3c6c37e1

 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-show="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> -->