first commit

历届学生/苏琪/项目练习/caipu/css/about.css

@@ -0,0 +1,15 @@
+body {
+  background: #fff;
+}
+.top-title {
+  width: 100%;
+  height: 4rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 .5rem;
+}
+.top-title h2{
+  font-size: .54rem;
+  padding-left: .4rem;
+}

历届学生/苏琪/项目练习/caipu/css/class.css

@@ -0,0 +1,67 @@
+body {
+  background: #fff !important;
+}
+.class-title{
+  margin-bottom: .42rem;
+}
+.class-title h2{
+  font-size: .64rem;
+  margin-bottom: .2rem;
+}
+.class-title p{
+  color: #8d8d8d;
+}
+.g-view {
+  padding: 0 .3rem;
+}
+.cell-item {
+  box-shadow: 0 0 .12rem #e8e8e8;
+}
+.class-caipu ul {
+  display: flex;
+  flex-wrap: wrap;
+}
+.class-caipu ul li{
+  width: 30%;
+  margin-right: .3rem;
+  position: relative;
+  margin-bottom: .3rem;
+}
+.class-caipu ul li:nth-child(3n){
+  margin-right: 0;
+}
+.class-caipu ul li img{
+  width: 100%;
+}
+.class-caipu ul li div{
+  position: absolute;
+  width: 100%;
+  height: 2.07rem;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.28);
+}
+.class-caipu ul li p{
+  position: absolute;
+  z-index: 3;
+  color: #fff;
+  left: 50%;
+  top: 50%;
+  margin-left: -0.24rem;
+  margin-top: -0.18rem;
+}
+.caipu-title {
+  display: flex;
+  justify-content: space-between;
+  height: .68rem;
+  align-items: center;
+}
+
+.caipu-title h3{
+  font-size: .3rem;
+}
+
+.caipu-title span{
+  font-size: .24rem;
+  color: #8d8d8d
+}

历届学生/苏琪/项目练习/caipu/css/clear.css

@@ -0,0 +1,3 @@
+.m-tabbar.tabbar-fixed {
+  bottom: -1px;
+}

历届学生/苏琪/项目练习/caipu/css/index.css

@@ -0,0 +1,52 @@
+.m-slider {
+  width: 95% !important;
+  margin: .1rem auto;
+}
+.slider-item {
+  width: 100% !important;
+}
+.m-grids-4 .grids-item:not(:nth-child(4n)):before,
+.m-grids-2:before, .m-grids-3:before, .m-grids-4:before, .m-grids-5:before {
+  border: none !important;
+}
+.grids-icon {
+  height: auto;
+}
+.grids-icon img{
+  width: .9rem;
+  height: .9rem;
+}
+.grids-txt {
+  margin-top: .2rem;
+}
+.list-theme3 .list-item:nth-child(odd):after,
+.list-theme3 .list-item:before {
+  border: none;
+}
+.list-cp {
+  margin-top: .4rem;
+}
+.list-title {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  height: 1rem;
+  align-items: center;
+}
+.list-title img{
+  width: .6rem;
+  height: .6rem;
+}
+.list-info {
+  margin-left: .2rem;
+}
+.list-info span{
+  font-size: .36rem;
+  color: #333;
+}
+
+.list-info p{
+  font-size: .2rem;
+  color: #999;
+  line-height: .24rem;
+}

历届学生/苏琪/项目练习/caipu/css/info.css

@@ -0,0 +1,95 @@
+body {
+  background: #fff;
+}
+.m-navbar {
+  background: rgba(255, 255, 255, 0);
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 99;
+  transition: all 1s;
+}
+.active {
+  background: rgba(0, 0, 0, 0.41);
+}
+.g-view:before {
+  height: 0 !important;
+}
+.m-navbar:after{
+  border: none !important;
+}
+.navbar-center .navbar-title {
+  color: #fff;
+}
+.cell-icon:before {
+  color: #fff !important;
+}
+.info-top {
+  width: 100%;
+  height: 4.5rem;
+  background: url("../img/info_1.jpg") center /cover no-repeat;
+  background-size: cover;
+}
+.top-zhezhao {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.42);
+}
+.info-title,
+.info-list-item{
+  padding: .24rem;
+}
+.info-title{
+  margin-bottom: .4rem;
+}
+.info-title h2{
+  font-size: .48rem;
+  color: #000;
+  margin-bottom: .2rem;
+}
+.info-title p{
+  font-weight: 300;
+  color: #666;
+  text-align: justify;
+  font-size: .34rem;
+  color: #333;
+  line-height: .5rem;
+}
+.info-list-item {
+  margin-bottom: .2rem;
+}
+.info-list-item h2{
+  height: .72rem;
+  line-height: .72rem;
+  font-size: .32rem;
+  color: #333;
+  font-weight: 900;
+}
+.info-list-item p{
+  color: #333;
+  font-size: .32rem;
+  font-weight: 300;
+  line-height: .48rem;
+  padding-bottom: .2rem;
+}
+.step-item h2{
+  height: .88rem;
+  line-height: .88rem;
+  color: #333; 
+  font-size: .38rem;
+  margin: .6rem 0 .2rem;
+  text-align: center;
+  display: block;
+  font-weight: 500;
+}
+.step-item p {
+  font-size: .34rem;
+  line-height: .5rem;
+  color: #333;
+  font-weight: 300;
+  text-align: justify;
+  padding: .32rem .4rem;
+}
+.step-item img {
+  width: 100%;
+}

