<script setup>
    import {
        useI18n
    } from "#imports";
    const {
        t
    } = useI18n();
    useHead({
        title: '404'
    })
</script>

<template>
    <div>
        <div class="pageMain">
            <div class="pageMain__content">
                <div class="pageMain__content__left">
                    <img class="pageMain__content__left__avater" loading="lazy" decoding="async"
                        src="/static/error/404_icon.webp" />
                </div>
                <div class="pageMain__content__right">
                    <h2 class="pageMain__content__right__content">
                        <p class="pageMain__content__right__content__text">{{t('page.404-content')}}</p>
                    </h2>
                    <a class="pageMain__content__right__btn" href="/">{{t('page.404-button')}}</a>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
	/* 响应式断点系统 */
	$breakpoint-xs: 375px;
	$breakpoint-sm: 480px;
	$breakpoint-md: 768px;
	$breakpoint-lg: 1024px;
	$breakpoint-xl: 1440px;
	$breakpoint-2xl: 1920px;
	$breakpoint-4k: 2560px;

	.pageMain {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;

		@media (max-width: 850px) {
			height: 100vh;
			padding: 20px;
		}

		@media (max-width: $breakpoint-sm) {
			padding: 15px;
		}

		@media (max-width: $breakpoint-xs) {
			padding: 10px;
		}

		&__content {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			@media (max-width: 850px) {
				flex-direction: column;
				justify-content: center;
				text-align: center;
			}

			@media (max-width: $breakpoint-sm) {
				gap: 20px;
			}

			@media (max-width: $breakpoint-xs) {
				gap: 15px;
			}

			&__left {
				&__avater {
					width: 520px;
					height: 370px;

					@media (min-width: $breakpoint-4k) {
						width: 800px;
						height: 570px;
					}

					@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
						width: 650px;
						height: 460px;
					}

					@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
						width: 600px;
						height: 425px;
					}

					@media (min-width: 1920px) {
						width: 5.2rem;
						height: 3.7rem;
					}

					@media (max-width: 850px) {
						width: 80%;
						display: block;
						margin: 0 auto;
						height: auto;
					}

					@media (max-width: $breakpoint-sm) {
						width: 85%;
					}

					@media (max-width: $breakpoint-xs) {
						width: 90%;
					}
				}
			}

			&__right {
				width: 300px;
				color: #272727;

				@media (min-width: $breakpoint-4k) {
					width: 450px;
				}

				@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
					width: 400px;
				}

				@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
					width: 350px;
				}

				@media (min-width: 1920px) {
					width: 3rem;
				}

				@media (max-width: 850px) {
					width: 80%;
					margin-top: 30px;
				}

				@media (max-width: $breakpoint-sm) {
					width: 85%;
					margin-top: 25px;
				}

				@media (max-width: 520px) {
					margin-top: 0; // 移除这里的50px，避免重复间距
					width: 60%;
				}

				@media (max-width: $breakpoint-xs) {
					width: 90%;
					margin-top: 20px;
				}

				&__content {
					&__text {
						font-size: 23px;
						font-family: MiSans-Regular;
						line-height: 1.8;
						color: #636363;

						@media (min-width: $breakpoint-4k) {
							font-size: 32px;
							line-height: 1.6;
						}

						@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
							font-size: 28px;
							line-height: 1.7;
						}

						@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
							font-size: 26px;
						}

						@media (min-width: 1920px) {
							font-size: 0.23rem;
						}

						@media (max-width: 850px) {
							font-size: 20px;
							line-height: 1.6;
						}

						@media (max-width: 520px) {
							font-size: 18px;
						}

						@media (max-width: $breakpoint-sm) {
							font-size: 16px;
							line-height: 1.5;
						}

						@media (max-width: $breakpoint-xs) {
							font-size: 15px;
							line-height: 1.4;
						}
					}
				}

				&__btn {
					width: fit-content;
					padding: 0 10px;
					margin-top: 20px;
					background: #03060b;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #f7f7f7;
					font-size: 15px;
					line-height: 2;
					font-family: MiSans-Medium;
					text-decoration: none;
					border-radius: 4px;
					transition: all 0.3s ease;

					@media (min-width: $breakpoint-4k) {
						padding: 0 20px;
						margin-top: 30px;
						font-size: 20px;
						line-height: 2.5;
						border-radius: 6px;
					}

					@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
						padding: 0 18px;
						margin-top: 28px;
						font-size: 18px;
						line-height: 2.3;
					}

					@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
						padding: 0 16px;
						margin-top: 25px;
						font-size: 17px;
						line-height: 2.2;
					}

					@media (min-width: 1920px) {
						margin-top: 0.2rem;
						font-size: 0.12rem;
						padding: 0 0.1rem;
						border-radius: 0.06rem;
					}

					@media (max-width: 850px) {
						margin: 20px auto 0;
						padding: 8px 16px;
						font-size: 14px;
					}

					@media (max-width: $breakpoint-sm) {
						margin: 18px auto 0;
						padding: 6px 14px;
						font-size: 13px;
						line-height: 1.8;
					}

					@media (max-width: $breakpoint-xs) {
						margin: 15px auto 0;
						padding: 5px 12px;
						font-size: 12px;
						line-height: 1.7;
					}

					&:hover {
						background: #1a1a1a;
						transform: translateY(-2px);
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
					}
				}
			}
		}
	}
</style>