shuiwu/src/system/IOT/controlPanel/modules/lamp-vw.vue

<template>
  <div class="lamp" :style="{'--bgStart':bgStart,'--bgEnd':bgEnd}">
    <img src="@/assets/close.png" alt="" :style="marginB ? 'margin-bottom:0.357vw' : ''">
    <slot></slot>
    <div class="bg" :style="props.isTrue ? '' : 'animation:none'"></div>
  </div>
</template>

<script setup>
import {ref, defineProps, defineEmits} from 'vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
let emit = defineEmits([])
let props = defineProps({
  isTrue: {
    type:Boolean,
    default:() => {
      return true
    }
  },
  marginB: {
    type:Boolean,
    default:() => true
  },
  bgStart: {
    type:String,
    default:() => 'red'
  },
  bgEnd:{
    type: String,
    default:() => '#FF8F4A'
  }
})
</script>

<style scoped>
.lamp {
  color:#ffffff;
  font-size: 0.714vw;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  cursor: pointer;
}
.lamp img {
  width: 1.190vw;
  height: 1.190vw;
  position: relative;
}

.lamp .bg {
  width: 0.833vw;
  height: 0.833vw;
  border-radius: 50%;
  background: #cccccc;
  position: absolute;
  top: 0.179vw;
  z-index: 9;
  animation:lampBackground .5s infinite alternate ease-in-out;
}
@keyframes lampBackground {
  from {
    background-color: var(--bgEnd);
  }
  to {
    background-color: var(--bgStart);
  }
}

</style>