first commit

历届学生/逯帅帅/项目开发/上课项目/美食App/css/page/index.css

@@ -0,0 +1,112 @@
+.menu_type {
+    display: flex;
+    flex-wrap: wrap;
+}
+.menu_type li {
+    width: 20%;
+    text-align: center;
+}
+.menu_type img {
+    width: 0.5rem;
+    height: 0.5rem;
+}
+.menu_type p {
+    font-size: 0.12rem;
+    color: #666;
+}
+
+.three_meals {
+    margin-top: 0.25rem;
+    margin-bottom: 0.3rem;
+}
+.title{
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: #999;
+    line-height: 0.22rem;
+}
+.meals_title{
+    display: flex;
+    align-items: flex-end;
+    height: 0.42rem;
+    margin-bottom: 0.15rem;
+}
+.meals_title .active {
+    color: #333 !important;
+    font-size: 0.3rem !important;
+}
+.meals_title .active::after {
+    content: '';
+    height: 0.06rem;
+    border-radius: 0.03rem;
+    width: 100%;
+    left: 0px;
+    bottom: 0.03rem;
+    background: #ff9d9b;
+    position: absolute;
+    z-index: 50;
+    display: block;
+}
+.meals_title li{
+    position: relative;
+    font-size: .16rem;
+    color: #666;
+    margin-right: 0.2rem;
+}
+
+.recommend {
+    margin-bottom: 15px;
+}
+.recommend_title {
+    font-size: 25px;
+    font-weight: 600;
+    color: #333;
+    line-height: 36px;
+    margin-bottom: 20px;
+}
+.recommend_list {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+.recommend_list li {
+    width: 30%;
+    box-shadow: 0px 0px 0.12rem rgb(0 0 0 / 10%);
+    background: #fff;
+    border-radius: 0.23rem;
+    margin-bottom: 0.22rem;
+}
+.recommend_active {
+    background: #fe9b95 !important;
+    box-shadow: 0px 0px 0.12rem rgba(255,155,149,0.5) !important;
+}
+.recommend_active a span{
+    color: #fff !important;
+}
+.recommend_list li a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+}
+.recommend_list li img {
+    width: 0.19rem;
+    height: 0.19rem;
+    margin-right: 0.04rem;
+}
+.recommend_list li span {
+    font-size: 0.13rem;
+    color: #333;
+    line-height: 0.46rem;
+    display: inline-block;
+    vertical-align: top;
+    font-weight: 600;
+}
+
+.djdzz_list {
+    display: none;
+    overflow: hidden;
+}
+.djdzz_father .active {
+    display: block !important;
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/css/page/info.css

@@ -0,0 +1,177 @@
+.headers {
+    height: 375px;
+    overflow: hidden;
+}
+.header_action {
+    position: fixed;
+    width: 100%;
+    top: 16px;
+    left: 0;
+    right: 0;
+    padding: 0 16px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    z-index: 9999;
+}
+.headers img {
+    width: 100%;
+    position: relative;
+    top: -66px;
+}
+.header_action div {
+    font-size: 14px;
+    color: #fff;
+    background: rgba(0,0,0,0.5);
+    border-radius: .75rem;
+    z-index: 145;
+    height: 30px;
+    padding: 0 12px;
+    line-height: 30px;
+}
+.content_info {
+    background: #fff;
+    box-sizing: border-box;
+    position: relative;
+    box-shadow: 0px 0px 1.6rem rgb(0 0 0 / 10%);
+    border-radius: 16px;
+    padding: 20px 15px 10px;
+    margin: -60px 16px 16px ;
+}
+body {
+    background: #fafafa;
+}
+.list_title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.list_title h2 {
+    font-size: 20px;
+    font-weight: 400;
+}
+.list_title i {
+    font-size: 20px;
+    color: #212121;
+}
+.posttime {
+    font-size: 12px;
+    color: #999;
+    line-height: 20px;
+    display: block;
+    padding-top: 4px;
+    border-bottom: 1px solid #f5f5f5;
+    padding-bottom: 10px;
+}
+.setp {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+.setp li{
+    text-align: center;
+}
+.setp li .icons{
+    width: 30px;
+    height: 30px;
+    background: url("https://st-cn.meishij.net/p2/20200221/20200221173101_145.png");
+    background-size: 30px 150px;
+    background-position: 0px 0px;
+    margin: 0 auto;
+}
+.setp li p{
+    color: #666;
+    font-size: 12px;
+}
+.list_text {
+    overflow: hidden;
+    height: 42px;
+    font-weight: 400;
+    text-align: justify;
+    color: #999999;
+    margin-top: 20px;
+    position: relative;
+}
+.list_text p {
+    font-size: 14px;
+    line-height: 21px;
+}
+.more{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding-left: 60px;
+    font-size: 14px;
+    color: #5a92f5;
+    background-image: linear-gradient(to right,rgba(255,255,255,0.1),rgba(255,255,255,0.5),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1));
+}
+.cailiao {
+    margin-top: 20px;
+}
+.main_liao {
+    margin-bottom: 15px;
+}
+.main_liao .title {
+    margin-bottom: 7px;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+    padding-bottom: 10px;
+    font-size: 14px;
+}
+.main_liao li {
+    display: flex;
+    justify-content: space-between;
+    height: 34px;
+    align-items: center;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+}
+.main_liao li span {
+    font-size: 14px;
+    color: #999;
+    font-weight: 400;
+}
+.setp_content {
+    margin-top: 20px;
+}
+.setp_content li {
+    position: relative;
+}
+.setp_content .step_text {
+    height: 40px;
+    line-height: 40px;
+    color: #333;
+    font-size: 18px;
+    font-weight: 700;
+    display: inline-block;
+    vertical-align: top;
+    padding: 0px 15px 0px 20px;
+    background: rgba(255,255,255,0.9);
+    position: absolute;
+    left: 0px;
+    top: 15px;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    z-index: 100;
+}
+.setp_content img {
+    width: 100%;
+}
+.setp_content h3 {
+    font-size: 20px;
+    font-weight: 400;
+    margin-left: 10px;
+    margin-top: 20px;
+}
+.setp_content p {
+    padding: 15px;
+    box-sizing: border-box;
+    font-size: 14px;
+}
+.tabs_img {
+    margin-top: 14px;
+}
+.tabs_img img {
+    width: 70px;
+    height: 70px;
+    margin-right: 10px;
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/css/page/search.css

@@ -0,0 +1,39 @@
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e2e2e2;
+    height: 45px;
+}
+.header .submitSearch{
+    width: 55px;
+    height: 33px;
+    background: #ff4c39;
+    border-radius: 2px;
+    color: #fff;
+    font-size: 15px;
+    box-sizing: border-box;
+    line-height: 33px;
+    text-align: center;
+}
+.header a {
+    display: inline-block;
+    width: 44px;
+}
+.header input {
+    height: 32px;
+    background: #eee;
+    border-radius: 2px;
+    color: #333;
+    font-size: 14px;
+    width: 75%;
+    box-sizing: border-box;
+    display: block;
+    padding: 4px 8px;
+    line-height: 24px;
+    margin-right: 10px;
+}
+.nodata {
+    font-size: 14px;
+    margin: 0 auto;
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/css/page/type.css

@@ -0,0 +1,66 @@
+.type {
+    height: calc(100vh - 79.47px);
+    display: flex;
+}
+.content {
+    padding-bottom: 0 !important;
+}
+.type_left {
+    width: 80px;
+    background: #f5f5f5;
+    overflow-y: scroll;
+}
+.type_left .active {
+    background: #fff;
+}
+
+.type_left li {
+    font-size: 14px;
+    height: 70px;
+    padding: 10px 0px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.type_left li .icon {
+    width: 25px;
+    height: 25px;
+    background: url("https://s1.st.meishij.net/p2/20191108/20191108113258_481.png");
+    background-size: 25px 500px;
+}
+.type_left li span {
+    color: #333;
+    font-size: 12px;
+}
+.type_right {
+    width: calc(100% - 80px);
+    overflow-y: scroll;
+}
+.type_right .li {
+    float: left;
+    width: 33%;
+    text-align: center;
+    padding: 0px 10px 16px;
+    box-sizing: border-box;
+}
+.type_right .right_contet {
+    overflow: hidden;
+    display: none;
+}
+.type_right .active {
+    display: block !important;
+}
+.type_right .li img{
+    width: 62px;
+    height: 62px;
+}
+.type_right .li p{
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    color: #333;
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/css/page/video.css

@@ -0,0 +1,26 @@
+.header {
+    height: 50px;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    background: #fff;
+    z-index: 9999;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+    align-items: center;
+}
+.back i {
+    color: #333;
+}
+.back a {
+    color: #333;
+    font-size: 16px;
+}
+.header p {
+    font-size: 18px;
+    color: #000;
+    font-weight: 600;
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/css/tool/clear.css

@@ -0,0 +1,15 @@
+body,ul,li,h1,h2,h3,h4,h5,h6,p {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+input {
+    outline: none;
+    border: none;
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/css/tool/public.css

@@ -0,0 +1,160 @@
+.header {
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: 9999;
+    padding: 0.16rem;
+    box-sizing: border-box;
+    background: #fff;
+}
+.search {
+    height: 0.4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding-left: 0.2rem;
+}
+.search i {
+    color: #999;
+}
+.search span {
+    font-size: 0.16rem;
+    color: #999;
+    margin-left: 0.08rem;
+}
+.padd_16 {
+    padding: 0 0.16rem;
+}
+.content {
+    padding-top: 0.72rem;
+    padding-bottom: 51px;
+}
+
+.footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 51px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background: #fff;
+    z-index: 9999;
+    border-top: 1px solid #eaeaea;
+}
+.footer .jihuo {
+    color: #f15a4f;
+}
+.footer li a {
+    text-align: center;
+}
+.footer li img {
+    width: 30px;
+    height: 30px;
+}
+.footer li p {
+    font-size: 10px;
+    color: #666666;
+}
+
+.three_meals_list {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.djdzz_list .djdzz_item:nth-child(2n) {
+    margin-right: 0 !important;
+}
+.djdzz_item {
+    box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
+    border-bottom-left-radius: 0.07rem;
+    border-bottom-right-radius: 0.07rem;
+    margin-bottom: 14px;
+    width: 49%;
+    float: left;
+    margin-right: 5px;
+}
+.djdzz_item img {
+    height: 222px;
+    width: 100%;
+    border-top-left-radius: 0.07rem;
+    border-top-right-radius: 0.07rem;
+}
+.cons {
+    box-sizing: border-box;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+}
+.user {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+}
+.user_left img {
+    width: 18px;
+    height: 18px;
+    border-radius: 100%;
+    vertical-align: bottom;
+}
+.user_left span {
+    height: 18px;
+    font-size: 9px;
+    color: #666;
+    padding-left: 5px;
+}
+.user_right i {
+    font-size: 10px;
+}
+.user_right span {
+    padding-left: 15px;
+    color: #666;
+    font-size: 9px;
+}
+.text{
+    font-size: 0.18rem;
+    font-weight: 600;
+    color: #333;
+    padding: 0.12rem 0px 0.02rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+}
+.yang {
+    font-size: 8px;
+    height: 12px;
+    border-radius: 2px;
+    color: #fff;
+    padding: 0px 3px;
+    font-weight: 600;
+    background: #ff8d8d;
+    margin-bottom: 10px;
+}
+.desc{
+    background: #fff2f2;
+    border-radius: 2px;
+    margin: 5px 0 5px 0px;
+    padding: 4px 0px 4px 6px;
+    font-size: 0.11rem;
+    color: #ff8d8d;
+    line-height: 0.14rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.three_meals_item {
+    width: 1.65rem;
+}
+.three_meals_item img{
+    width: 1.65rem;
+    height: 2.23rem;
+    border-radius: 0.07rem;
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/css/utils/swiper.css

@@ -0,0 +1,59 @@
+body,ul,li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.swiper,
+.swiper_list {
+    overflow: hidden;
+    position: relative;
+}
+.swiper-wrapper,
+.wrapper_list {
+    display: flex;
+}
+.swiper-wrapper li,
+.wrapper_list li {
+    flex-shrink: 0;
+    width: 100%;
+}
+.swiper-wrapper img,
+.wrapper_list img {
+    width: 100%;
+    height: 100%;
+}
+.swiper-button {
+    position: absolute;
+    top: 50%;
+    color: #fff;
+    font-size: 23px;
+    padding: 5px 5px;
+    background: #00000075;
+    transform: translateY(-50%);
+}
+.prev {
+    left: 0;
+}
+.next {
+    right: 0;
+}
+.swiper-pagination,
+.pagination {
+    display: flex;
+    position: absolute;
+    left: 50%;
+    bottom: 16px;
+    transform: translate(-50%);
+}
+.swiper-pagination li,
+.pagination li {
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    background: #CCC;
+    margin-right: 5px;
+}
+.swiper-pagination .active,
+.pagination .active {
+    background: #007aff !important;
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/css/utils/toast.css

@@ -0,0 +1,70 @@
+.lb-toast {
+    padding: 8px 12px;
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%);
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 8px;
+    z-index: 99999;
+}
+.lb-toast_text {
+    color: #fff;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.spinner {
+    width: 50px;
+    height: 60px;
+    text-align: center;
+    font-size: 10px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+}
+
+.spinner > div {
+    background-color: #67CF22;
+    height: 100%;
+    width: 6px;
+    display: inline-block;
+
+    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+    animation: stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+}
+
+@-webkit-keyframes stretchdelay {
+    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+    20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes stretchdelay {
+    0%, 40%, 100% {
+        transform: scaleY(0.4);
+        -webkit-transform: scaleY(0.4);
+    }  20% {
+           transform: scaleY(1.0);
+           -webkit-transform: scaleY(1.0);
+       }
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/js/config/index.js

@@ -0,0 +1,32 @@
+var config = {
+  environment: 'dev',  // 当前项目所属的开发环境 dev,test,prod
+
+  baseUrl () {
+    switch (config.environment) {
+      case "dev":
+        return config.devbasrUrl;
+        break;
+      case "test":
+        return config.testbasrUrl;
+        break;
+      case "prod":
+        return config.prodbasrUrl;
+        break;
+    }
+  },
+
+  devbasrUrl: 'http://127.0.0.1:3000/api', // dev 开发阶段
+  testbasrUrl: 'http://127.0.0.1:3000/test', // test 测试阶段
+  prodbasrUrl: 'http://127.0.0.1:3000/prod', // prod 正式阶段
+
+  apiList: {
+    index: '/index/class', // 首页获取分类数据接口
+    banner: '/index/banner', // 获取banner图
+    type: '/index/type', // 获取banner图下面的九宫格分类数据
+    threeMeals: '/index/threeMeals', // 每日三餐
+    search: '/search/list', // 搜索
+    leftMenu: '/type/leftMenu', // 左侧分类
+    rightMenu: '/type/rightMenu', // 右侧菜单
+    indexInfo: '/index/info', // 详情
+  }
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/js/http/api.js

@@ -0,0 +1,63 @@
+class Api {
+
+  constructor() {
+    this.ajax = new XMLHttpRequest();
+    this.baseUrl = config.baseUrl();
+  }
+
+  get(option) {
+    // toast.loading();
+
+    // 转换get参数
+    var params = "";
+    for (const key in option.data) {
+      params+= `&${key}=${option.data[key]}`
+    }
+
+    params = params.replace("&", "?")
+    option.url = this.baseUrl + option.url + params;
+
+    return new Promise((resolve,reject) => {
+      this.ajax.open("GET",option.url);
+      this.ajax.send();
+      return this.readystatechange(resolve, reject)
+    });
+  }
+
+  post(option) {
+    this.ajax = new XMLHttpRequest();
+    toast.loading();
+    return new Promise( (resolve,reject) => {
+      this.ajax.open("POST",this.baseUrl+option.url);
+      this.ajax.setRequestHeader("Content-Type","application/json");
+      this.ajax.setRequestHeader("bmy","liubing");
+
+      this.ajax.send(option.data);
+      return this.readystatechange(resolve, reject)
+    });
+  }
+
+  readystatechange(success,error) {
+    this.ajax.onreadystatechange = () => {
+      if (this.ajax.readyState == 4 ) {
+        if (this.ajax.status == 200) {
+          var data = JSON.parse(this.ajax.response);
+          // toast.clearLoading();
+          switch (data.status) {
+            case 200:
+              success(data.result);
+              break;
+            case 500:
+              toast.tips({ message: data.message });
+              throw new Error(data.message);
+              break;
+          }
+        } else {
+          error && error(this.ajax)
+          throw new Error("网络请求出错");
+        }
+      }
+    }
+  }
+
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/js/page/index.js

@@ -0,0 +1,249 @@
+class Index {
+  constructor() {
+    this.currentIndex = 0;
+    this.allUserDo = [
+      { type: 1, title: '推荐', page: 1, content: [] },
+      { type: 2, title: '时令', page: 1, content: [] },
+      { type: 3, title: '食肉', page: 1, content: [] },
+      { type: 4, title: '素食', page: 1, content: [] },
+      { type: 5, title: '烘焙', page: 1, content: [] }
+    ];
+    this.getBanner();
+    this.getType();
+    this.getthreeMeals();
+    this.getIndexClass();
+
+  }
+
+  getIndexClass() {
+
+    // 渲染大家都在做的标题和内容
+    this.allUserDo.forEach((v,i) => {
+      $(".userdo").innerHTML += `
+         <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+      `;
+
+      $(".djdzz_father").innerHTML += `
+            <div class="djdzz_list three_meals_list ${i == 0 ? 'active' : ''}">
+            </div>
+        `;
+    });
+
+    var a = $(".userdo li"),
+        b = $(".djdzz_father .djdzz_list");
+
+    $("body").onscroll = () => {
+      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+      if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
+        Array.from(b).filter((v,i)=>{
+          if (v.className.indexOf("active") > -1) {
+            this.currentIndex = i;
+          }
+        });
+
+        this.allUserDo[this.currentIndex].page+=1;
+        this.getdata("scroll");
+        console.log(this.currentIndex)
+      }
+    }
+
+    // tabs 切换
+    a.forEach((v, i) => {
+      v.onclick = async () => {
+        this.currentIndex = i;
+        a.forEach((item,index) => {
+          item.className = "";
+          b[index].classList.remove("active")
+        });
+
+        b[i].classList.add("active")
+        v.className = "active";
+        await this.getdata();
+      }
+    });
+
+    this.getdata();
+
+  }
+
+  /**
+   * 获取首页的分类数据
+   * @returns {Promise<void>}
+   */
+  async getdata(type = "click") {
+    if (this.allUserDo[this.currentIndex].content.length == 0 || type == "scroll") {
+      var res = await indexService.indexClass({
+        type: this.allUserDo[this.currentIndex].type,
+        page: this.allUserDo[this.currentIndex].page
+      });
+
+      this.allUserDo[this.currentIndex].content = [
+        ...this.allUserDo[this.currentIndex].content,
+        ...res.items
+      ]
+
+      var currentF = $(".djdzz_father .djdzz_list")[this.currentIndex]
+
+      // 把数据插入到对应的 djdzz_list 中
+      var a = this.allUserDo[this.currentIndex].content;
+      currentF.innerHTML = "";
+      a.forEach((item,i) => {
+        currentF.innerHTML += `
+            <a href="../page/info.html?url=${item.path}">
+            <div class="djdzz_item">
+              ${
+          Array.isArray(item.img)
+            ? `<img src="${item.img[0]}" alt="">`
+            : `<img src="${item.img}" alt="">`
+        }
+              <div class="cons">
+                  <div class="text">${item.title}</div>
+                  ${
+          typeof item.label == "string" || item.label == null
+            ? ''
+            : `<span class="yang">养</span>
+                         <div class="desc">${item.label.desc}</div>`
+        }
+            
+                  ${
+          Array.isArray(item.author) ? '' : `<div class="user">
+                       <div class="user_left">
+                         <img src="${item.author.avatar_url}" alt="">
+                           <span>${item.author.nickname}</span>
+                       </div>
+                       <div class="user_right">
+                         <i class="iconfont iconyanjing"></i>
+                         <span>${item.viewed_amount}</span>
+                       </div>
+                     </div>`
+        }
+              </div>
+            </div>
+            </a>
+            `
+      })
+
+    }
+
+  }
+
+
+
+  /**
+   * banner下面的九宫格数据
+   * @returns {Promise<void>}
+   */
+  async getType() {
+    var res = await indexService.type();
+    res.forEach((v,i) => {
+      $(".menu_type").innerHTML += `
+        <li>
+            <a href="flist.html?id=${v.href}">
+              <img src="${v.img}" alt="">
+              <p>${v.title}</p>
+            </a>
+        </li>
+      `
+    })
+  }
+
+  /**
+   * 每日三餐
+   * @returns {Promise<void>}
+   */
+  async getthreeMeals() {
+    let res = await indexService.threeMeals();
+
+    // 渲染 每日三餐 标题
+    res.forEach((v,i) => {
+      $(".meals_title").innerHTML += `
+          <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+      `
+    });
+
+    res.forEach((v,i) => {
+      $(".wrapper_list").innerHTML+=`
+            <li class="three_meals_list">
+                ${
+        (v.content.map((item, index) => {
+          return `<div class="three_meals_item">
+                                <img src="${item.img}" alt="">
+                                <div class="text">${item.title}</div>
+                                <span class="yang">养</span>
+                                <div class="desc">${item.des}</div>
+                            </div>`
+        })).toString().replace(/,/g,"")
+      }
+            </li>
+      
+      `;
+    });
+
+    var titleLi = $(".three_title li");
+
+    var threeSwiper = new Swiper(".swiper_list",{
+      time: 1000,
+      initialSlide: 0,
+      loop: false,
+      speed: 300,
+      autoplay: false,
+      grabCursor: true,
+      swiperWrapper: '.wrapper_list',
+      pagination: {
+        el: '.pagination'
+      },
+      on: {
+        slideChange: function (index) {
+          titleLi.forEach(v => v.className = "");
+          titleLi[index].className = "active"
+        }
+      },
+    });
+
+    titleLi.forEach((v,i) => {
+      v.onclick = function () {
+        threeSwiper.slideTo(i)
+      }
+    })
+
+
+
+
+
+  }
+
+  /**
+   * 获取banner数据
+   * @returns {Promise<void>}
+   */
+  async getBanner() {
+    var res = await indexService.banner();
+
+    var bannerFather = $(".swiper-wrapper")
+    res.forEach((v,i)=>{
+      bannerFather.innerHTML += `
+            <li>
+                <a href="./bannerinfo.html?id=${v.url}">
+                    <img src="${v.img}" alt="">
+                </a>
+            </li>
+      `
+    });
+
+    // 初始banner轮播
+    new Swiper(".swiper",{
+      time: 1000,
+      initialSlide: 0,
+      loop: false,
+      speed: 300,
+      autoplay: false,
+      grabCursor: true,
+    });
+  }
+
+}
+
+new Index();

历届学生/逯帅帅/项目开发/上课项目/美食App/js/page/info.js

@@ -0,0 +1,151 @@
+class Info {
+  constructor() {
+
+    this.likeList
+      = localStorage.getItem("list") == null
+        ? []
+        : JSON.parse(localStorage.getItem("list"));
+
+    this.currentinfo = {};
+    this.getInfo();
+  }
+
+  async getInfo() {
+    var res = await indexService.indexInfo({
+      url: query("url")
+    });
+
+    this.currentinfo = res;
+
+    $(".list_title h2").innerText = res.title;
+    res.stepInfo.arr.forEach((v) => {
+      $(".setp").innerHTML += `
+       <li>
+            <div class="icons" style="background-position: 0px ${v.position}px"></div>
+            <p>${v.title}</p>
+        </li>
+      `
+    });
+
+    $(".list_text p").innerText = res.stepInfo.message;
+    $(".posttime").innerText = res.posttime;
+    if (res.stepInfo.message.length > 22) {
+      $(".list_text").innerHTML += '<div class="more">更多</div>';
+
+      $(".list_text .more").onclick = function () {
+        $(".list_text").style.height = "auto";
+        $(".list_text .more").style.display = "none";
+      }
+    }
+
+
+    res.material.main.forEach((v) => {
+      $(".main_f").innerHTML += `
+        <li>
+            <span>${v.title}</span>
+            <span>${v.nums}</span>
+        </li>
+      `
+    })
+
+    res.material.accessories.forEach((v) => {
+      $(".fu_f").innerHTML += `
+        <li>
+            <span>${v.title}</span>
+            <span>${v.nums}</span>
+        </li>
+      `
+    })
+
+    res.DetailedSteps.forEach((v,i,arr) => {
+      $(".setp_content").innerHTML += `
+        <li>
+           ${
+              v.step_img == null 
+                ? `<h3>${v.step_title}</h3><p>${v.step_text}</p>`
+                : `
+                <div class="step_text">${v.step_title}</div>
+                  <img class="${v.step_title == "成品图" ? 'lastimg': ''}" src="${ Array.isArray(v.step_img) ? v.step_img[0] : v.step_img}" alt="">
+                  
+                  ${
+                      v.step_text == null ? '' : `<p>${v.step_text || ''}</p>`
+                   }
+                  
+                  ${
+                    Array.isArray(v.step_img)
+                    ? `
+                         <div class="tabs_img">
+                            ${
+                        (v.step_img.map((item, index) => {
+                          return `<img src="${item}"/>`
+                            })).toString().replace(/,/g, "")
+                          }
+                          </div>
+                      `
+                    : ''
+                  }
+                `
+            }
+            
+        </li>
+      `
+    });
+
+    var tabImg = document.querySelectorAll(".tabs_img img");
+    tabImg.forEach((v) => {
+      v.onclick = function () {
+        $(".lastimg").setAttribute("src", v.getAttribute("src"))
+      }
+    })
+
+
+    this.like();
+
+  }
+
+  like() {
+    var isHave = this.likeList.filter((item,index) => {
+      if (item.backImg == this.currentinfo.backImg) {
+        return item
+      }
+    });
+
+    if (isHave.length != 0) {
+      $(".likeicon").classList.replace("iconshoucang1", "iconshoucang")
+    }
+
+
+
+
+    // iconshoucang1 表示空心图标
+    // iconshoucang 表示实心图标
+    $(".likeicon").onclick = () => {
+
+      // true 表示当前是 空心图标  收藏操作
+      if ($(".likeicon").classList.contains("iconshoucang1")) {
+        $(".likeicon").classList.replace("iconshoucang1", "iconshoucang")
+
+        this.likeList.push(this.currentinfo)
+
+        localStorage.setItem("list", JSON.stringify(this.likeList))
+
+        // false 表示当前是 实心图标  取消收藏
+      } else {
+        $(".likeicon").classList.replace("iconshoucang", "iconshoucang1")
+
+
+        this.likeList = this.likeList.filter((item,index) => {
+          if (item.backImg != this.currentinfo.backImg) {
+            return item
+          }
+        });
+
+        localStorage.setItem("list", JSON.stringify(this.likeList))
+
+
+      }
+    }
+  }
+}
+
+new Info();

历届学生/逯帅帅/项目开发/上课项目/美食App/js/page/search.js

@@ -0,0 +1,61 @@
+class Search {
+  constructor() {
+    this.page = 1;
+    this.value = "";
+    this.lock = true;
+    this.bindSearch()
+  }
+
+  bindSearch () {
+    $(".submitSearch").onclick = () => {
+      if (this.lock) {
+        this.value = $(".header input").value;
+        if (this.value.length != 0) {
+          $(".three_meals_list").innerHTML = "";
+          this.getSearch()
+        }
+      }
+    }
+
+    $(".header input").oninput = () => {
+      this.lock = true;
+      this.value = $(".header input").value;
+      if (this.value.length == 0) {
+        $(".three_meals_list").innerHTML = "";
+      }
+    }
+  }
+
+  async getSearch() {
+
+    var res = await indexService.search({
+      q: this.value,
+      page: this.page
+    });
+
+    this.lock = false;
+
+    if (res.length > 0) {
+      $(".three_meals_list").innerHTML += "";
+      res.forEach((v) => {
+        $(".three_meals_list").innerHTML += `
+        <li class="three_meals_item">
+            <img src="${v.img}" alt="">
+            <div class="text">${v.des}</div>
+            <div class="desc">${v.title}</div>
+        </li>
+        `
+      });
+
+      scroll( () => {
+        this.page+=1;
+        this.getSearch();
+      });
+    } else {
+      $(".three_meals_list").innerHTML = "<p class='nodata'>暂无数据</p>"
+    }
+
+  }
+}
+
+new Search();

历届学生/逯帅帅/项目开发/上课项目/美食App/js/page/type.js

@@ -0,0 +1,73 @@
+class Type {
+  constructor() {
+    this.index = 0;
+    this.typeMenu = [];
+    this.getLeftMenu();
+  }
+
+  async getLeftMenu() {
+    var res = await typeService.leftMenu();
+    res.forEach((v,i) => {
+      v.page = 1;
+      v.content = []
+      $(".type_left").innerHTML+= `
+       <li class="${i ==0 ?'active' : ''}">
+            <div class="icon" style="background-position: 0px ${v.position}px"></div>
+            <span>${v.title}</span>
+        </li>
+      `;
+
+      $(".type_right").innerHTML+= `
+         <div class="right_contet ${i ==0 ? 'active' : ''}"></div>
+      `
+    });
+
+    var typeLi = $(".type_left li");
+    var rightContent = $(".type_right .right_contet");
+
+    console.log("rightContent: ", rightContent);
+
+    typeLi.forEach((v,i) => {
+      v.onclick = () => {
+        typeLi.forEach((t,index) => {
+          t.className = "";
+          rightContent[index].classList.remove("active");
+        });
+        v.className = "active";
+        this.index = i;
+        this.getRightMenu();
+        rightContent[i].classList.add("active");
+      }
+    })
+
+    this.typeMenu = res;
+
+    this.getRightMenu();
+  }
+
+  async getRightMenu() {
+    if (this.typeMenu[this.index].content.length == 0) {
+      var res = await typeService.rightMenu({
+        url: this.typeMenu[this.index].url
+      });
+
+      this.typeMenu[this.index].content = [
+        ...this.typeMenu[this.index].content,
+        ...res
+      ];
+
+      var rContent = $(".type_right .right_contet");
+
+      this.typeMenu[this.index].content.forEach((v,i) => {
+        rContent[this.index].innerHTML+= `
+       <div class="li">
+           <img src="${v.img}" alt="">
+           <p>${v.title}</p>
+       </div>
+      `
+      });
+    }
+  }
+}
+
+new Type();

历届学生/逯帅帅/项目开发/上课项目/美食App/js/service/indexService.js

@@ -0,0 +1,66 @@
+
+class IndexService {
+
+  constructor() {}
+
+
+  /**
+   * 首页获取分类数据接口
+   */
+  async indexClass(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.index,
+      data: data
+    });
+    api = null;
+  }
+
+  async banner(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.banner,
+      data: data
+    });
+    api = null;
+  }
+
+  async type(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.type,
+      data: data
+    });
+    api = null;
+  }
+
+  async threeMeals(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.threeMeals,
+      data: data
+    });
+    api = null;
+  }
+
+  async search(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.search,
+      data: data
+    });
+    api = null;
+  }
+
+  async indexInfo(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.indexInfo,
+      data: data
+    });
+    api = null;
+  }
+
+}
+
+var indexService = new IndexService();

