<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>萨米公众号</title> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <script type="text/javascript" src="js/base.js"></script> <link rel="stylesheet" type="text/css" href="assets/css/weui.min.css" /> <link rel="stylesheet" type="text/css" href="assets/css/swiper-3.4.2.min.css" /> <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_773803_tu2va42yqo.css" /> <script type="text/javascript" src="assets/font/iconfont.js"> </script> <link rel="stylesheet" href="index.css" /> <style type="text/css"> .swiper-container { height: 3.6rem; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { left: 1.7%; bottom: -0.49rem; } .lis .iconfont { /*color:#999999;*/ font-size: 0.5rem; } .active { color: } .piclist:last-child { margin-bottom: 4rem; } title{text-align: center;width: 100%;} </style> </head> <body> <!--轮播图--> <div class='pic'> <div class="swiper-container "> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="images/banner.png" alt="" /> </div> <div class="swiper-slide"> <img src="images/banner.png" alt="" /> </div> <div class="swiper-slide"> <img src="images/banner.png" alt="" /> </div> </div> <div class="swiper-pagination"> <img src="images/banner.png" alt="" /> </div> </div> </div> <!--图标--> <div class="list"> <ul> <li class='activity_li'> <a href="html/peripheralShort-term.html"> <div class="li_imgbox"><img src="images/zhou.png" alt="" /></div> <div class="zhou zhou_txt">周边短线</div> </a> </li> <li> <a href="html/middle_line.html"> <div class="li_imgbox"><img src="images/guo.png" alt="" /></div> <div class="zhou zhou_txt">国内中线</div> </a> </li> <li> <a href="html/longline.html"> <div class="li_imgbox"><img src="images/chang.png" alt="" /></div> <div class="zhou zhou_txt">国内长线</div> </a> </li> <li> <a href="html/area_line.html"> <div class="li_imgbox "><img src="images/hai.png" alt="" /></div> <div class="zhou zhou_txt">海外线路</div> </a> </li> <li> <a href="html/popular.html"> <div class="li_imgbox"><img src="images/people.png" alt="" /></div> <div class="zhou zhou_txt">人气最多</div> </a> </li> <li> <a href="html/start.html"> <div class="li_imgbox"><img src="images/fa.png" alt="" /></div> <div class="zhou zhou_txt">即将出发</div> </a> </li> <li> <a href="html/teamorder.html"> <div class="li_imgbox"><img src="images/tuan.png" alt="" /></div> <div class="zhou zhou_txt">团队定制</div> </a> </li> <li> <a href="html/outdoorChannel.html"> <div class="li_imgbox"><img src="images/hu.png" alt="" /></div> <div class="zhou zhou_txt">户外频道</div> </a> </li> </ul> </div> <a href="html/travelCalendar.html"> <div class="riliout"> <div class="rili"> <i class='iconfont icon-rili'></i> <span>行程日历</span> </div> </div> </a> <!--===============最新活动==========--> <div class="piclist"> <div class="active"> <span>——最新活动——</span> </div> <div class='center_mian'> <div class="new_pic"> <img src="images/pic1.png" alt="" /> </div> <div class="newxia"> <div class="left"> <div class="qing"> 轻装穿越八11峰4日行轻装穿越八11峰4日行轻装穿越八11峰4日行 轻装穿越八11峰4日行轻装穿越八11峰4日行轻装穿越八11峰4日行 轻装穿越八11峰4日行轻装穿越八11峰4日行轻装穿越八11峰4日行 轻装穿越八11峰4日行轻装穿越八11峰4日行轻装穿越八11峰4日行 </div> <div class="nianout"> <div class="nian"> <i class='iconfont icon-calendar'></i> <span class="active_year">2018.08.13</span> </div> <div class="ji"> <i class='iconfont icon-wuxing'></i> <span class="showcang">收藏</span> </div> </div> </div> <div class="right"> <div class="jia"> <span>¥<span></span>1100</span> </div> <div class="show"> <span class="showspan"> <span>售29</span> </span> <span class="sheng"> 省3 </span> </div> </div> </div> </div> </div> <div class="piclist"> <div class="active"> <span>——热门活动——</span> </div> <div class='center_mian'> <div class="new_pic"> <img src="images/pic1.png" alt="" /> </div> <div class="newxia"> <div class="left"> <div class="qing"> 轻装穿越八11峰4日行 </div> <div class="nianout"> <div class="nian"> <i class='iconfont icon-calendar'></i> <span>2018.08.13</span> </div> <div class="ji"> <i class='iconfont icon-wuxing'></i> <span class="showcang">收藏</span> </div> </div> </div> <div class="right"> <div class="jia"> <span>¥<span></span>1100</span> </div> <div class="show"> <span class="showspan"> <span>售29</span> </span> <span class="sheng"> 省3 </span> </div> </div> </div> </div> <div class='center_mian'> <div class="new_pic"> <img src="images/pic1.png" alt="" /> </div> <div class="newxia"> <div class="left"> <div class="qing"> 轻装穿越八11峰4日行 </div> <div class="nianout"> <div class="nian"> <i class='iconfont icon-calendar'></i> <span>2018.08.13</span> </div> <div class="ji"> <i class='iconfont icon-wuxing'></i> <span class="showcang">收藏</span> </div> </div> </div> <div class="right"> <div class="jia"> <span>¥<span></span>1100</span> </div> <div class="show"> <span class="showspan"> <span>售29</span> </span> <span class="sheng"> 省3 </span> </div> </div> </div> </div> </div> <!--====底部=====--> <div class="base"> <div class="base_img"> <!--<img src="images/bei.png" alt=""/>--> <ul class="baselist"> <a href="index.html"> <li class="base_index baselis"> <img class="first" src="images/first2.png" alt="" /> <span class="base_options common checked_active">首页</span> </li> </a> <a href="html/travelCalendar.html"> <li class="base_travel baselis"> <span class="base_circle"> <i class='iconfont icon-rili base_rili mark '></i> </span> <span class="common">行程日历</span> </li> </a> <a href="html/person.html"> <li class="base_our baselis"> <!--<div class="person">--> <img class="first" src="images/person1.png" alt="" /> <!--</div>--> <span class="my common">我的</span> </li> </a> </ul> </div> </div> <script type="text/javascript" src="assets/js/jquery-2.1.0.js"></script> <script type="text/javascript" src="assets/js/swiper-3.4.2.min.js"></script> <script type="text/javascript" src="assets/js/weui.js"></script> <script type="text/javascript" src="index.js"></script> <script> var mySwiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', autoplay: 1500, //可选选项,自动滑动 loop: true }) </script> </body> </html> <script> $('.ji').click(function(event) { event.stopPropagation(); if($(this).find('.iconfont').attr('class')=='iconfont icon-wuxing'){ $(this).find('.iconfont').attr("class", "iconfont icon-shoucang"); }else{ $(this).find('.iconfont').attr("class", "iconfont icon-wuxing"); } }); $('.center_mian').click(function(){ if(''){ } window.location.href='html/packageDetails.html' }) $('.nian').click(function(event) { event.stopPropagation(); }); $(".piclist:last").css('margin-bottom','1rem'); $('.list li div').click(function(){ $(this).css('background','#FFEEDA') }) </script>