first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,33 @@
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
body {
font-size: 0;
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
/* 清楚滚动条样式 */
img {
width: 100%;
}

View File

@@ -0,0 +1,150 @@
.header {
position: fixed;
width: 100%;
height: 1.6rem;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.header .header_logo {
background: var(--themeColor);
height: 0.88rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.3rem;
}
.header .header_logo i {
font-size: 0.45rem;
color: var(--whiteColor);
}
.header .header_logo .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_logo .search span {
font-size: var(--fontSize12);
color: var(--textColor);
}
.header .header_logo .search i {
color: var(--textColor) !important;
font-size: 0.26rem !important;
margin-right: 0.1rem;
padding-top: 0.02rem;
margin-left: 0.26rem;
}
.header_menu {
height: 0.72rem;
display: flex;
align-items: center;
background: #fe7fa2;
}
.header_menu i {
color: #fff;
text-decoration: none;
width: 0.8rem;
height: 0.72rem;
text-align: center;
line-height: 0.72rem;
}
.header_menu ul {
display: flex;
flex: 1;
overflow-x: scroll;
padding-left: 0.3rem;
}
.header_menu ul li {
font-size: 0.26rem;
margin-right: 0.26rem;
color: #d3d2d2;
flex-shrink: 0;
}
.header_menu ul .active {
color: var(--whiteColor) !important;
}
.content {
margin-top: 1.6rem;
margin-bottom: 1rem;
}
.swiper {
width: 100%;
}
.swiper-slide {
height: calc(100vh - 1.6rem - 1rem);
overflow-y: scroll;
}
.list {
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list .item {
width: 48%;
flex-shrink: 0;
margin-bottom: 0.24rem;
}
.list .item_top {
position: relative;
}
.list .item_top img {}
.list .item_top span {
bottom: 0.1rem;
right: 0.16rem;
position: absolute;
font-size: 0.24rem;
background: var(--themeColor);
color: #fff;
padding: 0.02rem 0.12rem;
border-radius: 0.16rem;
}
.list .item_text {}
.list .item_text .title {
font-size: 0.34rem;
font-weight: 400;
margin-top: 0.2rem;
}
.list .item_text .model {
font-size: 0.28rem;
color: #bdb7b7;
}
.list .item_text .source {
font-size: 0.28rem;
color: #bdb7b7;
}
.list .item_tag {
margin-top: 0.1rem;
display: flex;
flex-wrap: wrap;
}
.list .item_tag .tage_item {
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;
}

View File

@@ -0,0 +1,79 @@
:root {
--themeColor: #fb7299;
--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;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.footer {
justify-content: space-around;
display: flex;
height: 1rem;
align-items: center;
position: fixed;
border-top: 0.02rem solid #e2e2e2;
width: 100%;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
background: var(--whiteColor);
}
.footer li {
text-align: center;
}
.footer li p {
font-size: 0.24rem;
margin-top: 0.04rem;
}
.footer .active a {
color: var(--themeColor);
}
.pub_header {
height: .9rem;
width: 100%;
position: fixed;
left: 0;
top: 0;
right: 0;
background: var(--themeColor);
color: #fff;
display: flex;
align-items: center;
padding: 0 10px;
box-sizing: border-box;
}
.pub_header i {
font-size: .4rem;
}
.pub_header .text {
font-size: .36rem;
flex: 1;
margin-left: .28rem;
}
.content {
margin-top: .9rem;
}

View File

@@ -0,0 +1,66 @@
class Ajax {
constructor() {
this.ajax = new XMLHttpRequest();
}
/**
*
* @param {*} params
* {
* url: '',
* data: {
* id: 1,
* page: 2
* },
* header: {
* 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
* }
* }
*/
get(params) {
return new Promise((success, error) => {
var str = ""
for (const key in params.data) {
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
this.ajax.open("GET", `${config.checkUrl()}${params.url}${str}`)
//由基地址 短地址 加参数组成
this.ajax.send()
this.readystatechange(success, error)
})
}
post() { }
readystatechange(success, error) {
this.ajax.onreadystatechange = () => {
if (this.ajax.readyState == 4) {
if (this.ajax.status == 200) {
var data = JSON.parse(this.ajax.responseText)
success(this.checkStatus(data))
//如果http状态码和ajax状态码都请求成功就调用判断接口方法 this.checkStatus
} else {
error(this.ajax)
}
}
}
}
//判断接口的状态
checkStatus(data) {
switch (data.status) {
case 200:
return data.result
break;
case 404:
alert(data.msg);
throw new Error(data.msg)
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,34 @@
var config = {
devBaseUrl: 'http://127.0.0.1:3000/api/json', // 开发阶段
testBaseUrl: 'http://127.0.0.1:3000/api/test', // 测试阶段
prodBaseUrl: 'http://192.168.31.100:3000/api/json', // 上线阶段
stage: 'dev', // dev test prod 存放基地址
apiList: { //存放短地址
index: '/index',
info: '/info',
classList: '/class',
classListArr: '/classList'
},
footerList: [ //定义底部导航栏 方便后期直接更改
{ title: '首页', icon: 'icon-home', url: 'index.html' },
{ title: '机构', icon: 'icon-jigou', url: 'mechanism.html' },
{ title: '模特', icon: 'icon-me', url: 'model.html' },
{ title: '我的', icon: 'icon-wo', url: 'my.html' },
],
checkUrl: function () {
switch (this.stage) { //选择对应的基地址
case "dev":
return this.devBaseUrl
break;
case "test":
return this.testBaseUrl
break;
case "prod":
return this.prodBaseUrl
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,141 @@
class Index {
constructor () {
this.index = 0;
this.principal = [] //定义两个全局变量下标和数组
footer(); //调用底部菜单
this.getClassList() //调用
}
//调用 getClassList接口
async getClassList() {
var self = this;
var res = await indexServe.classList();
console.log(res);
this.principal = res.principal
this.principal.forEach((v,i) => {
$(".header_menu ul").html(`
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
`) //对this.principal 进行遍历 向.header_menu ul里面添加li li的数据就是v.title
$(".page_wrapper").html(`
<div class="swiper-slide">
<div class="list">
</div>
</div>
`); //向page_wrapper添加swiper-slide(也就是父容器)
_(".swiper-wrapper .swiper-slide").forEach(v => {
v.onscroll = () => {
const {clientHeight, scrollHeight, scrollTop} = v;
const distance = scrollHeight- scrollTop - clientHeight;
if(distance <= 0) {
// 首页
console.log("滚动到底部...");
if (this.index == 0) {
this.getIndex()
} else {
this.principal[this.index].page += 1
if (this.principal[this.index].page <= this.principal[this.index].total_page) {
this.getClassListArr("more")
} else {
console.log("已经没有数据了!!!");
}
}
}
}
})
})
click($('.header_menu i'), function () {
console.log(this);
})
click(_(".header_menu ul li"), function () {
self.changeActive(this.index)
})
this.getIndex()
this.initPage()
}
//点击分类的方法
async getClassListArr(type = "click") {
var getData = async () => {
var res = await indexServe.classListArr({
page: this.principal[this.index].page,
id: this.principal[this.index].id
//数组的参数通过数组加下标的方式拿到
});
this.principal[this.index].total_page = res.total_page
//为数组里面添加个总页面total_page
this.principal[this.index].content = [
...this.principal[this.index].content,
...res.data //向content添加数组以及返回的新数组
];
item(
_(".swiper-slide .list")[this.index],
// this.principal[this.index].content
res.data
) //调用item父元素加数据
}
if (type == "click") {
if (this.principal[this.index].id != -1)
//如果数组中id不等于负一也就是不是首页
{
if (this.principal[this.index].content.length == 0)
//并且数组为0时
{
getData() //请求数据
}
}
} else {
getData()
}
}
//更改activ样式
changeActive(index) {
this.index = index
_(".header_menu ul li").forEach(v => v.remove("active"))
// 对.header_menu ul li进行遍历先删除所有的active
_(".header_menu ul li")[index].add("active")
// 再通过数据加下标的方式给添加active
this.mySwiper.slideTo(index) //点击时页面跟着标题一起切换 必要参数为下标(index)
}
//调用index接口
async getIndex() {
var res = await indexServe.index();
this.principal[this.index].content = [ //数组加下标的方式存入数据组中的content
...this.principal[this.index].content,
...res.list
//...是指将数组中的元素都取出来
];
item(_(".swiper-slide .list")[this.index], res.list)
}
//页面轮播图
initPage() {
var self = this; //提前定义一个this
this.mySwiper = new Swiper('.swiper-container', { //定义一个mySwiper 加了this为全局变量
direction: 'horizontal', //切换水平滑动
on:{
slideNextTransitionEnd: function() {
//监听是否滑动结束
self.changeActive(this.activeIndex) //获取当前的滑动后的下标
self.getClassListArr()
},
},
})
}
}
new Index()

View File

@@ -0,0 +1,21 @@
class Info {
constructor () {
header("详情")
this.getInfo();
}
async getInfo() {
var res = await indexServe.info({
id: query("id"),
quantity: query("total")
});
res.forEach(v => {
$(".content").html(`<img src="${v}" alt="">`)
});
console.log("res: ", res);
}
}
new Info();

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,5 @@
class CarServe {
}
new CarServe();

View File

@@ -0,0 +1,56 @@
class IndexServe {
//首页
async index(data = {}) {
var ajax = new Ajax()
var res = await ajax.get({
url: config.apiList.index,
data: data,
});
ajax = null;
return res
} //
//每一页
async classListArr(data = {}) {
return await (new Ajax()).get({
url: config.apiList.classListArr,
data: data,
});
}
//导航菜单
async classList(data = {}) {
var res = await (new Ajax()).get({
url: config.apiList.classList,
data: data,
});
res.principal.unshift({
id: -1,
page: 1,
title: "首页",
}) //向res.principal数组前面追加数据(unshift)添加首页
res.principal.forEach(v => {
v.content = []; //为每条对象动态添加了content用来保存数据 默认值为空
v.page = 1;
v.total_page = 0
})
return res;
}
//详情
async info(data = {}) {
return await (new Ajax()).get({
url: config.apiList.info,
data: data,
});
}
}
var indexServe = new IndexServe()

View File

@@ -0,0 +1,130 @@
class Util {
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
HTMLElement.prototype.text = function (text) {
this.innerText = text;
}
HTMLElement.prototype.html = function (text) {
this.innerHTML += text;
}
}
//头部菜单
header(title = "", icon) {
$("body").html(`
<div class="pub_header">
<i class="iconfont icon-back1"></i>
<div class="text">${title}</div>
${icon}
</div>
`)
click($(".icon-back1"), function() {
history.back()
})
}
item(father, data) {
data.forEach(v => {
father.html(`
<div class="item">
<a href="./info.html?id=${v.id}&total=${v.total || v.shuliang}">
<div class="item_top">
<img src="${v.img_src || v.preview}" alt="">
<span>${v.total || v.shuliang}</span>
</div>
<div class="item_text">
<div class="title ellipsis">${v.title}</div>
<div class="model ellipsis">模特:${v.user || v.renwulist[0].name}</div>
<div class="source ellipsis">机构:${v.source || v.jigoulist[0].name}</div>
</div>
</a>
<div class="item_tag">
${(v.biaoqianlist || v.tags).map(j => {
return `<div class="tage_item">${j.name || j.title}</div>`
}).toString().replaceAll(",", "")
}
</div>
</div>
`)
})
}
//底部导航菜单
footer() {
var ul = `
<ul class="footer">
${config.footerList.map((v, i) => {
//用map进行循环 循环里面的首个子元素
return `<li class="${location.href.includes(v.url) ? 'active' : ''}">
<a href="${v.url}">
<i class="iconfont ${v.icon}"></i>
<p>${v.title}</p>
</a>
</li>`
// 用 location方法得到当前地址栏地址 判断是否包含includes当前的短地址 如果是添加active 否则就不添加 返回li标签
}).toString().replaceAll(",", "") //要把map转换数组中的逗号去掉
}
</ul>
`;
$("body").html(ul)
//向页面添加ul
}
query(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
/**
* className 可能的类型:
* 对象类型,本质上是 Element 类型
* 数组类型,本质上是 NodeList 类型
*/
click(className, callback) {
// 不管是 Element 还是 NodeList 都统一转化为 Array类型
// 但如果 className 是 Element 类型,那么转换后数组为空:[]
// 如果 className 是 NodeList 类型,那么转换后数组不为空: [ Element, Element ]
// 因为已经都是数组,所以无需:Array.isArray() 来判断是否是数组了
// 只需要判断数值是否有数据即可
var domArr = Array.from(className);
if (domArr.length != 0) {
className.forEach((v, i) => {
v.onclick = function (e) {
v.index = i;
v.e = e;
callback.call(this)
}
})
} else {
className.onclick = function (e) {
className.e = e;
callback.call(this)
}
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject, query, footer, item,header } = new Util()
inject()

View File

@@ -0,0 +1,12 @@
; (function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

View File

@@ -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>
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
<script src="../js/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="header">
<div class="header_logo">
<i class="iconfont icon-taozi1"></i>
<div class="search">
<i class="iconfont icon-search"></i>
<span>200万张图,有你想要的...</span>
</div>
<i class="iconfont icon-wo"></i>
</div>
<div class="header_menu">
<ul></ul>
<i class="iconfont icon-edit"></i>
</div>
</div>
<div class="content">
<div class="swiper-container">
<div class="swiper-wrapper page_wrapper">
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.3.0/js/swiper.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/util/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/page/index.js"></script>
</html>

View File

@@ -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/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/info.css">
</head>
<body>
<div class="content">
</div>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/page/info.js"></script>
</html>

View File

@@ -0,0 +1,27 @@
<!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/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/mechanism.css">
</head>
<body>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/page/mechanism.js"></script>
</html>

View File

@@ -0,0 +1,27 @@
<!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/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/model.css">
</head>
<body>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/page/model.js"></script>
</html>

View File

@@ -0,0 +1,27 @@
<!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/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/my.css">
</head>
<body>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/page/my.js"></script>
</html>