js+css实现模仿12306火车购票app微网站ui原型图h5代码
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0