first commit

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/config/config.js

@@ -0,0 +1,37 @@
+// 专门用来存放所有的接口地址
+
+var config = {
+
+    // 基地址  dev（开发阶段）  test（测试阶段）  prod（正式）
+    devUrl: 'http://127.0.0.1:3000/api/json',
+    testUrl: 'http://127.0.0.1:9090/api/json',
+    prodUrl: 'http://127.0.0.1/api/json',
+    stage: 'dev',
+    urlList: {
+        index: '/index',
+        info: '/info',
+        agentInfo: '/agent/info',
+        classList: '/classList',
+        type: "/class",
+        mechanism: '/mechanism',
+        mechanismList: '/mechanismList',
+        allModel: '/allModel',
+        modelList: '/modelList'
+    },
+    checkUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devUrl
+                break;
+            case "test":
+                return this.testUrl
+                break;
+            case "prod":
+                return this.prodUrl
+                break;
+            default:
+                break;
+        }
+    },
+
+}

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/http/http.js

@@ -0,0 +1,56 @@
+class HTTP {
+
+    constructor() {
+        this.xhr = new XMLHttpRequest();
+    }
+
+    get(option) {
+        return new Promise((success, error) => {
+            var GetParams = ""
+            for (const key in option.data) {
+                GetParams += `&${key}=${option.data[key]}`
+            }
+            GetParams = GetParams.replace("&", "?")
+            option.url += GetParams;
+
+            this.xhr.open("GET", config.checkUrl() + option.url)
+            this.xhr.send()
+            this.onreadystatechange(success, error)
+        })
+    }
+
+    post(option) {
+        return new Promise((success, error) => {
+            this.xhr.open("POST", config.checkUrl() + option.url)
+            this.xhr.setRequestHeader("Content-Type","application/json; charset = UTF-8");
+            this.xhr.send(JSON.stringify(option.data))
+            this.onreadystatechange(success, error)
+        })
+    }
+
+    onreadystatechange(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    var data = JSON.parse(this.xhr.responseText)
+                    switch (data.status) {
+                        case 200:
+                            return success(data.result || data.data)
+                        break;
+
+                        case 404:
+                            alert(data.msg);
+                            throw new Error(data.msg);
+                            break;
+                    }
+                } else {
+                    console.log("暂无数据");
+                    error(this.xhr)
+                }
+
+            }
+        }
+    }
+
+
+}

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/lib/photoswipe/default-skin.css

