feat: web page preview

src/views/bigscreen/core/widget/CWeb.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="c-web" :style="styles">
+  <div
+    class="c-web"
+    :style="styles"
+  >
     <i class="c-web__icon iconfont iconchaolianjie" />
   </div>
 </template>

src/views/bigscreen/core/widget/CWebViewer.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="c-web"
+    :style="styles"
+  >
+    <iframe
+      v-if="isValid"
+      class="c-web__iframe"
+      :src="node.href"
+    />
+    <i
+      v-else
+      class="c-web__icon iconfont iconchaolianjie"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CWebViewer',
+  props: {
+    node: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    styles () {
+      const {
+        width,
+        height
+      } = this.node
+      return {
+        width: `${width}px`,
+        height: `${height}px`,
+        'font-size': this.isValid ? 'initial' : `${Math.min(width, height) / 3 | 0}px`
+      }
+    },
+    isValid () {
+      return !!this.node.href
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.c-web {
+  position: relative;
+
+  &__iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+
+  &__icon {
+    font-size: inherit;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9;
+  }
+}
+</style>

src/views/bigscreen/core/widget/WidgetViewer.vue

@@ -15,7 +15,7 @@ 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 CWeb from './CWebViewer.vue'
 
 export default {
   name: 'Widget',
@@ -42,12 +42,10 @@ export default {
       return this.node.type
     },
     styles () {
-      const { top, left, width, height } = this.node
+      const { top, left } = this.node
       return {
         top: `${top}px`,
-        left: `${left}px`,
-        width: `${width}px`,
-        height: `${height}px`
+        left: `${left}px`
       }
     }
   }