first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/agreement.css

@@ -0,0 +1,15 @@
+.agreement{
+    font-size: 0;
+    padding-top: 60px;
+}
+.agreement span{
+    font-size: 0.32rem;
+    font-weight: bold;
+    margin-bottom: 0.3rem;
+    display: inline-block;
+}
+.agreement p{
+    font-size: 0.28rem;
+    margin-bottom: 0.36rem;
+    color: #333;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/clear.css

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

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/default-skin.css

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

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/edit.css

@@ -0,0 +1,30 @@
+
+.content {
+    padding-top: 0.9rem;
+    padding-bottom: 1rem;
+    background-color: #ffff;
+}
+.content p{
+    padding-top: 0.2rem;
+    font-size: 0.24rem;
+    margin-bottom: 0.14rem;
+    color: #666;
+}
+.content ul {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content ul li {
+
+    width: 22.8%;
+    text-align: center;
+    font-size: 0.28rem;
+    border: 1px solid #ccc;
+    margin-bottom: 0.1rem;
+    padding: 0.1rem 0;
+    box-sizing: border-box;
+    margin-right: 0.1rem;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/index.css

@@ -0,0 +1,122 @@
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 1.6rem;
+    z-index: 999;
+    box-sizing: border-box;
+}
+.header_search {
+    display: flex;
+    justify-content: space-between;
+    height: 0.88rem;
+    align-items: center;
+}
+.header_search i {
+    font-size: 0.45rem;
+    color: #fff;
+}
+.header_menu {
+    background: #fe7fa2;
+}
+.search {
+    background: #fff;
+    border-radius: 32px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 0.6rem;
+    padding-left: 10px;
+    box-sizing: border-box;
+    margin: 0 0.2rem;
+}
+.search i {
+    color: #999;
+    font-size: 0.26rem;
+    margin-right: 0.1rem;
+    padding-top: 0.02rem;
+}
+.search span {
+    font-size: 0.24em;
+    color: #999;
+}
+
+.header_menu {
+    display: flex;
+    height: 0.72rem;
+    align-items: center;
+}
+.header_menu ul{
+    display: flex;
+    flex: 1;
+    margin-right: 10px;
+    overflow-x: scroll;
+}
+.header_menu ul li{
+    flex-shrink: 0;
+    font-size: 0.26rem;
+    margin-right: 0.26rem;
+    color: #d3d2d2;
+}
+.header_menu .active {
+    color: #fff !important;
+}
+.header_menu i {
+    color: #fff;
+}
+.content {
+    margin-top: 80px;
+    padding-bottom: 50px;
+    position: absolute;
+    width: 100%;
+    height: calc(100vh - 1.6rem - 1rem);
+}
+.model-container ul {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+.model-container ul li{
+    text-align: center;
+    width: 22%;
+}
+.model-container ul .top {
+    position: relative;
+}
+.model-container ul .top img{
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: 100%;
+
+}
+
+.model-container ul .top span{
+    font-size: 0.22rem;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0.06rem;
+    padding: 0.02rem 0.1rem;
+    background: rgb(0 0 0 / 58%);
+    color: #fff;
+    border-radius: 0.2rem;
+}
+.model-container ul p {
+    font-size: 0.24rem;
+    color: #7e7979;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-top: 7px;
+}
+.eee,
+.home{
+    overflow-y: scroll;
+}
+.eee,
+.swiper-container{
+    height: 100%;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/info.css

@@ -0,0 +1,15 @@
+.content{
+    margin-top: 44px
+}
+.info_img figcaption {
+  display: none;
+}
+
+.icon-xiangxia {
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    margin-top: 10px;
+    font-size: 21px;
+    color: #fb7299;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/like.css

@@ -0,0 +1,64 @@
+.content{
+    margin-top:1rem ;
+}
+
+.content ul{display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.nodata {
+    width: 100%;
+    text-align: center;
+    margin-top: 0.6rem;
+}
+.nodata i{
+    font-size: 0.9rem;
+}
+.nodata p{
+    font-size: 0.24rem;
+    color: #666;
+}
+.like_li li{
+    width: 48%;
+    margin-bottom: 0.3rem;
+}
+.newest_img {
+     position: relative;
+ }
+a {
+    text-decoration: none;
+    color: #000;
+
+}
+.newest_img img {
+    width: 100%;
+    border-radius: 0.1rem;
+}
+.newest_img span {
+    position: absolute;
+    padding: 0.08rem 0.14rem;
+    background: rgb(251 114 153 / 73%);
+    color: rgb(255 255 255 / 73%);
+    font-size: 0.24rem;
+    right: 0.2rem;
+    bottom: 0.42rem;
+    border-radius: 0.28rem;
+}
+.newest_text .t {
+    color: #333;
+    font-size: 0.3rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0.08rem;
+}
+.newest_text .source {
+    color: #666;
+    font-size: 0.26rem;
+    margin-bottom: 0.02rem;
+}
+.newest_text .source {
+    color: #666;
+    font-size: 0.26rem;
+    margin-bottom: 0.02rem;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/me.css

@@ -0,0 +1,39 @@
+.header{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 4rem;
+    flex-direction: column;
+    background: #fb7299;
+}
+.header i{
+    font-size: 1.2rem;
+    margin-bottom: 0.2rem;
+    color: #fff;
+}
+.header p{
+    font-size: 0.32rem;
+    color: #fff;
+}
+.content ul{
+    margin-top: 0.2rem;
+}
+.list_item a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.3rem;
+    height: 0.96rem;
+}
+.item_left {
+    display: flex;
+    align-items: center;
+}
+.item_left .iconfont {
+    font-size: 0.4rem;
+    margin-right: 0.2rem;
+}
+.item_left span {
+    font-size: 0.3rem;
+}
+

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/mechanism.css

@@ -0,0 +1,31 @@
+.content_theme1{
+    padding-top: 0.9rem;
+    padding-bottom: 1rem;
+}
+.mechanism_list{
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.3rem;
+    padding: 0 0.3rem;
+}
+.mechanism_list li {
+    width: 25%;
+    text-align: center;
+    font-size: 0;
+    margin-bottom: 0.7rem;
+}
+.mechanism_list li a {
+    text-decoration: none;
+    color: #000;
+}
+.mechanism_list li a p {
+    font-size: 0.32rem;
+    margin-bottom: 0.06rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mechanism_list li a span{
+    font-size: 0.24rem;
+    color: #fb7299;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/model.css

@@ -0,0 +1,11 @@
+.content{
+
+    margin-top: 1.2rem;
+margin-bottom:1.1rem ;
+}
+.title{
+    font-size: 0.34rem;
+    color: #333;
+    margin-bottom: 0.26rem;
+    margin-top: 0.3rem;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/model_info.css

@@ -0,0 +1,33 @@
+.content{
+    margin-top: 1.2rem;
+}
+.model_info_header{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 0;
+}
+.model_info_header img{
+    width: 1.4rem;
+    height: 1.4rem;
+    margin-right: 0.2rem;
+    border-radius: 100%;
+}
+.right_text{
+    flex: 1;
+}
+.right_text p{
+    font-weight: 500;
+    font-size: 0.32rem;
+    margin-bottom: 0.12rem;
+}
+.right_text span{
+    font-size: 0.24rem;
+    color: #909090;
+}
+.title_siz{
+    font-size: 0.34rem;
+    color: #333;
+    margin-bottom: 0.26rem;
+    margin-top: 0.3rem;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/photoswipe.css

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

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/public.css

@@ -0,0 +1,209 @@
+
+.relative {
+    position: relative;
+}
+.absolute {
+    position: absolute;
+}
+
+.footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 0;
+    background: #fff;
+    border-top: 1px solid #fff;
+    z-index: 99;
+}
+.footer li {
+    text-align: center;
+    line-height: 0.32rem;
+}
+.footer img {
+    width: 0.6rem;
+    height: 0.6rem;
+}
+.footer p {
+    font-size: 0.2rem;
+    zoom: 0.9;
+}
+.footer_active p{
+    color: #f15a4f;
+
+}
+.title {
+    font-size: 0.6rem;
+    font-weight: 600;
+    color: #333;
+    line-height: 0.72rem;
+    margin-bottom: 0.32rem;
+}
+.padding_16 {
+    padding-left: 0.32rem;
+    padding-right: 0.32rem;
+    box-sizing: border-box;
+}
+.top {
+    margin-top: 10px;
+}
+
+.margin_16 {
+    margin-left: 0.32rem;
+    margin-right: 0.32rem;
+}
+
+.clear_size {
+    font-size: 0;
+}
+.themeColor {
+    background: #fb7299;
+}
+
+
+.list .title {
+    font-size: 0.34rem;
+    color: #333;
+    margin-bottom: 0.26rem;
+    margin-top: 0.3rem;
+}
+.list .title i{
+    color: #fb7299;
+}
+.list .title span{}
+ .list_fa{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+ .list_fa li{
+    width: 48%;
+    margin-bottom: 0.3rem;
+}
+ .list_fa li .newest_img{
+    position: relative;
+}
+.newest_img img{
+    width: 100%;
+    border-radius: 0.1rem;
+}
+.newest_img span{
+    position: absolute;
+    padding: 0.08rem 0.14rem;
+    background: rgb(251 114 153 / 73%);
+    color: rgb(255 255 255 / 73%);
+    font-size: 0.24rem;
+    right: 0.2rem;
+    bottom: 0.42rem;
+    border-radius: 0.28rem;
+}
+.list .list_fa li .newest_text{
+    margin-top: 13px;
+}
+.newest_text .t {
+    color: #333;
+    font-size: 0.3rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0.08rem;
+}
+.newest_text .source {
+    color: #666;
+    font-size: 0.26rem;
+    margin-bottom: 0.02rem;
+}
+.tags {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.08rem;
+}
+.tags .tags_item {
+    display: inline-block;
+    padding: 0.04rem 0.1rem;
+    font-size: 0.24rem;
+    background: #fb7299;
+    margin-right: 0.06rem;
+    color: #fff;
+    border-radius: 0.18rem;
+    margin-bottom: 0.06rem;
+}
+.pub_header {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    height: 45px;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.pub_header .back {
+    display: flex;
+    align-items: center;
+    width: 86%;
+}
+.pub_header i {
+    color: #fff;
+}
+.pub_header .back span{
+    color: #fff;
+    display: inline-block;
+    font-size: 0.32rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 80%;
+    margin-left: 0.2rem;
+}
+
+.pub_header .right_action .like{
+    margin-right: 0.2rem;
+}
+.ma-top{
+    margin-top: 1.2rem;
+}
+.model_list{
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.24rem;
+    flex-wrap: wrap;
+}
+.mo_item{
+    margin-bottom: 0.6rem;
+    position: relative;
+    text-align: center;
+    width: 22%;
+}
+.mo_top{
+    position: relative
+}
+.mo_top img{
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: 100%;
+}
+.mo_top span{
+    font-size: 0.22rem;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0.06rem;
+    padding: 0.02rem 0.1rem;
+    background: rgb(0 0 0 / 58%);
+    color: #fff;
+    border-radius: 0.2rem;
+}
+.mo_item p{
+    font-size: 0.24rem;
+    color: #7e7979;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/search.css

@@ -0,0 +1,53 @@
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 1.6rem;
+    z-index: 999;
+    box-sizing: border-box;
+}
+.header_search {
+    display: flex;
+    justify-content: space-between;
+    height: 0.88rem;
+    align-items: center;
+}
+.header_search i {
+    color: #fff;
+    font-size: 0.32rem;
+    font-weight: bolder;
+}
+.header_menu {
+    background: #fe7fa2;
+}
+.search {
+    background: #fff;
+    border-radius: 0.64rem;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 0.6rem;
+    padding-left: 0.2rem;
+    box-sizing: border-box;
+    margin: 0 0.2rem;
+}
+.search i {
+    color: #999;
+    font-size: 0.26rem;
+    margin-right: 0.1rem;
+    padding-top: 0.02rem;
+}
+.search span {
+    font-size: 0.24em;
+    color: #999;
+}
+.search_aaa{
+    width: 100%;
+    height: 100%;
+    border-radius: 0.64rem;
+}
+.content{
+    margin-top: 1.2rem;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/css/swiper-bundle.css

@@ -0,0 +1,544 @@
+/**
+ * Swiper 6.7.5
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2021 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: July 1, 2021
+ */
+
+@font-face {
+  font-family: 'swiper-icons';
+  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+:root {
+  --swiper-theme-color: #007aff;
+}
+.swiper-container {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+}
+.swiper-container-vertical > .swiper-wrapper {
+  flex-direction: column;
+}
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  transition-property: transform;
+  box-sizing: content-box;
+}
+.swiper-container-android .swiper-slide,
+.swiper-wrapper {
+  transform: translate3d(0px, 0, 0);
+}
+.swiper-container-multirow > .swiper-wrapper {
+  flex-wrap: wrap;
+}
+.swiper-container-multirow-column > .swiper-wrapper {
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+.swiper-container-free-mode > .swiper-wrapper {
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+.swiper-container-pointer-events {
+  touch-action: pan-y;
+}
+.swiper-container-pointer-events.swiper-container-vertical {
+  touch-action: pan-x;
+}
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+}
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+/* Auto Height */
+.swiper-container-autoheight,
+.swiper-container-autoheight .swiper-slide {
+  height: auto;
+}
+.swiper-container-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+/* 3D Effects */
+.swiper-container-3d {
+  perspective: 1200px;
+}
+.swiper-container-3d .swiper-wrapper,
+.swiper-container-3d .swiper-slide,
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom,
+.swiper-container-3d .swiper-cube-shadow {
+  transform-style: preserve-3d;
+}
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-container-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+/* CSS Mode */
+.swiper-container-css-mode > .swiper-wrapper {
+  overflow: auto;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: start start;
+}
+.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
+  scroll-snap-type: x mandatory;
+}
+.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
+  scroll-snap-type: y mandatory;
+}
+:root {
+  --swiper-navigation-size: 44px;
+  /*
+  --swiper-navigation-color: var(--swiper-theme-color);
+  */
+}
+.swiper-button-prev,
+.swiper-button-next {
+  position: absolute;
+  top: 50%;
+  width: calc(var(--swiper-navigation-size) / 44 * 27);
+  height: var(--swiper-navigation-size);
+  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
+  z-index: 10;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+}
+.swiper-button-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-prev:after,
+.swiper-button-next:after {
+  font-family: swiper-icons;
+  font-size: var(--swiper-navigation-size);
+  text-transform: none !important;
+  letter-spacing: 0;
+  text-transform: none;
+  font-variant: initial;
+  line-height: 1;
+}
+.swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+  left: 10px;
+  right: auto;
+}
+.swiper-button-prev:after,
+.swiper-container-rtl .swiper-button-next:after {
+  content: 'prev';
+}
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+  right: 10px;
+  left: auto;
+}
+.swiper-button-next:after,
+.swiper-container-rtl .swiper-button-prev:after {
+  content: 'next';
+}
+.swiper-button-prev.swiper-button-white,
+.swiper-button-next.swiper-button-white {
+  --swiper-navigation-color: #ffffff;
+}
+.swiper-button-prev.swiper-button-black,
+.swiper-button-next.swiper-button-black {
+  --swiper-navigation-color: #000000;
+}
+.swiper-button-lock {
+  display: none;
+}
+:root {
+  /*
+  --swiper-pagination-color: var(--swiper-theme-color);
+  */
+}
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-container-horizontal > .swiper-pagination-bullets {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transform: scale(0.33);
+  position: relative;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullet {
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  border-radius: 50%;
+  background: #000;
+  opacity: 0.2;
+}
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+          appearance: none;
+}
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+.swiper-pagination-bullet-active {
+  opacity: 1;
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+.swiper-container-vertical > .swiper-pagination-bullets {
+  right: 10px;
+  top: 50%;
+  transform: translate3d(0px, -50%, 0);
+}
+.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 6px 0;
+  display: block;
+}
+.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+}
+.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  display: inline-block;
+  transition: 200ms transform, 200ms top;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 4px;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms left;
+}
+.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms right;
+}
+/* Progress */
+.swiper-pagination-progressbar {
+  background: rgba(0, 0, 0, 0.25);
+  position: absolute;
+}
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(0);
+  transform-origin: left top;
+}
+.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  transform-origin: right top;
+}
+.swiper-container-horizontal > .swiper-pagination-progressbar,
+.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: 4px;
+  left: 0;
+  top: 0;
+}
+.swiper-container-vertical > .swiper-pagination-progressbar,
+.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+  width: 4px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.swiper-pagination-white {
+  --swiper-pagination-color: #ffffff;
+}
+.swiper-pagination-black {
+  --swiper-pagination-color: #000000;
+}
+.swiper-pagination-lock {
+  display: none;
+}
+/* Scrollbar */
+.swiper-scrollbar {
+  border-radius: 10px;
+  position: relative;
+  -ms-touch-action: none;
+  background: rgba(0, 0, 0, 0.1);
+}
+.swiper-container-horizontal > .swiper-scrollbar {
+  position: absolute;
+  left: 1%;
+  bottom: 3px;
+  z-index: 50;
+  height: 5px;
+  width: 98%;
+}
+.swiper-container-vertical > .swiper-scrollbar {
+  position: absolute;
+  right: 3px;
+  top: 1%;
+  z-index: 50;
+  width: 5px;
+  height: 98%;
+}
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  left: 0;
+  top: 0;
+}
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+.swiper-scrollbar-lock {
+  display: none;
+}
+.swiper-zoom-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.swiper-zoom-container > img,
+.swiper-zoom-container > svg,
+.swiper-zoom-container > canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.swiper-slide-zoomed {
+  cursor: move;
+}
+/* Preloader */
+:root {
+  /*
+  --swiper-preloader-color: var(--swiper-theme-color);
+  */
+}
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  transform-origin: 50%;
+  animation: swiper-preloader-spin 1s infinite linear;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+@keyframes swiper-preloader-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* a11y */
+.swiper-container .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+}
+.swiper-container-fade.swiper-container-free-mode .swiper-slide {
+  transition-timing-function: ease-out;
+}
+.swiper-container-fade .swiper-slide {
+  pointer-events: none;
+  transition-property: opacity;
+}
+.swiper-container-fade .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-fade .swiper-slide-active,
+.swiper-container-fade .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-cube {
+  overflow: visible;
+}
+.swiper-container-cube .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 1;
+  visibility: hidden;
+  transform-origin: 0 0;
+  width: 100%;
+  height: 100%;
+}
+.swiper-container-cube .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-cube.swiper-container-rtl .swiper-slide {
+  transform-origin: 100% 0;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-next,
+.swiper-container-cube .swiper-slide-prev,
+.swiper-container-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+.swiper-container-cube .swiper-slide-shadow-top,
+.swiper-container-cube .swiper-slide-shadow-bottom,
+.swiper-container-cube .swiper-slide-shadow-left,
+.swiper-container-cube .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.swiper-container-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  z-index: 0;
+}
+.swiper-container-cube .swiper-cube-shadow:before {
+  content: '';
+  background: #000;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  filter: blur(50px);
+}
+.swiper-container-flip {
+  overflow: visible;
+}
+.swiper-container-flip .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 1;
+}
+.swiper-container-flip .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-flip .swiper-slide-active,
+.swiper-container-flip .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-flip .swiper-slide-shadow-top,
+.swiper-container-flip .swiper-slide-shadow-bottom,
+.swiper-container-flip .swiper-slide-shadow-left,
+.swiper-container-flip .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/img/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>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/ajax/ajax.js