历届学生/逯帅帅/项目开发/上课项目/美食App/js/service/typeService.js

@@ -0,0 +1,25 @@
+
+class TypeService {
+
+  constructor() {}
+
+  async leftMenu(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.leftMenu,
+      data: data
+    });
+    api = null;
+  }
+
+  async rightMenu(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.rightMenu,
+      data: data
+    });
+    api = null;
+  }
+}
+
+var typeService = new TypeService();

历届学生/逯帅帅/项目开发/上课项目/美食App/js/utils/index.js

@@ -0,0 +1,48 @@
+function $(className) {
+  var newClassName = className.split(" ");
+  if (newClassName.length > 1) {
+    var father = newClassName[newClassName.length - 2];
+    var childrenList = document.querySelector(father).children;
+
+    var arr = Array.from(childrenList).filter(function (el){
+      if (
+        el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
+        ||
+        el.tagName.toLowerCase() == newClassName[newClassName.length-1]
+      ) {
+        return el;
+      }
+    });
+
+    if (arr.length > 1) {
+      return document.querySelectorAll(className)
+    } else if (arr.length == 1){
+      return document.querySelector(className)
+    } else {
+      throw new Error(`${className} 不存在，请检查`)
+    }
+
+  } else {
+    return document.querySelector(newClassName);
+
+  }
+}
+
+function scroll(callback) {
+  $("body").onscroll = () => {
+    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+    if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
+      callback()
+    }
+  }
+}
+
+
+function query(name) {
+  var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+  var r = window.location.search.substr(1).match(reg);
+  if(r!=null)return  unescape(r[2]); return null;
+}

