div+css实现完整的手机在线音乐考试系统网站app的ui页面原型图代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现完整的手机在线音乐考试系统网站app的ui页面原型图代码
代码标签： div css 完整手机在线音乐考试系统网站 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,viewport-fit=cover" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css">
  <style>
    :root{
      --bg: #f6f7fb;
      --canvas-bg: #ffffff;
      --panel: #ffffff;
      --border: #e8e8ef;
      --muted: #8c8fa1;
      --text: #222433;
      --primary: #6c5ce7;
      --primary-2: #4f46e5;
      --accent: #00d4ff;
      --success: #22c55e;
      --warning: #f59e0b;
      --danger: #ef4444;
      --shadow: 0 8px 30px rgba(23,31,54,.08);
      --radius: 16px;
      --phone-radius: 24px;
      --gap: 40px;
    }
    *{box-sizing: border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 1px 1px, rgba(76,81,191,.18) 1px, transparent 2px) 0 0/24px 24px,
        linear-gradient(180deg, #f8f9ff 0%, #eef1ff 100%);
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC","Hiragino Sans GB","Microsoft YaHei", Arial, "Noto Sans CJK SC", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    /* Viewport + Canvas */
    #viewport{
      position:fixed; inset:0;
      overflow:hidden;
      cursor:default;
      user-select:none;
    }
    #viewport.space{ cursor:grab; }
    #viewport.panning{ cursor:grabbing; }
    #canvas{
      position:absolute; left:0; top:0;
      transform-origin: 0 0;
      will-change: transform;
      display:grid;
      grid-template-columns: repeat(4, 440px);
      grid-auto-rows: auto;
      gap: var(--gap);
      padding: 60px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.7));
      border-radius: 24px;
      box-shadow: 0 10px 50px rgba(38,45,73,.08);
    }

    /* HUD (zoom controls) */
    .hud{
      position:fixed; z-index:10;
      left:16px; right:16px; top:12px;
      display:flex; align-items:center; justify-content:space-between;
      pointer-events:none;
    }
    .hud .brand{
      pointer-events:auto;
      display:flex; align-items:center; gap:10px;
      padding:8px 12px; border-radius:14px;
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(0,0,0,.06);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
      font-weight:700; color:#2b2d42;
    }
    .hud .brand .tag{
      font-size:12px; color:#5a5f7c; font-weight:600; padding:3px 8px; border-radius:999px;
      background: #f1f3ff; border:1px solid #e7e9ff;
    }
    .hud .zoom{
      pointer-events:auto;
      display:flex; gap:8px; align-items:center;
      background: rgba(255,255,255,.85);
      border: 1px solid rgba(0,0,0,.06);
      padding:6px; border-radius:14px; box-shadow: var(--shadow);
    }
    .hud .zoom button{
      appearance:none; border:0; outline:0; cursor:pointer;
      background:#fff; border:1px solid var(--border);
      width:36px; height:36px; border-radius:10px;
      display:grid; place-items:center; color:#374151;
    }
    .hud .zoom button:hover{ background:#f7f8ff }
    .hud .zoom .label{
      padding:0 10px; font-weight:700; color:#2b2d42;
      min-width:58px; text-align:center;
    }

    /* Module container */
    .module{
      position:relative;
      width: 440px;
      background: var(--panel);
      border:1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 24px 28px;
      box-shadow: var(--shadow);
    }
    .module-title{
      position:absolute; top:-14px; left:18px;
      background: linear-gradient(135deg, var(--primary), #7c67ff);
      color:white; font-weight:700; font-size:14px;
      padding:6px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
      box-shadow: 0 6px 20px rgba(108,92,231,.3);
    }
    .module .desc{ color:var(--muted); font-size:12px; margin-top:6px }

    /* Phone shell */
    .phone{
      width: 380px; height: 760px; margin: 0 auto;
      background: #fff; border: 1px solid #ececf4; border-radius: var(--phone-radius);
      overflow:hidden; display:flex; flex-direction:column;
      box-shadow: 0 16px 40px rgba(29,37,69,.12);
    }
    .statusbar{
      height: 18px; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
    }
    .appbar{
      display:flex; align-items:center; justify-content:space-between;
      padding: 12px 16px;
      background: linear-gradient(135deg, rgba(108,92,231,.12), rgba(0,212,255,.10));
      border-bottom: 1px solid #eef0ff;
      backdrop-filter: blur(8px);
    }
    .appbar .title{ font-weight:800; letter-spacing:.3px; }
    .appbar .right, .appbar .left{ display:flex; align-items:center; gap:10px }
    .chip{
      display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
      background:#f4f5ff; border:1px solid #e9ebff; color:#3b3f73; font-weight:600; font-size:12px;
    }

    .content{
      flex:1; overflow:auto; padding: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    }
    .tabbar{
      height:60px; display:flex; align-items:center; justify-content:space-around;
      border-top:1px solid #f0f1f6; background:#fff;
    }
    .tabbar .item{ display:flex; flex-direction:column; align-items:center; gap:4px; color:#606488; font-size:12px }
    .tabbar .item.active{ color: var(--primary) }

    /* Forms */
    .segmented{
      display:flex; background:#f6f7ff; border:1px solid #e8eaff; border-radius:12px; padding:4px; gap:6px;
    }
    .segmented button{
      flex:1; padding:8px 10px; border-radius:8px; border:0; background:transparent; font-weight:700; color:#4b4f7b; cursor:pointer;
    }
    .segmented button.active{ background:#fff; color:var(--primary); box-shadow: 0 6px 14px rgba(108,92,231,.15) }

    .form-row{ display:flex; gap:10px }
    .form-group{ margin:10px 0 }
    .form-group label{ display:block; font-size:12px; color:#656a8b; margin-bottom:6px }
    .input, .select, .textarea{
      width:100%; padding:12px 12px;
      border:1px solid #e7e9f6; border-radius:12px; outline:0;
      background:#fff; font-size:14px;
    }
    .input:focus, .textarea:focus{ border-color:#cdd2ff; box-shadow: 0 0 0 4px rgba(108,92,231,.10) }
    .input-icon{
      display:flex; align-items:center; gap:8px; border:1px solid #e7e9f6; border-radius:12px; padding:10px 12px; background:#fff;
    }
    .input-icon input{ border:0; outline:0; flex:1; font-size:14px }
    .input-append{ display:flex; gap:8px; align-items:center }
    .input-append input{ flex:1 }
    .hint{ color:#8a8fac; font-size:12px }
    .agree{ display:flex; align-items:center; gap:8px; font-size:12px; color:#6a6f90; margin-top:8px }

    .btn{
      appearance:none; border:0; outline:0; cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 14px; border-radius:12px; font-weight:800; letter-spacing:.2px;
      box-shadow: 0 8px 16px rgba(81,56,238,.18);
    }
    .btn.primary{
      background: linear-gradient(135deg, var(--primary), #7c67ff); color:#fff;
    }
    .btn.secondary{
      background:#f3f5ff; color:#3f4580; border:1px solid #e6eaff; box-shadow:none;
    }
    .btn.outline{
      background:#fff; border:1px solid #e7e9f6; color:#3b3f73; box-shadow:none;
    }
    .btn.success{ background: linear-gradient(135deg, #16a34a, #22c55e); color:#fff }
    .btn.paypal{ background:#0147ff; color:#fff }
    .btn.wx{ background:#10b981; color:#fff }
    .btn.full{ width:100% }
    .btn.small{ padding:8px 10px; border-radius:10px; font-weight:700 }

    /* Lists, Cards, Badges */
    .badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700 }
    .badge.free{ background:#ecfdf5; color:#059669; border:1px solid #bbf7d0 }
    .badge.paid{ background:#fef3c7; color:#b45309; border:1px solid #fde68a }
    .badge.bought{ background:#eef2ff; color:#4f46e5; border:1px solid #e0e7ff }

    .card{
      border:1px solid #edf0ff; border-radius:14px; overflow:hidden; background:#fff; box-shadow: 0 6px 20px rgba(22,30,70,.06);
    }
    .card .thumb{ height:120px; background:#eef0ff; position:relative; overflow:hidden }
    .card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .card .body{ padding:12px 12px 14px }
    .row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
    .row.wrap{ flex-wrap:wrap }

    .chips{ display:flex; gap:8px; flex-wrap:wrap }
    .chips .chip{ background:#f4f6ff; border-color:#e6eaff }

    .progress{
      height:8px; background:#eef1ff; border-radius:6px; overflow:hidden;
    }
    .progress .bar{ height:100%; background: linear-gradient(135deg, var(--primary), #7c67ff) }

    /* Options */
    .option{
      display:flex; align-items:flex-start; gap:10px; padding:10px; border:1px solid #eef0ff; border-radius:12px; margin-bottom:10px; background:#fff;
    }
    .option:hover{ border-color:#d9ddff; background:#fbfcff }
    .option input{ margin-top:2px; }
    .option .text{ flex:1 }

    .q-title{ font-weight:800; font-size:16px; margin:8px 0 12px }
    .q-meta{ display:flex; gap:8px; color:#6b7095; font-size:12px; align-items:center; flex-wrap:wrap }
    .q-index{ font-weight:800; color:#4f46e5 }

    .toolbar{ display:flex; gap:10px; align-items:center }
    .subtle{ color:#6b7095; font-size:13px }

    .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
    .grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px }

    .list{ display:flex; flex-direction:column; gap:10px }
    .list-item{
      display:flex; gap:12px; align-items:center; padding:12px; border:1px solid #edf0ff; border-radius:12px; background:#fff;
    }
    .avatar{ width:38px; height:38px; border-radius:10px; overflow:hidden; background:#eef0ff }
    .avatar img{ width:100%; height:100%; object-fit:cover }

    /* Score ring */
    .ring{
      width:160px; height:160px; position:relative;
    }
    .ring svg{ transform: rotate(-90deg) }
    .ring .label{
      position:absolute; inset:0; display:grid; place-items:center;
      font-weight:900; font-size:28px;
    }

    /* Helpers */
    .divider{ height:1px; background:#f0f1f6; margin:12px 0 }
    .muted{ color:#858aae }
    .right{ margin-left:auto }
    .price{ font-weight:900; color:#111827 }
    .skeleton{ background: linear-gradient(90deg,#eef0ff 25%, #f6f8ff 37%, #eef0ff 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite }
    @keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

    /* Prevent text selection while panning with space */
    .noselect{ -webkit-user-select:none; -moz-user-select:none; user-select:none }
  </style>
</head>
<body>
  <div class="hud">
    <div class="brand">
      <i class="fa-solid fa-music"></i> MusicExam
      <span class="tag"><i class="fa-solid fa-layer-group"></i> 原型画布</span>
    </div>
    <div class="zoom">
      <button id="zoomOut" title="缩小"><i class="fa-solid fa-minus"></i></button>
      <div id="zoomLabel" class="label">100%</div>
      <button id="zoomIn" title="放大"><i class="fa-solid fa-plus"></i></button>
      <button id="zoomFit" title="适配屏幕"><i class="fa-solid fa-expand"></i></button>
      <button id="zoomReset" title="重置"><i class="fa-solid fa-rotate-right"></i></button>
    </div>
  </div>

  <div id="viewport" class="noselect">
    <div id="canvas">

      <!-- 登录页 -->
      <section class="module">
        <div class="module-title"><i class="fa-solid fa-right-to-bracket"></i> 登录页</div>
        <div class="phone">
          <div class="statusbar"></div>
          <div class="appbar">
            <div class="left">
              <span clas.........完整代码请登录后点击上方下载按钮下载查看