smsb-web-develop/src/views/bigscreen/core/widget/WidgetViewer.vue

<template>
  <component
    :is="widgetType"
    class="c-widget"
    :class="{ more }"
    :style="styles"
    :node="node"
  />
</template>

<script>
import CText from './CText.vue'
import CMarquee from './CMarquee.vue'
import CImage from './CImage.vue'
import CVideo from './CVideo.vue'
import CTime from './CTime.vue'
import CWeather from './CWeather.vue'
import CWeb from './CWeb.vue'
import CLive from './CLive.vue'

export default {
  name: 'Widget',
  components: {
    CText,
    CMarquee,
    CImage,
    CVideo,
    CTime,
    CWeather,
    CWeb,
    CLive
  },
  props: {
    node: {
      type: Object,
      default: null
    }
  },
  computed: {
    more () {
      return this.node.sources?.length > 0
    },
    widgetType () {
      return this.node.type
    },
    styles () {
      const { top, left } = this.node
      return {
        top: `${top}px`,
        left: `${left}px`
      }
    }
  }
}
</script>

<style scoped lang="scss">
.c-widget {
  position: absolute !important;
  user-select: none;

  &.more {
    cursor: pointer;

    &:hover {
      outline: 2px dashed $gray;
    }
  }
}
</style>