<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>
    .pageMain {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;

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

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

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

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

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

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

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

                @media (max-width:520px) {
                    margin-top: 50px;
                    width: 60%;
                }

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

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

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

                &__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;

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