first commit

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/ajax/ajax.js

@@ -0,0 +1,68 @@
+class Ajax {
+
+  constructor() {
+    this.ajax = new XMLHttpRequest()
+  }
+
+  // { url: '请求地址', data: {} //请求参数 }
+  get (params) {
+    Tips.loading()
+    var str = ""
+    for (const key in params.data) {
+      str += `&${key}=${params.data[key]}`
+    }
+    str = str.replace("&", "?")
+    this.ajax.open("GET",  this.baseUrl() + params.url + str);
+
+    return new Promise((resolve, reject) => {
+      this.ajax.send();
+      this.statechange(resolve, reject)
+    })
+  }
+
+
+  post () {
+    this.open("POST", "http://127.0.0.1/index.php")
+  }
+
+
+  statechange (resolve, reject) {
+    this.ajax.onreadystatechange = () => {
+      if (this.ajax.readyState == 4) {
+        Tips.close()
+        if (this.ajax.status == 200) {
+          var data = JSON.parse(this.ajax.responseText)
+          switch (data.status) {
+            case 200:
+              resolve(data.result)
+              break;
+
+            case 404:
+              alert(data.msg)
+              reject(data)
+              throw new Error(data.msg)
+              break;
+          }
+        } else {
+          reject(this.ajax)
+        }
+      }
+    }
+  }
+
+  baseUrl() {
+    switch (config.stage) {
+      case "dev":
+        return config.devBaseUrl;
+        break;
+
+      case "test":
+        return config.testBaseUrl;
+        break;
+
+      case "prod":
+        return config.prodBaseUrl;
+        break;
+    }
+  }
+}

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/config/index.js

@@ -0,0 +1,18 @@
+var config = {
+  devBaseUrl: 'http://127.0.0.1:3000/api/json', // 开发基地址
+  testBaseUrl: 'http://127.0.0.1:3000/api/test', // 测试基地址
+  prodBaseUrl: 'http://127.0.0.1:3000/api/prod', // 正式基地址
+  stage: 'dev',  // dev    test    prod
+  apiList: {
+    home: '/index',
+    type: '/class',
+    classList: '/classList',
+    info: '/info'
+  },
+  footer: [
+    { title: '首页', icon: 'icon-home', path: './home.html' },
+    { title: '机构', icon: 'icon-jigou', path: './mechanism.html' },
+    { title: '模特', icon: 'icon-me', path: './model.html' },
+    { title: '我的', icon: 'icon-wo', path: './my.html' },
+  ]
+}

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/lib/loading.js

