vue3实现移动端背单词英语学习app的ui代码-html代码-BFW代码库

代码语言：html

代码描述：vue3实现移动端背单词英语学习app的ui代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>闪记单词</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
    <style>
        :root {
            --primary-color: #6a1b9a; /* 紫色主题 */
            --primary-color-light: #f3e5f5; /* 浅紫色，用于高亮背景 */
            --secondary-color: #fdd835; /* 黄色点缀 */
            --bg-color: #f4f5f7;
            --card-bg-color: #ffffff;
            --text-color: #333;
            --text-light-color: #888;
            --success-color: #4caf50;
            --error-color: #f44336;
        }
        html, body, #app { height: 100%; margin: 0; padding: 0; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--bg-color); }
        #app { display: flex; flex-direction: column; max-width: 600px; margin: 0 auto; background-color: var(--card-bg-color); box-shadow: 0 0 20px rgba(0,0,0,0.1); }
        
        main { flex-grow: 1; overflow-y: auto; padding-bottom: 80px; /* 增加底部空间给新导航栏 */ }
        .page-container { padding: 20px; }
        .page-title { font-size: 2em; font-weight: bold; margin-bottom: 20px; color: var(--primary-color); }

        .btn { display: inline-block; padding: 12px 24px; font-size: 1.1em; font-weight: bold; color: white; background-color: var(--primary-color); border: none; border-radius: 25px; cursor: pointer; text-align: center; transition: all 0.2s; text-decoration: none; }
        .btn:hover { opacity: 0.9; transform: translateY(-2px); }
        .btn-block { display: block; width: 100%; }
        .btn-secondary { background-color: var(--secondary-color); color: var(--text-color); }

        /* 首页 */
        .home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
        .stat-card { background: var(--bg-color); padding: 20px; text-align: center; border-radius: 12px; }
        .stat-card .value { font-size: 2em; font-weight: bold; color: var(--primary-color); }
        .stat-card .label { color: var(--text-light-color); }
        .start-button-wrapper { margin-top: 40px; }

        /* 学习会话页 */
        .study-page { display: flex; flex-direction: column; height: 100%; padding: 20px; box-sizing: border-box; }
        .progress-bar { width: 100%; height: 8px; background-color: #eee; border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
        .progress-bar-inner { height: 100%; width: 0%; background-color: var(--secondary-color); transition: width 0.3s; }
        .study-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .flashcard { perspective: 1000px; width: 90%; height: 250px; cursor: pointer; }
        .flashcard-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
        .flashcard.is-flipped .flashcard-inner { transform: rotateY(180deg); }
        .flashcard-face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; background: white; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; box-sizing: border-box; }
        .flashcard-back { transform: rotateY(180deg); }
        .word-text { font-size: 2.5em; font-weight: bold; text-align: center;}
        .word-phonetic { color: var(--text-light-color); margin-top: 10px; }
        .word-definition { font-size: 1.2em; text-align: center; }
        .study-actions { width: 100%; display: flex; gap: 15px; margin-top: 30px; }
        .mcq-options { display: flex; flex-direction: column; width: 100%; gap: 10px; }
        .mcq-option { background-color: white; border: 2px solid #eee; }
        .spelling-input { width: 100%; padding: 15px; font-size: 1.2em; text-align: center; border: 2px solid #eee; border-radius: 12px; margin-top: 20px; }
        .feedback-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 1001; }
        .feedback-overlay.correct { background-color: rgba(76, 175, 80, 0.8); }
        .feedback-overlay.incorrect { background-color: rgba(244, 67, 54, 0.8); }
        .feedback-text { color: white; font-size: 3em; font-weight: bold; }

        /* 词库选择页 */
        .list-card { background-color: white; padding: 20px; border-radius: 12px; margin-bottom: 15px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
        .list-card.active { border-color: var(--primary-color); }
        .list-card-title { font-size: 1.4em; font-weight: bold; color: var(--primary-color); }
        .list-card-meta { color: var(--text-light-color); margin-top: 10px; }

        /* --- 美化修改点 Start --- */
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 600px;
            margin: 0 auto;
            height: 70px;
            background-color: var(--card-bg-color);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1000;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* 增加顶部阴影 */
            border-top: 1px solid #eee;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            curs.........完整代码请登录后点击上方下载按钮下载查看