历届学生/逯帅帅/项目开发/上课项目/美食App/js/utils/rem.js

@@ -0,0 +1,20 @@
+!(function(win, doc) {
+    function setFontSize() {
+        var winWidth = window.innerWidth;
+        doc.documentElement.style.fontSize = (winWidth / 375) * 100 + 'px';
+    }
+    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
+    var timer = null;
+    win.addEventListener(evt, function() {
+        clearTimeout(timer);
+        timer = setTimeout(setFontSize, 300);
+    }, false);
+    win.addEventListener("pageshow", function(e) {
+        if (e.persisted) {
+            clearTimeout(timer);
+            timer = setTimeout(setFontSize, 300);
+        }
+    }, false);
+    //初始化 
+    setFontSize();
+}(window, document));

历届学生/逯帅帅/项目开发/上课项目/美食App/js/utils/swiper.js

@@ -0,0 +1,310 @@
+// 保护
+(function () {
+
+    // 类的构造函数
+    function swiper (el,option) {
+       this.defaultOption = {
+        el: '.swiper',
+        width () {
+          return $(this.el).clientWidth
+        },
+        timer: null,
+        time: 3000,
+        initialSlide: 0,
+        direction: 'vertical',
+        speed: 800,
+        grabCursor: false,
+        loop: false,
+        autoplay: false,
+        swiperWrapper: '.swiper-wrapper',
+        on: {
+
+        },
+        pagination: {
+          el: '.swiper-pagination',
+        },
+        // 如果需要前进后退按钮
+        navigation: {
+          nextEl: '.next',
+          prevEl: '.prev',
+        },
+        // 事件控制中心，主要保存事件的
+        eventList: {}
+      }
+
+       if (typeof el == "string") {
+
+         this.defaultOption.el = el || this.defaultOption.el;
+         this.defaultOption.time = option.time || this.defaultOption.time;
+         this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
+         this.defaultOption.direction = option.direction || this.defaultOption.direction;
+         this.defaultOption.speed = option.speed || this.defaultOption.speed;
+         this.defaultOption.grabCursor = option.grabCursor || this.defaultOption.grabCursor;
+         this.defaultOption.loop = option.loop || this.defaultOption.loop;
+         this.defaultOption.autoplay = option.autoplay || this.defaultOption.autoplay;
+         this.defaultOption.swiperWrapper = option.swiperWrapper || this.defaultOption.swiperWrapper;
+
+           if (option.hasOwnProperty("pagination")) {
+             this.defaultOption.pagination.el = option.pagination.el || this.defaultOption.pagination.el;
+           }
+
+           if (option.hasOwnProperty("navigation")) {
+             this.defaultOption.navigation.nextEl = option.navigation.nextEl || this.defaultOption.navigation.nextEl;
+             this.defaultOption.navigation.prevEl = option.navigation.prevEl || this.defaultOption.navigation.prevEl;
+           }
+
+           if (option.hasOwnProperty("on")) {
+               for (const key in option.on) {
+                 this.defaultOption.on[key] = option.on[key]
+               }
+           }
+
+
+           this.next = $(this.defaultOption.navigation.nextEl);
+           this.wrapper = $(this.defaultOption.swiperWrapper);
+
+           this.prev = $(this.defaultOption.navigation.prevEl);
+           this.pagination = $(this.defaultOption.pagination.el);
+           this.el = $(this.defaultOption.el);
+
+           this.init();
+
+       } else {
+           throw new Error("最外层父节点的类名必传")
+       }
+    }
+
+    // 类的方法
+    swiper.prototype = {
+        init () {
+            this.CreatedPagination();
+            this.setInitialSlide();
+            this.setGrabCursor();
+
+            if (this.defaultOption.autoplay) {
+                this.autoPlay();
+                this.el.onmouseover = () => clearInterval(this.defaultOption.timer);
+                this.el.onmouseout = () => this.autoPlay();
+            }
+
+            this.nextClick();
+            this.prevClick();
+
+            this.initSwiperSlide();
+        },
+      /**
+       * 注册移动端滑动
+       */
+      initSwiperSlide: function () {
+        var fa = this.el,
+          startX = 0,
+          startY = 0;
+
+        fa.addEventListener('touchstart', function (e) {
+          e.stopPropagation()
+          startX = e.targetTouches[0].pageX
+          startY = e.targetTouches[0].pageY
+        })
+
+        var getDirection = function (startx, starty, endx, endy) {
+          // 获得角度
+          var getAngle = function(angx, angy) {
+            return Math.atan2(angy, angx) * 180 / Math.PI;
+          };
+
+          var angx = endx - startx;
+          var angy = endy - starty;
+          var result = 0;
+
+          // 如果滑动距离太短
+          if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
+            return result;
+          }
+
+          var angle = getAngle(angx, angy);
+          if (angle >= -135 && angle <= -45) {
+            result = 1;
+          } else if (angle > 45 && angle < 135) {
+            result = 2;
+          } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
+            result = 3;
+          } else if (angle >= -45 && angle <= 45) {
+            result = 4;
+          }
+
+          return result;
+        }
+
+        fa.addEventListener('touchmove', (e) => {
+          e.stopPropagation()
+          var endX = e.changedTouches[0].pageX;
+          var endY = e.changedTouches[0].pageY;
+
+          var direction = getDirection(startX, startY, endX, endY);
+          // if (direction == 3 || direction == 4) {
+          //   var x = parseInt(endX - startX) - 40
+          //   // this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(${x}px,0px,0px)`;
+          // }
+        });
+
+        fa.addEventListener('touchend', (e) => {
+          e.stopPropagation()
+          var endX = e.changedTouches[0].pageX;
+          var endY = e.changedTouches[0].pageY;
+
+          var direction = getDirection(startX, startY, endX, endY);
+
+          switch (direction) {
+            case 0:
+              console.log("未滑动！");
+              break;
+            case 1:
+              console.log("向上！")
+              break;
+            case 2:
+              console.log("向下！")
+              break;
+            case 3:
+              console.log("向左！")
+              this.setSpeed();
+              this.animation(-this.defaultOption.width())
+              break;
+            case 4:
+              console.log("向右滑动");
+              this.setSpeed();
+              this.animation(this.defaultOption.width())
+              break;
+            default:
+          }
+        })
+      },
+        setInitialSlide() {
+            if (this.defaultOption.initialSlide != 0) {
+                this.changePagination(this.defaultOption.initialSlide)
+            }
+        },
+        setGrabCursor() {
+          this.defaultOption.grabCursor ? this.wrapper.style.cursor = "pointer" : ""
+        },
+        setSpeed() {
+            this.wrapper.style.transition = `all ease ${this.defaultOption.speed / 1000}s`;
+        },
+        nextClick() {
+            // this 指向
+            // var test = this;
+            // 1：保存this
+            // 2: =>
+            // 3: a().bind(this)
+            this.next != null ? this.next.onclick = () => {
+                this.setSpeed();
+                this.animation(-this.defaultOption.width())
+            } : ''
+        },
+        prevClick() {
+            this.prev != null ? this.prev.onclick = () => {
+                this.setSpeed();
+                this.animation(this.defaultOption.width())
+            } : ''
+        },
+        slideTo(index) {
+            this.setSpeed();
+            this.changePagination(index)
+        },
+        on (eventType,event) {
+          this.defaultOption.eventList[eventType] = event;
+        },
+        CreatedPagination() {
+          if (this.pagination != null) {
+              Array.from(this.wrapper.children).forEach((v,i) => {
+                  this.pagination.innerHTML += ` <li class="${i == 0 ? 'active' : ''}"></li>`
+              });
+              this.BindPaginationClick();
+          }
+        },
+        BindPaginationClick() {
+            Array.from(this.pagination.children).forEach((v,i) => {
+                v.onclick = () => {
+                    this.setSpeed();
+                    this.changePagination(i)
+                }
+            })
+        },
+        changePagination(i) {
+          this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(i);
+          this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i);
+          if (this.pagination != null) {
+            Array.from(this.pagination.children).forEach((item) => {
+              item.className = ""
+            });
+            Array.from(this.pagination.children)[i].className = "active";
+          }
+          this.wrapper.style.transform = `translateX(${i * -this.defaultOption.width()}px)`;
+        },
+
+        animation(offset) {
+            var val = parseInt(this.wrapper.style.transform.match(/translateX\(([\s\S]*?)\)/)[1]);
+            var newOffset = offset + val;
+            var maxWidth = -(this.wrapper.children.length - 1) * this.defaultOption.width();
+
+            if (newOffset > 0) {
+                if (this.defaultOption.loop) {
+                    newOffset = maxWidth;
+                } else {
+                    newOffset = 0
+                }
+            }
+
+            if (newOffset < maxWidth) {
+                if (this.defaultOption.loop) {
+                    newOffset = 0;
+                } else {
+                    newOffset = maxWidth
+                }
+            }
+
+            var index = Math.abs(newOffset / this.defaultOption.width());
+            this.changePagination(index);
+
+          this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(index);
+          this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(index)
+        },
+        autoPlay () {
+          this.defaultOption.timer = setInterval(() => {
+                this.animation(-this.defaultOption.width())
+            }, this.defaultOption.time);
+        }
+    }
+
+    function $(className) {
+        var newClassName = className.split(" ");
+        if (newClassName.length > 1) {
+            var father = newClassName[newClassName.length - 2];
+            var childrenList = document.querySelector(father).children;
+
+            var arr = Array.from(childrenList).filter(function (el){
+                if (
+                    el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
+                    ||
+                    el.tagName.toLowerCase() == newClassName[newClassName.length-1]
+                ) {
+                    return el;
+                }
+            });
+
+            if (arr.length > 1) {
+                return document.querySelectorAll(className)
+            } else if (arr.length == 1){
+                return document.querySelector(className)
+            } else {
+                throw new Error(`${className} 不存在，请检查`)
+            }
+
+        } else {
+            return document.querySelector(newClassName);
+
+        }
+    }
+
+    window.Swiper = swiper;
+
+})()