@@ -0,0 +1,50 @@
+class Ajax {
+
+  get(params) {
+    lui.loading();
+   return new Promise((resolve,reject) => {
+     $.ajax({
+       type: "GET",
+       url: this.url() + params.url,
+       data: params.data,
+       success: (msg) =>{
+         lui.loading('close')
+         resolve(this.onreadystatechange(msg))
+       },
+       error: (err) => {
+         lui.loading('close')
+         console.log(err)
+       }
+     });
+   })
+  }
+
+
+  onreadystatechange(res) {
+    switch (res.status) {
+      case 200:
+        return res.result
+        break;
+      case 404:
+        throw new Error(res.msg);
+        break;
+
+    }
+  }
+
+  url() {
+    switch (config.stage) {
+      case "dev":
+        return config.devUrl;
+        break;
+      case "test":
+        return config.testUrl;
+        break;
+      case "prod":
+        return config.prodUrl;
+        break;
+    }
+  }
+}
+
+var ajax = new Ajax()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/config/config.js

@@ -0,0 +1,17 @@
+var config = {
+  devUrl: 'http://127.0.0.1:3000/api/json',
+  testUrl: 'http://test.com/api/json',
+  prodUrl: 'http://prod.com/api/json',
+  stage: 'dev',
+  urlList: {
+    index: '/index',
+    type: '/class',
+    classList: '/classList',
+    info: '/info',
+    search:'/search',
+    mechanism:'/mechanism',
+    mechanismList:'/mechanismList',
+    modelList:'/modelList',
+    allModel:'/allModel'
+  }
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/lib/lui.js

@@ -0,0 +1,861 @@
+
+;(function(global,undefined){
+    "use strict";
+    var g = {};
+    /**
+      返回文档中匹配指定 CSS 选择器的一个元素
+      * @param el CSS 选择器
+    */
+    g.selector = function(el){
+      return document.querySelector(el);
+    }
+    /**
+      返回文档中匹配指定 CSS 选择器的集合
+      * @param el CSS 选择器
+    */
+    g.selectorAll = function(el){
+      return document.querySelectorAll(el);
+    }
+    /**
+      * 判断是否支持touch事件
+    */
+    g.isSupportTouch = function(){
+        return 'ontouchstart' in window
+    }
+    /**
+     * 获取地址栏参数值
+     * @param  {string} name 参数名称
+     * @return 返回匹配结果
+    */
+    g.getQueryString = function (name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) return unescape(r[2]);
+      return null;
+    }
+   /**
+    * 长按事件
+    * @param  {string}   el [选择器]
+    * @param  {Function} cb [长按后的回调函数]
+    */
+    g.longPress = function(el,cb){
+        var t = null,selector = g.selector(el);
+        var handleStart = g.isSupportTouch() ? 'touchstart' : 'mousedown',
+            handleEnd = g.isSupportTouch() ? 'touchend' : 'mouseup';
+        selector.addEventListener('contextmenu', function(e){
+          e.preventDefault();
+        });
+        selector.addEventListener(handleStart,function(e){
+            selector.style.cssText += '-webkit-touch-callout:none';
+            e.preventDefault();
+            t = setTimeout(function(){
+              if (cb && typeof cb == 'function') {
+                cb();
+              }
+            },800)
+        },false)
+        selector.addEventListener(handleEnd,function(){
+            clearTimeout(t);
+        },false)
+    }
+    /**
+     * 动态加载js
+     * @param url 传入的url,单个直接是字符串形式，多个以数组形式
+     * @param callback 加载js后的回调
+    */
+     g.loadScript = function(url, callback) {
+      var script = document.createElement("script");
+      script.type = "text/javascript";
+      script.async = true;
+      script.defer = true;
+      if(typeof url === 'string'){
+          document.createElement("script");
+          script.type = "text/javascript";
+          script.async = true;
+          script.defer = true;
+          script.src = url;
+      } else {
+        for(var i = 0;i < url.length;i ++){
+          document.createElement("script");
+          script.type = "text/javascript";
+          script.async = true;
+          script.defer = true;
+          script.src = url[i];
+        }
+      }
+      document.head.appendChild(script);
+      if(callback && typeof callback == 'function'){
+        if (script.readyState) {
+            script.onreadystatechange = function () {
+              if (script.readyState == "loaded" || script.readyState == "complete") {
+                script.onreadystatechange = null;
+                callback();
+              }
+            };
+          } else {
+            script.onload = function () {
+              callback();
+            };
+          }
+      }
+    }
+    g.pullDownRefresh = function(container,callback){
+        var touch,startX,startY,moveX,moveY,touchX,touchY,flag = false;
+        var div = document.querySelector(container),
+          iconHeight = 50;
+         div.style.cssText += 'transform:translate3d(0,-'+iconHeight+'px,0);webkitTransform:translate3d(0,-'+iconHeight+'px,0);overscroll-behavior: contain';
+
+        div.addEventListener("touchstart",touchstart,false);
+        div.addEventListener("touchmove",touchmove,false);
+        div.addEventListener("touchend",touchend,false);
+
+        function touchstart(e){
+            flag = true;
+            // e.preventDefault();
+            var touch = e.changedTouches[0];
+            startX = touch.pageX;
+            startY = touch.pageY;
+            // console.log('touchstart:'+startX);
+        }
+
+        function touchmove(e){
+            var touch = e.changedTouches[0];
+            moveX = touch.pageX;
+            moveY = touch.pageY;
+            touchX = moveX - startX;
+            touchY = moveY - startY - iconHeight;
+            if (moveY - startY > 0 && flag){
+              if (touchY > 6) {
+                document.querySelector('#pullDown').classList.add('flip');
+              }else{
+                document.querySelector('#pullDown').classList.remove('flip');
+              }
+              div.style.cssText += 'transform:translate3d(0,'+touchY+'px,0);webkitTransform:translate3d(0,'+touchY+'px,0);';
+            }
+            // console.log('touchY:'+touchY);
+        }
+
+        function touchend(e){
+            flag = false;
+            div.style.cssText += 'transform:translate3d(0,-'+iconHeight+'px,0);webkitTransform:translate3d(0,-'+iconHeight+'px,0);transition:all .2s cubic-bezier(.08,.87,.08,.87);webkitTransition:all .2s cubic-bezier(.08,.87,.08,.87);';
+            if (callback && typeof callback === "object" && callback['end']) {
+                callback['end'](touchY)
+            };
+        }
+    },
+    /**
+      * 滑动到底加载更多（需要注意的是，有滚动条才能滚动，如果页面禁止了默认滑动，也无法使用该方法）
+      * @param wrap要滚动的元素
+      * @param callback滚动到底的回调函数
+    */
+    g.scrollToBottom = function(wrap,callback){
+      var wrap = document.querySelector(wrap),
+         divHeight = wrap.clientHeight,
+         scrollTop, 
+         scrollHeight,
+         t = null,
+         res;
+      wrap.onscroll = function(){
+        scrollHeight = this.scrollHeight;
+        scrollTop = this.scrollTop;
+        if(scrollTop + divHeight >= scrollHeight){
+          if(callback && typeof callback === "function"){
+              clearTimeout(t);
+              t = setTimeout(function(){
+                  callback();
+              },100)
+          }
+        }else{
+            res = divHeight+'+'+scrollTop +'>'+ scrollHeight+'?';
+            callback(res);          
+        }
+      };
+    }
+    /**
+      * tab切换
+      * @params tabs 包含tab和tabContent的盒子选择器
+      * @params cb 回调函数，内置一个下标参数
+    */
+    g.tabs = function(tabs,cb){
+      var tabs = document.querySelector(tabs),
+        tab = tabs.querySelectorAll('[tab-role="tab"]'),
+        tabContent = tabs.querySelectorAll('[tab-role="tabContent"]');
+      tabs.addEventListener('click',function(e){
+        for(var i =0,len = tab.length;i < len;i++){
+          tab[i].setAttribute('data-id',i);
+          var index = e.target.dataset.id;
+          if(index == i){
+            tab[i].classList.add('active');
+            tabContent[i].style.display = 'block';
+            if (cb && typeof cb === 'function') {
+              cb(Number(index))
+            }
+          }else{
+            tab[i].classList.remove('active');
+            tabContent[i].style.display = 'none';
+          }
+        }
+      },true)
+    }
+    /**
+        *输入框高度自适应
+        *@param textarea 要绑定的textarea
+        *@param num 克隆的textarea的随机id(用于一个页面有多个textarea的情况)
+    */
+    g.textareaAutoHeight = function(textarea,num){
+        var textarea = document.querySelector(textarea),
+            node = textarea.cloneNode(),
+            num = num || 0;
+        node.id = 'clone_textarea2017'+num;
+       document.querySelector('body').appendChild(node);
+       node.style.cssText = 'position:absolute;left:-1000000px';
+       textarea.oninput = function(e){
+          console.log('input');
+           node.value = textarea.value;
+           node.style.cssText += 'width:'+textarea.scrollWidth+'px';
+           var h = node.scrollHeight;
+           h=h>70?70:(h>35 ? h+2 : 30);
+           e.target.style.cssText = 'height:'+h+'px';
+       }
+    }
+    /**
+      * 计算文本域输入字数
+      * @param textField 要绑定的文本域
+      * @param cb 监听输入后的回调
+    */
+    g.getTextFieldLen = function(textField,cb){
+        var el = g.selector(textField);
+        el.oninput = function(e){
+          var res = e.target.value.trim();
+          if (cb && typeof cb == 'function') {
+              cb(res.length);
+          }
+        }
+    }
+    /**
+      *搜索交互
+      @param opts 接收一个对象参数 
+    */
+    g.search = function(opts){
+      var opts = opts || {
+        el:el,  //绑定搜索框外层元素
+        input:function(){ //实时输入的回调
+        },
+        clear:function(){ //清空搜索框输入值的回调
+        },
+        cancel:function(){  //取消搜索的回调
+        },
+        enter:function(){ //回车事件回调
+        }
+      }
+      var el = opts.el,
+          input = opts.input,
+          clear = opts.clear,
+          cancel = opts.cancel,
+          enter = opts.enter;
+      var labelEl = g.selector(el + ' [role="search-label"]'),
+          inputEl = g.selector(el + ' [role="search-input"]'),
+          closeEl = g.selector(el + ' [role="search-close"]'),
+          cancelEl = g.selector(el + ' [role="search-cancel"]');
+        //展开搜索框
+        var _showSearch = function(){
+            labelEl.style.display = 'none';
+        };
+        //显示删除按钮
+        var _showClose = function(){
+            var val = inputEl.value;
+            if(val.length){
+                closeEl.style.display = 'block';
+                if (input && typeof input === "function") {
+                    input(val)
+                }
+            }else{
+                closeEl.style.display = 'none';
+            }
+        };
+        //清除输入框值
+        var _clearValue = function(){
+            inputEl.value = '';
+            closeEl.style.display = 'none';
+            if (clear && typeof clear === "function") {
+                clear()
+            }
+        };
+        //取消搜索
+        var _cancelSearch = function(){
+            _clearValue();
+            labelEl.style.display = 'block';
+            if (cancel && typeof cancel === "function") {
+                cancel()
+            }
+        };
+        //回车
+        inputEl.onkeypress = function(e){
+            var keyCode = e.which || e.keyCode;
+            var val = e.target.value;
+            if(keyCode == 13){
+                inputEl.blur();
+                if(enter && typeof enter === "function"){
+                    enter(val)
+                }
+            }
+          }
+        labelEl.addEventListener('click',_showSearch,false);
+        inputEl.addEventListener('input',_showClose,false);
+        closeEl.addEventListener('click',_clearValue,false);
+        cancelEl.addEventListener('click',_cancelSearch,false);
+    }
+     /**
+        *底部弹出层
+        @param el 弹窗页面的选择器
+        @param callback 回调方法
+     */
+    g.coverHandler = function(el,callback){
+      var t = null,el = document.querySelector(el);
+        if (!el.classList.contains('j_isOpenModal')) {
+          clearTimeout(t);
+          el.classList.add('j_isOpenModal');
+          el.style.display = 'block';
+          setTimeout(function(){
+              el.classList.remove('modal_out');
+              el.classList.add('modal_in');
+          },10)
+          if (callback && typeof callback === "object" && callback['open']) {
+            callback['open']();
+          };
+        }else {
+          el.classList.remove('j_isOpenModal');
+          el.classList.remove('modal_in');
+          el.classList.add('modal_out');
+          t = setTimeout(function(){
+              el.style.display = 'none';
+          },300)
+          if (callback && typeof callback  === "object" && callback['close']) {
+              callback['close']();
+          };
+        }
+    }
+    /**
+         * loading
+         * @param text 提示内容，如果传入参数为close，则关闭loading
+         * @param opacity 遮罩透明度
+     */
+    g.loading = function(text,opacity) {
+        var text = text || "加载中...";
+        var removeLoading = function(){
+          var maskEl = document.getElementById('j_loading_mask');
+          if (maskEl) {
+            maskEl.parentNode.removeChild(maskEl);
+          }
+        }
+        removeLoading()
+       if (text != 'close'){
+         var el = document.createElement('div');
+            el.id = 'j_loading_mask';
+            el.className = 'ui_loading_mask';
+            el.style.cssText = 'background:rgba(0,0,0,'+opacity+')';
+            el.innerHTML =  '<div class="ui_loading_wrap" id="ui_loading_wrap">'
+                    +            '<div id="loading" class="ui_loading"><div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>'
+                    +            '</div>'
+                    +            '<div class="ui_loading_text">'
+                    +                '<p>'+text+'</p>'
+                    +           '</div>'
+                    +    '</div>';
+        document.body.appendChild(el);
+       }
+    }
+     /**
+         * toast (opts接受一个对象参数）
+         * @param type 操作提示类型,文本类型text,警告类型warning,成功类型ok
+         * @param text 提示文本内容
+         * @param duration 持续多少毫秒退出
+         * @param position 所在页面位置
+     */
+    g.toast = function(opts) {
+        var opts = opts || {};
+        opts.type = opts.type || 'ok';
+        opts.text = opts.text || '提示信息';
+        opts.position = opts.position || '';
+        opts.duration = opts.duration || 2000;
+       var el = document.createElement('div');
+          el.id = 'js_ui_toast';
+          el.className = 'ui_toast_wrap';
+          el.innerHTML =  '<div class="ui_toast toast_'+opts.position+'">'
+                  +           '<div class="ui_toast_inner">'
+                    +            '<span class="ui_toast_ico_wrap"><i class="ui_toast_ico ui_toast_'+opts.type+'_ico"></i></span>'
+                    +            '<div class="ui_toast_text">'
+                    +                '<p>'+opts.text+'</p>'
+                    +             '</div>'
+                  +           '</div>'
+                  +    '</div>';
+        document.body.appendChild(el);
+        el.childNodes[0].classList.add('ui_effect_fade');
+        setTimeout(function(){
+          var childEl = document.getElementById('js_ui_toast');
+          if (childEl) {
+            childEl.parentNode.removeChild(childEl);
+          }
+        },opts.duration)
+    }
+    /**
+      * showModal模态框  (opts 接收一个对象参数 )
+      * @param title 标题
+      * @param content 内容
+      * @param cancelText 取消按钮的文字
+      * @param confirmText 确认按钮的文字
+      * @param customClass 自定义class样式
+      * @param showCancel 是否显示取消按钮，默认为 true
+      * @param cancel {function} 取消按钮的回调函数
+      * @param confirm {function}  确定按钮的回调函数
+      * @param beforeHide {function}  退出模态框前的回调函数
+    */
+    g.showModal = function(opts){
+      var opts = opts || {}
+      opts.title = opts.title || '提示';
+      opts.content = opts.content || '内容';
+      opts.cancelText = opts.cancelText || '取消';
+      opts.confirmText = opts.confirmText || '确认';
+      opts.customClass = opts.customClass || '';
+      opts.showCancel = opts.showCancel || false;
+      var modalEl = document.querySelector('#j_modal_wrap');
+      if (modalEl) {
+          modalEl.parentNode.removeChild(modalEl); //避免出现多个弹窗
+      }
+      var el = document.createElement('div');
+          el.id = 'j_modal_wrap';
+          el.className = 'ui_modal_wrap';
+          el.innerHTML =  '<div class="ui_modal '+opts.customClass+'" id="j_modal">'
+                    +          '<div class="ui_modal_hd">'+opts.title+'</div>'
+                    +          '<div class="ui_modal_bd">'+opts.content+'</div>'
+                    +          '<div class="ui_modal_ft" id="js_btns2017">'
+                    +             '<a href="javascript:;" class="ui_modal_btn ui_modal_default_btn" data-btn="_cancel2017">'+opts.cancelText+'</a>'
+                    +             '<a href="javascript:;" class="ui_modal_btn ui_modal_primary_btn" data-btn="_confirm2017">'+opts.confirmText+'</a>'
+                    +           '</div>'
+                    +    '</div>';
+        document.body.appendChild(el);
+        var cancelBtn = g.selector('[data-btn="_cancel2017"]'),
+            confirmBtn = g.selector('[data-btn="_confirm2017"]');
+        !opts.showCancel &&  cancelBtn.parentNode.removeChild(cancelBtn);
+        var modal_wrap = document.querySelector('#j_modal_wrap'),
+            modal = document.querySelector('#j_modal');
+        setTimeout(function(){
+           modal.classList.add('ui_modal_in');
+        },60)
+       var hideModal = function(){
+            modal.classList.remove('ui_modal_in');
+            modal.classList.add('ui_modal_out');
+            if (opts.beforeHide && typeof opts.beforeHide == 'function') {
+              opts.beforeHide()
+            }
+            setTimeout(function(){
+              modal_wrap.parentNode.removeChild(modal_wrap);
+            },200)
+       }
+
+       var modalBtnHandler = function(e){
+        var  btn = e.target.dataset.btn;
+          if (btn) {
+              if(btn == "_cancel2017" && opts.cancel && typeof opts.cancel == "function"){
+                  setTimeout(function(){
+                    opts.cancel();
+                  },201)
+              }
+              if(btn == "_confirm2017" && opts.confirm && typeof opts.confirm == "function") {
+                  setTimeout(function(){
+                    opts.confirm();
+                  },201)
+              }
+              hideModal();
+          };
+      }
+      cancelBtn && cancelBtn.addEventListener('click',function(e){
+        modalBtnHandler(e);
+      },false);
+      confirmBtn && confirmBtn.addEventListener('click',function(e){
+        modalBtnHandler(e);
+      },false);
+    }
+    /**
+     * ajax封装(使用方法与jq的ajax方法几乎一样)
+     */
+    g.request = function(opts) {
+        var opts = opts || {};
+        opts.type = opts.type.toUpperCase() || 'POST';
+        opts.url = opts.url || '';
+        opts.data = opts.data || null;
+        opts.beforeSend = opts.beforeSend || function() {};
+        opts.success = opts.success || function() {};
+        opts.error = opts.error || function() {};
+        opts.closeLoading = opts.closeLoading || false
+        var xmlHttp;
+        if (window.XMLHttpRequest) {
+            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
+            xmlHttp = new XMLHttpRequest();
+        } else {
+            // IE6, IE5 浏览器执行代码
+            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+        var params = [];
+        for (var key in opts.data) {
+            params.push(key + '=' + opts.data[key]);
+        }
+        var postData = params.join('&');
+        opts.beforeSend();
+        if (opts.type === 'POST') {
+            xmlHttp.open(opts.type, opts.url, true);
+            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+            xmlHttp.send(postData);
+        } else if (opts.type === 'GET') {
+            xmlHttp.open(opts.type, opts.url + '?' + postData, true);
+            xmlHttp.send();
+        }
+        if (! opts.closeLoading) {
+            g.loading();
+        }
+        xmlHttp.onreadystatechange = function() {
+            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+                g.loading('close');
+                var res = JSON.parse(xmlHttp.responseText);
+                opts.success(res)
+            }
+        }
+        xmlHttp.onerror = function(e){
+          opts.error(e)
+        }
+    }
+    /**
+      * 索引列表滑动
+      * @param scrollElem 滚动元素的选择器
+    */
+    g.indexAction = function(scrollElem){
+        var startX, startY, moveX, moveY, title, a, y = [],h = [],english,word_popup,t = null,flag = false;
+        title = document.querySelectorAll('[data-role="word_index"]');
+        english = document.querySelector('[data-role="word_list"]');
+        a = document.querySelectorAll('[data-role="word_list"] a');
+        word_popup = document.querySelector('[data-role="word_popup"]'); //popup
+        var fixed_h = (document.body.clientHeight - english.clientHeight) / 2; //原生js的offsetTop在元素用了fixed属性后，有bug，会从0计算，所以用窗口的高度减去元素的高度来计算距离
+        // console.log((fixed_h));
+        var scrollElem = scrollElem || '.ui_page_bd';
+        var offsetTop = 0;
+        var item = document.querySelector(scrollElem);
+
+        var startAction = this.isSupportTouch() ? 'touchstart' : 'mousedown'; 
+        var endAction = this.isSupportTouch() ? 'touchend' : 'mouseup'; 
+        for (var i = 0; i < a.length; i++) {
+            a[i].addEventListener([startAction], _start, false);
+            a[i].addEventListener('touchmove', _move, false);
+            a[i].addEventListener([endAction], _end, false);
+            y[i] = a[i].offsetTop + fixed_h;
+            h[i] = a[i].clientHeight;
+        };
+
+        function _start(e) {
+            flag = true;
+            if (g.isSupportTouch()) {
+              var touch = e.changedTouches[0];
+               startX = touch.pageX;
+               startY = touch.pageY;
+            }
+            var attr = e.target.dataset.href;
+            word_popup.classList.add('active');
+            word_popup.innerText = attr;
+            offsetTop = document.querySelector('#'+attr).offsetTop;
+            // item.scrollTo(0,offsetTop);
+            item.scrollTop = offsetTop
+        }
+        function _move(e) {
+            e.preventDefault();
+            if (flag) {
+              var touch = e.changedTouches[0];
+              moveX = touch.pageX;
+              moveY = touch.pageY;
+              word_popup.classList.add('active');
+              var scrollTop = document.body.scrollTop;
+              for (var j = 0; j < title.length; j++) { //循环需要滑动的英文字母
+                  if ((y[j] + scrollTop < moveY) && (moveY < y[j] + h[j] + scrollTop)) { //计算区间获得对应字母的位置
+                      offsetTop = document.querySelector('#'+title[j].id).offsetTop;
+                      // item.scrollTo(0,offsetTop);
+                      item.scrollTop = offsetTop;
+                      word_popup.innerText = title[j].id;
+                  }
+              };
+            }
+        }
+        function _end() {
+          flag = false;
+          clearTimeout(t);
+          t = setTimeout(function(){
+            word_popup.classList.remove('active');
+          },500);
+        }
+    }
+    /**
+      * 水印(增加密度)
+      * @param div 将水印挂载到指定div
+      * @param str 水印文字
+      * @param len 水印个数
+    */
+    g.watermark = function(div,str,len){
+      var str = str || '保密水印';
+      var el,top,left,translateX,len = len || 10,container = document.querySelector(div);
+      container.style.cssText += 'position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;'
+      for (var i = 0; i < len; i++) {
+        top = 19*i-40;
+        if(i%5 == 0){
+          left = '10%';
+        }
+        if(i%5 == 1){
+          left = '30%';
+        }
+        if(i%5 == 2){
+          left = '50%';
+        }
+        if(i%5 == 3){
+          left = '70%';
+        }
+        if(i%5 == 4){
+          left = '90%';
+        }
+        translateX = '-50%';
+        el = document.createElement('div');
+        el.className = 'fixed_watermark';
+        el.style.cssText = 'pointer-events:none;position:absolute;transform:rotate(-25deg) translateX('+translateX+');-webkit-transform:rotate(-25deg) translateX('+translateX+');font-size:16px;color:#bcc7cd;opacity:.5;user:none;-webkit-user:none;white-space:nowrap';
+        el.innerHTML = str;
+        el.style.cssText += 'left:'+left+';top:'+top+'px;';
+        if(container){
+          container.appendChild(el);
+        }else{
+          document.body.appendChild(el);
+        }
+      }
+    }
+    /**
+      * 详情图片预览
+      * @param img 图片选择器集合
+    */
+    g.photoViewer = function(img){
+        var arr = document.querySelectorAll(img),i,len = arr.length,str ='',div;
+        div = document.createElement('div');
+        div.id = 'js_photoZoomWrap';
+        div.className = 'photoZoomWrap';
+        var init = function(){
+              str +='<div class="swiper-container photoZoom modal_out" id="swiperZoom">'
+                      str += '<div class="swiper-wrapper">'
+                     for (i = 0; i < len; i++) {
+                      str +=   '<div class="swiper-slide">'
+                      str +=         '<div class="swiper-zoom-container">'
+                      str +=            '<img src="'+arr[i].src+'" class="swiper-lazy">'
+                      str +=       '</div>'
+                      str +=    '</div>';
+                     }
+                      str +='</div>'
+                      str +='<div class="swiper-pagination swiper-pagination-white"></div>'
+                      str +=  '<div class="swiper-button-prev"></div>'
+                      str +=  '<div class="swiper-button-next"></div>'
+                      str +='<div class="close_photoZoom" id="close_photoZoom"></div>'
+                 str +='</div>';
+            div.innerHTML = str;
+            document.body.appendChild(div);
+        }();
+          var swiper = new Swiper('#swiperZoom', {
+            zoom: true,
+            pagination: {
+              el: '.swiper-pagination',
+            },
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+            on:{
+              click: function(event){
+                closePhotoZoom();
+              }
+            }
+        });
+        //关闭
+        var closePhotoZoom = function(){
+            g.selector('#swiperZoom').classList.remove('modal_in');
+            g.selector('#swiperZoom').classList.add('modal_out');
+            setTimeout(function(){
+              g.selector('#js_photoZoomWrap').classList.remove('active');
+            },200)
+        }
+        document.addEventListener('click',function(e){
+          if (e.target.id == 'close_photoZoom') {
+              closePhotoZoom();
+          }
+        },false)
+        //预览当前
+        for (var i = 0; i < arr.length; i++) {
+            (function(index){
+                arr[index].addEventListener('click',function(){
+                    swiper.slideTo(index,0);
+                    g.selector('#js_photoZoomWrap').classList.add('active');
+                    g.selector('#swiperZoom').classList.remove('modal_out');
+                    g.selector('#swiperZoom').classList.add('modal_in');
+                },false)
+            })(i)
+        };
+    }
+
+    /**
+      *上传图片预览大图
+      * @param img 图片选择器集合
+      * @param index 当前图片预览的索引
+    */
+    g.photoZoomUpload = function(img,index){
+        var arr = document.querySelectorAll(img),i,len = arr.length,str ='',div;
+        div = document.createElement('div');
+        div.id = 'js_photoZoomUploadWrap';
+        div.className = 'photoZoomWrap';
+        var init = function(){
+            str += '<div class="swiper-container photoZoom modal_out" id="swiperZoomUpload">'
+                str += '<div class="swiper-wrapper">'
+                for (i = 0; i < len; i++) {
+                 str += '<div class="swiper-slide">'
+                 str +=         '<div class="swiper-zoom-container">'
+                 str +=            '<img src="'+arr[i].src+'" class="swiper-lazy">'
+                 str +=        '</div>'
+                 str +=    '</div>';
+          }
+                 str +='</div>'
+                 str +='<div class="swiper-pagination swiper-pagination-white"></div>'
+                 str +='<div class="swiper-button-prev"></div>'
+                 str +='<div class="swiper-button-next"></div>'
+                str +='<div class="close_photoZoom" id="close_photoZoomUpload"></div>'
+             str +='</div>';
+            div.innerHTML = str;
+            document.body.appendChild(div);
+        }();
+
+          //关闭
+          var closePhotoZoom = function(){
+            var photoZoomWrap = g.selector('#js_photoZoomUploadWrap');
+            console.log(photoZoomWrap.parentNode)
+            photoZoomWrap.parentNode.removeChild(photoZoomWrap)
+          }
+
+          var swiper = new Swiper('#swiperZoomUpload', {
+              zoom: true,
+              initialSlide:index,
+              pagination: {
+                el: '.swiper-pagination',
+              },
+              navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+              },
+              on:{
+                click: function(event){
+                  closePhotoZoom();
+                }
+              }
+          });
+           swiper.pagination.update();
+           g.selector('#js_photoZoomUploadWrap').classList.add('active');
+           g.selector('#swiperZoomUpload').classList.remove('modal_out')
+           g.selector('#swiperZoomUpload').classList.add('modal_in');
+
+
+          document.addEventListener('click',function(e){
+            if (e.target.id == 'close_photoZoomUpload') {
+              closePhotoZoom();
+            }
+          },false)
+    }
+    /**
+     * 倒计时
+     * @param str 时间字符串
+     * @param cb 回调函数
+     */
+    g.countDown = function(str,cb){
+      var s = "";
+      var t = setInterval(function(){
+        str = str.replace(/-/g,"/");
+        var lastDate = new Date(str);
+        var currDate = new Date();
+        if(lastDate < currDate){           
+            clearInterval(t);
+            cb();
+        }
+        var intDiff = (lastDate.getTime()-currDate.getTime())/1000;
+        var day=0,
+          hour=0,
+          minute=0,
+          second=0;//时间默认值
+        if(intDiff > 0){
+          day = Math.floor(intDiff / (60 * 60 * 24));
+          hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
+          minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
+          second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
+        }
+        if (day < 10) day = '0' + day;
+        if (hour < 10) hour = '0' + hour;
+        if (minute < 10) minute = '0' + minute;
+        if (second < 10) second = '0' + second;
+        s = day+"|"+hour+'|'+minute+'|'+second;
+        intDiff--;
+        cb(s)
+      }, 1000);
+    }
+    /**
+     * 获取第几天的时间
+     * @param num {Number} 第几天
+     * @param datetime {Date} 某天的日期
+     * @param format {String} 格式化
+     */
+    g.getDateTime = function (num, datetime, format) {
+        var datetime = datetime || new Date(),
+          d = new Date(datetime);
+        d.setTime(d.getTime() + (24*60*60*1000) * num);
+        var addZero = function (n) {
+          return n < 10 ? "0" + n : n
+        }
+        var y = addZero(d.getFullYear()),
+           M = addZero(d.getMonth() + 1),
+           _d = addZero(d.getDate()),
+           h = addZero(d.getHours()),
+           m = addZero(d.getMinutes()),
+           s = addZero(d.getSeconds());
+        var res = ''
+        switch (format) {
+          case 'yyyy-MM-dd':
+            res = y + "-" + M + "-" + _d;
+            break;
+          case 'yyyy-MM-dd HH:mm':
+            res = y + "-" + M + "-" + _d + ' ' + h + ':' + m;
+           break;        
+          default:
+            res = y + "-" + M + "-" + _d + ' ' + h + ':' + m + ':' + s;
+            break;
+        }
+        return res
+    },
+    /**
+     * 返回某天中文星期
+     * @param datetime {Date}
+     */
+    g.getCnDay = function(datetime){    
+        var datetime = datetime || new Date();
+        var d = new Date(datetime).getDay(); 
+        var arr = ['日','一','二','三','四','五','六']
+        return arr[d]
+    }
+    /**
+     * 控制select默认样式
+     */
+    g.changeSelectStyle = function(ev){
+        if (ev.target.value === '') {
+          ev.target.classList.add('placeholderColor')
+        }else{
+          ev.target.classList.remove('placeholderColor')
+        }
+    }
+    //开启vConsole调试模式
+    if (g.getQueryString('vConsole') === '1') {
+        g.loadScript('js/3rd-plugins/vconsole.min.js',function(){
+            new VConsole();
+        })
+    }
+    global.lui = g;
+})(window);

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/lib/previewImage.js

