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,58 @@
@import url(../public/_.css);
.content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0 0.4rem;
margin-top: 1.3rem;
}
.content li {
width: 3rem;
flex-shrink: 0;
display: flex;
flex-direction: column;
margin-bottom: 0.2rem;
}
/* .content li a{
width: 3rem;
flex-shrink: 0;
display: flex;
flex-direction: column;
margin-bottom: 0.2rem;
} */
.content li img {
width: 100%;
height: 4rem;
}
.content li p:nth-child(2) {
font-size: var(--f15);
overflow: hidden;
/*超出部分隐藏*/
white-space: nowrap;
/*禁止换行*/
text-overflow: ellipsis;
/*省略号*/
font-weight: 500;
margin-top: 0.3rem;
margin-left: 0.1rem;
}
.content li p:nth-child(3) {
font-size: var(--f12);
color: var(--textColor);
margin-left: 0.1rem;
margin-top: 0.1rem;
}
.swiper-slide1 {
font-size: 20px;
height: calc(100vh);
overflow-y: scroll;
}

View File

@@ -0,0 +1 @@
@import url(../public/_.css);

View File

@@ -0,0 +1 @@
@import url(../public/_.css);

View File

@@ -0,0 +1 @@
@import url(../public/_.css);

View File

@@ -0,0 +1,23 @@
@import url(../public/_.css);
.title {
padding: 0 15px;
font-size: 16px;
font-weight: 400;
padding-top: 20px;
margin-bottom: 10px;
}
.list {
padding: 0 15px;
display: flex;
flex-wrap: wrap;
}
.list li {
padding: 5px 10px;
font-size: 14px;
background: var(--themeColor);
margin-right: 10px;
color: #fff;
border-radius: 20px;
margin-bottom: 7px;
}

View File

@@ -0,0 +1 @@
@import url(../public/_.css);

View File

@@ -0,0 +1,2 @@
@import url(../public/_.css);

View File

@@ -0,0 +1 @@
@import url(../public/_.css);

View File

@@ -0,0 +1,27 @@
@import url(../public/_.css);
.content{
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 1.5rem;
overflow-y: scroll;
}
.content li{
width: 25%;
flex-shrink: 0;
text-align: center;
margin-bottom: .15rem;
}
.content li a{
align-items: center;
}
.content li a p{
font-size: .28rem;
margin-bottom: 0.15rem;
}
.content li a p:nth-child(2){
font-size: .2rem;
zoom: 0.88;
color: var(--themeColor);
}

View File

@@ -0,0 +1,4 @@
@import url(./size.css);
@import url(./color.css);
@import url(./normalize.css);
@import url(./utils.css);

View File

@@ -0,0 +1,8 @@
:root{
--red:red;
--aqua:aqua;
--themeColor: #fb7299;
--whiteColor: #fff;
--blackColor: #000;
--textColor: #999;
}

View File

@@ -0,0 +1,24 @@
.header{
width: 100%;
height: 1rem;
position: fixed;
left: 0;
top: 0;
box-sizing: border-box;
background-color: var(--themeColor);
display: flex;
align-items: center;
}
.header a{
color: #fff;
font-size: var(--f22);
margin-left: 0.2rem;
margin-right: 0.21rem;
}
.header p{
color: #fff;
font-size: var(--f17);
line-height: 0;
}
.content::-webkit-scrollbar{display: none;}

View File

