start.html 6.2 KB
<!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" />
		<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_1qg03k1415.css" />
		<script type="text/javascript" src="../assets/font/iconfont.js"></script>
		<script type="text/javascript" src="../js/base.js"></script>
		<link rel="stylesheet" href="../css/start.css" />
		<style type="text/css">
			.swiper-container {
				height: 3.6rem;
			}
			
			.swiper-container-horizontal>.swiper-pagination-bullets,
			.swiper-pagination-custom,
			.swiper-pagination-fraction {
				left: 44%;
			}
			
			.lis .iconfont {
				color: #999999;
				font-size: 0.5rem;
			}
			.
			.active {
				color:
			}
			a:visited {color: #c8c8cd} 
		</style>
	</head>

	<body>
		<div class="header_out">
			<header>
				<span class="left">
					<i class="iconfont icon-dizhi"></i>
					<span class="area" >天津</span>
				</span>
				<span class="shu">
					<i class="iconfont icon-sousuo fang"></i>
					<input type="text" class="in" placeholder="搜索活动名称" />
				</span>
				<span class="sousuo">搜索</span>
				
			</header>
		</div>
		<div class="list">
			<ul>
				<li class=''>
					<a href="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="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="longline.html">
						<div class="li_imgbox"><img src="../images/chang.png" alt="" /></div>
						<div class="zhou zhou_txt">国内长线</div>
					</a>
				</li>
				<li>
					<a href="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="popular.html">
						<div class="li_imgbox"><img src="../images/people.png" alt="" /></div>
						<div class="zhou zhou_txt">人气最多</div>
					</a>
				</li>
				<li>
					<a href="start.html">
						<div class="li_imgbox imgbox_active"><img src="../images/chu.png" alt="" /></div>
						<div class="zhou zhou_txt">即将出发</div>
					</a>
				</li>
				<li>
					<a href="teamorder.html">
						<div class="li_imgbox"><img src="../images/tuan.png" alt="" /></div>
						<div class="zhou zhou_txt">团队定制</div>
					</a>
				</li>
				<li>
					<a href="outdoorChannel.html">
						<div class="li_imgbox"><img src="../images/hu.png" alt="" /></div>
						<div class="zhou zhou_txt">户外频道</div>
					</a>
				
			</ul>
		</div>
		<div></div>
		<div class="zhou1">
			周边短线
		</div>
		<div class="short_line">
			<div class="picture">
				<img src="../images/banner.png" alt="" />
			</div>
			<div class="qing">
				<div class="qing_out">
						 <span class="run">
						           轻装穿越千八11峰4日行 轻装穿越千八11峰4日行轻装穿越千八11峰4日行轻装穿越千八11峰4日行 轻装穿越千八11峰4日行轻装穿越千八11峰4日行 轻装穿越千八11峰4日行轻装穿越千八11峰4日行
						            越千八11峰4日行轻装穿越千八11峰4日行轻装穿越千八11峰4日行轻装穿越千八11峰4日行
					     </span>
						<div class="year">
								<div class="act act2">
								    <i class="iconfont icon-calendar"></i>
									<span class="txt">
										2018.08.13
									</span>
								</div>
								<div class="act act1">
									<i class="iconfont icon-wuxing"></i>
									<span class="txt">
											      收藏
									</span>
								</div>
						</div>
				</div>
				<div class="mon">
						<span class="jia">
							¥1100
						</span>
						<span class="shou">
							售29  剩3
						</span>
				</div>
			</div>
		</div>
			<div class="short_line">
			<div class="picture">
				<img src="../images/banner.png" alt="" />
			</div>
			<div class="qing">
				<div class="qing_out">
						 <span class="run">
						           轻装穿越千八11峰4日行 轻装穿越千八11峰4日行轻装穿越千八11峰4日行轻装穿越千八11峰4日行 轻装穿越千八11峰4日行轻装穿越千八11峰4日行 轻装穿越千八11峰4日行轻装穿越千八11峰4日行
						            越千八11峰4日行轻装穿越千八11峰4日行轻装穿越千八11峰4日行轻装穿越千八11峰4日行
					     </span>
						<div class="year">
								<div class="act act2">
								    <i class="iconfont icon-calendar"></i>
									<span class="txt">
										2018.08.13
									</span>
								</div>
								<div class="act act1">
									<i class="iconfont icon-wuxing"></i>
									<span class="txt">
											      收藏
									</span>
								</div>
						</div>
				</div>
				<div class="mon">
						<span class="jia">
							¥1100
						</span>
						<span class="shou">
							售29  剩3
						</span>
				</div>
			</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>
	$('.list li div').click(function(){
		$(this).css('background','#FFEEDA')
	})
	$('.short_line').click(function(){
		window.location.href='packageDetails.html';	
	})
	$('.act2').click(function(event){
		event.stopPropagation();
	});
	//五星收藏阻止冒泡
	$('.act1').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");
		} 
	});
	

</script>