@@ -0,0 +1,482 @@
+/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+
+	Contents:
+
+	1. Buttons
+	2. Share modal and links
+	3. Index indicator ("1 of X" counter)
+	4. Caption
+	5. Loading indicator
+	6. Additional styles (root element, top bar, idle state, hidden state, etc.)
+
+*/
+/*
+	
+	1. Buttons
+
+ */
+/* <button> css reset */
+.pswp__button {
+  width: 44px;
+  height: 44px;
+  position: relative;
+  background: none;
+  cursor: pointer;
+  overflow: visible;
+  -webkit-appearance: none;
+  display: block;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  float: right;
+  opacity: 0.75;
+  -webkit-transition: opacity 0.2s;
+          transition: opacity 0.2s;
+  -webkit-box-shadow: none;
+          box-shadow: none; }
+  .pswp__button:focus, .pswp__button:hover {
+    opacity: 1; }
+  .pswp__button:active {
+    outline: none;
+    opacity: 0.9; }
+  .pswp__button::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+
+/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
+.pswp__ui--over-close .pswp__button--close {
+  opacity: 1; }
+
+.pswp__button,
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
+  background: url(default-skin.png) 0 0 no-repeat;
+  background-size: 264px 88px;
+  width: 44px;
+  height: 44px; }
+
+@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
+  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
+  .pswp--svg .pswp__button,
+  .pswp--svg .pswp__button--arrow--left:before,
+  .pswp--svg .pswp__button--arrow--right:before {
+    background-image: url(default-skin.svg); }
+  .pswp--svg .pswp__button--arrow--left,
+  .pswp--svg .pswp__button--arrow--right {
+    background: none; } }
+
+.pswp__button--close {
+  background-position: 0 -44px; }
+
+.pswp__button--share {
+  background-position: -44px -44px; }
+
+.pswp__button--fs {
+  display: none; }
+
+.pswp--supports-fs .pswp__button--fs {
+  display: block; }
+
+.pswp--fs .pswp__button--fs {
+  background-position: -44px 0; }
+
+.pswp__button--zoom {
+  display: none;
+  background-position: -88px 0; }
+
+.pswp--zoom-allowed .pswp__button--zoom {
+  display: block; }
+
+.pswp--zoomed-in .pswp__button--zoom {
+  background-position: -132px 0; }
+
+/* no arrows on touch screens */
+.pswp--touch .pswp__button--arrow--left,
+.pswp--touch .pswp__button--arrow--right {
+  visibility: hidden; }
+
+/*
+	Arrow buttons hit area
+	(icon is added to :before pseudo-element)
+*/
+.pswp__button--arrow--left,
+.pswp__button--arrow--right {
+  background: none;
+  top: 50%;
+  margin-top: -50px;
+  width: 70px;
+  height: 100px;
+  position: absolute; }
+
+.pswp__button--arrow--left {
+  left: 0; }
+
+.pswp__button--arrow--right {
+  right: 0; }
+
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
+  content: '';
+  top: 35px;
+  background-color: rgba(0, 0, 0, 0.3);
+  height: 30px;
+  width: 32px;
+  position: absolute; }
+
+.pswp__button--arrow--left:before {
+  left: 6px;
+  background-position: -138px -44px; }
+
+.pswp__button--arrow--right:before {
+  right: 6px;
+  background-position: -94px -44px; }
+
+/*
+
+	2. Share modal/popup and links
+
+ */
+.pswp__counter,
+.pswp__share-modal {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+      user-select: none; }
+
+.pswp__share-modal {
+  display: block;
+  background: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  position: absolute;
+  z-index: 1600;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease-out;
+          transition: opacity 0.25s ease-out;
+  -webkit-backface-visibility: hidden;
+  will-change: opacity; }
+
+.pswp__share-modal--hidden {
+  display: none; }
+
+.pswp__share-tooltip {
+  z-index: 1620;
+  position: absolute;
+  background: #FFF;
+  top: 56px;
+  border-radius: 2px;
+  display: block;
+  width: auto;
+  right: 44px;
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+  -webkit-transform: translateY(6px);
+      -ms-transform: translateY(6px);
+          transform: translateY(6px);
+  -webkit-transition: -webkit-transform 0.25s;
+          transition: transform 0.25s;
+  -webkit-backface-visibility: hidden;
+  will-change: transform; }
+  .pswp__share-tooltip a {
+    display: block;
+    padding: 8px 12px;
+    color: #000;
+    text-decoration: none;
+    font-size: 14px;
+    line-height: 18px; }
+    .pswp__share-tooltip a:hover {
+      text-decoration: none;
+      color: #000; }
+    .pswp__share-tooltip a:first-child {
+      /* round corners on the first/last list item */
+      border-radius: 2px 2px 0 0; }
+    .pswp__share-tooltip a:last-child {
+      border-radius: 0 0 2px 2px; }
+
+.pswp__share-modal--fade-in {
+  opacity: 1; }
+  .pswp__share-modal--fade-in .pswp__share-tooltip {
+    -webkit-transform: translateY(0);
+        -ms-transform: translateY(0);
+            transform: translateY(0); }
+
+/* increase size of share links on touch devices */
+.pswp--touch .pswp__share-tooltip a {
+  padding: 16px 12px; }
+
+a.pswp__share--facebook:before {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: -12px;
+  right: 15px;
+  border: 6px solid transparent;
+  border-bottom-color: #FFF;
+  -webkit-pointer-events: none;
+  -moz-pointer-events: none;
+  pointer-events: none; }
+
+a.pswp__share--facebook:hover {
+  background: #3E5C9A;
+  color: #FFF; }
+  a.pswp__share--facebook:hover:before {
+    border-bottom-color: #3E5C9A; }
+
+a.pswp__share--twitter:hover {
+  background: #55ACEE;
+  color: #FFF; }
+
+a.pswp__share--pinterest:hover {
+  background: #CCC;
+  color: #CE272D; }
+
+a.pswp__share--download:hover {
+  background: #DDD; }
+
+/*
+
+	3. Index indicator ("1 of X" counter)
+
+ */
+.pswp__counter {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 44px;
+  font-size: 13px;
+  line-height: 44px;
+  color: #FFF;
+  opacity: 0.75;
+  padding: 0 10px; }
+
+/*
+	
+	4. Caption
+
+ */
+.pswp__caption {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  min-height: 44px; }
+  .pswp__caption small {
+    font-size: 11px;
+    color: #BBB; }
+
+.pswp__caption__center {
+  text-align: left;
+  max-width: 420px;
+  margin: 0 auto;
+  font-size: 13px;
+  padding: 10px;
+  line-height: 20px;
+  color: #CCC; }
+
+.pswp__caption--empty {
+  display: none; }
+
+/* Fake caption element, used to calculate height of next/prev image */
+.pswp__caption--fake {
+  visibility: hidden; }
+
+/*
+
+	5. Loading indicator (preloader)
+
+	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
+
+ */
+.pswp__preloader {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -22px;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease-out;
+          transition: opacity 0.25s ease-out;
+  will-change: opacity;
+  direction: ltr; }
+
+.pswp__preloader__icn {
+  width: 20px;
+  height: 20px;
+  margin: 12px; }
+
+.pswp__preloader--active {
+  opacity: 1; }
+  .pswp__preloader--active .pswp__preloader__icn {
+    /* We use .gif in browsers that don't support CSS animation */
+    background: url(preloader.gif) 0 0 no-repeat; }
+
+.pswp--css_animation .pswp__preloader--active {
+  opacity: 1; }
+  .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
+    -webkit-animation: clockwise 500ms linear infinite;
+            animation: clockwise 500ms linear infinite; }
+  .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
+    -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
+            animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
+
+.pswp--css_animation .pswp__preloader__icn {
+  background: none;
+  opacity: 0.75;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  margin: 0; }
+
+.pswp--css_animation .pswp__preloader__cut {
+  /* 
+			The idea of animating inner circle is based on Polymer ("material") loading indicator 
+			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
+		*/
+  position: relative;
+  width: 7px;
+  height: 14px;
+  overflow: hidden; }
+
+.pswp--css_animation .pswp__preloader__donut {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #FFF;
+  border-radius: 50%;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: none;
+  margin: 0; }
+
+@media screen and (max-width: 1024px) {
+  .pswp__preloader {
+    position: relative;
+    left: auto;
+    top: auto;
+    margin: 0;
+    float: right; } }
+
+@-webkit-keyframes clockwise {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg); } }
+
+@keyframes clockwise {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg); } }
+
+@-webkit-keyframes donut-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0); }
+  50% {
+    -webkit-transform: rotate(-140deg);
+            transform: rotate(-140deg); }
+  100% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0); } }
+
+@keyframes donut-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0); }
+  50% {
+    -webkit-transform: rotate(-140deg);
+            transform: rotate(-140deg); }
+  100% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0); } }
+
+/*
+	
+	6. Additional styles
+
+ */
+/* root element of UI */
+.pswp__ui {
+  -webkit-font-smoothing: auto;
+  visibility: visible;
+  opacity: 1;
+  z-index: 1550; }
+
+/* top black bar with buttons and "1 of X" indicator */
+.pswp__top-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 44px;
+  width: 100%; }
+
+.pswp__caption,
+.pswp__top-bar,
+.pswp--has_mouse .pswp__button--arrow--left,
+.pswp--has_mouse .pswp__button--arrow--right {
+  -webkit-backface-visibility: hidden;
+  will-change: opacity;
+  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+
+/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
+.pswp--has_mouse .pswp__button--arrow--left,
+.pswp--has_mouse .pswp__button--arrow--right {
+  visibility: visible; }
+
+.pswp__top-bar,
+.pswp__caption {
+  background-color: rgba(0, 0, 0, 0.5); }
+
+/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
+.pswp__ui--fit .pswp__top-bar,
+.pswp__ui--fit .pswp__caption {
+  background-color: rgba(0, 0, 0, 0.3); }
+
+/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
+.pswp__ui--idle .pswp__top-bar {
+  opacity: 0; }
+
+.pswp__ui--idle .pswp__button--arrow--left,
+.pswp__ui--idle .pswp__button--arrow--right {
+  opacity: 0; }
+
+/*
+	pswp__ui--hidden class is added when controls are hidden
+	e.g. when user taps to toggle visibility of controls
+*/
+.pswp__ui--hidden .pswp__top-bar,
+.pswp__ui--hidden .pswp__caption,
+.pswp__ui--hidden .pswp__button--arrow--left,
+.pswp__ui--hidden .pswp__button--arrow--right {
+  /* Force paint & create composition layer for controls. */
+  opacity: 0.001; }
+
+/* pswp__ui--one-slide class is added when there is just one item in gallery */
+.pswp__ui--one-slide .pswp__button--arrow--left,
+.pswp__ui--one-slide .pswp__button--arrow--right,
+.pswp__ui--one-slide .pswp__counter {
+  display: none; }
+
+.pswp__element--disabled {
+  display: none !important; }
+
+.pswp--minimal--dark .pswp__top-bar {
+  background: none; }

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/lib/photoswipe/default-skin.svg

@@ -0,0 +1 @@
+<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/lib/photoswipe/initPhotoSwipeFromDOM.js

@@ -0,0 +1,202 @@
+var initPhotoSwipeFromDOM = function(gallerySelector) {
+
+    // parse slide data (url, title, size ...) from DOM elements
+    // (children of 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 );
+    }
+};

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/lib/photoswipe/photoswipe.css