历届学生/逯帅帅/项目开发/上课项目/美食App/js/utils/toast.js

@@ -0,0 +1,61 @@
+class Toast {
+  constructor() {
+    this.body = document.querySelector("body");
+  }
+
+  /**
+   * time: 提示显示时间
+   * position: 位置 top = 20%, center = 50%, bottom = 20%
+   * message: 提示的文字
+   * @param option
+   */
+  tips(option = {}) {
+    var defaultOption = {
+      time: 3000,
+      position: 'center',
+      message: '默认'
+    };
+
+    defaultOption.time = option.time || defaultOption.time;
+    defaultOption.position = option.position || defaultOption.position;
+    defaultOption.message = option.message || defaultOption.message;
+
+    var tpl = `<div class="lb-toast" style="${
+      defaultOption.position == "bottom" 
+        ? 'bottom: 10%'
+        : `top: ${defaultOption.position == "top" ? '10%' : '50%'}`
+    }">
+                    <div class="lb-toast_text">${defaultOption.message}</div>
+                </div>`;
+
+
+    this.body.innerHTML += tpl;
+
+    setTimeout(() => {
+      var toast = document.querySelector(".lb-toast");
+      console.log(toast)
+      this.body.removeChild(toast)
+    }, defaultOption.time)
+
+  }
+
+  loading() {
+    var tpl = `<div class="spinner">
+                  <div class="rect1"></div>
+                  <div class="rect2"></div>
+                  <div class="rect3"></div>
+                  <div class="rect4"></div>
+                  <div class="rect5"></div>
+              </div>`;
+    this.body.innerHTML += tpl;
+  }
+
+  clearLoading() {
+    var spinner = document.querySelector(".spinner");
+    if (spinner != null) {
+      this.body.removeChild(spinner)
+    }
+  }
+}
+
+var toast = new Toast();

