<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>预约学车</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/swiper.min.css"> <style> .btn_yuyue{ margin-bottom: 1rem; } .yu_tan .yu_tan_box .tan_text{ width: 6.533333rem; } </style> </head> <body style="background-color: #f6f6f6;"> <div class="box"> <ul class="yu_menu"> <li> <a href="yu_studyCar.html"> <b class="yu_cur">按时间预约</b> </a> </li> <li> <a href="yu_coach.html"> <b>按教练预约</b> </a> </li> </ul> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="day_list day_bg"> <b>周一</b> <i>06-25</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> <div class="swiper-slide"> <div class="day_list"> <b>周二</b> <i>06-26</i> </div> </div> </div> </div> <div class="yu_container"> <div class="time_list"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list time_bor"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list time_bor"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list time_bg_icon"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list time_bor"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list time_bor"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list time_bor"> <b>07:00-08:00</b> <i></i> </div> <div class="time_list time_bor"> <b>07:00-08:00</b> <i></i>s </div> <div style="clear: both"></div> <div class="btn_yuyue" style="display: block;margin-top:3.73rem"> <img src="image/btn_yuyue.png"/> </div> </div> <div class="per_footer"> <ul> <li> <a href=""> <span class="foot_img foot_img_2"></span> <p class="foot_item foot_item_1">预约学车</p> </a> </li> <li class="foot_active"> <a href=""> <span class="foot_img foot_img02_1"></span> <p class="foot_item">个人中心</p> </a> </li> </ul> </div> </div> <!--弹跳框--> <div class="full_bg"></div> <div class="yu_tan"> <div class="yu_tan_box"> <img src="image/tan_car1.png" class="tan_car"/> <h1 class="tan_text">您确定要预约08:00~09:00张教练的课程吗</h1> <h2 class="btn_qr">确认</h2> </div> <div class="cancel"></div> </div> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.sliderPro.min.js" ></script> <script src="js/swiper.min.js"></script> <script type="text/javascript" src="js/study_car.js"></script> <script> var swiper = new Swiper('.swiper-container', { slidesPerView: 7, pagination: { el: '.swiper-pagination', clickable: true, }, }); $('.day_list').click(function(){ $(this).addClass('day_bg').parent().siblings().children().removeClass('day_bg'); }); $(".btn_yuyue").click(function(){ $('.tan_car').css({"width":"4.97rem","height":"2.88rem"}); tankuang(); }); $('.btn_qr').click(function(){ $('.tan_text').html("恭喜您,预约成功"); tankuang(); }); </script> </body> </html>