first commit

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/css/css/clear.css

@@ -0,0 +1,27 @@
+:root {
+    /* app的主题色，如果要修改主题的话，修改这里即可 */
+    --themeColor: #fb7299;
+    --whiteColor: #fff;
+}
+
+
+
+
+body,p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
+li {
+    list-style: none;
+}
+
+input {
+    outline: none;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/css/css/index.css

@@ -0,0 +1,181 @@
+.header {
+    height: 1.6rem;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    left: 0;
+    z-index: 9;
+}
+.header_search {
+    background-color: var(--themeColor);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.3rem;
+    box-sizing: border-box;
+    height: 0.88rem;
+}
+.header_search .icon-taozi1,
+.header_search .icon-wo{
+    font-size: 0.45rem;
+    color: var(--whiteColor);
+}
+.header_search .search{
+    width: 82%;
+    height: 0.6rem;
+    border-radius: 0.6rem;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding-left: 0.3rem;
+    background: var(--whiteColor);
+}
+.header_search .search .icon-search{
+    color: #999;
+    font-size: 0.26rem;
+    margin-right: 0.1rem;
+}
+.header_search .search span{
+    font-size: 0.24em;
+    color: #999;
+}
+
+.header_menu {
+    height: 0.72rem;
+    display: flex;
+    background: #fe7fa2;
+}
+.header_menu i {
+    width: 0.8rem;
+    height: 0.72rem;
+    text-align: center;
+    line-height: 0.72rem;
+    color: var(--whiteColor);
+}
+.header_menu ul {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    flex: 1;
+    overflow-x: scroll;
+    padding-left: 0.3rem;
+}
+.header_menu ul li {
+    font-size: 0.26rem;
+    flex-shrink: 0;
+    margin-right: 0.26rem;
+    color: #d3d2d2;
+}
+.header_menu .active {
+    color: var(--whiteColor) !important;
+}
+.content {
+    margin-top: 1.6rem !important;
+}
+.model_banner {
+    display: flex;
+    align-items: center;
+    overflow-x: scroll;
+    font-size: 0;
+    margin: 20px 0;
+}
+.model_banner li {
+    flex-shrink: 0;
+    width: 22%;
+    text-align: center;
+    margin: 0 5px;
+}
+.model_banner li .top {
+    position: relative;
+    margin-bottom: 0.22rem;
+}
+.model_banner li .top img{
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: 100%;
+}
+.model_banner li .top .nums{
+    font-size: 0.22rem;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -0.12rem;
+    padding: 0.02rem 0.1rem;
+    background: rgb(0 0 0 / 58%);
+    color: #fff;
+    border-radius: 0.2rem;
+}
+.model_banner li .title{
+    font-size: 0.24rem;
+    color: #7e7979;
+    width: 100%;
+    display: inline-block;
+}
+.pic_list {}
+.pic_title {
+    font-size: 0.34rem;
+    color: #333;
+    margin-bottom: 0.26rem;
+    margin-top: 0.3rem;
+    align-items: center;
+    display: flex;
+}
+.pic_title i{
+    color: var(--themeColor);
+    margin-right: 0.15rem;
+}
+.pic_title span{
+
+}
+.pic_item {
+    display: flex;
+    flex-wrap: wrap;
+}
+.pic_item li {
+    width: 48%;
+    margin-bottom: 0.22rem;
+}
+.pic_item li:nth-child(2n-1) {
+    margin-right: 0.22rem;
+}
+.pic_item_top {
+    position: relative;
+}
+.pic_item_top img{
+    width: 100%;
+    border-radius: 0.1rem;
+}
+.pic_item_top 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;
+}
+.pic_item_title {
+    color: #333;
+    font-size: 0.3rem;
+    overflow: hidden;
+}
+.pic_item_source {
+    color: #666;
+    font-size: 0.26rem;
+    margin-bottom: 0.02rem;
+}
+.pic_item_tags {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.08rem;
+}
+.pic_item_tags_item {
+    padding: 0.04rem 0.1rem;
+    font-size: 0.24rem;
+    background: var(--themeColor);
+    margin-right: 0.06rem;
+    color: var(--whiteColor);
+    border-radius: 0.18rem;
+    margin-bottom: 0.06rem;
+}

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/css/css/public.css