历届学生/苏琪/项目练习/caipu/css/like.css

@@ -0,0 +1,3 @@
+.g-view:before {
+  height: 0;
+}

历届学生/苏琪/项目练习/caipu/css/moreclass.css

@@ -0,0 +1,44 @@
+body {
+  background: #fff;
+}
+.view-main,.g-view {
+  height: 100%;
+}
+.view-main .view-left {
+  width: 25%;
+  height: 100%;
+  float: left;
+  border-right: .02rem solid #e8e8e8;
+  position: fixed;
+  top: .9rem;
+  left: 0;
+  overflow-y: scroll;
+}
+
+.view-main .view-right {
+  width: 75%;
+  height: 100%;
+  float: left;
+  position: fixed;
+  left: 1.875rem;
+  top: .9rem;
+  overflow-y: scroll;
+}
+.view-main .view-right li{
+  float: left;
+  padding: .2rem;
+}
+.view-right ul{
+  padding-left: .2rem;
+}
+.view-main .view-left ul li{
+  height: .8rem; 
+  line-height: .8rem; 
+  text-align: center;
+}
+.view-main .view-left ul li:last-child{
+  margin-bottom: 42px;
+}
+.active {
+  color: red;
+}

历届学生/苏琪/项目练习/caipu/css/search.css

@@ -0,0 +1,14 @@
+.g-view:before {
+  height: 0 !important;
+}
+.m-navbar:after,
+.m-cell:after {
+  border-bottom: none !important;
+}
+body {
+  background: #fff;
+}
+.cell-input {
+  background: #f7f7f7;
+  padding-left: 10px;
+}

历届学生/苏琪/项目练习/caipu/css/share.min.css

