first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/1.http
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/1.http
@@ -0,0 +1,8 @@
+# GET http://127.0.0.1:3000/api/json/class HTTP/1.1
+
+POST http://127.0.0.1:3030/user/add HTTP/1.1
+
+{
+    phone: "ddd",
+    pwd: "dddd"
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/clear.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/clear.css
@@ -0,0 +1,28 @@
+@import "./config.css";
+body,ul,li,p,h1,h2,h3,h4,h5,h6,figure,input{
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-size: 0;
+}
+
+a {
+    text-decoration: none;
+    color: var(--blackColor);
+}
+
+li {
+    list-style: none;
+}
+
+::-webkit-scrollbar {
+    width: 0;
+    height: 0; 
+}
+input{
+    outline: none;
+    border: none;
+    
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/collection.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/collection.css
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/config.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/config.css
@@ -0,0 +1,22 @@
+/* 放全局颜色，尺寸等代码 */
+
+:root {
+    --themeColor: #fb7299;;
+    --theColor: #fbf672;
+    --otherThemeColor: #fe7fa2;
+    --whiteColor: #fff;
+    --blackColor: #000;
+    --textColor: #999;
+    --sizeColor: #9999995b;
+    
+    --fontSize12: 0.24rem;
+    --fontSize13: 0.26rem;
+    --fontSize14: 0.28rem;
+    --fontSize15: 0.3rem;
+    --fontSize16: 0.32rem;
+    --fontSize17: 0.34rem;
+    --fontSize18: 0.36rem;
+    --fontSize19: 0.38rem;
+    --fontSize20: 0.4rem;
+    --fontSize21: 0.42rem;
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/default-skin/default-skin.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/default-skin/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: 0.88rem;
+  height: 0.88rem;
+  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: 5.28rem 1.76rem;
+  width: 0.88rem;
+  height: 0.88rem; }
+
+@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 -0.88rem; }
+
+.pswp__button--share {
+  background-position: -0.88rem -0.88rem; }
+
+.pswp__button--fs {
+  display: none; }
+
+.pswp--supports-fs .pswp__button--fs {
+  display: block; }
+
+.pswp--fs .pswp__button--fs {
+  background-position: -0.88rem 0; }
+
+.pswp__button--zoom {
+  display: none;
+  background-position: -1.76rem 0; }
+
+.pswp--zoom-allowed .pswp__button--zoom {
+  display: block; }
+
+.pswp--zoomed-in .pswp__button--zoom {
+  background-position: -2.64rem 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: -1rem;
+  width: 1.4rem;
+  height: 2rem;
+  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: 0.7rem;
+  background-color: rgba(0, 0, 0, 0.3);
+  height: 0.6rem;
+  width: 0.64rem;
+  position: absolute; }
+
+.pswp__button--arrow--left:before {
+  left: 0.12rem;
+  background-position: -2.76rem -0.88rem; }
+
+.pswp__button--arrow--right:before {
+  right: 0.12rem;
+  background-position: -1.88rem -0.88rem; }
+
+/*
+
+	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: 0.2rem;
+  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: 1.12rem;
+  border-radius: 0.04rem;
+  display: block;
+  width: auto;
+  right: 0.88rem;
+  -webkit-box-shadow: 0 0.04rem 0.1rem rgba(0, 0, 0, 0.25);
+          box-shadow: 0 0.04rem 0.1rem rgba(0, 0, 0, 0.25);
+  -webkit-transform: translateY(0.12rem);
+      -ms-transform: translateY(0.12rem);
+          transform: translateY(0.12rem);
+  -webkit-transition: -webkit-transform 0.25s;
+          transition: transform 0.25s;
+  -webkit-backface-visibility: hidden;
+  will-change: transform; }
+  .pswp__share-tooltip a {
+    display: block;
+    padding: 0.16rem 0.24rem;
+    color: #000;
+    text-decoration: none;
+    font-size: 0.28rem;
+    line-height: 0.36rem; }
+    .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: 0.04rem 0.04rem 0 0; }
+    .pswp__share-tooltip a:last-child {
+      border-radius: 0 0 0.04rem 0.04rem; }
+
+.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: 0.32rem 0.24rem; }
+
+a.pswp__share--facebook:before {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: -0.24rem;
+  right: 0.3rem;
+  border: 0.12rem 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: 0.88rem;
+  font-size: 0.26rem;
+  line-height: 0.88rem;
+  color: #FFF;
+  opacity: 0.75;
+  padding: 0 0.2rem; }
+
+/*
+	
+	4. Caption
+
+ */
+.pswp__caption {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  min-height: 0.88rem; }
+  .pswp__caption small {
+    font-size: 0.22rem;
+    color: #BBB; }
+
+.pswp__caption__center {
+  text-align: left;
+  max-width: 8.4rem;
+  margin: 0 auto;
+  font-size: 0.26rem;
+  padding: 0.2rem;
+  line-height: 0.4rem;
+  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: 0.88rem;
+  height: 0.88rem;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -0.44rem;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease-out;
+          transition: opacity 0.25s ease-out;
+  will-change: opacity;
+  direction: ltr; }
+
+.pswp__preloader__icn {
+  width: 0.4rem;
+  height: 0.4rem;
+  margin: 0.24rem; }
+
+.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: 0.28rem;
+  height: 0.28rem;
+  position: absolute;
+  left: 0.3rem;
+  top: 0.3rem;
+  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: 0.14rem;
+  height: 0.28rem;
+  overflow: hidden; }
+
+.pswp--css_animation .pswp__preloader__donut {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 0.28rem;
+  height: 0.28rem;
+  border: 0.04rem 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: 0.88rem;
+  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; }
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/default-skin/default-skin.png
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/default-skin/default-skin.png
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/default-skin/default-skin.svg
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/default-skin/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>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/default-skin/preloader.gif
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/default-skin/preloader.gif
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/initPhotoSwipe.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/initPhotoSwipe.js
@@ -0,0 +1,201 @@
+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 );
+    }
+};
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/photoswipe-ui-default.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/photoswipe-ui-default.js
@@ -0,0 +1,861 @@
+/*! PhotoSwipe Default UI - 4.1.3 - 2019-01-08
+* http://photoswipe.com
+* Copyright (c) 2019 Dmitry Semenov; */
+/**
+*
+* UI on top of main sliding area (caption, arrows, close button, etc.).
+* Built just using public methods/properties of PhotoSwipe.
+* 
+*/
+(function (root, factory) { 
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+	} else if (typeof exports === 'object') {
+		module.exports = factory();
+	} else {
+		root.PhotoSwipeUI_Default = factory();
+	}
+})(this, function () {
+
+	'use strict';
+
+
+
+var PhotoSwipeUI_Default =
+ function(pswp, framework) {
+
+	var ui = this;
+	var _overlayUIUpdated = false,
+		_controlsVisible = true,
+		_fullscrenAPI,
+		_controls,
+		_captionContainer,
+		_fakeCaptionContainer,
+		_indexIndicator,
+		_shareButton,
+		_shareModal,
+		_shareModalHidden = true,
+		_initalCloseOnScrollValue,
+		_isIdle,
+		_listen,
+
+		_loadingIndicator,
+		_loadingIndicatorHidden,
+		_loadingIndicatorTimeout,
+
+		_galleryHasOneSlide,
+
+		_options,
+		_defaultUIOptions = {
+			barsSize: {top:44, bottom:'auto'},
+			closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'], 
+			timeToIdle: 4000, 
+			timeToIdleOutside: 1000,
+			loadingIndicatorDelay: 1000, // 2s
+			
+			addCaptionHTMLFn: function(item, captionEl /*, isFake */) {
+				if(!item.title) {
+					captionEl.children[0].innerHTML = '';
+					return false;
+				}
+				captionEl.children[0].innerHTML = item.title;
+				return true;
+			},
+
+			closeEl:true,
+			captionEl: true,
+			fullscreenEl: true,
+			zoomEl: true,
+			shareEl: true,
+			counterEl: true,
+			arrowEl: true,
+			preloaderEl: true,
+
+			tapToClose: false,
+			tapToToggleControls: true,
+
+			clickToCloseNonZoomable: true,
+
+			shareButtons: [
+				{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
+				{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
+				{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/'+
+													'?url={{url}}&media={{image_url}}&description={{text}}'},
+				{id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
+			],
+			getImageURLForShare: function( /* shareButtonData */ ) {
+				return pswp.currItem.src || '';
+			},
+			getPageURLForShare: function( /* shareButtonData */ ) {
+				return window.location.href;
+			},
+			getTextForShare: function( /* shareButtonData */ ) {
+				return pswp.currItem.title || '';
+			},
+				
+			indexIndicatorSep: ' / ',
+			fitControlsWidth: 1200
+
+		},
+		_blockControlsTap,
+		_blockControlsTapTimeout;
+
+
+
+	var _onControlsTap = function(e) {
+			if(_blockControlsTap) {
+				return true;
+			}
+
+
+			e = e || window.event;
+
+			if(_options.timeToIdle && _options.mouseUsed && !_isIdle) {
+				// reset idle timer
+				_onIdleMouseMove();
+			}
+
+
+			var target = e.target || e.srcElement,
+				uiElement,
+				clickedClass = target.getAttribute('class') || '',
+				found;
+
+			for(var i = 0; i < _uiElements.length; i++) {
+				uiElement = _uiElements[i];
+				if(uiElement.onTap && clickedClass.indexOf('pswp__' + uiElement.name ) > -1 ) {
+					uiElement.onTap();
+					found = true;
+
+				}
+			}
+
+			if(found) {
+				if(e.stopPropagation) {
+					e.stopPropagation();
+				}
+				_blockControlsTap = true;
+
+				// Some versions of Android don't prevent ghost click event 
+				// when preventDefault() was called on touchstart and/or touchend.
+				// 
+				// This happens on v4.3, 4.2, 4.1, 
+				// older versions strangely work correctly, 
+				// but just in case we add delay on all of them)	
+				var tapDelay = framework.features.isOldAndroid ? 600 : 30;
+				_blockControlsTapTimeout = setTimeout(function() {
+					_blockControlsTap = false;
+				}, tapDelay);
+			}
+
+		},
+		_fitControlsInViewport = function() {
+			return !pswp.likelyTouchDevice || _options.mouseUsed || screen.width > _options.fitControlsWidth;
+		},
+		_togglePswpClass = function(el, cName, add) {
+			framework[ (add ? 'add' : 'remove') + 'Class' ](el, 'pswp__' + cName);
+		},
+
+		// add class when there is just one item in the gallery
+		// (by default it hides left/right arrows and 1ofX counter)
+		_countNumItems = function() {
+			var hasOneSlide = (_options.getNumItemsFn() === 1);
+
+			if(hasOneSlide !== _galleryHasOneSlide) {
+				_togglePswpClass(_controls, 'ui--one-slide', hasOneSlide);
+				_galleryHasOneSlide = hasOneSlide;
+			}
+		},
+		_toggleShareModalClass = function() {
+			_togglePswpClass(_shareModal, 'share-modal--hidden', _shareModalHidden);
+		},
+		_toggleShareModal = function() {
+
+			_shareModalHidden = !_shareModalHidden;
+			
+			
+			if(!_shareModalHidden) {
+				_toggleShareModalClass();
+				setTimeout(function() {
+					if(!_shareModalHidden) {
+						framework.addClass(_shareModal, 'pswp__share-modal--fade-in');
+					}
+				}, 30);
+			} else {
+				framework.removeClass(_shareModal, 'pswp__share-modal--fade-in');
+				setTimeout(function() {
+					if(_shareModalHidden) {
+						_toggleShareModalClass();
+					}
+				}, 300);
+			}
+			
+			if(!_shareModalHidden) {
+				_updateShareURLs();
+			}
+			return false;
+		},
+
+		_openWindowPopup = function(e) {
+			e = e || window.event;
+			var target = e.target || e.srcElement;
+
+			pswp.shout('shareLinkClick', e, target);
+
+			if(!target.href) {
+				return false;
+			}
+
+			if( target.hasAttribute('download') ) {
+				return true;
+			}
+
+			window.open(target.href, 'pswp_share', 'scrollbars=yes,resizable=yes,toolbar=no,'+
+										'location=yes,width=550,height=420,top=100,left=' + 
+										(window.screen ? Math.round(screen.width / 2 - 275) : 100)  );
+
+			if(!_shareModalHidden) {
+				_toggleShareModal();
+			}
+			
+			return false;
+		},
+		_updateShareURLs = function() {
+			var shareButtonOut = '',
+				shareButtonData,
+				shareURL,
+				image_url,
+				page_url,
+				share_text;
+
+			for(var i = 0; i < _options.shareButtons.length; i++) {
+				shareButtonData = _options.shareButtons[i];
+
+				image_url = _options.getImageURLForShare(shareButtonData);
+				page_url = _options.getPageURLForShare(shareButtonData);
+				share_text = _options.getTextForShare(shareButtonData);
+
+				shareURL = shareButtonData.url.replace('{{url}}', encodeURIComponent(page_url) )
+									.replace('{{image_url}}', encodeURIComponent(image_url) )
+									.replace('{{raw_image_url}}', image_url )
+									.replace('{{text}}', encodeURIComponent(share_text) );
+
+				shareButtonOut += '<a href="' + shareURL + '" target="_blank" '+
+									'class="pswp__share--' + shareButtonData.id + '"' +
+									(shareButtonData.download ? 'download' : '') + '>' + 
+									shareButtonData.label + '</a>';
+
+				if(_options.parseShareButtonOut) {
+					shareButtonOut = _options.parseShareButtonOut(shareButtonData, shareButtonOut);
+				}
+			}
+			_shareModal.children[0].innerHTML = shareButtonOut;
+			_shareModal.children[0].onclick = _openWindowPopup;
+
+		},
+		_hasCloseClass = function(target) {
+			for(var  i = 0; i < _options.closeElClasses.length; i++) {
+				if( framework.hasClass(target, 'pswp__' + _options.closeElClasses[i]) ) {
+					return true;
+				}
+			}
+		},
+		_idleInterval,
+		_idleTimer,
+		_idleIncrement = 0,
+		_onIdleMouseMove = function() {
+			clearTimeout(_idleTimer);
+			_idleIncrement = 0;
+			if(_isIdle) {
+				ui.setIdle(false);
+			}
+		},
+		_onMouseLeaveWindow = function(e) {
+			e = e ? e : window.event;
+			var from = e.relatedTarget || e.toElement;
+			if (!from || from.nodeName === 'HTML') {
+				clearTimeout(_idleTimer);
+				_idleTimer = setTimeout(function() {
+					ui.setIdle(true);
+				}, _options.timeToIdleOutside);
+			}
+		},
+		_setupFullscreenAPI = function() {
+			if(_options.fullscreenEl && !framework.features.isOldAndroid) {
+				if(!_fullscrenAPI) {
+					_fullscrenAPI = ui.getFullscreenAPI();
+				}
+				if(_fullscrenAPI) {
+					framework.bind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
+					ui.updateFullscreen();
+					framework.addClass(pswp.template, 'pswp--supports-fs');
+				} else {
+					framework.removeClass(pswp.template, 'pswp--supports-fs');
+				}
+			}
+		},
+		_setupLoadingIndicator = function() {
+			// Setup loading indicator
+			if(_options.preloaderEl) {
+			
+				_toggleLoadingIndicator(true);
+
+				_listen('beforeChange', function() {
+
+					clearTimeout(_loadingIndicatorTimeout);
+
+					// display loading indicator with delay
+					_loadingIndicatorTimeout = setTimeout(function() {
+
+						if(pswp.currItem && pswp.currItem.loading) {
+
+							if( !pswp.allowProgressiveImg() || (pswp.currItem.img && !pswp.currItem.img.naturalWidth)  ) {
+								// show preloader if progressive loading is not enabled, 
+								// or image width is not defined yet (because of slow connection)
+								_toggleLoadingIndicator(false); 
+								// items-controller.js function allowProgressiveImg
+							}
+							
+						} else {
+							_toggleLoadingIndicator(true); // hide preloader
+						}
+
+					}, _options.loadingIndicatorDelay);
+					
+				});
+				_listen('imageLoadComplete', function(index, item) {
+					if(pswp.currItem === item) {
+						_toggleLoadingIndicator(true);
+					}
+				});
+
+			}
+		},
+		_toggleLoadingIndicator = function(hide) {
+			if( _loadingIndicatorHidden !== hide ) {
+				_togglePswpClass(_loadingIndicator, 'preloader--active', !hide);
+				_loadingIndicatorHidden = hide;
+			}
+		},
+		_applyNavBarGaps = function(item) {
+			var gap = item.vGap;
+
+			if( _fitControlsInViewport() ) {
+				
+				var bars = _options.barsSize; 
+				if(_options.captionEl && bars.bottom === 'auto') {
+					if(!_fakeCaptionContainer) {
+						_fakeCaptionContainer = framework.createEl('pswp__caption pswp__caption--fake');
+						_fakeCaptionContainer.appendChild( framework.createEl('pswp__caption__center') );
+						_controls.insertBefore(_fakeCaptionContainer, _captionContainer);
+						framework.addClass(_controls, 'pswp__ui--fit');
+					}
+					if( _options.addCaptionHTMLFn(item, _fakeCaptionContainer, true) ) {
+
+						var captionSize = _fakeCaptionContainer.clientHeight;
+						gap.bottom = parseInt(captionSize,10) || 44;
+					} else {
+						gap.bottom = bars.top; // if no caption, set size of bottom gap to size of top
+					}
+				} else {
+					gap.bottom = bars.bottom === 'auto' ? 0 : bars.bottom;
+				}
+				
+				// height of top bar is static, no need to calculate it
+				gap.top = bars.top;
+			} else {
+				gap.top = gap.bottom = 0;
+			}
+		},
+		_setupIdle = function() {
+			// Hide controls when mouse is used
+			if(_options.timeToIdle) {
+				_listen('mouseUsed', function() {
+					
+					framework.bind(document, 'mousemove', _onIdleMouseMove);
+					framework.bind(document, 'mouseout', _onMouseLeaveWindow);
+
+					_idleInterval = setInterval(function() {
+						_idleIncrement++;
+						if(_idleIncrement === 2) {
+							ui.setIdle(true);
+						}
+					}, _options.timeToIdle / 2);
+				});
+			}
+		},
+		_setupHidingControlsDuringGestures = function() {
+
+			// Hide controls on vertical drag
+			_listen('onVerticalDrag', function(now) {
+				if(_controlsVisible && now < 0.95) {
+					ui.hideControls();
+				} else if(!_controlsVisible && now >= 0.95) {
+					ui.showControls();
+				}
+			});
+
+			// Hide controls when pinching to close
+			var pinchControlsHidden;
+			_listen('onPinchClose' , function(now) {
+				if(_controlsVisible && now < 0.9) {
+					ui.hideControls();
+					pinchControlsHidden = true;
+				} else if(pinchControlsHidden && !_controlsVisible && now > 0.9) {
+					ui.showControls();
+				}
+			});
+
+			_listen('zoomGestureEnded', function() {
+				pinchControlsHidden = false;
+				if(pinchControlsHidden && !_controlsVisible) {
+					ui.showControls();
+				}
+			});
+
+		};
+
+
+
+	var _uiElements = [
+		{ 
+			name: 'caption', 
+			option: 'captionEl',
+			onInit: function(el) {  
+				_captionContainer = el; 
+			} 
+		},
+		{ 
+			name: 'share-modal', 
+			option: 'shareEl',
+			onInit: function(el) {  
+				_shareModal = el;
+			},
+			onTap: function() {
+				_toggleShareModal();
+			} 
+		},
+		{ 
+			name: 'button--share', 
+			option: 'shareEl',
+			onInit: function(el) { 
+				_shareButton = el;
+			},
+			onTap: function() {
+				_toggleShareModal();
+			} 
+		},
+		{ 
+			name: 'button--zoom', 
+			option: 'zoomEl',
+			onTap: pswp.toggleDesktopZoom
+		},
+		{ 
+			name: 'counter', 
+			option: 'counterEl',
+			onInit: function(el) {  
+				_indexIndicator = el;
+			} 
+		},
+		{ 
+			name: 'button--close', 
+			option: 'closeEl',
+			onTap: pswp.close
+		},
+		{ 
+			name: 'button--arrow--left', 
+			option: 'arrowEl',
+			onTap: pswp.prev
+		},
+		{ 
+			name: 'button--arrow--right', 
+			option: 'arrowEl',
+			onTap: pswp.next
+		},
+		{ 
+			name: 'button--fs', 
+			option: 'fullscreenEl',
+			onTap: function() {  
+				if(_fullscrenAPI.isFullscreen()) {
+					_fullscrenAPI.exit();
+				} else {
+					_fullscrenAPI.enter();
+				}
+			} 
+		},
+		{ 
+			name: 'preloader', 
+			option: 'preloaderEl',
+			onInit: function(el) {  
+				_loadingIndicator = el;
+			} 
+		}
+
+	];
+
+	var _setupUIElements = function() {
+		var item,
+			classAttr,
+			uiElement;
+
+		var loopThroughChildElements = function(sChildren) {
+			if(!sChildren) {
+				return;
+			}
+
+			var l = sChildren.length;
+			for(var i = 0; i < l; i++) {
+				item = sChildren[i];
+				classAttr = item.className;
+
+				for(var a = 0; a < _uiElements.length; a++) {
+					uiElement = _uiElements[a];
+
+					if(classAttr.indexOf('pswp__' + uiElement.name) > -1  ) {
+
+						if( _options[uiElement.option] ) { // if element is not disabled from options
+							
+							framework.removeClass(item, 'pswp__element--disabled');
+							if(uiElement.onInit) {
+								uiElement.onInit(item);
+							}
+							
+							//item.style.display = 'block';
+						} else {
+							framework.addClass(item, 'pswp__element--disabled');
+							//item.style.display = 'none';
+						}
+					}
+				}
+			}
+		};
+		loopThroughChildElements(_controls.children);
+
+		var topBar =  framework.getChildByClass(_controls, 'pswp__top-bar');
+		if(topBar) {
+			loopThroughChildElements( topBar.children );
+		}
+	};
+
+
+	
+
+	ui.init = function() {
+
+		// extend options
+		framework.extend(pswp.options, _defaultUIOptions, true);
+
+		// create local link for fast access
+		_options = pswp.options;
+
+		// find pswp__ui element
+		_controls = framework.getChildByClass(pswp.scrollWrap, 'pswp__ui');
+
+		// create local link
+		_listen = pswp.listen;
+
+
+		_setupHidingControlsDuringGestures();
+
+		// update controls when slides change
+		_listen('beforeChange', ui.update);
+
+		// toggle zoom on double-tap
+		_listen('doubleTap', function(point) {
+			var initialZoomLevel = pswp.currItem.initialZoomLevel;
+			if(pswp.getZoomLevel() !== initialZoomLevel) {
+				pswp.zoomTo(initialZoomLevel, point, 333);
+			} else {
+				pswp.zoomTo(_options.getDoubleTapZoom(false, pswp.currItem), point, 333);
+			}
+		});
+
+		// Allow text selection in caption
+		_listen('preventDragEvent', function(e, isDown, preventObj) {
+			var t = e.target || e.srcElement;
+			if(
+				t && 
+				t.getAttribute('class') && e.type.indexOf('mouse') > -1 && 
+				( t.getAttribute('class').indexOf('__caption') > 0 || (/(SMALL|STRONG|EM)/i).test(t.tagName) ) 
+			) {
+				preventObj.prevent = false;
+			}
+		});
+
+		// bind events for UI
+		_listen('bindEvents', function() {
+			framework.bind(_controls, 'pswpTap click', _onControlsTap);
+			framework.bind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
+
+			if(!pswp.likelyTouchDevice) {
+				framework.bind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
+			}
+		});
+
+		// unbind events for UI
+		_listen('unbindEvents', function() {
+			if(!_shareModalHidden) {
+				_toggleShareModal();
+			}
+
+			if(_idleInterval) {
+				clearInterval(_idleInterval);
+			}
+			framework.unbind(document, 'mouseout', _onMouseLeaveWindow);
+			framework.unbind(document, 'mousemove', _onIdleMouseMove);
+			framework.unbind(_controls, 'pswpTap click', _onControlsTap);
+			framework.unbind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
+			framework.unbind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
+
+			if(_fullscrenAPI) {
+				framework.unbind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
+				if(_fullscrenAPI.isFullscreen()) {
+					_options.hideAnimationDuration = 0;
+					_fullscrenAPI.exit();
+				}
+				_fullscrenAPI = null;
+			}
+		});
+
+
+		// clean up things when gallery is destroyed
+		_listen('destroy', function() {
+			if(_options.captionEl) {
+				if(_fakeCaptionContainer) {
+					_controls.removeChild(_fakeCaptionContainer);
+				}
+				framework.removeClass(_captionContainer, 'pswp__caption--empty');
+			}
+
+			if(_shareModal) {
+				_shareModal.children[0].onclick = null;
+			}
+			framework.removeClass(_controls, 'pswp__ui--over-close');
+			framework.addClass( _controls, 'pswp__ui--hidden');
+			ui.setIdle(false);
+		});
+		
+
+		if(!_options.showAnimationDuration) {
+			framework.removeClass( _controls, 'pswp__ui--hidden');
+		}
+		_listen('initialZoomIn', function() {
+			if(_options.showAnimationDuration) {
+				framework.removeClass( _controls, 'pswp__ui--hidden');
+			}
+		});
+		_listen('initialZoomOut', function() {
+			framework.addClass( _controls, 'pswp__ui--hidden');
+		});
+
+		_listen('parseVerticalMargin', _applyNavBarGaps);
+		
+		_setupUIElements();
+
+		if(_options.shareEl && _shareButton && _shareModal) {
+			_shareModalHidden = true;
+		}
+
+		_countNumItems();
+
+		_setupIdle();
+
+		_setupFullscreenAPI();
+
+		_setupLoadingIndicator();
+	};
+
+	ui.setIdle = function(isIdle) {
+		_isIdle = isIdle;
+		_togglePswpClass(_controls, 'ui--idle', isIdle);
+	};
+
+	ui.update = function() {
+		// Don't update UI if it's hidden
+		if(_controlsVisible && pswp.currItem) {
+			
+			ui.updateIndexIndicator();
+
+			if(_options.captionEl) {
+				_options.addCaptionHTMLFn(pswp.currItem, _captionContainer);
+
+				_togglePswpClass(_captionContainer, 'caption--empty', !pswp.currItem.title);
+			}
+
+			_overlayUIUpdated = true;
+
+		} else {
+			_overlayUIUpdated = false;
+		}
+
+		if(!_shareModalHidden) {
+			_toggleShareModal();
+		}
+
+		_countNumItems();
+	};
+
+	ui.updateFullscreen = function(e) {
+
+		if(e) {
+			// some browsers change window scroll position during the fullscreen
+			// so PhotoSwipe updates it just in case
+			setTimeout(function() {
+				pswp.setScrollOffset( 0, framework.getScrollY() );
+			}, 50);
+		}
+		
+		// toogle pswp--fs class on root element
+		framework[ (_fullscrenAPI.isFullscreen() ? 'add' : 'remove') + 'Class' ](pswp.template, 'pswp--fs');
+	};
+
+	ui.updateIndexIndicator = function() {
+		if(_options.counterEl) {
+			_indexIndicator.innerHTML = (pswp.getCurrentIndex()+1) + 
+										_options.indexIndicatorSep + 
+										_options.getNumItemsFn();
+		}
+	};
+	
+	ui.onGlobalTap = function(e) {
+		e = e || window.event;
+		var target = e.target || e.srcElement;
+
+		if(_blockControlsTap) {
+			return;
+		}
+
+		if(e.detail && e.detail.pointerType === 'mouse') {
+
+			// close gallery if clicked outside of the image
+			if(_hasCloseClass(target)) {
+				pswp.close();
+				return;
+			}
+
+			if(framework.hasClass(target, 'pswp__img')) {
+				if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
+					if(_options.clickToCloseNonZoomable) {
+						pswp.close();
+					}
+				} else {
+					pswp.toggleDesktopZoom(e.detail.releasePoint);
+				}
+			}
+			
+		} else {
+
+			// tap anywhere (except buttons) to toggle visibility of controls
+			if(_options.tapToToggleControls) {
+				if(_controlsVisible) {
+					ui.hideControls();
+				} else {
+					ui.showControls();
+				}
+			}
+
+			// tap to close gallery
+			if(_options.tapToClose && (framework.hasClass(target, 'pswp__img') || _hasCloseClass(target)) ) {
+				pswp.close();
+				return;
+			}
+			
+		}
+	};
+	ui.onMouseOver = function(e) {
+		e = e || window.event;
+		var target = e.target || e.srcElement;
+
+		// add class when mouse is over an element that should close the gallery
+		_togglePswpClass(_controls, 'ui--over-close', _hasCloseClass(target));
+	};
+
+	ui.hideControls = function() {
+		framework.addClass(_controls,'pswp__ui--hidden');
+		_controlsVisible = false;
+	};
+
+	ui.showControls = function() {
+		_controlsVisible = true;
+		if(!_overlayUIUpdated) {
+			ui.update();
+		}
+		framework.removeClass(_controls,'pswp__ui--hidden');
+	};
+
+	ui.supportsFullscreen = function() {
+		var d = document;
+		return !!(d.exitFullscreen || d.mozCancelFullScreen || d.webkitExitFullscreen || d.msExitFullscreen);
+	};
+
+	ui.getFullscreenAPI = function() {
+		var dE = document.documentElement,
+			api,
+			tF = 'fullscreenchange';
+
+		if (dE.requestFullscreen) {
+			api = {
+				enterK: 'requestFullscreen',
+				exitK: 'exitFullscreen',
+				elementK: 'fullscreenElement',
+				eventK: tF
+			};
+
+		} else if(dE.mozRequestFullScreen ) {
+			api = {
+				enterK: 'mozRequestFullScreen',
+				exitK: 'mozCancelFullScreen',
+				elementK: 'mozFullScreenElement',
+				eventK: 'moz' + tF
+			};
+
+			
+
+		} else if(dE.webkitRequestFullscreen) {
+			api = {
+				enterK: 'webkitRequestFullscreen',
+				exitK: 'webkitExitFullscreen',
+				elementK: 'webkitFullscreenElement',
+				eventK: 'webkit' + tF
+			};
+
+		} else if(dE.msRequestFullscreen) {
+			api = {
+				enterK: 'msRequestFullscreen',
+				exitK: 'msExitFullscreen',
+				elementK: 'msFullscreenElement',
+				eventK: 'MSFullscreenChange'
+			};
+		}
+
+		if(api) {
+			api.enter = function() { 
+				// disable close-on-scroll in fullscreen
+				_initalCloseOnScrollValue = _options.closeOnScroll; 
+				_options.closeOnScroll = false; 
+
+				if(this.enterK === 'webkitRequestFullscreen') {
+					pswp.template[this.enterK]( Element.ALLOW_KEYBOARD_INPUT );
+				} else {
+					return pswp.template[this.enterK](); 
+				}
+			};
+			api.exit = function() { 
+				_options.closeOnScroll = _initalCloseOnScrollValue;
+
+				return document[this.exitK](); 
+
+			};
+			api.isFullscreen = function() { return document[this.elementK]; };
+		}
+
+		return api;
+	};
+
+
+
+};
+return PhotoSwipeUI_Default;
+
+
+});
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/photoswipe-ui-default.min.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/photoswipe-ui-default.min.js
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/photoswipe.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/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: 0.28rem;
+  line-height: 0.32rem;
+  margin-top: -0.16rem;
+  color: #CCC; }
+
+.pswp__error-msg a {
+  color: #CCC;
+  text-decoration: underline; }
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/photoswipe.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/photoswipe.js
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/photoswipe.min.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/dist/photoswipe.min.js
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/edit.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/edit.css
@@ -0,0 +1,21 @@
+.menu {
+    padding: .4rem .3rem;
+}
+.menu .text{
+    font-size: .32rem;
+    font-weight: 400;
+    margin-bottom: .2rem;
+}
+.menu ul{
+    display: flex;
+    flex-wrap: wrap;
+}
+.menu ul li{
+    padding: .06rem .2rem;
+    font-size: .28rem;
+    background: var(--themeColor);
+    margin-right: .2rem;
+    color: #fff;
+    border-radius: .4rem;
+    margin-bottom: .14rem;
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/index.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/index.css
@@ -0,0 +1,88 @@
+@import "./config.css";
+
+.header {
+    position: fixed;
+    width: 100%;
+    height: 1.6rem;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+}
+.header .header_top {
+    background: var(--themeColor);
+    height: 0.88rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.3rem;
+}
+.header .header_top .icon-taozi1,
+.header .header_top .icon-wo {
+    font-size: 0.45rem;
+    color: var(--whiteColor);
+}
+.header .header_top .search {
+    flex: 1;
+    background: var(--whiteColor);
+    height: 0.6rem;
+    border-radius: 0.6rem;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+}
+.header .header_top .search i {
+    color: var(--textColor);
+    font-size: 0.26rem;
+    margin-right: 0.1rem;
+    padding-top: 0.02rem;
+    margin-left: 0.26rem;
+}
+.header .header_top .search span {
+    font-size: var(--fontSize12);
+    color: var(--textColor);
+}
+
+.header .header_menu {
+    height: 0.72rem;
+    display: flex;
+    align-items: center;
+    background: var(--otherThemeColor);
+    padding-left: 0.3rem;
+}
+.header .header_menu .active {
+    color: var(--whiteColor);
+}
+.header .header_menu ul {
+    display: flex;
+    flex: 1;
+    overflow-x: scroll;
+}
+.header .header_menu a {
+    color: #fff;
+    width: 0.8rem;
+    height: 0.72rem;
+    text-align: center;
+    line-height: 0.72rem;
+}
+.header .header_menu ul li{
+    font-size: 0.26rem;
+    margin-right: 0.26rem;
+    color: #d3d2d2;
+    flex-shrink: 0;
+}
+
+
+.content {
+    margin-top: 1.6rem;
+}
+
+.swiper {
+    font-size: .4rem;
+}
+
+.swiper-slide {
+    height: calc(100vh - 1.6rem - 1rem) !important;
+    overflow-y: scroll;
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/info.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/info.css
@@ -0,0 +1,3 @@
+.imgList img {
+    width: 100%;
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/layout.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/layout.css
@@ -0,0 +1,117 @@
+@import "./config.css";
+
+.footer {
+    position: fixed;
+    bottom: 0;
+    height: 1rem;
+    width: 100%;
+    background: var(--whiteColor);
+    z-index: 999;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.footer li {
+    text-align: center;
+}
+.footer li .active i,
+.footer li .active p{
+    color: var(--themeColor);
+}
+.footer li a {}
+.footer li a i {}
+.footer li a p{
+
+    font-size: 0.24rem;
+    margin-top: 0.04rem;
+}
+
+.content {
+    margin-top: .9rem;
+    margin-bottom: 1rem;
+    height: 100vh;
+}
+
+
+.list {
+    display: flex;
+    justify-content: space-between;
+    padding: .16rem;
+    flex-wrap: wrap;
+}
+.list .item {
+    width: 49%;
+    margin-bottom: .24rem;
+}
+.list .item .img {
+    position: relative;
+}
+.list .item .img img {
+    width: 100%;
+}
+.list .item .img span {
+    position: absolute;
+    z-index: 1;
+    color: #fff;
+    right: .2rem;
+    bottom: .28rem;
+    font-size: .24rem;
+    background: var(--themeColor);
+    padding: .06rem .18rem;
+    border-radius: .6rem;
+}
+
+.list .item .text{}
+.list .item .text .title{
+    font-size: 0.34rem;
+    font-weight: 400;
+    margin-top: 0.2rem;
+}
+.list .item .text .model,
+.list .item .text .mechanism{
+    font-size: 0.28rem;
+    color: #bdb7b7;
+}
+
+.list .item .tags{
+    margin-top: 0.1rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+.list .item .tags a{
+    font-size: 0.24rem;
+    flex-shrink: 0;
+    padding: 0.08rem 0.18rem;
+    background: var(--themeColor);
+    margin-right: 0.1rem;
+    color: #fff;
+    border-radius: 0.2rem;
+    margin-bottom: 0.1rem;
+}
+
+
+.pub_title {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: .9rem;
+    background: var(--themeColor);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 .2rem;
+    box-sizing: border-box;
+}
+.pub_title i {
+    font-size: .4rem;
+}
+.pub_title span {
+    font-size: .36rem;
+    flex: 1;
+    margin-left: 0.28rem;
+    margin-right: 0.18rem;
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/me.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/me.css
@@ -0,0 +1,50 @@
+.me_top {
+    font-size: .4rem;
+    height: 4rem;
+    width: 100%;
+    background-color:var(--themeColor);
+    color: aliceblue;
+}
+
+.me_top i {
+    color:var(--whiteColor);
+    font-size: 1.4rem;
+    position: absolute;
+    left: 3.04rem;
+    line-height: 4rem;
+}
+
+.wode {
+    position: absolute;
+    left: 3.34rem;
+    top: 2.7rem;
+
+}
+
+ul {
+    font-size: .4rem;
+    margin-top: .1rem;
+    color:var(--textColor);
+}
+
+li  {
+    margin-top: .2rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+li a {
+    color:var(--textColor);
+}
+
+.my_list{
+    width: 100%;
+    margin-left: .1rem;
+}
+
+li i {
+    height: .4rem;
+    width: .4rem;
+    margin-right: .1rem;
+    line-height: .52rem;
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/mechanism.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/mechanism.css
@@ -0,0 +1,32 @@
+.list {
+    display: flex;
+    flex-wrap: wrap;
+    background: #00000008;
+    padding-left: 0.2rem;
+    justify-content: flex-start !important;
+    box-sizing: border-box;
+
+}
+.list .shuliang {
+    overflow-y: scroll;
+    width: 20%;
+    padding-top: .3rem;
+    margin-left: 0.2rem;
+    flex-shrink: 0;
+}
+.list .shuliang .title{
+    font-size: .3rem;
+    color: black;
+    margin-bottom: .1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+
+}
+.list .shuliang .number{
+    font-size: .2rem;
+    color: var(--themeColor);
+    text-align: center;
+
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/model.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/model.css
@@ -0,0 +1,51 @@
+.hot_model{
+    width: 100%;
+    padding: 0 0.2rem;
+    box-sizing: border-box;
+}
+.hot_model .hot_title{
+    font-size: .36rem;
+    padding:  0.42rem 0;
+    font-weight: 600;
+}
+.hot_model .model_list{
+    display: flex;
+    flex-wrap: wrap;
+
+}
+.hot_model .model_list a{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    width: 25%;
+    margin-bottom: 0.5rem;
+    position: relative;
+}
+.hot_model .model_list a img{
+    width:1.2rem ;
+    height: 1.2rem;
+    border-radius: 100%;
+    background: rgb(230, 182, 182);
+    margin-bottom: 0.1rem;
+}
+.hot_model .model_list a i{
+    position: absolute;
+    bottom: 0.4rem;
+    left: 50%;
+    transform:translateX(-50%) ;
+    display: inline-block;
+    font-size: 0.24rem;
+    /* transform: scale(0.8); */
+    background: var(--textColor);
+    padding: 0.04rem 0.1rem;
+    margin-right:0.1rem ;
+    color: #fff;
+    z-index: 2;
+    border-radius: 0.6rem
+}
+.hot_model .model_list a span{
+    font-size: 0.24rem;
+    color: #bdb7b7;
+    /* zoom:calc(0.8) */
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/modelinfo.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/modelinfo.css
@@ -0,0 +1,40 @@
+.title {
+    display: flex;
+    padding-left: 0.4rem;
+    padding-top: 0.4rem;
+}
+
+.title img {
+    width: 20%;
+    border-radius: 50%;
+}
+
+.title .name {
+    padding-left: 0.4rem;
+}
+
+.title .name p {
+    font-size: .32rem;
+    margin-bottom: .2rem;
+}
+
+.test {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    box-sizing: border-box;
+    overflow-y: scroll;
+}
+.test img {
+    width: 45%;
+    margin-bottom: .2rem;
+    padding: 0 0.1rem;
+    margin-top: 0.2rem;
+}
+
+.xiala {
+    position: fixed;
+    left: 50%;
+    bottom: .1rem;
+    color: var(--themeColor);
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/secarh.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/secarh.css
@@ -0,0 +1,62 @@
+.header{
+    position: fixed;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 0.9rem;
+    background: var(--themeColor);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.2rem;
+    box-sizing: border-box;
+    z-index: 999;
+
+}
+.header i{
+    font-size: .4rem;
+}
+.header .icon-search{
+    cursor: pointer;
+}
+.header .search_box{
+    flex: 1;
+    background: var(--whiteColor);
+    height: .6rem;
+    margin: 0 0.2rem;
+    border-radius: .6rem;
+    padding-left: .4rem;
+    box-sizing: border-box;
+}
+
+.suggest{
+    width: 100%;
+    padding-left: 0.3rem;
+    box-sizing: border-box;
+}
+.suggest .suggest_title{
+    font-size: .36rem;
+    padding: 0.42rem 0;
+    font-weight: 600;
+}
+.suggest .suggest_list{
+    display: flex;
+    flex-wrap: wrap;
+}
+.suggest .suggest_list li{
+    width: max-content;
+    font-size: 0.28rem;
+    color: #fff;
+    border-radius: 0.4rem;
+    margin-bottom: 0.18rem;
+    margin-right: 0.16rem;
+    padding: 0.06rem 0.2rem;
+    background: var(--themeColor);
+    cursor: pointer;
+}
+.suggest_item{
+    width: 100%;
+    background: red;
+
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/tags.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/tags.css
@@ -0,0 +1,17 @@
+/* swiper-wrapper{
+    width: 100%;
+    padding-top: .4rem;
+    padding-left: .3rem;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+}
+swiper-wrapper a{
+    font-size: 0.28rem;
+    color: #fff;
+    border-radius: 0.4rem;
+    margin-bottom: 0.18rem;
+    margin-right: 0.2rem;
+    padding: 0.06rem 0.2rem;
+    background: var(--themeColor);
+} */
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/utils.css
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/css/utils.css
@@ -0,0 +1,18 @@
+.top {
+    border-top: 0.02rem solid #e2e2e2;
+}
+.left {
+    border-left: 0.02rem solid #e2e2e2;
+}
+.right {
+    border-right: 0.02rem solid #e2e2e2;
+}
+.bottom {
+    border-bottom: 0.02rem solid #e2e2e2;
+}
+
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/config/index.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/config/index.js
@@ -0,0 +1,49 @@
+// 全局js配置，一般用来配置接口的基地址，和 短地址 等一些...
+var config = {
+    // 开发阶段
+    devBaseUrl: 'http://127.0.0.1:3000/api/json',
+
+    // 测试阶段
+    testBaseUrl: 'http://127.0.0.2:8080/api/json',
+
+    // 正式阶段
+    prodBaseUrl: 'http://www.anc.com/api/json',
+
+    stage: 'dev',  // dev  test  prod
+
+    switchStage: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl
+                break;
+            case "test":
+                return this.testBaseUrl
+                break;
+            case "prod":
+                return this.prodBaseUrl
+                break;
+            default:
+                break;
+        }
+    },
+
+    apiList: {
+        index: '/index',
+        info: '/info',
+        mechanism: '/mechanism',
+        type: '/class',
+        classList: '/classList',
+        model: '/allModel',
+        search:'/search',
+        modelList:'/modelList'
+    },
+
+    footerArr: [
+        { title: '首页', href: 'index.html', icon: 'icon-home' },
+        { title: '机构', href: 'mechanism.html', icon: 'icon-jigou' },
+        { title: '模特', href: 'model.html', icon: 'icon-me' },
+        { title: '我的', href: 'me.html', icon: 'icon-wo' },
+    ]
+}
+
+
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/http/config/index.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/http/config/index.js
@@ -0,0 +1,47 @@
+// 全局js配置，一般用来配置接口的基地址，和 短地址 等一些...
+var config = {
+    // 开发阶段
+    devBaseUrl: 'http://127.0.0.1:3000/api/json',
+
+    // 测试阶段
+    testBaseUrl: 'http://127.0.0.2:8080/api/json',
+    
+    // 正式阶段
+    prodBaseUrl: 'http://www.anc.com/api/json',
+
+    stage: 'dev',  // dev  test  prod
+
+    switchStage: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl
+                break;
+            case "test":
+                return this.testBaseUrl
+                break;
+            case "prod":
+                return this.prodBaseUrl
+                break;
+            default:
+                break;
+        }
+    },
+
+    apiList: {
+        index: '/index',
+        info: '/info',
+        mechanism: '/mechanism',
+        type: '/class',
+        classList: '/classList',
+        mechanismList: '/classList'
+    },
+
+    footerArr: [
+        { title: '首页', href: 'index.html', icon: 'icon-home' },
+        { title: '机构', href: 'mechanism.html', icon: 'icon-jigou' },
+        { title: '模特', href: 'model.html', icon: 'icon-me' },
+        { title: '我的', href: 'me.html', icon: 'icon-wo' },
+    ]
+}
+
+
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/http/index.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/http/index.js
@@ -0,0 +1,56 @@
+class Http {
+
+    constructor() {
+        this.xhr = new XMLHttpRequest();
+    }
+
+    get(params) {
+        return new Promise((success, error) => {
+            var par = ""
+            for (const key in params.data) {
+                par += `&${key}=${params.data[key]}`
+            }
+            par = par.replace("&", "?")
+            this.xhr.open("GET", `${config.switchStage()}${params.url}${par}`)
+            this.xhr.send()
+
+            this.ReadyState(success, error)
+        })
+    }
+
+    post(params) {
+        return new Promise((success, error) => {
+            this.xhr.open("POST", `${params.url}`)
+            this.xhr.setRequestHeader('Content-Type', 'application/json');
+            this.xhr.send(JSON.stringify(params.data))
+            this.ReadyState(success, error)
+        })
+    }
+
+
+    ReadyState(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    var data = JSON.parse(this.xhr.response);
+                    switch (data.status) {
+                        case 200:
+                            success(data.result)
+                            break;
+
+                        case 404:
+                            alert(data.msg);
+                            throw new Error(data.msg)
+                            break;
+
+                        default:
+                            break;
+                    }
+                    
+                } else {
+                    error(this.xhr)
+                }
+            }
+        }
+    }
+}
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/collection.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/collection.js
@@ -0,0 +1,37 @@
+class Collection {
+
+    constructor() {
+        title("我的收藏")
+        this.likeArr = JSON.stringify(localStorage.getItem("like"))
+        this.likeArr
+    }
+
+    async getLike() {
+        var self = this;
+        if (localStorage.setItem("like") == null) {
+            var res = await IndexService.classList();
+            this.likeArr = res.likeArr
+            localStorage.setItem("like", JSON.stringify(this.likeArr))
+
+        }
+        else {
+            this.likeArr = JSON.parse(localStorage.setItem("like"))
+
+        }
+    }
+
+    renderlikeArr() {
+        this.likeArr.forEach(v => {
+            $(".content").innerHTML += `
+                  <li>${v}</li>
+                  `
+        });
+    }
+
+
+
+
+}
+
+
+new Collection()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/edit.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/edit.js
@@ -0,0 +1,53 @@
+class Edit {
+    constructor() {
+        title("分类管理")
+        this.principal = JSON.parse(localStorage.getItem("principal"))
+        this.additional = JSON.parse(localStorage.getItem("additional"))
+
+        this.renderPage()
+    }
+
+    renderPage() {
+        $(".selected ul").innerHTML = ""
+        this.principal.forEach(v => {
+            $(".selected ul").innerHTML += `
+                <li>${v.title}</li>
+            `
+        });
+
+        $(".optional ul").innerHTML = ""
+
+        this.additional.forEach(v => {
+            $(".optional ul").innerHTML += `
+                <li>${v.title}</li>
+            `
+        });
+
+        click(".selected ul li", (v,i) => {
+            if (i != 0) {
+                this.additional.push(this.principal[i])
+                this.principal = this.principal.filter((val,index) => {
+                    return index != i
+                });
+
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+        
+                this.renderPage()
+            }
+        })
+
+        click(".optional ul li", (v,i) => {
+            this.principal.push(this.additional[i])
+            this.additional = this.additional.filter((val,index) => {
+                return index != i
+            });
+
+            localStorage.setItem("principal", JSON.stringify(this.principal))
+            localStorage.setItem("additional", JSON.stringify(this.additional))
+    
+            this.renderPage()
+        })
+    }
+}
+new Edit()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/index.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/index.js
@@ -0,0 +1,130 @@
+class Index {
+    constructor() {
+        this.index = 0;
+        this.principa = []
+        footer();
+        this.initSwiper();
+        this.getType().then(() => this.getIndex());
+        
+
+    }
+
+    async getType() {
+
+        // 本地无数值，那么发送请求
+        if (localStorage.getItem("principal") == null) {
+            var { principal, additional } = await indexService.type()
+            localStorage.setItem("principal", JSON.stringify(principal))
+            localStorage.setItem("additional", JSON.stringify(additional))
+        } else {
+            var principal = JSON.parse(localStorage.getItem("principal"))
+            var additional = JSON.parse(localStorage.getItem("additional"))
+        }
+      
+
+
+        this.principal = principal;
+
+        console.log(this.principal);
+
+        // TODO 改造这个代码，实现下面的作业
+        this.principal.forEach((v, i) => {
+            $(".header_menu ul").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`;
+            $(".swiper .swiper-wrapper").innerHTML += `
+                <div class="swiper-slide">
+                    <div class="list">
+                    </div>
+                </div>
+            `;
+        });
+
+
+        click(".header_menu ul li", (v, i) => {
+            _(".header_menu ul li").forEach(v => v.classList.remove("active"))
+            v.classList.add("active")
+            this.index = i
+            this.getClassList()
+            this.mySwiper.slideTo(i)
+        })
+
+        _(".swiper .swiper-wrapper .swiper-slide").forEach((v,i) => {
+            if (i != 0) {
+                v.onscroll = () => {
+                    const {clientHeight, scrollHeight, scrollTop} = v;
+                    var distance = scrollHeight- scrollTop - clientHeight;
+                    if (distance <= 0.5) {
+                        this.principal[this.index].page += 1
+                        if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                            this.getClassList("loadMore")
+                        }
+                    }
+                }
+            }
+        })
+
+        // 作业：在utils里面 实现下面这种封装
+        // principal.html(".header_menu ul", (v,i) => {
+        //     return `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
+        // })
+    }
+
+    async getIndex() {
+        var res = await indexService.index()
+        this.principal[this.index].content = res.list
+        item(
+            _(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
+            this.principal[this.index].content
+        )
+    }
+
+    async getClassList(type = "click") {
+        
+
+        var getList = async () => {
+            var res = await indexService.classList({
+                page: this.principal[this.index].page,
+                id: this.principal[this.index].id
+            });
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ]
+            this.principal[this.index].total_page = res.total_page
+            console.log("getClassList: ", this.principal);
+
+            // 渲染页面（注意：把指定数组下标的content渲染到对应下标的 swiper-slide）
+            item(
+                _(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
+                this.principal[this.index].content
+            )
+        }
+
+        
+        if (type == "click") {
+            if (this.principal[this.index].content.length == 0 && this.index != 0) {
+                getList();
+            }
+        } else {
+            getList();
+        }
+    }
+
+
+    initSwiper() {
+        var self = this;
+        this.mySwiper = new Swiper('.swiper', {
+            direction: 'horizontal',
+            on: {
+                slideChangeTransitionEnd: function () {
+                    _(".header_menu ul li").forEach(v => v.classList.remove("active"))
+                    _(".header_menu ul li")[this.activeIndex].classList.add("active")
+
+                    self.index = this.activeIndex
+                    self.getClassList()
+                },
+            },
+        })
+    }
+}
+
+new Index()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/info.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/info.js
@@ -0,0 +1,72 @@
+class Info {
+    constructor() {
+        this.infoArr = []
+        this.likeArr = JSON.parse(localStorage.getItem("like")) == null 
+                        ? [] 
+                        : JSON.parse(localStorage.getItem("like"))
+
+        title(query("title"), `<i class="like iconfont icon-xin"></i>`)
+        this.getInfo()
+        this.like()
+    }
+
+    async getInfo() {
+        this.infoArr = await indexService.info({
+            id: query("id"),
+            quantity: query("quantity")
+        });
+
+        this.infoArr.forEach((v,i) => {
+            var img = document.createElement("img")
+            img.src = v;
+          
+            img.onload = () => {
+                 $(".imgList").innerHTML += `
+                    <figure>
+                        <a href="${v}" data-size="${img.width}x${img.height}">
+                            <img src="${v}" alt="${v}" />
+                        </a>
+                        <figcaption itemprop="caption description">${query("title")} ${i+1}P</figcaption>
+                    </figure>
+                  `
+            }
+        });
+
+        initPhotoSwipeFromDOM('.imgList');
+    }
+
+    like() {
+
+        var res = this.likeArr.filter((v,i) => {
+            return query("id") == v.id
+        });
+
+        if (res.length != 0) {
+            $(".like").classList.replace("icon-xin", "icon-aixin")
+        }
+
+
+        click(".like", () => {
+            // 空心  未收藏 去收藏
+            if ($(".like").classList.contains("icon-xin")) {
+                $(".like").classList.replace("icon-xin", "icon-aixin")
+
+                this.likeArr.push({
+                    id: query("id"),
+                    quantity: query("quantity"),
+                    img: this.infoArr[0]
+                });
+              
+            } else {
+                $(".like").classList.replace("icon-aixin", "icon-xin")
+                this.likeArr = this.likeArr.filter((v,i) => {
+                    return query("id") != v.id
+                });
+            }
+
+            localStorage.setItem("like", JSON.stringify(this.likeArr))
+        })
+    }
+}
+
+new Info();
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/me.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/me.js
@@ -0,0 +1,10 @@
+class Me {
+
+    constructor() {
+        footer()
+        title("我的收藏")
+    }
+
+}
+
+new Me()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/mechanism.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/mechanism.js
@@ -0,0 +1,24 @@
+class Mechanism {
+    constructor () {
+        footer()
+        title('机构')
+        this.getmechanism()
+    }
+
+    async getmechanism() {
+        var res = await indexService.mechanism({ });
+        console.log("test:",res)
+
+        res.forEach((v) => {
+            $(".list").innerHTML += `
+            <a href="./mechanisminfo.html?id=${v.id}&title=${v.title}" class="shuliang">
+                <div class="title">${v.title}</div>
+                <div class="number">${v.id}套</div>
+            </a>
+          `
+        })
+    }
+
+}
+
+new Mechanism()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/model.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/model.js
@@ -0,0 +1,35 @@
+// class Model {
+//     constructor () {
+//         footer()
+//     }
+// }
+
+// new Model()
+
+
+class Model {
+    constructor() {
+        footer()
+        title("模特")
+        this.getModel()
+        //this.renderModelPage()
+    }
+
+    async getModel() {
+        var res = await modelService.model();
+        console.log("list接口数据",res);
+
+        res.forEach((v => {
+            $(".model_list").innerHTML += `
+                    <a href="./modelinfo.html?id=${v.id}&title=${v.title}">
+                        <i>44张</i>
+                        <img src="${v.img}" alt="">
+                        <span class="ellipsis">${v.title}</span>
+                    </a>
+                `
+        }))
+
+
+    }
+}
+new Model()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/modelinfo.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/modelinfo.js
@@ -0,0 +1,53 @@
+class Modelinfo {
+    constructor() {
+        this.list = [];
+        title(query("title"))
+        this.appear = true
+        this.page = 1
+        this.getmodelList();
+    }
+
+    async getmodelList() {
+        
+        var self = this;
+        var res = await indexService.modelList({
+            id: query("id"),
+            page: this.page
+        })
+        //每次请求接口得到结果，把数组累加
+        res.data.forEach(element => {
+            this.list.push(element)
+        });
+        //判断是否第一次请求，是 === 渲染简介 否 === 不渲染
+        if (this.appear) {this.modelList($('.title'),res)  }
+ 
+        this.testModelList($('.test'), this.list)  
+       
+    }
+    modelList(father, data) {
+        father.innerHTML +=`
+             <img src="${data.model_info.portrait}" alt="">
+             <div class="name">
+                 <p>${data.model_info.name}</p>
+                 <p>${data.model_info.explain} </p>
+             </div>
+         
+         `
+
+    }
+
+    testModelList(father, data) {
+        data.forEach((value, index) => {
+            father.innerHTML += 
+            `
+           <img src="${value.img_src}" alt="">
+            
+            `
+        })
+
+    }
+   
+    
+}
+
+new Modelinfo();
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/search.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/search.js
@@ -0,0 +1,67 @@
+class Search {
+    constructor() {
+        footer()
+        this.getSearch()
+        this.seek()
+    }
+
+    async seek(newKey) {
+        var res = await indexService.search({
+            keyword: newKey,
+            page: 1
+        });
+        item($(".recommend .list"), res)
+    }
+    hidden (){
+        $(".suggest").style.display = "none"
+        $(".recommend").style.display = "block"
+    }
+    show (){
+        $(".suggest").style.display = "block"
+        $(".recommend").style.display = "none"
+    }
+    async getSearch() {
+        var res = await indexService.search({
+            keyword: "长裙",
+            page: 1
+        });
+        res.forEach(v => {
+            $(".suggest_list").innerHTML += `
+                <li class="ellipsis">${v.biaoqianlist[0].name}</li>
+                `
+        });
+        // item($(".recommend .list"), res)
+
+        //获取输入框值
+        $(".search_box").oninput = () => {
+            if ($(".search_box").value.length > 0) {
+                this.seek($(".search_box").value)
+            }
+        }
+
+        //input获得焦点
+        $(".search_box").onfocus = () => {
+           this.show()
+        }
+        $(".content").onclick = () => {
+           this.hidden()
+        }
+
+        //标签绑定点击事件
+        click(".suggest_list li", (v, i) => {
+            $(".search_box").value = v.innerText
+            this.seek($(".search_box").value)
+            this.hidden()
+        })
+
+        //绑定搜索按钮
+        click(".icon-search", async (v, i) => {
+            this.seek($(".search_box").value)
+            this.hidden()
+        })
+        click(".icon-back1", () => {
+            history.back()
+        })
+    }
+}
+new Search()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/tags.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/page/tags.js
@@ -0,0 +1,21 @@
+class Tags {
+    constructor() {
+        title(query("name"))
+        footer()
+        this.getTags()
+    }
+
+    async getTags() {
+        this.res = await indexService.classList({
+            id: query("id"),
+            page: 1,
+        });
+
+        this.res.data.forEach((v, i) => {
+            item($(".swiper-slide   .list"),this.res.data)
+
+        });
+    }
+
+}
+new Tags()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/_.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/_.js
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/index.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/index.js
@@ -0,0 +1,80 @@
+class IndexService {
+
+    async index(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.index,
+            data: params
+        });
+    }
+
+    async search (params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.search,
+            data: params
+        });
+    }
+
+    async info(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.info,
+            data: params
+        });
+    }
+
+    async classList(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.classList,
+            data: params
+        });
+    }
+    
+    async mechanism(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.mechanism,
+            data:  params
+        });
+    }
+    
+    async mechanisminfo(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.mechanisminfo,
+            data:  params
+        });
+    }
+    Mechanisminfo
+    
+    async modelList(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.modelList,
+            data:  params
+        });
+    }
+    
+    async type(params = {}) {
+        var res = await (new Http()).get({
+            url: config.apiList.type,
+            data: params
+        });
+      
+        res.principal.unshift({
+            id: null,
+            page: null,
+            title: "首页"
+        });
+
+        res.principal.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+        
+
+        res.additional.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+
+        return res
+    }
+}
+
+var indexService = new IndexService()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/model.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/model.js
@@ -0,0 +1,11 @@
+class ModelService {
+
+
+    async model(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.model,
+            data: params
+        });
+    }
+}
+var modelService = new ModelService()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/my.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/my.js
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/public.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/service/public.js
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/utils/index.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/utils/index.js
@@ -0,0 +1,126 @@
+class Utils {
+
+    footer() {
+        var html = `
+        <ul class="footer top">
+           ${config.footerArr.forH(v => {
+                return `<li>
+                            <a href="${v.href}" class="${location.href.includes(v.href) ? 'active' : ''}">
+                                <i class="iconfont ${v.icon}"></i>
+                                <p>${v.title}</p>
+                            </a>
+                        </li>`
+            })}
+            
+        </ul>
+        `
+
+        $("body").insertAdjacentHTML("beforeend", html);
+    }
+
+    item (father, data) {
+        father.innerHTML = ""
+        data.forEach(v => {
+            father.innerHTML+=`
+            <div class="item">
+                <div class="img">
+                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
+                    <img src="${v.preview || v.img_src}" alt="">
+                    <span>${v.total || v.shuliang}P</span>
+                   </a>
+                </div>
+                <div class="text">
+                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
+                    <div class="title ellipsis">${v.title}</div>
+                    <div class="model ellipsis">${v.user || `模特: ${v.renwulist[0].name}`}</div>
+                    <div class="mechanism ellipsis">${v.source || `机构: ${v.jigoulist[0].name}`}</div>
+                   </a>
+                </div>
+                ${(v.tags || v.biaoqianlist) == undefined
+                  ? ''
+                  : `<div class="tags">
+                        ${
+                            (v.tags || v.biaoqianlist).forH(val => {
+                                return `
+                                    <a href="./../page/tags.html?id=${val.id}&name=${val.title || val.name}">${val.title || val.name}</a>
+                                `
+                            })
+                        }
+                    </div>`
+                }
+                
+            </div>
+            `
+        })
+    }
+
+    title(text = "", rightIcon = "") {
+        var html = `
+            <div class="pub_title">
+                <i class="iconfont icon-back1"></i>
+                <span class="ellipsis">${text}</span>
+                ${rightIcon}
+            </div>
+        `
+
+        $("body").insertAdjacentHTML("beforeend", html);
+
+        click(".icon-back1", () => {
+            history.back()
+        })
+    }
+
+    click(className, callback) {
+        _(className).forEach((v,i) => v.onclick = () => callback(v,i))
+    }
+
+    query(name) {
+        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        let r = window.location.search.substr(1).match(reg);
+        if (r != null) {
+            return decodeURIComponent(r[2]);
+        };
+        return null;
+    }
+
+
+
+    cover() {
+        // 对map进行重写
+
+        // map的实现原理
+        // function a(callback) {
+        //     return callback(v).toString()
+        // }
+        // var c = a( function (v) {
+        //     return "v"
+        // } )
+
+        Array.prototype.forH = function (callback) {
+            var res = []
+            for (var index = 0; index < this.length; index++) {
+                res.push(callback(this[index]))
+            }
+            return res.toString().replaceAll(",", "")
+        }
+        // 其他很多重写
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+
+}
+
+
+var { 
+    footer, $, _, query,
+    cover, click, item,
+    title
+} = new Utils();
+
+cover()
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/utils/rem.js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/js/utils/rem.js
@@ -0,0 +1,15 @@
+(function (w, d) {
+    function setSize() {
+        // 获取屏幕的宽度 375px
+        var screenWidth = d.documentElement.clientWidth;
+
+        // 根据规则计算  html 的font-size数值
+        var currentFontSize = screenWidth * 100 / 750;
+
+        // 修改html上的font-size
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/collection.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/collection.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/collection.css">
+</head>
+
+<body>
+    <ul class="content">
+        
+    </ul>
+</body>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/collection.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/edit.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/edit.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/edit.css">
+</head>
+
+<body>
+ 
+
+    <div class="content">
+        <div class="menu selected">
+            <div class="text">已选菜单</div>
+            <ul>
+            </ul>
+        </div>
+
+        <div class="menu optional">
+            <div class="text">可选菜单</div>
+            <ul>
+            </ul>
+        </div>
+    </div>
+
+</body>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/edit.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/index.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/index.css">
+</head>
+
+<body>
+
+    <div class="header">
+        <div class="header_top">
+            <i class="iconfont icon-taozi1"></i>
+            <a href="./search.html" class="search">
+                <i class="iconfont icon-search"></i>
+                <span>198万张图，有你想要的...</span>
+            </a>
+            <i class="iconfont icon-wo"></i>
+        </div>
+        <div class="header_menu">
+            <ul>
+                
+            </ul>
+            <a href="./edit.html" class="iconfont icon-edit"></a>
+        </div>
+    </div>
+
+    <div class="content">
+
+        <div class="swiper">
+            <div class="swiper-wrapper">
+            </div>
+        </div>
+
+    </div>
+
+</body>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/index.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/info.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/info.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+
+
+    <link rel="stylesheet" href="./../css/dist/photoswipe.css">
+    <link rel="stylesheet" href="./../css/dist/default-skin/default-skin.css">
+
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/info.css">
+</head>
+
+<body>
+
+    <div class="content">
+        <div class="imgList">
+        </div>
+    </div>
+
+
+
+    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+        <div class="pswp__bg"></div>
+
+        <div class="pswp__scroll-wrap">
+
+            <div class="pswp__container">
+                <div class="pswp__item"></div>
+                <div class="pswp__item"></div>
+                <div class="pswp__item"></div>
+            </div>
+
+            <div class="pswp__ui pswp__ui--hidden">
+                <div class="pswp__top-bar">
+                    <div class="pswp__counter"></div>
+                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+                    <div class="pswp__preloader">
+                        <div class="pswp__preloader__icn">
+                            <div class="pswp__preloader__cut">
+                                <div class="pswp__preloader__donut"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                    <div class="pswp__share-tooltip"></div>
+                </div>
+
+                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+                </button>
+
+                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+                </button>
+
+                <div class="pswp__caption">
+                    <div class="pswp__caption__center"></div>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</body>
+
+
+<script src="./../css/dist/photoswipe.min.js"></script>
+<script src="./../css/dist/photoswipe-ui-default.min.js"></script>
+<script src="./../css/dist/initPhotoSwipe.js"></script>
+
+<script src="./../js/config/index.js"></script>
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/info.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/me.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/me.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/me.css">
+</head>
+
+<body>
+    <div class="me_top">
+        <i class="iconfont icon-wo"></i>
+        <span class="wode">个人</span>
+    </div>
+    <ul class="me_bottom">
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>最近更新</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>单图收藏</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <a href="./collection.html">
+                <div class="me_list">
+                    <i class="iconfont icon-wushuju"></i>
+                    <span>写真收藏</span>
+                </div>
+            </a>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>关于我们</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>用户协议</span>
+            </div>
+
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>检测升级</span>
+            </div>
+
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>清除缓存</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+
+</body>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/me.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/mechanism.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/mechanism.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/mechanism.css">
+</head>
+
+<body>
+
+    <div class="header"></div>
+    <div class="content">
+        <div class="list">
+    
+        </div>
+    </div>
+ 
+
+</body>
+
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/mechanism.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/model.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/model.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模特</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/model.css">
+</head>
+
+<body>
+    <div class="content">
+        <div class="hot_model">
+            <div class="hot_title">热门模特</div>
+            <div class="model_list">
+         
+            </div>
+        </div>
+
+    </div>
+</body>
+
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/service/model.js"></script>
+<script src="./../js/page/model.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/modelinfo.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/modelinfo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/modelinfo.css">
+</head>
+
+<body>
+
+    <div class="content">
+        <div class="title">
+           
+        </div>
+        <div class="test">
+         
+        </div>
+        <i class="iconfont icon-xiangxia xiala" id="testImg"></i>
+
+    </div>
+    <div class="tag"></div>
+   
+
+</body>
+
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/modelinfo.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/search.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/search.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>搜索</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/secarh.css">
+</head>
+
+<body>
+    <div class="header">
+        <i class="iconfont icon-back1"></i>
+        <input class="search_box " placeholder="198万张图，有你想要的..."/>
+        <i class="iconfont icon-search"></i>
+    </div>
+    <div class="content">
+        <div class="suggest">
+            <div class="suggest_title">搜索建议</div>
+            <ul class="suggest_list">
+            </ul>
+        </div>
+        <div class="recommend">
+            <div class="list">
+            </div>
+        </div>
+    </div>
+   
+</body>
+
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/search.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/tags.html
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/page/tags.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>分类</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/tags.css">
+</head>
+
+<body>
+    <div class="content">
+       <div class="swiper-slide">
+          <div class="list"></div>
+          <a href="./me.html"></a>
+       </div>
+    </div>
+ </body>
+
+ 
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/tags.js"></script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/任务分配.txt
+++ b/历届学生/front-end-team-10/项目练习/上课项目/枸杞社/任务分配.txt
@@ -0,0 +1,29 @@
+冯凯 1: 机构页面
+   接口：/mechanism
+
+薛涛 6：机构列表  点击 进去的 详情展示页面
+   注意：6 点击进入详情
+   TODO 问题：接口无法返回数据，需要 刘兵 处理   
+   接口：/mechanismList
+
+
+韩孟雪 2: 模特页面
+   接口：/allModel
+
+冯凯 7：模特点击进入的模特主页
+   注意：7 点击进入详情
+   接口：/modelList
+
+薛涛 3: 我的页面
+薛涛 8：点击  收藏 进入  我的收藏 
+   注意：8 点击进入详情 
+
+韩孟雪 4：搜索页面
+   点击搜索按钮后，隐藏整个搜索建议
+   点击输入框后，输入框获得焦点时候，显示  整个搜索建议
+   接口：/search
+
+韩孟雪 5：首页的item下面tag可以点击，进入列表页面
+   TODO 问题：接口无法返回数据，需要 刘兵 处理   
+   接口：/classList
+
				`@@ -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>