wordIn/src/components/Home.vue

<template>
    <div id="ball"></div>
    <div class="container">
        <div id="main">
            <div id="title"> WordIn</div>
            <div class="colbox">
                <router-link to="/recite" class="button">
                    背诵
                </router-link>
                <router-link to="/manage" class="button">
                    编辑单词本
                </router-link>
            </div>
        </div>
    </div>
    <div id="setting">
        <box-icon class="btn" color="var(--text-color)" name='cog' @click="open_setting_dialog"></box-icon>
    </div>
    <el-dialog v-model="settingVisible" title="设置" width="75%">
        <div class="title">更换自定义背景</div>
        <div class="colbox" style="margin: 10px;">
            <el-input v-model="img_url"></el-input>
            <el-button type="primary" style="margin-left: 10px;" @click="set_bg">确定</el-button>
        </div>
        <div class="title">黑暗模式</div>
        <el-switch @change="toggleDark" v-model="isdark" size="large" active-text="Dark" inactive-text="Light" />
    </el-dialog>
</template>

<script>

export default {
    name: "HomePage",
    data() {
        return {
            img_url: "",
            settingVisible: false,
            isdark: false,
        }
    },
    methods: {
        set_bg() {
            localStorage.setItem("bgimg", this.img_url);
            window.location.reload();
        },
        open_setting_dialog() {
            this.settingVisible = true;
        },
        toggleDark() {
            if (this.isdark) {
                window.addHtmlclasses("dark");
            } else {
                window.delHtmlclasses("dark");
            }
        }
    },
    created() {
        if (document.getElementsByTagName("html")[0].className.indexOf("dark") != -1) {
            this.isdark = true;
        }
    }
}
</script>

<style scoped>
@media screen and (max-width: 500px) {
    #title {
        font-size: 80px;
        color: var(--text-color);
        text-shadow: #00000057 5px 5px 20px;
    }

    .title {
        font-weight: 800;
        color: var(--text-color);
        font-size: 15px;
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #main {
        margin: 10px;
        margin-top: 80px;
    }

    .colbox {
        flex-direction: column;
    }

    .button {
        margin-top: 30px;
    }
    #ball{
        width: 750px;
        height: 750px;
        top: -20%;
        right: -90%;
    }
}

@media screen and (min-width: 500px) {
    #title {
        font-size: 180px;
        color: var(--text-color);
        text-shadow: #00000057 5px 5px 20px;
    }

    .title {
        font-weight: 800;
        color: var(--text-color);
        font-size: 35px;
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #main {
        margin: 80px;
    }

    .button {
        margin: 30px;
    }
    #ball{
        width: 1350px;
        height: 1350px;
        top: -50%;
        right: -10%;
    }
}


#setting {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 20px;
}

.button {
    width: 200px;
    height: 100px;
    font-size: 25px;
    font-weight: 800;
    border-radius: 5px;
    border: solid 1px #FAFAFA;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    box-shadow: var(--el-box-shadow);
    background-color: rgba(255, 255, 255, 0.237);
    backdrop-filter: blur(20px);
    cursor: pointer;
    transition: .5s;
    color: var(--text-color);
    text-decoration: none;
}

html.dark .button {
    background-color: rgba(56, 56, 56, 0.301);
    border: solid 1px #848484;
    box-shadow: 0px 12px 32px 4px rgba(198, 198, 198, 0.078), 0px 8px 20px rgba(216, 216, 216, 0.171);
}

.button:hover {
    box-shadow: var(--el-box-shadow) inset #00000017 0px 500px;
}

#ball {
    background-image: linear-gradient(120deg, #e0c3fcca 0%, #8ec5fcc4 100%);
    border-radius: 100%;
    position: absolute;
    animation: enter .8s ease-out;
    box-shadow: #e0c3fcca 0px 0px 50px 10px;
    z-index: -1;
}

html.bgimged #ball {
    backdrop-filter: blur(20px);
}</style>