hahah
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2024-12-03 11:18:07 +08:00
parent 9e7485dfa2
commit 4991b3686c
16 changed files with 589 additions and 402 deletions

View File

@@ -0,0 +1,24 @@
@import "../tool/color.css";
@import "../tool/size.css";
@import "../tool/utils.css";
.type_list {
li {
text-align: center;
margin-bottom: var(--f10);
width: 25%;
a {
.text {
color: var(--textColor);
font-size: var(--f18);
margin-bottom: .14rem;
}
.nums {
font-size: var(--f14);
color: var(--tipsTextColor);
}
}
}
}

View File

@@ -4,11 +4,7 @@
.header {
color: var(--textColor);
font-size: var(--f16);
.title{
margin: 0 .16rem;
}
.ilist {
i {
font-size: var(--f22) !important;

0
css/page/tagListInfo.css Normal file
View File

View File

@@ -3,469 +3,519 @@
* Copyright (c) 2020. bmy
*/
.iconfont {
.iconfont {
font-size: .32rem;
}
}
p,body,h1,h2,h3,h4,h5,h6,ul,li{
p,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
margin: 0;
padding: 0;
}
html {
font-family: sans-serif; /* 1 */
html {
font-family: sans-serif;
/* 1 */
line-height: 1;
}
}
body {
body {
width: 100%;
font-size: 0px;
background-color: #fff;
color: rgba(0, 0, 0, 0.87);
}
}
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 0;
height: 0;
}
li {
a {
color: #000;
}
li {
list-style: none;
}
}
article,
aside,
footer,
header,
nav,
section {
article,
aside,
footer,
header,
nav,
section {
display: block;
}
}
/**
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
h1 {
font-size: 2em;
margin: 0.67em 0;
}
}
/* Grouping content
/* Grouping content
========================================================================== */
/**
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
figcaption,
figure,
main {
/* 1 */
display: block;
}
}
/**
/**
* Add the correct margin in IE 8.
*/
figure {
figure {
margin: 1em 40px;
}
}
/**
/**
* 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 */
}
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 */
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
white-space: pre-wrap;
word-break: break-all;
margin: 0;
}
}
/* Text-level semantics
/* Text-level semantics
========================================================================== */
/**
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
a {
text-decoration: none;
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
user-select: none;
-webkit-user-select: none;
}
}
/**
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
a:active,
a:hover {
outline-width: 0;
}
}
/**
/**
* 1. Remove the bottom border in Firefox 39-.
* 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 */
}
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
b,
strong {
font-weight: inherit;
}
}
/**
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
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 */
}
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
dfn {
font-style: italic;
}
}
/**
/**
* Add the correct background and color in IE 9-.
*/
mark {
mark {
background-color: #ff0;
color: #000;
}
}
/**
/**
* Add the correct font size in all browsers.
*/
small {
small {
font-size: 80%;
}
}
/**
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
sub {
sub {
bottom: -0.25em;
}
}
sup {
sup {
top: -0.5em;
}
}
/* Embedded content
/* Embedded content
========================================================================== */
/**
/**
* Add the correct display in IE 9-.
*/
audio,
video {
audio,
video {
display: inline-block;
}
}
/**
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
audio:not([controls]) {
display: none;
height: 0;
}
}
/**
/**
* Remove the border on images inside links in IE 10-.
*/
img {
img {
border-style: none;
}
}
/**
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
svg:not(:root) {
overflow: hidden;
}
}
/* Forms
/* Forms
========================================================================== */
/**
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
button,
input,
optgroup,
select,
textarea {
border: none;
outline: none;
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
font-family: sans-serif;
/* 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 */
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 */
button,
select {
/* 1 */
text-transform: none;
}
}
/**
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
button,
html [type="button"],
/* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
/**
/**
* 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 {
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 {
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
}
/**
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
}
/**
/**
* 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 */
}
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
textarea {
overflow: auto;
resize: vertical;
}
}
/**
/**
* 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 */
}
[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 {
[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 */
}
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
[type="search"]::-webkit-search-cancel-button,
[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 */
}
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
/* Interactive
========================================================================== */
/*
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
details,
/* 1 */
menu {
display: block;
}
}
/*
/*
* Add the correct display in all browsers.
*/
summary {
summary {
display: list-item;
}
}
/* Scripting
/* Scripting
========================================================================== */
/**
/**
* Add the correct display in IE 9-.
*/
canvas {
canvas {
display: inline-block;
}
}
/**
/**
* Add the correct display in IE.
*/
template {
template {
display: none;
}
}
/* Hidden
/* Hidden
========================================================================== */
/**
/**
* Add the correct display in IE 10-.
*/
[hidden] {
[hidden] {
display: none;
}
}

View File

@@ -61,3 +61,9 @@
text-overflow:ellipsis;
white-space:nowrap;
}
.header_title {
color: var(--textColor);
font-size: var(--f16);
margin: 0 .16rem;
}

