iFish/Light12306
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
33207cb5dd
Light12306/Web12306/index.html

507 lines
15 KiB
HTML
Raw Normal View History

同步提交
2014-05-05 19:34:47 +08:00
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="wrap">
<header class="header-bar">
<div class="logo"><img src="images/logo.png" alt="" /></div>
<nav>
<ul class="user-nav">
<li class="selected">
<i class="icon icon-index"></i>
<p>抢票首页</p>
</li>
<li>
<i class="icon icon-order"></i>
<p>我的订单</p>
</li>
<li>
<i class="icon icon-12306"></i>
<p>访问12306</p>
</li>
<li>
<i class="icon icon-user"></i>
<div class="user-nav-user">
未登录
</div>
<dl class="user-nav-menu">
<dd>
<a href="#">登录账号</a>
<a href="#">注册新账号</a>
<a href="#">忘记密码</a>
<a href="#">退出账号</a>
</dd>
</dl>
</li>
</ul>
</nav>
</header>
<section>
<!-- 搜索输入框 -->
<div class="search-box pr">
<div class="search-box-l"></div>
<div class="search-box-r"></div>
<div class="icon search-box-hings-l"></div>
<div class="icon search-box-hings-r"></div>
<div class="icon search-tips cl">
<span class="net-tips">已分配到畅通的网络环境，为你提速80%：乌鲁木齐</span>
<span class="reset-btn">还原到默认</span>
<span class="order-tips">今日可预定：9月10日－10月2日的火车票</span>
<span class="icon order-ring fr"><span class="order-num">1</span></span>
<!--提示-->
<section class="search-tips-container">
<header>
重要提示
<i class="fa fa-times fr"></i>
</header>
<div>
铁道部的运营图有重要的调整，请注意查看网站通知
</div>
</section>
</div>
<!-- form -->
<div class="search-form-wrap">
<form method="" action="" id="J-search-form">
<ul class="search-form">
<li>
<label class="label-desc">出发城市</label>
<div class="input-wrap"><input class="search-form-city ui-cityselector" type="text" name="from_city" placeholder="请填写出发城市" /></div>
</li>
<li class="transfer-city">
<div class="transfer-city-btn"></div>
</li>
<li>
<label class="label-desc">到达城市</label>
<div class="input-wrap"><input class="search-form-city ui-cityselector" type="text" name="to_city" placeholder="请填写到达城市" /></div>
</li>
<li class="select-date">
<label class="label-desc">乘车日期</label>
<div class="input-wrap"><input class="search-form-date ui-date" type="text" name="to_city" placeholder="请选择乘车日期" /></div>
</li>
<li>
<div class="identity fl">
<label><input type="checkbox" />普通</label>
<label><input type="checkbox" />学生</label>
</div>
</li>
<li>
<input class="submit-btn" type="submit" value="开始刷票" />
</li>
</ul>
</form>
<a class="search-more-option" href="javascript:;">
隐藏更多选项
</a>
</div>
</div>
<!-- 其他设置条件 -->
<div class="options-param">
<dl class="cl">
<dt>指定坐席:</dt>
<dd class="options-seat-type">
<label><input type="checkbox" /> 全部</label> <label><input type="checkbox" />高软</label><label><input type="checkbox" /> 软卧</label>
</dd>
</dl>
<dl class="cl">
<dt>备选日期：</dt>
<dd>
<label><input type="text" class="options-input ui-date" placeholder="请选择备选日期" /></label>
<!-- 循环列表 -->
<span class="optional-block">10月1号<span class="close">x</span></span>
<span class="optional-block">10月1号<span class="close">x</span></span>
<span class="optional-block">10月1号<span class="close">x</span></span>
</dd>
</dl>
<dl class="cl">
<dt>添加车次：</dt>
<dd>
<label><input type="text" class="options-input" placeholder="请添加车次" /></label>
<!-- 循环列表 -->
<span class="optional-block">T12<span class="close">x</span></span>
<span class="optional-block">T2<span class="close">x</span></span>
<span class="optional-block">T3<span class="close">x</span></span>
</dd>
</dl>
<dl class="cl offset-parent">
<dt>添加乘客：</dt>
<dd>
<div class="passenger-selector-wrap">
<label>
<input type="text" class="options-input" id="passenger-selector-id" placeholder="添加联系人..." />
</label>
<section class="passenger-selector">
<div class="passenger-search cl">
<div class="fl fa fa-plus passenger-selector-add"></div>
<div class="fr fa fa-search offset-parent">
<input type="text" id="passenger-selector-key" value="" placeholder="输入姓名/拼音/证件号搜索..." class="passenger-search-key" />
</div>
</div>
<ul class="cl">
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li class="selected">张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
</ul>
<div class="passenger-pager">
<button class="passenger-pager-prev" disabled="disabled">上一页</button>
<button class="passenger-pager-next">下一页</button>
</div>
</section>
</div>
<!-- 循环列表 -->
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
<span class="optional-block">木鱼<span class="close">x</span></span>
</dd>
</dl>
<div class="split"></div>
<dl class="cl">
<dt>出行计划：</dt>
<dd>
<div class="travel-theme-wrap">
<label><input type="text" class="options-input" id="travel-theme-select" placeholder="出行计划" readonly="readonly" /></label>
<section>
<ul>
<li>
北京-乌鲁木齐
<i class="fa fa-times"></i>
</li>
<li class="selected">
北京-合肥
<i class="fa fa-times"></i>
</li>
<li>
广州-武汉
<i class="fa fa-times"></i>
</li>
</ul>
<button class="button button-primary button-block" id="btn-save-travel-theme">
<i class="fa fa-save"></i>
保存当前查询为出行计划
</button>
</section>
</div>
</dd>
</dl>
<button id="btnResetOptions" class="button button-default">重置选项</button>
</div>
<!-- 月日期选择 -->
<div class="date-bar-wrap">
<div class="date-bar-prev fl">
<span class="arrow-left"></span>
</div>
<div class="date-bar fl">
<ul class="date-bar-list">
<li>
<h5>03-12</h5>
<span>星期一</span>
</li>
<li>
<h5>03-13</h5>
<span>星期二</span>
</li>
<li class="selected">
<h5>今天(03-14)</h5>
<span>星期三</span>
</li>
<li>
<h5>03-15</h5>
<span>星期四</span>
</li>
<li>
<h5>03-16</h5>
<span>星期五</span>
</li>
<li>
<h5>03-17</h5>
<span>星期六</span>
</li>
<li>
<h5>03-18</h5>
<span>星期日</span>
</li>
<li>
<h5>03-19</h5>
<span>星期一</span>
</li>
</ul>
</div>
<div class="date-bar-next fl">
<span class="arrow-right"></span>
</div>
</div>
<!-- 搜索结果 -->
<div class="result">
<table>
<thead>
<tr>
<th>车次</th>
<th>发／到时间</th>
<th>发／到站</th>
<th>余票信息</th>
</tr>
</thead>
<tbody>
<tr>
<td class="train-num">
<p>T190</p>
<a class="train-station-type" href="javascript:;">经停站</a>
</td>
<td class="train-info">
<p>07:00－12:36</p>
<p>历时5小时36分</p>
</td>
<td class="train-city">
<p>北京西</p>
<p>南昌</p>
</td>
<td class="train-seats">
<a href="javascript:void(0);" class="ticket-block">
<p><span>二等座</span></p>
<p class="row2">
<span class="ticket-num">115张 </span>
<span>¥657</span>
</p>
</a>
<a href="javascript:void(0);" class="ticket-block">
<p><span>二等座</span></p>
<p class="row2">
<span class="ticket-num">115张 </span>
<span>¥657</span>
</p>
</a>
<a href="javascript:void(0);" class="ticket-block">
<p><span>二等座</span></p>
<p class="row2">
<span class="ticket-num">115张 </span>
<span>¥657</span>
</p>
</a>
</td>
</tr>
<tr>
<td class="train-num">
<p>T190</p>
<a class="train-station-type" href="javascript:;">经停站</a>
</td>
<td class="train-info">
<p>07:00－12:36</p>
<p>历时5小时36分</p>
</td>
<td class="train-city">
<p class="start">北京西</p>
<p>南昌</p>
</td>
<td class="train-seats">
<a href="javascript:void(0);" class="ticket-block ticket-block-selected">
<p><span>二等座</span></p>
<p class="row2">
<span class="ticket-num">115张 </span>
<span>¥657</span>
</p>
</a>
<a href="javascript:void(0);" class="ticket-block">
<p><span>二等座</span></p>
<p class="row2">
<span class="ticket-num">115张 </span>
<span>¥657</span>
</p>
</a>
<a href="javascript:void(0);" class="ticket-block">
<p><span>二等座</span></p>
<p class="row2">
<span class="ticket-num">115张 </span>
<span>¥657</span>
</p>
</a>
</td>
</tr>
<tr>
<td class="train-num">
<p>T190</p>
<a class="train-station-type" href="javascript:;">经停站</a>
</td>
<td class="train-info">
<p>07:00－12:36</p>
<p>历时5小时36分</p>
</td>
<td class="train-city">
<p>北京西</p>
<p class="end">南昌</p>
</td>
<td class="train-seats">
<a href="javascript:void(0);" class="ticket-block">
<p><span>二等座</span></p>
<p class="row2">
<span class="ticket-num">115张 </span>
<span>¥657</span>
</p>
</a>
<a href="javascript:void(0);" class="ticket-block">
<p><span>二等座</span></p>
<p class="row2">
<span class="ticket-num">115张 </span>
<span>¥657</span>
</p>
</a>
<a href="javascript:void(0);" class="ticket-block">
<p><span>二等座</span></p>
<p class="row2">
<span class="ticket-num">115张 </span>
<span>¥657</span>
</p>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<article id="save-travel-method" class="float-dialog">
<header>
新建出行计划
<i class="fa fa-times cancel-button"></i>
</header>
<section>
<form>
<p>您可以将当前的查询选项保存为出行计划，下一次就不用麻烦的重新填写拉，直接选择即可。</p>
<input type="text" value="" id="" class="text text-block" />
</form>
</section>
<footer data-col="2">
<button class="button button-default cancel-button">
<i class="fa fa-ban"></i>
取&nbsp;&nbsp;&nbsp;&nbsp;消
</button>
<button class="button button-primary">
<i class="fa fa-save"></i>
保&nbsp;&nbsp;&nbsp;&nbsp;存
</button>
</footer>
</article>
<table id="train-stops">
<tr>
<td>北京南</td>
<td>07:00</td>
<td>停1分</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<section id="user-login-dialog" class="float-dialog">
<header>
<span></span>
<i class="fa fa-times cancel-button"></i>
</header>
<div class="login-info">
<input type="text" value="" placeholder="请输入12306账号" />
<input type="password" value="" id="" placeholder="请输入登录密码" />
<a href="javascript:;" class="help-link">忘记密码</a>
</div>
<div class="verify-code">
<input type="text" value="" id="" placeholder="验证码" />
<span></span>
<a href="" class="refresh-vc">看不清？换一张</a>
</div>
<footer data-col="2">
<a class="button button-default" href="https://kyfw.12306.cn/otn/regist/init" target="_blank">
<i class="fa fa-user"></i>
注册账号
</a>
<button type="button" class="button button-primary">
<i class="fa fa-sign-in"></i>
登录账号
</button>
</footer>
</section>
<section id="ticket-submit-container" class="float-dialog" style="">
<div id="ticket-info">
<div class="time-info">
2014年4月14日 15:42开
</div>
<div class="coach-info">
10车22号下铺
</div>
<div class="from-station">
南 昌
</div>
<div class="to-station">
合 肥
</div>
<div class="train-no">
T191次
</div>
<div class="price-info">
￥227.00 元
</div>
<div class="ticket-note">
请尽快提交订单并支付，<br />
车票不等人。。。
</div>
<div class="train-type">
新空调快车
</div>
<div class="qr-code"></div>
<div class="banner"></div>
</div>
<div id="ticket-submit-rings">
<span></span>
<span></span>
</div>
<div id="ticket-submit-info">
<header>提交订单</header>
<p class="ticket-submit-vc">
<input type="text" value="" id="" placeholder="验证码" />
<span></span>
<a href="#" class="refresh-vc">换一张</a>
</p>
<p class="ticket-submit-button">
<button class="button button-block button-primary button-large">
<i class="fa fa-check-square"></i>
提 交 订 单
</button>
</p>
</div>
</section>
<script src="js/modules/jquery/jquery.js"></script>
<script src="js/modules/underscore/underscore.js"></script>
<script src="js/boot.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink