global-tip.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <div class="global-tip" v-if="state.is_show == 1">
  3. <img :src="require('@/assets/svg/icon-global-tip.svg')" alt="">
  4. <p>{{ state.msg }}</p>
  5. </div>
  6. </template>
  7. <script setup>
  8. import { onMounted, reactive, defineProps } from "vue";
  9. import { getAppNotification } from '@/http/messageApi.js'
  10. let props = defineProps({
  11. type: String,
  12. })
  13. // 显示位置:1-红包主体,2-发布器,3-插件主体
  14. let state = reactive({
  15. })
  16. onMounted(() => {
  17. getAppNotification().then((res) => {
  18. if (res.code == 0) {
  19. res.data.forEach((item) => {
  20. if (props.type == item.type) {
  21. state.is_show = item.isShow
  22. state.msg = item.message
  23. }
  24. })
  25. }
  26. })
  27. })
  28. </script>
  29. <style lang="scss" scoped>
  30. .global-tip {
  31. position: absolute;
  32. z-index: 3000;
  33. display: flex;
  34. height: 40px;
  35. background: #000000;
  36. opacity: 0.7;
  37. align-items: center;
  38. width: 100%;
  39. img {
  40. width: 15px;
  41. height: 15px;
  42. margin-left: 17px;
  43. margin-right: 10px;
  44. }
  45. p {
  46. color: #DCA550;
  47. flex: 1;
  48. margin: 0;
  49. padding: 0;
  50. }
  51. }
  52. </style>