@@ -0,0 +1,51 @@
+/* 存放使用率高的css代码 */
+
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.padding_lr {
+    padding: 0 0.3rem;
+}
+
+.center {
+    width: 1126px;
+    margin: 0 auto;
+}
+.content {
+    margin-top: 0.9rem;
+    margin-bottom: 1rem;
+}
+.footer {
+    width: 100%;
+    height: 50px;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background: #fff;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    border-top: 0.02rem solid #e8ebec;
+}
+.footer li {
+
+}
+.footer li a {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+.footer li i {
+    font-size: 0.3rem;
+    margin-bottom: 0.08rem;
+}
+.footer li p{
+    font-size: 0.24rem;
+}
+.footer .footer_active a {
+    color: #fb7299 !important;
+}

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/css/css/swiper.css

@@ -0,0 +1,42 @@
+.swiper-wrapper .swiper-slide {
+    float: left;
+}
+.swiper-container {
+    overflow: hidden;
+    position: relative;
+}
+.swiper-pagination {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.swiper-dot {
+    width: 7px;
+    height: 7px;
+    background: #fff;
+    border-radius: 100%;
+    margin-right: 5px;
+    float: left;
+}
+.swiper-button-prev,
+.swiper-button-next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #fff;
+    font-size: 30px;
+    cursor: pointer;
+}
+.swiper-button-prev {
+   left: 10px;
+}
+.swiper-button-next {
+    right: 10px;
+}
+.swiper-wrapper {
+    position: relative;
+}
+.swiper-active {
+    background: red !important;
+}

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/config/config.js

@@ -0,0 +1,32 @@
+// 专门用来存放所有的接口地址
+
+var config = {
+
+    // 基地址  dev（开发阶段）  test（测试阶段）  prod（正式）
+    devUrl: 'http://127.0.0.1:3000/api/json',
+    testUrl: 'http://127.0.0.1:9090/api/json',
+    prodUrl: 'http://127.0.0.1/api/json',
+    stage: 'dev',
+    urlList: {
+        index: '/index',
+        info: '/info',
+        classList: '/classList',
+        type: "/class"
+    },
+    checkUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devUrl
+                break;
+            case "test":
+                return this.testUrl
+                break;
+            case "prod":
+                return this.prodUrl
+                break;
+            default:
+                break;
+        }
+    },
+
+}

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/http/http.js

@@ -0,0 +1,49 @@
+class HTTP {
+
+    constructor() {
+        this.xhr = new XMLHttpRequest();
+    }
+
+    get(option) {
+        return new Promise((success, error) => {
+            var GetParams = ""
+            for (const key in option.data) {
+                GetParams += `&${key}=${option.data[key]}`
+            }
+            GetParams = GetParams.replace("&", "?")
+            option.url += GetParams;
+
+            this.xhr.open("GET", config.checkUrl() + option.url)
+            this.xhr.send()
+            this.onreadystatechange(success, error)
+        })
+    }
+
+    post() { }
+
+    onreadystatechange(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    var data = JSON.parse(this.xhr.responseText)
+                    switch (data.status) {
+                        case 200:
+                            return success(data.result)
+                        break;
+
+                        case 404:
+                            alert(data.msg);
+                            throw new Error(data.msg);
+                            break;
+                    }
+                } else {
+                    console.log("暂无数据");
+                    error(this.xhr)
+                }
+
+            }
+        }
+    }
+
+
+}

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/lib/rem.js

