perf: use picture thumbnails in program editing

src/views/bigscreen/core/base.js

@@ -5,7 +5,10 @@ import {
   getProgram,
   updateProgram
 } from '@/api/program'
-import { getAssetUrl } from '@/api/asset'
+import {
+  getAssetUrl,
+  getThumbnailUrl
+} from '@/api/asset'
 import {
   create,
   fix,
@@ -45,7 +48,7 @@ export default {
           width: `${width}px`,
           height: `${height}px`,
           'background-color': backgroundColor,
-          'background-image': backgroundImage[0] ? `url("${getAssetUrl(backgroundImage[0].keyName)}")` : 'none'
+          'background-image': backgroundImage[0] ? `url("${getThumbnailUrl(backgroundImage[0].keyName)}")` : 'none'
         }
       }
       return {}

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

@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import { getAssetUrl } from '@/api/asset'
+import { getThumbnailUrl } from '@/api/asset'
 
 export default {
   name: 'CImage',
@@ -92,7 +92,7 @@ export default {
         height: `${height}px`,
         'font-size': `${Math.min(width, height) / 3 | 0}px`,
         'border-radius': `${radius}px`,
-        'background-image': !this.isEmpty && this.isNormal ? `url(${getAssetUrl(this.url)})` : 'none'
+        'background-image': !this.isEmpty && this.isNormal ? `url(${getThumbnailUrl(this.url)})` : 'none'
       }
     },
     className () {
@@ -110,17 +110,17 @@ export default {
     },
     slideStyles () {
       return {
-        'background-image': this.url ? `url(${getAssetUrl(this.url)})` : 'none'
+        'background-image': this.url ? `url(${getThumbnailUrl(this.url)})` : 'none'
       }
     },
     flipFrontStyles () {
       return {
-        'background-image': this.frontUrl ? `url(${getAssetUrl(this.frontUrl)})` : 'none'
+        'background-image': this.frontUrl ? `url(${getThumbnailUrl(this.frontUrl)})` : 'none'
       }
     },
     flipBackStyles () {
       return {
-        'background-image': this.backUrl ? `url(${getAssetUrl(this.backUrl)})` : 'none'
+        'background-image': this.backUrl ? `url(${getThumbnailUrl(this.backUrl)})` : 'none'
       }
     },
     isNormal () {
@@ -245,7 +245,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .c-image {
   position: relative;
   display: inline-block;
@@ -255,10 +254,10 @@ export default {
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    background-color: rgba(255, 255, 255, .8);
+    background-color: rgba(255, 255, 255, 0.8);
 
     &::before {
-      content: '\e612';
+      content: "\e612";
       font-size: inherit;
     }
   }
@@ -279,7 +278,7 @@ export default {
       position: absolute;
       width: 100%;
       height: 100%;
-      transition: transform .3s;
+      transition: transform 0.3s;
     }
   }
 
@@ -297,7 +296,8 @@ export default {
         transform: rotateY(180deg);
       }
 
-      .front, .back {
+      .front,
+      .back {
         position: absolute;
         top: 0;
         left: 0;