@@ -0,0 +1,267 @@
+class PreviewImage {
+
+    // 属性都是全局的
+    body = this.$("body");
+    option = {};
+    isBackMove = false;
+
+    x1 = 0;
+    y1 = 0;
+    l = 0;
+    t = 0;
+
+    constructor(option) {
+        if (!option.hasOwnProperty("image")) {
+            throw new Error("参数image缺少，请检查")
+        }
+
+        if (!option.hasOwnProperty("showIndex")) {
+            throw new Error("参数showIndex缺少，请检查")
+        }
+
+        this.option = option
+        console.log(this.option);
+
+        this.created();
+        this.BindClose();
+
+        this.BindPrevious();
+        this.BindNext();
+        this.BindSuoXiao();
+        this.BindFangDa();
+        this.BindFullScreen();
+
+        this.BindXuanZhuan();
+        this.MouseEvent();
+    }
+
+    // 1：把图片预览的html插入到网页上
+    created() {
+        this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
+                        <div class="zhezhao"></div>
+                        <div class="preview">
+                            <div class="closed">x</div>
+
+                            <div class="action">
+                                <div class="left d">&lt;</div>
+                                <div class="right d">&gt;</div>
+                            </div>
+
+                            <img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
+                                src="${this.option.image[this.option.showIndex]}" alt="">
+
+                            <ul class="operation">
+                                <li>
+                                    <i class="iconfont icon-suoxiao suoxiao"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fangda fangda"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fullscreen fullscreen"></i>
+                                </li>
+                                <li class="xz">
+                                    <i class="iconfont icon-shuaxin leftshuaxin"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-shuaxin rightshuaxin"></i>
+                                </li>
+                            </ul>
+
+
+                        </div>
+                    </div>`)
+
+    }
+
+    // 缩小
+    BindSuoXiao() {
+        this.$(".suoxiao").onclick = () => {
+            var value = this.Scale() - 0.2;
+            if (value != 0) {
+                this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
+            }
+        }
+    }
+
+    // 全屏
+    BindFullScreen() {
+
+        this.$(".fullscreen").onclick = () => {
+            // true 缩小
+            if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
+                this.$(".fullscreen").classList.remove("icon-fullscreen")
+                this.$(".fullscreen").classList.add("icon-suoxiao1")
+
+                this.$(".mainImg").style = `
+                    transform: scale(2) rotate(${this.Rotate()}deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+
+            // 放大
+            } else {
+                this.$(".fullscreen").classList.remove("icon-suoxiao1")
+                this.$(".fullscreen").classList.add("icon-fullscreen")
+
+                this.$(".mainImg").style = `
+                    transform: scale(1) rotate(0deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+            }
+        }
+    }
+
+    // 放大
+    BindFangDa() {
+        this.$(".fangda").onclick = () => {
+            this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
+        }
+    }
+
+    // 旋转
+    BindXuanZhuan() {
+        // -90
+        this.$(".leftshuaxin").onclick = () => {
+            this.xuanzhuan(-90)
+        }
+
+        // +90
+        this.$(".rightshuaxin").onclick = () => {
+            this.xuanzhuan(90)
+        }
+    }
+
+    MouseEvent() {
+
+        // 鼠标滑动的时候放大缩小网页
+        document.onmousewheel = (e) => {
+            if (e.wheelDelta == 210) {
+                this.$(".fangda").onclick()
+            } else {
+                this.$(".suoxiao").onclick()
+            }
+        }
+
+        // document.addEventListener('mousewheel',(e) => {
+        //     if (e.wheelDelta == 210) {
+        //         this.$(".fangda").onclick()
+        //     } else {
+        //         this.$(".suoxiao").onclick()
+        //     }
+        // },false)
+
+        // 鼠标在图片上按下的时候
+        this.$(".mainImg").onmousedown = (e) => {
+
+            e.preventDefault()
+
+            this.isBackMove = true
+
+            //获取鼠标按下的坐标
+            this.x1 = e.clientX;
+            this.y1 = e.clientY;
+
+            this.l = parseInt(this.$(".mainImg").style.marginLeft);
+            this.t = this.$(".mainImg").offsetTop;
+
+            this.ImgMove(".mainImg")
+        }
+        // 按住拖动，但鼠标从图片上离开的
+        // 给背景层绑定鼠标移动事件
+        this.$(".mainImg").onmouseleave = () => {
+            console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
+            if (this.isBackMove) {
+                this.ImgMove(".preview")
+            }
+        }
+
+        // 鼠标在背景层上松开
+        this.$(".preview").onmouseup = (ev) => {
+            console.log("鼠标在背景层上松开");
+            this.isBackMove = false
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+
+        // 鼠标在图片上松开
+        this.$(".mainImg").onmouseup = (ev) => {
+            console.log("鼠标在图片上松开");
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+    }
+
+    ImgMove(className) {
+        this.$(className).onmousemove = (ev) => {
+            var x2 = ev.clientX;
+            var y2 = ev.clientY;
+
+            //计算出鼠标的移动距离
+            var x = x2 - this.x1;
+            var y = y2 - this.y1;
+
+            //移动的数值与元素的left，top相加，得出元素的移动的距离
+            var lt = y + this.t;
+            var ls = x + this.l;
+
+            //更改元素的left，top值
+            this.$(".mainImg").style.marginLeft = ls + 'px';
+            this.$(".mainImg").style.marginTop = lt + 'px';
+        }
+    }
+
+    xuanzhuan(offset) {
+        this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
+    }
+
+    // 关闭按钮
+    BindClose() {
+        //1  var ddddc = this;
+
+        //2 es6 => 箭头函数
+        console.log("this1: ", this);
+
+        // this 指向
+        this.$(".closed").onclick = () => {
+            this.body.removeChild(this.$(".previewImage"))
+        }
+    }
+
+    // 上一页
+    BindPrevious() {
+        this.$(".left").onclick = () => {
+            this.option.showIndex -= 1;
+            if (this.option.showIndex < 0) {
+                this.option.showIndex = this.option.image.length - 1
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    // 下一页
+    BindNext() {
+        this.$(".right").onclick = () => {
+            this.option.showIndex += 1;
+            if (this.option.showIndex > this.option.image.length - 1) {
+                this.option.showIndex = 0
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    Scale() {
+        return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
+    }
+
+    Rotate() {
+        return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/lib/rem.js

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

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/agreement.js

@@ -0,0 +1,6 @@
+class Agreement{
+    constructor() {
+        pHeader("用户协议")
+    }
+}
+new Agreement()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/edit.js

@@ -0,0 +1,69 @@
+class Edit {
+  constructor() {
+    pHeader("分类编辑")
+    // 已选
+    this.principal = get_storage("principal")
+    // 待选
+    this.additional = get_storage("additional")
+
+    this.yx();
+  }
+
+  yx () {
+    $(".yx").empty()
+    this.principal.forEach(v => {
+      $(".yx").append(`
+        <li>${v.title}</li>
+      `)
+    });
+
+    var self = this
+    $(".yx li").click(function () {
+
+      self.additional.push(self.principal[$(this).index()])
+
+      self.principal = self.principal.filter((v,i) => {
+        if (i != $(this).index()) {
+          return v
+        }
+      });
+
+      set_storage("principal", self.principal)
+      set_storage("additional", self.additional)
+
+
+      self.yx()
+    })
+
+
+
+    $(".dx").empty()
+    this.additional.forEach(v => {
+      $(".dx").append(`
+        <li>${v.title}</li>
+      `)
+    })
+
+
+    var self = this
+    $(".dx li").click(function () {
+      self.principal.push(self.additional[$(this).index()])
+      self.additional = self.additional.filter((v,i) => {
+        if (i != $(this).index()) {
+          return v
+        }
+      });
+
+      set_storage("principal", self.principal)
+      set_storage("additional", self.additional)
+      self.yx()
+    })
+
+
+
+  }
+
+
+}
+
+new Edit()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/index.js

@@ -0,0 +1,143 @@
+class Index {
+  constructor() {
+    this.currentIndex = 0;
+    this.classData = []
+    this.geIndex();
+    this.GetType();
+    footer()
+    $(".search").click(function (){
+      window.location.replace("search.html");
+    })
+
+    lui.scrollToBottom('.swiper-slide-active',function(){
+    })
+  }
+
+  async GetType() {
+    var principal = [], additional = []
+    if (localStorage.getItem("principal") == null) {
+      let res = await indexServe.type();
+      principal = res.principal
+      additional = res.additional
+      localStorage.setItem("principal", JSON.stringify(principal))
+      localStorage.setItem("additional", JSON.stringify(additional))
+
+    } else {
+      principal = get_storage("principal")
+      additional = get_storage("additional")
+    }
+
+    var self = this;
+    principal.unshift({
+      title: '首页',
+      id: -1,
+      page: 0,
+      content: []
+    })
+
+    this.classData = principal
+
+    principal.forEach((v,i) => {
+      $(".header_menu ul").append(`
+         <li class="${i == 0 ? 'active': ''}">${v.title}</li>
+      `)
+
+      if (i > 0) {
+        $(".page-wrapper").append(`
+          <div class="swiper-slide eee list_fa padding_16 top"></div>
+        `)
+      }
+    });
+
+
+    var page = new Swiper ('.page-container', {
+      direction: 'horizontal',
+      on:{
+        slideChange: function (){
+          self.currentIndex = this.activeIndex;
+          $(".header_menu ul li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
+          self.getClassList();
+        },
+      },
+    })
+
+
+
+    $(".header_menu ul li").click(function () {
+      self.currentIndex = $(this).index()
+      $(this).addClass("active").siblings().removeClass("active")
+      page.slideTo($(this).index())
+    })
+
+  }
+
+
+  async getClassList() {
+    if (this.classData[this.currentIndex].id != -1) {
+      if (this.classData[this.currentIndex].content.length == 0) {
+        let res = await indexServe.classList({
+          page: this.classData[this.currentIndex].page,
+          id: this.classData[this.currentIndex].id
+        });
+
+        this.classData[this.currentIndex].total_page = res.total_page
+        this.classData[this.currentIndex].content = [
+          ...this.classData[this.currentIndex].content,
+          ...res.data
+        ]
+
+        item($(".page-wrapper .eee").eq(this.currentIndex -1),
+          this.classData[this.currentIndex].content)
+
+      }
+    }
+  }
+
+
+  async geIndex() {
+    let data = await indexServe.index()
+    console.log(data)
+
+
+    var modelArr = [ { content: [] }, { content: [] } ]
+
+    data.model.res.forEach((v,i) => {
+      if (i<4) {
+        modelArr[0].content.push(v)
+      } else {
+        modelArr[1].content.push(v)
+      }
+    })
+
+    modelArr.forEach(v=> {
+      $(".model-wrapper").append(`
+          <ul class="swiper-slide">
+            ${
+                v.content.map(item => {
+                  return ` <li>
+                              <a href="./model_info.html?id=${item.id}&t=${item.title}">
+                                <div class="top">
+                                  <img src="${item.preview}" alt="">
+                                  <span>${item.total}</span>
+                                </div>
+                                <p>${item.title}</p>
+                              </a>
+                            </li>`
+                }).toString().replaceAll(",","")
+              }
+          </ul>
+      `)
+    })
+
+    item(".news", data.newest.data)
+    item(".remm", data.recommended.data)
+
+
+    new Swiper ('.model-container', {
+      direction: 'horizontal',
+    })
+  }
+
+}
+
+new Index()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/info.js

@@ -0,0 +1,118 @@
+class Info {
+  constructor() {
+    this.res = {}
+    this.like = {}
+    this.likeArr =
+      localStorage.getItem("like") == null
+        ? []
+        : JSON.parse(localStorage.getItem("like"))
+    this.page = 1;
+    this.total_page = 0;
+    this.pswpElement = $(".pswp")[0]
+    this.getInfo()
+      .then(() => this.renderInfo())
+
+  }
+
+
+  async getInfo() {
+    this.res = await indexServe.info({
+      page: this.page,
+      id: query("id")
+    });
+
+    this.total_page = this.res.total_page
+
+    // 详情页
+    this.res.data.forEach(v => {
+      var image = new Image();
+      image.src = v.src
+      image.onload = () => {
+        if (image.width < image.height) {
+          this.like.preview = v.src
+        }
+        $(".info_img").append(`
+           <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+              <a href="${v.src}" itemprop="contentUrl" data-size="${image.width}x${image.height}">
+                  <img src="${v.src}" itemprop="thumbnail" alt="${v.title}" />
+              </a>
+              <figcaption itemprop="caption description">${v.title}</figcaption>
+          </figure>
+        `)
+      }
+    })
+
+    initPhotoSwipeFromDOM(".info_img")
+
+    $(".tuijian").empty()
+    $(".xianguan").empty()
+    item(".tuijian", this.res.recommend)
+    item(".xianguan", this.res.relevant)
+
+
+  }
+
+
+  renderInfo() {
+    console.log(this.res)
+    pHeader(this.res.title, `
+      <i class="iconfont like icon-xin"></i>
+      <i class="iconfont icon-home"></i>
+    `);
+
+    this.like = {
+      id: query("id"),
+      title: this.res.title,
+      total: this.res.total,
+      preview: query("img")
+
+    }
+    console.log(this.like,'aaaaaaa')
+    var isHave = this.likeArr.filter((v,i) => {
+      if (v.id == query("id")) {
+        return v
+      }
+    })
+
+    // 本地收藏过了
+    if (isHave.length != 0) {
+      $(".like").removeClass("icon-xin")
+      $(".like").addClass("icon-aixin")
+    } else {
+      $(".like").removeClass("icon-aixin")
+      $(".like").addClass("icon-xin")
+    }
+
+
+    $(".like").click(() => {
+      // 空心，表示未收藏，改成实心 收藏
+      if ($(".like").hasClass("icon-xin")) {
+        $(".like").removeClass("icon-xin")
+        $(".like").addClass("icon-aixin")
+        this.likeArr.push(this.like)
+        localStorage.setItem("like",JSON.stringify(this.likeArr))
+      } else {
+        $(".like").removeClass("icon-aixin")
+        $(".like").addClass("icon-xin")
+        this.likeArr = this.likeArr.filter((v,i) => {
+          if (v.id != query("id")) {
+            return v
+          }
+        })
+
+        localStorage.setItem("like",JSON.stringify(this.likeArr))
+      }
+    })
+
+    $(".icon-xiangxia").click(() => {
+      this.page+=1
+      if (this.page == this.total_page) {
+        $(".icon-xiangxia").hide()
+      }
+      this.getInfo()
+    })
+  }
+
+}
+
+new Info();

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/like.js

@@ -0,0 +1,34 @@
+class Like {
+    constructor() {
+        pHeader("我的收藏", `<i class="like iconfont icon-home" style="display: flex;"></i>`)
+
+        var like_list = JSON.parse(localStorage.getItem("like"))
+        console.log(like_list)
+        if (like_list.length != 0){
+            $(".nodata").remove()
+            like_list.forEach(v => {
+                $(".like_li").append(`
+                <li>
+                <div class="newest_img">
+                    <a href="./info.html?id=${v.id}">
+                 <img src="${v.preview}" alt="">
+                    </a>
+                    <span>${v.total}</span>
+                </div>
+                <div class="newest_text">
+                 <a href="./info.html?id=42881">
+                     <p class="t">${v.title}</p>
+            </a>
+          </div>
+        </li>
+                
+                `)
+            })
+
+        }
+
+
+
+            }
+}
+    new Like()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/me.js

@@ -0,0 +1,7 @@
+class me{
+    constructor() {
+        footer()
+    }
+}
+
+new me()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/mechanism.js

@@ -0,0 +1,24 @@
+class mechanism{
+    constructor() {
+        footer()
+        pHeader("机构")
+        this.getmechanism()
+    }
+    async getmechanism() {
+        let res = await indexServe.mechanism()
+        console.log(res)
+        res.forEach((v)=>{
+            $(".mechanism_list").append(`
+            <li>
+            <a href="./mechanism_info.html?id=${v.id}&t=${v.title}&type=mechanism">
+                <p>${v.title}</p>
+                <span>${v.quantity}</span>
+            </a>
+        </li>
+        `)
+        })
+    }
+
+}
+
+new mechanism()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/mechanism_info.js

@@ -0,0 +1,37 @@
+class Mechanism_info{
+    constructor() {
+        query("type")=="mechanism"
+            ? this.getmechanismList()
+            : this.getclassList()
+        pHeader(query("t"))
+        console.log()
+    }
+
+
+    async getmechanismList() {
+                 let res = await indexServe.mechanismList({
+                    page: 0,
+                    id: query("id")
+
+
+                });
+                 console.log(res)
+                    item(".list_a", res.data)
+            }
+
+
+
+    async getclassList() {
+                 let res = await indexServe.classList({
+                    page: 0,
+                    id: query("id")
+
+
+                });
+                 console.log(res)
+                    item(".list_a", res.data)
+            }
+
+
+        }
+new Mechanism_info()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/model.js

@@ -0,0 +1,15 @@
+class model{
+    constructor() {
+        footer()
+        pHeader("模特")
+        this.getAllModel()
+    }
+    async getAllModel() {
+        let data = await indexServe.allModel()
+        console.log(data)
+        modellist(".hot_models",data.hot_models)
+        modellist(".newest",data.newest)
+    }
+}
+
+new model()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/model_info.js

@@ -0,0 +1,27 @@
+class Model_info{
+    constructor() {
+        this.getModel_info()
+        pHeader(query("t"))
+    }
+    async getModel_info(){
+        let res =await  indexServe.modelList({
+            page:0,
+            id:query("id")
+        })
+
+        console.log(query("id"))
+            $('.content').prepend(`
+            <div class="model_info_header">
+            <img src="${res.model_info.portrait}" alt="">
+            <div class="right_text">
+                <p>${res.model_info.name}</p>
+                <span>${res.model_info.explain}</span>
+                </div>
+                </div> `)
+        item(".modo___aaa",res.data)
+        modellist(".models_list_a",res.similar)
+
+    }
+
+}
+new Model_info()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/page/search.js

@@ -0,0 +1,37 @@
+class search {
+    constructor() {
+        this.getsearch()
+    }
+
+    getsearch() {
+        $(".ccc").click(
+            async () => {
+                let data = await indexServe.search({
+                        keyword: $('.search_aaa').val(),
+                    }
+                )
+                console.log(data)
+                data.forEach(v => {
+                    $(".recmm").append(`
+                  <li>
+                 <div class="newest_img">
+                    <a href="./info.html?id=${v.id}">
+                    <img src="${v.preview}" alt="">
+                    
+                    </a>
+                </div>
+                <div class="newest_text">
+                    <div class="t">${v.title}</div>
+                  
+                  
+                  `)
+                })
+            })
+                $(".icon-back1").click(function (){
+                   window.location.replace("index.html")
+                })
+    }
+}
+
+new search
+

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/serve/IndexServe.js

@@ -0,0 +1,74 @@
+
+class IndexServe {
+  async index(params = {}) {
+    return await ajax.get({
+      url: config.urlList.index,
+      data: params,
+    })
+  }
+
+  async info(params = {}) {
+    return await ajax.get({
+      url: config.urlList.info,
+      data: params,
+    })
+  }
+
+  async classList(params = {}) {
+    return await ajax.get({
+      url: config.urlList.classList,
+      data: params,
+    })
+  }
+
+  async type(params = {}) {
+    var data = await ajax.get({
+      url: config.urlList.type,
+      data: params,
+    });
+
+    data.principal.forEach(v => {
+      v.content = []
+      v.total_page = 0
+    });
+
+    data.additional.forEach(v => {
+      v.content = []
+      v.total_page = 0
+    });
+
+    return data
+  }
+  async search(params = {}) {
+    return await ajax.get({
+      url: config.urlList.search,
+      data: params,
+    })
+  }
+  async mechanism(params = {}) {
+    return await ajax.get({
+      url: config.urlList.mechanism,
+      data: params,
+    })
+  }
+  async mechanismList(params = {}) {
+    return await ajax.get({
+      url: config.urlList.mechanismList,
+      data: params,
+    })
+  }
+  async modelList(params = {}) {
+    return await ajax.get({
+      url: config.urlList.modelList,
+      data: params,
+    })
+  }
+  async allModel(params = {}) {
+    return await ajax.get({
+      url: config.urlList.allModel,
+      data: params,
+    })
+  }
+}
+
+var indexServe = new IndexServe();

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/utils/utils.js

@@ -0,0 +1,340 @@
+class Utils {
+    constructor() {
+    }
+
+    query(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return decodeURI(r[2]);
+        return null;
+    }
+
+    footer() {
+        var footerList = [
+            {title: '首页', img: 'icon-home', isActve: true, url: './index.html'},
+            {title: '机构', img: 'icon-jigou', isActve: false, url: './mechanism.html'},
+            {title: '模特', img: 'icon-me', isActve: false, url: './model.html'},
+            {title: '我的', img: 'icon-wo', isActve: true, url: './mes.html'},
+        ];
+
+        // 当前访问的页面地址
+        var currentUrl = location.href.match(/page\/([\s\S]*?).html/)[1]
+
+        $("body").append(`
+      <ul class="footer">
+        ${
+            footerList.map((v, i) => {
+                return `<li class="${v.url.includes(currentUrl) ? 'footer_active' : ''}">
+                <a href="${v.url}">
+                  <i class="iconfont ${v.img}"></i>
+                  <p>${v.title}</p>
+                </a>
+            </li>`
+            }).toString().replaceAll(",", "")
+        }
+      </ul>
+    `)
+    }
+
+
+    item(father, data) {
+        var li = ""
+        data.forEach((v, i) => {
+            li += `
+         <li>
+          <div class="newest_img">
+            <a href="./info.html?id=${v.id}&img=${v.preview}">
+              <img src="${v.preview}" alt="">
+              <span>${v.total}</span>
+            </a>
+          </div>
+          <div class="newest_text">
+            <div class="t">${v.title}</div>
+            ${
+                v.user.length != 0
+                    ? `<div class="source">${v.user}</div>`
+                    : ''
+            }
+            
+            ${
+                v.source.length != 0
+                    ? `<div class="source">${v.source}</div>`
+                    : ''
+            }
+          </div>
+         
+          <div class="tags">
+           ${
+                v.tags.map((item) => {
+                    return ` <a class="tags_item" href="mechanism_info.html?id=${item.id}&type=tags&t=${item.title}">${item.title}</a>`
+                }).toString().replaceAll(",", "")
+            }
+          </div>
+        </li>
+      `
+        })
+        $(father).append(li)
+
+    }
+
+    pHeader(title, right_action = "") {
+        $("body").prepend(`
+        <div class="pub_header themeColor padding_16">
+           <div class="back">
+             <i class="iconfont icon-back1"></i>
+             <span>${title}</span>
+           </div>
+      
+           <div class="right_action">
+              ${right_action}
+           </div>
+      
+         </div>
+    `);
+
+        $(".pub_header .icon-back1").click(() => history.back())
+
+        if ($(".icon-home").length != 0) {
+            $(".icon-home").click(() => location.href = "./index.html")
+        }
+    }
+
+    initPhotoSwipeFromDOM(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) {
+                    console.log(items[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);
+        }
+    }
+
+    get_storage(name) {
+        return JSON.parse(localStorage.getItem(name))
+    }
+
+    set_storage(name, value) {
+        localStorage.setItem(name, JSON.stringify(value))
+    }
+
+
+    modellist(father, data) {
+        console.log(data)
+        var li = ""
+        data.forEach((v, i) => {
+            li += `
+      <li class="mo_item">
+          <a href="./model_info.html?id=${v.id}&t=${v.title}">
+           <div class="mo_top">
+               <img src="${v.preview}" alt="">
+              ${v.total.length != 0 ? `<span>${v.total}</span>` : ``}
+           </div>
+            <p>${v.title}</p>
+           </a>
+        </li>
+      `
+
+        })
+        $(father).append(li)
+    }
+
+
+}
+
+var {
+    footer, query,
+    item, pHeader,
+    initPhotoSwipeFromDOM, get_storage,
+    set_storage,
+    modellist
+} = new Utils();

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/agreement.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>agreement</title>
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/agreement.css">
+  <script src="../js/lib/rem.js"></script>
+</head>
+<body>
+<div class="agreement padding_16">
+  <span>用户须知</span>
+  <p>1：图片都来源于互联网，如果存在版权问题和纠纷，请通过电话或者邮箱联系我们，我们也会停止相应资源的展示下载等一切行为！</p>
+  <p>2：本App所有资源提供一切免费的下载，不存在任何的收费或者需要VIP的行为</p>
+  <p>3：使用过程中请勿随意传播资源，有任何问题可以及时给予我们反馈</p>
+  <p>4：本App内所有内容都符合法律法规，不存在少儿不宜的内容和信息等资源，如果有请及时反馈，我们会第一时间中止违规内容的展示</p>
+  <span>产品特点</span>
+  <p>1：海量的超高清图集，图片画质超清晰、全部超大尺寸或原尺寸的图片。目前已经收录35804套图集，共计：197.4394万张高清图片，每周新增约100套+图集！</p>
+  <p>2：在线浏览超高品质的图集，超一流的用户体验！一个帐号，电脑、手机、平板任性浏览！还可以收藏自己喜欢的图集，方便下次仔细欣赏。当然您也可以一键下载图集！</p>
+  <p>3：全网最专业的图集收集整理网站！中国的、日韩的、欧美的、泰国的，应有尽有。全部都是我们精心整理的，按人物、机构、标签的精准确分类！</p>
+  <p>4：特意开发的巧遇功能，随机从我们精心筛选的数千套图集里推送给你直接浏览体验。最贴心、好用、好看的功能，所有付费用户均可使用！</p>
+</div>
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/agreement.js"></script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/edit.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Title</title>
+  <script src="../js/lib/rem.js"></script>
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+  <link rel="stylesheet" href="https://smallsea2016.gitee.io/lui/css/lui.css">
+  <link rel="stylesheet" href="../css/photoswipe.css">
+  <link rel="stylesheet" href="../css/default-skin.css">
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/edit.css">
+
+</head>
+<body>
+
+
+
+<div class="content padding_16">
+  <p>点击删除以下分类</p>
+  <ul class="yx">
+
+  </ul>
+
+  <p>点击添加以下分类</p>
+  <ul class="dx">
+    <li></li>
+  </ul>
+</div>
+
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/photoswipe.min.js"></script>
+<script src="../js/lib/photoswipe-ui-default.min.js"></script>
+
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/edit.js"></script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/index.html

@@ -0,0 +1,81 @@
+<!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/lib/rem.js"></script>
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+  <link rel="stylesheet" href="https://smallsea2016.gitee.io/lui/css/lui.css">
+  <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.7.5/swiper-bundle.css" rel="stylesheet">
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/index.css">
+</head>
+<body>
+
+
+<div class="header">
+  <div class="header_search themeColor padding_16">
+    <i class="iconfont icon-taozi1"></i>
+    <div class="search">
+      <i class="iconfont icon-search"></i>
+      <span>198万张图，有你想要的...</span>
+    </div>
+    <i class="iconfont icon-wo"></i>
+  </div>
+  <div class="header_menu padding_16">
+    <ul></ul>
+    <a href="./edit.html"><i class="iconfont icon-edit"></i></a>
+  </div>
+</div>
+<div class="content ">
+  <div class="swiper-container page-container">
+    <div class="swiper-wrapper page-wrapper">
+      <div class="swiper-slide home">
+
+        <div class="modelList">
+
+          <div class="swiper-container model-container">
+            <div class="swiper-wrapper model-wrapper">
+
+            </div>
+          </div>
+
+        </div>
+
+        <div class="list padding_16">
+          <div class="title">
+            <i class="iconfont "></i>
+            <span>最新收录</span>
+          </div>
+          <ul class="list_fa news"></ul>
+        </div>
+
+
+        <div class="list padding_16">
+          <div class="title">
+            <i class="iconfont "></i>
+            <span>今日推荐</span>
+          </div>
+          <ul class="list_fa remm"></ul>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.7.5/swiper-bundle.min.js"></script>
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/index.js"></script>
+
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/info.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Title</title>
+  <script src="../js/lib/rem.js"></script>
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+  <link rel="stylesheet" href="https://smallsea2016.gitee.io/lui/css/lui.css">
+  <link rel="stylesheet" href="../css/photoswipe.css">
+  <link rel="stylesheet" href="../css/default-skin.css">
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/info.css">
+</head>
+<body>
+<div class="content">
+
+  <div class="info_img"></div>
+
+  <i class="iconfont icon-xiangxia "></i>
+
+  <div class="list padding_16">
+    <div class="title">
+      <i class="iconfont "></i>
+      <span>推荐写真</span>
+    </div>
+    <ul class="list_fa tuijian"></ul>
+  </div>
+
+  <div class="list padding_16">
+    <div class="title">
+      <i class="iconfont "></i>
+      <span>相关写真</span>
+    </div>
+    <ul class="list_fa xianguan"></ul>
+  </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>
+
+</div>
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/photoswipe.min.js"></script>
+<script src="../js/lib/photoswipe-ui-default.min.js"></script>
+
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/info.js"></script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/like.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>me</title>
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/like.css">
+  <script src="../js/lib/rem.js"></script>
+</head>
+<body>
+<div class="content">
+  <ul>
+    <div class="nodata">
+      <i class="iconfont icon-wushuju"></i>
+      <p>暂无收藏</p>
+    </div>
+
+    <div class="list padding_16" style="width: 100%">
+      <div class="title">
+        <i class="iconfont "></i>
+      </div>
+      <ul class="list_fa like_li">
+
+
+      </ul>
+    </div>
+  </ul>
+
+
+</div>
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/like.js"></script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/mechanism.html

@@ -0,0 +1,30 @@
+<!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>mechanism</title>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/lui.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/mechanism.css">
+    <script src="../js/lib/rem.js"></script>
+</head>
+<body>
+<div class="content_theme1">
+    <ul class="mechanism_list">
+
+    </ul>
+</div>
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/mechanism.js"></script>
+
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/mechanism_info.html

@@ -0,0 +1,34 @@
+<!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>mechanism_info</title>
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/lui.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/mechanism_info.css">
+  <script src="../js/lib/rem.js"></script>
+</head>
+<body>
+<div class="content ma-top">
+  <div class="list padding_16">
+    <div class="title">
+      <i class="iconfont"></i>
+      <span></span>
+    </div>
+    <ul class="list_fa list_a"></ul>
+  </div>
+</div>
+
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/mechanism_info.js"></script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/mes.html

@@ -0,0 +1,77 @@
+<!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>me</title>
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+  <link rel="stylesheet" href="../css/clear.css">
+  <link rel="stylesheet" href="../css/public.css">
+  <link rel="stylesheet" href="../css/me.css">
+  <link rel="stylesheet" href="../css/lui.css">
+  <script src="../js/lib/rem.js"></script>
+</head>
+<body>
+<div class="header">
+  <i class="iconfont icon-wo"></i>
+  <p>我的</p>
+</div>
+<div class="content">
+  <ul>
+    <li class="list_item">
+      <a href="./like.html">
+        <div class="item_left">
+          <i class="iconfont icon-zuji"></i>
+          <span>我的收藏</span>
+        </div>
+        <i class="iconfont icon-qianjin-tongyong"></i>
+      </a>
+    </li>
+    <li class="list_item">
+      <a href="">
+        <div class="item_left">
+          <i class="iconfont icon-guanyu"></i>
+          <span>关于我们</span>
+        </div>
+        <i class="iconfont icon-qianjin-tongyong"></i>
+      </a>
+    </li>
+    <li class="list_item">
+      <a href="./agreement.html">
+        <div class="item_left">
+          <i class="iconfont icon-xieyiguanli"></i>
+          <span>用户协议</span>
+        </div>
+        <i class="iconfont icon-qianjin-tongyong"></i>
+      </a>
+    </li>
+    <li class="list_item">
+      <a href="">
+        <div class="item_left">
+          <i class="iconfont icon-shengji"></i>
+          <span>检测升级</span>
+        </div>
+        <i class="iconfont icon-qianjin-tongyong"></i>
+      </a>
+    </li>
+    <li class="list_item">
+      <a href="">
+        <div class="item_left">
+          <i class="iconfont icon-clean"></i>
+          <span>清除缓存</span>
+        </div>
+        <i class="iconfont icon-qianjin-tongyong"></i>
+      </a>
+  </ul>
+</div>
+
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/me.js"></script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/model.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>model</title>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/lui.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/model.css">
+
+    <script src="../js/lib/rem.js"></script>
+</head>
+<body>
+<div class="content padding_16">
+    <div class="title">热门模特</div>
+    <ul class="model_list hot_models">
+
+    </ul>
+
+    <div class="title">最新模特</div>
+    <ul class="model_list newest">
+
+    </ul>
+</div>
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/model.js"></script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/model_info.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>model_info</title>
+    <script src="../js/lib/rem.js"></script>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="https://smallsea2016.gitee.io/lui/css/lui.css">
+    <link rel="stylesheet" href="../css/photoswipe.css">
+    <link rel="stylesheet" href="../css/default-skin.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/model_info.css">
+</head>
+<body>
+<div class="content padding_16">
+    <div class="list">
+        <div class="title">
+            <i class="iconfont "></i>
+            <span>最新收录</span>
+        </div>
+        <ul class="list_fa modo___aaa"></ul>
+    </div>
+    <div class="title_size">类似模特</div>
+    <ul class="model_list models_list_a">
+
+    </ul>
+
+</div>
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/photoswipe.min.js"></script>
+<script src="../js/lib/photoswipe-ui-default.min.js"></script>
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/model_info.js"></script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/page/search.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>search</title>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/lui.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/search.css">
+    <script src="../js/lib/rem.js"></script>
+</head>
+<body>
+<div class="header">
+    <div class="header_search themeColor padding_16">
+        <i class="iconfont icon-back1"></i>
+        <div class="search">
+            <i class="iconfont icon-search"></i>
+            <input type="text" placeholder="请输入搜索关键字" class="search_aaa">
+        </div>
+        <i class="iconfont icon-search ccc"></i>
+    </div>
+
+</div>
+<div class="content">
+    <div class="list padding_16">
+        <div class="title">
+            <i class="iconfont "></i>
+        </div>
+        <ul class="list_fa recmm"></ul>
+    </div>
+</div>
+</body>
+<script src="../js/lib/jquery.min.js"></script>
+<script src="../js/lib/lui.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/config/config.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/serve/IndexServe.js"></script>
+<script src="../js/page/search.js"></script>
+</html>