@@ -0,0 +1,150 @@
+/**
+ * 封装加载提示
+ */
+class Loading {
+    /**
+     * 加载进度
+     */
+    loading() {
+        this.SetLoading()
+        // 塞入loading的html
+        this.$(".isShow .loading").innerHTML = 
+        `
+            <div class="back">
+                <div class="load8">
+                    <div class="load8-container container1">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                    <div class="load8-container container2">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                    <div class="load8-container container3">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                </div>                 
+            </div>
+        `;
+        this.$(".isShow .back").style = `padding: 0.4rem;`
+        this.show()
+    }
+
+    /**
+     * 显示toast提示
+     * @param {*} text 文字
+     * @param {*} time 自动关闭提示的时间 默认3秒
+     */
+    toast(text, time = 3000) {
+        this.SetLoading()
+        this.$(".isShow .loading").innerHTML = `<div class="back"></div>`
+        // 设置边距
+        this.$(".isShow .back").style = `padding: 0.14rem 0.4rem;`
+
+        // 设置内容
+        this.$(".isShow .back").innerHTML = `<span>${text}</span>`;
+        this.show()
+        setTimeout(()=> this.close(),time)
+    }
+
+    /**
+     * 弹出框 dialog
+     * @param {*} params 
+     */
+    dialog(params) {
+        params == undefined ? params = {} : null;
+        let defaultParams = { title: '标题', message: '内容', 
+            cancelText: '取消', confirmText: '确定', 
+            cancelColor: '#323233', confirmColor: '#fb7299'
+        };
+
+        defaultParams.title = params.title ||  defaultParams.title;
+        defaultParams.message = params.message ||  defaultParams.message;
+        defaultParams.cancelText = params.cancelText ||  defaultParams.cancelText;
+        defaultParams.confirmText = params.confirmText ||  defaultParams.confirmText;
+        defaultParams.cancelColor = params.cancelColor ||  defaultParams.cancelColor;
+        defaultParams.confirmColor = params.confirmColor ||  defaultParams.confirmColor;
+  
+        this.SetLoading()
+        this.$(".isShow .loading").innerHTML = `
+            <div class="dialog_f">
+              <div class="dialog_header">${defaultParams.title}</div>
+              <div class="dialog_content">
+                <div class="dialog_message">${defaultParams.message}</div>
+              </div>
+              <div class="dialog_footer">
+                <div class="dialog_cancel" style="color:${defaultParams.cancelColor}">
+                    ${defaultParams.cancelText}
+                </div>
+                <div class="dialog_confirm" style="color:${defaultParams.confirmColor}">
+                    ${defaultParams.confirmText}
+                </div>
+              </div>
+            </div>
+        `;
+        // 取消按钮被点击的时候
+        this.$(".isShow .dialog_cancel").onclick = () => {
+            params.cancel && params.cancel()
+            this.close()
+        }
+         // 确定按钮被点击的时候
+         this.$(".isShow .dialog_confirm").onclick = () => {
+            params.confirm && params.confirm()
+            this.close()
+        }
+        this.$(".isShow .loading").style = 'background: rgba(0, 0, 0, 0.7)'
+        this.show()
+    }
+
+    /**
+     * 填充loading的html结构
+     */
+    SetLoading () {
+        if (this.$(".isShow") == null) {
+            var isShow = document.createElement("div")
+            isShow.className = "isShow"
+            isShow.style = "display: none;"
+
+            var loading = document.createElement("div")
+            loading.className = "loading";
+            isShow.appendChild(loading)
+            this.$("body").appendChild(isShow)
+        }
+    }
+   
+    /**
+     * 删除内容，隐藏弹窗
+     */
+    close() {
+        this.clearContent()
+        this.$(".isShow").style.display = "none"
+    }
+
+    /**
+     * 显示弹窗
+     */
+    show() {
+        this.$(".isShow").style.display = "block"
+    }
+
+    /**
+     * 清空弹窗内部的内容
+     */
+    clearContent() {
+        this.$(".isShow .loading").style = "";
+        this.$(".isShow .loading").innerHTML = "";
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+}
+
+var Tips = new Loading()

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/lib/rem.js

@@ -0,0 +1,11 @@
+window.onload = function () {
+  getRem(750, 100)
+};
+window.onresize = function () {
+  getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+  var html = document.getElementsByTagName("html")[0];
+  var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+  html.style.fontSize = oWidth / pwidth * prem + "px";
+}

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/lib/swiper.js

@@ -0,0 +1,331 @@
+(function () {
+    /**
+     * 构造函数
+     * @param {*} ParentElement 父节点的选择器名称
+     * @param {*} Configuration 插件的自定义设置项
+     */
+    function Swiper(ParentElement, Configuration) {
+        // 默认参数
+        // slideChangeTransitionStart【完成】
+        // slideTo【完成】
+        this.defaultConf = {
+            reverse: false,
+            timer: '', // 保存自动播放的定时器
+            ParentElement: '.swiper-container',
+            wrapper: '.swiper-wrapper',
+            slide: '.swiper-slide',
+            config: {
+                loop: false, // 是否开启循环播放【完成】
+                time: 1,     // 自动播放的间隔事件【完成】
+                speed: 300,  // 切换轮播图时候用的时间【完成】
+                grabCursor: false, // 鼠标放到轮播图上是否显示为 小手【完成】
+                initialSlide: 0, // 默认显示第一个【完成】
+                auto: false, // 是否开启自动播放【完成】
+            },
+            // 小圆点的父标签选择器名称
+            pagination: {
+                el: '.swiper-pagination',
+            },
+            navigation: {
+                nextEl: '.swiper-button-next', // 下一页
+                prevEl: '.swiper-button-prev', // 上一页
+            },
+        }
+
+        this.defaultConf.ParentElement = ParentElement || this.defaultConf.ParentElement;
+        this.defaultConf.config.loop = Configuration.loop || this.defaultConf.config.loop;
+        this.defaultConf.config.time = Configuration.time || this.defaultConf.config.time;
+        this.defaultConf.config.speed = Configuration.speed || this.defaultConf.config.speed;
+        this.defaultConf.config.grabCursor = Configuration.grabCursor || this.defaultConf.config.grabCursor;
+        this.defaultConf.config.initialSlide = Configuration.initialSlide || this.defaultConf.config.initialSlide;
+        this.defaultConf.config.auto = Configuration.auto || this.defaultConf.config.auto;
+        this.defaultConf.wrapper = Configuration.wrapper || this.defaultConf.wrapper;
+        this.defaultConf.slide = Configuration.slide || this.defaultConf.slide;
+
+        this.slideArr = this._(`${this.defaultConf.wrapper} ${this.defaultConf.slide}`);
+
+        // 最外层 swiper-container 宽度
+        this.f = this.$(this.defaultConf.ParentElement).offsetWidth;
+
+        // 判断小圆点
+        if (Configuration.hasOwnProperty("pagination")) {
+            this.defaultConf.pagination.el = Configuration.pagination.el;
+            this.RenderDot()
+        }
+
+        // 判断使用自定义前进后退按钮
+        if (Configuration.hasOwnProperty("navigation")) {
+            this.RenderNavigation()
+            //判断下一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("nextEl")) {
+                this.defaultConf.navigation.nextEl = Configuration.navigation.nextEl;
+            }
+            //判断上一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("prevEl")) {
+                this.defaultConf.navigation.prevEl = Configuration.navigation.prevEl;
+            }
+        }
+
+        this.UserConfig = Configuration
+        this.init()
+    }
+
+
+    // 类的方法
+    Swiper.prototype = {
+        init: function () {
+            this.SetWrapperWidth();
+            this.defaultConf.config.auto ? this.AutoPlay() : '';
+            this.initSwiperSlide()
+        },
+        // 设置swiper-slide父类的宽度
+        SetWrapperWidth: function () {
+
+            // 计算swiper-slide的宽度
+            this.slideArr.forEach(v => v.style.width = `${this.f}px`)
+            this.$(this.defaultConf.wrapper).style = `
+                width: ${this.f * this.slideArr.length}px;
+                left: -${this.f * this.defaultConf.config.initialSlide}px;
+                transition: all ease ${this.defaultConf.config.speed / 1000}s;
+                cursor: ${this.defaultConf.config.grabCursor ? 'pointer' : ''} ;
+            `
+        },
+
+        /**
+         * 注册移动端滑动
+         */
+        initSwiperSlide: function () {
+            var fa = this.$(this.defaultConf.ParentElement),
+              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:
+                        this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
+                        this.animation(-this.f)
+                        this.CallMethods()
+                        this.UserConfig.pagination && this.ChangeDotActive()
+                        console.log("向左！")
+                        break;
+                    case 4:
+                        this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
+                        this.animation(this.f)
+                        this.CallMethods()
+                        this.UserConfig.pagination && this.ChangeDotActive()
+                        console.log("向右滑动");
+                        break;
+                    default:
+                }
+            })
+        },
+
+        CallMethods() {
+            if (this.UserConfig.hasOwnProperty("on")) {
+                var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
+                index = TotalLeft / this.f;
+                // 实现调用用户传入的方法，返回下标给用户
+                this.UserConfig.on && this.UserConfig.on.slideChangeTransitionStart(index)
+            }
+        },
+
+        // 生成小圆点
+        RenderDot: function () {
+            this.slideArr.forEach((v, i) => {
+                this.$(this.defaultConf.pagination.el).innerHTML +=
+                  `
+                    <div class="swiper-dot ${i == 0 ? 'swiper-active' : ''}"></div>
+                `
+            });
+
+            var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
+            Dot.forEach((v, i) => {
+                v.onclick = () => {
+                    this.UserConfig.pagination && this.ChangeDotActive(i)
+                    this.$(this.defaultConf.wrapper).style.left = `-${i * this.f}px`;
+                }
+            })
+        },
+
+        // 渲染左右前进后退按钮
+        RenderNavigation: function () {
+            var prev = this.$(this.defaultConf.navigation.prevEl);
+            var next = this.$(this.defaultConf.navigation.nextEl);
+            prev.innerText = "<";
+            next.innerText = ">";
+            this.BindNavigationClick(prev, next)
+        },
+
+        // 为上一页下一页按钮绑定切换事件
+        BindNavigationClick() {
+            // var a = this
+            // 下一页
+            this.$(this.defaultConf.navigation.nextEl).onclick = () => {
+                this.animation(-this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+            // 上一页
+            this.$(this.defaultConf.navigation.prevEl).onclick = () => {
+                this.animation(this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+        },
+
+        // 切换动画
+        animation(offset) {
+            var swiperWrapper = this.$(this.defaultConf.wrapper);
+            var y = parseInt(swiperWrapper.style.left) + offset,
+              max = -(this.f * (this.slideArr.length - 1));
+
+            // 如果时最后一张图    
+            if (y < max) {
+                if (this.defaultConf.config.loop) {
+                    swiperWrapper.style.left = "0px";
+                } else if (this.defaultConf.config.auto) {
+                    this.defaultConf.reverse = true
+                    this.animation(this.f)
+                }
+                return;
+
+                // 判断是不是第一张图    
+            } else if (y > 0) {
+                if (this.defaultConf.config.loop == false && this.defaultConf.config.auto) {
+                    this.defaultConf.reverse = false
+                    swiperWrapper.style.left = `${y - this.f * 2}px`
+                }
+                if (this.defaultConf.config.loop) {
+                    swiperWrapper.style.left = `${max}px`
+                }
+                return
+            } else {
+                if (this.defaultConf.config.loop == false
+                  && this.defaultConf.config.auto
+                  && this.defaultConf.reverse) {
+                    swiperWrapper.style.left = `${y}px`
+                } else {
+                    swiperWrapper.style.left = `${y}px`
+                }
+
+            }
+        },
+
+        ChangeDotActive(type = null) {
+            var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
+            var index = "";
+            if (type == null) {
+                var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
+                index = TotalLeft / this.f;
+            } else {
+                index = type;
+            }
+
+            // 实现调用用户传入的方法，返回下标给用户
+            this.CallMethods()
+
+            // 清除所有的激活样式
+            Dot.forEach(val => val.className = "swiper-dot");
+            // 为你点击的li加激活样式
+            Dot[index].className = "swiper-dot swiper-active";
+        },
+
+        AutoPlay() {
+            this.defaultConf.timer = setInterval(() => {
+                if (this.defaultConf.config.loop == false
+                  && this.defaultConf.config.auto
+                  && this.defaultConf.reverse) {
+                    this.animation(this.f)
+                } else {
+                    this.animation(-this.f)
+                }
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }, this.defaultConf.config.time * 1000)
+
+            this.$(this.defaultConf.ParentElement).onmouseover = function () {
+                clearInterval(this.defaultConf.timer)
+            }
+
+            this.$(this.defaultConf.ParentElement).onmouseout = () => {
+                this.AutoPlay()
+            }
+        },
+
+        // 通过js调用此方法，实现轮播图的切换
+        slideTo(index) {
+            this.$(this.defaultConf.wrapper).style.left = `-${index * this.f}px`;
+            this.UserConfig.pagination && this.ChangeDotActive()
+        },
+        $: function (className) {
+            return document.querySelector(className)
+        },
+        _: function (className) {
+            return document.querySelectorAll(className)
+        }
+    }
+
+
+    window.swiper = Swiper
+
+
+})()

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/page/edit.js

@@ -0,0 +1,58 @@
+class Edit {
+  constructor() {
+    this.principal = JSON.parse(localStorage.getItem("principal"))
+    this.additional = JSON.parse(localStorage.getItem("additional"))
+    header("分类编辑");
+    this.renderType()
+  }
+
+
+  renderType() {
+    $(".default ul").innerHTML = ""
+    this.principal.forEach((v,i) => {
+      $(".default ul").innerHTML += `
+         <li>${i == 0 ? '':v.title}</li>
+        `
+    })
+
+    _(".default ul li").forEach((v,i) => {
+      v.onclick = () => {
+
+        this.additional.push(this.principal[i])
+
+        this.principal = this.principal.filter(item => {
+          return item.id != this.principal[i].id
+        })
+        localStorage.setItem("principal", JSON.stringify(this.principal))
+        localStorage.setItem("additional", JSON.stringify(this.additional))
+        this.renderType()
+      }
+    })
+
+
+    $(".add ul").innerHTML = ""
+    this.additional.forEach((v,i) => {
+      $(".add ul").innerHTML += `
+         <li>${v.title}</li>
+        `
+    })
+
+
+    _(".add ul li").forEach((v,i) => {
+     v.onclick = () => {
+       this.principal.push(this.additional[i]);
+
+       this.additional = this.additional.filter(item => {
+         return item.id != this.additional[i].id
+       })
+
+       localStorage.setItem("principal", JSON.stringify(this.principal))
+       localStorage.setItem("additional", JSON.stringify(this.additional))
+       this.renderType()
+     }
+    })
+
+  }
+}
+
+new Edit();

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/page/home.js

@@ -0,0 +1,121 @@
+class Home {
+  constructor() {
+    footer()
+    this.tabs = [];
+    this.index = 0
+    this.getHome()
+    this.getType()
+
+  }
+
+  async getType() {
+    var res;
+    if (localStorage.getItem("principal") == null) {
+      var data = await indexServe.type();
+      res = data.principal
+      localStorage.setItem("principal", JSON.stringify(data.principal))
+      localStorage.setItem("additional", JSON.stringify(data.additional))
+    } else  {
+      res = JSON.parse(localStorage.getItem("principal"))
+    }
+
+    this.tabs = res
+    console.log( this.tabs)
+    // 渲染横向菜单
+    res.forEach((v,i) => {
+      if (i != 0 ) {
+        $(".page-wrapper").innerHTML+=`
+          <div class="padding swiper-slide side_${i} pitem"></div>
+        `
+      }
+      $(".left_menu").innerHTML+=`
+       <li class="${i == 0 ? 'active':''}">${v.title}</li>
+      `
+    })
+
+    var li = _(".left_menu li");
+
+    var self = this;
+    // 初始化页面轮播图
+    var page = new swiper('.page-container', {
+      wrapper: '.page-wrapper',
+      on: {
+        slideChangeTransitionStart(index) {
+          li.forEach(item => item.className ="");
+          li[index].classList.add("active")
+          if (index != 0) {
+            self.index = index;
+            self.getClassList()
+          }
+        }
+      }
+    })
+
+    // 点击菜单的事件
+
+    li.forEach((v,i) => {
+      v.onclick = () => {
+        li.forEach(item => item.className ="");
+        v.classList.add("active")
+        page.slideTo(i)
+        if (i != 0) {
+          this.index = i;
+          this.getClassList()
+        }
+      }
+    })
+  }
+
+  async getHome() {
+    var res = await indexServe.index();
+    console.log(res)
+    res.model.res.forEach((v,i) => {
+      $(".model-wrapper").innerHTML+=`
+       <div class="swiper-slide model-slide">
+         ${
+            v.map((item,index)=>{
+              return `
+                <div class="model-item">
+                  <div class="item-img">
+                    <img src="${item.preview}" alt="">
+                    <span>${item.total}</span>
+                  </div>
+                  <p>${item.title}</p>
+                </div>
+              `
+            }).toString().replaceAll(",","")
+          }
+       </div>
+      `
+    });
+
+    item(".news ul", res.newest.data)
+    item(".tuijian ul", res.recommended.data)
+
+    var model = new swiper('.mode-container', {
+      wrapper: '.model-wrapper',
+    })
+
+  }
+
+  async getClassList() {
+    if (this.tabs[this.index].content.length == 0) {
+      var res = await indexServe.classList({
+        page: this.tabs[this.index].page,
+        id: this.tabs[this.index].id
+      });
+      this.tabs[this.index].content = res.data
+      this.tabs[this.index].total_page = res.total_page
+
+      item(`.side_${this.index}`, this.tabs[this.index].content)
+
+    }
+
+  }
+
+
+}
+
+new Home();
+
+

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/page/info.js

@@ -0,0 +1,99 @@
+class Info {
+  constructor() {
+    this.res = {}
+    this.page = 6;
+    this.total_page = 0;
+    this.like = localStorage.getItem("likeArr") == null
+      ? []
+      : JSON.parse(localStorage.getItem("likeArr"))
+    this.getInfo().then(() => {
+      this.bindInfoEvent()
+    })
+
+  }
+
+  bindInfoEvent() {
+    header(this.res.title, `
+      <i class="like iconfont icon-xin"></i>
+      <i class="iconfont icon-home"></i>
+    `);
+    $(".icon-xiangxia").onclick = () => {
+      this.page+=1;
+      if (this.page <= this.total_page) {
+        this.getInfo()
+        if (this.page == this.total_page) {
+          $(".icon-xiangxia").style.display = "none"
+        }
+      }
+    }
+
+    var isHave = this.like.filter(v => {
+      return v.id == query("id")
+    })
+
+    if (isHave.length != 0) {
+      $(".like").classList.remove("icon-xin")
+      $(".like").classList.add("icon-aixin")
+    }
+
+
+    $(".like").onclick = () => {
+      // 空心图标，点击后变成实心
+      if ($(".like").classList.contains("icon-xin")) {
+        $(".like").classList.remove("icon-xin")
+        $(".like").classList.add("icon-aixin")
+        this.like.push({
+          id: query("id"),
+          title: this.res.title,
+          total: this.res.total,
+          source: this.res.source,
+          info: this.res.info,
+          preview: query("url")
+        });
+
+        localStorage.setItem("likeArr", JSON.stringify(this.like))
+      } else {
+        $(".like").classList.remove("icon-aixin")
+        $(".like").classList.add("icon-xin")
+
+        this.like = this.like.filter(v => {
+          return v.id != query("id")
+        });
+        console.log(this.like)
+        localStorage.setItem("likeArr", JSON.stringify(this.like))
+      }
+    }
+  }
+
+  async getInfo () {
+    this.res = await indexServe.info({
+      page: this.page,
+      id: query("id")
+    });
+
+    this.total_page = this.res.total_page;
+
+
+    this.res.data.forEach(v => {
+      // var img = new Image();
+      var img = document.createElement("img");
+      img.src = v.src;
+      img.onload = () => {
+        $(".info_img").innerHTML += `
+          <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+              <a href="${v.src}"  itemprop="contentUrl" data-size="${img.width}x${img.height}">
+                  <img src="${v.src}" itemprop="thumbnail" alt="${v.title}" />
+              </a>
+              <figcaption itemprop="${v.title}">${v.title}</figcaption>
+          </figure>
+        `
+      }
+    })
+
+    initPhotoSwipeFromDOM(".info_img")
+    item(".recomm", this.res.recommend)
+    item(".relevant", this.res.relevant)
+  }
+}
+
+new Info();

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/page/mechanism.js

@@ -0,0 +1,7 @@
+class Mechanism {
+  constructor() {
+    utils.footer();
+  }
+}
+
+new Mechanism()

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/page/model.js

@@ -0,0 +1,7 @@
+class Model {
+  constructor() {
+    utils.footer();
+  }
+}
+
+new Model()

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/page/my.js

@@ -0,0 +1,7 @@
+class My {
+  constructor() {
+    utils.footer();
+  }
+}
+
+new My()

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/serve/indexServe.js

@@ -0,0 +1,62 @@
+class IndexServe {
+
+  async index(data = {}) {
+    var res = await new Ajax().get({
+      url: config.apiList.home,
+      data: data
+    })
+
+    var data = [ [], [] ]
+    res.model.res.forEach((v,i) => {
+      if (i <= 3) {
+        data[0].push(v)
+      } else {
+        data[1].push(v)
+      }
+    });
+
+    res.model.res = data
+    return res;
+  }
+
+  async type(data = {}) {
+    var res = await new Ajax().get({
+      url: config.apiList.type,
+      data: data
+    })
+
+    res.principal.unshift({
+      id: -1,
+      page: 0,
+      title: "首页"
+    });
+
+    res.principal.forEach(v => {
+      v.content = [];
+      v.total_page = 0;
+    })
+
+    res.additional.forEach(v => {
+      v.content = [];
+      v.total_page = 0;
+    })
+
+    return res
+  }
+
+  async classList(data = {}) {
+    return await new Ajax().get({
+      url: config.apiList.classList,
+      data: data
+    })
+  }
+
+  async info(data = {}) {
+    return await new Ajax().get({
+      url: config.apiList.info,
+      data: data
+    })
+  }
+}
+
+var indexServe = new IndexServe()

历届学生/韩一伟/项目开发/上课项目/屁桃儿/js/util/index.js

@@ -0,0 +1,303 @@
+class Util {
+
+  footer () {
+    var body = $("body")
+    var currentPath = location.href.split("page/")[1];
+
+    var html = `
+    <ul class="footer clear">
+      ${
+        config.footer.map((v,i) => {
+          return `
+           <li class="${ v.path.includes(currentPath) ? 'footer_active' : '' }">
+              <a href="${v.path}">
+                <i class="iconfont ${v.icon}"></i>
+                <span>${v.title}</span>
+              </a>
+            </li>
+          `
+        }).toString().replaceAll(",","")
+      }
+    </ul>
+    `
+
+    body.innerHTML += html
+
+  }
+
+  item(className,data) {
+    var li = ""
+    data.forEach(v => {
+      li+=`
+       <li>
+        <div class="top">
+          <a href="./info.html?id=${v.id}&url=${v.preview}">
+            <img src="${v.preview}" alt="">
+            <span>${v.total}</span>
+          </a>
+        </div>
+        <a href="./info.html?id=${v.id}">
+          <div class="title">${v.title}</div>
+          <div class="source">${v.user}</div>
+          <div class="source">${v.source}</div>
+        </a>
+        <div class="tags">
+          ${
+            v.tags.map(item => {
+              return `<a class="tags-item">${item.title}</a>`
+            }).toString().replaceAll(",","")
+          }
+        </div>
+      </li>
+      `
+    })
+    $(className).innerHTML = li
+  }
+
+  header (title = "", html = "") {
+    var html = `
+      <div class="pub_header theme_color padding clear">
+        <div class="header_left">
+          <i class="iconfont icon-back1"></i>
+          <span>${title}</span>
+        </div>
+        <div class="header_right">
+          ${html}
+        </div>
+      </div>
+    `;
+
+    $("body").innerHTML += html;
+
+    $(".icon-back1").onclick = () => {
+      history.back()
+    }
+
+    $(".icon-home") != null ?$(".icon-home").onclick = () => {
+      location.href = "./home.html"
+    } : ''
+  }
+
+
+  query(name) {
+    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+    var r = window.location.search.substr(1).match(reg);
+    if (r != null) return unescape(r[2]);
+    return null;
+  }
+
+  initPhotoSwipeFromDOM(gallerySelector) {
+    var parseThumbnailElements = function(el) {
+      var thumbElements = el.childNodes,
+        numNodes = thumbElements.length,
+        items = [],
+        figureEl,
+        linkEl,
+        size,
+        item;
+
+      for(var i = 0; i < numNodes; i++) {
+
+        figureEl = thumbElements[i]; // <figure> element
+
+        // include only element nodes
+        if(figureEl.nodeType !== 1) {
+          continue;
+        }
+
+        linkEl = figureEl.children[0]; // <a> element
+
+        size = linkEl.getAttribute('data-size').split('x');
+
+        // create slide object
+        item = {
+          src: linkEl.getAttribute('href'),
+          w: parseInt(size[0], 10),
+          h: parseInt(size[1], 10)
+        };
+
+
+
+        if(figureEl.children.length > 1) {
+          // <figcaption> content
+          item.title = figureEl.children[1].innerHTML;
+        }
+
+        if(linkEl.children.length > 0) {
+          // <img> thumbnail element, retrieving thumbnail url
+          item.msrc = linkEl.children[0].getAttribute('src');
+        }
+
+        item.el = figureEl; // save link to element for getThumbBoundsFn
+        items.push(item);
+      }
+
+      return items;
+    };
+
+    // find nearest parent element
+    var closest = function closest(el, fn) {
+      return el && ( fn(el) ? el : closest(el.parentNode, fn) );
+    };
+
+    // triggers when user clicks on thumbnail
+    var onThumbnailsClick = function(e) {
+      e = e || window.event;
+      e.preventDefault ? e.preventDefault() : e.returnValue = false;
+
+      var eTarget = e.target || e.srcElement;
+
+      // find root element of slide
+      var clickedListItem = closest(eTarget, function(el) {
+        return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
+      });
+
+      if(!clickedListItem) {
+        return;
+      }
+
+      // find index of clicked item by looping through all child nodes
+      // alternatively, you may define index via data- attribute
+      var clickedGallery = clickedListItem.parentNode,
+        childNodes = clickedListItem.parentNode.childNodes,
+        numChildNodes = childNodes.length,
+        nodeIndex = 0,
+        index;
+
+      for (var i = 0; i < numChildNodes; i++) {
+        if(childNodes[i].nodeType !== 1) {
+          continue;
+        }
+
+        if(childNodes[i] === clickedListItem) {
+          index = nodeIndex;
+          break;
+        }
+        nodeIndex++;
+      }
+
+
+
+      if(index >= 0) {
+        // open PhotoSwipe if valid index found
+        openPhotoSwipe( index, clickedGallery );
+      }
+      return false;
+    };
+
+    // parse picture index and gallery index from URL (#&pid=1&gid=2)
+    var photoswipeParseHash = function() {
+      var hash = window.location.hash.substring(1),
+        params = {};
+
+      if(hash.length < 5) {
+        return params;
+      }
+
+      var vars = hash.split('&');
+      for (var i = 0; i < vars.length; i++) {
+        if(!vars[i]) {
+          continue;
+        }
+        var pair = vars[i].split('=');
+        if(pair.length < 2) {
+          continue;
+        }
+        params[pair[0]] = pair[1];
+      }
+
+      if(params.gid) {
+        params.gid = parseInt(params.gid, 10);
+      }
+
+      return params;
+    };
+
+    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
+      var pswpElement = document.querySelectorAll('.pswp')[0],
+        gallery,
+        options,
+        items;
+
+      items = parseThumbnailElements(galleryElement);
+
+      // define options (if needed)
+      options = {
+
+        // define gallery index (for URL)
+        galleryUID: galleryElement.getAttribute('data-pswp-uid'),
+
+        getThumbBoundsFn: function(index) {
+          // See Options -> getThumbBoundsFn section of documentation for more info
+          var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
+            pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+            rect = thumbnail.getBoundingClientRect();
+
+          return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
+        }
+
+      };
+
+      // PhotoSwipe opened from URL
+      if(fromURL) {
+        if(options.galleryPIDs) {
+          // parse real index when custom PIDs are used
+          // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
+          for(var j = 0; j < items.length; j++) {
+            if(items[j].pid == index) {
+              options.index = j;
+              break;
+            }
+          }
+        } else {
+          // in URL indexes start from 1
+          options.index = parseInt(index, 10) - 1;
+        }
+      } else {
+        options.index = parseInt(index, 10);
+      }
+
+      // exit if index not found
+      if( isNaN(options.index) ) {
+        return;
+      }
+
+      if(disableAnimation) {
+        options.showAnimationDuration = 0;
+      }
+
+      // Pass data to PhotoSwipe and initialize it
+      gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
+      gallery.init();
+    };
+
+    // loop through all gallery elements and bind events
+    var galleryElements = document.querySelectorAll( gallerySelector );
+
+    for(var i = 0, l = galleryElements.length; i < l; i++) {
+      galleryElements[i].setAttribute('data-pswp-uid', i+1);
+      galleryElements[i].onclick = onThumbnailsClick;
+    }
+
+    // Parse URL and open gallery if it contains #&pid=3&gid=1
+    var hashData = photoswipeParseHash();
+    if(hashData.pid && hashData.gid) {
+      openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
+    }
+  }
+
+  $(className) {
+    return document.querySelector(className);
+  }
+
+  _(className) {
+    return document.querySelectorAll(className);
+  }
+
+}
+
+var {
+  $, _, footer,
+  item, header,
+  query, initPhotoSwipeFromDOM
+} = new Util();