first commit

历届学生/陈一航/项目/contact/今日头条/css/channel.css

@@ -0,0 +1,88 @@
+.toolbar{
+    width: 100%;
+    height: 50px;
+    background-color: #d43d3d;
+    text-align: center;
+}
+.toolbar span{
+    width: 44px;
+    height: 50px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+.toolbar span a{
+    background: url("../img/header_back.png");
+    width: 50%;
+    height: 50%;
+    background-size: 100%;
+    display: block;
+    background-repeat: no-repeat;
+
+}
+.toolbar p{
+    font-size: 1rem;
+    color: #ffffff;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 50px;
+}
+.content{
+    margin-top: .3125rem;
+    padding: 0 .3125rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+.content p{
+    font-size: 12px;
+    color: #666666;
+    margin-bottom: .625rem;
+}
+.content_core{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    /* justify-content: space-between; */
+    flex-wrap: wrap;
+    
+}
+.content_core li{
+    width: 20%;
+    border: 1px solid #cccccc;
+    text-align: center;
+    margin-bottom: .625rem;
+    margin-right: 16px;
+}
+.content_core li a{
+    font-size: 16px;
+    color: #131313;
+}
+.content_cor{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    /* justify-content: space-between; */
+    flex-wrap: wrap;
+    
+}
+.content_cor li{
+    width: 20%;
+    border: 1px solid #cccccc;
+    text-align: center;
+    margin-bottom: .625rem;
+    margin-right: 16px;
+
+}
+.content_cor li a{
+    font-size: 16px;
+    color: #131313;
+}
+.rrd{
+    background-color: red;
+}

历届学生/陈一航/项目/contact/今日头条/css/clear.css

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

历届学生/陈一航/项目/contact/今日头条/css/index.css

@@ -0,0 +1,148 @@
+.header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    width: 100%;
+    height: auto;
+}
+.header_logo {
+    width: 100%;
+    height: 44px;
+    background: #d43d3d;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+.message {
+    position: relative;
+}
+.message img {
+    width: 1.6rem;
+    height: 1.25rem;
+}
+.message span {
+    width: .4rem;
+    height: .4rem;
+    background: #fff;
+    border-radius: 100%;
+    position: absolute;
+    right: 0;
+    top: .9375rem;
+}
+.logo .log {
+    width: 4.9rem;
+    height: 1.2rem;
+}
+.logo .refresh {
+    width: 1rem;
+}
+.search img {
+    width: 1.2rem;
+}
+.swiper_menu {
+    width: 90%;
+    overflow-x: scroll;
+}
+.header_menu {
+    height: 1.85rem;
+    background: #f4f5f6;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.header_menu_left {
+    display: flex;
+    width: 160%;
+    justify-content: space-around;
+} 
+::-webkit-scrollbar{
+    width: 0;
+    height: 0;
+}
+.header_menu_left li {
+    font-size: .85rem;
+    color: #505050;
+}
+.header_menu_right {
+    width: 2rem;
+    height: 1.85rem;
+    text-align: center;
+    line-height: 1.7rem;
+    background: #f4f5f6;
+    
+}
+.header_menu_right a{
+    color: #f85959;
+}
+.content {
+    padding: 0 .75rem;
+    margin-top: 4.1rem;
+}
+.list_item {
+
+}
+.item {
+    padding: 16px 0;
+}
+
+.one h2 {
+    color: #222;
+    font-size: .85rem;
+    margin-bottom: 6px;
+}
+.one img {
+    width: 100%;
+}
+.one .mes{
+    margin-top: -0.5rem;
+}
+.one .mes span {
+    font-size: .5rem;
+    color: #999;
+}
+.two {
+    display: flex;
+    height: 5.25rem;
+}
+.two .item_message h2{
+    color: #222;
+    font-size: .85rem;
+    margin-right: .6rem
+}
+.two .item_message span{
+    font-size: .5rem;
+    margin-top: .3rem;
+    color: #999;
+}
+.two img {
+    width: 5.65rem;
+    height: 3.675rem;
+}
+.three h2 {
+    color: #222;
+    font-size: .85rem;
+    margin-right: .6rem;
+    margin-bottom: .5rem;
+}
+.three ul {
+    display: flex;
+}
+.three ul li {
+    width: 33%;
+    margin-right: 3px;
+}
+.three ul li img{
+    width: 100%;
+    height: 3.675rem;
+}
+.three span {
+    font-size: .5rem;
+    margin-top: .3rem;
+    color: #999;
+}
+.active {
+    color: red !important;
+}

历届学生/陈一航/项目/contact/今日头条/css/publik.css

@@ -0,0 +1,22 @@
+html {
+    font-size: 20px;
+  }
+  @media only screen and (min-width: 400px) {
+    html {
+      font-size: 21.33333333px !important;
+    }
+  }
+  @media only screen and (min-width: 414px) {
+    html {
+      font-size: 22.08px !important;
+    }
+  }
+  @media only screen and (min-width: 480px) {
+    html {
+      font-size: 25.6px !important;
+    }
+  }
+  .v-algin {
+    line-height: 3.375rem;
+    height: 2.75rem;
+  }

历届学生/陈一航/项目/contact/今日头条/html/channel.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>选择频道 - 今日头条</title>
+    <link rel="shortcut icon" href=https://s3a.pstatp.com/toutiao/resource/ntoutiao_web/static/image/favicon_5995b44.ico type=image/x-icon>
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/publik.css">
+    <link rel="stylesheet" href="../css/channel.css">
+</head>
+<body>
+    <div class="toolbar">
+        <span><a href="../index.html"></a></span>
+        <p>频道管理</p>
+    </div>
+    <div class="content">
+        <p>点击删除以下频道</p>
+            <ul class="content_core">
+            </ul>
+    </div>
+    <div class="content">
+        <p>点击删除以下频道</p>
+            <ul class="content_cor">
+
+            </ul>
+    </div>
+</body>
+<script src="../js/config.js"></script>
+<script src="../js/config.js"></script>
+<script src="../js/channel.js"></script>
+</html>

历届学生/陈一航/项目/contact/今日头条/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>今日头条</title>
+    <link rel="shortcut icon" href=https://s3a.pstatp.com/toutiao/resource/ntoutiao_web/static/image/favicon_5995b44.ico type=image/x-icon>
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/publik.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+<body>
+    <div class="header">
+        <div class="header_logo">
+            <div class="message v-algin">
+                <img src="./img/feed.png" alt="">
+                <span></span>
+            </div>
+            <div class="logo v-algin">
+                <img class="log" src="./img/wap.png" alt="">
+                <img class="refresh" src="./img/titlebar.png" alt="">
+            </div>
+            <div class="search v-algin">
+                <img src="./img/feed_ic.png" alt="">
+            </div>
+        </div>
+        <div class="header_menu">
+           <div class="swiper_menu">
+                <ul class="header_menu_left">
+                   
+                </ul>
+           </div>
+            <div class="header_menu_right"><a href="./html/channel.html">+</a></div>
+        </div>
+    </div>
+    <div class="content">
+        <ul class="list_item">
+         
+
+        </ul>
+    </div>
+
+
+</body>
+<script src="./js/config.js"></script>
+<script src="./js/ajax.js"></script>
+<script src="./js/index.js"></script>
+
+</html>

历届学生/陈一航/项目/contact/今日头条/js/ajax.js

@@ -0,0 +1,29 @@
+
+
+function http(params) {
+    var http = new XMLHttpRequest();
+    var par = ""
+    if (params.hasOwnProperty("data")) {
+        for (const key in params.data) {
+            par+=`&${key}=${params.data[key]}`
+        }
+        params.url = params.url + par.replace("&", "?")
+    }
+    http.open(params.method, params.url);
+    http.send();
+    http.onreadystatechange = function () {
+        if (http.readyState == 4 ) { 
+            if (http.status == 200) { 
+                var res = JSON.parse(http.responseText);
+                if (res.error_code == 0) {
+                    params.success(res)
+                } else {
+                    params.error(res)
+                }
+            } else {
+              alert("网络不好")
+            }
+           
+        } 
+    }
+}

历届学生/陈一航/项目/contact/今日头条/js/channel.js

@@ -0,0 +1,66 @@
+
+
+
+function RenderDeleteUl() {
+    console.log("sagge")
+    $(".content_core").innerHTML = ""
+    ChannelList.forEach(function(val,index){
+        $(".content_core").innerHTML+=`
+            <li>${val.title}</li>
+        `
+    });
+    console.log("ChannelList",ChannelList)
+    BindDeleteUl()
+}
+
+function RenderAddUl() {
+    $(".content_cor").innerHTML = ""
+    stChannelList.forEach(function(val,index){
+        document.querySelector(".content_cor").innerHTML+=`
+            <li>${val.title}</li>
+        `
+    })
+    BindaddUl()
+}
+
+function BindDeleteUl() {
+    var deleteUl = document.querySelectorAll(".content_core li");//若不重新调用RenderDeleteUl()此步获取的还是用初始数据在也页面的渲染
+    deleteUl.forEach(function(val,index){//初始数据的下标
+        val.onclick = function() {
+            console.log("ss")
+            console.log("ChannelList",ChannelList)
+            document.querySelector(".content_core").removeChild(val)
+            document.querySelector(".content_cor").appendChild(val)
+            stChannelList.push(ChannelList[index])
+            ChannelList.splice(index,1)
+            localStorage.setItem("stChannelList", JSON.stringify(stChannelList))
+            localStorage.setItem("ChannelList", JSON.stringify(ChannelList))
+            RenderDeleteUl()
+            BindaddUl()
+        }
+    })
+}
+
+function BindaddUl() {
+    var addUl = document.querySelectorAll(".content_cor li");
+    addUl.forEach(function(val,index){
+        val.onclick = function() {
+            document.querySelector(".content_cor").removeChild(val)
+            document.querySelector(".content_core").appendChild(val)
+            
+            ChannelList.push(stChannelList[index])
+            stChannelList.splice(index,1)
+            localStorage.setItem("stChannelList", JSON.stringify(stChannelList))
+            localStorage.setItem("ChannelList", JSON.stringify(ChannelList))
+            RenderAddUl()
+            BindDeleteUl()
+        }
+    });
+}
+
+RenderDeleteUl()
+RenderAddUl()
+
+function $(className){
+    return document.querySelector(className)
+}

历届学生/陈一航/项目/contact/今日头条/js/config.js

@@ -0,0 +1,28 @@
+
+var ChannelList = localStorage.getItem("ChannelList") == null ? [
+    { title: '推荐', type: 'tuijian' },
+    { title: '热点', type: 'redian' },
+    { title: '社会', type: 'shehui' },
+    { title: '娱乐', type: 'yule' },
+    { title: '科技', type: 'keji' },
+    { title: '汽车', type: 'qiche' },
+    { title: '体育', type: 'tiyu' },
+    { title: '财经', type: 'caijing' },
+    { title: '军事', type: 'junshi' },
+    { title: '时尚', type: 'shishang' },
+    { title: '游戏', type: 'youxi' },
+    { title: '历史', type: 'lishi' },
+    { title: '探索', type: 'tansuo' }
+] : JSON.parse(localStorage.getItem("ChannelList"))
+
+
+var stChannelList = localStorage.getItem("stChannelList")  == null ? [
+    { title: '国际', type: 'guoji'},
+    { title: '旅游', type: 'lvyou'},
+    { title: '美食', type: 'meishi'},
+    { title: '育儿', type: 'yuer'},
+    { title: '养生', type: 'yangsheng'},
+    { title: '故事', type: 'gushi'},
+    { title: '美文', type: 'meiwen'},
+] : JSON.parse(localStorage.getItem("stChannelList"))
+

历届学生/陈一航/项目/contact/今日头条/js/index.js

@@ -0,0 +1,102 @@
+function renderNavList() {
+    ChannelList.forEach(function(val,index){
+        $(".header_menu_left").innerHTML+=`<li class="${index ==0?'active': ''}">${val.title}</li>`
+    });
+
+    BindClickLi()
+}
+
+function BindClickLi() {
+    var li = document.querySelectorAll(".header_menu_left li");
+    li.forEach((val,index)=> {
+        val.onclick = function () {
+            li.forEach(vas=>vas.className = "");
+            val.className = "active";
+            getData(ChannelList[index].type)
+        };  
+    })
+}
+
+
+function getData(type) {
+    http({
+        method: 'GET',
+        url: 'http://127.0.0.1/mcf/news.php',
+        data: {
+            type: type
+        },
+        success: function(res) {
+            RenderPage(res.result.data)
+
+            console.log(res.result.data)
+        },
+        error: function(err) {
+        }
+    });
+}
+
+function RenderPage(data) {
+    $(".list_item").innerHTML = ""
+    data.forEach((val,index)=> {
+        if (val.hasOwnProperty("thumbnail_pic_s03") || val.hasOwnProperty("thumbnail_pic_s02")){
+            $(".list_item").innerHTML += `
+                <li class="item three">
+                    <a href="${val.url}">
+                        <h2>${val.title}</h2>
+                        <ul>
+                            <li>
+                                <img src="${val.thumbnail_pic_s}" alt="">
+                            </li>
+                            <li>
+                                <img src="${val.thumbnail_pic_s02}" alt="">
+                            </li>
+                            <li>
+                                <img src="${val.thumbnail_pic_s03 ? val.thumbnail_pic_s03 : ''}" alt="">
+                            </li>
+                        </ul>
+                        <span>
+                            ${val.author_name} ${val.category} ${val.date}
+                        </span>
+                    </a>
+                </li>
+            `
+         } else if (Math.random() > 0.5){
+                $(".list_item").innerHTML += `
+                <li class="item one">
+                    <a href="${val.url}">
+                        <h2>${val.title}</h2>
+                        <img src="${val.thumbnail_pic_s}" alt="${val.title}">
+                        <div class="mes">
+                            <span>${val.author_name}</span>
+                            <span>${val.date}</span>
+                            <span>${val.category}</span>
+                        </div>
+                    </a>
+                </li>
+            `
+        } else {
+            $(".list_item").innerHTML += `
+            <li class="item two">
+                <a href="${val.url}">
+                    <div class="item_message">
+                        <h2>${val.title}</h2>
+                        <span>${val.author_name}</span>
+                        <span>${val.date}</span>
+                        <span>${val.category}</span>
+                    </div>
+                    <img src="${val.thumbnail_pic_s}" alt="${val.title}">
+                </a>
+            </li>
+        `
+         }
+    })
+}
+
+
+
+getData('top')
+renderNavList()
+function $(className){
+    return document.querySelector(className)
+}
+