refactor: some styles

src/views/bigscreen/Program.vue

@@ -96,13 +96,12 @@ export default {
 
   &__body {
     position: relative;
-    padding-top: 60%;
+    padding-top: 56.25%;
     color: #fff;
     font-size: 16px;
     border-radius: $radius $radius 0 0;
     background: rgba(0, 0, 0, 0.8) url("~@/assets/program_bg.png") center center /
       100% 100% no-repeat;
-    overflow: hidden;
   }
 
   &__ratio {

src/views/device/timeline/index.vue

@@ -337,7 +337,10 @@ export default {
         img () {
           EventCache.getImage(this.target.type, this.target.id).then(img => {
             if (img) {
-              this.style = { backgroundImage: `url("${img}")` }
+              this.style = {
+                backgroundSize: 'contain',
+                backgroundImage: `url("${img}")`
+              }
             }
           })
         }
@@ -500,12 +503,9 @@ export default {
 
 <style lang="scss" scoped>
 .c-device-detail {
-  height: 200px;
-
   &__screen {
     width: 354px;
     margin-right: 24px;
-    border-radius: $radius--mini;
   }
 
   &__name {
@@ -593,7 +593,7 @@ export default {
 
   &__programs {
     box-sizing: content-box;
-    height: 48px;
+    height: 54px;
 
     & + & {
       border-top: 1px dashed $border;
@@ -681,10 +681,8 @@ export default {
   }
 
   &__img {
-    width: 84px;
-    height: 48px;
+    width: 96px;
     margin-right: 8px;
-    border-radius: $radius--mini;
   }
 
   &__name {
@@ -719,6 +717,15 @@ export default {
 }
 
 .o-program {
-  background: url("~@/assets/program_bg.png") 0 0 / 100% 100% no-repeat;
+  display: inline-block;
+  border-radius: $radius--mini;
+  background: rgba(#000, 0.8) url("~@/assets/program_bg.png") center center /
+    100% 100% no-repeat;
+
+  &::before {
+    content: "";
+    display: inline-block;
+    padding-top: 56.25%;
+  }
 }
 </style>