You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.3 KiB
107 lines
2.3 KiB
<template>
|
|
<header class="title">
|
|
<div class="title-text" :style="fontSize">
|
|
<img
|
|
v-if="props.colorBgc"
|
|
src="@/assets/img/page/title-jn-left.png"
|
|
alt=""
|
|
class="title-text-img"
|
|
/>
|
|
<div v-if="props.colorBgc">{{ translate(props.titleKey) }}</div>
|
|
<img
|
|
v-if="props.colorBgc"
|
|
src="@/assets/img/page/title-jn-right.png"
|
|
alt=""
|
|
class="title-text-img"
|
|
/>
|
|
<img
|
|
v-if="!props.colorBgc"
|
|
src="@/assets/img/page/title-left.png"
|
|
alt=""
|
|
class="title-text-img"
|
|
/>
|
|
<div v-if="!props.colorBgc">{{ translate(props.titleKey) }}</div>
|
|
<img
|
|
v-if="!props.colorBgc"
|
|
src="@/assets/img/page/title-right.png"
|
|
alt=""
|
|
class="title-text-img"
|
|
/>
|
|
</div>
|
|
<div class="title-line">
|
|
<img src="@/assets/img/page/line.png" class="title-line-img" />
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useLanguage } from '@/utils/languageService'
|
|
import { defineProps, computed } from 'vue'
|
|
|
|
// 获取翻译函数和语言状态
|
|
const { translate, t } = useLanguage()
|
|
|
|
// 定义 props 接收传入的标题
|
|
const props = defineProps({
|
|
titleKey: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
colorBgc: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
// 定义 fontSize 的类型，并确保 computed 返回正确的类型
|
|
const fontSize = computed(() => {
|
|
if (t.value?.suoxie === 'en' || t.value?.suoxie === 'th') {
|
|
// 手机尺寸
|
|
if (window.innerWidth < 768) {
|
|
return { fontSize: '3vw' }
|
|
} else {
|
|
return { fontSize: '1.5vw' }
|
|
}
|
|
} else {
|
|
// 简体或者繁体
|
|
if (window.innerWidth < 768) {
|
|
return { fontSize: '3.5vw' }
|
|
} else {
|
|
return { fontSize: '1.5vw' }
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.title {
|
|
position: relative;
|
|
.title-text {
|
|
font-size: 3vw;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
color: white;
|
|
.title-text-img {
|
|
width: 10%;
|
|
}
|
|
}
|
|
.title-line {
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: -1vw;
|
|
left: 50%; /* 将左边距设置为 50% */
|
|
transform: translateX(-50%); /* 使用 transform 来将元素水平居中 */
|
|
width: 85%;
|
|
.title-line-img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.title-text-img {
|
|
width: 6% !important;
|
|
}
|
|
}
|
|
</style>
|