wordIn/src/views/HomeView.vue

<template>
    <div class="home-view-container">
        <DynamicBackground class="home-view-header">
            <template #content>
                <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.03 beta1 <br /> 更新时间:2025年3月7日 12:03</div>
                    </div>
                    <div class="colbox card home-view-option-wrapper">
                        <router-link to="/select" class="button">
                            开始新背诵
                        </router-link>
                        <router-link to="/manage" class="button">
                            查看单词本
                        </router-link>
                    </div>
                </div>
            </template>
        </DynamicBackground>
        <div class="wrapper home-view-history">
            <div class="home-view-history-title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div>
            <div class="home-view-history-item" v-for="(history, index) in store.history._content" :key="index">
                <div class="card colbox" >
                <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>
    <div id="setting">
        <v-icon class="btn" @click="open_setting_dialog">mdi-cog</v-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>
    </el-dialog>
</template>

<script setup lang="ts">
import { useMainStore } from '@/store';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import DynamicBackground from '@/components/DynamicBackground.vue';
import animejs from 'animejs';

const store = useMainStore();
const router = useRouter();
const img_url = ref("");
const settingVisible = ref(false);

const set_bg = (): void => {
    localStorage.setItem("bgimg", img_url.value);
    window.location.reload();
};

const open_setting_dialog = (): void => {
    settingVisible.value = true;
};

const restart = (index: number): void => {
    router.push({
        path: "./recite",
        query: { index }
    });
};

onMounted(()=>{
    animejs({
        targets:".home-view-header",
        translateY: [-50,0],
        opacity: [0,1],
    })
    animejs({
        targets:".home-view-history-title,.home-view-history-item",
        translateX: [50,0],
        opacity: [0,1],
        delay: animejs.stagger(50),
    })
})

</script>

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

    .home-view-history-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) {
    .home-view-container{
     display: flex;
     flex-direction: column;   
    }
    #title {
        font-size: 100px;
        color: var(--text-color);
        text-shadow: #00000057 5px 5px 20px;
        line-height: 100px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .home-view-history-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%;
    }
}

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

#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;
}
</style>

<style>
.home-view-history {
    width: 100%;
    padding: 20px;
    padding-top: 10px;
    box-sizing: border-box;
    flex-grow: 1;
    overflow: hidden;
}

.home-view-container{
    height: calc(100% - 65px); 
    align-items: center;
    width: 100%;
    overflow: auto;
}

.home-view-option-wrapper{
    flex-grow: 1;
    align-items: center;
    justify-content: center;

    background-color: var(--bg-color-acrylic);
}
</style>