first commit

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/clear.css

@@ -0,0 +1,26 @@
+@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;
+    
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/config.css

@@ -0,0 +1,20 @@
+/* 放全局颜色，尺寸等代码 */
+
+:root {
+    --themeColor: #fb7299;
+    --otherThemeColor: #fe7fa2;
+    --whiteColor: #fff;
+    --blackColor: #000;
+    --textColor: #999;
+    
+    --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;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/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; }

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/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>

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/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 );
+    }
+};

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/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;
+
+
+});

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/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; }

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/core/base.d.ts

@@ -0,0 +1,59 @@
+export default PhotoSwipeBase;
+export type PhotoSwipe = import("../photoswipe.js").default;
+export type SlideData = import("../slide/slide.js").SlideData;
+/** @typedef {import("../photoswipe.js").default} PhotoSwipe */
+/** @typedef {import("../slide/slide.js").SlideData} SlideData */
+/**
+ * PhotoSwipe base class that can retrieve data about every slide.
+ * Shared by PhotoSwipe Core and PhotoSwipe Lightbox
+ */
+declare class PhotoSwipeBase extends Eventable {
+    /**
+     * Get total number of slides
+     *
+     * @returns {number}
+     */
+    getNumItems(): number;
+    /**
+     * @param {SlideData} slideData
+     * @param {number} index
+     * @returns {Content}
+     */
+    createContentFromData(slideData: SlideData, index: number): Content;
+    /**
+     * Get item data by index.
+     *
+     * "item data" should contain normalized information that PhotoSwipe needs to generate a slide.
+     * For example, it may contain properties like
+     * `src`, `srcset`, `w`, `h`, which will be used to generate a slide with image.
+     *
+     * @param {number} index
+     * @returns {SlideData}
+     */
+    getItemData(index: number): SlideData;
+    /**
+     * Get array of gallery DOM elements,
+     * based on childSelector and gallery element.
+     *
+     * @param {HTMLElement} galleryElement
+     * @returns {HTMLElement[]}
+     */
+    _getGalleryDOMElements(galleryElement: HTMLElement): HTMLElement[];
+    /**
+     * Converts DOM element to item data object.
+     *
+     * @param {HTMLElement} element DOM element
+     * @returns {SlideData}
+     */
+    _domElementToItemData(element: HTMLElement): SlideData;
+    /**
+     * Lazy-load by slide data
+     *
+     * @param {SlideData} itemData Data about the slide
+     * @param {number} index
+     * @returns {Content} Image that is being decoded or false.
+     */
+    lazyLoadData(itemData: SlideData, index: number): Content;
+}
+import Eventable from "./eventable.js";
+import Content from "../slide/content.js";

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/core/eventable.d.ts

