js制作支付倒计时页面(2)

body{ background: #eeeeee; } .date-head{ width:100%; } .date-head-statue{ width:100%; font-size:14px; border-radius:4px; padding-left:15px; padding-right:15px; } .date-head-state{ background: #fff; height: 240px; border-radius: 10px; margin-top: 16px; padding-top: 14px; position: relative; } /*.set-detail-number a{ color: #333333; }*/ /*.section-body .set-text-button .set-text-button a{ color: #1c94f7; }*/ .reservation-status,.order-number,.total-order,.order-status,.payment-status,.pay-immediately,.pay-immediately-count{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; } .order-number,.total-order,.order-status,.payment-status{ margin-top: 10px; } .pay-immediately{ position: absolute; bottom: 0px; width: 100%; /* margin-top: 16px; */ } .space-underline { border-bottom: 1px solid #999999; -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch; /*margin-top: 12px;*/ -webkit-transform:scaleY(0.2); -moz-transform:scaleY(0.2); -o-transform:scaleY(0.2); } .reservation-status div:nth-of-type(2){ position: absolute; right: 0px; margin-right: 90px; color: #999999; } .reservation-status div:nth-of-type(3){ position: absolute; right: 0px; margin-right: 26px; color: #999999; } .order-number div:nth-of-type(2),.total-order div:nth-of-type(2),.order-status div:nth-of-type(2),.payment-status div:nth-of-type(2) { position: absolute; left: 0px; margin-left: 130px; } .reservation-status,.order-number ,.total-order ,.order-status,.payment-status{ /*position: absolute; left: 0px; margin-left: 130px;*/ padding-left: 12px; } .payment-status div:nth-of-type(3) { position: absolute; left: 0px; margin-left: 200px; color: #1c94f7; } .cancel-order{ width: 100%; } .pay-immediately div:nth-of-type(1){ width: 70%; background: #1c94f7; height: 40px; line-height: 40px; text-align: center; border-radius: 0px 0px 0px 10px; color: #ffffff; paddingleft: 20p; padding-left: 20px; white-space: nowrap; } .pay-immediately div:nth-of-type(2){ width: 30%; height: 40px; background: #097bd9; boder-radus: 5px; /* border-radius: 5px; */ line-height: 40px; text-align: center; border-radius: 0px 0px 10px 0px; color: #ffffff; } .wide-space_line { height: 30px; width: 100%; background: #eeeeee; text-align: center; } .wide-space_line div:nth-of-type(1) { margin-top: 7px; position: absolute; left: 0px; margin-left: 16px; font-size: 15px; color: #999999; } .total-order div:nth-of-type(2){ color:#ff5e38; font-size: 16px; font-weight: bold; } .order-status div:nth-of-type(2){ color: #1c94f7; } .check-in-time,.room-type,.booking-person,.special-requirements{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; margin-left: 16px; } .check-in-time div:nth-of-type(1),.room-type div:nth-of-type(1),.booking-person div:nth-of-type(1),.special-requirements div:nth-of-type(1){ color: #999999; } .check-in-time div:nth-of-type(2),.room-type div:nth-of-type(2),.booking-person div:nth-of-type(2),.special-requirements div:nth-of-type(2){ color: #333; position: absolute; left: 0px; margin-left: 98px; } /*.check-in-time div:nth-of-type(3),.room-type div:nth-of-type(3),.booking-person div:nth-of-type(3){ color: #333; position: absolute; left: 0px; margin-left: 60px; }*/ .check-in-time div:nth-of-type(3){ color: #333; position: absolute; left: 0px; margin-left: 222px; } .room-type div:nth-of-type(3){ color: #333; position: absolute; left: 0px; margin-left: 152px; } .booking-person div:nth-of-type(3){ color: #333; position: absolute; left: 0px; margin-left: 152px; } .check-information{ background: #ffffff; height: 128px; } .check-in-time{ padding-top: 10px; margin-top: 10px; } .room-type,.booking-person,.special-requirements{ padding-top: 10px; } /*中间列表样式**************************************************************************/ .section-body .set-detail,.section-body .set-detail-number,.section-body .set-detail-address{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; margin-left: 10px; } .set-detail,.set-detail-number{ padding-top: 13px; padding-bottom: 13px; text-align: center; /* border-bottom: 1px solid #999999; -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch;*/ } .set-detail-address{ padding-top: 10px; padding-bottom: 10px; text-align: center; } @font-face{ font-family:"font-name-icon"; src:url("../../fonts/icomoon.ttf") format("truetype"), url("../../fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../../fonts/icomoon.woff") format("woff"), url("../../fonts/icomoon.svg") format("svg"); font-weight:normal; font-style:normal; } .font-name-icon{ font-family: "font-name-icon"; font-weight: normal; font-style: normal; font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .first-icon{ color: #999999; } .second-icon{ margin-left: 5px; } .set-text-button{ position: absolute; right: 0px; margin-right: 24px; font-size: 14px; color: #1c94f7; } .greater-number { position: absolute; right: 0; margin-right: 10px; margin-top: 4px; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #999; border-right: 1px solid #999; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } .greater-number-bottom{ position: absolute; right: 0; margin-right: 10px; margin-top: 7px; display: inline-block; width: 4px; height: 8px; border-top: 1px solid #999; border-right: 1px solid #999; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } .set-detail,.set-detail-number{ padding-top: 13px; padding-bottom: 13px; text-align: center; /* border-bottom: 1px solid #999999; -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch;*/ } .set-text-detail{ margin-left: 10px; font-size: 13px; } .set-text-detail2 .aa{ margin-left: 15px; font-size: 13px; color: #333333; } .set-detail-address{ padding-top: 10px; padding-bottom: 10px; text-align: center; } .set-text-shut{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 221px; } .set-text-button{ position: absolute; right: 0px; margin-right: 24px; font-size: 14px; color: #1c94f7; } .set-text-button .bb{ color: #1c94f7; } .space_line{ height: 10px; width: 100%; background: #eeeeee; } .section-body{ background: #ffffff; } /*底部按钮样式**************************************************************************/ .footer{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; } .greater-number-bottom{ position: absolute; right: 0; margin-right: 10px; margin-top: 6px; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #999; border-right: 1px solid #999; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } .ellipse{ width: 26px; height: 18px; display: block; border-radius: 8px; background: #1c94f7; color: #ffffff; position: absolute; right: 0px; margin-right: 18px; margin-top: -17px; padding-right: 6px; font-size: 10px; text-align: center; line-height: 18px; } .footer{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; position: relative; bottom: 0px; width: 100%; height: 40px; /* background: #fff; */ margin-top: 50px; /* padding-top: 50px; */ } .footer div:nth-of-type(1){ padding-top: 11px; width: 50%; border-right: 1px solid #eeeeee; background-color: white; text-align: center; } .footer div:nth-of-type(2){ padding-top: 12px; width: 50%; padding-left: 28px; background-color: white; } .footer span{ padding-left: 5px; } .pay-immediately div:nth-of-type(3){ display: none; } /*倒计时样式**************************************************************************/ .time-item { background: #C71C60; color: #fff; line-height: 40px; font-size: 14px; font-family: Arial; padding: 0 10px; border-radius: 5px; } #day_show { float:left; line-height:40px; color:#ffffff; font-size:14px; margin:0 10px; font-family:Arial,Helvetica,sans-serif; } .item-title .unit { background:none; line-height:40px; font-size:14px; padding:0 10px; float:left; } .pay-immediately-count-num{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; } .del-order{ display: none; text-align: center; background: #999999; height: 40px; border-radius: 0px 0px 10px 10px; position: absolute; bottom: 0px; width: 100%; color: #fff; line-height: 40px; } //取消按钮弹出的对话框 .arrow_mask { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: #333333; opacity: 0.55; display: none; } .cancel-order-dialog{ display: none; width: 260px; height: 206px; background: #fff; border-radius: 6px; position: absolute; top: 0px; margin-top: 200px; left: 50%; margin-left: -130px; z-index: 1; padding-top: 33px; } .cancel-dialog div:nth-of-type(1){ text-align: center; /* border-right: 1px solid #999; padding: 10px; border-top: 1px solid #999;*/ } .cancel-dialog-btn{ display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; /* margin-top: -8px;*/ } .cancel-dialog-btn div:nth-of-type(1){ width: 130px; border-right: 1px solid #999; padding: 10px; border-top: 1px solid #999; } .cancel-dialog-btn div:nth-of-type(2){ width: 130px; text-align: center; padding: 10px; border-top: 1px solid #999; } .space-underline2 { margin-top: 116px; } .space-underline3 { width: 100%; height: 10px; -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch; -webkit-transform: scaleX(0.2); -moz-transform: scaleX(0.2); }

reset.css

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjxydj.html