173 lines
3.3 KiB
Vue
173 lines
3.3 KiB
Vue
<template>
|
|
<div style="position: relative; width: 100%">
|
|
<img :src="bgUrl" alt="" width="100%" style="display: block" class="flipImg" />
|
|
<div class="status">
|
|
<div
|
|
style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
|
|
>
|
|
<div style="color: #fff; font-weight: 600" :style="{ fontSize }">
|
|
{{ getTypeText(type) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="position: absolute; inset: 0; padding: 3% 4%">
|
|
<div
|
|
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around"
|
|
>
|
|
<slot name="content"></slot>
|
|
</div>
|
|
<div v-if="type == 'Completed'" class="moreBt" @click="btMore">{{ t('more') }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { setDocumentDirection } from '@/locales/i18n'
|
|
|
|
const { t, locale } = useI18n()
|
|
|
|
// 监听语言变化并设置文档方向
|
|
locale.value && setDocumentDirection(locale.value)
|
|
|
|
const progress = new URL('@/assets/images/Azizi/BDCenter/progress.png', import.meta.url).href
|
|
const completed = new URL('@/assets/images/Azizi/BDCenter/completed.png', import.meta.url).href
|
|
const progressLong = new URL('@/assets/images/Azizi/BDCenter/progressLong.png', import.meta.url)
|
|
.href
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
long: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
|
|
date: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const bgUrl = computed(() => {
|
|
if (props.type == 'In Progress' && props.long) {
|
|
return progressLong
|
|
} else if (props.type == 'In Progress') {
|
|
return progress
|
|
} else if (props.type == 'Completed') {
|
|
return completed
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['showMore'])
|
|
const btMore = () => {
|
|
emit('showMore')
|
|
}
|
|
|
|
const backgroundImage = ref('')
|
|
const fontSize = ref('')
|
|
|
|
watch(
|
|
() => props.type,
|
|
(newType) => {
|
|
if (newType == 'In Progress') {
|
|
fontSize.value = '0.9em'
|
|
}
|
|
if (newType == 'Completed') {
|
|
fontSize.value = '1em'
|
|
}
|
|
return
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
// 根据状态文本返回翻译后的文本
|
|
const getTypeText = (type) => {
|
|
console.log('type:', type)
|
|
|
|
switch (type) {
|
|
case 'In Progress':
|
|
return t('in_progress')
|
|
case 'Completed':
|
|
return t('completed')
|
|
case 'Out of account':
|
|
return t('out_of_account')
|
|
case 'Pending':
|
|
return t('pending')
|
|
default:
|
|
return type
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
color: rgba(0, 0, 0, 0.8);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.contentTime {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.contentText {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.moreBt {
|
|
font-size: 1em;
|
|
position: absolute;
|
|
top: 40%;
|
|
right: 4%;
|
|
color: #bb92ff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status {
|
|
width: 48%;
|
|
height: 40%;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 3%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
[dir='rtl'] .status {
|
|
right: auto;
|
|
left: 3%;
|
|
}
|
|
|
|
[dir='rtl'] .flipImg {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
[dir='rtl'] .moreBt {
|
|
right: auto;
|
|
left: 4%;
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
* {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 360px) {
|
|
* {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
* {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
</style>
|