132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
<template>
|
|
<div ref="modalContainer"></div>
|
|
<a-modal
|
|
class="tips-modal generalModel"
|
|
v-model:visible="showModal"
|
|
:footer="null"
|
|
:get-container="() => $refs.modalContainer"
|
|
width="78%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
wrapClassName="#app"
|
|
:keyboard="false"
|
|
>
|
|
<div class="generalModel_btn">
|
|
<div class="generalModel_closeIcon" @click.stop="handleClose()">
|
|
<svg
|
|
width="100%"
|
|
height="100%"
|
|
viewBox="0 0 46 46"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3" />
|
|
<rect
|
|
x="32.5063"
|
|
y="12"
|
|
width="3"
|
|
height="29"
|
|
rx="1.5"
|
|
transform="rotate(45 32.5063 12)"
|
|
fill="white"
|
|
/>
|
|
<rect
|
|
x="34.6274"
|
|
y="32.5059"
|
|
width="3"
|
|
height="29"
|
|
rx="1.5"
|
|
transform="rotate(135 34.6274 32.5059)"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="title-container">
|
|
<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')
|
|
const showModal = defineModel<boolean>('showModal', { required: true })
|
|
|
|
const handleClose = () => {
|
|
showModal.value = false
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tips-modal {
|
|
.title-container {
|
|
.title {
|
|
font-size: 3.5rem;
|
|
color: #181818;
|
|
}
|
|
.sub-title {
|
|
font-size: 2rem;
|
|
font-weight: 400;
|
|
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>
|