@@ -0,0 +1,179 @@
+/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
+*/
+/* pswp = photoswipe */
+.pswp {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  -ms-touch-action: none;
+  touch-action: none;
+  z-index: 1500;
+  -webkit-text-size-adjust: 100%;
+  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
+  -webkit-backface-visibility: hidden;
+  outline: none; }
+  .pswp * {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box; }
+  .pswp img {
+    max-width: none; }
+
+/* style is added when JS option showHideOpacity is set to true */
+.pswp--animate_opacity {
+  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
+  opacity: 0.001;
+  will-change: opacity;
+  /* for open/close transition */
+  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+
+.pswp--open {
+  display: block; }
+
+.pswp--zoom-allowed .pswp__img {
+  /* autoprefixer: off */
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in; }
+
+.pswp--zoomed-in .pswp__img {
+  /* autoprefixer: off */
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab; }
+
+.pswp--dragging .pswp__img {
+  /* autoprefixer: off */
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing; }
+
+/*
+	Background is added as a separate element.
+	As animating opacity is much faster than animating rgba() background-color.
+*/
+.pswp__bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  will-change: opacity; }
+
+.pswp__scroll-wrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; }
+
+.pswp__container,
+.pswp__zoom-wrap {
+  -ms-touch-action: none;
+  touch-action: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0; }
+
+/* Prevent selection and tap highlights */
+.pswp__container,
+.pswp__img {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+      user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none; }
+
+.pswp__zoom-wrap {
+  position: absolute;
+  width: 100%;
+  -webkit-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  /* for open/close transition */
+  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+
+.pswp__bg {
+  will-change: opacity;
+  /* for open/close transition */
+  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+
+.pswp--animated-in .pswp__bg,
+.pswp--animated-in .pswp__zoom-wrap {
+  -webkit-transition: none;
+  transition: none; }
+
+.pswp__container,
+.pswp__zoom-wrap {
+  -webkit-backface-visibility: hidden; }
+
+.pswp__item {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow: hidden; }
+
+.pswp__img {
+  position: absolute;
+  width: auto;
+  height: auto;
+  top: 0;
+  left: 0; }
+
+/*
+	stretched thumbnail or div placeholder element (see below)
+	style is added to avoid flickering in webkit/blink when layers overlap
+*/
+.pswp__img--placeholder {
+  -webkit-backface-visibility: hidden; }
+
+/*
+	div element that matches size of large image
+	large image loads on top of it
+*/
+.pswp__img--placeholder--blank {
+  background: #222; }
+
+.pswp--ie .pswp__img {
+  width: 100% !important;
+  height: auto !important;
+  left: 0;
+  top: 0; }
+
+/*
+	Error message appears when image is not loaded
+	(JS option errorMsg controls markup)
+*/
+.pswp__error-msg {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  line-height: 16px;
+  margin-top: -8px;
+  color: #CCC; }
+
+.pswp__error-msg a {
+  color: #CCC;
+  text-decoration: underline; }

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/lib/rem.js

@@ -0,0 +1,13 @@
+window.onload = function () {
+    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
+      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
+    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";
+}

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/lib/swiper.js

@@ -0,0 +1,330 @@
+(() => {
+    /**
+     * 构造函数
+     * @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
+
+
+})()

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/UserAgreement.js

@@ -0,0 +1,6 @@
+class UserAgreement {
+    constructor () {
+        header("用户协议")
+    }
+}
+new UserAgreement();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/about.js

@@ -0,0 +1,6 @@
+class About {
+    constructor () {
+        header("关于我们")
+    }
+}
+new About();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/collect.js

@@ -0,0 +1,6 @@
+class Like {
+    constructor () {
+        header("我的收藏")
+    }
+}
+new Like();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/edit.js

@@ -0,0 +1,74 @@
+class Edit {
+
+    constructor() {
+        // 已选择分类
+        this.principal = JSON.parse(localStorage.getItem("principal"))
+        // 待选择分类
+        this.additional = JSON.parse(localStorage.getItem("additional"))
+        header("分类管理")
+        this.renderYourSelect()
+        this.renderNoSelect()
+    }
+
+    // 渲染已选择分类
+    renderYourSelect() {
+        $(".default ul").innerHTML = ""
+        this.principal.forEach(v => {
+            $(".default ul").innerHTML += `
+             <li>${v.title}</li>
+            `
+        })
+
+        var defaultLi = _(".default ul li");
+        defaultLi.forEach((v,i) => {
+            v.onclick = () => {
+                this.additional.push(this.principal[i])
+
+                this.principal = this.principal.filter((item,index) => {
+                    if (item.id != this.principal[i].id) {
+                        return item;
+                    }
+                });
+
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+
+
+                this.renderYourSelect();
+                this.renderNoSelect();
+            }
+        })
+    }
+
+    renderNoSelect () {
+        $(".select ul").innerHTML = ""
+        this.additional.forEach(v => {
+            $(".select ul").innerHTML += `
+             <li>${v.title}</li>
+            `
+        });
+
+        var NoLi = _(".select ul li");
+        NoLi.forEach((v,i) => {
+            v.onclick = () => {
+                this.principal.unshift(this.additional[i])
+
+                this.additional = this.additional.filter((item,index) => {
+                    if (item.id != this.additional[i].id) {
+                        return item;
+                    }
+                });
+
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+
+
+                this.renderYourSelect();
+                this.renderNoSelect();
+            }
+        });
+    }
+
+}
+
+new Edit();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/index.js

@@ -0,0 +1,138 @@
+class Index {
+    constructor() {
+        this.principal = [];
+        this.currentIndex = 0;
+        footer()
+        this.getIndex();
+        this.getClass();
+    }
+
+    // 请求横向菜单
+    async getClass() {
+        var res;
+        // 本地没有缓存数据，表示用户是第一次使用这个app
+        if (localStorage.getItem("principal") == null) {
+            res = await server.type();
+            localStorage.setItem("principal", JSON.stringify(res.principal))
+            localStorage.setItem("additional", JSON.stringify(res.additional))
+        } else {
+            res = {
+                principal: JSON.parse(localStorage.getItem("principal")),
+                additional: JSON.parse(localStorage.getItem("additional"))
+            }
+            console.log("res: ", res)
+        }
+
+
+        this.principal = res.principal;
+
+        this.principal.unshift({
+            id: null,
+            page: 0,
+            title: "首页"
+        })
+
+        this.principal.forEach(v => {
+            v.content = []
+        })
+
+        this.principal.forEach((v,i) => {
+            $(".header_menu ul").innerHTML += `
+             <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `;
+
+            if (i > 0) {
+                $(".swiper-container .swiper-wrapper").innerHTML += `
+                  <div class="swiper-slide pic_item padding_lr"></div>
+                `
+            }
+
+        });
+
+        var silder = _(".swiper-wrapper .swiper-slide");
+        silder.forEach((v,i) => {
+            if (i > 0) {
+                loadMore(v, () => {
+                    console.log("滚动到底部了：",i )
+                    this.principal[i].page += 1;
+                    if (this.principal[i].page <= this.principal[i].total_page) {
+                        this.getClassList("load")
+                    }
+                })
+            }
+        })
+
+        this.initSwiper();
+    }
+
+    initSwiper() {
+        var liArr = _(".header_menu ul li");
+        var pageSwiper = new swiper('.swiper-container', {
+            time: 3,
+            auto: false,
+            speed: 800,
+            on: {
+                slideChangeTransitionStart: (index) => {
+                    this.currentIndex = index;
+                    this.getClassList()
+                    liArr.forEach(v => v.className = "")
+                    liArr[index].className = "active"
+                }
+            }
+        });
+
+        liArr.forEach((v,i) => {
+            v.onclick = () => {
+                this.currentIndex = i;
+                this.getClassList()
+                pageSwiper.slideTo(i)
+                liArr.forEach(v => v.className = "")
+                v.className = "active"
+            }
+        })
+    }
+
+    // 请求首页的数据
+    async getIndex() {
+        var res = await server.index();
+        item($(".recommended ul"), res.recommended.data)
+        item($(".newest ul"), res.newest.data)
+        model(".model_banner", res.model.res)
+    }
+
+    async getClassList(type = "click") {
+        var getData = async () => {
+            var res = await server.classList({
+                id: this.principal[this.currentIndex].id,
+                page: this.principal[this.currentIndex].page
+            });
+
+            this.principal[this.currentIndex].content
+                = this.principal[this.currentIndex].content.concat(res.data);
+
+            this.principal[this.currentIndex].total_page = res.total_page;
+            this.principal[this.currentIndex].page = res.current_page;
+            var clickSlide = _(".swiper-wrapper .swiper-slide")[this.currentIndex]
+            item(clickSlide, res.data);
+        }
+
+        if (type == "click") {
+            // 第一次点击这个分类，那么请求数据
+            if (
+                this.principal[this.currentIndex].content.length == 0
+                &&
+                this.principal[this.currentIndex].id != null
+            ) {
+                getData()
+            }
+        } else {
+            getData()
+        }
+
+    }
+
+
+
+}
+
+new Index();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/info.js

@@ -0,0 +1,87 @@
+class Info {
+    constructor() {
+        this.getInfo();
+
+        this.like =
+            localStorage.getItem("like") == null
+            ? []
+            : JSON.parse(localStorage.getItem("like"))
+    }
+
+    async getInfo() {
+        var res = await server.agentInfo({
+            id: query("id")
+        })
+
+        header(res.title, `<i class="iconfont like icon-xin"></i>`);
+
+        if (this.checkIsLike().length != 0) {
+            $(".like").classList.replace("icon-xin", "icon-aixin")
+        }
+
+        res.imgs.forEach(v => {
+            var img = document.createElement("img");
+            img.src = v;
+            img.onload = () => {
+                $(".info").innerHTML+= `
+                  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+                    <a href="${v}" itemprop="contentUrl" data-size="${img.width}x${img.height}">
+                      <img src="${v}" itemprop="thumbnail" alt="${res.title}" />
+                    </a>
+                    <figcaption itemprop="caption description">${res.title}</figcaption>
+                  </figure>
+                `
+            }
+
+        });
+
+        initPhotoSwipeFromDOM('.my-gallery');
+        // icon-aixin 实心，icon-xin 空心
+        document.querySelector(".like")
+        var self = this;
+
+        $(".like").onclick = function () {
+
+
+            // 本地没收藏，进行收藏
+            if (self.checkIsLike().length == 0) {
+                self.like.push({
+                    id: query("id"),
+                    total: res.shuliang,
+                    preview: res.img_src,
+                    title: res.title,
+                    user: res.renwulist[0].name,
+                    source: res.jigoulist[0].name,
+                    tags: res.biaoqianlist
+                })
+            // 已经收藏过了，点击的时候取消收藏
+            } else {
+                self.like = self.like.filter(v => {
+                    if (v.id != query("id")) {
+                        return v
+                    }
+                });
+            }
+
+            localStorage.setItem("like", JSON.stringify(self.like))
+
+            // 如果为空心，点击变成实心，收藏
+            this.classList.contains("icon-xin")
+            ? this.classList.replace("icon-xin", "icon-aixin")
+            // 如果为实心，点击变成空心，取消收藏
+            : this.classList.replace("icon-aixin", "icon-xin")
+
+        }
+    }
+
+    // 判断本地是否有你当前正在浏览的这个写真
+    checkIsLike() {
+        return this.like.filter(v => {
+            if (v.id == query("id")) {
+                return v
+            }
+        })
+    }
+}
+
+new Info();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/list.js

@@ -0,0 +1,47 @@
+class List {
+    constructor() {
+        this.page = 0;
+        this.total_page = 0;
+        this.checkUrl()
+    }
+
+
+    async checkUrl() {
+        header(query("t"))
+        // 调用分类接口
+        if (query("type") == "tag") {
+            var res = await server.classList({
+                id: query("id"),
+                page: this.page
+            });
+            this.total_page = res.total_page;
+            this.page = res.current_page;
+            item($(".pic_item"), res.data);
+
+        // 调用机构接口
+        } else {
+            var res = await server.mechanismList({
+                id: query("id"),
+                page: this.page
+            });
+            console.log(res)
+            this.total_page = res.total_page;
+            this.page = res.current_page;
+            item($(".pic_item"), res.data);
+        }
+
+        window.onscroll = () => {
+            var scrollTop = document.documentElement.scrollTop
+            var scrollHeight = document.documentElement.scrollHeight
+            var clientHeight = document.documentElement.clientHeight
+            if ((scrollHeight - scrollTop).toFixed() == clientHeight) {
+                this.page+=1;
+                if (this.page <= this.total_page) {
+                    this.checkUrl()
+                }
+            }
+        }
+    }
+}
+
+new List();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/mechanism.js

@@ -0,0 +1,23 @@
+class Mechanism {
+    constructor() {
+        footer()
+        header("机构")
+        this.getMechanism()
+    }
+
+    async getMechanism() {
+        var res = await server.mechanism();
+        res.forEach((v,i) => {
+            $(".mechanism_list").innerHTML += `
+              <li>
+                  <a href="./list.html?id=${v.id}&t=${v.title}&type=mechanism">
+                      <p>${v.title}</p>
+                      <span>${v.quantity}</span>
+                  </a>
+              </li>
+            `
+        })
+        console.log(res)
+    }
+}
+new Mechanism();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/model.js

@@ -0,0 +1,16 @@
+class Model {
+    constructor() {
+        footer()
+        header("模特")
+        this.getAllmodel()
+    }
+
+
+
+    async getAllmodel () {
+        var res = await server.allModel();
+        model(".hot_models ul", res.hot_models)
+        model(".newest ul", res.newest)
+    }
+}
+new Model();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/modelInfo.js

@@ -0,0 +1,27 @@
+class ModelInfo {
+
+    constructor () {
+        header(query("t"))
+        this.getModelInfo()
+    }
+
+    async getModelInfo () {
+        var res = await server.modelList({
+           id: query("id"),
+           page: 0
+        });
+        console.log(res);
+
+        $(".top").innerHTML += `
+          <img src="${res.model_info.portrait}" alt="">
+          <div class="model_introduce">
+             <p>${res.model_info.name}</p>
+             <span>${res.model_info.explain}</span>
+          </div>
+        `
+
+        item($(".works"), res.data);
+        model(".similar ul", res.similar)
+    }
+}
+new ModelInfo();

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/my.js

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

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/service/indexService.js

@@ -0,0 +1,65 @@
+class IndexService {
+
+    async index(data) {
+       return await (new HTTP()).get({
+           url: config.urlList.index,
+           data: data
+       })
+    }
+
+    async type(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.type,
+            data: data
+        })
+    }
+
+    async classList(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.classList,
+            data: data
+        })
+    }
+
+    async mechanism(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.mechanism,
+            data: data
+        })
+    }
+
+    async mechanismList(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.mechanismList,
+            data: data
+        })
+    }
+
+
+    async allModel(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.allModel,
+            data: data
+        })
+    }
+    async modelList(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.modelList,
+            data: data
+        })
+    }
+
+    async agentInfo(data) {
+        var res = await (new HTTP()).post({
+            url: config.urlList.agentInfo,
+            data: data
+        });
+        res.imgs.forEach((v,i) => {
+            res.imgs[i] = "http://127.0.0.1:3000/api/json/url?url="+v
+        });
+
+        return res;
+    }
+}
+
+var server = new IndexService()

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/utils/utils.js

@@ -0,0 +1,135 @@
+class Utils {
+
+
+    footer() {
+        var footerArr = [
+            { title: '首页', icon: 'icon-home', href: 'index.html' },
+            { title: '机构', icon: 'icon-jigou', href: 'mechanism.html' },
+            { title: '模特', icon: 'icon-me', href: 'model.html' },
+            { title: '我的', icon: 'icon-wo', href: 'my.html' },
+        ];
+        // 用户当前正在访问的页面地址
+        // http://localhost:63342/page/mechanism.html
+        var currentPath = location.href;
+        $("body").innerHTML += `
+            <ul class="footer">
+            ${ 
+              footerArr.map((v,index) => {
+                  return `
+                      <li class="${currentPath.includes(v.href) ? 'footer_active' : ''}">
+                        <a href="./${v.href}">
+                          <i class="iconfont ${v.icon}"></i>
+                          <p>${v.title}</p>
+                        </a>
+                      </li>
+                  `
+              }) .toString().replaceAll(",", "")
+            }
+            </ul>
+        `
+    }
+
+    header(title, action = "") {
+        $("body").innerHTML = `
+         <div class="pub_header">
+            <div class="pub_header_left">
+              <i class="iconfont icon-back1"></i>
+              <span>${title}</span>
+            </div>
+            <div class="pub_header_action">
+              ${action}
+            </div>
+          </div>
+        ` + $("body").innerHTML;
+
+        $(".icon-back1").onclick = () => {
+            history.back();
+        }
+    }
+
+    item(el, data) {
+        data.forEach((v,i) => {
+            el.innerHTML += `
+                <li>
+                  <a href="./info.html?id=${v.id}">
+                    <div class="pic_item_top">
+                      <img src="${v.preview}" alt="">
+                      <span>${v.total}套</span>
+                    </div>
+                    <div class="pic_item_title ellipsis">${v.title}</div>
+                    <div class="pic_item_source">${v.user}</div>
+                    ${
+                        v.source.length != 0
+                        ? `<div class="pic_item_source">${v.source}</div>`
+                        : ''
+                     }
+                  </a>
+                  <div class="pic_item_tags">
+                    ${
+                        v.tags.map((item,index) => {
+                            return `
+                             <a href="./list.html?id=${item.id}&t=${item.title || item.name}&type=tag" class="pic_item_tags_item">${item.title || item.name}</a>
+                            `
+                        }).toString().replaceAll(",", '')
+                     }
+                  </div>
+                </li>
+            `
+        })
+
+    }
+
+    model(el, data) {
+        data.forEach((v,i) => {
+            $(el).innerHTML += `
+            <li>
+              <a href="./modelInfo.html?id=${v.id}&t=${v.title}">
+                  <div class="top">
+                      <img src="${v.preview}" alt="">
+                      <span class="nums">${v.total}</span>
+                  </div>
+                  <span class="title ellipsis">${v.title}</span>
+              </a>
+            </li>
+            `
+        });
+    }
+
+    query(variable) {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i=0;i<vars.length;i++) {
+            var pair = vars[i].split("=");
+            if(pair[0] == variable){
+                return decodeURI(pair[1]);
+            }
+        }
+        return(false);
+    }
+
+    loadMore(el, callback) {
+        el.addEventListener('scroll', function () {
+            console.log("111")
+            if (Math.ceil(el.scrollHeight - el.scrollTop) == el.clientHeight) {
+                callback()
+            }
+        })
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+}
+
+// 对象的解构赋值
+var {
+    footer, $, _,
+    item, model,
+    query, header,
+    loadMore
+} = new Utils()
+// var utils = new Utils()