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

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

代码语言：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; backgroun.........完整代码请登录后点击上方下载按钮下载查看