历届学生/逯帅帅/项目开发/上课项目/美食App/page/index.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Title</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/tool/clear.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2414147_fl6rgpdlirw.css">
+    <link rel="stylesheet" href="../css/tool/public.css">
+    <link rel="stylesheet" href="../css/utils/toast.css">
+    <link rel="stylesheet" href="../css/utils/swiper.css">
+    <link rel="stylesheet" href="../css/page/index.css">
+</head>
+<body>
+
+<div class="header">
+        <a href="./search.html">
+            <div class="search">
+            <i class="iconfont iconsousuo"></i>
+            <span>搜索百万免费菜谱</span>
+            </div>
+        </a>
+</div>
+
+<div class="content">
+    <div class="swiper">
+
+        <ul class="swiper-wrapper" style="transform: translateX(0px);">
+
+        </ul>
+
+        <!-- 如果需要分页器 -->
+        <ul class="swiper-pagination"></ul>
+
+
+
+    </div>
+    <ul class="menu_type">
+
+    </ul>
+    <div class="three_meals padd_16">
+        <div class="title">每日三餐</div>
+        <ul class="three_title meals_title">
+        </ul>
+        <div class="swiper_list">
+            <ul class="wrapper_list" style="transform: translateX(0px);">
+            </ul>
+        </div>
+    </div>
+
+    <div class="recommend padd_16">
+        <div class="recommend_title">为你推荐</div>
+        <ul class="recommend_list">
+            <li class="recommend_active">
+                <a href="">
+                    <img src="../img/t_1.png" alt="">
+                    <span>每日优惠</span>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <img src="../img/t_2.png" alt="">
+                    <span>食材大全</span>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <img src="../img/t_3.png" alt="">
+                    <span>热门专题</span>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <img src="../img/t_4.png" alt="">
+                    <span>菜谱分类</span>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <img src="../img/t_5.png" alt="">
+                    <span>本周流行</span>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <img src="../img/t_6.png" alt="">
+                    <span>视频菜谱</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <div class="djdzz padd_16">
+        <div class="title">大家都在做</div>
+        <ul class="userdo meals_title">
+
+        </ul>
+        <div class="djdzz_father">
+            
+        </div>
+
+    </div>
+
+</div>
+
+<ul class="footer">
+    <li>
+        <a href="index.html">
+            <img src="../img/home.png" alt="">
+            <p class="jihuo">首页</p>
+        </a>
+    </li>
+    <li>
+        <a href="video.html">
+            <img src="../img/video.png" alt="">
+            <p>视频</p>
+        </a>
+    </li>
+    <li>
+        <a href="type.html">
+            <img src="../img/type.png" alt="">
+            <p>分类</p>
+        </a>
+    </li>
+    <li>
+        <a href="">
+            <img src="../img/like.png" alt="">
+            <p>我的</p>
+        </a>
+    </li>
+</ul>
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/swiper.js"></script>
+<script src="../js/utils/toast.js"></script>
+<script src="../js/http/api.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/service/indexService.js"></script>
+<script src="../js/page/index.js"></script>
+</html>