@@ -0,0 +1,981 @@
+export default Eventable;
+export type PhotoSwipeLightbox = import('../lightbox/lightbox.js').default;
+export type PhotoSwipe = import('../photoswipe.js').default;
+export type PhotoSwipeOptions = import('../photoswipe.js').PhotoSwipeOptions;
+export type DataSource = import('../photoswipe.js').DataSource;
+export type UIElementData = import('../ui/ui-element.js').UIElementData;
+export type ContentDefault = import('../slide/content.js').default;
+export type Slide = import('../slide/slide.js').default;
+export type SlideData = import('../slide/slide.js').SlideData;
+export type ZoomLevel = import('../slide/zoom-level.js').default;
+export type Bounds = import('../slide/get-thumb-bounds.js').Bounds;
+/**
+ * Allow adding an arbitrary props to the Content
+ * https://photoswipe.com/custom-content/#using-webp-image-format
+ */
+export type Content = ContentDefault & Record<string, any>;
+export type Point = {
+    x?: number;
+    y?: number;
+};
+/**
+ * https://photoswipe.com/events/
+ *
+ *
+ * https://photoswipe.com/adding-ui-elements/
+ */
+export type PhotoSwipeEventsMap = {
+    uiRegister: undefined;
+    /**
+     * https://photoswipe.com/events/#initialization-events
+     */
+    uiElementCreate: {
+        data: UIElementData;
+    };
+    beforeOpen: undefined;
+    firstUpdate: undefined;
+    initialLayout: undefined;
+    change: undefined;
+    afterInit: undefined;
+    /**
+     * https://photoswipe.com/events/#opening-or-closing-transition-events
+     */
+    bindEvents: undefined;
+    openingAnimationStart: undefined;
+    openingAnimationEnd: undefined;
+    closingAnimationStart: undefined;
+    /**
+     * https://photoswipe.com/events/#closing-events
+     */
+    closingAnimationEnd: undefined;
+    close: undefined;
+    /**
+     * https://photoswipe.com/events/#pointer-and-gesture-events
+     */
+    destroy: undefined;
+    pointerDown: {
+        originalEvent: PointerEvent;
+    };
+    pointerMove: {
+        originalEvent: PointerEvent;
+    };
+    pointerUp: {
+        originalEvent: PointerEvent;
+    };
+    /**
+     * can be default prevented
+     */
+    pinchClose: {
+        bgOpacity: number;
+    };
+    /**
+     * can be default prevented
+     *
+     *
+     * https://photoswipe.com/events/#slide-content-events
+     */
+    verticalDrag: {
+        panY: number;
+    };
+    contentInit: {
+        content: Content;
+    };
+    /**
+     * can be default prevented
+     */
+    contentLoad: {
+        content: Content;
+        isLazy: boolean;
+    };
+    /**
+     * can be default prevented
+     */
+    contentLoadImage: {
+        content: Content;
+        isLazy: boolean;
+    };
+    loadComplete: {
+        content: Content;
+        slide: Slide;
+        isError?: boolean;
+    };
+    loadError: {
+        content: Content;
+        slide: Slide;
+    };
+    /**
+     * can be default prevented
+     */
+    contentResize: {
+        content: Content;
+        width: number;
+        height: number;
+    };
+    imageSizeChange: {
+        content: Content;
+        width: number;
+        height: number;
+        slide: Slide;
+    };
+    /**
+     * can be default prevented
+     */
+    contentLazyLoad: {
+        content: Content;
+    };
+    /**
+     * can be default prevented
+     */
+    contentAppend: {
+        content: Content;
+    };
+    /**
+     * can be default prevented
+     */
+    contentActivate: {
+        content: Content;
+    };
+    /**
+     * can be default prevented
+     */
+    contentDeactivate: {
+        content: Content;
+    };
+    /**
+     * can be default prevented
+     */
+    contentRemove: {
+        content: Content;
+    };
+    /**
+     * can be default prevented
+     *
+     *
+     * undocumented
+     */
+    contentDestroy: {
+        content: Content;
+    };
+    /**
+     * can be default prevented
+     */
+    imageClickAction: {
+        point: Point;
+        originalEvent: PointerEvent;
+    };
+    /**
+     * can be default prevented
+     */
+    bgClickAction: {
+        point: Point;
+        originalEvent: PointerEvent;
+    };
+    /**
+     * can be default prevented
+     */
+    tapAction: {
+        point: Point;
+        originalEvent: PointerEvent;
+    };
+    /**
+     * can be default prevented
+     */
+    doubleTapAction: {
+        point: Point;
+        originalEvent: PointerEvent;
+    };
+    /**
+     * can be default prevented
+     */
+    keydown: {
+        originalEvent: KeyboardEvent;
+    };
+    moveMainScroll: {
+        x: number;
+        dragging: boolean;
+    };
+    firstZoomPan: {
+        slide: Slide;
+    };
+    gettingData: {
+        slide: Slide | undefined;
+        data: SlideData;
+        index: number;
+    };
+    beforeResize: undefined;
+    resize: undefined;
+    viewportSize: undefined;
+    updateScrollOffset: undefined;
+    slideInit: {
+        slide: Slide;
+    };
+    afterSetContent: {
+        slide: Slide;
+    };
+    slideLoad: {
+        slide: Slide;
+    };
+    /**
+     * can be default prevented
+     */
+    appendHeavy: {
+        slide: Slide;
+    };
+    appendHeavyContent: {
+        slide: Slide;
+    };
+    slideActivate: {
+        slide: Slide;
+    };
+    slideDeactivate: {
+        slide: Slide;
+    };
+    slideDestroy: {
+        slide: Slide;
+    };
+    beforeZoomTo: {
+        destZoomLevel: number;
+        centerPoint: Point | undefined;
+        transitionDuration: number | false | undefined;
+    };
+    zoomPanUpdate: {
+        slide: Slide;
+    };
+    initialZoomPan: {
+        slide: Slide;
+    };
+    calcSlideSize: {
+        slide: Slide;
+    };
+    resolutionChanged: undefined;
+    /**
+     * can be default prevented
+     */
+    wheel: {
+        originalEvent: WheelEvent;
+    };
+    /**
+     * can be default prevented
+     */
+    contentAppendImage: {
+        content: Content;
+    };
+    /**
+     * can be default prevented
+     */
+    lazyLoadSlide: {
+        index: number;
+        itemData: SlideData;
+    };
+    lazyLoad: undefined;
+    calcBounds: {
+        slide: Slide;
+    };
+    /**
+     * legacy
+     */
+    zoomLevelsUpdate: {
+        zoomLevels: ZoomLevel;
+        slideData: SlideData;
+    };
+    init: undefined;
+    initialZoomIn: undefined;
+    initialZoomOut: undefined;
+    initialZoomInEnd: undefined;
+    initialZoomOutEnd: undefined;
+    numItems: {
+        dataSource: DataSource | undefined;
+        numItems: number;
+    };
+    itemData: {
+        itemData: SlideData;
+        index: number;
+    };
+    thumbBounds: {
+        index: number;
+        itemData: SlideData;
+        instance: PhotoSwipe;
+    };
+};
+/**
+ * https://photoswipe.com/filters/
+ */
+export type PhotoSwipeFiltersMap = {
+    /**
+     * Modify the total amount of slides. Example on Data sources page.
+     * https://photoswipe.com/filters/#numitems
+     */
+    numItems: (numItems: number, dataSource: DataSource | undefined) => number;
+    /**
+     * Modify slide item data. Example on Data sources page.
+     * https://photoswipe.com/filters/#itemdata
+     */
+    itemData: (itemData: SlideData, index: number) => SlideData;
+    /**
+     * Modify item data when it's parsed from DOM element. Example on Data sources page.
+     * https://photoswipe.com/filters/#domitemdata
+     */
+    domItemData: (itemData: SlideData, element: HTMLElement, linkEl: HTMLAnchorElement) => SlideData;
+    /**
+     * Modify clicked gallery item index.
+     * https://photoswipe.com/filters/#clickedindex
+     */
+    clickedIndex: (clickedIndex: number, e: MouseEvent, instance: PhotoSwipeLightbox) => number;
+    /**
+     * Modify placeholder image source.
+     * https://photoswipe.com/filters/#placeholdersrc
+     */
+    placeholderSrc: (placeholderSrc: string | false, content: Content) => string | false;
+    /**
+     * Modify if the content is currently loading.
+     * https://photoswipe.com/filters/#iscontentloading
+     */
+    isContentLoading: (isContentLoading: boolean, content: Content) => boolean;
+    /**
+     * Modify if the content can be zoomed.
+     * https://photoswipe.com/filters/#iscontentzoomable
+     */
+    isContentZoomable: (isContentZoomable: boolean, content: Content) => boolean;
+    /**
+     * Modify if the placeholder should be used for the content.
+     * https://photoswipe.com/filters/#usecontentplaceholder
+     */
+    useContentPlaceholder: (useContentPlaceholder: boolean, content: Content) => boolean;
+    /**
+     * Modify if the placeholder should be kept after the content is loaded.
+     * https://photoswipe.com/filters/#iskeepingplaceholder
+     */
+    isKeepingPlaceholder: (isKeepingPlaceholder: boolean, content: Content) => boolean;
+    /**
+     * Modify an element when the content has error state (for example, if image cannot be loaded).
+     * https://photoswipe.com/filters/#contenterrorelement
+     */
+    contentErrorElement: (contentErrorElement: HTMLElement, content: Content) => HTMLElement;
+    /**
+     * Modify a UI element that's being created.
+     * https://photoswipe.com/filters/#uielement
+     */
+    uiElement: (element: HTMLElement, data: UIElementData) => HTMLElement;
+    /**
+     * Modify the thubmnail element from which opening zoom animation starts or ends.
+     * https://photoswipe.com/filters/#thumbel
+     */
+    thumbEl: (thumbnail: HTMLElement | null | undefined, itemData: SlideData, index: number) => HTMLElement;
+    /**
+     * Modify the thubmnail bounds from which opening zoom animation starts or ends.
+     * https://photoswipe.com/filters/#thumbbounds
+     */
+    thumbBounds: (thumbBounds: Bounds | undefined, itemData: SlideData, index: number) => Bounds;
+    srcsetSizesWidth: (srcsetSizesWidth: number, content: Content) => number;
+};
+export type Filter<T extends keyof PhotoSwipeFiltersMap> = {
+    fn: PhotoSwipeFiltersMap[T];
+    priority: number;
+};
+export type AugmentedEvent<T extends keyof PhotoSwipeEventsMap> = PhotoSwipeEventsMap[T] extends undefined ? PhotoSwipeEvent<T> : PhotoSwipeEvent<T> & PhotoSwipeEventsMap[T];
+export type EventCallback<T extends keyof PhotoSwipeEventsMap> = (event: AugmentedEvent<T>) => void;
+/**
+ * PhotoSwipe base class that can listen and dispatch for events.
+ * Shared by PhotoSwipe Core and PhotoSwipe Lightbox, extended by base.js
+ */
+declare class Eventable {
+    /**
+     * @type {{ [T in keyof PhotoSwipeEventsMap]?: ((event: AugmentedEvent<T>) => void)[] }}
+     */
+    _listeners: {
+        uiRegister?: ((event: PhotoSwipeEvent<"uiRegister">) => void)[] | undefined;
+        /**
+         * https://photoswipe.com/events/#initialization-events
+         */
+        uiElementCreate?: ((event: PhotoSwipeEvent<"uiElementCreate"> & {
+            data: import("../ui/ui-element.js").UIElementData;
+        }) => void)[] | undefined;
+        beforeOpen?: ((event: PhotoSwipeEvent<"beforeOpen">) => void)[] | undefined;
+        firstUpdate?: ((event: PhotoSwipeEvent<"firstUpdate">) => void)[] | undefined;
+        initialLayout?: ((event: PhotoSwipeEvent<"initialLayout">) => void)[] | undefined;
+        change?: ((event: PhotoSwipeEvent<"change">) => void)[] | undefined;
+        afterInit?: ((event: PhotoSwipeEvent<"afterInit">) => void)[] | undefined;
+        /**
+         * https://photoswipe.com/events/#opening-or-closing-transition-events
+         */
+        bindEvents?: ((event: PhotoSwipeEvent<"bindEvents">) => void)[] | undefined;
+        openingAnimationStart?: ((event: PhotoSwipeEvent<"openingAnimationStart">) => void)[] | undefined;
+        openingAnimationEnd?: ((event: PhotoSwipeEvent<"openingAnimationEnd">) => void)[] | undefined;
+        closingAnimationStart?: ((event: PhotoSwipeEvent<"closingAnimationStart">) => void)[] | undefined;
+        /**
+         * https://photoswipe.com/events/#closing-events
+         */
+        closingAnimationEnd?: ((event: PhotoSwipeEvent<"closingAnimationEnd">) => void)[] | undefined;
+        close?: ((event: PhotoSwipeEvent<"close">) => void)[] | undefined;
+        /**
+         * https://photoswipe.com/events/#pointer-and-gesture-events
+         */
+        destroy?: ((event: PhotoSwipeEvent<"destroy">) => void)[] | undefined;
+        pointerDown?: ((event: PhotoSwipeEvent<"pointerDown"> & {
+            originalEvent: PointerEvent;
+        }) => void)[] | undefined;
+        pointerMove?: ((event: PhotoSwipeEvent<"pointerMove"> & {
+            originalEvent: PointerEvent;
+        }) => void)[] | undefined;
+        pointerUp?: ((event: PhotoSwipeEvent<"pointerUp"> & {
+            originalEvent: PointerEvent;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        pinchClose?: ((event: PhotoSwipeEvent<"pinchClose"> & {
+            bgOpacity: number;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         *
+         *
+         * https://photoswipe.com/events/#slide-content-events
+         */
+        verticalDrag?: ((event: PhotoSwipeEvent<"verticalDrag"> & {
+            panY: number;
+        }) => void)[] | undefined;
+        contentInit?: ((event: PhotoSwipeEvent<"contentInit"> & {
+            content: Content;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        contentLoad?: ((event: PhotoSwipeEvent<"contentLoad"> & {
+            content: Content;
+            isLazy: boolean;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        contentLoadImage?: ((event: PhotoSwipeEvent<"contentLoadImage"> & {
+            content: Content;
+            isLazy: boolean;
+        }) => void)[] | undefined;
+        loadComplete?: ((event: PhotoSwipeEvent<"loadComplete"> & {
+            content: Content;
+            slide: import("../slide/slide.js").default;
+            isError?: boolean | undefined;
+        }) => void)[] | undefined;
+        loadError?: ((event: PhotoSwipeEvent<"loadError"> & {
+            content: Content;
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        contentResize?: ((event: PhotoSwipeEvent<"contentResize"> & {
+            content: Content;
+            width: number;
+            height: number;
+        }) => void)[] | undefined;
+        imageSizeChange?: ((event: PhotoSwipeEvent<"imageSizeChange"> & {
+            content: Content;
+            width: number;
+            height: number;
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        contentLazyLoad?: ((event: PhotoSwipeEvent<"contentLazyLoad"> & {
+            content: Content;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        contentAppend?: ((event: PhotoSwipeEvent<"contentAppend"> & {
+            content: Content;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        contentActivate?: ((event: PhotoSwipeEvent<"contentActivate"> & {
+            content: Content;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        contentDeactivate?: ((event: PhotoSwipeEvent<"contentDeactivate"> & {
+            content: Content;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        contentRemove?: ((event: PhotoSwipeEvent<"contentRemove"> & {
+            content: Content;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         *
+         *
+         * undocumented
+         */
+        contentDestroy?: ((event: PhotoSwipeEvent<"contentDestroy"> & {
+            content: Content;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        imageClickAction?: ((event: PhotoSwipeEvent<"imageClickAction"> & {
+            point: Point;
+            originalEvent: PointerEvent;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        bgClickAction?: ((event: PhotoSwipeEvent<"bgClickAction"> & {
+            point: Point;
+            originalEvent: PointerEvent;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        tapAction?: ((event: PhotoSwipeEvent<"tapAction"> & {
+            point: Point;
+            originalEvent: PointerEvent;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        doubleTapAction?: ((event: PhotoSwipeEvent<"doubleTapAction"> & {
+            point: Point;
+            originalEvent: PointerEvent;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        keydown?: ((event: PhotoSwipeEvent<"keydown"> & {
+            originalEvent: KeyboardEvent;
+        }) => void)[] | undefined;
+        moveMainScroll?: ((event: PhotoSwipeEvent<"moveMainScroll"> & {
+            x: number;
+            dragging: boolean;
+        }) => void)[] | undefined;
+        firstZoomPan?: ((event: PhotoSwipeEvent<"firstZoomPan"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        gettingData?: ((event: PhotoSwipeEvent<"gettingData"> & {
+            slide: import("../slide/slide.js").default | undefined;
+            data: import("../slide/slide.js").SlideData;
+            index: number;
+        }) => void)[] | undefined;
+        beforeResize?: ((event: PhotoSwipeEvent<"beforeResize">) => void)[] | undefined;
+        resize?: ((event: PhotoSwipeEvent<"resize">) => void)[] | undefined;
+        viewportSize?: ((event: PhotoSwipeEvent<"viewportSize">) => void)[] | undefined;
+        updateScrollOffset?: ((event: PhotoSwipeEvent<"updateScrollOffset">) => void)[] | undefined;
+        slideInit?: ((event: PhotoSwipeEvent<"slideInit"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        afterSetContent?: ((event: PhotoSwipeEvent<"afterSetContent"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        slideLoad?: ((event: PhotoSwipeEvent<"slideLoad"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        appendHeavy?: ((event: PhotoSwipeEvent<"appendHeavy"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        appendHeavyContent?: ((event: PhotoSwipeEvent<"appendHeavyContent"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        slideActivate?: ((event: PhotoSwipeEvent<"slideActivate"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        slideDeactivate?: ((event: PhotoSwipeEvent<"slideDeactivate"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        slideDestroy?: ((event: PhotoSwipeEvent<"slideDestroy"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        beforeZoomTo?: ((event: PhotoSwipeEvent<"beforeZoomTo"> & {
+            destZoomLevel: number;
+            centerPoint: Point | undefined;
+            transitionDuration: number | false | undefined;
+        }) => void)[] | undefined;
+        zoomPanUpdate?: ((event: PhotoSwipeEvent<"zoomPanUpdate"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        initialZoomPan?: ((event: PhotoSwipeEvent<"initialZoomPan"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        calcSlideSize?: ((event: PhotoSwipeEvent<"calcSlideSize"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        resolutionChanged?: ((event: PhotoSwipeEvent<"resolutionChanged">) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        wheel?: ((event: PhotoSwipeEvent<"wheel"> & {
+            originalEvent: WheelEvent;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        contentAppendImage?: ((event: PhotoSwipeEvent<"contentAppendImage"> & {
+            content: Content;
+        }) => void)[] | undefined;
+        /**
+         * can be default prevented
+         */
+        lazyLoadSlide?: ((event: PhotoSwipeEvent<"lazyLoadSlide"> & {
+            index: number;
+            itemData: import("../slide/slide.js").SlideData;
+        }) => void)[] | undefined;
+        lazyLoad?: ((event: PhotoSwipeEvent<"lazyLoad">) => void)[] | undefined;
+        calcBounds?: ((event: PhotoSwipeEvent<"calcBounds"> & {
+            slide: import("../slide/slide.js").default;
+        }) => void)[] | undefined;
+        /**
+         * legacy
+         */
+        zoomLevelsUpdate?: ((event: PhotoSwipeEvent<"zoomLevelsUpdate"> & {
+            zoomLevels: import("../slide/zoom-level.js").default;
+            slideData: import("../slide/slide.js").SlideData;
+        }) => void)[] | undefined;
+        init?: ((event: PhotoSwipeEvent<"init">) => void)[] | undefined;
+        initialZoomIn?: ((event: PhotoSwipeEvent<"initialZoomIn">) => void)[] | undefined;
+        initialZoomOut?: ((event: PhotoSwipeEvent<"initialZoomOut">) => void)[] | undefined;
+        initialZoomInEnd?: ((event: PhotoSwipeEvent<"initialZoomInEnd">) => void)[] | undefined;
+        initialZoomOutEnd?: ((event: PhotoSwipeEvent<"initialZoomOutEnd">) => void)[] | undefined;
+        numItems?: ((event: PhotoSwipeEvent<"numItems"> & {
+            dataSource: import("../photoswipe.js").DataSource | undefined;
+            numItems: number;
+        }) => void)[] | undefined;
+        itemData?: ((event: PhotoSwipeEvent<"itemData"> & {
+            itemData: import("../slide/slide.js").SlideData;
+            index: number;
+        }) => void)[] | undefined;
+        thumbBounds?: ((event: PhotoSwipeEvent<"thumbBounds"> & {
+            index: number;
+            itemData: import("../slide/slide.js").SlideData;
+            instance: import("../photoswipe.js").default;
+        }) => void)[] | undefined;
+    };
+    /**
+     * @type {{ [T in keyof PhotoSwipeFiltersMap]?: Filter<T>[] }}
+     */
+    _filters: {
+        /**
+         * Modify the total amount of slides. Example on Data sources page.
+         * https://photoswipe.com/filters/#numitems
+         */
+        numItems?: Filter<"numItems">[] | undefined;
+        /**
+         * Modify slide item data. Example on Data sources page.
+         * https://photoswipe.com/filters/#itemdata
+         */
+        itemData?: Filter<"itemData">[] | undefined;
+        /**
+         * Modify item data when it's parsed from DOM element. Example on Data sources page.
+         * https://photoswipe.com/filters/#domitemdata
+         */
+        domItemData?: Filter<"domItemData">[] | undefined;
+        /**
+         * Modify clicked gallery item index.
+         * https://photoswipe.com/filters/#clickedindex
+         */
+        clickedIndex?: Filter<"clickedIndex">[] | undefined;
+        /**
+         * Modify placeholder image source.
+         * https://photoswipe.com/filters/#placeholdersrc
+         */
+        placeholderSrc?: Filter<"placeholderSrc">[] | undefined;
+        /**
+         * Modify if the content is currently loading.
+         * https://photoswipe.com/filters/#iscontentloading
+         */
+        isContentLoading?: Filter<"isContentLoading">[] | undefined;
+        /**
+         * Modify if the content can be zoomed.
+         * https://photoswipe.com/filters/#iscontentzoomable
+         */
+        isContentZoomable?: Filter<"isContentZoomable">[] | undefined;
+        /**
+         * Modify if the placeholder should be used for the content.
+         * https://photoswipe.com/filters/#usecontentplaceholder
+         */
+        useContentPlaceholder?: Filter<"useContentPlaceholder">[] | undefined;
+        /**
+         * Modify if the placeholder should be kept after the content is loaded.
+         * https://photoswipe.com/filters/#iskeepingplaceholder
+         */
+        isKeepingPlaceholder?: Filter<"isKeepingPlaceholder">[] | undefined;
+        /**
+         * Modify an element when the content has error state (for example, if image cannot be loaded).
+         * https://photoswipe.com/filters/#contenterrorelement
+         */
+        contentErrorElement?: Filter<"contentErrorElement">[] | undefined;
+        /**
+         * Modify a UI element that's being created.
+         * https://photoswipe.com/filters/#uielement
+         */
+        uiElement?: Filter<"uiElement">[] | undefined;
+        /**
+         * Modify the thubmnail element from which opening zoom animation starts or ends.
+         * https://photoswipe.com/filters/#thumbel
+         */
+        thumbEl?: Filter<"thumbEl">[] | undefined;
+        /**
+         * Modify the thubmnail bounds from which opening zoom animation starts or ends.
+         * https://photoswipe.com/filters/#thumbbounds
+         */
+        thumbBounds?: Filter<"thumbBounds">[] | undefined;
+        srcsetSizesWidth?: Filter<"srcsetSizesWidth">[] | undefined;
+    };
+    /** @type {PhotoSwipe | undefined} */
+    pswp: PhotoSwipe | undefined;
+    /** @type {PhotoSwipeOptions | undefined} */
+    options: Partial<import("../photoswipe.js").PreparedPhotoSwipeOptions> | undefined;
+    /**
+     * @template {keyof PhotoSwipeFiltersMap} T
+     * @param {T} name
+     * @param {PhotoSwipeFiltersMap[T]} fn
+     * @param {number} priority
+     */
+    addFilter<T extends keyof PhotoSwipeFiltersMap>(name: T, fn: PhotoSwipeFiltersMap[T], priority?: number): void;
+    /**
+     * @template {keyof PhotoSwipeFiltersMap} T
+     * @param {T} name
+     * @param {PhotoSwipeFiltersMap[T]} fn
+     */
+    removeFilter<T_1 extends keyof PhotoSwipeFiltersMap>(name: T_1, fn: PhotoSwipeFiltersMap[T_1]): void;
+    /**
+     * @template {keyof PhotoSwipeFiltersMap} T
+     * @param {T} name
+     * @param {Parameters<PhotoSwipeFiltersMap[T]>} args
+     * @returns {Parameters<PhotoSwipeFiltersMap[T]>[0]}
+     */
+    applyFilters<T_2 extends keyof PhotoSwipeFiltersMap>(name: T_2, ...args: Parameters<PhotoSwipeFiltersMap[T_2]>): Parameters<PhotoSwipeFiltersMap[T_2]>[0];
+    /**
+     * @template {keyof PhotoSwipeEventsMap} T
+     * @param {T} name
+     * @param {EventCallback<T>} fn
+     */
+    on<T_3 extends keyof PhotoSwipeEventsMap>(name: T_3, fn: EventCallback<T_3>): void;
+    /**
+     * @template {keyof PhotoSwipeEventsMap} T
+     * @param {T} name
+     * @param {EventCallback<T>} fn
+     */
+    off<T_4 extends keyof PhotoSwipeEventsMap>(name: T_4, fn: EventCallback<T_4>): void;
+    /**
+     * @template {keyof PhotoSwipeEventsMap} T
+     * @param {T} name
+     * @param {PhotoSwipeEventsMap[T]} [details]
+     * @returns {AugmentedEvent<T>}
+     */
+    dispatch<T_5 extends keyof PhotoSwipeEventsMap>(name: T_5, details?: PhotoSwipeEventsMap[T_5] | undefined): AugmentedEvent<T_5>;
+}
+/** @typedef {import('../lightbox/lightbox.js').default} PhotoSwipeLightbox */
+/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
+/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */
+/** @typedef {import('../photoswipe.js').DataSource} DataSource */
+/** @typedef {import('../ui/ui-element.js').UIElementData} UIElementData */
+/** @typedef {import('../slide/content.js').default} ContentDefault */
+/** @typedef {import('../slide/slide.js').default} Slide */
+/** @typedef {import('../slide/slide.js').SlideData} SlideData */
+/** @typedef {import('../slide/zoom-level.js').default} ZoomLevel */
+/** @typedef {import('../slide/get-thumb-bounds.js').Bounds} Bounds */
+/**
+ * Allow adding an arbitrary props to the Content
+ * https://photoswipe.com/custom-content/#using-webp-image-format
+ * @typedef {ContentDefault & Record<string, any>} Content
+ */
+/** @typedef {{ x?: number; y?: number }} Point */
+/**
+ * @typedef {Object} PhotoSwipeEventsMap https://photoswipe.com/events/
+ *
+ *
+ * https://photoswipe.com/adding-ui-elements/
+ *
+ * @prop {undefined} uiRegister
+ * @prop {{ data: UIElementData }} uiElementCreate
+ *
+ *
+ * https://photoswipe.com/events/#initialization-events
+ *
+ * @prop {undefined} beforeOpen
+ * @prop {undefined} firstUpdate
+ * @prop {undefined} initialLayout
+ * @prop {undefined} change
+ * @prop {undefined} afterInit
+ * @prop {undefined} bindEvents
+ *
+ *
+ * https://photoswipe.com/events/#opening-or-closing-transition-events
+ *
+ * @prop {undefined} openingAnimationStart
+ * @prop {undefined} openingAnimationEnd
+ * @prop {undefined} closingAnimationStart
+ * @prop {undefined} closingAnimationEnd
+ *
+ *
+ * https://photoswipe.com/events/#closing-events
+ *
+ * @prop {undefined} close
+ * @prop {undefined} destroy
+ *
+ *
+ * https://photoswipe.com/events/#pointer-and-gesture-events
+ *
+ * @prop {{ originalEvent: PointerEvent }} pointerDown
+ * @prop {{ originalEvent: PointerEvent }} pointerMove
+ * @prop {{ originalEvent: PointerEvent }} pointerUp
+ * @prop {{ bgOpacity: number }} pinchClose can be default prevented
+ * @prop {{ panY: number }} verticalDrag can be default prevented
+ *
+ *
+ * https://photoswipe.com/events/#slide-content-events
+ *
+ * @prop {{ content: Content }} contentInit
+ * @prop {{ content: Content; isLazy: boolean }} contentLoad can be default prevented
+ * @prop {{ content: Content; isLazy: boolean }} contentLoadImage can be default prevented
+ * @prop {{ content: Content; slide: Slide; isError?: boolean }} loadComplete
+ * @prop {{ content: Content; slide: Slide }} loadError
+ * @prop {{ content: Content; width: number; height: number }} contentResize can be default prevented
+ * @prop {{ content: Content; width: number; height: number; slide: Slide }} imageSizeChange
+ * @prop {{ content: Content }} contentLazyLoad can be default prevented
+ * @prop {{ content: Content }} contentAppend can be default prevented
+ * @prop {{ content: Content }} contentActivate can be default prevented
+ * @prop {{ content: Content }} contentDeactivate can be default prevented
+ * @prop {{ content: Content }} contentRemove can be default prevented
+ * @prop {{ content: Content }} contentDestroy can be default prevented
+ *
+ *
+ * undocumented
+ *
+ * @prop {{ point: Point; originalEvent: PointerEvent }} imageClickAction can be default prevented
+ * @prop {{ point: Point; originalEvent: PointerEvent }} bgClickAction can be default prevented
+ * @prop {{ point: Point; originalEvent: PointerEvent }} tapAction can be default prevented
+ * @prop {{ point: Point; originalEvent: PointerEvent }} doubleTapAction can be default prevented
+ *
+ * @prop {{ originalEvent: KeyboardEvent }} keydown can be default prevented
+ * @prop {{ x: number; dragging: boolean }} moveMainScroll
+ * @prop {{ slide: Slide }} firstZoomPan
+ * @prop {{ slide: Slide | undefined, data: SlideData, index: number }} gettingData
+ * @prop {undefined} beforeResize
+ * @prop {undefined} resize
+ * @prop {undefined} viewportSize
+ * @prop {undefined} updateScrollOffset
+ * @prop {{ slide: Slide }} slideInit
+ * @prop {{ slide: Slide }} afterSetContent
+ * @prop {{ slide: Slide }} slideLoad
+ * @prop {{ slide: Slide }} appendHeavy can be default prevented
+ * @prop {{ slide: Slide }} appendHeavyContent
+ * @prop {{ slide: Slide }} slideActivate
+ * @prop {{ slide: Slide }} slideDeactivate
+ * @prop {{ slide: Slide }} slideDestroy
+ * @prop {{ destZoomLevel: number, centerPoint: Point | undefined, transitionDuration: number | false | undefined }} beforeZoomTo
+ * @prop {{ slide: Slide }} zoomPanUpdate
+ * @prop {{ slide: Slide }} initialZoomPan
+ * @prop {{ slide: Slide }} calcSlideSize
+ * @prop {undefined} resolutionChanged
+ * @prop {{ originalEvent: WheelEvent }} wheel can be default prevented
+ * @prop {{ content: Content }} contentAppendImage can be default prevented
+ * @prop {{ index: number; itemData: SlideData }} lazyLoadSlide can be default prevented
+ * @prop {undefined} lazyLoad
+ * @prop {{ slide: Slide }} calcBounds
+ * @prop {{ zoomLevels: ZoomLevel, slideData: SlideData }} zoomLevelsUpdate
+ *
+ *
+ * legacy
+ *
+ * @prop {undefined} init
+ * @prop {undefined} initialZoomIn
+ * @prop {undefined} initialZoomOut
+ * @prop {undefined} initialZoomInEnd
+ * @prop {undefined} initialZoomOutEnd
+ * @prop {{ dataSource: DataSource | undefined, numItems: number }} numItems
+ * @prop {{ itemData: SlideData; index: number }} itemData
+ * @prop {{ index: number, itemData: SlideData, instance: PhotoSwipe }} thumbBounds
+ */
+/**
+ * @typedef {Object} PhotoSwipeFiltersMap https://photoswipe.com/filters/
+ *
+ * @prop {(numItems: number, dataSource: DataSource | undefined) => number} numItems
+ * Modify the total amount of slides. Example on Data sources page.
+ * https://photoswipe.com/filters/#numitems
+ *
+ * @prop {(itemData: SlideData, index: number) => SlideData} itemData
+ * Modify slide item data. Example on Data sources page.
+ * https://photoswipe.com/filters/#itemdata
+ *
+ * @prop {(itemData: SlideData, element: HTMLElement, linkEl: HTMLAnchorElement) => SlideData} domItemData
+ * Modify item data when it's parsed from DOM element. Example on Data sources page.
+ * https://photoswipe.com/filters/#domitemdata
+ *
+ * @prop {(clickedIndex: number, e: MouseEvent, instance: PhotoSwipeLightbox) => number} clickedIndex
+ * Modify clicked gallery item index.
+ * https://photoswipe.com/filters/#clickedindex
+ *
+ * @prop {(placeholderSrc: string | false, content: Content) => string | false} placeholderSrc
+ * Modify placeholder image source.
+ * https://photoswipe.com/filters/#placeholdersrc
+ *
+ * @prop {(isContentLoading: boolean, content: Content) => boolean} isContentLoading
+ * Modify if the content is currently loading.
+ * https://photoswipe.com/filters/#iscontentloading
+ *
+ * @prop {(isContentZoomable: boolean, content: Content) => boolean} isContentZoomable
+ * Modify if the content can be zoomed.
+ * https://photoswipe.com/filters/#iscontentzoomable
+ *
+ * @prop {(useContentPlaceholder: boolean, content: Content) => boolean} useContentPlaceholder
+ * Modify if the placeholder should be used for the content.
+ * https://photoswipe.com/filters/#usecontentplaceholder
+ *
+ * @prop {(isKeepingPlaceholder: boolean, content: Content) => boolean} isKeepingPlaceholder
+ * Modify if the placeholder should be kept after the content is loaded.
+ * https://photoswipe.com/filters/#iskeepingplaceholder
+ *
+ *
+ * @prop {(contentErrorElement: HTMLElement, content: Content) => HTMLElement} contentErrorElement
+ * Modify an element when the content has error state (for example, if image cannot be loaded).
+ * https://photoswipe.com/filters/#contenterrorelement
+ *
+ * @prop {(element: HTMLElement, data: UIElementData) => HTMLElement} uiElement
+ * Modify a UI element that's being created.
+ * https://photoswipe.com/filters/#uielement
+ *
+ * @prop {(thumbnail: HTMLElement | null | undefined, itemData: SlideData, index: number) => HTMLElement} thumbEl
+ * Modify the thubmnail element from which opening zoom animation starts or ends.
+ * https://photoswipe.com/filters/#thumbel
+ *
+ * @prop {(thumbBounds: Bounds | undefined, itemData: SlideData, index: number) => Bounds} thumbBounds
+ * Modify the thubmnail bounds from which opening zoom animation starts or ends.
+ * https://photoswipe.com/filters/#thumbbounds
+ *
+ * @prop {(srcsetSizesWidth: number, content: Content) => number} srcsetSizesWidth
+ *
+ */
+/**
+ * @template {keyof PhotoSwipeFiltersMap} T
+ * @typedef {{ fn: PhotoSwipeFiltersMap[T], priority: number }} Filter
+ */
+/**
+ * @template {keyof PhotoSwipeEventsMap} T
+ * @typedef {PhotoSwipeEventsMap[T] extends undefined ? PhotoSwipeEvent<T> : PhotoSwipeEvent<T> & PhotoSwipeEventsMap[T]} AugmentedEvent
+ */
+/**
+ * @template {keyof PhotoSwipeEventsMap} T
+ * @typedef {(event: AugmentedEvent<T>) => void} EventCallback
+ */
+/**
+ * Base PhotoSwipe event object
+ *
+ * @template {keyof PhotoSwipeEventsMap} T
+ */
+declare class PhotoSwipeEvent<T extends keyof PhotoSwipeEventsMap> {
+    /**
+     * @param {T} type
+     * @param {PhotoSwipeEventsMap[T]} [details]
+     */
+    constructor(type: T, details?: PhotoSwipeEventsMap[T] | undefined);
+    type: T;
+    defaultPrevented: boolean;
+    preventDefault(): void;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/gestures/drag-handler.d.ts

@@ -0,0 +1,58 @@
+export default DragHandler;
+export type Point = import('../photoswipe.js').Point;
+export type Gestures = import('./gestures.js').default;
+/**
+ * Handles single pointer dragging
+ */
+declare class DragHandler {
+    /**
+     * @param {Gestures} gestures
+     */
+    constructor(gestures: Gestures);
+    gestures: import("./gestures.js").default;
+    pswp: import("../photoswipe.js").default;
+    /** @type {Point} */
+    startPan: Point;
+    start(): void;
+    change(): void;
+    end(): void;
+    /**
+     * @private
+     * @param {'x' | 'y'} axis
+     */
+    private _finishPanGestureForAxis;
+    /**
+     * Update position of the main scroll,
+     * or/and update pan position of the current slide.
+     *
+     * Should return true if it changes (or can change) main scroll.
+     *
+     * @private
+     * @param {'x' | 'y'} axis
+     * @returns {boolean}
+     */
+    private _panOrMoveMainScroll;
+    /**
+     * Relation between pan Y position and third of viewport height.
+     *
+     * When we are at initial position (center bounds) - the ratio is 0,
+     * if position is shifted upwards - the ratio is negative,
+     * if position is shifted downwards - the ratio is positive.
+     *
+     * @private
+     * @param {number} panY The current pan Y position.
+     * @returns {number}
+     */
+    private _getVerticalDragRatio;
+    /**
+     * Set pan position of the current slide.
+     * Apply friction if the position is beyond the pan bounds,
+     * or if custom friction is defined.
+     *
+     * @private
+     * @param {'x' | 'y'} axis
+     * @param {number} potentialPan
+     * @param {number} [customFriction] (0.1 - 1)
+     */
+    private _setPanWithFriction;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/gestures/gestures.d.ts

@@ -0,0 +1,167 @@
+export default Gestures;
+export type PhotoSwipe = import('../photoswipe.js').default;
+export type Point = import('../photoswipe.js').Point;
+/**
+ * Gestures class bind touch, pointer or mouse events
+ * and emits drag to drag-handler and zoom events zoom-handler.
+ *
+ * Drag and zoom events are emited in requestAnimationFrame,
+ * and only when one of pointers was actually changed.
+ */
+declare class Gestures {
+    /**
+     * @param {PhotoSwipe} pswp
+     */
+    constructor(pswp: PhotoSwipe);
+    pswp: import("../photoswipe.js").default;
+    /** @type {'x' | 'y' | null} */
+    dragAxis: 'x' | 'y' | null;
+    /** @type {Point} */
+    p1: Point;
+    /** @type {Point} */
+    p2: Point;
+    /** @type {Point} */
+    prevP1: Point;
+    /** @type {Point} */
+    prevP2: Point;
+    /** @type {Point} */
+    startP1: Point;
+    /** @type {Point} */
+    startP2: Point;
+    /** @type {Point} */
+    velocity: Point;
+    /** @type {Point}
+     * @private
+     */
+    private _lastStartP1;
+    /** @type {Point}
+     * @private
+     */
+    private _intervalP1;
+    /** @private */
+    private _numActivePoints;
+    /** @type {Point[]}
+     * @private
+     */
+    private _ongoingPointers;
+    /** @private */
+    private _touchEventEnabled;
+    /** @private */
+    private _pointerEventEnabled;
+    supportsTouch: boolean;
+    /** @private */
+    private _intervalTime;
+    /** @private */
+    private _velocityCalculated;
+    isMultitouch: boolean;
+    isDragging: boolean;
+    isZooming: boolean;
+    /** @type {number | null} */
+    raf: number | null;
+    /** @type {NodeJS.Timeout | null}
+     * @private
+     */
+    private _tapTimer;
+    drag: DragHandler;
+    zoomLevels: ZoomHandler;
+    tapHandler: TapHandler;
+    /**
+     * @private
+     * @param {'mouse' | 'touch' | 'pointer'} pref
+     * @param {'down' | 'start'} down
+     * @param {'up' | 'end'} up
+     * @param {'cancel'} [cancel]
+     */
+    private _bindEvents;
+    /**
+     * @param {PointerEvent} e
+     */
+    onPointerDown(e: PointerEvent): void;
+    /**
+     * @param {PointerEvent} e
+     */
+    onPointerMove(e: PointerEvent): void;
+    /**
+     * @private
+     */
+    private _finishDrag;
+    /**
+     * @param {PointerEvent} e
+     */
+    onPointerUp(e: PointerEvent): void;
+    /**
+     * @private
+     */
+    private _rafRenderLoop;
+    /**
+     * Update velocity at 50ms interval
+     *
+     * @private
+     * @param {boolean} [force]
+     */
+    private _updateVelocity;
+    /**
+     * @private
+     * @param {PointerEvent} e
+     */
+    private _finishTap;
+    /**
+     * @private
+     */
+    private _clearTapTimer;
+    /**
+     * Get velocity for axis
+     *
+     * @private
+     * @param {'x' | 'y'} axis
+     * @param {number} duration
+     * @returns {number}
+     */
+    private _getVelocity;
+    /**
+     * @private
+     */
+    private _rafStopLoop;
+    /**
+     * @private
+     * @param {PointerEvent} e
+     */
+    private _preventPointerEventBehaviour;
+    /**
+     * Parses and normalizes points from the touch, mouse or pointer event.
+     * Updates p1 and p2.
+     *
+     * @private
+     * @param {PointerEvent | TouchEvent} e
+     * @param {'up' | 'down' | 'move'} pointerType Normalized pointer type
+     */
+    private _updatePoints;
+    /** update points that were used during previous rAF tick
+     * @private
+     */
+    private _updatePrevPoints;
+    /** update points at the start of gesture
+     * @private
+     */
+    private _updateStartPoints;
+    /** @private */
+    private _calculateDragDirection;
+    /**
+     * Converts touch, pointer or mouse event
+     * to PhotoSwipe point.
+     *
+     * @private
+     * @param {Touch | PointerEvent} e
+     * @param {Point} p
+     * @returns {Point}
+     */
+    private _convertEventPosToPoint;
+    /**
+     * @private
+     * @param {PointerEvent} e
+     */
+    private _onClick;
+}
+import DragHandler from "./drag-handler.js";
+import ZoomHandler from "./zoom-handler.js";
+import TapHandler from "./tap-handler.js";

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/gestures/tap-handler.d.ts

@@ -0,0 +1,40 @@
+export default TapHandler;
+/**
+ * <T, P>
+ */
+export type AddPostfix<T, P> = import('../types.js').AddPostfix<T, P>;
+export type Gestures = import('./gestures.js').default;
+export type Point = import('../photoswipe.js').Point;
+export type Actions = 'imageClick' | 'bgClick' | 'tap' | 'doubleTap';
+/**
+ * Tap, double-tap handler.
+ */
+declare class TapHandler {
+    /**
+     * @param {Gestures} gestures
+     */
+    constructor(gestures: Gestures);
+    gestures: import("./gestures.js").default;
+    /**
+     * @param {Point} point
+     * @param {PointerEvent} originalEvent
+     */
+    click(point: Point, originalEvent: PointerEvent): void;
+    /**
+     * @param {Point} point
+     * @param {PointerEvent} originalEvent
+     */
+    tap(point: Point, originalEvent: PointerEvent): void;
+    /**
+     * @param {Point} point
+     * @param {PointerEvent} originalEvent
+     */
+    doubleTap(point: Point, originalEvent: PointerEvent): void;
+    /**
+     * @private
+     * @param {Actions} actionName
+     * @param {Point} point
+     * @param {PointerEvent} originalEvent
+     */
+    private _doClickOrTapAction;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/gestures/zoom-handler.d.ts

@@ -0,0 +1,48 @@
+export default ZoomHandler;
+export type Point = import('../photoswipe.js').Point;
+export type Gestures = import('./gestures.js').default;
+declare class ZoomHandler {
+    /**
+     * @param {Gestures} gestures
+     */
+    constructor(gestures: Gestures);
+    gestures: import("./gestures.js").default;
+    /**
+     * @private
+     * @type {Point}
+     */
+    private _startPan;
+    /**
+     * @private
+     * @type {Point}
+     */
+    private _startZoomPoint;
+    /**
+     * @private
+     * @type {Point}
+     */
+    private _zoomPoint;
+    /** @private */
+    private _wasOverFitZoomLevel;
+    /** @private */
+    private _startZoomLevel;
+    start(): void;
+    change(): void;
+    end(): void;
+    /**
+     * @private
+     * @param {'x' | 'y'} axis
+     * @param {number} currZoomLevel
+     * @returns {number}
+     */
+    private _calculatePanForZoomLevel;
+    /**
+     * Correct currZoomLevel and pan if they are
+     * beyond minimum or maximum values.
+     * With animation.
+     *
+     * @param {boolean} [ignoreGesture]
+     * Wether gesture coordinates should be ignored when calculating destination pan position.
+     */
+    correctZoomPan(ignoreGesture?: boolean | undefined): void;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/keyboard.d.ts

@@ -0,0 +1,33 @@
+export default Keyboard;
+export type PhotoSwipe = import('./photoswipe.js').default;
+/**
+ * <T>
+ */
+export type Methods<T> = import('./types.js').Methods<T>;
+/**
+ * - Manages keyboard shortcuts.
+ * - Helps trap focus within photoswipe.
+ */
+declare class Keyboard {
+    /**
+     * @param {PhotoSwipe} pswp
+     */
+    constructor(pswp: PhotoSwipe);
+    pswp: import("./photoswipe.js").default;
+    /** @private */
+    private _wasFocused;
+    /** @private */
+    private _focusRoot;
+    /**
+     * @private
+     * @param {KeyboardEvent} e
+     */
+    private _onKeyDown;
+    /**
+     * Trap focus inside photoswipe
+     *
+     * @private
+     * @param {FocusEvent} e
+     */
+    private _onFocusIn;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/lightbox/lightbox.d.ts

@@ -0,0 +1,104 @@
+export default PhotoSwipeLightbox;
+/**
+ * <T>
+ */
+export type Type<T> = import('../types.js').Type<T>;
+export type PhotoSwipe = import('../photoswipe.js').default;
+export type PhotoSwipeOptions = import('../photoswipe.js').PhotoSwipeOptions;
+export type DataSource = import('../photoswipe.js').DataSource;
+export type Point = import('../photoswipe.js').Point;
+export type Content = import('../slide/content.js').default;
+export type PhotoSwipeEventsMap = import('../core/eventable.js').PhotoSwipeEventsMap;
+export type PhotoSwipeFiltersMap = import('../core/eventable.js').PhotoSwipeFiltersMap;
+/**
+ * <T>
+ */
+export type EventCallback<T> = import('../core/eventable.js').EventCallback<T>;
+/**
+ * @template T
+ * @typedef {import('../types.js').Type<T>} Type<T>
+ */
+/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
+/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */
+/** @typedef {import('../photoswipe.js').DataSource} DataSource */
+/** @typedef {import('../photoswipe.js').Point} Point */
+/** @typedef {import('../slide/content.js').default} Content */
+/** @typedef {import('../core/eventable.js').PhotoSwipeEventsMap} PhotoSwipeEventsMap */
+/** @typedef {import('../core/eventable.js').PhotoSwipeFiltersMap} PhotoSwipeFiltersMap */
+/**
+ * @template T
+ * @typedef {import('../core/eventable.js').EventCallback<T>} EventCallback<T>
+ */
+/**
+ * PhotoSwipe Lightbox
+ *
+ * - If user has unsupported browser it falls back to default browser action (just opens URL)
+ * - Binds click event to links that should open PhotoSwipe
+ * - parses DOM strcture for PhotoSwipe (retrieves large image URLs and sizes)
+ * - Initializes PhotoSwipe
+ *
+ *
+ * Loader options use the same object as PhotoSwipe, and supports such options:
+ *
+ * gallery - Element | Element[] | NodeList | string selector for the gallery element
+ * children - Element | Element[] | NodeList | string selector for the gallery children
+ *
+ */
+declare class PhotoSwipeLightbox extends PhotoSwipeBase {
+    /**
+     * @param {PhotoSwipeOptions} [options]
+     */
+    constructor(options?: Partial<import("../photoswipe.js").PreparedPhotoSwipeOptions> | undefined);
+    /** @type {PhotoSwipeOptions} */
+    options: Partial<import("../photoswipe.js").PreparedPhotoSwipeOptions>;
+    _uid: number;
+    shouldOpen: boolean;
+    /**
+     * @private
+     * @type {Content | undefined}
+     */
+    private _preloadedContent;
+    /**
+     * @param {MouseEvent} e
+     */
+    onThumbnailsClick(e: MouseEvent): void;
+    /**
+     * Initialize lightbox, should be called only once.
+     * It's not included in the main constructor, so you may bind events before it.
+     */
+    init(): void;
+    /**
+     * Get index of gallery item that was clicked.
+     *
+     * @param {MouseEvent} e click event
+     * @returns {number}
+     */
+    getClickedIndex(e: MouseEvent): number;
+    /**
+     * Load and open PhotoSwipe
+     *
+     * @param {number} index
+     * @param {DataSource} dataSource
+     * @param {Point | null} [initialPoint]
+     * @returns {boolean}
+     */
+    loadAndOpen(index: number, dataSource: DataSource, initialPoint?: import("../photoswipe.js").Point | null | undefined): boolean;
+    /**
+     * Load the main module and the slide content by index
+     *
+     * @param {number} index
+     * @param {DataSource} [dataSource]
+     */
+    preload(index: number, dataSource?: import("../photoswipe.js").DataSource | undefined): void;
+    /**
+     * @private
+     * @param {Type<PhotoSwipe> | { default: Type<PhotoSwipe> }} module
+     * @param {number} uid
+     */
+    private _openPhotoswipe;
+    /**
+     * Unbinds all events, closes PhotoSwipe if it's open.
+     */
+    destroy(): void;
+}
+import PhotoSwipeBase from "../core/base.js";

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/main-scroll.d.ts

@@ -0,0 +1,90 @@
+export default MainScroll;
+export type PhotoSwipe = import('./photoswipe.js').default;
+export type Slide = import('./slide/slide.js').default;
+export type ItemHolder = {
+    el: HTMLDivElement;
+    slide?: Slide;
+};
+/**
+ * Handles movement of the main scrolling container
+ * (for example, it repositions when user swipes left or right).
+ *
+ * Also stores its state.
+ */
+declare class MainScroll {
+    /**
+     * @param {PhotoSwipe} pswp
+     */
+    constructor(pswp: PhotoSwipe);
+    pswp: import("./photoswipe.js").default;
+    x: number;
+    slideWidth: number;
+    /** @private */
+    private _currPositionIndex;
+    /** @private */
+    private _prevPositionIndex;
+    /** @private */
+    private _containerShiftIndex;
+    /** @type {ItemHolder[]} */
+    itemHolders: ItemHolder[];
+    /**
+     * Position the scroller and slide containers
+     * according to viewport size.
+     *
+     * @param {boolean} [resizeSlides] Whether slides content should resized
+     */
+    resize(resizeSlides?: boolean | undefined): void;
+    /**
+     * Reset X position of the main scroller to zero
+     */
+    resetPosition(): void;
+    /**
+     * Create and append array of three items
+     * that hold data about slides in DOM
+     */
+    appendHolders(): void;
+    /**
+     * Whether the main scroll can be horizontally swiped to the next or previous slide.
+     * @returns {boolean}
+     */
+    canBeSwiped(): boolean;
+    /**
+     * Move main scroll by X amount of slides.
+     * For example:
+     *   `-1` will move to the previous slide,
+     *    `0` will reset the scroll position of the current slide,
+     *    `3` will move three slides forward
+     *
+     * If loop option is enabled - index will be automatically looped too,
+     * (for example `-1` will move to the last slide of the gallery).
+     *
+     * @param {number} diff
+     * @param {boolean} [animate]
+     * @param {number} [velocityX]
+     * @returns {boolean} whether index was changed or not
+     */
+    moveIndexBy(diff: number, animate?: boolean | undefined, velocityX?: number | undefined): boolean;
+    /**
+     * X position of the main scroll for the current slide
+     * (ignores position during dragging)
+     * @returns {number}
+     */
+    getCurrSlideX(): number;
+    /**
+     * Whether scroll position is shifted.
+     * For example, it will return true if the scroll is being dragged or animated.
+     * @returns {boolean}
+     */
+    isShifted(): boolean;
+    /**
+     * Update slides X positions and set their content
+     */
+    updateCurrItem(): void;
+    /**
+     * Move the X position of the main scroll container
+     *
+     * @param {number} x
+     * @param {boolean} [dragging]
+     */
+    moveTo(x: number, dragging?: boolean | undefined): void;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/opener.d.ts

@@ -0,0 +1,87 @@
+export default Opener;
+export type PhotoSwipe = import('./photoswipe.js').default;
+export type Bounds = import('./slide/get-thumb-bounds.js').Bounds;
+export type AnimationProps = import('./util/animations.js').AnimationProps;
+/**
+ * Manages opening and closing transitions of the PhotoSwipe.
+ *
+ * It can perform zoom, fade or no transition.
+ */
+declare class Opener {
+    /**
+     * @param {PhotoSwipe} pswp
+     */
+    constructor(pswp: PhotoSwipe);
+    pswp: import("./photoswipe.js").default;
+    isClosed: boolean;
+    isOpen: boolean;
+    isClosing: boolean;
+    isOpening: boolean;
+    /**
+     * @private
+     * @type {number | false | undefined}
+     */
+    private _duration;
+    /** @private */
+    private _useAnimation;
+    /** @private */
+    private _croppedZoom;
+    /** @private */
+    private _animateRootOpacity;
+    /** @private */
+    private _animateBgOpacity;
+    /**
+     * @private
+     * @type { HTMLDivElement | HTMLImageElement | null | undefined }
+     */
+    private _placeholder;
+    /**
+     * @private
+     * @type { HTMLDivElement | undefined }
+     */
+    private _opacityElement;
+    /**
+     * @private
+     * @type { HTMLDivElement | undefined }
+     */
+    private _cropContainer1;
+    /**
+     * @private
+     * @type { HTMLElement | null | undefined }
+     */
+    private _cropContainer2;
+    /**
+     * @private
+     * @type {Bounds | undefined}
+     */
+    private _thumbBounds;
+    /** @private */
+    private _prepareOpen;
+    open(): void;
+    close(): void;
+    /** @private */
+    private _applyStartProps;
+    _animateZoom: boolean | undefined;
+    /** @private */
+    private _start;
+    /** @private */
+    private _initiate;
+    /** @private */
+    private _onAnimationComplete;
+    /** @private */
+    private _animateToOpenState;
+    /** @private */
+    private _animateToClosedState;
+    /**
+     * @private
+     * @param {boolean} [animate]
+     */
+    private _setClosedStateZoomPan;
+    /**
+     * @private
+     * @param {HTMLElement} target
+     * @param {'transform' | 'opacity'} prop
+     * @param {string} propValue
+     */
+    private _animateTo;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/photoswipe.d.ts

@@ -0,0 +1,435 @@
+export default PhotoSwipe;
+/**
+ * <T>
+ */
+export type Type<T> = import('./types.js').Type<T>;
+export type SlideData = import('./slide/slide.js').SlideData;
+export type ZoomLevelOption = import('./slide/zoom-level.js').ZoomLevelOption;
+export type UIElementData = import('./ui/ui-element.js').UIElementData;
+export type ItemHolder = import('./main-scroll.js').ItemHolder;
+export type PhotoSwipeEventsMap = import('./core/eventable.js').PhotoSwipeEventsMap;
+export type PhotoSwipeFiltersMap = import('./core/eventable.js').PhotoSwipeFiltersMap;
+export type Bounds = import('./slide/get-thumb-bounds').Bounds;
+/**
+ * <T>
+ */
+export type EventCallback<T> = import('./core/eventable.js').EventCallback<T>;
+/**
+ * <T>
+ */
+export type AugmentedEvent<T> = import('./core/eventable.js').AugmentedEvent<T>;
+export type Point = {
+    x: number;
+    y: number;
+    id?: string | number;
+};
+export type Padding = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export type DataSourceArray = SlideData[];
+export type DataSourceObject = {
+    gallery: HTMLElement;
+    items?: HTMLElement[];
+};
+export type DataSource = import("./slide/slide.js").SlideData[] | DataSourceObject;
+export type ActionFn = (point: Point, originalEvent: PointerEvent) => void;
+export type ActionType = 'close' | 'next' | 'zoom' | 'zoom-or-close' | 'toggle-controls';
+export type PhotoSwipeModule = Type<PhotoSwipe> | {
+    default: Type<PhotoSwipe>;
+};
+export type PhotoSwipeModuleOption = PhotoSwipeModule | Promise<PhotoSwipeModule> | (() => Promise<PhotoSwipeModule>);
+export type ElementProvider = string | NodeListOf<HTMLElement> | HTMLElement[] | HTMLElement;
+/**
+ * https://photoswipe.com/options/
+ */
+export type PhotoSwipeOptions = Partial<PreparedPhotoSwipeOptions>;
+export type PreparedPhotoSwipeOptions = {
+    /**
+     * Pass an array of any items via dataSource option. Its length will determine amount of slides
+     * (which may be modified further from numItems event).
+     *
+     * Each item should contain data that you need to generate slide
+     * (for image slide it would be src (image URL), width (image width), height, srcset, alt).
+     *
+     * If these properties are not present in your initial array, you may "pre-parse" each item from itemData filter.
+     */
+    dataSource?: DataSource | undefined;
+    /**
+     * Background backdrop opacity, always define it via this option and not via CSS rgba color.
+     */
+    bgOpacity: number;
+    /**
+     * Spacing between slides. Defined as ratio relative to the viewport width (0.1 = 10% of viewport).
+     */
+    spacing: number;
+    /**
+     * Allow swipe navigation to the next slide when the current slide is zoomed. Does not apply to mouse events.
+     */
+    allowPanToNext: boolean;
+    /**
+     * If set to true you'll be able to swipe from the last to the first image.
+     * Option is always false when there are less than 3 slides.
+     */
+    loop: boolean;
+    /**
+     * By default PhotoSwipe zooms image with ctrl-wheel, if you enable this option - image will zoom just via wheel.
+     */
+    wheelToZoom?: boolean | undefined;
+    /**
+     * Pinch touch gesture to close the gallery.
+     */
+    pinchToClose: boolean;
+    /**
+     * Vertical drag gesture to close the PhotoSwipe.
+     */
+    closeOnVerticalDrag: boolean;
+    /**
+     * Slide area padding (in pixels).
+     */
+    padding?: Padding | undefined;
+    /**
+     * The option is checked frequently, so make sure it's performant. Overrides padding option if defined. For example:
+     */
+    paddingFn?: ((viewportSize: Point, itemData: SlideData, index: number) => Padding) | undefined;
+    /**
+     * Transition duration in milliseconds, can be 0.
+     */
+    hideAnimationDuration: number | false;
+    /**
+     * Transition duration in milliseconds, can be 0.
+     */
+    showAnimationDuration: number | false;
+    /**
+     * Transition duration in milliseconds, can be 0.
+     */
+    zoomAnimationDuration: number | false;
+    /**
+     * String, 'cubic-bezier(.4,0,.22,1)'. CSS easing function for open/close/zoom transitions.
+     */
+    easing: string;
+    /**
+     * Esc key to close.
+     */
+    escKey: boolean;
+    /**
+     * Left/right arrow keys for navigation.
+     */
+    arrowKeys: boolean;
+    /**
+     * Restore focus the last active element after PhotoSwipe is closed.
+     */
+    returnFocus: boolean;
+    /**
+     * If image is not zoomable (for example, smaller than viewport) it can be closed by clicking on it.
+     */
+    clickToCloseNonZoomable: boolean;
+    /**
+     * Refer to click and tap actions page.
+     */
+    imageClickAction: ActionType | ActionFn | false;
+    /**
+     * Refer to click and tap actions page.
+     */
+    bgClickAction: ActionType | ActionFn | false;
+    /**
+     * Refer to click and tap actions page.
+     */
+    tapAction: ActionType | ActionFn | false;
+    /**
+     * Refer to click and tap actions page.
+     */
+    doubleTapAction: ActionType | ActionFn | false;
+    /**
+     * Delay before the loading indicator will be displayed,
+     * if image is loaded during it - the indicator will not be displayed at all. Can be zero.
+     */
+    preloaderDelay: number;
+    /**
+     * Used for slide count indicator ("1 of 10 ").
+     */
+    indexIndicatorSep: string;
+    /**
+     * A function that should return slide viewport width and height, in format {x: 100, y: 100}.
+     */
+    getViewportSizeFn?: ((options: PhotoSwipeOptions, pswp: PhotoSwipeBase) => Point) | undefined;
+    /**
+     * Message to display when the image wasn't able to load. If you need to display HTML - use contentErrorElement filter.
+     */
+    errorMsg: string;
+    /**
+     * Lazy loading of nearby slides based on direction of movement. Should be an array with two integers,
+     * first one - number of items to preload before the current image, second one - after the current image.
+     * Two nearby images are always loaded.
+     */
+    preload: [number, number];
+    /**
+     * Class that will be added to the root element of PhotoSwipe, may contain multiple separated by space.
+     * Example on Styling page.
+     */
+    mainClass?: string | undefined;
+    /**
+     * Element to which PhotoSwipe dialog will be appended when it opens.
+     */
+    appendToEl?: HTMLElement | undefined;
+    /**
+     * Maximum width of image to animate, if initial rendered image width
+     * is larger than this value - the opening/closing transition will be automatically disabled.
+     */
+    maxWidthToAnimate: number;
+    /**
+     * Translating
+     */
+    closeTitle?: string | undefined;
+    /**
+     * Translating
+     */
+    zoomTitle?: string | undefined;
+    /**
+     * Translating
+     */
+    arrowPrevTitle?: string | undefined;
+    /**
+     * Translating
+     */
+    arrowNextTitle?: string | undefined;
+    /**
+     * To adjust opening or closing transition type use lightbox option `showHideAnimationType` (`String`).
+     * It supports three values - `zoom` (default), `fade` (default if there is no thumbnail) and `none`.
+     *
+     * Animations are automatically disabled if user `(prefers-reduced-motion: reduce)`.
+     */
+    showHideAnimationType?: "none" | "zoom" | "fade" | undefined;
+    /**
+     * Defines start slide index.
+     */
+    index: number;
+    getClickedIndexFn?: ((e: MouseEvent) => number) | undefined;
+    arrowPrev?: boolean | undefined;
+    arrowNext?: boolean | undefined;
+    zoom?: boolean | undefined;
+    close?: boolean | undefined;
+    counter?: boolean | undefined;
+    arrowPrevSVG?: string | undefined;
+    arrowNextSVG?: string | undefined;
+    zoomSVG?: string | undefined;
+    closeSVG?: string | undefined;
+    counterSVG?: string | undefined;
+    counterTitle?: string | undefined;
+    initialZoomLevel?: import("./slide/zoom-level.js").ZoomLevelOption | undefined;
+    secondaryZoomLevel?: import("./slide/zoom-level.js").ZoomLevelOption | undefined;
+    maxZoomLevel?: import("./slide/zoom-level.js").ZoomLevelOption | undefined;
+    mouseMovePan?: boolean | undefined;
+    initialPointerPos?: Point | null | undefined;
+    showHideOpacity?: boolean | undefined;
+    pswpModule?: PhotoSwipeModuleOption | undefined;
+    openPromise?: (() => Promise<any>) | undefined;
+    preloadFirstSlide?: boolean | undefined;
+    gallery?: ElementProvider | undefined;
+    gallerySelector?: string | undefined;
+    children?: ElementProvider | undefined;
+    childSelector?: string | undefined;
+    thumbSelector?: string | false | undefined;
+};
+/**
+ * PhotoSwipe Core
+ */
+declare class PhotoSwipe extends PhotoSwipeBase {
+    /**
+     * @param {PhotoSwipeOptions} [options]
+     */
+    constructor(options?: Partial<PreparedPhotoSwipeOptions> | undefined);
+    options: PreparedPhotoSwipeOptions;
+    /**
+     * offset of viewport relative to document
+     *
+     * @type {Point}
+     */
+    offset: Point;
+    /**
+     * @type {Point}
+     * @private
+     */
+    private _prevViewportSize;
+    /**
+     * Size of scrollable PhotoSwipe viewport
+     *
+     * @type {Point}
+     */
+    viewportSize: Point;
+    /**
+     * background (backdrop) opacity
+     */
+    bgOpacity: number;
+    currIndex: number;
+    potentialIndex: number;
+    isOpen: boolean;
+    isDestroying: boolean;
+    hasMouse: boolean;
+    /**
+     * @private
+     * @type {SlideData}
+     */
+    private _initialItemData;
+    /** @type {Bounds | undefined} */
+    _initialThumbBounds: Bounds | undefined;
+    /** @type {HTMLDivElement | undefined} */
+    topBar: HTMLDivElement | undefined;
+    /** @type {HTMLDivElement | undefined} */
+    element: HTMLDivElement | undefined;
+    /** @type {HTMLDivElement | undefined} */
+    template: HTMLDivElement | undefined;
+    /** @type {HTMLDivElement | undefined} */
+    container: HTMLDivElement | undefined;
+    /** @type {HTMLElement | undefined} */
+    scrollWrap: HTMLElement | undefined;
+    /** @type {Slide | undefined} */
+    currSlide: Slide | undefined;
+    events: DOMEvents;
+    animations: Animations;
+    mainScroll: MainScroll;
+    gestures: Gestures;
+    opener: Opener;
+    keyboard: Keyboard;
+    contentLoader: ContentLoader;
+    /** @returns {boolean} */
+    init(): boolean;
+    scrollWheel: ScrollWheel | undefined;
+    /**
+     * Get looped slide index
+     * (for example, -1 will return the last slide)
+     *
+     * @param {number} index
+     * @returns {number}
+     */
+    getLoopedIndex(index: number): number;
+    appendHeavy(): void;
+    /**
+     * Change the slide
+     * @param {number} index New index
+     */
+    goTo(index: number): void;
+    /**
+     * Go to the next slide.
+     */
+    next(): void;
+    /**
+     * Go to the previous slide.
+     */
+    prev(): void;
+    /**
+     * @see slide/slide.js zoomTo
+     *
+     * @param {Parameters<Slide['zoomTo']>} args
+     */
+    zoomTo(destZoomLevel: number, centerPoint?: Point | undefined, transitionDuration?: number | false | undefined, ignoreBounds?: boolean | undefined): void;
+    /**
+     * @see slide/slide.js toggleZoom
+     */
+    toggleZoom(): void;
+    /**
+     * Close the gallery.
+     * After closing transition ends - destroy it
+     */
+    close(): void;
+    /**
+     * Destroys the gallery:
+     * - instantly closes the gallery
+     * - unbinds events,
+     * - cleans intervals and timeouts
+     * - removes elements from DOM
+     */
+    destroy(): void;
+    /**
+     * Refresh/reload content of a slide by its index
+     *
+     * @param {number} slideIndex
+     */
+    refreshSlideContent(slideIndex: number): void;
+    /**
+     * Set slide content
+     *
+     * @param {ItemHolder} holder mainScroll.itemHolders array item
+     * @param {number} index Slide index
+     * @param {boolean} [force] If content should be set even if index wasn't changed
+     */
+    setContent(holder: ItemHolder, index: number, force?: boolean | undefined): void;
+    /** @returns {Point} */
+    getViewportCenterPoint(): Point;
+    /**
+     * Update size of all elements.
+     * Executed on init and on page resize.
+     *
+     * @param {boolean} [force] Update size even if size of viewport was not changed.
+     */
+    updateSize(force?: boolean | undefined): void;
+    /**
+     * @param {number} opacity
+     */
+    applyBgOpacity(opacity: number): void;
+    /**
+     * Whether mouse is detected
+     */
+    mouseDetected(): void;
+    /**
+     * Page resize event handler
+     *
+     * @private
+     */
+    private _handlePageResize;
+    /**
+     * Page scroll offset is used
+     * to get correct coordinates
+     * relative to PhotoSwipe viewport.
+     *
+     * @private
+     */
+    private _updatePageScrollOffset;
+    /**
+     * @param {number} x
+     * @param {number} y
+     */
+    setScrollOffset(x: number, y: number): void;
+    /**
+     * Create main HTML structure of PhotoSwipe,
+     * and add it to DOM
+     *
+     * @private
+     */
+    private _createMainStructure;
+    bg: HTMLDivElement | undefined;
+    ui: UI | undefined;
+    /**
+     * Get position and dimensions of small thumbnail
+     *   {x:,y:,w:}
+     *
+     * Height is optional (calculated based on the large image)
+     *
+     * @returns {Bounds | undefined}
+     */
+    getThumbBounds(): Bounds | undefined;
+    /**
+     * If the PhotoSwipe can have continuous loop
+     * @returns Boolean
+     */
+    canLoop(): boolean;
+    /**
+     * @private
+     * @param {PhotoSwipeOptions} options
+     * @returns {PreparedPhotoSwipeOptions}
+     */
+    private _prepareOptions;
+}
+import PhotoSwipeBase from "./core/base.js";
+import Slide from "./slide/slide.js";
+import DOMEvents from "./util/dom-events.js";
+import Animations from "./util/animations.js";
+import MainScroll from "./main-scroll.js";
+import Gestures from "./gestures/gestures.js";
+import Opener from "./opener.js";
+import Keyboard from "./keyboard.js";
+import ContentLoader from "./slide/loader.js";
+import ScrollWheel from "./scroll-wheel.js";
+import UI from "./ui/ui.js";

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/scroll-wheel.d.ts

@@ -0,0 +1,19 @@
+export default ScrollWheel;
+export type PhotoSwipe = import('./photoswipe.js').default;
+/** @typedef {import('./photoswipe.js').default} PhotoSwipe */
+/**
+ * Handles scroll wheel.
+ * Can pan and zoom current slide image.
+ */
+declare class ScrollWheel {
+    /**
+     * @param {PhotoSwipe} pswp
+     */
+    constructor(pswp: PhotoSwipe);
+    pswp: import("./photoswipe.js").default;
+    /**
+     * @private
+     * @param {WheelEvent} e
+     */
+    private _onWheel;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/slide/content.d.ts

@@ -0,0 +1,134 @@
+export default Content;
+export type Slide = import('./slide.js').default;
+export type SlideData = import('./slide.js').SlideData;
+export type PhotoSwipeBase = import('../core/base.js').default;
+export type LoadState = import('../util/util.js').LoadState;
+/** @typedef {import('./slide.js').default} Slide */
+/** @typedef {import('./slide.js').SlideData} SlideData */
+/** @typedef {import('../core/base.js').default} PhotoSwipeBase */
+/** @typedef {import('../util/util.js').LoadState} LoadState */
+declare class Content {
+    /**
+     * @param {SlideData} itemData Slide data
+     * @param {PhotoSwipeBase} instance PhotoSwipe or PhotoSwipeLightbox instance
+     * @param {number} index
+     */
+    constructor(itemData: SlideData, instance: PhotoSwipeBase, index: number);
+    instance: import("../core/base.js").default;
+    data: import("./slide.js").SlideData;
+    index: number;
+    /** @type {HTMLImageElement | HTMLDivElement | undefined} */
+    element: HTMLImageElement | HTMLDivElement | undefined;
+    /** @type {Placeholder | undefined} */
+    placeholder: Placeholder | undefined;
+    /** @type {Slide | undefined} */
+    slide: Slide | undefined;
+    displayedImageWidth: number;
+    displayedImageHeight: number;
+    width: number;
+    height: number;
+    isAttached: boolean;
+    hasSlide: boolean;
+    isDecoding: boolean;
+    /** @type {LoadState} */
+    state: LoadState;
+    type: string;
+    removePlaceholder(): void;
+    /**
+     * Preload content
+     *
+     * @param {boolean} isLazy
+     * @param {boolean} [reload]
+     */
+    load(isLazy: boolean, reload?: boolean | undefined): void;
+    /**
+     * Preload image
+     *
+     * @param {boolean} isLazy
+     */
+    loadImage(isLazy: boolean): void;
+    /**
+     * Assign slide to content
+     *
+     * @param {Slide} slide
+     */
+    setSlide(slide: Slide): void;
+    /**
+     * Content load success handler
+     */
+    onLoaded(): void;
+    /**
+     * Content load error handler
+     */
+    onError(): void;
+    /**
+     * @returns {Boolean} If the content is currently loading
+     */
+    isLoading(): boolean;
+    /**
+     * @returns {Boolean} If the content is in error state
+     */
+    isError(): boolean;
+    /**
+     * @returns {boolean} If the content is image
+     */
+    isImageContent(): boolean;
+    /**
+     * Update content size
+     *
+     * @param {Number} width
+     * @param {Number} height
+     */
+    setDisplayedSize(width: number, height: number): void;
+    /**
+     * @returns {boolean} If the content can be zoomed
+     */
+    isZoomable(): boolean;
+    /**
+     * Update image srcset sizes attribute based on width and height
+     */
+    updateSrcsetSizes(): void;
+    /**
+     * @returns {boolean} If content should use a placeholder (from msrc by default)
+     */
+    usePlaceholder(): boolean;
+    /**
+     * Preload content with lazy-loading param
+     */
+    lazyLoad(): void;
+    /**
+     * @returns {boolean} If placeholder should be kept after content is loaded
+     */
+    keepPlaceholder(): boolean;
+    /**
+     * Destroy the content
+     */
+    destroy(): void;
+    /**
+     * Display error message
+     */
+    displayError(): void;
+    /**
+     * Append the content
+     */
+    append(): void;
+    /**
+     * Activate the slide,
+     * active slide is generally the current one,
+     * meaning the user can see it.
+     */
+    activate(): void;
+    /**
+     * Deactivate the content
+     */
+    deactivate(): void;
+    /**
+     * Remove the content from DOM
+     */
+    remove(): void;
+    /**
+     * Append the image content to slide container
+     */
+    appendImage(): void;
+}
+import Placeholder from "./placeholder.js";

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/slide/get-thumb-bounds.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Get dimensions of thumbnail image
+ * (click on which opens photoswipe or closes photoswipe to)
+ *
+ * @param {number} index
+ * @param {SlideData} itemData
+ * @param {PhotoSwipe} instance PhotoSwipe instance
+ * @returns {Bounds | undefined}
+ */
+export function getThumbBounds(index: number, itemData: SlideData, instance: PhotoSwipe): Bounds | undefined;
+export type SlideData = import('./slide.js').SlideData;
+export type PhotoSwipe = import('../photoswipe.js').default;
+export type Bounds = {
+    x: number;
+    y: number;
+    w: number;
+    innerRect?: {
+        w: number;
+        h: number;
+        x: number;
+        y: number;
+    };
+};

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/slide/loader.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Lazy-load an image
+ * This function is used both by Lightbox and PhotoSwipe core,
+ * thus it can be called before dialog is opened.
+ *
+ * @param {SlideData} itemData Data about the slide
+ * @param {PhotoSwipeBase} instance PhotoSwipe or PhotoSwipeLightbox instance
+ * @param {number} index
+ * @returns {Content} Image that is being decoded or false.
+ */
+export function lazyLoadData(itemData: SlideData, instance: PhotoSwipeBase, index: number): Content;
+/**
+ * Lazy-loads specific slide.
+ * This function is used both by Lightbox and PhotoSwipe core,
+ * thus it can be called before dialog is opened.
+ *
+ * By default, it loads image based on viewport size and initial zoom level.
+ *
+ * @param {number} index Slide index
+ * @param {PhotoSwipeBase} instance PhotoSwipe or PhotoSwipeLightbox eventable instance
+ * @returns {Content | undefined}
+ */
+export function lazyLoadSlide(index: number, instance: PhotoSwipeBase): Content | undefined;
+export default ContentLoader;
+export type Content = import('./content.js').default;
+export type Slide = import('./slide.js').default;
+export type SlideData = import('./slide.js').SlideData;
+export type PhotoSwipeBase = import('../core/base.js').default;
+export type PhotoSwipe = import('../photoswipe.js').default;
+declare class ContentLoader {
+    /**
+     * @param {PhotoSwipe} pswp
+     */
+    constructor(pswp: PhotoSwipe);
+    pswp: import("../photoswipe.js").default;
+    limit: number;
+    /** @type {Content[]} */
+    _cachedItems: Content[];
+    /**
+     * Lazy load nearby slides based on `preload` option.
+     *
+     * @param {number} [diff] Difference between slide indexes that was changed recently, or 0.
+     */
+    updateLazy(diff?: number | undefined): void;
+    /**
+     * @param {number} initialIndex
+     */
+    loadSlideByIndex(initialIndex: number): void;
+    /**
+     * @param {Slide} slide
+     * @returns {Content}
+     */
+    getContentBySlide(slide: Slide): Content;
+    /**
+     * @param {Content} content
+     */
+    addToCache(content: Content): void;
+    /**
+     * Removes an image from cache, does not destroy() it, just removes.
+     *
+     * @param {number} index
+     */
+    removeByIndex(index: number): void;
+    /**
+     * @param {number} index
+     * @returns {Content | undefined}
+     */
+    getContentByIndex(index: number): Content | undefined;
+    destroy(): void;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/slide/pan-bounds.d.ts

@@ -0,0 +1,51 @@
+export default PanBounds;
+export type Slide = import('./slide.js').default;
+export type Point = Record<Axis, number>;
+export type Axis = 'x' | 'y';
+/** @typedef {import('./slide.js').default} Slide */
+/** @typedef {Record<Axis, number>} Point */
+/** @typedef {'x' | 'y'} Axis */
+/**
+ * Calculates minimum, maximum and initial (center) bounds of a slide
+ */
+declare class PanBounds {
+    /**
+     * @param {Slide} slide
+     */
+    constructor(slide: Slide);
+    slide: import("./slide.js").default;
+    currZoomLevel: number;
+    center: {
+        x: number;
+        y: number;
+    };
+    max: {
+        x: number;
+        y: number;
+    };
+    min: {
+        x: number;
+        y: number;
+    };
+    /**
+     * _getItemBounds
+     *
+     * @param {number} currZoomLevel
+     */
+    update(currZoomLevel: number): void;
+    /**
+     * _calculateItemBoundsForAxis
+     *
+     * @param {Axis} axis
+     */
+    _updateAxis(axis: Axis): void;
+    reset(): void;
+    /**
+     * Correct pan position if it's beyond the bounds
+     *
+     * @param {Axis} axis x or y
+     * @param {number} panOffset
+     * @returns {number}
+     */
+    correctPan(axis: Axis, panOffset: number): number;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/slide/placeholder.d.ts

@@ -0,0 +1,16 @@
+export default Placeholder;
+declare class Placeholder {
+    /**
+     * @param {string | false} imageSrc
+     * @param {HTMLElement} container
+     */
+    constructor(imageSrc: string | false, container: HTMLElement);
+    /** @type {HTMLImageElement | HTMLDivElement | null} */
+    element: HTMLImageElement | HTMLDivElement | null;
+    /**
+     * @param {number} width
+     * @param {number} height
+     */
+    setDisplayedSize(width: number, height: number): void;
+    destroy(): void;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/slide/slide.d.ts

@@ -0,0 +1,230 @@
+export default Slide;
+export type PhotoSwipe = import('../photoswipe.js').default;
+export type Point = import('../photoswipe.js').Point;
+export type SlideData = _SlideData & Record<string, any>;
+export type _SlideData = {
+    /**
+     * thumbnail element
+     */
+    element?: HTMLElement | undefined;
+    /**
+     * image URL
+     */
+    src?: string | undefined;
+    /**
+     * image srcset
+     */
+    srcset?: string | undefined;
+    /**
+     * image width (deprecated)
+     */
+    w?: number | undefined;
+    /**
+     * image height (deprecated)
+     */
+    h?: number | undefined;
+    /**
+     * image width
+     */
+    width?: number | undefined;
+    /**
+     * image height
+     */
+    height?: number | undefined;
+    /**
+     * placeholder image URL that's displayed before large image is loaded
+     */
+    msrc?: string | undefined;
+    /**
+     * image alt text
+     */
+    alt?: string | undefined;
+    /**
+     * whether thumbnail is cropped client-side or not
+     */
+    thumbCropped?: boolean | undefined;
+    /**
+     * html content of a slide
+     */
+    html?: string | undefined;
+    /**
+     * slide type
+     */
+    type?: string | undefined;
+};
+/**
+ * Renders and allows to control a single slide
+ */
+declare class Slide {
+    /**
+     * @param {SlideData} data
+     * @param {number} index
+     * @param {PhotoSwipe} pswp
+     */
+    constructor(data: SlideData, index: number, pswp: PhotoSwipe);
+    data: SlideData;
+    index: number;
+    pswp: import("../photoswipe.js").default;
+    isActive: boolean;
+    currentResolution: number;
+    /** @type {Point} */
+    panAreaSize: Point;
+    /** @type {Point} */
+    pan: Point;
+    isFirstSlide: boolean;
+    zoomLevels: ZoomLevel;
+    content: import("./content.js").default;
+    container: HTMLDivElement;
+    /** @type {HTMLElement | null} */
+    holderElement: HTMLElement | null;
+    currZoomLevel: number;
+    /** @type {number} */
+    width: number;
+    /** @type {number} */
+    height: number;
+    heavyAppended: boolean;
+    bounds: PanBounds;
+    prevDisplayedWidth: number;
+    prevDisplayedHeight: number;
+    /**
+     * If this slide is active/current/visible
+     *
+     * @param {boolean} isActive
+     */
+    setIsActive(isActive: boolean): void;
+    /**
+     * Appends slide content to DOM
+     *
+     * @param {HTMLElement} holderElement
+     */
+    append(holderElement: HTMLElement): void;
+    load(): void;
+    /**
+     * Append "heavy" DOM elements
+     *
+     * This may depend on a type of slide,
+     * but generally these are large images.
+     */
+    appendHeavy(): void;
+    /**
+     * Triggered when this slide is active (selected).
+     *
+     * If it's part of opening/closing transition -
+     * activate() will trigger after the transition is ended.
+     */
+    activate(): void;
+    /**
+     * Triggered when this slide becomes inactive.
+     *
+     * Slide can become inactive only after it was active.
+     */
+    deactivate(): void;
+    /**
+     * The slide should destroy itself, it will never be used again.
+     * (unbind all events and destroy internal components)
+     */
+    destroy(): void;
+    resize(): void;
+    /**
+     * Apply size to current slide content,
+     * based on the current resolution and scale.
+     *
+     * @param {boolean} [force] if size should be updated even if dimensions weren't changed
+     */
+    updateContentSize(force?: boolean | undefined): void;
+    /**
+     * @param {number} width
+     * @param {number} height
+     */
+    sizeChanged(width: number, height: number): boolean;
+    /** @returns {HTMLImageElement | HTMLDivElement | null | undefined} */
+    getPlaceholderElement(): HTMLImageElement | HTMLDivElement | null | undefined;
+    /**
+     * Zoom current slide image to...
+     *
+     * @param {number} destZoomLevel Destination zoom level.
+     * @param {Point} [centerPoint]
+     * Transform origin center point, or false if viewport center should be used.
+     * @param {number | false} [transitionDuration] Transition duration, may be set to 0.
+     * @param {boolean} [ignoreBounds] Minimum and maximum zoom levels will be ignored.
+     */
+    zoomTo(destZoomLevel: number, centerPoint?: import("../photoswipe.js").Point | undefined, transitionDuration?: number | false | undefined, ignoreBounds?: boolean | undefined): void;
+    /**
+     * @param {Point} [centerPoint]
+     */
+    toggleZoom(centerPoint?: import("../photoswipe.js").Point | undefined): void;
+    /**
+     * Updates zoom level property and recalculates new pan bounds,
+     * unlike zoomTo it does not apply transform (use applyCurrentZoomPan)
+     *
+     * @param {number} currZoomLevel
+     */
+    setZoomLevel(currZoomLevel: number): void;
+    /**
+     * Get pan position after zoom at a given `point`.
+     *
+     * Always call setZoomLevel(newZoomLevel) beforehand to recalculate
+     * pan bounds according to the new zoom level.
+     *
+     * @param {'x' | 'y'} axis
+     * @param {Point} [point]
+     * point based on which zoom is performed, usually refers to the current mouse position,
+     * if false - viewport center will be used.
+     * @param {number} [prevZoomLevel] Zoom level before new zoom was applied.
+     * @returns {number}
+     */
+    calculateZoomToPanOffset(axis: 'x' | 'y', point?: import("../photoswipe.js").Point | undefined, prevZoomLevel?: number | undefined): number;
+    /**
+     * Apply pan and keep it within bounds.
+     *
+     * @param {number} panX
+     * @param {number} panY
+     */
+    panTo(panX: number, panY: number): void;
+    /**
+     * If the slide in the current state can be panned by the user
+     * @returns {boolean}
+     */
+    isPannable(): boolean;
+    /**
+     * If the slide can be zoomed
+     * @returns {boolean}
+     */
+    isZoomable(): boolean;
+    /**
+     * Apply transform and scale based on
+     * the current pan position (this.pan) and zoom level (this.currZoomLevel)
+     */
+    applyCurrentZoomPan(): void;
+    zoomAndPanToInitial(): void;
+    /**
+     * Set translate and scale based on current resolution
+     *
+     * @param {number} x
+     * @param {number} y
+     * @param {number} zoom
+     * @private
+     */
+    private _applyZoomTransform;
+    calculateSize(): void;
+    /** @returns {string} */
+    getCurrentTransform(): string;
+    /**
+     * Set resolution and re-render the image.
+     *
+     * For example, if the real image size is 2000x1500,
+     * and resolution is 0.5 - it will be rendered as 1000x750.
+     *
+     * Image with zoom level 2 and resolution 0.5 is
+     * the same as image with zoom level 1 and resolution 1.
+     *
+     * Used to optimize animations and make
+     * sure that browser renders image in the highest quality.
+     * Also used by responsive images to load the correct one.
+     *
+     * @param {number} newResolution
+     */
+    _setResolution(newResolution: number): void;
+}
+import ZoomLevel from "./zoom-level.js";
+import PanBounds from "./pan-bounds.js";

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/slide/zoom-level.d.ts

@@ -0,0 +1,83 @@
+export default ZoomLevel;
+export type PhotoSwipe = import('../photoswipe.js').default;
+export type PhotoSwipeOptions = import('../photoswipe.js').PhotoSwipeOptions;
+export type Point = import('../photoswipe.js').Point;
+export type SlideData = import('../slide/slide.js').SlideData;
+export type ZoomLevelOption = number | "fit" | "fill" | ((zoomLevelObject: ZoomLevel) => number);
+/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
+/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */
+/** @typedef {import('../photoswipe.js').Point} Point */
+/** @typedef {import('../slide/slide.js').SlideData} SlideData */
+/** @typedef {'fit' | 'fill' | number | ((zoomLevelObject: ZoomLevel) => number)} ZoomLevelOption */
+/**
+ * Calculates zoom levels for specific slide.
+ * Depends on viewport size and image size.
+ */
+declare class ZoomLevel {
+    /**
+     * @param {PhotoSwipeOptions} options PhotoSwipe options
+     * @param {SlideData} itemData Slide data
+     * @param {number} index Slide index
+     * @param {PhotoSwipe} [pswp] PhotoSwipe instance, can be undefined if not initialized yet
+     */
+    constructor(options: PhotoSwipeOptions, itemData: SlideData, index: number, pswp?: import("../photoswipe.js").default | undefined);
+    pswp: import("../photoswipe.js").default | undefined;
+    options: Partial<import("../photoswipe.js").PreparedPhotoSwipeOptions>;
+    itemData: import("../slide/slide.js").SlideData;
+    index: number;
+    /** @type { Point | null } */
+    panAreaSize: Point | null;
+    /** @type { Point | null } */
+    elementSize: Point | null;
+    fit: number;
+    fill: number;
+    vFill: number;
+    initial: number;
+    secondary: number;
+    max: number;
+    min: number;
+    /**
+     * Calculate initial, secondary and maximum zoom level for the specified slide.
+     *
+     * It should be called when either image or viewport size changes.
+     *
+     * @param {number} maxWidth
+     * @param {number} maxHeight
+     * @param {Point} panAreaSize
+     */
+    update(maxWidth: number, maxHeight: number, panAreaSize: Point): void;
+    /**
+     * Parses user-defined zoom option.
+     *
+     * @private
+     * @param {'initial' | 'secondary' | 'max'} optionPrefix Zoom level option prefix (initial, secondary, max)
+     * @returns { number | undefined }
+     */
+    private _parseZoomLevelOption;
+    /**
+     * Get zoom level to which image will be zoomed after double-tap gesture,
+     * or when user clicks on zoom icon,
+     * or mouse-click on image itself.
+     * If you return 1 image will be zoomed to its original size.
+     *
+     * @private
+     * @return {number}
+     */
+    private _getSecondary;
+    /**
+     * Get initial image zoom level.
+     *
+     * @private
+     * @return {number}
+     */
+    private _getInitial;
+    /**
+     * Maximum zoom level when user zooms
+     * via zoom/pinch gesture,
+     * via cmd/ctrl-wheel or via trackpad.
+     *
+     * @private
+     * @return {number}
+     */
+    private _getMax;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/types.d.ts

@@ -0,0 +1,7 @@
+export declare type Methods<T> = {
+    [M in keyof T]: T[M] extends (...a: any) => any ? M : never;
+}[keyof T];
+export declare type AddPostfix<T extends string, P extends string> = `${T}${P}`;
+export interface Type<T> extends Function {
+    new (...args: any[]): T;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/ui/button-arrow.d.ts

@@ -0,0 +1,6 @@
+/** @type {UIElementData} */
+export const arrowPrev: UIElementData;
+/** @type {UIElementData} */
+export const arrowNext: UIElementData;
+export type UIElementData = import('./ui-element.js').UIElementData;
+export type PhotoSwipe = import('../photoswipe.js').default;

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/ui/button-close.d.ts

@@ -0,0 +1,3 @@
+export default closeButton;
+/** @type {import('./ui-element.js').UIElementData} UIElementData */
+declare const closeButton: import('./ui-element.js').UIElementData;

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/ui/button-zoom.d.ts

@@ -0,0 +1,3 @@
+export default zoomButton;
+/** @type {import('./ui-element.js').UIElementData} UIElementData */
+declare const zoomButton: import('./ui-element.js').UIElementData;

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/ui/counter-indicator.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('./ui-element.js').UIElementData} UIElementData */
+export const counterIndicator: import('./ui-element.js').UIElementData;

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/ui/loading-indicator.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('./ui-element.js').UIElementData} UIElementData */
+export const loadingIndicator: import('./ui-element.js').UIElementData;

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/ui/ui-element.d.ts

@@ -0,0 +1,34 @@
+export default UIElement;
+export type PhotoSwipe = import('../photoswipe.js').default;
+/**
+ * <T>
+ */
+export type Methods<T> = import('../types.js').Methods<T>;
+export type UIElementMarkupProps = {
+    isCustomSVG?: boolean | undefined;
+    inner: string;
+    outlineID?: string | undefined;
+    size?: string | number | undefined;
+};
+export type UIElementData = {
+    name?: string | undefined;
+    className?: string | undefined;
+    html?: UIElementMarkup | undefined;
+    isButton?: boolean | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+    title?: string | undefined;
+    ariaLabel?: string | undefined;
+    onInit?: ((element: HTMLElement, pswp: PhotoSwipe) => void) | undefined;
+    onClick?: import("../types.js").Methods<import("../photoswipe.js").default> | ((e: MouseEvent, element: HTMLElement, pswp: PhotoSwipe) => void) | undefined;
+    appendTo?: "bar" | "wrapper" | "root" | undefined;
+    order?: number | undefined;
+};
+export type DefaultUIElements = 'arrowPrev' | 'arrowNext' | 'close' | 'zoom' | 'counter';
+export type UIElementMarkup = string | UIElementMarkupProps;
+declare class UIElement {
+    /**
+     * @param {PhotoSwipe} pswp
+     * @param {UIElementData} data
+     */
+    constructor(pswp: PhotoSwipe, data: UIElementData);
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/ui/ui.d.ts

@@ -0,0 +1,35 @@
+export default UI;
+export type PhotoSwipe = import('../photoswipe.js').default;
+export type UIElementData = import('./ui-element.js').UIElementData;
+declare class UI {
+    /**
+     * @param {PhotoSwipe} pswp
+     */
+    constructor(pswp: PhotoSwipe);
+    pswp: import("../photoswipe.js").default;
+    isRegistered: boolean;
+    /** @type {UIElementData[]} */
+    uiElementsData: UIElementData[];
+    /** @type {(UIElement | UIElementData)[]} */
+    items: (UIElement | UIElementData)[];
+    /** @type {() => void} */
+    updatePreloaderVisibility: () => void;
+    /**
+     * @private
+     * @type {number | undefined}
+     */
+    private _lastUpdatedZoomLevel;
+    init(): void;
+    /**
+     * @param {UIElementData} elementData
+     */
+    registerElement(elementData: UIElementData): void;
+    /**
+     * Fired each time zoom or pan position is changed.
+     * Update classes that control visibility of zoom button and cursor icon.
+     *
+     * @private
+     */
+    private _onZoomPanUpdate;
+}
+import UIElement from "./ui-element.js";

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/util/animations.d.ts

@@ -0,0 +1,64 @@
+export default Animations;
+export type CssAnimationProps = import('./css-animation.js').CssAnimationProps;
+export type SpringAnimationProps = import('./spring-animation.js').SpringAnimationProps;
+export type SharedAnimationProps = {
+    name?: string | undefined;
+    isPan?: boolean | undefined;
+    isMainScroll?: boolean | undefined;
+    onComplete?: VoidFunction | undefined;
+    onFinish?: VoidFunction | undefined;
+};
+export type Animation = SpringAnimation | CSSAnimation;
+export type AnimationProps = SpringAnimationProps | CssAnimationProps;
+/** @typedef {import('./css-animation.js').CssAnimationProps} CssAnimationProps */
+/** @typedef {import('./spring-animation.js').SpringAnimationProps} SpringAnimationProps */
+/** @typedef {Object} SharedAnimationProps
+ * @prop {string} [name]
+ * @prop {boolean} [isPan]
+ * @prop {boolean} [isMainScroll]
+ * @prop {VoidFunction} [onComplete]
+ * @prop {VoidFunction} [onFinish]
+ */
+/** @typedef {SpringAnimation | CSSAnimation} Animation */
+/** @typedef {SpringAnimationProps | CssAnimationProps} AnimationProps */
+/**
+ * Manages animations
+ */
+declare class Animations {
+    /** @type {Animation[]} */
+    activeAnimations: Animation[];
+    /**
+     * @param {SpringAnimationProps} props
+     */
+    startSpring(props: SpringAnimationProps): void;
+    /**
+     * @param {CssAnimationProps} props
+     */
+    startTransition(props: CssAnimationProps): void;
+    /**
+     * @private
+     * @param {AnimationProps} props
+     * @param {boolean} [isSpring]
+     * @returns {Animation}
+     */
+    private _start;
+    /**
+     * @param {Animation} animation
+     */
+    stop(animation: Animation): void;
+    stopAll(): void;
+    /**
+     * Stop all pan or zoom transitions
+     */
+    stopAllPan(): void;
+    stopMainScroll(): void;
+    /**
+     * Returns true if main scroll transition is running
+     */
+    /**
+     * Returns true if any pan or zoom transition is running
+     */
+    isPanRunning(): boolean;
+}
+import SpringAnimation from "./spring-animation.js";
+import CSSAnimation from "./css-animation.js";

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/util/css-animation.d.ts

@@ -0,0 +1,51 @@
+export default CSSAnimation;
+export type SharedAnimationProps = import('./animations.js').SharedAnimationProps;
+export type DefaultCssAnimationProps = {
+    target: HTMLElement;
+    duration?: number | undefined;
+    easing?: string | undefined;
+    transform?: string | undefined;
+    opacity?: string | undefined;
+};
+export type CssAnimationProps = SharedAnimationProps & DefaultCssAnimationProps;
+/** @typedef {import('./animations.js').SharedAnimationProps} SharedAnimationProps */
+/** @typedef {Object} DefaultCssAnimationProps
+ *
+ * @prop {HTMLElement} target
+ * @prop {number} [duration]
+ * @prop {string} [easing]
+ * @prop {string} [transform]
+ * @prop {string} [opacity]
+ * */
+/** @typedef {SharedAnimationProps & DefaultCssAnimationProps} CssAnimationProps */
+/**
+ * Runs CSS transition.
+ */
+declare class CSSAnimation {
+    /**
+     * onComplete can be unpredictable, be careful about current state
+     *
+     * @param {CssAnimationProps} props
+     */
+    constructor(props: CssAnimationProps);
+    props: CssAnimationProps;
+    onFinish: VoidFunction;
+    /** @private */
+    private _target;
+    /** @private */
+    private _onComplete;
+    /** @private */
+    private _finished;
+    /**
+     * @private
+     * @param {TransitionEvent} e
+     */
+    private _onTransitionEnd;
+    /** @private */
+    private _helperTimeout;
+    /**
+     * @private
+     */
+    private _finalizeAnimation;
+    destroy(): void;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/util/dom-events.d.ts

@@ -0,0 +1,55 @@
+export default DOMEvents;
+export type PoolItem = {
+    target: HTMLElement | Window | Document | undefined | null;
+    type: string;
+    listener: EventListenerOrEventListenerObject;
+    passive?: boolean | undefined;
+};
+/**
+ * @typedef {Object} PoolItem
+ * @prop {HTMLElement | Window | Document | undefined | null} target
+ * @prop {string} type
+ * @prop {EventListenerOrEventListenerObject} listener
+ * @prop {boolean} [passive]
+ */
+declare class DOMEvents {
+    /**
+     * @type {PoolItem[]}
+     * @private
+     */
+    private _pool;
+    /**
+     * Adds event listeners
+     *
+     * @param {PoolItem['target']} target
+     * @param {PoolItem['type']} type Can be multiple, separated by space.
+     * @param {PoolItem['listener']} listener
+     * @param {PoolItem['passive']} [passive]
+     */
+    add(target: PoolItem['target'], type: PoolItem['type'], listener: PoolItem['listener'], passive?: PoolItem['passive']): void;
+    /**
+     * Removes event listeners
+     *
+     * @param {PoolItem['target']} target
+     * @param {PoolItem['type']} type
+     * @param {PoolItem['listener']} listener
+     * @param {PoolItem['passive']} [passive]
+     */
+    remove(target: PoolItem['target'], type: PoolItem['type'], listener: PoolItem['listener'], passive?: PoolItem['passive']): void;
+    /**
+     * Removes all bound events
+     */
+    removeAll(): void;
+    /**
+     * Adds or removes event
+     *
+     * @private
+     * @param {PoolItem['target']} target
+     * @param {PoolItem['type']} type
+     * @param {PoolItem['listener']} listener
+     * @param {PoolItem['passive']} [passive]
+     * @param {boolean} [unbind] Whether the event should be added or removed
+     * @param {boolean} [skipPool] Whether events pool should be skipped
+     */
+    private _toggleListener;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/util/spring-animation.d.ts

@@ -0,0 +1,33 @@
+export default SpringAnimation;
+export type SharedAnimationProps = import('./animations.js').SharedAnimationProps;
+export type DefaultSpringAnimationProps = {
+    start: number;
+    end: number;
+    velocity: number;
+    dampingRatio?: number | undefined;
+    naturalFrequency?: number | undefined;
+    onUpdate: (end: number) => void;
+};
+export type SpringAnimationProps = SharedAnimationProps & DefaultSpringAnimationProps;
+/** @typedef {import('./animations.js').SharedAnimationProps} SharedAnimationProps */
+/**
+ * @typedef {Object} DefaultSpringAnimationProps
+ *
+ * @prop {number} start
+ * @prop {number} end
+ * @prop {number} velocity
+ * @prop {number} [dampingRatio]
+ * @prop {number} [naturalFrequency]
+ * @prop {(end: number) => void} onUpdate
+ */
+/** @typedef {SharedAnimationProps & DefaultSpringAnimationProps} SpringAnimationProps */
+declare class SpringAnimation {
+    /**
+     * @param {SpringAnimationProps} props
+     */
+    constructor(props: SpringAnimationProps);
+    props: SpringAnimationProps;
+    _raf: number;
+    onFinish: VoidFunction;
+    destroy(): void;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/util/spring-easer.d.ts

@@ -0,0 +1,33 @@
+export default SpringEaser;
+/**
+ * Spring easing helper
+ */
+declare class SpringEaser {
+    /**
+     * @param {number} initialVelocity Initial velocity, px per ms.
+     *
+     * @param {number} [dampingRatio]
+     * Determines how bouncy animation will be.
+     * From 0 to 1, 0 - always overshoot, 1 - do not overshoot.
+     * "overshoot" refers to part of animation that
+     * goes beyond the final value.
+     *
+     * @param {number} [naturalFrequency]
+     * Determines how fast animation will slow down.
+     * The higher value - the stiffer the transition will be,
+     * and the faster it will slow down.
+     * Recommended value from 10 to 50
+     */
+    constructor(initialVelocity: number, dampingRatio?: number | undefined, naturalFrequency?: number | undefined);
+    velocity: number;
+    _dampingRatio: number;
+    _naturalFrequency: number;
+    _dampedFrequency: number;
+    /**
+     * @param {number} deltaPosition Difference between current and end position of the animation
+     * @param {number} deltaTime Frame duration in milliseconds
+     *
+     * @returns {number} Displacement, relative to the end position.
+     */
+    easeFrame(deltaPosition: number, deltaTime: number): number;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/util/util.d.ts

@@ -0,0 +1,138 @@
+/** @typedef {import('../photoswipe.js').Point} Point */
+/**
+ * @template {keyof HTMLElementTagNameMap} T
+ * @param {string} className
+ * @param {T} tagName
+ * @param {Node} [appendToEl]
+ * @returns {HTMLElementTagNameMap[T]}
+ */
+export function createElement<T extends keyof HTMLElementTagNameMap>(className: string, tagName: T, appendToEl?: Node | undefined): HTMLElementTagNameMap[T];
+/**
+ * @param {Point} p1
+ * @param {Point} p2
+ * @returns {Point}
+ */
+export function equalizePoints(p1: Point, p2: Point): Point;
+/**
+ * @param {Point} p
+ */
+export function roundPoint(p: Point): void;
+/**
+ * Returns distance between two points.
+ *
+ * @param {Point} p1
+ * @param {Point} p2
+ * @returns {number}
+ */
+export function getDistanceBetween(p1: Point, p2: Point): number;
+/**
+ * Whether X and Y positions of points are equal
+ *
+ * @param {Point} p1
+ * @param {Point} p2
+ * @returns {boolean}
+ */
+export function pointsEqual(p1: Point, p2: Point): boolean;
+/**
+ * The float result between the min and max values.
+ *
+ * @param {number} val
+ * @param {number} min
+ * @param {number} max
+ * @returns {number}
+ */
+export function clamp(val: number, min: number, max: number): number;
+/**
+ * Get transform string
+ *
+ * @param {number} x
+ * @param {number} [y]
+ * @param {number} [scale]
+ * @returns {string}
+ */
+export function toTransformString(x: number, y?: number | undefined, scale?: number | undefined): string;
+/**
+ * Apply transform:translate(x, y) scale(scale) to element
+ *
+ * @param {HTMLElement} el
+ * @param {number} x
+ * @param {number} [y]
+ * @param {number} [scale]
+ */
+export function setTransform(el: HTMLElement, x: number, y?: number | undefined, scale?: number | undefined): void;
+/**
+ * Apply CSS transition to element
+ *
+ * @param {HTMLElement} el
+ * @param {string} [prop] CSS property to animate
+ * @param {number} [duration] in ms
+ * @param {string} [ease] CSS easing function
+ */
+export function setTransitionStyle(el: HTMLElement, prop?: string | undefined, duration?: number | undefined, ease?: string | undefined): void;
+/**
+ * Apply width and height CSS properties to element
+ *
+ * @param {HTMLElement} el
+ * @param {string | number} w
+ * @param {string | number} h
+ */
+export function setWidthHeight(el: HTMLElement, w: string | number, h: string | number): void;
+/**
+ * @param {HTMLElement} el
+ */
+export function removeTransitionStyle(el: HTMLElement): void;
+/**
+ * @param {HTMLImageElement} img
+ * @returns {Promise<HTMLImageElement | void>}
+ */
+export function decodeImage(img: HTMLImageElement): Promise<HTMLImageElement | void>;
+/**
+ * Check if click or keydown event was dispatched
+ * with a special key or via mouse wheel.
+ *
+ * @param {MouseEvent | KeyboardEvent} e
+ * @returns {boolean}
+ */
+export function specialKeyUsed(e: MouseEvent | KeyboardEvent): boolean;
+/**
+ * Parse `gallery` or `children` options.
+ *
+ * @param {import('../photoswipe.js').ElementProvider} [option]
+ * @param {string} [legacySelector]
+ * @param {HTMLElement | Document} [parent]
+ * @returns HTMLElement[]
+ */
+export function getElementsFromOption(option?: import("../photoswipe.js").ElementProvider | undefined, legacySelector?: string | undefined, parent?: Document | HTMLElement | undefined): HTMLElement[];
+/**
+ * Check if variable is PhotoSwipe class
+ *
+ * @param {any} fn
+ * @returns {boolean}
+ */
+export function isPswpClass(fn: any): boolean;
+/**
+ * Check if browser is Safari
+ *
+ * @returns {boolean}
+ */
+export function isSafari(): boolean;
+/** @typedef {LOAD_STATE[keyof LOAD_STATE]} LoadState */
+/** @type {{ IDLE: 'idle'; LOADING: 'loading'; LOADED: 'loaded'; ERROR: 'error' }} */
+export const LOAD_STATE: {
+    IDLE: 'idle';
+    LOADING: 'loading';
+    LOADED: 'loaded';
+    ERROR: 'error';
+};
+export type Point = import('../photoswipe.js').Point;
+export type LoadState = {
+    IDLE: "idle";
+    LOADING: "loading";
+    LOADED: "loaded";
+    ERROR: "error";
+}[keyof {
+    IDLE: "idle";
+    LOADING: "loading";
+    LOADED: "loaded";
+    ERROR: "error";
+}];

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/types/util/viewport-size.d.ts

@@ -0,0 +1,58 @@
+/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */
+/** @typedef {import('../core/base.js').default} PhotoSwipeBase */
+/** @typedef {import('../photoswipe.js').Point} Point */
+/** @typedef {import('../slide/slide.js').SlideData} SlideData */
+/**
+ * @param {PhotoSwipeOptions} options
+ * @param {PhotoSwipeBase} pswp
+ * @returns {Point}
+ */
+export function getViewportSize(options: PhotoSwipeOptions, pswp: PhotoSwipeBase): Point;
+/**
+ * Parses padding option.
+ * Supported formats:
+ *
+ * // Object
+ * padding: {
+ *  top: 0,
+ *  bottom: 0,
+ *  left: 0,
+ *  right: 0
+ * }
+ *
+ * // A function that returns the object
+ * paddingFn: (viewportSize, itemData, index) => {
+ *  return {
+ *    top: 0,
+ *    bottom: 0,
+ *    left: 0,
+ *    right: 0
+ *  };
+ * }
+ *
+ * // Legacy variant
+ * paddingLeft: 0,
+ * paddingRight: 0,
+ * paddingTop: 0,
+ * paddingBottom: 0,
+ *
+ * @param {'left' | 'top' | 'bottom' | 'right'} prop
+ * @param {PhotoSwipeOptions} options PhotoSwipe options
+ * @param {Point} viewportSize PhotoSwipe viewport size, for example: { x:800, y:600 }
+ * @param {SlideData} itemData Data about the slide
+ * @param {number} index Slide index
+ * @returns {number}
+ */
+export function parsePaddingOption(prop: 'left' | 'top' | 'bottom' | 'right', options: PhotoSwipeOptions, viewportSize: Point, itemData: SlideData, index: number): number;
+/**
+ * @param {PhotoSwipeOptions} options
+ * @param {Point} viewportSize
+ * @param {SlideData} itemData
+ * @param {number} index
+ * @returns {Point}
+ */
+export function getPanAreaSize(options: PhotoSwipeOptions, viewportSize: Point, itemData: SlideData, index: number): Point;
+export type PhotoSwipeOptions = import('../photoswipe.js').PhotoSwipeOptions;
+export type PhotoSwipeBase = import('../core/base.js').default;
+export type Point = import('../photoswipe.js').Point;
+export type SlideData = import('../slide/slide.js').SlideData;

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/dist/umd/README.md

@@ -0,0 +1,45 @@
+`umd/` folder contains transpiled version of PhotoSwipe in universal module definition format.
+
+Use it only if you are unable to use ESM version.
+
+Basic example:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test Gallery</title>
+  </head>
+  <body>
+
+    <script src="./photoswipe.umd.min.js"></script>
+    <script src="./photoswipe-lightbox.umd.min.js"></script>
+    
+    <link rel="stylesheet" href="../photoswipe.css">
+
+    <div class="test-gallery">
+      <a href="https://dummyimage.com/1200x600/000/fff" data-pswp-width="1200" data-pswp-height="600">
+        <img src="https://dummyimage.com/120x60/000/fff" alt="" />
+      </a>
+      <a href="https://dummyimage.com/1200x1200/000/fff" data-pswp-width="1200" data-pswp-height="1200">
+        <img src="https://dummyimage.com/60x60/000/fff" alt="" />
+      </a>
+      <a href="https://dummyimage.com/600x1200/000/fff" data-pswp-width="600" data-pswp-height="1200">
+        <img src="https://dummyimage.com/30x60/000/fff" alt="" />
+      </a>
+    </div>
+    
+    <script type="text/javascript">
+      var lightbox = new PhotoSwipeLightbox({
+        gallery: '.test-gallery',
+        children: 'a',
+        // dynamic import is not supported in UMD version
+        pswpModule: PhotoSwipe 
+      });
+      lightbox.init();
+    </script>
+
+  </body>
+</html>
+
+```

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/edit.css

@@ -0,0 +1,19 @@
+.menu{}
+.menu .text{
+    font-size: .32rem;
+    font-weight: 400;
+    margin-bottom: .2rem;
+}
+.menu ul {
+    display: flex;
+    flex-wrap: wrap;
+}
+.menu ul li{
+    font-size: 0.28rem;
+    color: #fff;
+    border-radius: 0.4rem;
+    margin-bottom: 0.14rem;
+    margin-right: 0.2rem;
+    padding: 0.06rem .2rem;
+    background: var(--themeColor);
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/index.css

@@ -0,0 +1,85 @@
+@import "./config.css";
+
+.header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1.6rem;
+    z-index: 999;
+}
+.header .header_top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: .03rem;
+    height: .9rem;
+    background: var(--themeColor);
+}
+.header .header_top a{
+    cursor: pointer;
+}
+.header .header_top .icon-wo,
+.header .header_top .icon-taozi1{
+    font-size: .45rem;
+    color: var(--whiteColor);
+}
+.header .header_top .search{
+    flex: 1;
+    background: var(--whiteColor);
+    height: .6rem;
+    border-radius: .6rem;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+}
+.header .header_top .search i{
+    color: var(--textColor);
+    font-size: .26rem;
+    margin-right: .1rem;
+    padding-top: .02rem;
+    margin-left: .26rem;
+}
+.header .header_top .search span{
+    font-size: var(--fontSize12);
+    color: var(--textColor);
+}
+.header .header_menu{
+    height: .72rem;
+    display: flex;
+    align-items: center;
+    background: var(--otherThemeColor);
+    padding-left: .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: .8rem;
+    height: .72rem;
+    text-align: center;
+    line-height: .72rem;
+}
+.header .header_menu ul li{
+    font-size: .26rem;
+    margin-right: .26rem;
+    color: #d3d2d2;
+    flex-shrink: 0;
+}
+.content{
+    margin-top: 1.6rem;
+}
+.swiper-wrapper .swiper-slide{
+    /* 计算固定高度 */
+    height: calc(100vh - 1.6rem - 1rem) !important;
+    /* 数据页面长度 */
+    overflow-y: scroll;
+}
+

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/info.css

@@ -0,0 +1,3 @@
+.imgList img{
+    width: 100%;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/layout.css

@@ -0,0 +1,121 @@
+@import "./config.css";
+
+.footer{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 50px;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    z-index: 999;
+}
+.footer li {
+    text-align: center;
+}
+.footer li a{
+
+}
+.footer li i{
+
+}
+.footer .iconfont{
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+}
+.footer li p{
+    font-size: 0.24rem;
+    margin-top: 0.04rem;
+}
+.footer li .active i,
+.footer li .active p{
+    color: var(--themeColor);
+}
+.content{
+    margin-top: .9rem;
+    margin-bottom: 1rem;
+    height: 100vh;
+}
+.list{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: .16rem;
+}
+.list .item{
+    width: 49%;
+    margin-bottom: .24rem;
+}
+.list .item .img{
+    position: relative;
+}
+.item .img img {
+    width: 100%;
+    height: 250px;
+    background: #d3d2d2;
+}
+.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 .text .text_title{
+    font-size: 0.34rem;
+    font-weight: 400;
+    margin-top: 0.2rem;
+}
+ .list .text .model,
+ .list .text .mechanism{
+    font-size: 0.28rem;
+    color: #bdb7b7;
+}
+
+.list .tags{
+    margin-top: 0.1rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.list .tags a{
+    font-size: 0.24rem;
+    flex-shrink: 0;
+    background: var(--themeColor);
+    padding: 0.08rem 0.18rem;
+    margin-right:0.1rem ;
+    color: #fff;
+    border-radius: 0.2rem;
+    margin-bottom: 0.1rem;
+}
+
+/* 公用头部样式 */
+.pub_title{
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 0.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{
+    flex: 1;
+    font-size: .36rem;
+    margin-left: 0.28rem;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/me.css

@@ -0,0 +1,41 @@
+.me_icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 4rem;
+    background: var(--themeColor);
+}
+.me_icon i {
+    font-size: 2rem;
+    color: #fff;
+    user-select: none;
+}
+.me_list {
+    padding:0 0.26rem;;
+    box-sizing: border-box;
+}
+
+.me_list a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+    cursor: pointer;
+}
+.me_list  div {
+    display: flex;
+    align-items: center;
+}
+
+.me_list div span{
+    font-size: .32rem;
+    color: var(--textColor);
+}
+
+.me_list i:first-child {
+    font-size: .4rem;
+    margin-right: .2rem;
+}
+.me_list i:last-child{
+    font-size: .34rem;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/mechanism.css

@@ -0,0 +1,29 @@
+.mechanism_list{
+    padding-top: .4rem; 
+    padding-left: .1rem;
+    padding-right: .1rem;
+    
+    display: flex;
+    flex-wrap: wrap;
+}
+.mechanism_list a{ 
+display: flex;
+width: 25%;
+box-sizing: border-box;
+flex-direction: column;
+justify-content: space-between;
+align-items:center;
+margin-bottom: .2rem;
+}
+.mechanism_list p{
+    width: 100%;
+    display: inline-block;
+    text-align: center;
+    font-size: .3rem;
+    color: var(--blackColor);
+    margin-bottom: .1rem;
+}
+.mechanism_list span{
+    font-size: .24rem;
+    color: var(--themeColor);
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/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) */
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/model_info.css

@@ -0,0 +1,23 @@
+.user_photo{
+    margin-bottom: .1rem;
+    display: flex;
+    align-items: center;
+    padding-left: .3rem;
+    margin-top: 1.16rem;
+}
+.user_photo img{
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: 1rem;
+    background: red;
+}
+.user_photo .user_text{
+    display: flex;
+    flex-direction: column;
+    margin-left: .2rem;
+}
+.user_text span{
+    font-size: .32rem;
+    color: black;
+
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/css/secarh.css

@@ -0,0 +1,61 @@
+.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;
+
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/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);
+} */

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/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;
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/config/index.js

@@ -0,0 +1,49 @@
+//全局js配置，一般用未配置接口的及地址(一般不变的地址) 和 短地址（功能地址 详情页、首页） 等一些
+
+var config = {
+    //http:123.3.3.4/api/json/index
+    
+    //开发阶段
+    devBaseUser: 'http://127.0.0.1:3000/api/json',
+
+    //测试阶段
+    testBaseUser: 'http://127.0.0.2:8080/api/json',
+
+    //正式阶段
+    prodBaseUser: 'http://www.anc.com/api/json',
+    stage : 'dev', //dev test prod
+
+    aplList : {
+        index: '/index',
+        info: '/info',
+        mechanism: '/mechanism',
+        type: '/class',
+        classList:'/classList',
+        model:'/allModel',
+        search:'/search',
+        modelList:'/modelList'
+    },
+    
+    footerArry :[
+        {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' },
+    ],
+    switchStage: function () {
+       // console.log(this.stage);
+        switch (this.stage) {
+            case "dev" :
+                return this.devBaseUser;
+                break
+            case "test" :
+                return this.testBaseUser;
+                break
+            case "prod" :
+                return this.prodBaseUser;
+                break
+            default:
+                break;
+        }
+    }
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/http/index.js

@@ -0,0 +1,58 @@
+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 判断状态。
+                    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)
+                }
+            }
+        }
+    }
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/collection.js

@@ -0,0 +1,19 @@
+class Collection {
+    constructor () {
+        title("我的收藏")
+        this.likeList = JSON.parse(localStorage.getItem("like"))
+        this.getLike()
+    }
+    async getLike () {
+        var res = await  indexService.info({
+            id:query("id"),
+            title:query("title"),
+            page:1
+        })
+        console.log(res);
+        console.log(this.likeList);
+        item($(".list"),this.likeList)
+
+    }
+}
+new Collection ()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/edit.js

@@ -0,0 +1,55 @@
+class Edit {
+    constructor() {
+        title("分类管理")
+        this.principal = JSON.parse(localStorage.getItem("principal"))
+        this.additional = JSON.parse(localStorage.getItem("additional"))
+        this.renderPage()
+    }item
+
+    //渲染编辑页面效果
+    renderPage() {
+        //生成li标签
+        $(".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) => {
+            //判断首页选项不可删除
+            //console.log(v);
+            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

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/index.js

@@ -0,0 +1,120 @@
+// config.switchStage()
+// console.log(config.switchStage());
+
+
+class Index {
+    constructor() {
+        footer()
+        this.index = 0
+        this.principal = []
+        this.initSwiper()
+        this.getType().then(() => this.getIndex())
+
+    }
+    async getType() {
+        //判断本地是否有数值，是否选择发送请求
+        if (localStorage.getItem("principal") == null) {
+            var { principal, additional } = await indexService.type()
+            //创建俩本地存储数组
+            //已存在菜单principal
+            //更多菜单additional
+            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);
+
+        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")
+                        }
+                    }
+                }
+            }
+        })
+    }
+    //请求数据
+    async getIndex() {
+        var res = await indexService.index();
+        this.principal[this.index].content = res.list
+        console.log("首页接口数据", res);
+        //this.renderSwiperSlide()
+        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
+            });
+            console.log("list接口数据",res);
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ]
+            this.principal[this.index].total_page = res.total_page
+            
+            //this.renderSwiperSlide()
+            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() {
+        //改变this指向
+        var self = this;
+        //this,在Index类中的变量
+        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()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/info.js

@@ -0,0 +1,88 @@
+
+//详情接口
+class Info {
+    constructor() {
+        this.infoArr = []
+        this.likeArr = JSON.parse(localStorage.getItem("like")) == null
+                        ? []
+                        : JSON.parse(localStorage.getItem("like"))
+
+        title(query("title"), `<i class="iconfont icon-xin like"></i>`)
+        footer()
+        this.getInfo()
+        this.like()
+    }
+    async getInfo() {
+        this.infoArr = await indexService.info({
+            //后端要求接口不可改
+            id: query("id"),
+            title:query("title"),
+            quantity: query("quantity")
+        });
+
+        //调用插件渲染页面
+        this.infoArr.forEach((v, i) => {
+            var img = document.createElement("img")
+            img.src = v;
+            //console.log(img.src)
+            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"),
+                    title:query("title"),
+                    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
+                });
+            }
+
+            //创建本地存储空间like
+            localStorage.setItem("like", JSON.stringify(this.likeArr))
+        })
+    }
+
+    // $(".icon-xin").onclick = () => {
+    //     if ($(".qh").classList.contains("icon-xin")) {
+    //         $(".qh").classList.replace("icon-xin", "icon-aixin")
+
+    //         //$(".preview_img").style.height = "auto"
+    //     } else {
+    //         $(".qh").classList.replace("icon-aixin", "icon-xin")
+
+    //         //$(".preview_img").style.height = "100%"
+    //     }
+    // }
+}
+new Info()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/me.js

@@ -0,0 +1,8 @@
+class me {
+    constructor() {
+        footer()
+         title("")
+    }
+    
+}
+new me()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/mechanism.js

@@ -0,0 +1,31 @@
+// config.switchStage()
+// console.log(config.switchStage());
+
+
+class Mechanism {
+    constructor() {
+        title("机构")
+        footer()
+        this.getMechanism()
+    }
+
+    async getMechanism() {
+        var res = await mechanismService.mechanism({ 
+            id: 1, 
+            page: 1 
+        });
+        console.log(res);
+        res.forEach((v,i) => {
+            $(".mechanism_list").innerHTML += `
+            <a class="ellipsis">
+                <p class="ellipsis">${v.title}</p>
+                <span>${v.id}套</span>
+            </a>
+        `
+        });
+
+        
+
+    }
+}
+new Mechanism()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/model.js

@@ -0,0 +1,27 @@
+class Model {
+    constructor() {
+        footer()
+        title("模特")
+        this.getModel()
+        //this.renderModelPage()
+    }
+
+    async getModel() {
+        var res = await modelService.model();
+        //console.log("list接口数据",res);
+        //console.log("a", $(".hot_model .model_list "));
+
+        res.forEach((v => {
+            $(".model_list").innerHTML += `
+                    <a href="./../page/model_info.html?id=${v.id}&title=${v.title}">
+                        <i>44张</i>
+                        <img src="${v.img}" alt="">
+                        <span class="ellipsis">${v.title}</span>
+                    </a>
+                `
+        }))
+
+
+    }
+}
+new Model()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/model_info.js

@@ -0,0 +1,27 @@
+class ModelList {
+
+    constructor() {
+        title(query("title"))
+        footer()
+        this.getModelList()
+    }
+    async getModelList() {
+        var res = await modelListService.modelList({
+            id: query("id"),
+            title: query("title"),
+            page: 1
+        });
+        console.log("a", res);
+        $(".user_photo").innerHTML += `
+            <img src="${res.model_info.portrait}" alt="">
+            <div class="user_text">
+                <span>${res.model_info.name}</span>
+                <span>${res.model_info.explain}</span>
+            </div>`
+        $(".user_pholist").innerHTML = `<div class="list"></div>`    
+
+        item($(".user_pholist .list"),res.data)
+        
+    }
+}
+new ModelList()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/search.js

@@ -0,0 +1,67 @@
+class Search {
+    constructor() {
+        footer()
+        this.getSearch()
+        this.boxValue = null
+        this.seek()
+    }
+    async seek(res) {
+        var res = await indexService.search({
+            keyword: this.boxValue,
+            page: 1
+        });
+        item($(".seek .list"), res)
+    }
+
+    hidden() {
+        $(".suggest").style.display = "none"
+        $(".seek").style.display = "black"
+    }
+    show() {
+        $(".suggest").style.display = "black"
+        $(".seek").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>`
+            });
+
+        $(".search_box").oninput = () => {
+            if ($(".search_box").value.length > 0) {
+                this.boxValue = $(".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.boxValue = $(".search_box").value
+            this.seek(this.boxValue)
+            this.hidden()
+        })
+
+        //绑定搜索按钮
+        click(".icon-search", () => {
+            this.seek(this.boxValue)
+            this.hidden()
+        })
+
+        click(".icon-back1", () => {
+            history.back()
+        })
+    }
+}
+new Search()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/tags.js

@@ -0,0 +1,29 @@
+class Tags {
+    constructor() {
+        title(query("name"))
+        footer()
+        this.getTags()
+    }
+
+    async getTags() {
+        this.res = await indexService.classList({
+            id: query("id"),
+            page: 1,
+            //name:query("name")
+        });
+        //console.log("clist接口数据", this.res);
+
+        //获取数据
+        this.res.data.forEach((v, i) => {
+            //console.log(_(".swiper-slide  .list"));
+            item($(".swiper-slide   .list"),this.res.data)
+                // $(".classify").innerHTML += `
+                //     <a href="">${val.title}</a>
+                // `
+
+        });
+        // 
+    }
+
+}
+new Tags()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/collection.js

@@ -0,0 +1,5 @@
+class CollectionService {
+    
+
+}
+var collectionService = new CollectionService()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/index.js

@@ -0,0 +1,55 @@
+ 
+
+ class IndexService{
+
+    async index (params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.index,
+            data: params
+        });
+    }
+    async classList (params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.classList,
+            data: params
+        });
+        
+    }
+    async search (params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.search,
+            data: params
+        });
+    }
+
+    async info(params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.info,
+            data: params
+        });
+    }
+
+    async type (params = {}) {
+        var res = await (new Http()).get({
+            url:config.aplList.type,
+            data: params
+        });
+        res.principal.unshift({
+            id: -1,
+            page: 1,
+            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()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/mechanism.js

@@ -0,0 +1,11 @@
+class MechanismService {
+
+
+    async mechanism(params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.mechanism,
+            data: params
+        });
+    }
+}
+var mechanismService = new MechanismService()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/model.js

@@ -0,0 +1,11 @@
+class ModelService {
+
+
+    async model(params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.model,
+            data: params
+        });
+    }
+}
+var modelService = new ModelService()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/model_info.js

@@ -0,0 +1,10 @@
+class ModelListService{
+
+    async modelList(params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.modelList,
+            data: params
+        });
+    }
+}
+var modelListService = new ModelListService ()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/utils/index.js

@@ -0,0 +1,104 @@
+
+
+class Utils {
+
+    footer() {
+        var html = `
+        <ul class="footer top">
+            ${config.footerArry.forH(v => {
+            return `
+                    <li>
+                    <a class="${location.href.includes(v.href) ? 'active' : ''}" href="${v.href}">
+                        <i class="iconfont ${v.icon} "></i>
+                        <p>${v.title}</p>
+                    </a>
+                </li>`
+        })}
+        </ul>
+        `
+        $("body").insertAdjacentHTML("beforeend", html);
+        //console.log(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
+    title(text = "", rightIcon = " ") {
+        var html = `
+            <div class= " pub_title " >
+            <i class="iconfont icon-back1 qh"></i>
+            <span class="ellipsis">${text}</span>
+            ${rightIcon}
+        </div>
+            `
+        $("body").insertAdjacentHTML("beforeend", html);
+
+        click(".icon-back1", () => {
+            history.back(1)
+        })
+    }
+    //对map进行重写
+    cover() {
+        Array.prototype.forH = function (callback) {
+            //  console.log("A")
+            var res = []
+
+            for (var index = 0; index < this.length; index++) {
+                res.push(callback(this[index]))
+            }
+            return res.toString().replaceAll(",", "")
+        }
+
+    }
+
+    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;
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+
+    //循环绑定点击事件
+    click(className, callback) {
+        _(className).forEach((v, i) => v.onclick = () => callback(v, i))
+    }
+}
+
+var { footer, $, _, cover, click, query, item, title } = new Utils();
+cover()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/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)

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/page/collection.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>收藏</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="./../css/swiper-bundle.min.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/collection.css">
+</head>
+
+<body>
+<div class="content">
+    <div class="list">
+        
+    </div>
+</div>
+</body>
+<script src="./../js/utils/swiper-bundle.min.js"> </script>
+<!-- 工具函数 -->
+<script src="./../js/utils/index.js"></script>
+<!-- 全局配置 -->
+<script src="./../js/config/index.js"></script>
+<!-- http封装 -->
+<script src="./../js/http/index.js"></script>
+<!-- 中间层 -->
+<script src="./../js/service/index.js"></script>
+<!-- 页面js -->
+<script src="./../js/page/collection.js"></script>
+
+
+
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/page/edit.html

@@ -0,0 +1,47 @@
+<!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/edit.css">
+</head>
+
+<body>
+   <div class="content">
+        <div class="selected menu">
+            <div class="text">已选菜单</div>
+            <ul>
+              
+            </ul>
+        </div>
+        <div class="optional menu">
+            <div class="text">可选菜单 </div>
+            <ul>
+              
+            </ul>
+        </div>
+   </div>
+</body>
+<!-- 工具函数 -->
+<script src="./../js/utils/index.js"></script>
+<!-- 全局配置 -->
+<script src="./../js/config/index.js"></script>
+<!-- http封装 -->
+<script src="./../js/http/index.js"></script>
+<!-- 中间层 -->
+<script src="./../js/service/index.js"></script>
+<!-- 页面js -->
+<script src="./../js/page/edit.js"></script>
+
+
+
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/page/index.html

@@ -0,0 +1,59 @@
+<!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="./../css/swiper-bundle.min.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/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="./../js/utils/swiper-bundle.min.js"> </script>
+<!-- 工具函数 -->
+<script src="./../js/utils/index.js"></script>
+<!-- 全局配置 -->
+<script src="./../js/config/index.js"></script>
+<!-- http封装 -->
+<script src="./../js/http/index.js"></script>
+<!-- 中间层 -->
+<script src="./../js/service/index.js"></script>
+<!-- 页面js -->
+<script src="./../js/page/index.js"></script>
+
+
+
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/page/info.html

@@ -0,0 +1,89 @@
+<!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>
+
+    <link rel="stylesheet" href="./../css/dist/photoswipe.css">
+    <link rel="stylesheet" href="./../css/dist/default-skin/default-skin.css">
+    <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/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/utils/index.js"></script>
+<!-- 全局配置 -->
+<script src="./../js/config/index.js"></script>
+<!-- http封装 -->
+<script src="./../js/http/index.js"></script>
+<!-- 中间层 -->
+<script src="./../js/service/index.js"></script>
+<!-- 页面js -->
+<script src="./../js/page/info.js"></script>
+
+
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/page/me.html

@@ -0,0 +1,74 @@
+<!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/me.css">
+</head>
+
+<body>
+    <div class="content">
+        <div class="me_icon">
+            <i class="iconfont icon-wo"></i>
+        </div>
+        <div class="me_list">
+            <a href="">
+                <div>
+                    <i class="iconfont icon-zuijinliulan"></i>
+                    <span>最近更新</span>
+                </div>
+                <i class="iconfont icon-qianjin-tongyong"></i>
+            </a>
+            <a href="">
+                <div>
+                    <i class="iconfont icon-zuijinliulan"></i>
+                    <span>单图模式</span>
+                </div>
+                <i class="iconfont icon-qianjin-tongyong"></i>
+            </a>
+            <a href="./collection.html">
+                <div>
+                    <i class="iconfont icon-zuijinliulan"></i>
+                    <span>写真收藏</span>
+                </div>
+                <i class="iconfont icon-qianjin-tongyong"></i>
+            </a>
+            <a href="">
+                <div>
+                    <i class="iconfont icon-guanyu"></i>
+                    <span>关于我们</span>
+                </div>
+                <i class="iconfont icon-qianjin-tongyong"></i>
+            </a>
+            <a href="">
+                <div>
+                    <i class="iconfont icon-xieyiguanli"></i>
+                    <span>用户协议</span>
+                </div>
+                <i class="iconfont icon-qianjin-tongyong"></i>
+            </a>
+        </div>
+    </div>
+</body>
+<!-- 工具函数 -->
+<script src="./../js/utils/index.js"></script>
+<!-- 全局配置 -->
+<script src="./../js/config/index.js"></script>
+<!-- http封装 -->
+<script src="./../js/http/index.js"></script>
+<!-- 中间层 -->
+<script src="./../js/service/index.js"></script>
+<!-- 页面js -->
+<script src="./../js/page/me.js"></script>
+
+
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/page/mechanism.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>机构</title>
+    <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="content">
+        <div class="mechanism_list">
+
+        </div>
+    </div>
+
+</body>
+<!-- 工具函数 -->
+<script src="./../js/utils/index.js"></script>
+<!-- 全局配置 -->
+<script src="./../js/config/index.js"></script>
+<!-- http封装 -->
+<script src="./../js/http/index.js"></script>
+<!-- 中间层 -->
+<script src="./../js/service/mechanism.js"></script>
+<!-- 页面js -->
+<script src="./../js/page/mechanism.js"></script>
+
+
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/page/model.html

@@ -0,0 +1,41 @@
+<!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>
+<!-- http封装 -->
+<script src="./../js/http/index.js"></script>
+<!-- 中间层 -->
+<script src="./../js/service/model.js"></script>
+<!-- 页面js -->
+<script src="./../js/page/model.js"></script>
+
+
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/page/model_info.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>模特详情页</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_info.css">
+</head>
+<body>
+    <div class="header"></div>
+    <div class="content">
+        <div class="user_photo">
+            <!-- <img src="" alt="">
+            <div class="user_text">
+                <span>捷希尔</span>
+                <span>捷希尔</span>
+            </div> -->
+        </div>
+        <div class="user_pholist">
+
+        </div>
+    </div>
+    <div class="footer"></div>
+</body>
+<!-- 工具函数 -->
+<script src="./../js/utils/index.js"></script>
+<!-- 全局配置 -->
+<script src="./../js/config/index.js"></script>
+<!-- http封装 -->
+<script src="./../js/http/index.js"></script>
+<!-- 中间层 -->
+<script src="./../js/service/model_info.js"></script>
+<!-- 页面js -->
+<script src="./../js/page/model_info.js"></script>
+
+
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/page/search.html

@@ -0,0 +1,53 @@
+<!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="./../css/swiper-bundle.min.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/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="seek">
+            <div class="list">
+                
+            </div>
+        </div>
+    </div>
+   
+</body>
+<script src="./../js/utils/swiper-bundle.min.js"> </script>
+<!-- 工具函数 -->
+<script src="./../js/utils/index.js"></script>
+<!-- 全局配置 -->
+<script src="./../js/config/index.js"></script>
+<!-- http封装 -->
+<script src="./../js/http/index.js"></script>
+<!-- 中间层 -->
+<script src="./../js/service/index.js"></script>
+<!-- 页面js -->
+<script src="./../js/page/search.js"></script>
+
+
+
+
+</html>