js+css实现模仿12306火车购票app微网站ui原型图h5代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现模仿12306火车购票app微网站ui原型图h5代码

代码标签： js css 模仿 12306 火车购票 app 微网站 ui 原型图 h5 代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>铁路12306</title>
    <style>
        :root {
            --primary-color: #0078D2;
            --accent-color: #F7931E;
            --bg-color: #f2f3f5;
            --card-bg: #ffffff;
            --text-primary: #333;
            --text-secondary: #888;
            --border-color: #ebedf0;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; background-color: var(--bg-color); color: var(--text-primary); font-size: 14px; }
        
        .page {
            position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
            background-color: var(--bg-color); display: none; flex-direction: column;
            transform: translateX(100%); transition: transform 0.3s ease-out;
        }
        .page.active { display: flex; transform: translateX(0); z-index: 10; }
        #app-container.active { display: flex; transform: translateX(0); z-index: 5; }
        
        /* --- 通用头部 --- */
        .page-header {
            display: flex; align-items: center; justify-content: space-between;
            height: 50px; padding: 0 15px; background-color: var(--primary-color);
            color: white; flex-shrink: 0;
        }
        .page-header h2 { font-size: 18px; position: absolute; left: 50%; transform: translateX(-50%); }
        .page-header .icon-btn { cursor: pointer; background: none; border: none; padding: 5px; }
        .page-header svg { width: 24px; height: 24px; color: white; }

        .content { flex-grow: 1; overflow-y: auto; }
        
        /* --- 首页查询 --- */
        #home-view { padding: 20px; }
        .query-box { background: var(--card-bg); border-radius: 8px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .station-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
        .station-input { font-size: 20px; font-weight: bold; width: 40%; border: none; outline: none; background: transparent; }
        .swap-icon { padding: 10px; background-color: var(--bg-color); border-radius: 50%; cursor: pointer; }
        .swap-icon svg { width: 20px; height: 20px; color: var(--primary-color); }
        .date-line { display: flex; align-items: center; border-top: 1px solid var(--border-color); padding-top: 20px; margin-bottom: 25px; }
        .date-input { width: 100%; border: none; font-size: 16px; }
        .query-btn {
            width: 100%; height: 45px; background-color: var(--accent-color);
            border: none; border-radius: 5px; color: white; font-size: 18px; font-weight: bold;
        }

        /* --- 车次列表页 --- */
        .query-results-header { text-align: center; padding: 10px; background: var(--card-bg); }
        .train-card { background: var(--card-bg); margin: 10px; padding: 15px; border-radius: 8px; }
        .train-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .train-number { font-size: 16px; font-weight: bold; }
        .train-duration { color: var(--text-secondary); }
        .train-card-middle { display: flex; justify-content: space-between; align-items: center; }
        .station-time { display: flex; flex-direction: column; }
        .time { font-size: 20px; font-weight: bold; }
        .station { font-size: 16px; }
        .arrow-line { color: var(--text-secondary); }
        .train-card-bottom { border-top: 1px solid var(--border-color); margin-top: 15px; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; }
        .seat-info-summary { display: flex; gap: 15px; font-size: 13px; color: var(--text-secondary); }
        .book-btn { background: var(--accent-color); color: white; border: none; padding: 6px 15px; border-radius: 15px; font-size: 14px; }
        .no-data { text-align: center; padding: 50px; color: var(--text-secondary); }

        /* --- 预订页 --- */
        .section-title { padding: 10px 15px; font-size: 15px; font-weight: bold; color: var(--text-secondary); }
        .seat-selection, .passenger-selection { background: var(--card-bg); }
        .seat-item, .passenger-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid var(--border-color); }
        .seat-item:last-child, .passenger-item:last-child { border-bottom: none; }
        .seat-price { color: var(--accent-color); font-size: 16px; }
        .seat-count { color: var(--text-secondary); }
        .passenger-info p { margin: 0; }
        .passenger-info .id-card { font-size: 12px; color: var(--text-secondary); }
        input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; }
        .fixed-bottom-bar {
            position: sticky; bottom: 0; left: 0; width: 100%; height: 60px;
            background-color: var(--card-bg); border-top: 1px solid var(--border-color);
            display: flex; align-items: center; justify-content: space-between; padding: 0 15px;
        }
        #total-price { color: var(--accent-color); font-size: 20px; font-weight: bold; }
        #submit-order-btn { background: var(--accent-color); color: white; border: none; padding: 12px 30px; border-radius: 5px; font-size: 16px; }

        /* --- 我的 & 订单页 --- */
        .menu-list-item { background: var(--card-bg); display: flex; align-items: center; padding: 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; }
        .menu-list-item:last-child { border-bottom: none; }
        .menu-list-item svg { width: 22px; height: 22px; margin-right: 15px; color: var(--primary-color); }

        .tabs { display: flex; background: var(--card-bg); }
        .tab-item { flex: 1; text-align: center; padding: 15px; cursor: pointer; }
        .tab-item.active { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); font-weight: bold; }
        #order-list-container { padding: 10px; }
        .order-card { background: var(--card-bg); margin-bottom: 10px; border-radi.........完整代码请登录后点击上方下载按钮下载查看