first commit

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/.http

@@ -0,0 +1 @@
+GET http://127.0.0.1:3000/api/json/class HTTP/1.1

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/css/clear.css

@@ -0,0 +1,23 @@
+@import "./config.css";
+body,ul,li,p,h1,h2,h3,h4,h5,h6,figure {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-size: 0;
+}
+
+a {
+    text-decoration: none;
+    color: var(--blackColor);
+}
+
+li {
+    list-style: none;
+}
+
+::-webkit-scrollbar {
+    width: 0;
+    height: 0; 
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/css/config.css

@@ -0,0 +1,20 @@
+/*放全局颜色，尺寸等代码*/
+
+:root {
+    --themeColor: #fb7299;
+    --otherThemeColor: #fe7fa2;
+    --whiteColor: #fff;
+    --blackColor: #000;
+    --textColor: #999;
+
+    --fontSize12: 0.24rem;
+    --fontSize13: 0.26rem;
+    --fontSize14: 0.28rem;
+    --fontSize15: 0.3rem;
+    --fontSize16: 0.32rem;
+    --fontSize17: 0.34rem;
+    --fontSize18: 0.36rem;
+    --fontSize19: 0.38rem;
+    --fontSize20: 0.4rem;
+    --fontSize21: 0.42rem;
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/css/edit.css

@@ -0,0 +1,21 @@
+.menu {
+    padding: .4rem .3rem;
+}
+.menu .text{
+    font-size: .32rem;
+    font-weight: 400;
+    margin-bottom: .2rem;
+}
+.menu ul{
+    display: flex;
+    flex-wrap: wrap;
+}
+.menu ul li{
+    padding: .06rem .2rem;
+    font-size: .28rem;
+    background: var(--themeColor);
+    margin-right: .2rem;
+    color: #fff;
+    border-radius: .4rem;
+    margin-bottom: .14rem;
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/css/index.css

@@ -0,0 +1,93 @@
+@import "./config.css";
+
+.header {
+    position: fixed;
+    width: 100%;
+    height: 1.6rem;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+}
+
+.header .header_top {
+    background: var(--themeColor);
+    height: 0.88rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.3rem;
+}
+
+.header .header_top .icon-taozi1,
+.header .header_top .icon-wo {
+    font-size: 0.45rem;
+    color: var(--whiteColor);
+}
+
+.header .header_top .search {
+    flex: 1;
+    background: var(--whiteColor);
+    height: 0.6rem;
+    border-radius: 0.6rem;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.header .header_top .search i {
+    color: var(--textColor);
+    font-size: 0.26rem;
+    margin-right: .1rem;
+    margin-left: .26rem;
+    margin-top: .02rem;
+
+}
+
+.header .header_top .search span {
+    font-size: var(--fontSize12);
+    color: var(--textColor);
+}
+
+.header .header_menu {
+    height: 0.72rem;
+    display: flex;
+    align-items: center;
+    background: var(--otherThemeColor);
+    padding-left: 0.3rem;
+}
+
+.header .header_menu ul {
+    display: flex;
+    flex: 1;
+    overflow-x: scroll;
+}
+
+.header .header_menu ul li {
+    font-size: 0.26rem;
+    margin-right: 0.26rem;
+    color: var(--textColor);
+    flex-shrink: 0;
+}
+
+.header .header_menu .active {
+    color: var(--whiteColor);
+}
+
+.header .header_menu a {
+    color: var(--whiteColor);
+    width: 0.8rem;
+    height: 0.72rem;
+    text-align: center;
+    line-height: 0.72rem;
+}
+.content{
+    margin-top: 1.6rem;
+}
+.swiper{
+    font-size: .4rem;
+}
+.swiper.slide{
+    height: calc(100VH - 1.6rem - 1rem)!important; 
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/css/info.css

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

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/css/layout.css

@@ -0,0 +1,118 @@
+@import "./config.css";
+
+.footer {
+    position: fixed;
+    bottom: 0;
+    height: 1rem;
+    width: 100%;
+    background: var(--whiteColor);
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.footer li {
+    text-align: center;
+}
+
+.footer li .active i,
+.footer li .active p {
+    color: var(--themeColor);
+}
+
+.footer li a {}
+
+.footer li a i {}
+
+.footer li a p {
+    font-size: 0.24rem;
+    margin-top: 0.04rem;
+}
+
+.content{
+    margin-top: 0.9rem;
+    margin-bottom: 1rem;
+}
+
+
+.list {
+    display: flex;
+    justify-content: space-between;
+    padding: .16rem;
+    flex-wrap: wrap;
+}
+.list .item {
+    width: 49%;
+    margin-bottom: .24rem;
+}
+.list .item .img {
+    position: relative;
+}
+.list .item .img img {
+    width: 100%;
+}
+.list .item .img span {
+    position: absolute;
+    z-index: 1;
+    color: #fff;
+    right: .2rem;
+    bottom: .28rem;
+    font-size: .24rem;
+    background: var(--themeColor);
+    padding: .06rem .18rem;
+    border-radius: .6rem;
+}
+
+
+.list .item .text .title{
+    font-size: 0.34rem;
+    font-weight: 400;
+    margin-top: 0.2rem;
+}
+.list .item .text .model,
+.list .item .text .mechanism{
+    font-size: 0.28rem;
+    color: #bdb7b7;
+}
+
+.list .item .tags{
+    margin-top: 0.1rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+.list .item .tags a{
+    font-size: 0.24rem;
+    flex-shrink: 0;
+    padding: 0.08rem 0.18rem;
+    background: var(--themeColor);
+    margin-right: 0.1rem;
+    color: #fff;
+    border-radius: 0.2rem;
+    margin-bottom: 0.1rem;
+}
+
+
+.pub_title {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: .9rem;
+    background: var(--themeColor);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 .2rem;
+    box-sizing: border-box;
+}
+.pub_title i {
+    font-size: .4rem;
+}
+.pub_title span {
+    font-size: .36rem;
+    flex: 1;
+    margin-left: 0.28rem;
+    margin-right: 0.18rem;
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/css/me.css

@@ -0,0 +1,50 @@
+.me_top {
+    font-size: .4rem;
+    height: 4rem;
+    width: 100%;
+    background-color:var(--themeColor);
+    color: aliceblue;
+}
+
+.me_top i {
+    color:var(--whiteColor);
+    font-size: 1.4rem;
+    position: absolute;
+    left: 3.04rem;
+    line-height: 4rem;
+}
+
+.wode {
+    position: absolute;
+    left: 3.34rem;
+    top: 2.7rem;
+
+}
+
+ul {
+    font-size: .4rem;
+    margin-top: .1rem;
+    color:var(--textColor);
+}
+
+li  {
+    margin-top: .2rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+li a {
+    color:var(--textColor);
+}
+
+.my_list{
+    width: 100%;
+    margin-left: .1rem;
+}
+
+li i {
+    height: .4rem;
+    width: .4rem;
+    margin-right: .1rem;
+    line-height: .52rem;
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/css/mechanisminfo.css

@@ -0,0 +1,40 @@
+.detailed{
+    display: flex;
+    flex-wrap: wrap;
+}
+.photo{
+    width: 40%;
+    margin: 0 5%;
+}
+.introduce{
+    font-size: .5rem;
+
+}
+img{
+    width: 100%;
+}
+.mo{
+    font-size: 0.34rem;
+    font-weight: 400;
+    margin-top: 0.2rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ww,.mec{
+    font-size: 0.28rem;
+    color: #bdb7b7;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ee span{
+    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-10/项目练习/学生项目/薛涛/3.8/css/utils.css

@@ -0,0 +1,18 @@
+.top {
+    border-top: 0.02rem solid #e2e2e2;
+}
+.left {
+    border-left: 0.02rem solid #e2e2e2;
+}
+.right {
+    border-right: 0.02rem solid #e2e2e2;
+}
+.bottom {
+    border-bottom: 0.02rem solid #e2e2e2;
+} 
+
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/config/index.js

@@ -0,0 +1,45 @@
+// 全局js配置，一般用来配置接口的基地址，和 短地址 等一些...
+var config = {
+    // 开发阶段
+    devBaseUrl: 'http://127.0.0.1:3000/api/json',
+
+    // 测试阶段
+    testBaseUrl: 'http://127.0.0.2:8080/api/json',
+
+    // 正式阶段
+    prodBaseUrl: 'http://www.anc.com/api/json',
+
+    stage: 'dev',  // dev  test  prod
+
+    switchStage: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl
+                break;
+            case "test":
+                return this.testBaseUrl
+                break;
+            case "prod":
+                return this.prodBaseUrl
+                break;
+            default:
+                break;
+        }
+    },
+
+    apiList: {
+        index: '/index',
+        info: '/info',
+        mechanism: '/mechanism',
+        type: '/class',
+        classList: '/classList',
+        mechanismList:'/mechanismList'
+    },
+
+    footerArr: [
+        { title: '首页', href: 'index.html', icon: 'icon-home' },
+        { title: '机构', href: 'mechanism.html', icon: 'icon-jigou' },
+        { title: '模特', href: 'model.html', icon: 'icon-me' },
+        { title: '我的', href: 'me.html', icon: 'icon-wo' },
+    ]
+}

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/http/index.js

@@ -0,0 +1,58 @@
+class Http {
+
+    constructor() {
+        this.xhr = new XMLHttpRequest();
+    }
+
+    get(params) {
+        return new Promise((success, error) => {
+            var par = ""
+            for (const key in params.data) {
+                par += `&${key}=${params.data[key]}`
+            }
+            par = par.replace("&", "?")
+            this.xhr.open("GET", `${config.switchStage()}${params.url}${par}`)
+            this.xhr.send()
+
+            this.ReadyState(success, error)
+        })
+    }
+
+    post(params) {
+        return new Promise((success, error) => {
+            this.xhr.open("POST", `${params.url}`)
+            this.xhr.setRequestHeader('Content-Type', 'application/json');
+            this.xhr.send(JSON.stringify(params.data))
+            this.ReadyState(success, error)
+        })
+    }
+
+
+    ReadyState(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    var data = JSON.parse(this.xhr.response);
+
+                    switch (data.status) {
+                        case 200:
+                        success(data.result)
+                            break;
+                        case 404:
+                             alert(data.msg)
+                             throw new Error(data.msg)
+                            break;
+
+                        default:
+                            break;
+                    }
+                
+                } else {
+                    error(this.xhr)
+                }
+            }
+        }
+    }
+}
+
+

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/page/collection.js

@@ -0,0 +1,37 @@
+class Collection {
+
+    constructor() {
+        title("我的收藏")
+        this.likeArr = JSON.stringify(localStorage.getItem("like"))
+        this.likeArr
+    }
+
+    async getLike() {
+        var self = this;
+        if (localStorage.setItem("like") == null) {
+            var res = await IndexService.classList();
+            this.likeArr = res.likeArr
+            localStorage.setItem("like", JSON.stringify(this.likeArr))
+
+        }
+        else {
+            this.likeArr = JSON.parse(localStorage.setItem("like"))
+
+        }
+    }
+
+    renderlikeArr() {
+        this.likeArr.forEach(v => {
+            $(".content").innerHTML += `
+                  <li>${v}</li>
+                  `
+        });
+    }
+
+
+
+
+}
+
+
+new Collection()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/page/edit.js

@@ -0,0 +1,53 @@
+class Edit {
+    constructor() {
+        title("分类管理")
+        this.principal = JSON.parse(localStorage.getItem("principal"))
+        this.additional = JSON.parse(localStorage.getItem("additional"))
+
+        this.renderPage()
+    }
+
+    renderPage() {
+        $(".selected ul").innerHTML = ""
+        this.principal.forEach(v => {
+            $(".selected ul").innerHTML += `
+                <li>${v.title}</li>
+            `
+        });
+
+        $(".optional ul").innerHTML = ""
+
+        this.additional.forEach(v => {
+            $(".optional ul").innerHTML += `
+                <li>${v.title}</li>
+            `
+        });
+
+        click(".selected ul li", (v,i) => {
+            if (i != 0) {
+                this.additional.push(this.principal[i])
+                this.principal = this.principal.filter((val,index) => {
+                    return index != i
+                });
+
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+        
+                this.renderPage()
+            }
+        })
+
+        click(".optional ul li", (v,i) => {
+            this.principal.push(this.additional[i])
+            this.additional = this.additional.filter((val,index) => {
+                return index != i
+            });
+
+            localStorage.setItem("principal", JSON.stringify(this.principal))
+            localStorage.setItem("additional", JSON.stringify(this.additional))
+    
+            this.renderPage()
+        })
+    }
+}
+new Edit()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/page/index.js

@@ -0,0 +1,125 @@
+class Index {
+    constructor() {
+        this.index = 0;
+        this.principa = []
+        footer();
+        this.initSwiper();
+        this.getType().then(() => this.getIndex());
+        
+
+    }
+
+    async getType() {
+
+        // 本地无数值，那么发送请求
+        if (localStorage.getItem("principal") == null) {
+            var { principal, additional } = await indexService.type()
+            localStorage.setItem("principal", JSON.stringify(principal))
+            localStorage.setItem("additional", JSON.stringify(additional))
+        } else {
+            var principal = JSON.parse(localStorage.getItem("principal"))
+            var additional = JSON.parse(localStorage.getItem("additional"))
+        }
+      
+
+
+        this.principal = principal;
+
+        console.log(this.principal);
+
+        // TODO 改造这个代码，实现下面的作业
+        this.principal.forEach((v, i) => {
+            $(".header_menu ul").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`;
+            $(".swiper .swiper-wrapper").innerHTML += `
+                <div class="swiper-slide">
+                    <div class="list">
+                    </div>
+                </div>
+            `;
+        });
+
+
+        click(".header_menu ul li", (v, i) => {
+            _(".header_menu ul li").forEach(v => v.classList.remove("active"))
+            v.classList.add("active")
+            this.index = i
+            this.getClassList()
+            this.mySwiper.slideTo(i)
+        })
+
+        _(".swiper .swiper-wrapper .swiper-slide").forEach((v,i) => {
+            if (i != 0) {
+                v.onscroll = () => {
+                    const {clientHeight, scrollHeight, scrollTop} = v;
+                    var distance = scrollHeight- scrollTop - clientHeight;
+                    if (distance <= 0.5) {
+                        this.principal[this.index].page += 1
+                        if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                            this.getClassList("loadMore")
+                        }
+                    }
+                }
+            }
+        })
+    }
+
+    async getIndex() {
+        var res = await indexService.index()
+        this.principal[this.index].content = res.list
+        item(
+            _(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
+            this.principal[this.index].content
+        )
+    }
+
+    async getClassList(type = "click") {
+        
+
+        var getList = async () => {
+            var res = await indexService.classList({
+                page: this.principal[this.index].page,
+                id: this.principal[this.index].id
+            });
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ]
+            this.principal[this.index].total_page = res.total_page
+            console.log("getClassList: ", this.principal);
+
+            // 渲染页面（注意：把指定数组下标的content渲染到对应下标的 swiper-slide）
+            item(
+                _(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
+                this.principal[this.index].content
+            )
+        }
+
+        
+        if (type == "click") {
+            if (this.principal[this.index].content.length == 0 && this.index != 0) {
+                getList();
+            }
+        } else {
+            getList();
+        }
+    }
+
+
+    initSwiper() {
+        var self = this;
+        this.mySwiper = new Swiper('.swiper', {
+            direction: 'horizontal',
+            on: {
+                slideChangeTransitionEnd: function () {
+                    _(".header_menu ul li").forEach(v => v.classList.remove("active"))
+                    _(".header_menu ul li")[this.activeIndex].classList.add("active")
+
+                    self.index = this.activeIndex
+                    self.getClassList()
+                },
+            },
+        })
+    }
+}
+
+new Index()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/page/info.js

@@ -0,0 +1,71 @@
+class Info {
+    constructor() {
+        this.infoArr = []
+        this.likeArr = JSON.parse(JSON.stringify(localStorage.getItem("like")) ) == null 
+                        ? [] 
+                        : JSON.parse(JSON.stringify(localStorage.getItem("like")))
+
+        title(query("title"), `<i class="like iconfont icon-xin"></i>`)
+        this.getInfo()
+        this.like()
+    }
+
+    async getInfo() {
+        this.infoArr = await indexService.info({
+            id: query("id"),
+            quantity: query("quantity")
+        });
+
+        this.infoArr.forEach((v,i) => {
+            var img = document.createElement("img")
+            img.src = v;
+          
+            img.onload = () => {
+                 $(".imgList").innerHTML += `
+                    <figure>
+                        <a href="${v}" data-size="${img.width}x${img.height}">
+                            <img src="${v}" alt="${v}" />
+                        </a>
+                        <figcaption itemprop="caption description">${query("title")} ${i+1}P</figcaption>
+                    </figure>
+                  `
+            }
+        });
+
+        initPhotoSwipeFromDOM('.imgList');
+    }
+
+    like() {
+
+        var res = this.likeArr.filter((v,i) => {
+            return query("id") == v.id
+        });
+
+        if (res.length != 0) {
+            $(".like").classList.replace("icon-xin", "icon-aixin")
+        }
+
+
+        click(".like", () => {
+            if ($(".like").classList.contains("icon-xin")) {
+                $(".like").classList.replace("icon-xin", "icon-aixin")
+
+                this.likeArr.push({
+                    id: query("id"),
+                    quantity: query("quantity"),
+                    img: this.infoArr[0]
+                });
+              
+            } else {
+                $(".like").classList.replace("icon-aixin", "icon-xin")
+                this.likeArr = this.likeArr.filter((v,i) => {
+                    return query("id") != v.id
+                });
+            }
+
+            localStorage.setItem("like", JSON.stringify(this.likeArr))
+        })
+    }
+}
+
+new Info();

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/page/me.js

@@ -0,0 +1,10 @@
+class Me {
+
+    constructor() {
+        footer()
+        title("我的收藏")
+    }
+
+}
+
+new Me()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/page/mechanism.js

@@ -0,0 +1,10 @@
+class Mechanism {
+
+    constructor() {
+        footer()
+
+    }
+
+}
+
+new Mechanism()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/page/mechanisminfo.js

@@ -0,0 +1,36 @@
+
+class mechanismList {
+    constructor() {
+        title("机构详情")
+        this.page = 1
+
+        this.getmechanismList();
+    }
+
+    async getmechanismList() {
+        var self = this
+        var params = {
+            id: query("id"),
+            page: self.page
+        }
+        var res = await indexService.mechanismList(params)
+        console.log(res);
+        res.data.forEach((val) => {
+          
+            $(".detailed").innerHTML +=`
+            <div class="photo">
+                <img src="${val.preview}" alt="">
+                <div class="introduce">
+                    <span class="mo">${val.title}</span>
+                    <p class="mec">${val.user}</p>
+                </div>
+            </div>
+          `
+        })
+      
+    }
+    
+}
+
+
+new mechanismList()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/page/model.js

@@ -0,0 +1,10 @@
+class model {
+
+    constructor() {
+        footer()
+       
+    }
+
+}
+
+new model()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/service/index.js

@@ -0,0 +1,60 @@
+class IndexService {
+
+    async index(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.index,
+            data: params
+        });
+    }
+
+    async info(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.info,
+            data: params
+        });
+    }
+    
+    async mechanismList(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.mechanismList,
+            data: params
+        });
+    }
+    
+
+    
+    async classList(params = {}) {
+        return await (new Http()).get({
+            url: config.apiList.classList,
+            data: params
+        });
+    }
+
+    async type(params = {}) {
+        var res = await (new Http()).get({
+            url: config.apiList.type,
+            data: params
+        });
+      
+        res.principal.unshift({
+            id: null,
+            page: null,
+            title: "首页"
+        });
+
+        res.principal.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+        
+
+        res.additional.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+
+        return res
+    }
+}
+
+var indexService = new IndexService()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/utils/index.js

@@ -0,0 +1,116 @@
+class Utils {
+
+    footer() {
+        var html = `
+        <ul class="footer top">
+           ${config.footerArr.forH(v => {
+                return `<li>
+                            <a href="${v.href}" class="${location.href.includes(v.href) ? 'active' : ''}">
+                                <i class="iconfont ${v.icon}"></i>
+                                <p>${v.title}</p>
+                            </a>
+                        </li>`
+            })}
+            
+        </ul>
+        `
+
+        $("body").insertAdjacentHTML("beforeend", html);
+    }
+
+    item (father, data) {
+        father.innerHTML = ""
+        data.forEach(v => {
+            father.innerHTML+=
+            `
+            <div class="item">
+                <div class="img">
+                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
+                    <img src="${v.preview || v.img_src}" alt="">
+                    <span>${v.total || v.shuliang}P</span>
+                   </a>
+                </div>
+                <div class="text">
+                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
+                    <div class="title ellipsis">${v.title}</div>
+                    <div class="model ellipsis">${v.user || `模特: ${v.renwulist[0].name}`}</div>
+                    <div class="mechanism ellipsis">${v.source || `机构: ${v.jigoulist[0].name}`}</div>
+                   </a>
+                </div>
+               
+                   <div class="tags">
+                        ${
+                            (v.tags || v.biaoqianlist).forH(val => {
+                                return `
+                                    <a href="">${val.title || val.name}</a>
+                                `
+                            })
+                        }
+                    </div>
+            
+                
+            </div>
+            `
+        })
+    }
+
+    title(text = "", rightIcon = "") {
+        var html = `
+            <div class="pub_title">
+                <i class="iconfont icon-back1"></i>
+                <span class="ellipsis">${text}</span>
+                ${rightIcon}
+            </div>
+        `
+
+        $("body").insertAdjacentHTML("beforeend", html);
+
+        click(".icon-back1", () => {
+            history.back()
+        })
+    }
+
+    click(className, callback) {
+        _(className).forEach((v,i) => v.onclick = () => callback(v,i))
+    }
+
+    query(name) {
+        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        let r = window.location.search.substr(1).match(reg);
+        if (r != null) {
+            return decodeURIComponent(r[2]);
+        };
+        return null;
+    }
+
+
+
+    cover() {
+        Array.prototype.forH = function (callback) {
+            var res = []
+            for (var index = 0; index < this.length; index++) {
+                res.push(callback(this[index]))
+            }
+            return res.toString().replaceAll(",", "")
+        }
+        // 其他很多重写
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+
+}
+
+
+var { 
+    footer, $, _, query,
+    cover, click, item,
+    title
+} = new Utils();
+
+cover()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/utils/rem.js

@@ -0,0 +1,15 @@
+(function (w, d) {
+    function setSize() {
+        // 获取屏幕的宽度 375px
+        var screenWidth = d.documentElement.clientWidth;
+
+        // 根据规则计算  html 的font-size数值
+        var currentFontSize = screenWidth * 100 / 750;
+
+        // 修改html上的font-size
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/page/collection.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/collection.css">
+</head>
+
+<body>
+    <ul class="content">
+        
+    </ul>
+</body>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/collection.js"></script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/page/edit.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/edit.css">
+</head>
+
+<body>
+ 
+
+    <div class="content">
+        <div class="menu selected">
+            <div class="text">已选菜单</div>
+            <ul>
+            </ul>
+        </div>
+
+        <div class="menu optional">
+            <div class="text">可选菜单</div>
+            <ul>
+            </ul>
+        </div>
+    </div>
+
+</body>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/edit.js"></script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/page/index.html

@@ -0,0 +1,52 @@
+<!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="https://unpkg.com/swiper@8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/utils.css">
+    <link rel="stylesheet" href="../css/layout.css">
+    <link rel="stylesheet" href="../css/index.css">
+</head>
+
+<body>
+    <div class="header">
+        <div class="header_top">
+            <i class="iconfont icon-taozi1"></i>
+            <div class="search">
+                <i class="iconfont icon-search"></i>
+                <span>198万张图，有你想要的...</span>
+            </div>
+            <i class="iconfont icon-wo"></i>
+        </div>
+        <div class="header_menu">
+            <ul>
+            </ul>
+            <a href="" class="iconfont icon-edit"></a>
+        </div>
+    </div>
+    <div class="content">
+        <div class="swiper">
+            <div class="swiper-wrapper">
+               
+                
+            </div>
+        </div>
+    </div>
+
+
+</body>
+<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/index.js"></script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/page/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>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+
+
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/info.css">
+</head>
+
+<body>
+
+    <div class="content">
+        <div class="imgList">
+        </div>
+    </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/service/index.js"></script>
+<script src="./../js/page/info.js"></script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/page/me.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/me.css">
+</head>
+
+<body>
+    <div class="me_top">
+        <i class="iconfont icon-wo"></i>
+        <span class="wode">个人</span>
+    </div>
+    <ul class="me_bottom">
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>最近更新</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>单图收藏</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <a href="./collection.html">
+                <div class="me_list">
+                    <i class="iconfont icon-wushuju"></i>
+                    <span>写真收藏</span>
+                </div>
+            </a>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>关于我们</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>用户协议</span>
+            </div>
+
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>检测升级</span>
+            </div>
+
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+        <li>
+            <div class="me_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>清除缓存</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        </li>
+
+</body>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/me.js"></script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/page/mechanism.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/mechanism.css">
+</head>
+
+<body>
+    
+</body>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/mechanism.js"></script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/page/mechanisminfo.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>Document</title>
+    <script src="./../js/utils/rem.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="./../css/clear.css">
+    <link rel="stylesheet" href="./../css/utils.css">
+    <link rel="stylesheet" href="./../css/layout.css">
+    <link rel="stylesheet" href="./../css/mechanisminfo.css">
+</head>
+
+<body>
+<div class="content">
+    
+</div>        
+       
+   
+        
+</body>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.0/swiper-bundle.min.js"></script>
+<script src="./../js/config/index.js"></script>
+<script src="./../js/utils/index.js"></script>
+<script src="./../js/http/index.js"></script>
+<script src="./../js/service/index.js"></script>
+<script src="./../js/page/mechanisminfo.js"></script>
+
+</html>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/page/model.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/utils.css">
+    <link rel="stylesheet" href="../css/layout.css">
+    <link rel="stylesheet" href="../css/model.css">
+</head>
+
+<body>
+    <div class="header"></div>
+    <div class="content"></div>
+    <ul class="footer top">
+        <li>
+            <a href="./index.html" class="active">
+                <i class="iconfont icon-home"></i>
+                <p>首页</p>
+            </a>
+        </li>
+        <li>
+            <a href="./mechanism.html">
+                <i class="iconfont icon-jigou"></i>
+                <p>机构</p>
+            </a>
+        </li>
+        <li>
+            <a href="./model.html">
+                <i class="iconfont icon-me"></i>
+                <p>模特</p>
+            </a>
+        </li>
+        <li>
+            <a href="./me.html">
+                <i class="iconfont icon-wo"></i>
+                <p>我的</p>
+            </a>
+        </li>
+    </ul>
+
+</body>
+<script src="../js/utils/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/model.js"></script>
+
+</html>