历届学生/逯帅帅/项目开发/上课项目/美食App/page/info.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Title</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/tool/clear.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2414147_iazf7br8hhl.css">
+    <link rel="stylesheet" href="../css/tool/public.css">
+    <link rel="stylesheet" href="../css/utils/toast.css">
+    <link rel="stylesheet" href="../css/page/info.css">
+</head>
+<body>
+
+<div class="headers">
+    <div class="header_action">
+        <div class="back">< 返回</div>
+        <div class="type">菜谱分类 ></div>
+    </div>
+    <img src="https://st-cn.meishij.net/r/23/159/2414773/s2414773_151323721014670.jpg" alt="">
+</div>
+
+<div class="contents">
+    <div class="content_info">
+        <div class="list_title">
+            <h2>芝心饭团</h2>
+            <i class="likeicon iconfont iconshoucang1"></i>
+        </div>
+        <p class="posttime">by tgcyy　6795 收藏　19837 浏览</p>
+        <ul class="setp">
+        </ul>
+        <div class="list_text">
+            <p></p>
+        </div>
+        <div class="cailiao">
+            <div class="main_liao">
+                <div class="title">主料</div>
+                <ul class="main_f">
+
+                </ul>
+            </div>
+            <div class="main_liao">
+                <div class="title">辅料</div>
+                <ul class="fu_f">
+
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <ul class="setp_content">
+    </ul>
+</div>
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/toast.js"></script>
+<script src="../js/http/api.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/service/indexService.js"></script>
+<script src="../js/page/info.js"></script>
+</html>

