first commit

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/page/edit.css

@@ -0,0 +1,24 @@
+@import "../public/_.css";
+
+.title {
+    padding: 0 15px;
+    font-size: 16px;
+    font-weight: 400;
+    padding-top: 20px;
+    margin-bottom: 10px;
+}
+
+.list {
+    padding: 0 15px;
+    display: flex;
+    flex-wrap: wrap;
+}
+.list li {
+    padding: 5px 10px;
+    font-size: 14px;
+    background: var(--themeColor);
+    margin-right: 10px;
+    color: #fff;
+    border-radius: 20px;
+    margin-bottom: 7px;
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/page/index.css

@@ -0,0 +1,140 @@
+@import "../public/_.css";
+
+.header {
+    position: fixed;
+    width: 100%;
+    height: 1.6rem;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+}
+.header .header_top {
+    background: var(--themeColor);
+    height: 0.88rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.3rem;
+}
+.header .header_top>i {
+    font-size: 0.45rem;
+    color: var(--whiteColor);
+}
+.header .header_top .search {
+    flex: 1;
+    background: var(--whiteColor);
+    height: 0.6rem;
+    border-radius: 0.6rem;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+}
+.header .header_top .search i {
+    color: var(--textColor) !important;
+    font-size: 0.26rem !important;
+    margin-right: 0.1rem;
+    padding-top: 0.02rem;
+    margin-left: 0.26rem;
+}
+.header .header_top .search span {
+    font-size: var(--f12);
+    color: var(--textColor);
+}
+.header .header_menu {
+    height: 0.72rem;
+    display: flex;
+    align-items: center;
+    background: #fe7fa2;
+}
+.header .header_menu a {
+    color: #fff;
+    text-decoration: none;
+    width: 0.8rem;
+    height: 0.72rem;
+    text-align: center;
+    line-height: 0.72rem;
+}
+.header .header_menu ul {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow-x: scroll;
+    padding-left: 0.3rem;
+}
+.header .header_menu ul .active {
+    color: var(--whiteColor) !important;
+}
+.header .header_menu ul li {
+    font-size: 0.26rem;
+    margin-right: 0.26rem;
+    color: #d3d2d2;
+    flex-shrink: 0;
+}
+
+.content {
+    margin-top: 1.6rem;
+}
+
+.swiper-slide {
+    font-size: 20px;
+    height: calc(100vh - 2.6rem);
+    overflow-y: scroll;
+}
+.swiper-wrapper ul{
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.swiper-wrapper ul li {
+    width: 48%;
+    flex-shrink: 0;
+    margin-bottom: 0.24rem;
+}
+.swiper-wrapper ul li .img{
+    position: relative;
+}
+.swiper-wrapper ul li .img img{
+    width: 100%;
+}
+.swiper-wrapper ul li .img span{
+    bottom: 0.1rem;
+    right: 0.16rem;
+    position: absolute;
+    font-size: 0.24rem;
+    background: var(--themeColor);
+    color: #fff;
+    padding: 0.02rem 0.12rem;
+    border-radius: 0.16rem;
+}
+
+.swiper-wrapper ul li .title{
+    font-size: 0.34rem;
+    font-weight: 400;
+    margin-top: 0.2rem;
+    margin-bottom: .12rem;
+}
+.swiper-wrapper ul li .model,
+.swiper-wrapper ul li .jg{
+    font-size: 0.28rem;
+    color: #bdb7b7;
+    margin-bottom: .12rem;
+}
+.swiper-wrapper ul li .tag{
+    margin-top: 0.1rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+.swiper-wrapper ul li .tag a{
+    font-size: 0.24rem;
+    flex-shrink: 0;
+    padding: 0.08rem 0.18rem;
+    background: var(--themeColor);
+    margin-right: 0.1rem;
+    color: #fff;
+    border-radius: 0.2rem;
+    margin-bottom: 0.1rem;
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/page/info.css

@@ -0,0 +1,5 @@
+@import "../public/_.css";
+
+img {
+    width: 100%;
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/page/institution.css

@@ -0,0 +1,5 @@
+@import "../public/_.css";
+
+h1 {
+
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/page/model.css

@@ -0,0 +1,5 @@
+@import "../public/_.css";
+
+h1 {
+
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/page/my.css

@@ -0,0 +1,5 @@
+@import "../public/_.css";
+
+h1 {
+
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/public/_.css

@@ -0,0 +1,4 @@
+@import "./color.css";
+@import "./size.css";
+@import "./utils.css";
+@import "./normalize.css";

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/public/color.css

@@ -0,0 +1,6 @@
+:root {
+    --themeColor: #fb7299;
+    --whiteColor: #fff;
+    --blackColor: #000;
+    --textColor: #999;
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/public/normalize.css

@@ -0,0 +1,404 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+body {
+  font-size: 0;
+}
+
+html {
+  line-height: 1;
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body,
+ul,
+li,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.content {
+  margin-top: 1rem;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+  text-decoration: none;
+  color: #000;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/public/size.css

@@ -0,0 +1,15 @@
+:root {
+   --f12: .24rem;
+   --f13: .26rem;
+   --f14: .28rem;
+   --f15: .3rem;
+   --f16: .32rem;
+   --f17: .34rem;
+   --f18: .36rem;
+   --f19: .38rem;
+   --f20: .4rem;
+   --f21: .42rem;
+   --f22: .44rem;
+   --f23: .46rem;
+   --f24: .48rem;
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/css/public/utils.css

@@ -0,0 +1,65 @@
+.clear {
+    clear: both;
+}
+
+.footer {
+    border-top: 0.02rem solid #e2e2e2;
+    position: fixed;
+    width: 100%;
+    height: 1rem;
+    bottom: 0;
+    left: 0;
+    background: #fff;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+.footer li {
+    text-align: center;
+}
+.footer .active a {
+    color: var(--themeColor);
+}
+.footer li a{}
+.footer li a i {}
+.footer li a p {
+    font-size: 0.24rem;
+    margin-top: 0.04rem;
+}
+
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+.header_pub {
+    height: 0.9rem;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    background: var(--themeColor);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+.header_pub .left {
+    font-size: .36rem;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+.header_pub .left i{
+    font-size: .4rem;
+    color: #fff;
+}
+.header_pub .left span{
+    flex: 1;
+}

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/config/index.js

@@ -0,0 +1,39 @@
+// 放程序配置的，比如接口地址
+var config = {
+    devBaseUrl: 'http://127.0.0.1:3000/api/json',
+    testBaseUrl: 'http://127.0.0.1:3000/api/json/test',
+    prodBaseUrl: 'http://www.abc.com/api/json',
+    stage: 'dev',  // dev test prod
+    urlList: {
+        classList: '/classList',
+        info: '/info',
+        type: '/class',
+        index: '/index'
+    },
+    getBaseUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl;
+                break;
+            case "test":
+                return this.testBaseUrl;
+
+                break;
+            case "prod":
+                return this.prodBaseUrl;
+                break;
+
+            default:
+                break;
+        }
+    }
+}
+
+// 基地址
+// 三个
+//  dev 开发阶段 http://127.0.0.1:3000/api/json/dev
+//  test 测试阶段 http://127.0.0.1:3000/api/json/test
+//  prod 上线阶段 http://www.abc.com/api/json
+
+// http://127.0.0.1:3000/api/json   /classList
+// http://127.0.0.1:3000/api/json   /info

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/http/index.js

@@ -0,0 +1,77 @@
+class Http {
+    defaultOption = {
+        timeout: 6000,
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        }
+    }
+
+    constructor() {
+        this.xhr = new XMLHttpRequest()
+    }
+
+    get(par) {
+        return new Promise((success, error) => {
+            this.setOption(par)
+            let urlParams = ""
+            for (const key in par.data) {
+                urlParams += `&${key}=${par.data[key]}`
+            }
+            urlParams = urlParams.replace("&", "")
+            this.xhr.open("GET", `${config.getBaseUrl()}${par.url}?${urlParams}`)
+            this.xhr.timeout = this.defaultOption.timeout
+            this.setHeader(par.headers)
+            this.xhr.send()
+            this.statechange(success, error);
+        })
+    }
+
+    post(par) {
+        return new Promise((success, error) => {
+            this.setOption(par)
+            this.xhr.open("POST", par.url)
+            this.xhr.timeout = this.defaultOption.timeout
+            this.setHeader(par.headers)
+            this.xhr.send(JSON.stringify(par.data))
+            this.statechange(success, error);
+        })
+    }
+
+    setOption(par) {
+        this.defaultOption.timeout = par.timeout || this.defaultOption.timeout
+        // ....
+    }
+
+    setHeader(headerObject = {}) {
+        Object.assign(headerObject, this.defaultOption.headers)
+        for (const key in headerObject) {
+            this.xhr.setRequestHeader(key, headerObject[key]);
+        }
+    }
+
+    statechange(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    let data = JSON.parse(this.xhr.response)
+                    switch (data.status) {
+                        case 200:
+                            success(data.result)
+                            break;
+                        case 404:
+                            alert(data.msg)
+                            throw new Error(data.msg)
+                            break;
+                        default:
+                            break;
+                    }
+                  
+                } else {
+                    error(this.xhr)
+                }
+            }
+        }
+    }
+}
+
+var http = new Http()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/edit.js

@@ -0,0 +1,32 @@
+class Edit {
+    constructor() {
+        header("分类编辑")
+        // additional 可选菜单
+        // principal 已选菜单
+        this.renderList()
+    }
+
+    renderList() {
+        $(".principal").html()
+        $(".additional").html()
+
+        $(".principal").html(getItem("principal").map(v => `<li>${v.title}</li>`))
+        $(".additional").html(getItem("additional").map(v => `<li>${v.title}</li>`))
+        _(".principal li").tap(({v,i}) => i != 0 ? this.clickEvent("principal", "additional", {v,i}) : null )
+        _(".additional li").tap(({v,i}) => this.clickEvent("additional", "principal", {v,i}))
+        
+    }
+
+    clickEvent(principal, additional, item) {
+        let {v,i} = item;
+        // 先把数据添加到 可选菜单 中
+        let getAdditional = getItem(additional)
+        getAdditional.push(getItem(principal)[i])
+        setItem(additional,getAdditional)
+      
+        setItem(principal,getItem(principal).filter(item => v.innerText != item.title))
+        this.renderList()
+    }
+}
+
+new Edit()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/index.js

@@ -0,0 +1,121 @@
+class Index {
+    constructor() {
+        // console.log(config.getBaseUrl());
+        // this.getClassList()
+        this.index = 0;
+        this.principal = [];
+        this.GetType()
+        this.initSwiper()
+
+        footer()
+    }
+
+    initSwiper() {
+        var self = this;
+        this.swiper = new Swiper('.swiper', {
+            direction: 'horizontal',
+            on: {
+                slideChangeTransitionStart: function () {
+                    _(".header_menu ul li")[this.activeIndex].addClass("active")
+                    .siblings().removeClass("active");
+                    self.index = this.activeIndex
+                    if (this.activeIndex != 0) {
+                        self.getClassList()
+                    }
+                },
+            },
+        })
+    }
+
+    async GetType() {
+       
+        // 第一次访问网页获取分类
+        if (!getItem("principal")) {
+            let { principal, additional } = await indexServe.type();
+            this.principal = principal
+
+            setItem("principal", principal)
+            setItem("additional", additional)
+        } else {
+            this.principal = getItem("principal")
+        }
+
+        this.principal.forEach((v, i) => {
+            $(".header_menu ul").html(`
+                <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `);
+
+            $(".swiper-wrapper").html(`
+              <div class="swiper-slide">
+                <ul></ul>
+              </div>
+            `)
+        });
+
+        _(".swiper-wrapper .swiper-slide").forEach(v => {
+            v.onscroll = () => {
+                const {clientHeight, scrollHeight, scrollTop} = v;
+                const distance = scrollHeight- scrollTop - clientHeight;
+                if(distance <= 0) {
+                    if (this.index != 0) {
+                        this.principal[this.index].page += 1;
+                        if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                            this.getClassList('load_more')
+                        } else {
+                            // 暂无数据的样式
+                        }
+                    }
+                }
+            }
+        })
+
+
+        _(".header_menu ul li").tap(( { v, i }) => {
+            // 链式调用
+            this.swiper.slideTo(i)
+        })
+
+        this.getIndex();
+    }
+
+    async getClassList(type = 'click') {
+       
+        let loadData = async () => {
+            let res = await indexServe.classList({
+                id: this.principal[this.index].id,
+                page: this.principal[this.index].page
+            });
+    
+            this.principal[this.index].content = res.data;
+            this.principal[this.index].total_page = res.total_page
+            console.log(this.principal);
+    
+            item(
+                _(".swiper-wrapper .swiper-slide ul")[this.index],
+                this.principal[this.index].content
+            )
+        }
+        this.principal=getItem("principal")
+        console.log(getItem("principal"))
+        if (type == 'click') {
+            if (this.principal[this.index].content.length == 0) {
+                loadData()
+
+            }
+        } else {
+            loadData()
+        }
+
+        
+    }
+
+    async getIndex() {
+        let res = await indexServe.index();
+        console.log("index: ",res);
+
+        item(_(".swiper-wrapper .swiper-slide ul")[0],res.list)
+    }
+
+}
+
+new Index()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/info.js

@@ -0,0 +1,33 @@
+class Info {
+    constructor() {
+        this.page = 0;
+        this.pageRes = []
+        header(
+            query("title"), 
+            '<i class="iconfont icon-xin"></i>'
+        )
+        this.getInfo()
+    }
+
+    async getInfo() {
+        let res = await indexServe.info({
+            id: query("id"),
+            // quantity: parseInt(query("quantity") / 20) 
+            quantity: query("quantity")
+        });
+        
+        for (let i = 0; i < res.length; i+=10) {
+            this.pageRes.push(res.slice(i, i + 10))
+        }
+        this.renderPage()
+    }
+
+    renderPage() {
+        $(".content").html(
+            this.pageRes[this.page].map(v => {
+                return `<img src="${v}" alt="">`
+            })
+        )
+    }
+}
+new Info()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/institution.js

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

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/model.js

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

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/my.js

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

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/serve/index.js

@@ -0,0 +1,63 @@
+class IndexServe {
+
+    async info(data = {}, headers = {}) {
+        let http = new Http();
+        let res =  await http.get({
+            url: config.urlList.info,
+            data,
+            headers
+        });
+        http = null;
+        return res;
+    }
+
+    async classList(data = {}, headers = {}) {
+        let http = new Http();
+        let res =  await http.get({
+            url: config.urlList.classList,
+            data,
+            headers
+        });
+        http = null;
+        return res;
+    }
+
+    async index(data = {}, headers = {}) {
+        let http = new Http();
+        let res = await http.get({
+            url: config.urlList.index,
+            data,
+            headers
+        });
+        http = null;
+        return res;
+    }
+
+    async type(data = {}, headers = {}) {
+        let http = new Http();
+        let res =  await http.get({
+            url: config.urlList.type,
+            data,
+            headers
+        });
+        res.principal.unshift({
+            id: -1,
+            page: -1,
+            title: "首页"
+        });
+        res.principal.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+
+        res.additional.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+        http = null;
+        return res;
+    }
+
+}
+
+var indexServe = new IndexServe()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/utils/index.js

@@ -0,0 +1,196 @@
+class Utils {
+
+    footer() {
+        var curretHref = location.href;
+        var footerList = [
+            { title: '首页', icon: 'home', href: 'index.html' },
+            { title: '机构', icon: 'jigou', href: 'institution.html' },
+            { title: '模特', icon: 'me', href: 'model.html' },
+            { title: '我的', icon: 'wo', href: 'my.html' },
+        ];
+
+        var html = `
+        <ul class="footer">
+            ${footerList.map(v => {
+            return `
+                    <li class="${curretHref.includes(v.href) ? 'active' : ''}">
+                        <a href="./${v.href}">
+                            <i class="iconfont icon-${v.icon}"></i>
+                            <p>${v.title}</p>
+                        </a>
+                    </li>
+                    `
+        })
+            }
+        </ul>
+        `;
+        $("body").insertAdjacentHTML("beforeend", html)
+    }
+
+    header(title = "", like = "") {
+        $("body").html(`
+            <div class="header_pub">
+                <div class="left">
+                    <i class="iconfont icon-back1"></i>
+                    <span class="ellipsis">${title}</span>
+                </div>
+                ${ like }
+                
+            </div>
+        `);
+
+        $(".header_pub .icon-back1").tap(() => {
+            history.back()
+        })
+    }
+
+    item(dom, data) {
+        data.forEach((v,i) => {
+            dom.html(`
+                <li>
+                    <a href="./info.html?id=${v.id}&quantity=${v.shuliang || v.total}&title=${encodeURIComponent(v.title)}">
+                        <div class="img">
+                            <img src="${v.img_src || v.preview}" alt="">
+                            <span>${v.shuliang || v.total}P</span>
+                        </div>
+                        <div class="title ellipsis">${v.title}</div>
+                        <div class="model ellipsis">${v.user || `模特：${(v?.renwulist.length != 0 ? v.renwulist[0].name : '')}`}</div>
+                        <div class="jg ellipsis">${v.source || `机构：${v.jigoulist[0].name}`}</div>
+                    </a>
+                    <div class="tag">
+                      ${
+                        (v.biaoqianlist || v.tags).map(item => {
+                            return `<a href="">${item.name || item.title}</a>`
+                         })
+                       }
+                    </div>
+                </li>
+            `)
+        })
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+
+
+    click(className, callback, type = "click",) {
+        $(`${className}`)[`on${type}`] = (event) => {
+            callback(event)
+        }
+    }
+
+    query(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null)
+            return decodeURIComponent(r[2]);
+        return null;
+    }
+
+    setItem(key, value) {
+        localStorage.setItem(
+            key, 
+            value.constructor == Object || value.constructor == Array 
+              ? JSON.stringify(value) 
+              : value 
+        )
+    }
+
+    getItem(key) {
+        return localStorage.getItem(key) == null ? false : JSON.parse(localStorage.getItem(key))
+    }
+
+    customMethods() {
+
+        NodeList.prototype.tap = function (callback) {
+            this.forEach((v, i) => bindElementClick(v, callback, i))
+            
+        }
+
+        Element.prototype.tap = function (callback) {
+            bindElementClick(this, callback)
+        }
+
+        var bindElementClick = (v, callback, i) => {
+            v.onclick = (e) => {
+                callback({ v, i, e })
+                
+            }
+        }
+
+
+
+        Element.prototype.html = function (html = "") {
+            if (html.length == 0) {
+                this.innerHTML = ""
+            } else {
+                this.innerHTML += html
+            }
+        }
+
+        Element.prototype.addClass = function (className) {
+            this.classList.add(className)
+            return this;
+        }
+
+
+        Element.prototype.siblings = function () {
+            return Array.from(this.parentElement.children).filter(v => v != this)
+        }
+
+        Array.prototype.removeClass = function (className) {
+            this.forEach(v => bindElementRemoveClass(v, className))
+            return this;
+        }
+
+        Element.prototype.removeClass = function (className) {
+            bindElementRemoveClass(this, className)
+            return this;
+        }
+
+        var bindElementRemoveClass = (v, className) => {
+            v.classList.remove(className)
+        }
+
+        Element.prototype.none = function () {
+            this.style.display = "none"
+            return this;
+        }
+
+        Element.prototype.show = function () {
+            this.style.display = "block"
+            return this;
+        }
+
+        Element.prototype.toggle = function () {
+            if (this.style.display == "none") {
+                this.style.display = "block"
+            } else {
+                this.style.display = "none"
+            }
+        }
+
+        Array.prototype.map = function (callback) {
+            let result = []
+            for (let index = 0; index < this.length; index++) {
+                result.push(callback(this[index], index, this))
+            }
+            return result.toString().replaceAll(",", "");
+        }
+    }
+
+
+}
+
+let { 
+    $, _, click, 
+    customMethods, query, footer,
+    item, header, setItem, getItem
+} = new Utils()
+customMethods()
+

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/utils/rem.js

@@ -0,0 +1,10 @@
+((w, d) => {
+    function setSize() {
+        var screenWidth = d.documentElement.clientWidth;
+        var currentFontSize = screenWidth * 100 / 750;
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/page/edit.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="../css/page/edit.css">
+</head>
+
+<body>
+
+   <div class="content">
+     <div class="title">已选菜单</div>
+     <ul class="list principal">
+     </ul>
+
+     <div class="title">可选菜单</div>
+     <ul class="list additional">
+     </ul>
+   </div>
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/index.js"></script>
+<script src="../js/page/edit.js"></script>
+
+</html>

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/page/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.css" rel="stylesheet">
+    <link rel="stylesheet" href="../css/page/index.css">
+</head>
+
+<body>
+    <div class="header">
+        <div class="header_top">
+            <i class="iconfont icon-taozi1"></i>
+            <div class="search">
+                <i class="iconfont icon-search"></i>
+                <span>200万张图，有你想要的...</span>
+            </div>
+            <i class="iconfont icon-wo"></i>
+        </div>
+        <div class="header_menu">
+            <ul>
+
+            </ul>
+            <a class="iconfont icon-edit" href="./edit.html"></a>
+        </div>
+    </div>
+
+    <div class="content">
+        <div class="swiper">
+            <div class="swiper-wrapper">
+              
+            </div>
+        </div>
+    </div>
+
+</body>
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.min.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/index.js"></script>
+<script src="../js/page/index.js"></script>
+
+</html>

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/page/info.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="../css/page/info.css">
+</head>
+
+<body>
+
+   <div class="content">
+      
+   </div>
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/index.js"></script>
+<script src="../js/page/info.js"></script>
+
+</html>

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/page/institution.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="../css/page/institution.css">
+</head>
+
+<body>
+   
+    <h1>机构</h1>
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/index.js"></script>
+<script src="../js/page/institution.js"></script>
+
+</html>

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/page/model.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="../css/page/model.css">
+</head>
+
+<body>
+   
+    <h1>模特</h1>
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/index.js"></script>
+<script src="../js/page/model.js"></script>
+
+</html>

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/page/my.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="../css/page/my.css">
+</head>
+
+<body>
+   
+    <h1>我的</h1>
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/index.js"></script>
+<script src="../js/page/my.js"></script>
+
+</html>

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/作业.txt

@@ -0,0 +1,31 @@
+详情页爱心的点击
+
+like: [
+    {
+        like: true
+        id: xxx,
+        title: xx,
+        quantity: xxx,
+        img_src: xxx
+    }
+]
+
+
+收藏页面：看视频有说明
+
+浏览器历史记录
+  history 
+
+  看视频有说明
+
+注意：接口后面有page就需要实现滚动加载或者点击按钮加载
+
+机构列表页
+  机构点击进去的详情页
+
+模特列表页
+  模特列表点击进去的详情页  
+
+搜索
+
+最近更新