@@ -0,0 +1,268 @@
+@font-face {
+	font-family:"socialshare";src:url("https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/fonts/iconfont.eot");src:url("https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/fonts/iconfont.eot?#iefix") format("embedded-opentype"),url("https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/fonts/iconfont.woff") format("woff"),url("https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/fonts/iconfont.ttf") format("truetype"),url("https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/fonts/iconfont.svg#iconfont") format("svg")
+}
+
+.social-share {
+	font-family: "socialshare" !important;
+	font-size: 16px;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-webkit-text-stroke-width: 0.2px;
+	-moz-osx-font-smoothing: grayscale
+}
+
+.social-share * {
+	font-family: "socialshare" !important
+}
+
+.social-share .icons-tencent:before {
+	content: "\f07a"
+}
+
+.social-share .icons-qq:before {
+	content: "\f11a"
+}
+
+.social-share .icons-weibo:before {
+	content: "\f12a"
+}
+
+.social-share .icons-wechat:before {
+	content: "\f09a"
+}
+
+.social-share .icons-douban:before {
+	content: "\f10a"
+}
+
+.social-share .icons-heart:before {
+	content: "\f20a"
+}
+
+.social-share .icons-like:before {
+	content: "\f00a"
+}
+
+.social-share .icons-qzone:before {
+	content: "\f08a"
+}
+
+.social-share .icons-linkedin:before {
+	content: "\f01a"
+}
+
+.social-share .icons-diandian:before {
+	content: "\f05a"
+}
+
+.social-share .icons-facebook:before {
+	content: "\f03a"
+}
+
+.social-share .icons-google:before {
+	content: "\f04a"
+}
+
+.social-share .icons-twitter:before {
+	content: "\f06a"
+}
+
+.social-share a {
+	position: relative;
+	text-decoration: none;
+	margin: 4px;
+	display: inline-block;
+	outline: none
+}
+
+.social-share .social-share-icon {
+	position: relative;
+	display: inline-block;
+	width: 32px;
+	height: 32px;
+	font-size: 20px;
+	border-radius: 50%;
+	line-height: 32px;
+	border: 1px solid #666;
+	color: #666;
+	text-align: center;
+	vertical-align: middle;
+	transition: background 0.6s ease-out 0s
+}
+
+.social-share .social-share-icon:hover {
+	background: #666;
+	color: #fff
+}
+
+.social-share .icons-weibo {
+	color: #ff763b;
+	border-color: #ff763b
+}
+
+.social-share .icons-weibo:hover {
+	background: #ff763b
+}
+
+.social-share .icons-tencent {
+	color: #56b6e7;
+	border-color: #56b6e7
+}
+
+.social-share .icons-tencent:hover {
+	background: #56b6e7
+}
+
+.social-share .icons-qq {
+	color: #56b6e7;
+	border-color: #56b6e7
+}
+
+.social-share .icons-qq:hover {
+	background: #56b6e7
+}
+
+.social-share .icons-qzone {
+	color: #FDBE3D;
+	border-color: #FDBE3D
+}
+
+.social-share .icons-qzone:hover {
+	background: #FDBE3D
+}
+
+.social-share .icons-douban {
+	color: #33b045;
+	border-color: #33b045
+}
+
+.social-share .icons-douban:hover {
+	background: #33b045
+}
+
+.social-share .icons-linkedin {
+	color: #0077B5;
+	border-color: #0077B5
+}
+
+.social-share .icons-linkedin:hover {
+	background: #0077B5
+}
+
+.social-share .icons-facebook {
+	color: #44619D;
+	border-color: #44619D
+}
+
+.social-share .icons-facebook:hover {
+	background: #44619D
+}
+
+.social-share .icons-google {
+	color: #db4437;
+	border-color: #db4437
+}
+
+.social-share .icons-google:hover {
+	background: #db4437
+}
+
+.social-share .icons-twitter {
+	color: #55acee;
+	border-color: #55acee
+}
+
+.social-share .icons-twitter:hover {
+	background: #55acee
+}
+
+.social-share .icons-diandian {
+	color: #307DCA;
+	border-color: #307DCA
+}
+
+.social-share .icons-diandian:hover {
+	background: #307DCA
+}
+
+.social-share .icons-wechat {
+	position: relative;
+	color: #7bc549;
+	border-color: #7bc549
+}
+
+.social-share .icons-wechat:hover {
+	background: #7bc549
+}
+
+.social-share .icons-wechat .wechat-qrcode {
+	display: none;
+	border: 1px solid #eee;
+	position: absolute;
+	z-index: 9;
+	top: -205px;
+	left: -84px;
+	width: 200px;
+	height: 192px;
+	color: #666;
+	font-size: 12px;
+	text-align: center;
+	background-color: #fff;
+	box-shadow: 0 2px 10px #aaa;
+	transition: all 200ms;
+	-webkit-tansition: all 350ms;
+	-moz-transition: all 350ms
+}
+
+.social-share .icons-wechat .wechat-qrcode.bottom {
+	top: 40px;
+	left: -84px
+}
+
+.social-share .icons-wechat .wechat-qrcode.bottom:after {
+	display: none
+}
+
+.social-share .icons-wechat .wechat-qrcode h4 {
+	font-weight: normal;
+	height: 26px;
+	line-height: 26px;
+	font-size: 12px;
+	background-color: #f3f3f3;
+	margin: 0;
+	padding: 0;
+	color: #777
+}
+
+.social-share .icons-wechat .wechat-qrcode .qrcode {
+	width: 105px;
+	margin: 10px auto
+}
+
+.social-share .icons-wechat .wechat-qrcode .qrcode table {
+	margin: 0 !important
+}
+
+.social-share .icons-wechat .wechat-qrcode .help p {
+	font-weight: normal;
+	line-height: 16px;
+	padding: 0;
+	margin: 0
+}
+
+.social-share .icons-wechat .wechat-qrcode:after {
+	content: '';
+	position: absolute;
+	left: 50%;
+	margin-left: -6px;
+	bottom: -13px;
+	width: 0;
+	height: 0;
+	border-width: 8px 6px 6px 6px;
+	border-style: solid;
+	border-color: #fff transparent transparent transparent
+}
+
+.social-share .icons-wechat:hover .wechat-qrcode {
+	display: block
+}

历届学生/苏琪/项目练习/caipu/js/class.js