历届学生/逯帅帅/项目开发/上课项目/美食App/page/search.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Title</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/tool/clear.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2414147_8fm7pcq4hwi.css">
+    <link rel="stylesheet" href="../css/tool/public.css">
+    <link rel="stylesheet" href="../css/utils/toast.css">
+    <link rel="stylesheet" href="../css/page/search.css">
+</head>
+<body>
+<div class="header">
+    <a href="index.html">
+        <i class="iconfont iconfanhui"></i>
+    </a>
+    <input type="text" placeholder="菜谱名、食材名">
+    <div class="submitSearch">搜索</div>
+</div>
+
+<div class="content padd_16">
+    <ul class="three_meals_list">
+    </ul>
+</div>
+
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/toast.js"></script>
+<script src="../js/http/api.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/service/indexService.js"></script>
+
+<script src="../js/page/search.js"></script>
+</html>

历届学生/逯帅帅/项目开发/上课项目/美食App/page/type.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Title</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/tool/clear.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2414147_8fm7pcq4hwi.css">
+    <link rel="stylesheet" href="../css/tool/public.css">
+    <link rel="stylesheet" href="../css/utils/toast.css">
+    <link rel="stylesheet" href="../css/page/type.css">
+</head>
+<body>
+
+<div class="header">
+    <div class="search">
+        <i class="iconfont iconsousuo"></i>
+        <span>搜索百万免费菜谱</span>
+    </div>
+</div>
+
+<div class="content">
+    <div class="type">
+        <ul class="type_left">
+        </ul>
+        <div class="type_right">
+        </div>
+    </div>
+</div>
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/swiper.js"></script>
+<script src="../js/utils/toast.js"></script>
+<script src="../js/http/api.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/service/typeService.js"></script>
+
+<script src="../js/page/type.js"></script>
+</html>

