wordIn/src/components/Home.vue

<template>
    <div class="container rowbox" style="height: calc(100% - 65px); align-items: center;width: 100%;overflow: auto;">
        <div class="colbox" style="width: 95%;margin-top: 10px;">
            <div style="flex-grow: 2;margin:30px;" class="rowbox">
                <div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
                <div id="title">wordIn</div>
                <div>当前版本: 1.01 Patch 1 <br/> 更新时间:2024年1月11日 5:07 PM</div>
            </div>
            <div style="flex-grow: 1;align-items: center;" class="colbox card">
                <router-link to="/select" class="button">
                    开始新背诵
                </router-link>
                <router-link to="/manage" class="button">
                    查看单词本
                </router-link>
            </div>
        </div>
        <div id="history" class="wrapper">
            <div class="title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div>
            <div class="card colbox history-item" v-for="(history, index) in $store.state.history._content" :key="index">
                <div style="width: 25px;">{{ index + 1 }}</div>
                <div style="width: 200px;">背诵进度: {{ history.current }}/{{ history.total || "Unknown" }}</div>
                <div style="flex-grow: 1;"> {{ (new Date(history.modified)) }}</div>
                <el-button @click="restart(index)">继续</el-button>
            </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");
            }
        },
        restart(index){
            this.$router.push({
                path: "./recite",
                query: { index}
            })
        }
    },
    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;
    }

    .container {
        overflow: hidden;
    }
}

@media screen and (min-width: 500px) {
    #title {
        font-size: 100px;
        color: var(--text-color);
        text-shadow: #00000057 5px 5px 20px;
        line-height: 100px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .title {
        font-weight: 600;
        color: var(--text-color);
        font-size: 35px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #main {
        margin: 80px;
    }

    .button {
        margin: 30px;
    }

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

#history{
    width: calc(95% - 20px);
    flex-grow: 1;
}

.wrapper {
    border: 1px solid var(--bd-color);
    border-radius: 5px;
    margin-top: 10px;
}

.history-item {
    margin: 20px;
    padding: 15px;
}

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