101 lines
3.1 KiB
JavaScript
101 lines
3.1 KiB
JavaScript
document.querySelector(".header_menu_left").style.width = defaultNavList.length * 80 + 'px'
|
|
function renderNavList() {
|
|
defaultNavList.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(defaultNavList[index].type)
|
|
};
|
|
})
|
|
}
|
|
|
|
renderNavList()
|
|
|
|
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) {
|
|
// alert(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">
|
|
<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>
|
|
</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">
|
|
<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}">
|
|
</li>
|
|
`
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
getData('top')
|
|
|
|
function $(className){
|
|
return document.querySelector(className)
|
|
}
|
|
|