@@ -0,0 +1,48 @@
+
+// 好处！！
+// 1: 使用自执行函数，让函数自己运行
+// 2: 使用局部作用域避免变量和方法的污染
+(function (){
+
+  let lists = classDaras.result;
+  console.log(lists)
+
+  /**
+   * 1：只为了渲染页面
+   */
+  function RenderLeftMenu() {
+    lists.forEach(function(val,index) {
+      $(".view-left ul").append(`<li class="${ index == 0 ? 'active':'' }">${val.name}</li>`)
+    })
+  }
+
+  /**
+   * 绑定点击事件
+   */
+  function BindClick() {
+    $(".view-left ul li").on('click',function(){
+      
+      $(this).addClass('active').siblings().removeClass('active')
+      RenderRightMenu( $(".view-left ul li").index($(this)) )
+    })
+  }
+
+  /**
+   * 渲染右边对应的子分类
+   * @param {*} id 
+   */
+  function RenderRightMenu(id) {
+    $(".view-right ul").empty();
+    lists[id].list.forEach(val =>{
+      $(".view-right ul").append(`<li>
+                                    <a href="./list.html?id=${val.id}&status=true">${val.name}</a>
+                                  </li>`)
+    })
+  }
+
+  RenderLeftMenu()
+  BindClick()
+  RenderRightMenu(0)
+
+
+})()

历届学生/苏琪/项目练习/caipu/js/index.js

@@ -0,0 +1,31 @@
+(function() {
+
+  var keyWord = "西红柿"
+
+  http({
+    url: '/query',
+    type: 'GET',
+    data: {
+      keyword: keyWord
+    }
+  }, function(res) {
+    console.log(res)
+    let result = res.data;
+    result.forEach(val => {
+      $('.m-list').append(`<a class="list-item">
+                                <div class="list-img">
+                                    <img src="${val.albums[0]}">
+                                </div>
+                                <div class="list-mes">
+                                    <h3 class="list-title">${val.title}</h3>
+                                    <div class="list-mes-item">
+                                        <div>
+                                            <span class="list-del-price">${val.tags.substring(0,10)}...</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>`)
+    });
+  })
+
+})()

历届学生/苏琪/项目练习/caipu/js/list.js

@@ -0,0 +1,40 @@
+(function() {
+
+  // getClassInfo 
+  let id = GetQueryString("id")
+  let status = GetQueryString("status"), url = ""
+
+  if(status == "true") {
+    url = "/getClassInfo"
+  } else {
+    url = "/query"
+  }
+
+  http({
+    url: url,
+    type: "GET",
+    data: {
+      cid: id,
+      pn: 0
+    }
+  }, function(res){
+    let result = res.data;
+    result.forEach(val => {
+      $('.m-list').append(`<a  class="list-item">
+                            <div class="list-img">
+                                    <img src="${val.albums[0]}">
+                                </div>
+                                <div class="list-mes">
+                                    <h3 class="list-title">${val.title}</h3>
+                                    <div class="list-mes-item">
+                                        <div>
+                                            <p>${val.imtro.substring(0,20)}</p>  
+                                            <span >${val.ingredients}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>`)
+    });
+  })
+
+})()

历届学生/苏琪/项目练习/caipu/js/utils.js

@@ -0,0 +1,22 @@
+
+  
+  function http(params,cb) {
+
+    //return new Promise(function(resolve,reject){
+      $.ajax({
+        url: "http://127.0.0.1:3300"+params.url,
+        type: params.type,
+        data: params.data,
+        success: function(res) {
+          cb(res.result)
+        }
+      })
+    //})
+  }
+
+
+  function GetQueryString(name) {
+    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+    var r = window.location.search.substr(1).match(reg);
+    if(r!=null) return  unescape(r[2]); return null;
+  }

历届学生/苏琪/项目练习/caipu/js/ydui.flexible.js

@@ -0,0 +1 @@
+!function(t){var e=750,i=t.document,n=i.documentElement,o="orientationchange"in t?"orientationchange":"resize",a=function t(){var i=n.getBoundingClientRect().width;return n.style.fontSize=5*Math.max(Math.min(i/e*20,11.2),8.55)+"px",t}();n.setAttribute("data-dpr",t.navigator.appVersion.match(/iphone/gi)?t.devicePixelRatio:1),/iP(hone|od|ad)/.test(t.navigator.userAgent)&&(i.documentElement.classList.add("ios"),parseInt(t.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1],10)>=8&&i.documentElement.classList.add("hairline")),i.addEventListener&&(t.addEventListener(o,a,!1),i.addEventListener("DOMContentLoaded",a,!1))}(window);

