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