切图~~~为大神服务
This commit is contained in:
irou
parent
e0e85c5b4a
commit
fd07f37e8d
165
Web12306/css/base.css
Normal file
165
Web12306/css/base.css
Normal file
@ -0,0 +1,165 @@
|
||||
body,
|
||||
ul,
|
||||
li,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
nav,
|
||||
section,
|
||||
summary,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
ol,
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
font: 12px;
|
||||
background: url(../images/page-bg.png) repeat-x top left;
|
||||
font: 14px Helvetica, Arial, "Microsoft Yahei", SimSun, sans-serif;
|
||||
}
|
||||
.cl {
|
||||
zoom: 1;
|
||||
content: '';
|
||||
}
|
||||
.cl:after {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: "";
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
}
|
||||
img {
|
||||
border: 0 none;
|
||||
}
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
/**通用**/
|
||||
.wrap {
|
||||
width: 982px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pr {
|
||||
position: relative;
|
||||
}
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
/*通用顶部*/
|
||||
.header-bar {
|
||||
height: 87px;
|
||||
}
|
||||
.header-bar .logo {
|
||||
width: 184px;
|
||||
height: 49px;
|
||||
margin: 21px 0 0 8px;
|
||||
float: left;
|
||||
}
|
||||
.header-bar .user-nav {
|
||||
margin-top: 9px;
|
||||
float: right;
|
||||
/**************导航tab对应icon 开始 *********************/
|
||||
/**************导航tab对应icon 结束*********************/
|
||||
}
|
||||
.header-bar .user-nav .icon-index {
|
||||
width: 23px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.header-bar .user-nav .icon-order {
|
||||
width: 26px;
|
||||
background-position: 0 -44px;
|
||||
}
|
||||
.header-bar .user-nav .icon-12306 {
|
||||
width: 24px;
|
||||
background-position: 0 -84px;
|
||||
}
|
||||
.header-bar .user-nav .icon-user {
|
||||
width: 24px;
|
||||
background-position: 0 -122px;
|
||||
}
|
||||
.header-bar .user-nav li {
|
||||
padding-top: 16px;
|
||||
width: 104px;
|
||||
height: 65px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-bar .user-nav li .icon {
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.header-bar .user-nav li.selected {
|
||||
border-radius: 5px;
|
||||
color: #f17206;
|
||||
background: #fff;
|
||||
}
|
||||
.header-bar .user-nav li.selected .icon-index {
|
||||
background-position: 0 -164px;
|
||||
}
|
||||
.header-bar .user-nav li.selected .icon-order {
|
||||
background-position: 0 -207px;
|
||||
}
|
||||
.header-bar .user-nav li.selected .icon-12306 {
|
||||
background-position: 0 -45px;
|
||||
}
|
||||
.header-bar .user-nav li.selected .icon-user {
|
||||
background-position: 0 -284px;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
margin-left: 12px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
background: url(../images/icon.png) no-repeat 0 -560px;
|
||||
}
|
||||
input:checked[type="checkbox"] {
|
||||
background-position: 0 -582px;
|
||||
}
|
||||
139
Web12306/css/base.less
Normal file
139
Web12306/css/base.less
Normal file
@ -0,0 +1,139 @@
|
||||
body,ul,li,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,nav,section,summary,article,
|
||||
aside,canvas,details,embed,figure,figcaption,footer,header,menu{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
ol,ul,li {
|
||||
list-style: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
font: 12px;
|
||||
background:url(../images/page-bg.png) repeat-x top left;
|
||||
font: 14px Helvetica, Arial, "Microsoft Yahei", SimSun, sans-serif;
|
||||
}
|
||||
.cl {
|
||||
zoom: 1;
|
||||
content: '';
|
||||
}
|
||||
.cl:after {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: "";
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
}
|
||||
img {
|
||||
border: 0 none;
|
||||
}
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
/**通用**/
|
||||
.wrap {
|
||||
width: 982px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pr {
|
||||
position: relative;
|
||||
}
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*通用顶部*/
|
||||
.header-bar{
|
||||
height:87px;
|
||||
& .logo{
|
||||
width: 184px;
|
||||
height: 49px;
|
||||
margin: 21px 0 0 8px;
|
||||
float: left;
|
||||
}
|
||||
& .user-nav{
|
||||
margin-top:9px;
|
||||
float: right;
|
||||
/**************导航tab对应icon 开始 *********************/
|
||||
.icon-index{
|
||||
width:23px;
|
||||
background-position:0 0;
|
||||
}
|
||||
.icon-order{
|
||||
width:26px;
|
||||
background-position:0 -44px;
|
||||
}
|
||||
.icon-12306{
|
||||
width:24px;
|
||||
background-position:0 -84px;
|
||||
}
|
||||
.icon-user{
|
||||
width:24px;
|
||||
background-position:0 -122px;
|
||||
}
|
||||
/**************导航tab对应icon 结束*********************/
|
||||
& li{
|
||||
& .icon{
|
||||
display:inline-block;
|
||||
height:26px;
|
||||
margin-bottom:2px;
|
||||
}
|
||||
padding-top: 16px;
|
||||
width: 104px;
|
||||
height: 65px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
&.selected{
|
||||
border-radius:5px;
|
||||
color:#f17206;
|
||||
background:#fff;
|
||||
.icon-index{
|
||||
background-position:0 -164px;
|
||||
}
|
||||
.icon-order{
|
||||
background-position:0 -207px;
|
||||
}
|
||||
.icon-12306{
|
||||
background-position:0 -45px;
|
||||
}
|
||||
.icon-user{
|
||||
background-position:0 -284px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
margin-left: 12px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
background:url(../images/icon.png) no-repeat 0 -560px;
|
||||
}
|
||||
input:checked[type="checkbox"]{
|
||||
background-position:0 -582px;
|
||||
}
|
||||
318
Web12306/css/index.css
Normal file
318
Web12306/css/index.css
Normal file
@ -0,0 +1,318 @@
|
||||
@import url('base.css');
|
||||
.icon {
|
||||
background: url(../images/icon.png) no-repeat;
|
||||
}
|
||||
.search-box {
|
||||
height: 193px;
|
||||
margin-top: 27px;
|
||||
padding-top: 15px;
|
||||
background: url(../images/search-box-bg.png) repeat-x;
|
||||
}
|
||||
.search-box .label-desc {
|
||||
color: #984d00;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
.search-box .search-box-l,
|
||||
.search-box .search-box-r {
|
||||
width: 10px;
|
||||
height: 199px;
|
||||
background: url(../images/css-sprite.png) no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.search-box .search-box-r {
|
||||
right: 0;
|
||||
background-position: -12px 0;
|
||||
}
|
||||
.search-box .search-box-hings-l,
|
||||
.search-box .search-box-hings-r {
|
||||
width: 14px;
|
||||
height: 31px;
|
||||
background-position: 0 -459px;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
}
|
||||
.search-box .search-box-hings-l {
|
||||
left: 188px;
|
||||
}
|
||||
.search-box .search-box-hings-r {
|
||||
right: 188px;
|
||||
}
|
||||
.search-box .search-tips {
|
||||
margin-left: 23px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
line-height: 29px;
|
||||
color: #fff;
|
||||
padding-left: 34px;
|
||||
background-position: 0 -321px;
|
||||
}
|
||||
.search-box .search-tips span {
|
||||
display: inline-block;
|
||||
}
|
||||
.search-box .search-tips .reset-btn {
|
||||
width: 87px;
|
||||
height: 30px;
|
||||
background: url(../images/css-sprite.png) no-repeat;
|
||||
background-position: -24px 0;
|
||||
font-size: 0;
|
||||
top: -7px;
|
||||
position: relative;
|
||||
margin: 0 39px 0 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-box .search-tips .order-ring {
|
||||
top: 3px;
|
||||
position: relative;
|
||||
background-position: 0 -360px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
margin-right: 37px;
|
||||
}
|
||||
.search-box .search-tips .order-ring .order-num {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 20px;
|
||||
background: #ff3e43;
|
||||
font-size: 8px;
|
||||
border-radius: 200px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.search-box .search-form-wrap {
|
||||
margin: 38px 0 0 44px;
|
||||
}
|
||||
.search-box .search-form li {
|
||||
float: left;
|
||||
}
|
||||
.search-box .search-form-city,
|
||||
.search-box .search-form-date {
|
||||
width: 134px;
|
||||
height: 37px;
|
||||
padding: 0 30px 0 10px;
|
||||
background: url(../images/css-sprite.png) no-repeat;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
background-position: -24px -72px;
|
||||
}
|
||||
.search-box .search-form-city:focus,
|
||||
.search-box .search-form-date:focus {
|
||||
background-position: -203px -72px;
|
||||
}
|
||||
.search-box .search-form-date {
|
||||
background-position: -24px -117px;
|
||||
}
|
||||
.search-box .search-form-date:focus {
|
||||
background-position: -203px -117px;
|
||||
}
|
||||
.search-box .transfer-city {
|
||||
margin: 0 6px;
|
||||
}
|
||||
.search-box .transfer-city .transfer-city-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
background: url(../images/css-sprite.png) no-repeat;
|
||||
background-position: -24px -158px;
|
||||
margin-top: 27px;
|
||||
}
|
||||
.search-box .select-date {
|
||||
margin: 0 70px 0 40px;
|
||||
}
|
||||
.search-box .submit-btn {
|
||||
width: 133px;
|
||||
height: 43px;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
line-height: 43px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #2c961a;
|
||||
border-radius: 4px;
|
||||
-webkit-appearance: none;
|
||||
background: -webkit-linear-gradient(top, #3bc412, #33a810);
|
||||
}
|
||||
.search-box .submit-btn:hover {
|
||||
border-color: #176f0a;
|
||||
background: -webkit-linear-gradient(top, #33cd19, #3b9d2a);
|
||||
}
|
||||
.search-box .submit-btn:active {
|
||||
border-color: #176f0a;
|
||||
background: -webkit-linear-gradient(top, #41b12f, #1f8a0c);
|
||||
}
|
||||
.search-box .identity label {
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
margin-right: 30px;
|
||||
color: #984d00;
|
||||
}
|
||||
.search-box .identity label input {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
/*其他筛选条件*/
|
||||
.options-param {
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
.options-param dt {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
float: left;
|
||||
}
|
||||
.options-param dd {
|
||||
width: 825px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.options-param .split {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px dotted #d6d6d6;
|
||||
}
|
||||
.options-param dt {
|
||||
margin-left: 36px;
|
||||
}
|
||||
.options-param .options-input {
|
||||
width: 156px;
|
||||
height: 36px;
|
||||
padding: 0 30px 0 10px;
|
||||
-webkit-appearance: none;
|
||||
background: red;
|
||||
border: none;
|
||||
background: url(../images/css-sprite.png) no-repeat;
|
||||
background-position: -24px -32px;
|
||||
}
|
||||
.options-param .options-input:focus {
|
||||
background-position: -227px -32px;
|
||||
}
|
||||
.options-param .optional-block {
|
||||
background: #fff;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 34px 0 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.options-param .optional-block .close {
|
||||
font-size: 13px;
|
||||
font-family: arial;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.options-param .options-seat-type {
|
||||
line-height: 34px;
|
||||
}
|
||||
/*搜索结果日期选择*/
|
||||
.date-bar-wrap {
|
||||
height: 60px;
|
||||
margin-top: 18px;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-bottom: 3px solid #f88c21;
|
||||
}
|
||||
.date-bar-wrap .date-bar-prev,
|
||||
.date-bar-wrap .date-bar-next {
|
||||
width: 28px;
|
||||
height: 60px;
|
||||
background: -webkit-linear-gradient(top, #fcfcfb, #e5e4e4);
|
||||
}
|
||||
.date-bar-wrap .date-bar-prev {
|
||||
border-right: 1px solid #cccbc8;
|
||||
}
|
||||
.date-bar-wrap .date-bar-next {
|
||||
border-left: 1px solid #cccbc8;
|
||||
}
|
||||
.date-bar-wrap .date-bar {
|
||||
width: 922px;
|
||||
height: 60px;
|
||||
background: -webkit-linear-gradient(top, #f1f0f0, #dbdada);
|
||||
}
|
||||
/*搜索结果*/
|
||||
.result {
|
||||
margin-bottom: 55px;
|
||||
background: #fffefa;
|
||||
border-top: 1px solid #c6701a;
|
||||
}
|
||||
.result table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
color: #444444;
|
||||
font-size: 16px;
|
||||
}
|
||||
.result table thead {
|
||||
background: #f5f5f5;
|
||||
color: #777777;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
border-left: 1px solid #dcdcdc;
|
||||
border-right: 1px solid #dcdcdc;
|
||||
text-align: left;
|
||||
}
|
||||
.result table thead tr th:nth-child(1) {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.result table thead tr th:nth-child(2) {
|
||||
padding-left: 38px;
|
||||
}
|
||||
.result table thead tr th:nth-child(4) {
|
||||
text-align: center;
|
||||
}
|
||||
.result .train-num {
|
||||
padding: 18px 4px 18px 40px;
|
||||
font-family: tahoma;
|
||||
color: #4D5873;
|
||||
font-size: 24px;
|
||||
text-align: left;
|
||||
line-height: 19px;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-right: 1px solid #ccc7ba;
|
||||
background: #fff9e8;
|
||||
}
|
||||
.result .train-seats {
|
||||
padding: 20px 0;
|
||||
border: 1px solid #cccccc;
|
||||
border-left: none;
|
||||
line-height: 18px;
|
||||
}
|
||||
.result .train-seats .row2 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.result .train-info {
|
||||
width: 120px;
|
||||
padding: 0 45px 0 38px ;
|
||||
border-top: 1px solid #cccccc;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
.result .train-city {
|
||||
width: 110px;
|
||||
border-top: 1px solid #cccccc;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
padding: 0 60px 0 5px;
|
||||
}
|
||||
.result .ticket-block {
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
background: -webkit-linear-gradient(top, #ffffff, #ffffff 5%, #f5f5f5);
|
||||
border-radius: 4px;
|
||||
padding: 11px 16px;
|
||||
color: #4e4e4e;
|
||||
box-shadow: 0px 1px 8px rgba(155, 155, 155, 0.2);
|
||||
}
|
||||
.result .ticket-block:hover {
|
||||
border-color: #dec496;
|
||||
background: -webkit-linear-gradient(top, #ffffff, #ffffff 5%, #fcf6e1);
|
||||
}
|
||||
.result .ticket-num {
|
||||
color: #e00000;
|
||||
}
|
||||
.result .train-station-type {
|
||||
font-size: 12px;
|
||||
}
|
||||
320
Web12306/css/index.less
Normal file
320
Web12306/css/index.less
Normal file
@ -0,0 +1,320 @@
|
||||
@import url('base.css');
|
||||
@sprite:url(../images/css-sprite.png) no-repeat;
|
||||
@icon:url(../images/icon.png) no-repeat;
|
||||
.icon{
|
||||
background:@icon;
|
||||
}
|
||||
.search-box{
|
||||
height:193px;
|
||||
margin-top:27px;
|
||||
padding-top:15px;
|
||||
background:url(../images/search-box-bg.png) repeat-x;
|
||||
.label-desc{
|
||||
color:#984d00;
|
||||
margin-bottom:12px;
|
||||
display:block;
|
||||
}
|
||||
.search-box-l,.search-box-r{
|
||||
width:10px;
|
||||
height:199px;
|
||||
background:@sprite;
|
||||
position:absolute;
|
||||
top:0;
|
||||
}
|
||||
.search-box-r{
|
||||
right:0;
|
||||
background-position:-12px 0;
|
||||
}
|
||||
.search-box-hings-l,.search-box-hings-r{
|
||||
width:14px;
|
||||
height:31px;
|
||||
background-position:0 -459px;
|
||||
position:absolute;
|
||||
bottom:-8px;
|
||||
}
|
||||
.search-box-hings-l{
|
||||
left:188px;
|
||||
}
|
||||
.search-box-hings-r{
|
||||
right:188px;
|
||||
}
|
||||
.search-tips{
|
||||
margin-left:23px;
|
||||
height:32px;
|
||||
font-size:16px;
|
||||
line-height:29px;
|
||||
color:#fff;
|
||||
padding-left:34px;
|
||||
background-position:0 -321px;
|
||||
& span{
|
||||
display:inline-block;
|
||||
}
|
||||
& .net-tips{
|
||||
|
||||
}
|
||||
& .reset-btn{
|
||||
width:87px;
|
||||
height:30px;
|
||||
background:@sprite;
|
||||
background-position:-24px 0;
|
||||
font-size:0;
|
||||
top:-7px;
|
||||
position:relative;
|
||||
margin:0 39px 0 16px;
|
||||
cursor:pointer;
|
||||
}
|
||||
& .order-ring{
|
||||
top: 3px;
|
||||
position: relative;
|
||||
background-position: 0 -360px;
|
||||
width: 19px;
|
||||
height:19px;
|
||||
margin-right: 37px;
|
||||
& .order-num{
|
||||
position:absolute;
|
||||
top:-10px;
|
||||
left:20px;
|
||||
background:#ff3e43;
|
||||
font-size:8px;
|
||||
border-radius:200px;
|
||||
padding:0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-form-wrap{
|
||||
margin:38px 0 0 44px;
|
||||
}
|
||||
.search-form li{
|
||||
float:left;
|
||||
}
|
||||
.search-form-city,.search-form-date{
|
||||
width: 134px;
|
||||
height: 37px;
|
||||
padding: 0 30px 0 10px;
|
||||
background: url(../images/css-sprite.png) no-repeat;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
background-position: -24px -72px;
|
||||
&:focus{
|
||||
background-position:-203px -72px;
|
||||
}
|
||||
}
|
||||
.search-form-date{
|
||||
background-position:-24px -117px;
|
||||
&:focus{
|
||||
background-position:-203px -117px;
|
||||
}
|
||||
}
|
||||
.transfer-city{
|
||||
margin:0 6px;
|
||||
.transfer-city-btn{
|
||||
width:39px;
|
||||
height:39px;
|
||||
background:@sprite;
|
||||
background-position:-24px -158px;
|
||||
margin-top:27px;
|
||||
|
||||
}
|
||||
}
|
||||
.select-date{
|
||||
margin:0 70px 0 40px;
|
||||
}
|
||||
.submit-btn{
|
||||
width:133px;
|
||||
height:43px;
|
||||
display:block;
|
||||
margin-top:5px;
|
||||
line-height:43px;
|
||||
color:#fff;
|
||||
font-size:17px;
|
||||
cursor:pointer;
|
||||
border:1px solid #2c961a;
|
||||
border-radius:4px;
|
||||
-webkit-appearance: none;
|
||||
background:-webkit-linear-gradient(top,#3bc412,#33a810);
|
||||
&:hover{
|
||||
border-color:#176f0a;
|
||||
background:-webkit-linear-gradient(top,#33cd19,#3b9d2a);
|
||||
}
|
||||
&:active{
|
||||
border-color:#176f0a;
|
||||
background:-webkit-linear-gradient(top,#41b12f,#1f8a0c);
|
||||
}
|
||||
}
|
||||
.identity label{
|
||||
display:block;
|
||||
line-height:28px;
|
||||
margin-right:30px;
|
||||
color:#984d00;
|
||||
& input{
|
||||
position:relative;
|
||||
top:-1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*其他筛选条件*/
|
||||
.options-param{
|
||||
padding:0 10px;
|
||||
border:1px solid #e1e1e1;
|
||||
border-radius:4px;
|
||||
font-size:14px;
|
||||
color:#000000;
|
||||
& dt{
|
||||
height:36px;
|
||||
line-height:36px;
|
||||
float:left;
|
||||
}
|
||||
& dd{
|
||||
width:825px;
|
||||
overflow:hidden;
|
||||
}
|
||||
& .split{
|
||||
height:1px;
|
||||
overflow:hidden;
|
||||
border-bottom:1px dotted #d6d6d6;
|
||||
}
|
||||
& dt{
|
||||
margin-left:36px;
|
||||
}
|
||||
& .options-input{
|
||||
width:156px;
|
||||
height:36px;
|
||||
padding:0 30px 0 10px;
|
||||
-webkit-appearance: none;
|
||||
background:red;
|
||||
border:none;
|
||||
background:@sprite;
|
||||
background-position:-24px -32px;
|
||||
&:focus{
|
||||
background-position:-227px -32px;
|
||||
}
|
||||
}
|
||||
& .optional-block{
|
||||
background:#fff;
|
||||
height:34px;
|
||||
line-height:34px;
|
||||
border:1px solid #d3d3d3;
|
||||
border-radius:4px;
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
padding:0 34px 0 14px;
|
||||
margin-bottom:10px;
|
||||
& .close{
|
||||
font-size: 13px;
|
||||
font-family: arial;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 10px;
|
||||
cursor:pointer;
|
||||
padding:0 4px;
|
||||
}
|
||||
}
|
||||
& .options-seat-type{
|
||||
line-height:34px;
|
||||
}
|
||||
}
|
||||
/*搜索结果日期选择*/
|
||||
.date-bar-wrap{
|
||||
height:60px;
|
||||
margin-top:18px;
|
||||
border:1px solid #dfdfdf;
|
||||
border-bottom:3px solid #f88c21;
|
||||
& .date-bar-prev,& .date-bar-next{
|
||||
width:28px;
|
||||
height:60px;
|
||||
background:-webkit-linear-gradient(top,#fcfcfb,#e5e4e4);
|
||||
}
|
||||
& .date-bar-prev{
|
||||
border-right:1px solid #cccbc8;
|
||||
}
|
||||
& .date-bar-next{
|
||||
border-left:1px solid #cccbc8;
|
||||
}
|
||||
& .date-bar{
|
||||
width:922px;
|
||||
height:60px;
|
||||
background:-webkit-linear-gradient(top,#f1f0f0,#dbdada);
|
||||
}
|
||||
}
|
||||
/*搜索结果*/
|
||||
.result{
|
||||
margin-bottom:55px;
|
||||
background:#fffefa;
|
||||
& table{
|
||||
border-collapse:collapse;
|
||||
width:100%;
|
||||
color:#444444;
|
||||
font-size:16px;
|
||||
& thead{
|
||||
background:#f5f5f5;
|
||||
color:#777777;
|
||||
line-height:30px;
|
||||
font-size:14px;
|
||||
border-left: 1px solid #dcdcdc;
|
||||
border-right: 1px solid #dcdcdc;
|
||||
text-align:left;
|
||||
& tr th:nth-child(1){
|
||||
padding-left:40px;
|
||||
}
|
||||
& tr th:nth-child(2){
|
||||
padding-left:38px;
|
||||
}
|
||||
& tr th:nth-child(4){
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
}
|
||||
border-top:1px solid #c6701a;
|
||||
& .train-num{
|
||||
padding:18px 4px 18px 40px;
|
||||
font-family: tahoma;
|
||||
color: #4D5873;
|
||||
font-size: 24px;
|
||||
|
||||
text-align: left;
|
||||
line-height: 19px;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-right: 1px solid #ccc7ba;
|
||||
background: #fff9e8;
|
||||
}
|
||||
& .train-seats{
|
||||
padding:20px 0;
|
||||
border:1px solid #cccccc;
|
||||
border-left:none;
|
||||
line-height:18px;
|
||||
& .row2{
|
||||
margin-top:5px;
|
||||
}
|
||||
}
|
||||
& .train-info{
|
||||
width:120px;
|
||||
padding:0 45px 0 38px ;
|
||||
border-top:1px solid #cccccc;
|
||||
border-bottom:1px solid #cccccc;
|
||||
}
|
||||
& .train-city{
|
||||
width:110px;
|
||||
border-top:1px solid #cccccc;
|
||||
border-bottom:1px solid #cccccc;
|
||||
padding:0 60px 0 5px;
|
||||
}
|
||||
& .ticket-block{
|
||||
display:inline-block;
|
||||
border:1px solid rgba(0,0,0,0.2);
|
||||
background:-webkit-linear-gradient(top,#ffffff,#fff 5% ,#f5f5f5);
|
||||
border-radius:4px;
|
||||
padding:11px 16px;
|
||||
color:#4e4e4e;
|
||||
box-shadow:0px 1px 8px rgba(155, 155, 155, 0.2);
|
||||
&:hover{
|
||||
border-color:rgba(222,196,150,1);
|
||||
background:-webkit-linear-gradient(top,#ffffff,#fff 5% ,#fcf6e1);
|
||||
}
|
||||
}
|
||||
& .ticket-num{
|
||||
color:#e00000;
|
||||
}
|
||||
& .train-station-type{
|
||||
font-size:12px;
|
||||
}
|
||||
}
|
||||
BIN
Web12306/images/css-sprite.png
Normal file
BIN
Web12306/images/css-sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
Web12306/images/icon.png
Normal file
BIN
Web12306/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
Web12306/images/logo.png
Normal file
BIN
Web12306/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
Web12306/images/page-bg.png
Normal file
BIN
Web12306/images/page-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Web12306/images/search-box-bg.png
Normal file
BIN
Web12306/images/search-box-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -3,9 +3,272 @@
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title></title>
|
||||
<script src="js/modules/seajs/sea.js"></script>
|
||||
<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>
|
||||
<p>可小风</p>
|
||||
</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>
|
||||
</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" 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" 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" type="text" name="to_city" placeholder="请填写到达城市"/></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="identity fl">
|
||||
<label><input type="checkbox" />普通</label>
|
||||
<label><input type="checkbox" />学生</label>
|
||||
</div>
|
||||
<input class="submit-btn" type="submit" value="开始刷票"/>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</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" 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">
|
||||
<dt>添加乘客：</dt>
|
||||
<dd>
|
||||
<label><input type="text" class="options-input" placeholder="请选择乘客"/></label>
|
||||
<!-- 循环列表 -->
|
||||
<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>
|
||||
<label><input type="text" class="options-input" placeholder="出行计划"/></label>
|
||||
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<!-- 月日期选择 -->
|
||||
<div class="date-bar-wrap">
|
||||
<div class="date-bar-prev fl"></div>
|
||||
<div class="date-bar fl">
|
||||
sadasd
|
||||
</div>
|
||||
<div class="date-bar-next fl"></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>
|
||||
<p class="train-station-type">经停站</p>
|
||||
</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>
|
||||
<p class="train-station-type">经停站</p>
|
||||
</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>
|
||||
<p class="train-station-type">经停站</p>
|
||||
</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>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="js/modules/seajs/sea.js"></script>
|
||||
<script>
|
||||
seajs.config({ base: location.protocol + '//' + location.host + location.pathname + 'js/' });
|
||||
seajs.use("../../js/boot.js");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user