历届学生/苏琪/项目练习/caipu/view/about.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <!-- 引入YDUI样式 -->
+   <link rel="stylesheet" href="../css/ydui.css" />
+   <link rel="stylesheet" href="../css/clear.css">
+   <link rel="stylesheet" href="../css/about.css">
+   <!-- 引入YDUI自适应解决方案类库 -->
+   <script src="../js/ydui.flexible.js"></script>
+  <title>我的</title>
+</head>
+<body>
+
+  <div class="g-view">
+    <div class="top-title">
+      <h2>我的美食之旅</h2>
+      <i class="icon-ucenter-outline" style="font-size: 56px;"></i>
+    </div>
+    <div class="m-cell">
+      <a class="cell-item" href="./like.html">
+          <div class="cell-left">
+            我的收藏
+          </div>
+          <div class="cell-right">
+            <i class="cell-icon icon-like-outline"></i>
+          </div>
+      </a>
+      <a class="cell-item" href="javascript:; ">
+        <div class="cell-left">
+          意见反馈
+        </div>
+        <div class="cell-right">
+          <i class="cell-icon icon-feedback"></i>
+        </div>
+      </a>
+      
+  </div>
+  </div>
+
+  <footer class="m-tabbar tabbar-fixed">
+    <a href="./index.html" class="tabbar-item">
+        <span class="tabbar-icon">
+            <i class="icon-home"></i>
+        </span>
+        <span class="tabbar-txt">首页</span>
+    </a>
+    <a href="./class.html" class="tabbar-item">
+        <span class="tabbar-icon">
+          <i class="icon-type"></i>
+        </span>
+        <span class="tabbar-txt">分类</span>
+    </a>
+    <a href="./about.html" class="tabbar-item tabbar-active">
+        <span class="tabbar-icon">
+            <i class="icon-ucenter-outline"></i>
+        </span>
+        <span class="tabbar-txt">我的</span>
+    </a>
+  </footer>
+
+</body>  

历届学生/苏琪/项目练习/caipu/view/class.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <!-- 引入YDUI样式 -->
+   <link rel="stylesheet" href="../css/ydui.css" />
+   <link rel="stylesheet" href="../css/clear.css">
+   <link rel="stylesheet" href="../css/class.css">
+   <!-- 引入YDUI自适应解决方案类库 -->
+   <script src="../js/ydui.flexible.js"></script>
+  <title>分类</title>
+</head>
+<body>
+
+    <div class="g-view">
+        <div class="class-title">
+          <h2>分类</h2>
+          <p>要吃什么，这里都有！</p>
+        </div>
+        <div class="m-cell">
+          <div class="cell-item">
+              <div class="cell-left">
+                <i class="cell-icon icon-search"></i>
+              </div>
+              <div class="cell-right">
+                <input type="text" class="cell-input" placeholder="点这里，做不一样的菜">
+              </div>
+          </div>
+        </div>
+
+        <div class="class-caipu">
+          <div class="caipu-title">
+            <h3>菜谱分类</h3>
+            <span>
+              <a href="./moreclass.html">更多分类</a>
+            </span>
+          </div>
+          <ul>
+            <li>
+              <img src="../img/class_shop_1.jpg" alt="">
+              <div></div>
+              <p>
+                <a href="./moreclass.html?id=6">菜肴</a>
+              </p>
+            </li>
+            <li>
+              <img src="../img/class_shop_1.jpg" alt="">
+              <div></div>
+              <p>
+                <a href="./moreclass.html?id=8">西点</a>
+              </p>
+            </li>
+            <li>
+              <img src="../img/class_shop_1.jpg" alt="">
+              <div></div>
+              <p>
+                <a href="./moreclass.html?id=5">工艺口味</a>
+              </p>
+            </li>
+            <li>
+              <img src="../img/class_shop_1.jpg" alt="">
+              <div></div>
+              <p>
+                <a href="./moreclass.html?id=7">主食</a>
+              </p>
+            </li>
+            <li>
+              <img src="../img/class_shop_1.jpg" alt="">
+              <div></div>
+              <p>
+                <a href="./moreclass.html?id=10">其他菜品</a>
+              </p>
+            </li>
+            <li>
+              <img src="../img/class_shop_1.jpg" alt="">
+              <div></div>
+              <p>
+                <a href="./moreclass.html?id=11">人群</a>
+              </p>
+            </li>
+          </ul>
+        </div>
+    </div>
+
+
+    <footer class="m-tabbar tabbar-fixed">
+        <a href="./index.html" class="tabbar-item">
+            <span class="tabbar-icon">
+                <i class="icon-home"></i>
+            </span>
+            <span class="tabbar-txt">首页</span>
+        </a>
+        <a href="./class.html" class="tabbar-item tabbar-active">
+            <span class="tabbar-icon">
+              <i class="icon-type"></i>
+            </span>
+            <span class="tabbar-txt">分类</span>
+        </a>
+        <a href="./about.html" class="tabbar-item">
+            <span class="tabbar-icon">
+                <i class="icon-ucenter-outline"></i>
+            </span>
+            <span class="tabbar-txt">我的</span>
+        </a>
+    </footer>
+
+
+
+
+
+    <!-- 引入jQuery 2.0+ -->
+    <script src="../js/jquery.js"></script>
+    <!-- 引入YDUI脚本 -->
+    <script src="../js/ydui.js"></script>
+    <script src="../js/utils.js"></script>
+
+    <script>
+        Search('.cell-input')
+     </script>
+
+</body>

