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>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
        :root {
            --primary-color: #ff7043; /* 活泼的橙色 */
            --secondary-color: #4dd0e1; /* 清新的青色 */
            --bg-color: #fffde7; /* 温暖的米黄色背景 */
            --text-color: #5d4037; /* 深棕色文字 */
            --font-family: 'ZCOOL KuaiLe', cursive, -apple-system, sans-serif;
        }
        html, body, #app { height: 100%; margin: 0; padding: 0; overflow: hidden; }
        body { font-family: var(--font-family); background-color: var(--bg-color); }
        #app { display: flex; flex-direction: column; max-width: 600px; margin: 0 auto;  position: relative; }
        #app::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 253, 231, 0.7); }
        
        /* 全局组件 */
        .page-container { position: relative; z-index: 1; height: 100%; overflow-y: auto; padding: 20px; box-sizing: border-box; }
        .page-title { font-size: 2.5em; text-align: center; color: var(--primary-color); text-shadow: 2px 2px 0 white; margin-bottom: 20px; }
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-size: 1.2em; font-family: var(--font-family); color: white; background-color: var(--primary-color); border: none; border-radius: 20px; box-shadow: 0 4px 0 #d84315; cursor: pointer; transition: all 0.1s; text-decoration: none; }
        .btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #d84315; }
        .btn-secondary { background-color: var(--secondary-color); box-shadow: 0 4px 0 #00838f; }
        .back-btn { position: absolute; top: 20px; left: 20px; font-size: 2em; color: var(--primary-color); text-decoration: none; z-index: 10; }
        
        /* 首页 - 诗词画卷 */
        .poem-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px; }
        .poem-card { background-color: white; border-radius: 15px; padding: 15px; text-align: center; cursor: pointer; border: 3px solid #ffd180; transition: transform 0.2s; position: relative; }
        .poem-card:hover { transform: scale(1.05); }
        .poem-card.locked { filter: grayscale(1); opacity: 0.7; }
        .poem-card-title { font-size: 1.4em; color: var(--text-color); }
        .poem-card-author { font-size: 1em; color: #aaa; }
        .star-icon { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; }
        .total-stars { text-align: center; font-size: 1.5em; margin-bottom: 20px; background-color: rgba(255,255,255,0.7); padding: 5px; border-radius: 10px; }

        /* 学习页 */
        .study-page-content { text-align: center; }
        .poem-illustration { width: 100%; height: 200px; border-radius: 15px; background-size: cover; background-position: center; margin-bottom: 20px; border: 5px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .poem-text-container { background-color: rgba(255,255,255,0.8); padding: 20px; border-radius: 15px; }
        .poem-line { font-size: 1.8em; margin: 10px 0; letter-spacing: 5px; }
        .pinyin { font-size: 0.6em; color: var(--text-light-color); }
        .keyword { color: var(--primary-color); text-decoration: underline; cursor: pointer; }
        .study-toolbar { display: flex; justify-content: center; gap: 15px; margin-top: 20px; flex-wrap: wrap; }
        .modal-overlay { position: fixed; .........完整代码请登录后点击上方下载按钮下载查看