feat: 弹窗&prompt i18n

src/component/home/tools/poseTransfer/Tips.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="modalContainer"></div>
   <a-modal
-    class="prompt-modal generalModel"
+    class="tips-modal generalModel"
     v-model:visible="showModal"
     :footer="null"
     :get-container="() => $refs.modalContainer"
@@ -44,17 +44,36 @@
       </div>
     </div>
     <div class="title-container">
-      <div class="title">{{ $t('ProductImg.PromptAssit') }}</div>
-      <div class="sub-title">{{ $t('ProductImg.AssitSubTitle') }}</div>
+      <div class="title">{{ $t('poseTransfer.Tips') }}</div>
+      <div class="sub-title">
+        {{ $t('poseTransfer.TipsStart') }}
+        <i class="fi fi-ss-box-open" />
+        {{ $t('poseTransfer.TipsEnd') }}
+      </div>
+    </div>
+    <div class="diliver" />
+    <div class="content">
+      <div class="frame-item">
+        <img class="tips-frame" :src="firstFrame" />
+        <div class="frame-name">{{ $t('poseTransfer.FirstFrame') }}</div>
+      </div>
+      <img :src="add" class="add" />
+      <div class="frame-item">
+        <img class="tips-frame" :src="lastFrame" />
+        <div class="frame-name">{{ $t('poseTransfer.LastFrame') }}</div>
+      </div>
     </div>
   </a-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, useTemplateRef } from 'vue'
-
 import { downloadIamge } from '@/tool/util'
 import { useI18n } from 'vue-i18n'
+import firstFrame from '@/assets/images/product/first_frame.png'
+import add from '@/assets/images/product/add.png'
+import lastFrame from '@/assets/images/product/last_frame.png'
+
 const { t, locale } = useI18n()
 
 const modalContainer = useTemplateRef('modalContainer')
@@ -66,7 +85,7 @@ const handleClose = () => {
 </script>
 
 <style lang="less" scoped>
-.prompt-modal {
+.tips-modal {
   .title-container {
     .title {
       font-size: 3.5rem;
@@ -78,5 +97,35 @@ const handleClose = () => {
       color: #000;
     }
   }
+  .diliver {
+    height: 1px;
+    background: #dfdfdf;
+    margin: 4rem 0;
+  }
+  .content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    column-gap: 4.8rem;
+    .add {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+    .frame-item {
+      text-align: center;
+      .tips-frame {
+        width: 21.3rem;
+        height: 36.1rem;
+      }
+      .frame-name{
+        margin-top: 1.2rem;
+        font-size: 2.6rem;
+        font-weight: 400;
+      }
+    }
+  }
+}
+:deep(.generalModel .ant-modal-body) {
+  padding: 4rem 11rem 4rem 14rem;
 }
 </style>