@@ -0,0 +1,404 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
body {
font-size: 0;
}
html {
line-height: 1;
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
list-style: none;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
.content {
margin-top: 1rem;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration: none;
color: #000;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

View File

@@ -0,0 +1,15 @@
:root{
--f12: .24rem;
--f13: .26rem;
--f14: .28rem;
--f15: .3rem;
--f16: .32rem;
--f17: .34rem;
--f18: .36rem;
--f19: .38rem;
--f20: .4rem;
--f21: .42rem;
--f22: .44rem;
--f23: .46rem;
--f24: .48rem;
}

View File

@@ -0,0 +1,152 @@
.active a {
color: var(--themeColor);
}
.active {
color: var(--themeColor);
}
.footer {
width: 100%;
height: 1rem;
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
border-top: 0.02rem solid #e2e2e2;
background-color: #fff;
z-index: 9000;
}
.footer li {
text-align: center;
}
.footer li a {}
.footer li i {}
.footer li p {
font-size: 0.24rem;
margin-top: 0.04rem;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header_pub {
height: 0.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;
}
.header_pub .left {
font-size: .36rem;
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
}
.header_pub .left i {
font-size: .4rem;
color: #fff;
}
.header_pub .left span {
flex: 1;
}
.swiper-slide {
font-size: 20px;
height: calc(100vh - 2.6rem);
overflow-y: scroll;
}
.swiper-wrapper ul {
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.swiper-wrapper ul li {
width: 48%;
flex-shrink: 0;
margin-bottom: 0.24rem;
}
.swiper-wrapper ul li .img {
position: relative;
}
.swiper-wrapper ul li .img img {
width: 100%;
}
.swiper-wrapper ul li .img 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;
}
.swiper-wrapper ul li .title {
font-size: 0.34rem;
font-weight: 400;
margin-top: 0.2rem;
margin-bottom: .12rem;
}
.swiper-wrapper ul li .model,
.swiper-wrapper ul li .jg {
font-size: 0.28rem;
color: #bdb7b7;
margin-bottom: .12rem;
}
.swiper-wrapper ul li .tag {
margin-top: 0.1rem;
display: flex;
flex-wrap: wrap;
}
.swiper-wrapper ul li .tag 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;
}
.swiper-slide1 {
font-size: 20px;
height: calc(100vh);
overflow-y: scroll;
}

View File

@@ -0,0 +1,36 @@
//放程序的你如接口地址
var config = {
devBaserl: 'http://127.0.0.1:3000/api/json', //开发阶段
testBaserl: 'http://127.0.0.1:3000/api/json/', //测试阶段
pordBaserl: 'http://127.0.0.1:3000/api/json', //上线阶段
stage: 'pord', //用以筛选是什么阶段
urlList:{ //不同接口调用不同字段
classList:"/classList",
info: '/info', //url(confi.getBaseUrl)
index:"/index",
type:"/class",
mechanism:"/mechanism",
mechanismList:"/mechanismList",
allModel:"/allModel",
modelList:"/modelList",
search:"/search"
},
getBaseUrl: function () {
switch (this.stage) {
case "dev":
return this.devBaserl
break;
case "test":
return this.testBaserl
break;
case "pord":
return this.pordBaserl
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,145 @@
class html {
//默认head
timeout=10000
Headermr={
'Content-Type': 'application/json;charset=utf-8'
}
constructor() {
//创建 XMLHttpRequest 对象
this.xhr = new XMLHttpRequest()
}
/*html.get({
url() -- 请求的地址
method: -- 请求的类型
data{ -- 数据 get 传输方式是在地址后拼接传输的 post 是在 send()里面传输的
id="1"
text="好的"
}
timeout: -- 网络请求超时间
header:{} -- 请求头
})*/
//promise
get(par) {
return new Promise((success,error)=>{
this.timeoutm(par)
let urldata = "" //创建一个变量储存数据 用来拼接
//遍历data
for (const key in par.data) {
urldata += `&${key}=${par.data[key]}` //进行拼接
}
console.log(urldata)
urldata = urldata.replace("&", ""); //将第一个开头的&替换成空
//创建一个新的HTTP请求,并指定该请求的方法、URL及验证信息
this.xhr.open("GET", `${config.getBaseUrl()}${par.url}?${urldata}`)
console.log("GET", `${config.getBaseUrl()}${par.url}?${urldata}`)
this.xhr.timeout=this.timeout;
this.RequestHeader(par.Header)
//将请求发送出去
this.xhr.send()
//回调函数对不同状态进行处理
this.statechange(success, error)
})
}
//callback
/*get传值方法
get(par) {
this.timeoutm(par)
let urldata = "" //创建一个变量储存数据 用来拼接
//遍历data
for (const key in par.data) {
urldata = `&${key}=${par.data[key]}` //进行拼接
}
urldata = urldata.replace("&", ""); //将第一个开头的&替换成空
//创建一个新的HTTP请求,并指定该请求的方法、URL及验证信息
this.xhr.open("GET", `${par.url}?${urldata}`)
this.xhr.timeout=this.timeout;
this.RequestHeader(par.Header)
//将请求发送出去
this.xhr.send()
//回调函数对不同状态进行处理
this.statechange(par.success, par.error)
}
//post传值方法
post(par) {
this.timeout(par)
//创建一个新的HTTP请求,并指定该请求的方法、URL及验证信息
this.xhr.open("POST", `${par.url}`)
this.RequestHeader(par.Header)
//将请求发送出去
this.xhr.send(JSON.stringify(par.data))
//回调函数对不同状态进行处理
this.statechange(par.success, par.error)
}*/
//回调函数
statechange(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
let data = JSON.parse(this.xhr.response)
switch (data.status) {
case 200:
success(data)
break;
case 404:
alert(data.msg)
console.error(this.xhr);
throw new Error(data.msg)
break;
default:
break;
}
} else {
error(this.xhr)
}
}
}
}
//多个请求头遍历
RequestHeader(Header={}){
Object.assign(Header,this.Headermr)
for (const key in Header) {
this.xhr.setRequestHeader(key,Header[key]);
}
}
timeoutm(par){
this.timeout=par.timeout||this.timeout;
}
}
var http = new html()
/*
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:3000/api/json/index")
xhr.setRequestHeader()
xhr.timeout()
xhr.send()
xhr.onreadystatechange = () => {
if (xhr.readyState == "4") {
if (xhr.status == "200") {
}
}
} */

View File

@@ -0,0 +1,79 @@
class Institutiondetails {
constructor() {
header(query("title"))
this.details()
this.errr()
}
max = 0
page = 1;
//获取数据
async details() {
$(".swiper-slide1").onscroll = (v) => {
const { clientHeight, scrollHeight, scrollTop } = $(".swiper-slide1");
let distance = scrollHeight - scrollTop - clientHeight;
console.log(distance)
if (distance <=1) {
if (this.page < this.max - 1) {
this.page += 1;
this.errr()
console.log(this.page)
} else {
}
} else {
}
}
}
async errr(){
let id = query("id");
let data = {
id: id,
page: this.page
}
console.log( this.page)
let details = await indexserve.mechanismList(data);
this.max = details.result.total_page;
console.log(details)
item($(".swiper-slide1"), details.result.data,2)
}
// boot = true;
// //机构移动
// Mechanismmovement() {
// $("body").ontouchmove = (e) => {
// // console.log(e.touches[0].pageY)
// //e.touches[0].pageY 获取当前手指在页面中的位置
// //document.body.offsetHeight 获取当前页面中的高度
// //手指在页面中的位置>= 获取当前页面中的高度-浏览器的高度
// if (e.touches[0].pageY >= document.body.offsetHeight - window.innerHeight - 300) {
// if (this.boot == false) {
// if (this.page >= this.max) {
// this.page = this.max;
// alert("到底了")
// } else {
// this.page += 1;
// console.log(this.page)
// console.log(this.max)
// this.details();
// }
// this.boot = true;
// }
// // alert("到底了")
// } else {
// this.boot = false;
// }
// }
// }
}
new Institutiondetails()

View File

@@ -0,0 +1,154 @@
class Index {
constructor() {
footer()
this.classifyindex()
this.initSwiper()
this.Home()
this.index = 0
this.principal = []
this.onbeforeunload()
}
onbeforeunload() {
window.onbeforeunload = ()=> {
let ee= getItem("principalIII")
setItem("principal",ee)
}
}
//首页分类
async classifyindex() {
console.log("首页")
if (!getItem("principal")) {
let principalh = await indexserve.type()
let { additional, principal } = principalh.result
this.principal = principal;
//已选
setItem("principal", principal)
//刷新
setItem("principalIII", principal)
//未选
setItem("additional", additional)
//收藏
setItem("like",[])
//历史记录
setItem("History",[])
} else {
this.principal = getItem("principal")
console.log()
}
this.principal.forEach((v, i) => {
//添加分类Li
$(".header_menu ul").html(`
<li class="${i == 0 ? "active" : ""}">${v.title} </li>
`)
$(".swiper-wrapper").html(`
<div class="swiper-slide">
<ul class="qwe${i}"></ul>
</div>
`)
});
_(".header_menu ul li").tap(({ v, i }) => {
this.swiper.slideTo(i)
})
_(".swiper-wrapper .swiper-slide").forEach(v => {
v.onscroll = () => {
const { clientHeight, scrollHeight, scrollTop } = v;
let distance = scrollHeight - scrollTop - clientHeight;
if (distance <= 1) {
if (this.index != 0) {
this.principal[this.index].page += 1;
setItem("principal", this.principal)
if (this.principal[this.index].page <= this.principal[this.index].total_page) {
this.classifications('ko')
}
}
} else {
}
}
})
}
initSwiper() {
let self = this
this.swiper = new Swiper('.swiper', {
direction: 'horizontal',
on: {
slideChangeTransitionStart: function () {
self.index = this.activeIndex
_(".header_menu ul li")[this.activeIndex].appClass("active")
.siblings().removeClass("active");
console.log("中")
self.classifications()
},
},
})
}
//首页
ddf
async Home() {
let xq = await indexserve.index();
console.log( xq.result.list)
this.ddf=()=>{
item(_(".swiper-wrapper .swiper-slide ul")[0], xq.result.list)
}
this.ddf();
clicka(".swiper-wrapper .swiper-slide ul li", xq.result.list, "detail.html")
}
async classifications(type = "click") {
console.log("未")
console.log(this.principal)
this.principal = getItem("principal")
let loadData = async () => {
let red = await indexserve.mechanismList({
id: this.principal[this.index].id,
page: this.principal[this.index].page
})
console.log(red)
//将值赋给分类中的变量
// console.log(red)
red.result.data.forEach(v=>{
this.principal[this.index].content.push(v);
})
this.principal[this.index].total_page = red.result.total_page;
console.log(this.principal[this.index].content)
setItem("principal", this.principal)
// console.log(this.principal.result.principal[this.index].content)
item(
_(".swiper-wrapper .swiper-slide ul")[this.index],
this.principal[this.index].content
)
console.log(this.principal[this.index].content)
let fff = `.swiper-wrapper .swiper-slide .qwe${this.index} li`
clicka(fff, this.principal[this.index].content, "detail.html")
this.ddf();
}
if (type == "click") {
if (this.principal[this.index].content.length == 0) {
this.principal[this.index].page += 1
loadData()
}
} else {
loadData()
}
}
}
new Index()

View File

@@ -0,0 +1,25 @@
class mechanism {
constructor() {
footer()
this.institutions();
}
async institutions() {
let insti = await indexserve.mechanism()
console.log(insti.result)
insti.result.forEach((v) => {
console.log(v)
$(".content").html(`
<li>
<a href="./Institutiondetails.html?id=${v.id}&page=${v.page}&title=${v.title}">
<p>${v.title}</p>
<p>${v.id}套</p>
</a>
</li>
`);
})
}
}
new mechanism()

View File

@@ -0,0 +1,100 @@
class IndexServe {
async type(data = {}, headers = {}) {
let http = new html()
let re = await http.get({
url: config.urlList.type,
data
})
re.result.principal.unshift({
id: -1,
page: -1,
title: "首页"
})
re.result.principal.forEach(v => {
v.content = []
v.total_page = 0
});
re.result.additional.forEach(v => {
v.content = []
v.total_page = 0
});
http = null
console.log(re)
return re
}
//机构
async mechanism(data = {}, headers = {}) {
let http = new html()
let re = await http.get({
url: config.urlList.mechanism,
data
})
http = null
return re
}
//分类详情
async mechanismList(data, headers = {}) {
let http = new html()
let re = await http.get({
url: config.urlList.classList,
data
})
http = null
return re
}
async allModel(data = {}, headers = {}) {
let http = new html()
let re = await http.get({
url: config.urlList.allModel,
})
http = null
return re
}
async index(data = {}, headers = {}) {
let http = new html()
let re = await http.get({
url: config.urlList.index,
})
http = null
return re
}
//详情
async info(data = {}, headers = {}) {
let http = new html()
let re = await http.get({
data,
url: config.urlList.info,
})
http = null
return re
}
//模特详情页
async modelList(data = {}, headers = {}) {
let http = new html()
let re = await http.get({
data,
url: config.urlList.modelList,
})
http = null
return re
}
//搜索
async search(data = {}, headers = {}) {
let http = new html()
let re = await http.get({
data,
url: config.urlList.search,
})
http = null
return re
}
}
var indexserve = new IndexServe();

View File

@@ -0,0 +1,223 @@
class Utils {
footer() {
let curretHref = location.href
let list = [
{ title: "首页", icon: "home", href: "index.html" },
{ title: "机构", icon: "jigou", href: "mechanism.html" },
{ title: "模特", icon: "me", href: "mannequin.html" },
{ title: "我的", icon: "wo", href: "Itsmine.html" },
]
let html =
`
<ul class="footer">
${list.map((v) => {
return `
<li class="${curretHref.includes(v.href) ? "active" : ""}">
<a href="${v.href}">
<i class="iconfont icon-${v.icon}"></i>
<p>${v.title}</p>
</a>
</li>
`
})
}
</ul>
`
$("body").insertAdjacentHTML("beforeend", html)
}
customMethods() {
Array.prototype.map = function (callback) {
let result = []
for (let index = 0; index < this.length; index++) {
result.push(callback(this[index], index, this))
}
return result.toString().replaceAll(",", "");
}
Element.prototype.html = function (name) {
this.innerHTML += name;
}
//为单个多个元素绑定 click事件
//Eventcode是点击事件里所写的代码 例如:sss.onclick=()=>{ Eventcode是这里面的方法 }
NodeList.prototype.tap = function (Eventcode) {
this.forEach((v, i) => ClickTransfer(v, Eventcode, i))
}
//为单个元素绑定 click事件
Element.prototype.tap = function (Eventcode) {
ClickTransfer(this, Eventcode)
}
//
let ClickTransfer = (v, Eventcode, i) => {
v.onclick = (e) => {
console.log()
Eventcode({ v, i, e })
}
}
//添加类
Element.prototype.appClass = function (name) {
this.classList.add(name)
return this
}
Element.prototype.siblings = function () {
return Array.from(this.parentElement.children).filter(v => v != this)
}
//循环删除
Array.prototype.removeClass = function (name) {
this.forEach(v => bindElementRemoveClass(v, name))
return this;
}
//删除单个类
Element.prototype.removeClass = function (name) {
bindElementRemoveClass(this, name)
return this;
}
var bindElementRemoveClass = (v, name) => {
v.classList.remove(name)
}
}
//详情头部
header(title = "", like = "") {
$("body").html(`
<div class="header_pub">
<div class="left">
<i class="iconfont icon-back1"></i>
<span class="ellipsis">${title}</span>
</div>
${like}
</div>
`);
$(".header_pub .icon-back1").tap(() => {
history.back()
})
}
$(className) {
return document.querySelector(className);
}
_(className) {
return document.querySelectorAll(className);
}
query(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return decodeURIComponent(r[2]);
return null;
}
item(dom, data, type = 1) {
console.log(type)
if (type == 1 || type) {
dom.innerHTML = ""
}
data.forEach((v, i) => {
dom.html(`
<li>
<a>
<div class="img">
<img src="${v.img_src || v.preview}" alt="">
<span>${v.total || v.shuliang || v.quantity}P</span>
</div>
<div class="title ellipsis">${v.title}</div>
${type == 3 ? "" : `<div class="model ellipsis">${v.user || `模特:${(v?.renwulist.length != 0 ? v.renwulist[0].name : '')||(v.renwulist.length != 0 ? v.renwulist[0].name : '')}`}</div>
<div class="jg ellipsis"> ${v.source || `机构:${v.jigoulist[0].name}`}</div>`}
</a>
${type == 3 ? "" : `<div class="tag">${(v.biaoqianlist || v.tags).map(item => { return `<a href="">${item.name || item.title}</a>` })}</div>`}
</li>
`)
})
}
//添加到浏览器
setItem(key, value) {
localStorage.setItem(key, value.constructor == Object || value.constructor == Array ? JSON.stringify(value) : value)
}
//从浏览器获取数据
getItem(key) {
return localStorage.getItem(key) == null ? false : JSON.parse(localStorage.getItem(key))
}
//添加a标签点击
clicka(dom, data, href) {
console.log(data)
_(dom).tap(({ v, i }) => {
let clickaadd = () => {
let sss = {
id: data[i].id,
img_src: data[i].img_src || data[i].preview,
title: data[i].title,
renwulist: data[i].renwulist || data[i].user,
jigoulist: data[i].jigoulist || data[i].source,
biaoqianlist: data[i].biaoqianlist || data[i].tags,
shuliang: data[i].shuliang || data[i].total
}
let ddd = getItem("History")
ddd.unshift(sss)
//添加到浏览器
setItem("History", ddd)
window.location.href = `${href}?id=${data[i].id}&quantity=${data[i].total || data[i].shuliang||data[i].quantity}&title=${encodeURIComponent(data[i].title)}&img_src=${data[i].preview || data[i].img_src}`
}
// window.location.href = `${href}?id=${data[i].id}&quantity=${data[i].total || data[i].shuliang}&title=${encodeURIComponent(data[i].title)}&img_src=${data[i].preview || data[i].img_src}`
// 添加历史记录
let ty = false;
try {
getItem("History").forEach(v => {
if (data[i].id == v.id) {
let data1 = getItem("History").filter(item => item.id != data[i].id)
setItem("History", data1)
clickaadd()
ty = true
}
})
} catch (e) {
if (e.message != "第三") throw e;
};
if (ty == false) {
clickaadd()
}
})
}
}
let {
$, _,
customMethods, footer,
query, item, header, setItem, getItem, clicka,
} = new Utils()
customMethods()

View File

@@ -0,0 +1,10 @@
((w, d) => {
function setSize() {
var screenWidth = d.documentElement.clientWidth;
var currentFontSize = screenWidth * 100 / 750;
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)

View File

@@ -0,0 +1,40 @@
<!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://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link rel="stylesheet" href="../css/public/hea.css">
<link rel="stylesheet" href="../css/page/Itsmine.css">
</head>
<body>
<div class="swiper-wrapper ">
<ul class="swiper-slide1" style="margin-top: 1.1rem;">
</ul>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script>
class Browsinghistory{
constructor(){
header("浏览历史")
this.Browsinghistory()
}
Browsinghistory(){
item($(".swiper-slide1"), getItem("History"),3)
clicka(".swiper-slide1 li a",getItem("History"),"detail.html")
}
}
new Browsinghistory()
</script>
</html>

View File

@@ -0,0 +1,30 @@
<!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://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link rel="stylesheet" href="../css/public/hea.css">
<link rel="stylesheet" href="../css/page/Institutiondetails.css">
</head>
<body>
<div class="swiper-wrapper ">
<ul class="swiper-slide1" style="margin-top: 1.1rem;">
</ul>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/pagge/Institutiondetails.js"></script>
</html>

View File

@@ -0,0 +1,138 @@
<!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://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link rel="stylesheet" href="../css/public/hea.css">
<link rel="stylesheet" href="../css/page/Itsmine.css">
<style>
.center {
margin-top: 0.9rem;
}
.center .center_shang {
width: 100%;
height: 3rem;
background-color: #fb7299a6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.center .center_shang i {
font-size: 1.6rem;
color: aliceblue;
}
.center .center_shang p {
font-size: 0.5rem;
color: aliceblue;
}
.center .center_xia {
margin-top: 0.1rem;
}
.center .center_xia li {}
.center .center_xia li a {
display: flex;
justify-content: space-between;
align-items: center;
height: 0.8rem;
}
.center .center_xia li div {
display: flex;
align-items: center;
}
.center .center_xia li div>i {
margin-left: 0.2rem;
}
.center .center_xia li div>p {
margin-left: 0.2rem;
font-size: 0.36rem;
}
.center .center_xia li i {
margin-right: 0.15rem;
}
</style>
</head>
<!-- 我的页面 -->
<body>
<div class="center">
<div class="center_shang">
<i class="iconfont icon-wo"></i>
<p>个人</p>
</div>
<ul class="center_xia">
<li>
<a href="">
<div>
<i class="iconfont icon-xieyiguanli"></i>
<p>最近更新</p>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</a>
</li>
<li>
<a href="MyCollection.html">
<div>
<i class="iconfont icon-xieyiguanli"></i>
<p>我的收藏</p>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</a>
</li>
<li>
<a href="Browsinghistory.html">
<div>
<i class="iconfont icon-xieyiguanli"></i>
<p>历史记录</p>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</a>
</li>
<li>
<a href="" class="ddr">
<div>
<i class="iconfont icon-xieyiguanli"></i>
<p>清除缓存</p>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</a>
</li>
</ul>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script>
class Itsmine {
constructor() {
header("我的页面")
footer()
$(".ddr").tap(() => {
localStorage.clear()
})
}
}
new Itsmine();
</script>
</html>

View File

@@ -0,0 +1,89 @@
<!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://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link rel="stylesheet" href="../css/public/hea.css">
<link rel="stylesheet" href="../css/page/Modeldetails.css">
<style>
.sssss {
height: 1rem;
}
.swiper-slide1 {
font-size: 20px;
height: calc(100vh);
overflow-y: scroll;
}
</style>
</head>
<!-- 模特详情页 -->
<body>
<div class="sssss"></div>
<div class="swiper-wrapper ">
<ul class="swiper-slide1">
</ul>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script>
class Modeldetails {
constructor() {
header("模特详情")
this.Modeldetails()
}
indexs = 1
async Modeldetails() {
this.xunhuan()
$(".swiper-slide1").onscroll = (v) => {
const { clientHeight, scrollHeight, scrollTop } = $(".swiper-slide1");
let distance = scrollHeight - scrollTop - clientHeight;
console.log(distance)
if (distance <= 3) {
if (this.indexs < this.inde - 1) {
console.log(1)
this.indexs += 1;
console.log("this.indexs"+this.indexs)
this.xunhuan()
} else {
}
} else {
}
}
}
async xunhuan() {
let re = await indexserve.modelList(
{
id: query("id"),
page: this.indexs
}
)
console.log(re.result)
this.inde = re.result.total_page;
item($(".swiper-slide1"), re.result.data,2)
clicka(".swiper-wrapper ul li a", re.result.data,"detail.html")
console.log("this.inde"+this.inde)
}
}
new Modeldetails()
</script>
</html>

View File

@@ -0,0 +1,39 @@
<!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://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link rel="stylesheet" href="../css/public/hea.css">
<link rel="stylesheet" href="../css/page/Institutiondetails.css">
</head>
<!-- 我的收藏 -->
<body>
<div class="swiper-wrapper ">
<ul class="swiper-slide1" style="margin-top: 1.1rem;">
</ul>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script>
class MyCollection{
constructor(){
header("我的收藏")
this.MyCollection()
}
MyCollection(){
item($(".swiper-slide1"), getItem("like"),3)
clicka(".swiper-slide1 li a",getItem("like"),"detail.html")
}
}
new MyCollection()
</script>
</html>

View File

@@ -0,0 +1,91 @@
<!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://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link rel="stylesheet" href="../css/public/hea.css">
<link rel="stylesheet" href="../css/page/Search.css">
<style>
.her{
width: 100%;
height: 1rem;
position: fixed;
top: 0;
left: 0;
background-color: var(--themeColor);
box-sizing: border-box;
z-index: 9999;
display: flex;
align-items: center;
}
.her i{
font-size: var(--f20);
margin: 0 0.2rem;
}
.her input{
height: 0.6rem;
flex: 1;
border-radius :0.5rem;;
font-size: var(--f15);
}
.her i:nth-child(1){
}
.her i:nth-child(2){}
</style>
</head>
<body>
<div class="her">
<i class="iconfont icon-back1 dddd1"></i>
<input type="text">
<i class="iconfont icon-search dddd"></i>
</div>
<div class="swiper-wrapper ">
<ul class="swiper-slide1" style="margin-top: 1.1rem;">
</ul>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script>
class Search{
constructor(){
this.search()
}
text=null
async search(){
$(".dddd").tap(({v,i})=>{
this.text=document.querySelector('input').value;
ddf()
})
// encodeURIComponent
let ddf=async ()=>{
let ddd= await indexserve.search({
keyword:decodeURIComponent(this.text),
page:1
})
item($(".swiper-slide1"), ddd.result,2)
clicka(".swiper-slide1 li a",ddd.result,"detail.html")
console.log(ddd)
}
$(".dddd1").tap(()=>{
history.back()
})
}
}
new Search()
</script>
</html>

View File

@@ -0,0 +1,69 @@
<!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://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.css" rel="stylesheet">
<link rel="stylesheet" href="../css/page/classify.css">
</head>
<body>
<div class="content">
<div class="title">已选菜单</div>
<ul class="list principal">
</ul>
<div class="title">可选菜单</div>
<ul class="list additional">
</ul>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/pagge/classify.js"></script>
<script>
class classify {
constructor() {
header("分类编辑")
this.renderList();
}
renderList() {
console.log(getItem("additional"))
$(".principal").innerHTML=""
$(".additional").innerHTML=""
$(".principal").html(getItem("principal").map(v => `<li>${v.title}</li>`))
$(".additional").html(getItem("additional").map(v => `<li>${v.title}</li>`))
_(".principal li").tap(({ v, i }) => {
i != 0 ? this.clickev("principal", "additional", { v, i }) : null
setItem("principalIII",getItem("principal"))
})
_(".additional li").tap(({ v, i }) => {
this.clickev("additional", "principal", { v, i })
})
}
clickev(principal, additional, item) {
let { v, i } = item;
let getAdditional = getItem(additional)
getAdditional.push(getItem(principal)[i])
setItem(additional, getAdditional)
setItem(principal, getItem(principal).filter(item => v.innerText != item.title))
this.renderList()
}
}
new classify()
</script>
</html>

View File

@@ -0,0 +1,183 @@
<!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://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.css" rel="stylesheet">
<link rel="stylesheet" href="../css/page/detail.css">
<style>
body {}
.content {
height: 100%;
height: calc(100vh);
overflow-y: scroll;
}
.content img {
height: 13.34rem;
width: 7.5rem;
background-color: aqua;
}
</style>
</head>
<body>
<div class="content">
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script>
class Info {
inex = [[]];
index = 1;
constructor() {
let t
if (getItem("like").length == 0) {
t = '<i class="iconfont icon-xin Love"></i>'
} else {
console.log(getItem("like"))
try {
getItem("like").forEach((v) => {
if (v.id == query("id")) {
t = '<i class="iconfont icon-aixin Love"></i>'
throw new Error("第三");
} else {
t = '<i class="iconfont icon-xin Love"></i>'
}
})
} catch (e) {
if (e.message != "第三") throw e;
};
}
console.log(t)
header(query("title"), t)
this.detail()
this.Love()
}
async detail() {
console.log(query("quantity"), query("id"))
let info = await indexserve.info({
id: query("id"),
quantity: query("quantity")
})
console.log(info)
info.result.forEach((v, i) => {
if (i == (10 * this.index) - 1) {
this.inex[(this.index - 1)].push(v)
this.index += 1;
this.inex.push([])
} else {
this.inex[(this.index - 1)].push(v)
}
});
//滑动数组下标
this.indexs = 0;
this.xunhuan()
$(".content").onscroll = (v) => {
const { clientHeight, scrollHeight, scrollTop } = $(".content");
let distance = scrollHeight - scrollTop - clientHeight;
console.log(distance)
if (distance <= 1) {
if (this.indexs < this.index - 1) {
this.indexs += 1;
this.xunhuan()
} else {
alert(1)
}
} else {
}
}
}
dd = 0;
xunhuan() {
this.inex[this.indexs].forEach(v => {
$(".content").html(`
<img src=${v} alt="${this.dd += 1}">
`)
})
}
Love() {
$(".Love").tap(({ v, i }) => {
let ty = false;
if (getItem("like").length == 0) {
//没有查到添加进 like
this.Love1();
} else {
console.log(getItem("like"))
//查询是否存在
try {
getItem("like").forEach((c, i) => {
if (c.id == query("id")) {
let ssd = getItem("like").filter(item => item.id != query("id"))
setItem("like", ssd)
console.log(1)
$(".Love").removeClass("icon-aixin").appClass("icon-xin")
ty = true
}
})
} catch (e) {
if (e.message != "第三") throw e;
};
if (ty == false) {
this.Love1();
console.log(2)
}
}
})
}
//添加收藏
Love1() {
//没有查到添加进 like
let sss = {
id: query("id"),
quantity: query("quantity"),
title: query("title"),
img_src: query("img_src"),
}
let ddd = getItem("like")
ddd.push(sss)
setItem("like", ddd)
ddd = null
$(".Love").removeClass("icon-xin").appClass("icon-aixin")
}
}
new Info()
</script>
</html>

View File

@@ -0,0 +1,150 @@
<!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">
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.css" rel="stylesheet">
<link rel="stylesheet" href="../css/page/index.css">
<title>Document</title>
<style>
.header {
position: fixed;
width: 100%;
height: 1.6rem;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.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>i {
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) !important;
font-size: 0.26rem !important;
margin-right: 0.1rem;
padding-top: 0.02rem;
margin-left: 0.26rem;
}
.header .header_top .search span {
font-size: var(--f12);
color: var(--textColor);
}
.header .header_menu {
height: 0.72rem;
display: flex;
align-items: center;
background: #fe7fa2;
}
.header .header_menu a {
color: #fff;
text-decoration: none;
width: 0.8rem;
height: 0.72rem;
text-align: center;
line-height: 0.72rem;
}
.header .header_menu ul {
flex: 1;
display: flex;
align-items: center;
overflow-x: scroll;
padding-left: 0.3rem;
}
.header .header_menu ul .active {
color: var(--whiteColor) !important;
}
.header .header_menu ul li {
font-size: 0.26rem;
margin-right: 0.26rem;
color: #d3d2d2;
flex-shrink: 0;
}
.content {
margin-top: 1.6rem;
}
.swiper-slide {
font-size: 20px;
}
</style>
</head>
<body>
<div class="header">
<div class="header_top">
<i class="iconfont icon-taozi1"></i>
<a class="search" href="Search.html">
<i class="iconfont icon-search"></i>
<span>200万张图,有你想要的...</span>
</a>
<i class="iconfont icon-wo"></i>
</div>
<div class="header_menu">
<ul>
</ul>
<a class="iconfont icon-edit" href="./classify.html"></a>
</div>
</div>
<div class="content">
<div class="swiper">
<div class="swiper-wrapper">
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/pagge/index.js">
</script>
</html>

View File

@@ -0,0 +1,118 @@
<!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://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link rel="stylesheet" href="../css/public/hea.css">
<link rel="stylesheet" href="../css/page/mannequin.css">
<style>
.center{
display: flex;
width: 100%;
margin-top: 1.1rem;
flex-wrap: wrap;
align-items: center;
}
.center li{
width: 25%;
flex-shrink: 0;
margin-bottom: 0.3rem;
}
.center li a{
display: flex;
align-items: center;
flex-direction: column;
}
.center li a .center_div{
width: 1.1256rem;
position: relative;
}
.center li a .center_div img{
width: 100%;
height: 100%;
border-radius: 100%;
}
.center li a .center_div>div{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #6969698c;
color: #fff;
padding: .002rem;
width: 0.5rem;
height: .2rem;
text-align: center;
padding: .03rem 0;
border-radius: 0.11rem;
}
.center li a .center_div>div p{
font-size: var(--f12);
zoom: 0.7;
}
.center_div1{
font-size: var(--f12);
zoom: 0.85;
margin-top: .1rem;
color: dimgrey;
}
</style>
</head>
<!-- 模特页面 -->
<body>
<ul class="center">
</ul>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script>
class mannequin {
constructor() {
footer()
this.allModel();
header("模特")
}
async allModel() {
let allModel = await indexserve.allModel();
console.log(allModel)
$(".center").html(`
${
allModel.result.map(v=>{
return `
<li>
<a href="./Modeldetails.html?id=${v.id}&page=1">
<div class="center_div">
<img src=${v.img}>
<div><p>${v.shengao}套</p></div>
</div>
<div class="center_div1">${v.title}</div>
</a>
</li>
`
})
}
`)
}
}
new mannequin()
</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/utils/rem.js"></script>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link rel="stylesheet" href="../css/public/hea.css">
<link rel="stylesheet" href="../css/page/mechanism.css">
</head>
<body>
<div class="header">
<a class="iconfont icon-back1" href="./index.html"></a>
<p>机构</p>
</div>
<ul class="content">
</ul>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/pagge/mechanism.js"></script>
</html>

View File

@@ -0,0 +1,28 @@
最外层项目名
一、css 总文件夹
1. (public)公共css样式文件夹
color.css 统一字体颜色
size.css 统一字体大小 :root{ 在这里面写 例如:--f12:12px}
_.css 将公共css代码在这里引用
utils.css 公共类名
2. (page) 页面css样式文件夹
二、img 总文件夹
三、js 总文件夹
1.config
2.http ajax封装
3.page
4.serve 中间层(数据处理层)
5.utils 共公js
四、(page)页面html总文件夹