slble-attend/sl.ble_sys-attend/src-js/views/rtMonitor/rtWatchPart.vue

<template>
  <div class="rtWatchPart">
    <div class="title">
      <div :class="blink ? 'blink-text' : ''">{{ title }}</div>
      <div :class="expand ? 'triangle-up' : 'triangle-down' " @click="handleClick"></div>
    </div>
    <div :class="expand ? 'content' : 'content-hide'" >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rtWatchPart',
  props: {
    blink: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default() {
        return '标题'
      }
    },
    expand: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleClick() {
      this.expand = !this.expand
    }
  }
}
</script>

<style scoped>
@keyframes blink {
  0%, 100% {
    /* opacity: 1; 不透明 */
    color: rgb(200 191 238);
  }
  50% {
    /* opacity: 0; 完全透明 */
    color: rgb(255, 0, 0)
  }
}

/* 应用动画 */
.blink-text {
  animation: blink 1s linear infinite; /* 动画名称，持续时间，速度曲线，迭代次数 */
}

.rtWatchPart {
  background: rgba(0,0,0,0.8);
  box-shadow: rgba(0,0,0, 0.8) 0 5px 5px;
  border: 1px solid rgba(0,0,0,1);


  .title {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid rgba(118, 127, 238, 1);
    color: rgb(200 191 238);
    padding-top: 5px;
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    text-shadow: -1px -1px 0 #444,  1px -1px 0 #444,  -1px 1px 0 #444,  1px 1px 0 #444;
  }

  .content {
    height: fit-content;
   /* height: calc(100% - 30px); */

  }

  .content-hide {
    display: none;
  }

  .triangle-up {
    width: 0;
    height: 0;
    border-left: 8px solid transparent; /* 左边的边 */
    border-right: 8px solid transparent; /* 右边的边 */
    border-bottom: 16px solid rgb(200 191 238); /* 底边，设置为黑色或其他颜色 */
    cursor: pointer;
    margin-right: 5px;
  }

  .triangle-down {
    width: 0;
    height: 0;
    border-left: 8px solid transparent; /* 左边的边 */
    border-right: 8px solid transparent; /* 右边的边 */
    border-top: 16px solid rgb(200 191 238); /* 顶边，设置为黑色或其他颜色 */
    cursor: pointer;
    margin-right: 5px;
  }
}
</style>