From 7cfe3856b6ad82224ea5a01d38cc168b99f0744e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=AC=E5=86=AC=E7=9A=84?= <1216719122@qq.com>
Date: Sun, 6 Jun 2021 11:44:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=B0=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 416 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 416 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..47c183e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>光线外卖</title>
+		<link rel="shortcut icon" href="./favicon.ico" />
+		<meta name="description"
+			content="光线是中国专业的网上订餐平台，目前已覆盖北京、上海、杭州、广州等300多个城市，提供各类中式、日式、韩式、西式、下午茶、夜宵等优质美食，并提供送餐上门服务，让订餐更加轻松，叫外卖就上光线！">
+		<meta name="keywords" content="光线，网上订餐，外卖，快餐外卖，外卖网">
+		<meta name="format-detection" content="telephone=no,email=no">
+		<script src="js/flexible.js"></script>
+		<script src="js/flexible_css.js"></script>
+		<link rel="stylesheet" href="./css/index.css">
+		<link rel="stylesheet" href="./css/swiper-bundle.min.css">
+	</head>
+	<body>
+		<div class="seachbar">
+			<input type="text" value="搜索">
+		</div>
+		<div class="layout" >
+			<div class="main" >
+				<div class="top_loading loading" hidden>
+					下拉刷新中<br>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+				</div>
+				<!-- 顶部区域 -->
+				<section class="top_bar">
+					<!-- 顶部栏 -->
+					<div class="top">
+						<div class="location"><i class="iconfont icon-location"></i>定位</div>
+						<div class="message">消息</div>
+					</div>
+					<!-- 搜索区域 -->
+					<div class="search">
+						<input type="text" value="搜索">
+					</div>
+				</section>
+				<!-- 轮播图 -->
+				<div class="swiper-container" id="banner">
+					<div class="swiper-wrapper">
+						<div class="swiper-slide">
+							<img src="./img/banner01.jpg" alt="">
+						</div>
+						<div class="swiper-slide">
+							<img src="./img/banner01.jpg" alt="">
+						</div>
+						<div class="swiper-slide">
+							<img src="./img/banner01.jpg" alt="">
+						</div>
+					</div>
+				</div>
+				<!-- 导航 -->
+				<div class="swiper-container" id="nav">
+					<div class="swiper-wrapper">
+						<div class="swiper-slide">
+							<a href="#" class="nav_item">
+								<img src="./img/icon/icon01.png" alt="">
+								<span>美食</span>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="#" class="nav_item">
+								<img src="./img/icon/icon02.png" alt="">
+								<span>美食</span>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="#" class="nav_item">
+								<img src="./img/icon/icon03.png" alt="">
+								<span>美食</span>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="#" class="nav_item">
+								<img src="./img/icon/icon04.png" alt="">
+								<span>美食</span>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="#" class="nav_item">
+								<img src="./img/icon/icon05.png" alt="">
+								<span>美食</span>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="#" class="nav_item">
+								<img src="./img/icon/icon06.png" alt="">
+								<span>美食</span>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="#" class="nav_item">
+								<img src="./img/icon/icon07.png" alt="">
+								<span>美食</span>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="#" class="nav_item">
+								<img src="./img/icon/icon01.png" alt="">
+								<span>美食</span>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="#" class="nav_item">
+								<img src="./img/icon/icon01.png" alt="">
+								<span>美食</span>
+							</a>
+						</div>
+					</div>
+				</div>
+				<!-- 本地特产 -->
+				<section class="specialty">
+					<div class="title">
+						<h2>本地特产</h2>
+					</div>
+					<div class="content">
+						<div class="item">
+							<div class="img">
+								<a href="#">
+									<img src="./img/specil02.jpg" alt="">
+								</a>
+							</div>
+							<div class="text">
+								<h3><a href="#">酥梨</a></h3>
+								<p>产自李县的特色酥梨，饱满、味甜,深得各地人民的喜爱.</p>
+							</div>
+						</div>
+						<div class="item">
+							<div class="img">
+								<a href="#">
+									<img src="./img/specil01.jpg" alt="">
+								</a>
+							</div>
+							<div class="text">
+								<h3><a href="#">酥梨</a></h3>
+								<p>产自李县的特色酥梨，饱满、味甜,深得各地人民的喜爱.</p>
+							</div>
+						</div>
+						<div class="item">
+							<div class="img">
+								<a href="#">
+									<img src="./img/specil01.jpg" alt="">
+								</a>
+							</div>
+							<div class="text">
+								<h3><a href="#">酥梨</a></h3>
+								<p>产自李县的特色酥梨，饱满、味甜,深得各地人民的喜爱.</p>
+							</div>
+						</div>
+					</div>
+					<div class="refresh">
+						<span>换一批</span>
+					</div>
+				</section>
+				<!-- 广告 -->
+				<section class="adv">
+					<img src="./img/banner02.jpg" alt="">
+				</section>
+				<!-- 推荐商家 -->
+				<section class="merchants">
+					<div class="title">
+						<h2>推荐商家</h2>
+					</div>
+					<div class="content">
+						<!-- 内容区域顶部小导航 -->
+						<div class="swiper-container" id="merchants_nav">
+						    <div class="swiper-wrapper">
+						      <div class="swiper-slide">
+						        <span class="active">综合排名</span></div>
+						      <div class="swiper-slide">
+						       <span>销售最高</span>
+							   </div>
+						      <div class="swiper-slide">
+						        <span>速度最快</span></div>
+						      <div class="swiper-slide">
+						        <span>距离最近</span></div>
+								<div class="swiper-slide">
+								  <span>距离最近</span></div>
+								  <div class="swiper-slide">
+								    <span>距离最近</span></div>
+									<div class="swiper-slide">
+									  <span>距离最近</span></div>
+									  <div class="swiper-slide">
+									    <span>距离最近</span></div>
+										<div class="swiper-slide">
+										  <span>距离最近</span></div>
+						      <div class="bar">
+						        <div class="color"></div>
+						      </div>
+						    </div>
+						  </div>
+						</div>
+						<!-- 内容列表 -->
+						<div class="list">
+							<!-- 内容区域顶部小导航 -->
+							<div class="swiper-container" id="me_list">
+							    <div class="swiper-wrapper">
+							      <div class="swiper-slide">
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+							       <div>热卖</div>
+								</div>
+							      <div class="swiper-slide">
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+									 <div>水果</div>
+								   </div>
+							      <div class="swiper-slide">
+							        <span>乳品</span></div>
+							      <div class="swiper-slide">
+							        <span>零食</span></div>
+							      <div class="swiper-slide">
+							        <span>肉蛋</span></div>
+							      <div class="swiper-slide">
+							        <span>蔬菜</span></div>
+							      <div class="swiper-slide">
+							        <span>酒饮</span></div>
+							      <div class="swiper-slide">
+							        <span>速食</span></div>
+							      <div class="swiper-slide">
+							        <span>熟食</span></div>
+							      <div class="swiper-slide">
+							        <span>水产</span></div>
+							      <div class="swiper-slide">
+							        <span>粮油</span></div>
+							      <div class="swiper-slide">
+							        <span>轻食</span></div>
+							      <div class="swiper-slide">
+							        <span>火锅</span></div>
+							      <div class="swiper-slide">
+							        <span>日百</span></div>
+							      <div class="bar">
+							        <div class="color"></div>
+							      </div>
+							    </div>
+							  </div>
+						</div>
+					</div>
+				</section>
+				
+				
+			</div>
+		</div>
+		
+		<!-- 底部的标签栏 -->
+		<section class="tabbar">
+			<button id="btn">点击</button>
+		</section>
+		
+		<script src="js/better-scroll.js"></script>
+		<script src="./js/swiper-bundle.min.js"></script>
+		<script>
+			document.addEventListener("DOMContentLoaded",function(){
+				var banner = new Swiper("#banner",{
+					loop:true
+				});
+				var nav = new Swiper("#nav",{
+					 slidesPerView: 6.4,
+				});
+				var  wrapper = document.querySelector(".layout")
+				var  bs = BetterScroll.createBScroll(wrapper, {
+					probeType:2,
+					// 开启上拉刷新
+					pullDownRefresh: true
+				})
+				//获取search距离顶部的距离
+				var top_dom = document.querySelector(".top_bar");
+				var top = top_dom.clientHeight;
+				var seachbar = document.querySelector(".seachbar");
+				console.log();
+				// 滑动处理search吸顶效果
+				bs.on("scroll",function(pos){
+					var scrollTop = Math.abs(pos.y);
+					// console.log(scrollTop);
+					if(scrollTop>=top+400){
+						seachbar.style.top = 0;
+					}else{
+						seachbar.style.top = "-2000px";
+					}
+				})
+				
+				bs.on("scrollEnd",function(pos){
+					var scrollTop = Math.abs(pos.y);
+					// console.log(scrollTop);
+					if(scrollTop<top+400){
+						seachbar.style.top = "-2000px";
+					}
+				})
+				// 监听下拉触底
+				bs.on('pullingDown', function(){
+					document.querySelector(".top_loading").hidden = false;
+					setTimeout(function(){
+						document.querySelector(".top_loading").hidden = true;
+						bs.finishPullDown()
+					},3000)
+				})
+				//推荐商家的导航
+				var merchants_nav = new Swiper("#merchants_nav",{
+					 slidesPerView: 4,
+				});
+				//  商家的底部内容的滑动列表
+				var me_list = new Swiper("#me_list",{
+					 slidesPerView: 1,
+				});
+				//  监听商家列表的滑动
+				me_list.on("touchEnd",function(){
+					// 直接拿到是滑动前的索引值
+					setTimeout(()=>{
+						// 滑动后的索引值
+						var index = this.activeIndex;
+						// 滑动列表让顶部的导航 滑动到指定的索引值位置
+						merchants_nav.slideTo(index,300);
+						// 顶部导航的所有的滑块
+						var slides = merchants_nav.slides;
+						// 让所有元素清空class
+						slides.find('span').forEach(function(item){
+							item.className = "";
+						});
+						// 当前自己的添加class
+						slides.find('span')[index].className = "active";
+						// 找到滑动线条
+						var bar = merchants_nav.$el[0].querySelector(".bar");
+						// 获取当前导航一屏的显示个数
+						var views_num = merchants_nav.passedParams.slidesPerView;
+						// 滑动线条 进行left更改移动
+						bar.style.left = 1/views_num * index * 100 + "%";
+					},200)
+				})
+				
+				// 点击上方商家导航
+				merchants_nav.on("tap",function(){
+					// 获取当前索引
+					var clickedIndex = this.clickedIndex;
+					// 点击的当前滑块
+					var clickSlide = this.slides.eq(clickedIndex);
+					// 清空所有滑块项的class
+					this.slides.find('span').forEach(function(item){
+						item.className = "";
+					})
+					// 点击的元素添加class
+					clickSlide.find('span')[0].className = "active";
+					// 控制下面的列表内容滚动到对应的位置
+					me_list.slideTo(clickedIndex,300);
+					// 获取当前一屏的个数
+					var views_num = this.passedParams.slidesPerView;
+					// 滑动的线条
+					var bar = this.$el[0].querySelector(".bar");
+					// 线条进行移动
+					bar.style.left = 1/views_num * clickedIndex * 100 + "%";
+				})
+				
+			})
+			
+		// https://better-scroll.github.io/docs/zh-CN/plugins/pulldown.html#%E4%BD%BF%E7%94%A8	
+			
+		</script>
+	</body>
+</html>
-- 
GitLab

