chore: 我的对话预览

src/views/dialogue-detail/components/horizontal-screen-preview-content.vue

@@ -37,7 +37,9 @@ async function handleGetInfoByFigureId(figureId: string) {
 </script>
 
 <template>
-  <div class="relative h-[calc(100%-190px)] w-[calc(100%-32px)] overflow-hidden rounded-2xl bg-white">
+  <div
+    class="relative mx-4 my-[45px] aspect-[16/9] h-full overflow-hidden rounded-2xl bg-white xl:my-[60px] 2xl:my-[85px]"
+  >
     <div
       v-if="isEmptyPreview"
       class="flex h-full w-full select-none items-center justify-center text-xs text-[#84868c]"
@@ -52,8 +54,11 @@ async function handleGetInfoByFigureId(figureId: string) {
       class="absolute left-0 top-0 h-full w-full object-cover"
     />
 
-    <div class="absolute bottom-0 right-[5%] w-[320px]">
-      <img v-show="figureImageUrl" :src="figureImageUrl" alt="數字人" class="h-full w-full" />
-    </div>
+    <img
+      v-show="figureImageUrl"
+      :src="figureImageUrl"
+      alt="數字人"
+      class="absolute bottom-0 right-[10%] aspect-[9/16] h-[80%] object-cover"
+    />
   </div>
 </template>

src/views/dialogue-detail/components/vertical-screen-preview-content.vue

@@ -11,14 +11,6 @@ const figureId = computed(() => {
   return digitalHumanDialogueStore.humanInfo.figureId
 })
 
-watch(
-  () => figureId.value,
-  (newValue) => {
-    newValue && handleGetInfoByFigureId(newValue)
-  },
-  { immediate: true },
-)
-
 const backgroundImageUrl = computed(() => {
   return digitalHumanDialogueStore.backgroundInfo.backgroundUrl
 })
@@ -27,6 +19,14 @@ const isEmptyPreview = computed(() => {
   return !figureImageUrl.value && !backgroundImageUrl.value
 })
 
+watch(
+  () => figureId.value,
+  (newValue) => {
+    newValue && handleGetInfoByFigureId(newValue)
+  },
+  { immediate: true },
+)
+
 async function handleGetInfoByFigureId(figureId: string) {
   const res = await fetchGetInfoByFigureId<{ imageUrl: string }>(figureId)
 
@@ -37,7 +37,7 @@ async function handleGetInfoByFigureId(figureId: string) {
 </script>
 
 <template>
-  <div class="relative h-[667px] w-[375px] overflow-hidden rounded-2xl bg-white">
+  <div class="relative aspect-[9/16] h-full overflow-hidden rounded-2xl bg-white xl:my-[50px] 2xl:my-[100px]">
     <div
       v-if="isEmptyPreview"
       class="flex h-full w-full select-none items-center justify-center text-xs text-[#84868c]"
@@ -56,7 +56,7 @@ async function handleGetInfoByFigureId(figureId: string) {
       v-show="figureImageUrl"
       :src="figureImageUrl"
       alt="數字人"
-      class="absolute bottom-0 left-[25px] h-[574px] w-[324px] object-cover"
+      class="absolute bottom-0 left-[10%] aspect-[9/16] h-[80%] object-cover"
     />
   </div>
 </template>