@@ -0,0 +1,13 @@
+window.onload = function () {
+    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
+      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
+    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;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/lib/swiper.js

@@ -0,0 +1,330 @@
+(() => {
+    /**
+     * 构造函数
+     * @param {*} ParentElement 父节点的选择器名称
+     * @param {*} Configuration 插件的自定义设置项
+     */
+    function Swiper(ParentElement, Configuration) {
+        // 默认参数
+        // slideChangeTransitionStart【完成】
+        // slideTo【完成】
+        this.defaultConf = {
+            reverse: false,
+            timer: '', // 保存自动播放的定时器
+            ParentElement: '.swiper-container',
+            wrapper: '.swiper-wrapper',
+            slide: '.swiper-slide',
+            config: {
+                loop: false, // 是否开启循环播放【完成】
+                time: 1,     // 自动播放的间隔事件【完成】
+                speed: 300,  // 切换轮播图时候用的时间【完成】
+                grabCursor: false, // 鼠标放到轮播图上是否显示为 小手【完成】
+                initialSlide: 0, // 默认显示第一个【完成】
+                auto: false, // 是否开启自动播放【完成】
+            },
+            // 小圆点的父标签选择器名称
+            pagination: {
+                el: '.swiper-pagination',
+            },
+            navigation: {
+                nextEl: '.swiper-button-next', // 下一页
+                prevEl: '.swiper-button-prev', // 上一页
+            },
+        }
+
+        this.defaultConf.ParentElement = ParentElement || this.defaultConf.ParentElement;
+        this.defaultConf.config.loop = Configuration.loop || this.defaultConf.config.loop;
+        this.defaultConf.config.time = Configuration.time || this.defaultConf.config.time;
+        this.defaultConf.config.speed = Configuration.speed || this.defaultConf.config.speed;
+        this.defaultConf.config.grabCursor = Configuration.grabCursor || this.defaultConf.config.grabCursor;
+        this.defaultConf.config.initialSlide = Configuration.initialSlide || this.defaultConf.config.initialSlide;
+        this.defaultConf.config.auto = Configuration.auto || this.defaultConf.config.auto;
+        this.defaultConf.wrapper = Configuration.wrapper || this.defaultConf.wrapper;
+        this.defaultConf.slide = Configuration.slide || this.defaultConf.slide;
+
+        this.slideArr = this._(`${this.defaultConf.wrapper} ${this.defaultConf.slide}`);
+
+        // 最外层 swiper-container 宽度
+        this.f = this.$(this.defaultConf.ParentElement).offsetWidth;
+
+        // 判断小圆点
+        if (Configuration.hasOwnProperty("pagination")) {
+            this.defaultConf.pagination.el = Configuration.pagination.el;
+            this.RenderDot()
+        }
+
+        // 判断使用自定义前进后退按钮
+        if (Configuration.hasOwnProperty("navigation")) {
+            this.RenderNavigation()
+            //判断下一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("nextEl")) {
+                this.defaultConf.navigation.nextEl = Configuration.navigation.nextEl;
+            }
+            //判断上一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("prevEl")) {
+                this.defaultConf.navigation.prevEl = Configuration.navigation.prevEl;
+            }
+        }
+
+        this.UserConfig = Configuration
+        this.init()
+    }
+
+
+    // 类的方法
+    Swiper.prototype = {
+        init: function () {
+            this.SetWrapperWidth();
+            this.defaultConf.config.auto ? this.AutoPlay() : '';
+            this.initSwiperSlide()
+        },
+        // 设置swiper-slide父类的宽度
+        SetWrapperWidth: function () {
+
+            // 计算swiper-slide的宽度
+            this.slideArr.forEach(v => v.style.width = `${this.f}px`)
+            this.$(this.defaultConf.wrapper).style = `
+                width: ${this.f * this.slideArr.length}px;
+                left: -${this.f * this.defaultConf.config.initialSlide}px;
+                transition: all ease ${this.defaultConf.config.speed / 1000}s;
+                cursor: ${this.defaultConf.config.grabCursor ? 'pointer' : ''} ;
+            `
+        },
+
+        /**
+         * 注册移动端滑动
+         */
+        initSwiperSlide: function () {
+            var fa = this.$(this.defaultConf.ParentElement),
+                startX = 0,
+                startY = 0;
+            fa.addEventListener('touchstart', function (e) {
+                e.stopPropagation()
+                startX = e.targetTouches[0].pageX
+                startY = e.targetTouches[0].pageY
+            })
+
+            var getDirection = function (startx, starty, endx, endy) {
+                // 获得角度
+                var getAngle = function(angx, angy) {
+                    return Math.atan2(angy, angx) * 180 / Math.PI;
+                };
+
+                var angx = endx - startx;
+                var angy = endy - starty;
+                var result = 0;
+
+                // 如果滑动距离太短
+                if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
+                    return result;
+                }
+
+                var angle = getAngle(angx, angy);
+                if (angle >= -135 && angle <= -45) {
+                    result = 1;
+                } else if (angle > 45 && angle < 135) {
+                    result = 2;
+                } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
+                    result = 3;
+                } else if (angle >= -45 && angle <= 45) {
+                    result = 4;
+                }
+
+                return result;
+            }
+
+            fa.addEventListener('touchmove', (e) => {
+                e.stopPropagation()
+                var endX = e.changedTouches[0].pageX;
+                var endY = e.changedTouches[0].pageY;
+
+                var direction = getDirection(startX, startY, endX, endY);
+                if (direction == 3 || direction == 4) {
+                    var x = parseInt(endX - startX) - 40
+                    this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(${x}px,0px,0px)`;
+                }
+            });
+
+            fa.addEventListener('touchend', (e) => {
+                e.stopPropagation()
+                var endX = e.changedTouches[0].pageX;
+                var endY = e.changedTouches[0].pageY;
+
+                var direction = getDirection(startX, startY, endX, endY);
+
+                switch (direction) {
+                    case 0:
+                        console.log("未滑动！");
+                        break;
+                    case 1:
+                        console.log("向上！")
+                        break;
+                    case 2:
+                        console.log("向下！")
+                        break;
+                    case 3:
+                        this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
+                        this.animation(-this.f)
+                        this.CallMethods()
+                        this.UserConfig.pagination && this.ChangeDotActive()
+                        console.log("向左！")
+                        break;
+                    case 4:
+                        this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
+                        this.animation(this.f)
+                        this.CallMethods()
+                        this.UserConfig.pagination && this.ChangeDotActive()
+                        console.log("向右滑动");
+                        break;
+                    default:
+                }
+            })
+        },
+
+        CallMethods() {
+            if (this.UserConfig.hasOwnProperty("on")) {
+                var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
+                index = TotalLeft / this.f;
+                // 实现调用用户传入的方法，返回下标给用户
+                this.UserConfig.on && this.UserConfig.on.slideChangeTransitionStart(index)
+            }
+        },
+
+        // 生成小圆点
+        RenderDot: function () {
+            this.slideArr.forEach((v, i) => {
+                this.$(this.defaultConf.pagination.el).innerHTML +=
+                    `
+                    <div class="swiper-dot ${i == 0 ? 'swiper-active' : ''}"></div>
+                `
+            });
+
+            var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
+            Dot.forEach((v, i) => {
+                v.onclick = () => {
+                    this.UserConfig.pagination && this.ChangeDotActive(i)
+                    this.$(this.defaultConf.wrapper).style.left = `-${i * this.f}px`;
+                }
+            })
+        },
+
+        // 渲染左右前进后退按钮
+        RenderNavigation: function () {
+            var prev = this.$(this.defaultConf.navigation.prevEl);
+            var next = this.$(this.defaultConf.navigation.nextEl);
+            prev.innerText = "<";
+            next.innerText = ">";
+            this.BindNavigationClick(prev, next)
+        },
+
+        // 为上一页下一页按钮绑定切换事件
+        BindNavigationClick() {
+            // var a = this
+            // 下一页
+            this.$(this.defaultConf.navigation.nextEl).onclick = () => {
+                this.animation(-this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+            // 上一页
+            this.$(this.defaultConf.navigation.prevEl).onclick = () => {
+                this.animation(this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+        },
+
+        // 切换动画
+        animation(offset) {
+            var swiperWrapper = this.$(this.defaultConf.wrapper);
+            var y = parseInt(swiperWrapper.style.left) + offset,
+                max = -(this.f * (this.slideArr.length - 1));
+
+            // 如果时最后一张图    
+            if (y < max) {
+                if (this.defaultConf.config.loop) {
+                    swiperWrapper.style.left = "0px";
+                } else if (this.defaultConf.config.auto) {
+                    this.defaultConf.reverse = true
+                    this.animation(this.f)
+                }
+                return;
+
+                // 判断是不是第一张图    
+            } else if (y > 0) {
+                if (this.defaultConf.config.loop == false && this.defaultConf.config.auto) {
+                    this.defaultConf.reverse = false
+                    swiperWrapper.style.left = `${y - this.f * 2}px`
+                }
+                if (this.defaultConf.config.loop) {
+                    swiperWrapper.style.left = `${max}px`
+                }
+                return
+            } else {
+                if (this.defaultConf.config.loop == false
+                    && this.defaultConf.config.auto
+                    && this.defaultConf.reverse) {
+                    swiperWrapper.style.left = `${y}px`
+                } else {
+                    swiperWrapper.style.left = `${y}px`
+                }
+
+            }
+        },
+
+        ChangeDotActive(type = null) {
+            var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
+            var index = "";
+            if (type == null) {
+                var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
+                index = TotalLeft / this.f;
+            } else {
+                index = type;
+            }
+
+            // 实现调用用户传入的方法，返回下标给用户
+            this.CallMethods()
+
+            // 清除所有的激活样式
+            Dot.forEach(val => val.className = "swiper-dot");
+            // 为你点击的li加激活样式
+            Dot[index].className = "swiper-dot swiper-active";
+        },
+
+        AutoPlay() {
+            this.defaultConf.timer = setInterval(() => {
+                if (this.defaultConf.config.loop == false
+                    && this.defaultConf.config.auto
+                    && this.defaultConf.reverse) {
+                    this.animation(this.f)
+                } else {
+                    this.animation(-this.f)
+                }
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }, this.defaultConf.config.time * 1000)
+
+            this.$(this.defaultConf.ParentElement).onmouseover = function () {
+                clearInterval(this.defaultConf.timer)
+            }
+
+            this.$(this.defaultConf.ParentElement).onmouseout = () => {
+                this.AutoPlay()
+            }
+        },
+
+        // 通过js调用此方法，实现轮播图的切换
+        slideTo(index) {
+            this.$(this.defaultConf.wrapper).style.left = `-${index * this.f}px`;
+            this.UserConfig.pagination && this.ChangeDotActive()
+        },
+        $: function (className) {
+            return document.querySelector(className)
+        },
+        _: function (className) {
+            return document.querySelectorAll(className)
+        }
+    }
+
+
+    window.swiper = Swiper
+
+
+})()

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/page/index.js

@@ -0,0 +1,68 @@
+class Index {
+    constructor() {
+        this.getClass();
+        this.getIndex();
+        footer()
+    }
+
+    async getClass() {
+        var res = await server.type();
+        console.log(res)
+        res.principal.unshift({
+            id: null,
+            page: 0,
+            title: "首页"
+        })
+        res.principal.forEach((v,i) => {
+            $(".header_menu ul").innerHTML += `
+             <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `;
+
+            if (i > 0) {
+                $(".swiper-container .swiper-wrapper").innerHTML += `
+                  <div class="swiper-slide">${v.title}</div>
+                `
+            }
+
+        });
+
+        this.initSwiper();
+    }
+
+    async getIndex() {
+        var res = await server.index();
+        // TODO 实现封装列表的渲染
+        res.recommended.data.forEach((v,i) => {
+
+        })
+        console.log("getIndex: ",res)
+    }
+
+    initSwiper() {
+
+        var liArr = _(".header_menu ul li");
+
+        var pageSwiper = new swiper('.swiper-container', {
+            time: 3,
+            auto: false,
+            speed: 800,
+            on: {
+                slideChangeTransitionStart: function (index) {
+                    liArr.forEach(v => v.className = "")
+                    liArr[index].className = "active"
+                }
+            }
+        });
+
+        liArr.forEach((v,i) => {
+            v.onclick = () => {
+                pageSwiper.slideTo(i)
+                liArr.forEach(v => v.className = "")
+                v.className = "active"
+            }
+        })
+    }
+
+}
+
+new Index();

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/page/mechanism.js

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

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/page/model.js

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

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/page/my.js

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

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/service/indexService.js

@@ -0,0 +1,32 @@
+class IndexService {
+
+    async index(data) {
+       return (new HTTP()).get({
+           url: config.urlList.index,
+           data: data
+       })
+    }
+
+    async type(data) {
+        return (new HTTP()).get({
+            url: config.urlList.type,
+            data: data
+        })
+    }
+
+    async classList(data) {
+        return (new HTTP()).get({
+            url: config.urlList.classList,
+            data: data
+        })
+    }
+
+    async info(data) {
+        return (new HTTP()).get({
+            url: config.urlList.info,
+            data: data
+        })
+    }
+}
+
+var server = new IndexService()

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/js/utils/utils.js

@@ -0,0 +1,44 @@
+class Utils {
+
+
+    footer() {
+        var footerArr = [
+            { title: '首页', icon: 'icon-home', href: 'index.html' },
+            { title: '机构', icon: 'icon-jigou', href: 'mechanism.html' },
+            { title: '模特', icon: 'icon-me', href: 'model.html' },
+            { title: '我的', icon: 'icon-wo', href: 'my.html' },
+        ];
+        // 用户当前正在访问的页面地址
+        // http://localhost:63342/page/mechanism.html
+        var currentPath = location.href;
+        $("body").innerHTML += `
+            <ul class="footer">
+            ${ 
+              footerArr.map((v,index) => {
+                  return `
+                      <li class="${currentPath.includes(v.href) ? 'footer_active' : ''}">
+                        <a href="./${v.href}">
+                          <i class="iconfont ${v.icon}"></i>
+                          <p>${v.title}</p>
+                        </a>
+                      </li>
+                  `
+              }) .toString().replaceAll(",", "")
+            }
+            </ul>
+        `
+    }
+
+
+    $(className) {
+        return document.querySelector(className);
+    }
+
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+}
+
+// 对象的解构赋值
+var { footer, $, _ } = new Utils()
+// var utils = new Utils()

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/page/index.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <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="http://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/swiper.css">
+  <link rel="stylesheet" href="../css/index.css">
+</head>
+<body>
+
+<div class="header">
+
+  <div class="header_search">
+    <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>
+    <i class="iconfont icon-edit"></i>
+  </div>
+</div>
+<div class="content">
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+
+      <!--首页-->
+      <div class="swiper-slide">
+        <ul class="model_banner">
+          <li>
+            <div class="top">
+              <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/t/2201.jpg" alt="">
+              <span class="nums">30套</span>
+            </div>
+            <span class="title ellipsis">徐珍儿 ( 徐珍儿bunny )</span>
+          </li>
+          <li>
+            <div class="top">
+              <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/t/2201.jpg" alt="">
+              <span class="nums">30套</span>
+            </div>
+            <span class="title ellipsis">徐珍儿 ( 徐珍儿bunny )</span>
+          </li>
+          <li>
+            <div class="top">
+              <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/t/2201.jpg" alt="">
+              <span class="nums">30套</span>
+            </div>
+            <span class="title ellipsis">徐珍儿 ( 徐珍儿bunny )</span>
+          </li>
+        </ul>
+
+        <div class="pic_list recommended padding_lr">
+
+          <div class="pic_title">
+            <i class="iconfont icon-huo"></i>
+            <span>今日推荐</span>
+          </div>
+
+          <ul class="pic_item">
+            <li>
+              <a href="">
+                <div class="pic_item_top">
+                  <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/a/1/44312/0.jpg" alt="">
+                  <span>20套</span>
+                </div>
+                <div class="pic_item_title ellipsis">杉原杏璃《っエロモンNo.1宣言!》写真集 [YS Web] Vol.545</div>
+                <div class="pic_item_source">模特：杉原杏璃</div>
+                <div class="pic_item_source">来源机构：YSWeb</div>
+              </a>
+              <div class="pic_item_tags">
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+              </div>
+            </li>
+            <li>
+              <a href="">
+                <div class="pic_item_top">
+                  <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/a/1/44312/0.jpg" alt="">
+                  <span>20套</span>
+                </div>
+                <div class="pic_item_title ellipsis">杉原杏璃《っエロモンNo.1宣言!》写真集 [YS Web] Vol.545</div>
+                <div class="pic_item_source">模特：杉原杏璃</div>
+                <div class="pic_item_source">来源机构：YSWeb</div>
+              </a>
+              <div class="pic_item_tags">
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+              </div>
+            </li>
+            <li>
+              <a href="">
+                <div class="pic_item_top">
+                  <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/a/1/44312/0.jpg" alt="">
+                  <span>20套</span>
+                </div>
+                <div class="pic_item_title ellipsis">杉原杏璃《っエロモンNo.1宣言!》写真集 [YS Web] Vol.545</div>
+                <div class="pic_item_source">模特：杉原杏璃</div>
+                <div class="pic_item_source">来源机构：YSWeb</div>
+              </a>
+              <div class="pic_item_tags">
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+              </div>
+            </li>
+            <li>
+              <a href="">
+                <div class="pic_item_top">
+                  <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/a/1/44312/0.jpg" alt="">
+                  <span>20套</span>
+                </div>
+                <div class="pic_item_title ellipsis">杉原杏璃《っエロモンNo.1宣言!》写真集 [YS Web] Vol.545</div>
+                <div class="pic_item_source">模特：杉原杏璃</div>
+                <div class="pic_item_source">来源机构：YSWeb</div>
+              </a>
+              <div class="pic_item_tags">
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <div class="pic_list newest padding_lr">
+
+          <div class="pic_title">
+            <i class="iconfont icon-huo"></i>
+            <span>最新收录</span>
+          </div>
+
+          <ul class="pic_item">
+            <li>
+              <a href="">
+                <div class="pic_item_top">
+                  <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/a/1/44312/0.jpg" alt="">
+                  <span>20套</span>
+                </div>
+                <div class="pic_item_title ellipsis">杉原杏璃《っエロモンNo.1宣言!》写真集 [YS Web] Vol.545</div>
+                <div class="pic_item_source">模特：杉原杏璃</div>
+                <div class="pic_item_source">来源机构：YSWeb</div>
+              </a>
+              <div class="pic_item_tags">
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+              </div>
+            </li>
+            <li>
+              <a href="">
+                <div class="pic_item_top">
+                  <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/a/1/44312/0.jpg" alt="">
+                  <span>20套</span>
+                </div>
+                <div class="pic_item_title ellipsis">杉原杏璃《っエロモンNo.1宣言!》写真集 [YS Web] Vol.545</div>
+                <div class="pic_item_source">模特：杉原杏璃</div>
+                <div class="pic_item_source">来源机构：YSWeb</div>
+              </a>
+              <div class="pic_item_tags">
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+              </div>
+            </li>
+            <li>
+              <a href="">
+                <div class="pic_item_top">
+                  <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/a/1/44312/0.jpg" alt="">
+                  <span>20套</span>
+                </div>
+                <div class="pic_item_title ellipsis">杉原杏璃《っエロモンNo.1宣言!》写真集 [YS Web] Vol.545</div>
+                <div class="pic_item_source">模特：杉原杏璃</div>
+                <div class="pic_item_source">来源机构：YSWeb</div>
+              </a>
+              <div class="pic_item_tags">
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+              </div>
+            </li>
+            <li>
+              <a href="">
+                <div class="pic_item_top">
+                  <img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.gzhuibei.com/a/1/44312/0.jpg" alt="">
+                  <span>20套</span>
+                </div>
+                <div class="pic_item_title ellipsis">杉原杏璃《っエロモンNo.1宣言!》写真集 [YS Web] Vol.545</div>
+                <div class="pic_item_source">模特：杉原杏璃</div>
+                <div class="pic_item_source">来源机构：YSWeb</div>
+              </a>
+              <div class="pic_item_tags">
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+                <a class="pic_item_tags_item">大胸</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+</body>
+<script src="../js/config/config.js"></script>
+<script src="../js/http/http.js"></script>
+<script src="../js/service/indexService.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/lib/swiper.js"></script>
+<script src="../js/page/index.js"></script>
+</html>

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/page/info.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/page/mechanism.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="../js/lib/rem.js"></script>
+    <link rel="stylesheet" href="http://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/swiper.css">
+    <link rel="stylesheet" href="../css/mechanism.css">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+<script src="../js/config/config.js"></script>
+<script src="../js/http/http.js"></script>
+<script src="../js/service/indexService.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/page/mechanism.js"></script>
+</html>

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/page/model.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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="http://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/swiper.css">
+    <link rel="stylesheet" href="../css/model.css">
+</head>
+<body>
+
+<div class="header"></div>
+<div class="content"></div>
+
+
+</body>
+<script src="../js/config/config.js"></script>
+<script src="../js/http/http.js"></script>
+<script src="../js/service/indexService.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/page/model.js"></script>
+</html>

历届学生/fontendseven/项目练习/个人练习/蔡敏/屁桃儿/page/my.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <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="http://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/swiper.css">
+  <link rel="stylesheet" href="../css/my.css">
+</head>
+<body>
+
+<div class="header"></div>
+<div class="content"></div>
+
+
+</body>
+<script src="../js/config/config.js"></script>
+<script src="../js/http/http.js"></script>
+<script src="../js/service/indexService.js"></script>
+<script src="../js/utils/utils.js"></script>
+<script src="../js/page/my.js"></script>
+</html>