vue3实现自适应音乐模拟考试学习网站代码
代码语言:html
所属分类:布局界面
代码描述:vue3实现自适应音乐模拟考试学习网站代码,包含题目列表及筛选、错题集、支付、模拟考试。
代码标签: vue 自适应 音乐 模拟 考试 学习 网站 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Crescendo - 交互式学习平台</title> <!-- Vue 3 CDN --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script> <!-- Google Fonts for professional typography --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> /* --- 全局样式和设计系统 --- */ :root { --bg-main: #f7f9fb; --bg-panel: #ffffff; --color-primary: #1d3557; /* 深蓝 */ --color-accent: #457b9d; /* 蓝灰 */ --color-accent-light: #a8dadc; /* 浅青 */ --color-highlight: #e63946; /* 红色高亮 */ --color-success: #52b788; --text-heading: #1d3557; --text-body: #495057; --text-muted: #6c757d; --border-color: #e9ecef; --shadow-sm: 0 2px 4px rgba(0,0,0,0.04); --shadow-md: 0 5px 15px rgba(29, 53, 87, 0.08); --radius-md: 8px; --radius-lg: 16px; --transition-speed: 0.3s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', 'Noto Sans SC', sans-serif; background-color: var(--bg-main); color: var(--text-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- 页面过渡动画 --- */ .fade-enter-active, .fade-leave-active { transition: opacity 0.4s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* --- 核心布局 --- */ #app { min-height: 100vh; display: flex; flex-direction: column; } .app-header { background-color: var(--bg-panel); padding: 0 2rem; height: 70px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); z-index: 10; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--text-heading); cursor: pointer; } .main-container { flex-grow: 1; padding: 2.5rem 2rem; width: 100%; max-width: 1200px; margin: 0 auto; } /* --- 组件样式 --- */ .btn { padding: 0.8rem 1.5rem; border: none; border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all var(--transition-speed); text-decoration: none; display: inline-block; text-align: center; } .btn-primary { background-color: var(--color-accent); color: white; } .btn-primary:hover { background-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-secondary { background-color: var(--bg-main); color: var(--color-accent); border: 1px solid var(--border-color); } .btn-secondary:hover { background-color: var(--color-accent-light); color: var(--color-primary); } .btn-danger { background-color: var(--color-highlight); color: white; } .btn-danger:hover { background-color: #c12933; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-block { display: block; width: 100%; } .card { background-color: var(--bg-panel); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-md); width: 100%; } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-weight: 500; margin-bottom: 0.5rem; } .form-control { width: 100%; padding: 0.8rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background-color: var(--bg-main); transition: all var(--transition-speed); } .form-control:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); } .auth-container { display: flex; justify-content: center; align-items: center; padding: 4rem 1rem; } .auth-card { max-width: 450px; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0