View File

@@ -36,6 +36,7 @@ let config = {
infoList: '/info/list',
tagList: '/tag/list',
tagRecommend: '/tag/recommend',
tagInfo: '/tag/info',
searchHot: '/search/hot',
searchKey: '/search/key',
}

View File

@@ -1,6 +1,30 @@
class Domestic {
constructor() {
util.header(
`<div class="header_title">分类</div>`,
"",
""
)
util.footer()
this.getTagListData()
}
async getTagListData() {
let res = await tagServe.tagList()
$(".type_list").innerHTML = res.maps(v => {
return `
<li>
<a href="./tagListInfo.html?url=${v.url}&title=${v.title}">
<div class="text">${v.title}</div>
<p class="nums">${v.count}套</p>
</a>
</li>
`
})
}
}

View File

@@ -17,7 +17,7 @@ class Index {
this.getTagRecommend()
this.getHomeHotData()
this.getHomeListData()
this.initSwiper()
this.event()
}
@@ -39,8 +39,8 @@ class Index {
$(".recommend-tag").innerHTML = res.maps(v => {
return `
<li>
<div class="icon">${v.title.substr(0,1)}</div>
<div class="title">${v.title}</div>
<a class="icon" href="./tagListInfo.html?url=${v.url}&title=${v.title}">${v.title.substr(0,1)}</a>
<a class="title" href="./tagListInfo.html?url=${v.url}&title=${v.title}">${v.title}</a>
</li>
`
})
@@ -56,14 +56,14 @@ class Index {
</div>
`
})
this.initSwiper()
}
initSwiper() {
var mySwiper = new Swiper('.banner', {
loop: true, // 循环模式选项
// 如果需要分页器
loop: true,
pagination: {
el: '.swiper-pagination',
},

View File

@@ -13,7 +13,7 @@ class Info {
.then(() => {
util.header(
`<div class="title flex1 ellipsis">${this.title}</div>`,
`<div class="header_title flex1 ellipsis">${this.title}</div>`,
`
<div class="ilist">
<i class="iconfont icon-wujiaoxing"></i>
@@ -53,11 +53,15 @@ class Info {
// TODO 找一个合适分享
$(".icon-fenxiang").onclick = async () => {
await navShare({
title: this.title,
text: `我这有个好看的,快来看看 ${this.title}`,
url: location.href
})
await navigator.clipboard.writeText(`
我这有个好看的,快来看看 ${this.title}
${location.href}
`)
// await navShare({
// title: this.title,
// text: `我这有个好看的,快来看看 ${this.title}`,
// url: location.href
// })
}
let sc = $(".icon-wujiaoxing")

View File

@@ -43,6 +43,7 @@ class Search {
let input = $(".header input")
$(".header .button").onclick = async () => {
this.page = 1
if (input.value.length != 0) {
this.keyword = input.value
this.totalArr = []
@@ -51,7 +52,13 @@ class Search {
util.hidden(".no-search")
item(".have-search ul", this.totalArr)
util.show(".have-search")
this.onscroll()
onscroll(async () => {
this.page += 1
if (this.page <= this.totalPage) {
await this.getSearchKeyData()
item(".have-search ul", this.totalArr)
}
})
}
}
@@ -75,23 +82,6 @@ class Search {
this.totalPage = totalPage
list.forEach(v => this.totalArr.push(v));
}
// 滚动到底部实现自动加载下一页数据
onscroll() {
window.onscroll = async () => {
var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
this.page += 1
if (this.page <= this.totalPage) {
await this.getSearchKeyData()
item(".have-search ul", this.totalArr)
}
}
}
}
}
new Search

37
js/page/tagListInfo.js Normal file
View File

@@ -0,0 +1,37 @@
class TagListInfo {
page = 1;
totalPage = 0;
totalArr = []
constructor() {
util.header(
`<div class="header_title">${query("title")}</div>`,
"",
)
this.getTagInfoData()
}
async getTagInfoData() {
let { totalPage, list } = await tagServe.tagInfo({
url: query("url"),
page: this.page
});
this.totalPage = totalPage
// list.forEach(v => {
// this.totalArr.push(v)
// });
this.totalArr = [ ...this.totalArr, ...list ]
item(".default-model ul", this.totalArr)
onscroll(async () => {
this.page += 1
if (this.page <= this.totalPage) {
await this.getTagInfoData()
// item(".default-model ul", list)
}
})
}
}
new TagListInfo

View File

@@ -10,6 +10,15 @@ class TagServe {
})
}
async tagInfo (data = {}) {
let http = new Ajax()
// suc的返回值ajax请求到的后端给我们的数据
return await http.get({
url: config.urlList.tagInfo,
// data: data key 和 value 名字一样的时候,可以直接只写一个
data
})
}
async tagRecommend (data = {}) {
let http = new Ajax()

View File

@@ -101,9 +101,6 @@ class Utils {
if (r != null) return decodeURIComponent(r[2]); return null;
}
header(content, action, back = `<i class="iconfont icon-fanhui"></i>`) {
this.$("body").insertAdjacentHTML('afterbegin', `
<div class="header fixed flex ais flex1 border-box p15">
@@ -118,6 +115,19 @@ class Utils {
}
}
// 滚动到底部实现自动加载下一页数据
onscroll(callback) {
window.onscroll = async () => {
var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
callback()
}
}
}
async navShare(title = "", text = "", url = "") {
console.log(navigator.share && navigator.canShare);
@@ -151,7 +161,12 @@ class Utils {
}
let u = new Utils
let util = u, { $, item, query, navShare, getItem, setItem } = u
let util = u,
{
$, item, query, navShare,
getItem, setItem, onscroll
}
= u
// let util = new Utils
// let $ = (new Utils).$

View File

@@ -7,7 +7,7 @@
<title>国产</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="../css/tool/clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4738996_raea6u0p92.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4738996_b8zp7vfi90h.css">
<link rel="stylesheet" href="../css/tool/public.css">
<link rel="stylesheet" href="../css/page/domestic.css">
@@ -16,12 +16,10 @@
<body>
<div class="header fixed border-box flex ais js">
</div>
<div class="content">
国产
<ul class="type_list flex wrap p15">
</ul>
</div>
@@ -30,8 +28,7 @@
<script src="../js/utils/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/home.js"></script>
<script src="../js/serve/info.js"></script>
<script src="../js/serve/tag.js"></script>
<script src="../js/page/domestic.js"></script>
</html>

30
page/tagListInfo.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="../css/tool/clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4738996_b8zp7vfi90h.css">
<link rel="stylesheet" href="../css/tool/public.css">
<link rel="stylesheet" href="../css/page/tagListInfo.css">
</head>
<body>
<div class="content">
<div class="recommend-model default-model">
<ul class="flex list p15 js"></ul>
</div>
</div>
</body>
<script src="../js/utils/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/tag.js"></script>
<script src="../js/page/tagListInfo.js"></script>
</html>

View File

@@ -24,3 +24,7 @@ ajax 请求一般会有三个状态码
code == 404 不返回数据给前端页面但需要toast提示用户
code == 500 :不返回数据给前端页面,但需要弹窗提示用户!
code == 403 :不返回数据给前端页面,但需要弹窗提示用户,强制用户进行某些操作!
TODO 作业:
热门
我的