历届学生/苏琪/项目练习/caipu/view/index.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <!-- 引入YDUI样式 -->
+   <link rel="stylesheet" href="../css/ydui.css" />
+   <link rel="stylesheet" href="../css/clear.css">
+   <link rel="stylesheet" href="../css/index.css">
+   <!-- 引入YDUI自适应解决方案类库 -->
+   <script src="../js/ydui.flexible.js"></script>
+  <title>首页</title>
+</head>
+<body>
+
+
+    <header class="m-navbar navbar-fixed">
+        <a href="./about.html" class="navbar-item">
+          <i class="cell-icon icon-ucenter-outline"></i>
+        </a>
+        <div class="navbar-center">
+            <span class="navbar-title">
+              舌尖秘籍
+            </span>
+        </div>
+        <a onclick="javascript:location.href='./search.html' " class="navbar-item">
+            <i class="cell-icon icon-search"></i>
+        </a>
+    </header>
+
+    <div class="g-view">
+        <div class="m-slider" id="J_Slider">
+            <div class="slider-wrapper">
+                <div class="slider-item">
+                    <a href="#">
+                        <img src="../img/banner_1.jpg">
+                    </a>
+                </div>
+                <div class="slider-item">
+                    <a href="#">
+                        <img src="../img/banner_2.jpg">
+                    </a>
+                </div>
+                <div class="slider-item">
+                    <a href="#">
+                        <img src="../img/banner_3.png">
+                    </a>
+                </div>
+            </div>
+            <div class="slider-pagination"></div><!-- 分页标识 -->
+        </div>
+
+        <div class="m-grids-4">
+            <a href="./moreclass.html?id=1" class="grids-item">
+                <div class="grids-icon">
+                  <img src="../img/class_1.png">
+                </div>
+                <div class="grids-txt">
+                  <span>菜系</span>
+                </div>
+            </a>
+            <a href="./moreclass.html?id=9" class="grids-item">
+                <div class="grids-icon">
+                    <img src="../img/class_2.png">
+                  </div>
+                <div class="grids-txt">
+                  <span>汤羹饮品</span>
+                </div>
+            </a>
+            <a href="./moreclass.html?id=4" class="grids-item">
+                <div class="grids-icon">
+                    <img src="../img/class_3.png">
+                  </div>
+                <div class="grids-txt">
+                  <span>场景</span>
+                </div>
+            </a>
+            <a href="./moreclass.html?id=7" class="grids-item">
+                <div class="grids-icon">
+                    <img src="../img/class_4.png">
+                  </div>
+                <div class="grids-txt">
+                  <span>主食</span>
+                </div>
+            </a>
+        </div>
+
+       <div class="list-cp">
+         <div class="list-title">
+           <img src="../img/home_title_love.png" alt="">
+           <div class="list-info">
+             <span>猜你喜欢</span>
+             <p>21:16为您更新</p>
+           </div>
+         </div>
+        <article class="m-list list-theme3">
+           
+        </article>
+       </div>
+
+    </div>
+
+    <footer class="m-tabbar tabbar-fixed">
+        <a href="./index.html" class="tabbar-item tabbar-active">
+            <span class="tabbar-icon">
+                <i class="icon-home"></i>
+            </span>
+            <span class="tabbar-txt">首页</span>
+        </a>
+        <a href="./class.html" class="tabbar-item">
+            <span class="tabbar-icon">
+              <i class="icon-type"></i>
+            </span>
+            <span class="tabbar-txt">分类</span>
+        </a>
+        <a href="./about.html" class="tabbar-item">
+            <span class="tabbar-icon">
+                <i class="icon-ucenter-outline"></i>
+            </span>
+            <span class="tabbar-txt">我的</span>
+        </a>
+    </footer>
+
+
+  <!-- 引入jQuery 2.0+ -->
+  <script src="../js/jquery.js"></script>
+  <!-- 引入YDUI脚本 -->
+  <script src="../js/ydui.js"></script>
+  <script src="../js/utils.js"></script>
+  <script src="../js/index.js"></script>
+  <script>
+  </script>
+</body>
+</html>

