elementplus card 悬浮菜单的实现

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElCard, ElRow, ElCol, ElProgress, ElIcon, ElButton } from 'element-plus'
import { ref } from 'vue'
const router = useRouter()
const visible = ref(false)
const monitor = (e: any) => {
  router.push('/dashboard/workplace')
  e.stopPropagation()
}
const control = (e: any) => {
  window.open('http://localhost:6080/vnc.html')
  e.stopPropagation()
}
</script>
<template>
  <el-row>
    <el-card
      class="box-card"
      shadow="hover"
      @click="monitor"
      @mouseleave="visible = !visible"
      @mouseenter="visible = !visible"
    >
      <el-row justify="center"><Icon icon="svg-icon:windows" :size="40" /></el-row>
      <el-row class="row" justify="center">主机1</el-row>
      <el-row class="row" align="middle">
        <el-col :span="6" class="text">CPU</el-col>
        <el-col :span="18">
          <el-progress :percentage="50" />
        </el-col>
      </el-row>
      <el-row class="row" align="middle">
        <el-col :span="6" class="text">内存</el-col>
        <el-col :span="18">
          <el-progress :percentage="50" />
        </el-col>
      </el-row>
      <el-row class="row" align="middle">
        <el-col :span="6" class="text">硬盘</el-col>
        <el-col :span="18">
          <el-progress :percentage="50" />
        </el-col>
      </el-row>
      <transition name="slide">
        <div class="card-pop-menu" v-show="visible">
          <el-row>
            <el-col :span="12">
              <ElButton type="primary" plain @click="monitor">监控</ElButton>
            </el-col>
            <el-col :span="12">
              <ElButton type="primary" plain>编辑</ElButton>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <ElButton type="primary" plain @click="control">控制台</ElButton>
            </el-col>
            <el-col :span="12">
              <ElButton type="danger" plain>删除</ElButton>
            </el-col>
          </el-row>
        </div>
      </transition>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <el-row justify="center" align="middle" style="height: 200px">
        <el-icon color="#409EFC" size="40">
          <Plus />
        </el-icon>
      </el-row>
    </el-card>
  </el-row>
</template>
<style lang="less" scoped>
.box-card {
  width: 240px;
  height: 240px;
  margin: 0 20px 20px 0;
  .row {
    margin-top: 14px;
  }
  .text {
    font-size: 14px;
  }
  .card-pop-menu {
    border-width: 1px 0 0 0;
    position: relative;
    top: -34px;
    width: 238px;
    height: 88px;
    margin: -20px;
    button {
      width: 100%;
      height: 44px;
      border-width: 0;
      border-radius: 0;
    }
  }
}
.slide-enter-active {
  transition: all 0.2s linear;
}
.slide-leave-active {
  transition: all 0.2s linear;
}
.slide-enter-from,
.slide-leave-to {
  transform: translateY(88px);
}
</style>

  <el-row>
    <el-col v-for="(o, index) in 10" :key="o" :span="6" :offset="index >= 0 ? 2 : 0">
      <el-card :body-style="{ padding: '0px' }">
          <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            class="image"
          />
        <div style="padding: 14px">
          <span>Yummy hamburger</span>
          <div class="bottom">
            <time class="time">{{ currentDate }}</time>
            <el-button text class="button">Operating</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

<el-col v-for="(o, index) in 10" :key="o" :span="6" :offset="index >= 0 ? 1 : 0">