fix(callbox): video height (#1211)

* fix(callbox): video height * fix issue
dialpad · Sep 26, 2023 · ceaf1f4 · ceaf1f4
1 parent 342a793
commit ceaf1f4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/recipes/leftbar/callbox/callbox.vue b/recipes/leftbar/callbox/callbox.vue
@@ -195,16 +195,10 @@ export default {
   border-radius: var(--dt-size-radius-300);
 
   &--video {
+    display: flex;
     border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
     overflow: clip;
-    height: calc(var(--dt-size-760) + var(--dt-size-650));
-    margin-bottom: var(--dt-size-300-negative);
-
-    :deep(img) {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
+    margin-bottom: var(--dt-space-300-negative);
   }
 
   &--main-content {

diff --git a/recipes/leftbar/callbox/callbox_variants.story.vue b/recipes/leftbar/callbox/callbox_variants.story.vue
@@ -93,6 +93,7 @@
         <img
           src="/common/assets/chatting-person-example.png"
           alt="person avatar"
+          class="callbox-image"
         >
       </template>
       <template #subtitle>
@@ -413,3 +414,11 @@ export default {
   components: { DtItemLayout, DtIcon, DtButton, DtRecipeCallbox },
 };
 </script>
+
+<style lang="less" scoped>
+.callbox-image {
+  height: 140px;
+  object-fit: cover;
+  width: 100%;
+}
+</style>