lamp-vw.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <div class="lamp" :style="{'--bgStart':bgStart,'--bgEnd':bgEnd}">
  3. <img src="@/assets/close.png" alt="" :style="marginB ? 'margin-bottom:0.357vw' : ''">
  4. <slot></slot>
  5. <div class="bg" :style="props.isTrue ? '' : 'animation:none'"></div>
  6. </div>
  7. </template>
  8. <script setup>
  9. import {ref, defineProps, defineEmits} from 'vue'
  10. import Api from '@/api/api'
  11. import utils from '@/utils/utils'
  12. let emit = defineEmits([])
  13. let props = defineProps({
  14. isTrue: {
  15. type:Boolean,
  16. default:() => {
  17. return true
  18. }
  19. },
  20. marginB: {
  21. type:Boolean,
  22. default:() => true
  23. },
  24. bgStart: {
  25. type:String,
  26. default:() => 'red'
  27. },
  28. bgEnd:{
  29. type: String,
  30. default:() => '#FF8F4A'
  31. }
  32. })
  33. </script>
  34. <style scoped>
  35. .lamp {
  36. color:#ffffff;
  37. font-size: 0.714vw;
  38. display: flex;
  39. flex-direction: column;
  40. position: relative;
  41. align-items: center;
  42. cursor: pointer;
  43. }
  44. .lamp img {
  45. width: 1.190vw;
  46. height: 1.190vw;
  47. position: relative;
  48. }
  49. .lamp .bg {
  50. width: 0.833vw;
  51. height: 0.833vw;
  52. border-radius: 50%;
  53. background: #cccccc;
  54. position: absolute;
  55. top: 0.179vw;
  56. z-index: 9;
  57. animation:lampBackground .5s infinite alternate ease-in-out;
  58. }
  59. @keyframes lampBackground {
  60. from {
  61. background-color: var(--bgEnd);
  62. }
  63. to {
  64. background-color: var(--bgStart);
  65. }
  66. }
  67. </style>