历届学生/苏琪/项目练习/caipu/view/info.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <!-- 引入YDUI样式 -->
+   <link rel="stylesheet" href="../css/share.min.css">
+   <link rel="stylesheet" href="../css/ydui.css" />
+   <link rel="stylesheet" href="../css/clear.css">
+   <link rel="stylesheet" href="../css/info.css">
+   <!-- 引入YDUI自适应解决方案类库 -->
+   <script src="../js/ydui.flexible.js"></script>
+  
+  
+  <title></title>
+  <style>
+   .share {
+    position: fixed;
+    width: 100%;
+    height: 60px;
+    left: 0;
+    bottom: -60px;
+    z-index: 999;
+    background: #fff;
+    padding-top: 10px;
+    text-align: center;
+   }
+  </style>
+</head>
+<body>
+
+  <header class="m-navbar">
+    <a href="#" class="navbar-item">
+      <i class="cell-icon back-ico" onclick="javascript:history.back()"></i>
+      <i class="cell-icon icon-share2"></i>
+    </a>
+    <div class="navbar-center">
+        <span class="navbar-title">菜品详情</span>
+    </div>
+    <div class="navbar-item">
+        <a href="#">
+          <i class="like cell-icon icon-star-outline"></i>
+        </a>
+    </div>
+  </header>
+
+  <div class="g-view">
+    <div class="info-top">
+      <div class="top-zhezhao"></div>
+    </div>
+    <div class="info-action">
+      <div class="info-title">
+        <h2>香辣豆豉鲫鱼</h2>
+        <p>以前我们介绍过【午餐肉】、【清蒸猪肉】等常见的罐头口味菜品的烹饪方法，今天我们再介绍一道常见的罐头食品【豆豉鲫鱼】的做法...</p>
+      </div>
+      <div class="info-list-item zhu">
+        <h2>主料</h2>
+        <p>荷叶饼,6张;韭菜,200g;绿豆芽,200g;肉馅,200g</p>
+      </div>
+      <div class="info-list-item fu">
+        <h2>辅料</h2>
+        <p>盐,适量;水淀粉,适量</p>
+      </div>
+      <div class="info-step">
+        
+      </div>
+    </div>
+  </div>
+
+  <div class="share">
+    <div class="social-share" data-disabled="google,twitter,facebook"></div>
+  </div>
+
+  <!-- 引入jQuery 2.0+ -->
+  <script src="../js/jquery.js"></script>
+  <!-- 引入YDUI脚本 -->
+  <script src="../js/ydui.js"></script>
+  <script src="../js/utils.js"></script>
+  <script src="../js/info.js"></script>
+
+  <script src="../js/social-share.min.js"></script>
+  
+  <script>
+    // jq 监听页面滚动
+    $(window).scroll(function(){
+      //获取当前滑动的位置
+      var scrollTop = $(window).scrollTop();
+      // 如果大于导航条 45px 时候添加 改变背景色的类名
+      if(scrollTop > 45){
+          $(".m-navbar").addClass("active");
+      }else{ // 否则移除
+          $(".m-navbar").removeClass("active");
+      }
+    })
+  </script>  
+</body>
+</html>    

历届学生/苏琪/项目练习/caipu/view/like.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <!-- 引入YDUI样式 -->
+   <link rel="stylesheet" href="../css/share.min.css">
+   <link rel="stylesheet" href="../css/ydui.css" />
+   <link rel="stylesheet" href="../css/clear.css">
+   <link rel="stylesheet" href="../css/like.css">
+   <!-- 引入YDUI自适应解决方案类库 -->
+   <script src="../js/ydui.flexible.js"></script>
+  
+  <title></title>
+
+</head>
+
+
+  <header class="m-navbar">
+      <a onclick="javascript:history.back()" class="navbar-item">
+          <i class="back-ico"></i>
+      </a>
+      <div class="navbar-center">
+          <span class="navbar-title">收藏列表</span>
+      </div>
+  </header>
+
+  <div class="g-view">
+      <div class="m-actionsheet" id="J_ActionSheet">
+          <a href="#" class="actionsheet-item delete">删除该分类</a>
+          <a href="javascript:;" class="actionsheet-action" id="J_Cancel">取消</a>
+      </div>
+      <article class="m-list list-theme4">
+      </article>
+  </div>
+
+
+  <!-- 引入jQuery 2.0+ -->
+  <script src="../js/jquery.js"></script>
+  <!-- 引入YDUI脚本 -->
+  <script src="../js/ydui.js"></script>
+  <script src="../js/utils.js"></script>
+  <script src="../js/like.js"></script>
+  
+  <script>
+    // jq 监听页面滚动
+    $(window).scroll(function(){
+      //获取当前滑动的位置
+      var scrollTop = $(window).scrollTop();
+      // 如果大于导航条 45px 时候添加 改变背景色的类名
+      if(scrollTop > 45){
+          $(".m-navbar").addClass("active");
+      }else{ // 否则移除
+          $(".m-navbar").removeClass("active");
+      }
+    })
+  </script>  
+</body>
+</html>    

