AIxiaocaishen/src/views/smallTitle.vue

<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>