历届学生/逯帅帅/项目开发/上课项目/美食App/page/video.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Title</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/tool/clear.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2414147_8fm7pcq4hwi.css">
+    <link rel="stylesheet" href="../css/tool/public.css">
+    <link rel="stylesheet" href="../css/utils/toast.css">
+    <link rel="stylesheet" href="../css/page/video.css">
+</head>
+<body>
+
+
+<div class="header">
+    <div class="back">
+        <a href="index.html">
+            <i class="iconfont iconfanhui"></i>
+            <span>返回</span>
+        </a>
+    </div>
+    <p>菜谱视频大全</p>
+    <i class="iconfont iconsousuo"></i>
+</div>
+
+<div class="content">
+    <div class="djdzz_list three_meals_list padd_16">
+        <div class="djdzz_item">
+            <img src="https://st-cn.meishij.net/r/241/24/818741/s818741_157848989476547.jpg" alt="">
+            <div class="cons">
+                <div class="text">芝麻蜂蜜小面包</div>
+                <div class="user">
+                    <div class="user_left">
+                        <img src="https://st-cn.meishij.net/user/68/143/ns13598318_155093722619492.jpg" alt="">
+                        <span>阿青美食</span>
+                    </div>
+                    <div class="user_right">
+                        <i class="iconfont iconyanjing"></i>
+                        <span>67</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="djdzz_item">
+            <img src="https://st-cn.meishij.net/r/241/24/818741/s818741_157848989476547.jpg" alt="">
+            <div class="cons">
+                <div class="text">芝麻蜂蜜小面包</div>
+                <div class="user">
+                    <div class="user_left">
+                        <img src="https://st-cn.meishij.net/user/68/143/ns13598318_155093722619492.jpg" alt="">
+                        <span>阿青美食</span>
+                    </div>
+                    <div class="user_right">
+                        <i class="iconfont iconyanjing"></i>
+                        <span>67</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="djdzz_item">
+            <img src="https://st-cn.meishij.net/r/241/24/818741/s818741_157848989476547.jpg" alt="">
+            <div class="cons">
+                <div class="text">芝麻蜂蜜小面包</div>
+                <div class="user">
+                    <div class="user_left">
+                        <img src="https://st-cn.meishij.net/user/68/143/ns13598318_155093722619492.jpg" alt="">
+                        <span>阿青美食</span>
+                    </div>
+                    <div class="user_right">
+                        <i class="iconfont iconyanjing"></i>
+                        <span>67</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="djdzz_item">
+            <img src="https://st-cn.meishij.net/r/241/24/818741/s818741_157848989476547.jpg" alt="">
+            <div class="cons">
+                <div class="text">芝麻蜂蜜小面包</div>
+                <div class="user">
+                    <div class="user_left">
+                        <img src="https://st-cn.meishij.net/user/68/143/ns13598318_155093722619492.jpg" alt="">
+                        <span>阿青美食</span>
+                    </div>
+                    <div class="user_right">
+                        <i class="iconfont iconyanjing"></i>
+                        <span>67</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/swiper.js"></script>
+<script src="../js/utils/toast.js"></script>
+<script src="../js/http/api.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/service/indexService.js"></script>
+
+<script src="../js/page/video.js"></script>
+</html>

历届学生/逯帅帅/项目开发/上课项目/美食App/test.txt

@@ -0,0 +1,35 @@
+
+
+
+
+`
+<div class="djdzz_item">
+  ${
+Array.isArray(item.img)
+? `<img src="${item.img[0]}" alt="">`
+: `<img src="${item.img}" alt="">`
+}
+  <div class="cons">
+      <div class="text">${item.title}</div>
+      ${
+typeof item.label == "string"
+? ''
+: `<span class="yang">养</span>
+             <div class="desc">${item.label.desc}</div>`
+}
+
+      ${
+Array.isArray(item.author) ? '' : `<div class="user">
+           <div class="user_left">
+             <img src="${item.author.avatar_url}" alt="">
+               <span>${item.author.nickname}</span>
+           </div>
+           <div class="user_right">
+             <i class="iconfont iconyanjing"></i>
+             <span>${item.viewed_amount}</span>
+           </div>
+         </div>`
+}
+  </div>
+</div>
+`