历届学生/苏琪/项目练习/caipu/view/list.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <!-- 引入YDUI样式 -->
+   <link rel="stylesheet" href="../css/ydui.css" />
+   <link rel="stylesheet" href="../css/clear.css">
+   <link rel="stylesheet" href="../css/index.css">
+   <!-- 引入YDUI自适应解决方案类库 -->
+   <script src="../js/ydui.flexible.js"></script>
+  <title>菜单列表</title>
+</head>
+<body>
+
+
+  <header class="m-navbar navbar-fixed">
+    <a onclick="javascript:history.back()" class="navbar-item">
+        <i class="cell-icon back-ico"></i>
+    </a>
+    <div class="navbar-center">
+      <span class="navbar-title">菜品列表</span>
+    </div>
+    <a onclick="javascript:location.href='./search.html' " class="navbar-item">
+      <i class="cell-icon icon-search"></i>
+    </a>
+  </header>
+
+  <div class="g-view">
+      <article class="m-list list-theme4">
+      </article>
+  </div>
+ 
+
+
+
+  <!-- 引入jQuery 2.0+ -->
+  <script src="../js/jquery.js"></script>
+  <!-- 引入YDUI脚本 -->
+  <script src="../js/ydui.js"></script>
+  <script src="../js/utils.js"></script>
+  <script src="../js/list.js"></script>
+</body>
+</html>  

历届学生/苏琪/项目练习/caipu/view/moreclass.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <!-- 引入YDUI样式 -->
+   <link rel="stylesheet" href="../css/ydui.css" />
+   <link rel="stylesheet" href="../css/clear.css">
+   <link rel="stylesheet" href="../css/moreclass.css">
+   <!-- 引入YDUI自适应解决方案类库 -->
+   <script src="../js/ydui.flexible.js"></script>
+  <title>更多分类</title>
+</head>
+<body>
+
+
+    <header class="m-navbar navbar-fixed">
+      <a onclick="javascript:history.back()" class="navbar-item">
+          <i class="cell-icon back-ico"></i>
+      </a>
+      <div class="navbar-center">
+        <span class="navbar-title">分类</span>
+      </div>
+      <a onclick="javascript:location.href='./search.html' " class="navbar-item">
+        <i class="cell-icon icon-search"></i>
+      </a>
+    </header>
+
+    <div class="g-view">
+     <div class="view-main">
+      <div class="view-left">
+        <ul>
+          
+        </ul>
+      </div>
+      <div class="view-right">
+       <ul>
+         
+       </ul>
+      </div>
+     </div>
+    </div>
+
+  <!-- 引入jQuery 2.0+ -->
+  <script src="../js/jquery.js"></script>
+  <!-- 引入YDUI脚本 -->
+  <script src="../js/ydui.js"></script>
+  <script src="../js/classData.js"></script>
+  <script src="../js/class.js"></script>
+
+<body

历届学生/苏琪/项目练习/caipu/view/search.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <!-- 引入YDUI样式 -->
+   <link rel="stylesheet" href="../css/ydui.css" />
+   <link rel="stylesheet" href="../css/clear.css">
+   <link rel="stylesheet" href="../css/search.css">
+   <!-- 引入YDUI自适应解决方案类库 -->
+   <script src="../js/ydui.flexible.js"></script>
+  <title>搜索</title>
+</head>
+<body>
+
+
+    <header class="m-navbar">
+        <a onclick="javascript:history.back()" class="navbar-item">
+            <i class="back-ico"></i>
+        </a>
+        <div class="navbar-center">
+            <span class="navbar-title">搜索</span>
+        </div>
+    </header>
+
+    <div class="g-view">
+        <div class="m-cell">
+          <div class="cell-item">
+              <div class="cell-left">
+                <i class="cell-icon icon-search"></i>
+              </div>
+              <div class="cell-right">
+                <input type="text" class="cell-input searchKey" placeholder="点这里，做不一样的菜">
+              </div>
+          </div>
+        </div>
+    </div>
+
+
+  <!-- 引入jQuery 2.0+ -->
+  <script src="../js/jquery.js"></script>
+  <!-- 引入YDUI脚本 -->
+  <script src="../js/ydui.js"></script>
+  <script src="../js/utils.js"></script>
+
+  <script>
+    Search('.searchKey')
+  </script>
+</body>
+</html>