commit 55df3d398c261e8d4f650e9124baca2d8cbbaaa0
Author: bmy <2271608011@qq.com>
Date: Fri Nov 29 20:54:53 2024 +0800
first commit
diff --git a/css/page/domestic.css b/css/page/domestic.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/page/hot.css b/css/page/hot.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/page/index.css b/css/page/index.css
new file mode 100644
index 0000000..74b1b13
--- /dev/null
+++ b/css/page/index.css
@@ -0,0 +1,62 @@
+/* 首页的css */
+@import "../tool/color.css";
+@import "../tool/size.css";
+@import "../tool/utils.css";
+
+
+.header {
+ .search {
+ font-size: var(--f15);
+ margin-top: .16rem;
+ color: var(--tipsTextColor);
+ height: 80%;
+ background: #f5f5f5;
+ border-radius: .5rem;
+ padding: 0 .2rem;
+ box-sizing: border-box;
+ i {
+ margin-right: .16rem;
+ }
+ p {
+
+ }
+ }
+}
+
+.content {
+ padding-top: 20px;
+ .banner {
+ width: calc(100% - .6rem);
+ border-radius: .6rem;
+ transform :translateY(0);
+ img {
+ width: 100%;
+ border-radius: .6rem;
+ }
+
+ .swiper-slide{
+ overflow: hidden;
+ }
+ }
+
+
+ .recommend-tag {
+ margin: 0.4rem 0;
+ justify-content: space-between;
+ li {
+ color: var(--textColor);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .icon {
+ font-size: var(--f25);
+ margin-bottom: .14rem;
+ }
+ .title {
+ font-size: var(--f14);
+ color: var(--tipsTextColor);
+ }
+ }
+ }
+}
+
diff --git a/css/page/info.css b/css/page/info.css
new file mode 100644
index 0000000..d57f208
--- /dev/null
+++ b/css/page/info.css
@@ -0,0 +1,48 @@
+@import "../tool/color.css";
+@import "../tool/size.css";
+@import "../tool/utils.css";
+
+
+.header {
+ color: var(--textColor);
+ font-size: var(--f16);
+ .title{
+ margin: 0 .16rem;
+ }
+ .ilist {
+ i {
+ font-size: var(--f22) !important;
+ }
+ .icon-wujiaoxing {
+ margin-right: var(--f10);
+ }
+ }
+}
+
+
+.content {
+ .info_img_list {
+ .img_list {
+ height: 800px;
+ overflow: hidden;
+ img {
+ width: 100%;
+ }
+ }
+ .view_all {
+ font-size: var(--f16);
+ color: var(--themeColor);
+ width: 100%;
+ height: 60px;
+ bottom: 0;
+ background: linear-gradient(#ffffff08, #fefefe);
+ padding-top: .6rem;
+ box-sizing: border-box;
+ div {}
+ i {
+ margin-left: .1rem;
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/css/page/me.css b/css/page/me.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/page/search.css b/css/page/search.css
new file mode 100644
index 0000000..222a186
--- /dev/null
+++ b/css/page/search.css
@@ -0,0 +1,51 @@
+@import "../tool/color.css";
+@import "../tool/size.css";
+@import "../tool/utils.css";
+
+.header {
+ color: var(--textColor);
+
+ input {
+ margin: 0 .16rem;
+ font-size: var(--f15);
+ color: var(--tipsTextColor);
+ height: 80%;
+ background: #f5f5f5;
+ border-radius: .5rem;
+ padding: 0 .2rem;
+ box-sizing: border-box;
+ }
+ div {
+ font-size: 0.32rem !important;
+
+ }
+}
+
+.content {
+ .no-search {
+ padding-top: .4rem;
+ }
+ .have-search {
+ padding-top: .02rem;
+ }
+ .search_list {
+ margin-bottom: .7rem;
+ .title {
+ height: 40px;
+ font-size: var(--f13);
+ color: var(--tipsTextColor);
+ margin-bottom: 0.14rem;
+ }
+ ul {
+ li {
+ padding: 0 var(--f10);
+ margin-bottom: .16rem;
+ a {
+ font-size: var(--f16);
+ color: var(--textColor);
+ }
+ }
+ }
+ }
+}
+
diff --git a/css/tool/clear.css b/css/tool/clear.css
new file mode 100644
index 0000000..0265824
--- /dev/null
+++ b/css/tool/clear.css
@@ -0,0 +1,471 @@
+/* 清除默认样式 */
+/*
+ * Copyright (c) 2020. bmy
+ */
+
+ .iconfont {
+ font-size: .32rem;
+ }
+
+p,body,h1,h2,h3,h4,h5,h6,ul,li{
+ margin: 0;
+ padding: 0;
+}
+
+ html {
+ font-family: sans-serif; /* 1 */
+ line-height: 1;
+ }
+
+ body {
+ width: 100%;
+ font-size: 0px;
+ background-color: #fff;
+ color: rgba(0, 0, 0, 0.87);
+ }
+
+ ::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+}
+
+ li {
+ list-style: none;
+ }
+
+ 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 {
+ font-size: 2em;
+ margin: 0.67em 0;
+ }
+
+ /* Grouping content
+ ========================================================================== */
+
+ /**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+ figcaption,
+ figure,
+ main { /* 1 */
+ display: block;
+ }
+
+ /**
+ * Add the correct margin in IE 8.
+ */
+
+ 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 */
+ }
+
+ /**
+ * 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 */
+ white-space: pre-wrap;
+ word-break: break-all;
+ margin: 0;
+ }
+
+ /* 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 {
+ text-decoration: none;
+ 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 {
+ 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 */
+ }
+
+ /**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+ b,
+ strong {
+ font-weight: inherit;
+ }
+
+ /**
+ * 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 style in Android 4.3-.
+ */
+
+ dfn {
+ font-style: italic;
+ }
+
+ /**
+ * Add the correct background and color in IE 9-.
+ */
+
+ mark {
+ background-color: #ff0;
+ color: #000;
+ }
+
+ /**
+ * 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
+ ========================================================================== */
+
+ /**
+ * Add the correct display in IE 9-.
+ */
+
+ audio,
+ video {
+ display: inline-block;
+ }
+
+ /**
+ * Add the correct display in iOS 4-7.
+ */
+
+ audio:not([controls]) {
+ display: none;
+ height: 0;
+ }
+
+ /**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+ img {
+ border-style: none;
+ }
+
+ /**
+ * Hide the overflow in IE.
+ */
+
+ svg:not(:root) {
+ overflow: hidden;
+ }
+
+ /* Forms
+ ========================================================================== */
+
+ /**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+ 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 */
+ }
+
+ /**
+ * 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;
+ }
+
+ /**
+ * 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 */
+ }
+
+ /**
+ * 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;
+ }
+
+ /**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+ 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 */
+ }
+
+ /**
+ * 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 */
+ }
+
+ /**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+ 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 */
+ }
+
+ /**
+ * 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 and cancel buttons in Chrome and Safari on macOS.
+ */
+
+ [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 */
+ }
+
+ /* Interactive
+ ========================================================================== */
+
+ /*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+ details, /* 1 */
+ menu {
+ display: block;
+ }
+
+ /*
+ * Add the correct display in all browsers.
+ */
+
+ summary {
+ display: list-item;
+ }
+
+ /* Scripting
+ ========================================================================== */
+
+ /**
+ * Add the correct display in IE 9-.
+ */
+
+ canvas {
+ display: inline-block;
+ }
+
+ /**
+ * Add the correct display in IE.
+ */
+
+ template {
+ display: none;
+ }
+
+ /* Hidden
+ ========================================================================== */
+
+ /**
+ * Add the correct display in IE 10-.
+ */
+
+ [hidden] {
+ display: none;
+ }
\ No newline at end of file
diff --git a/css/tool/color.css b/css/tool/color.css
new file mode 100644
index 0000000..82bdfa8
--- /dev/null
+++ b/css/tool/color.css
@@ -0,0 +1,9 @@
+/* 存在项目中用到的很多颜色 */
+
+:root {
+ --swiper-theme-color: var(--themeColor) !important;
+ --themeColor: #fb7299;
+ --whiteColor: #fff;
+ --textColor: #050505;
+ --tipsTextColor: #929292;
+}
\ No newline at end of file
diff --git a/css/tool/public.css b/css/tool/public.css
new file mode 100644
index 0000000..a491852
--- /dev/null
+++ b/css/tool/public.css
@@ -0,0 +1,165 @@
+/* 页面公用的css样式 */
+@import "./color.css";
+@import "./size.css";
+@import "./utils.css";
+
+.header {
+ width: 100%;
+ left: 0;
+ top: 0;
+ background-color: var(--whiteColor);
+ height: .96rem;
+ z-index: 999;
+ padding-top: .08rem;
+
+ .icon-fanhui {
+ font-size: .44rem !important;
+ }
+}
+
+
+.content {
+ margin-top: .96rem;
+ margin-bottom: 1rem;
+}
+
+
+
+.footer {
+ width: 100%;
+ left: 0;
+ bottom: 0;
+ height: 1rem;
+ background: var(--whiteColor);
+ z-index: 999;
+
+ .active {
+ a {
+ color: var(--themeColor);
+ }
+ }
+
+ li {
+ a {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: var(--blackColor);
+
+ p {
+ font-size: 0.22rem;
+ margin-top: 0.1rem;
+ }
+
+ i {
+ font-size: .38rem;
+ }
+ }
+
+ }
+}
+
+/* 这是 theme = 1 的默认布局(垂直)样式
+ 1：可以横向滑动
+ 2：一行两个 default-model
+*/
+.recommend-model {
+ .title {
+ height: 45px;
+ font-size: var(--f19);
+ font-weight: bolder;
+ }
+
+ .list {
+ margin-top: .3rem;
+ overflow-x: scroll;
+
+ }
+
+ li {
+ width: 3rem;
+ margin-right: .2rem;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ a {
+ img {
+ width: 100%;
+ height: 225px;
+ margin-bottom: .18rem;
+ border-radius: .14rem;
+ object-fit: cover;
+ }
+
+ .text {
+ font-size: var(--f17);
+ color: var(--textColor);
+
+ margin-bottom: .12rem;
+ }
+
+ .desc {
+ font-size: var(--f10);
+ color: var(--tipsTextColor);
+
+ .time {}
+
+ .view {
+ .icon-yanjing {
+ margin-right: .06rem;
+ }
+
+ span {}
+ }
+ }
+ }
+ }
+}
+
+.default-model {
+ margin-top: .8rem;
+ .list {
+ flex-wrap: wrap;
+ overflow-x: auto;
+
+ li {
+ width: 3.32rem;
+ margin-bottom: .4rem;
+ &:nth-child(2n) {
+ margin-right: 0;
+ }
+ }
+ }
+}
+
+/* 这是 theme = 2 的布局样式代码
+ 图片和文字左右布局
+*/
+.item-theme-horizontally {
+ width: 100% !important;
+
+ a {
+ display: flex;
+
+ img {
+ width: 1.8rem !important;
+ height: 1.26rem !important;
+ flex-shrink: 0;
+ }
+
+ .r {
+ width: calc(100% - 96px);
+ margin-left: .1rem;
+ }
+
+ .text {
+ overflow: visible;
+ white-space: revert;
+ font-size: var(--f14) !important;
+ line-height: 1.4;
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/css/tool/size.css b/css/tool/size.css
new file mode 100644
index 0000000..9cbea91
--- /dev/null
+++ b/css/tool/size.css
@@ -0,0 +1,20 @@
+/* 网页的字体 */
+:root {
+ --f10: .2rem;
+ --f11: .22rem;
+ --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;
+ --f25: .5rem;
+ --f26: .52rem;
+}
\ No newline at end of file
diff --git a/css/tool/utils.css b/css/tool/utils.css
new file mode 100644
index 0000000..257c7fd
--- /dev/null
+++ b/css/tool/utils.css
@@ -0,0 +1,63 @@
+/* 公共的css方法 */
+.flex {
+ display: flex;
+}
+
+.ais {
+ align-items: center;
+}
+
+.jc {
+ justify-content: center;
+}
+
+.js {
+ justify-content: space-between;
+}
+
+.ja {
+ justify-content: space-around
+}
+
+.wrap {
+ flex-wrap: wrap;
+}
+
+.flex1 {
+ flex: 1
+}
+
+.column {
+ flex-direction: column;
+}
+
+.fixed {
+ position: fixed;
+}
+
+.relative {
+ position: relative;
+}
+
+.absolute {
+ position: absolute;
+}
+
+
+.border-box {
+ box-sizing: border-box;
+}
+
+.p15{
+ padding: 0 var(--f15);
+}
+
+.p25{
+ padding: 0 var(--f25);
+}
+
+.ellipsis {
+ overflow:hidden;
+ text-overflow:ellipsis;
+ white-space:nowrap;
+}
\ No newline at end of file
diff --git a/js/config/index.js b/js/config/index.js
new file mode 100644
index 0000000..6109f2e
--- /dev/null
+++ b/js/config/index.js
@@ -0,0 +1,42 @@
+// var let
+// 定义的新方式 let
+let config = {
+ stage: "dev", // dev test prod
+
+ // http://127.0.0.1:8090/app/user/UserInfo
+
+ // 基地址 http://127.0.0.1:8090/app
+ // 短地址 /user/UserInfo
+
+ // 基地址都被 ajax封装调用
+ devUrl: 'https://pc.buyusdt.xyz/v1/api',
+ testUrl: 'http://192.168.31.101:3030/test/api',
+ prodUrl: 'http://abc.com/v1/api',
+
+ // 帮助ajax判断应该用哪一个基地址
+ checkUrl: function () {
+ switch (this.stage) {
+ case "dev":
+ return this.devUrl
+ break;
+ case "test":
+ return this.testUrl
+ break;
+ case "prod":
+ return this.prodUrl
+ break;
+ }
+ },
+
+ // 短地址 都被 serve 调用
+ urlList: {
+ homeHot: '/home/hot',
+ homeList: '/home/list',
+ homeBanner: '/home/banner',
+ infoList: '/info/list',
+ tagList: '/tag/list',
+ tagRecommend: '/tag/recommend',
+ searchHot: '/search/hot',
+ searchKey: '/search/key',
+ }
+}
\ No newline at end of file
diff --git a/js/http/index.js b/js/http/index.js
new file mode 100644
index 0000000..a376205
--- /dev/null
+++ b/js/http/index.js
@@ -0,0 +1,57 @@
+class Ajax {
+
+ xhr = new XMLHttpRequest()
+
+ get(option) {
+ return new Promise((success, error) => {
+ var params = ""
+ for (const key in option.data) {
+ params += `&${key}=${option.data[key]}`
+ }
+ params = params.replace("&", "?")
+
+ // option.url == /home/hot?id=1
+ this.xhr.open("GET", `${config.checkUrl()}${option.url}${params}`)
+
+ this.xhr.send()
+ this.stateChange(success, error)
+ })
+ }
+
+ post(option) {
+ return new Promise((success, error) => {
+ this.xhr.open("POST", option.url)
+ this.xhr.setRequestHeader("Content-Type", "application/json")
+ // post 参数在请求体(body)中发送
+ this.xhr.send(JSON.stringify(option.data))
+ this.stateChange(success, error)
+ })
+ }
+
+ stateChange(suc, err) {
+ this.xhr.onreadystatechange = () => {
+ if (this.xhr.readyState == 4) {
+ if (this.xhr.status == 200) {
+ let res = JSON.parse(this.xhr.response)
+ switch (res.status) {
+ case 200:
+ suc(res.data)
+ break;
+
+ case 404:
+ alert(res.message)
+ err(this.xhr)
+ break;
+
+ default:
+ break;
+ }
+ suc()
+ } else {
+ err(this.xhr)
+ }
+ }
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/js/page/domestic.js b/js/page/domestic.js
new file mode 100644
index 0000000..26914c4
--- /dev/null
+++ b/js/page/domestic.js
@@ -0,0 +1,7 @@
+class Domestic {
+ constructor() {
+ util.footer()
+ }
+}
+
+new Domestic
\ No newline at end of file
diff --git a/js/page/hot.js b/js/page/hot.js
new file mode 100644
index 0000000..f340051
--- /dev/null
+++ b/js/page/hot.js
@@ -0,0 +1,7 @@
+class Hot {
+ constructor() {
+ util.footer()
+ }
+}
+
+new Hot
\ No newline at end of file
diff --git a/js/page/index.js b/js/page/index.js
new file mode 100644
index 0000000..0c3a1b5
--- /dev/null
+++ b/js/page/index.js
@@ -0,0 +1,80 @@
+class Index {
+ constructor() {
+ util.header(
+ `
+
+ `,
+ "",
+ ""
+ )
+
+ util.footer()
+
+ this.getHomeBanner()
+ this.getTagRecommend()
+ this.getHomeHotData()
+ this.getHomeListData()
+ this.initSwiper()
+ this.event()
+ }
+
+
+ async getHomeListData() {
+ let res = await homeServe.homeList()
+ item(".default-model ul", res)
+ }
+
+ // 获取热门推荐的写真
+ async getHomeHotData() {
+ let res = await homeServe.homeHot()
+ item(".recommend-model ul", res)
+ }
+
+ // 请求热门分类
+ async getTagRecommend() {
+ let res = await tagServe.tagRecommend()
+ $(".recommend-tag").innerHTML = res.maps(v => {
+ return `
+
+ ${v.title.substr(0,1)}
+ ${v.title}
+
+ `
+ })
+ }
+
+ // 请求banner图
+ async getHomeBanner() {
+ let res = await homeServe.homeBanner()
+ $(".swiper-wrapper").innerHTML = res.maps(v => {
+ return `
+
+
+
${this.title}
`,
+ `
+
+
+
+
+ `
+ )
+
+ this.event()
+ })
+ }
+
+
+ async getInfoListData() {
+ let { title, src_list, recommend } = await infoServe.infoList({ id: query("id") })
+
+ this.title = title
+ // 手动实现 懒加载
+ this.allArr = src_list
+ this.defaultArr = [ this.allArr[0], this.allArr[1] ]
+
+ $(".info_img_list .img_list").innerHTML = this.defaultArr.maps(v => `
`)
+
+ item(".recommend-model ul", recommend)
+ }
+
+
+ event() {
+ $(".view_all").onclick = () => {
+ $(".img_list").style.height = "auto"
+ $(".view_all").style.display = "none"
+
+ $(".info_img_list .img_list").innerHTML = this.allArr.maps(v => ``)
+
+ }
+
+
+ // TODO 找一个合适分享
+ $(".icon-fenxiang").onclick = async () => {
+ await navShare({
+ title: this.title,
+ text: `我这有个好看的，快来看看 ${this.title}`,
+ url: location.href
+ })
+ }
+
+ let sc = $(".icon-wujiaoxing")
+
+ console.log("this.likeArr: ", this.likeArr);
+
+ let isHave = this.likeArr.filter(v => v.id == query("id"))
+ if (isHave.length != 0) {
+ sc.classList.add("icon-wujiaoxing1")
+ }
+
+ $(".icon-wujiaoxing").onclick = async () => {
+ // 已收藏，应该变成未收藏
+ if (sc.classList.contains("icon-wujiaoxing1")) {
+ sc.classList.remove("icon-wujiaoxing1")
+ this.likeArr = this.likeArr.filter(v => v.id != query("id"))
+ setItem("like", this.likeArr)
+
+ // 未收藏，应该变成已收藏
+ } else {
+ this.likeArr.push({
+ id: query("id"),
+ thumbnail: this.allArr[0],
+ title: this.title,
+ time: query("time"),
+ // TODO 这个浏览量需要后端提供
+ view: "42"
+ })
+ setItem("like", this.likeArr)
+ sc.classList.add("icon-wujiaoxing1")
+ }
+ // await navShare({
+ // title: this.title,
+ // text: `我这有个好看的，快来看看 ${this.title}`,
+ // url: location.href
+ // })
+ }
+
+ }
+}
+
+new Info
\ No newline at end of file
diff --git a/js/page/me.js b/js/page/me.js
new file mode 100644
index 0000000..6b277d4
--- /dev/null
+++ b/js/page/me.js
@@ -0,0 +1,7 @@
+class Me {
+ constructor() {
+ util.footer()
+ }
+}
+
+new Me
\ No newline at end of file
diff --git a/js/page/search.js b/js/page/search.js
new file mode 100644
index 0000000..cd1b7dc
--- /dev/null
+++ b/js/page/search.js
@@ -0,0 +1,97 @@
+class Search {
+
+ page = 1;
+ totalPage = 0;
+ keyword = "";
+ totalArr = [];
+
+ constructor() {
+ util.header(
+ ``,
+ `搜索
`,
+ ``
+ )
+ this.getSearchHotData()
+ this.event()
+ }
+
+
+ async getSearchHotData() {
+ let { hotKeyword, recommend } = await searchServe.searchHot()
+
+ $(".search_list ul").innerHTML = hotKeyword.maps(v => {
+ return `
+
+ ${v}
+
+ `
+ });
+
+ item(".search_recommend", recommend, 2)
+
+ $(".search_recommend ul li").forEach(v => {
+ v.onclick = () => {
+ // 把你点击的文字放到搜索框里面
+ $(".header input").value = v.innerText
+ $(".header .button").onclick()
+ }
+ })
+ }
+
+ event() {
+
+ let input = $(".header input")
+
+ $(".header .button").onclick = async () => {
+ if (input.value.length != 0) {
+ this.keyword = input.value
+ this.totalArr = []
+ await this.getSearchKeyData()
+ if (this.totalArr.length != 0) {
+ util.hidden(".no-search")
+ item(".have-search ul", this.totalArr)
+ util.show(".have-search")
+ this.onscroll()
+ }
+
+ }
+ }
+
+ input.oninput = () => {
+ if (input.value.length == 0) {
+ util.show(".no-search")
+ util.hidden(".have-search")
+ }
+ }
+
+ }
+
+ // 用来发送搜索请求的
+ async getSearchKeyData() {
+ let { totalPage, list } = await searchServe.searchKey({
+ keyword: this.keyword,
+ page: this.page
+ })
+ 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
\ No newline at end of file
diff --git a/js/serve/home.js b/js/serve/home.js
new file mode 100644
index 0000000..6b3819e
--- /dev/null
+++ b/js/serve/home.js
@@ -0,0 +1,35 @@
+class HomeServe {
+ // data 是接口请求的参数，默认为空对象，表示这个接口不需要参数
+ async homeHot (data = {}) {
+ let http = new Ajax()
+ // suc的返回值（ajax请求到的，后端给我们的数据）
+ return await http.get({
+ url: config.urlList.homeHot,
+ // data: data key 和 value 名字一样的时候，可以直接只写一个
+ data
+ })
+ }
+
+ async homeBanner (data = {}) {
+ let http = new Ajax()
+ // suc的返回值（ajax请求到的，后端给我们的数据）
+ return await http.get({
+ url: config.urlList.homeBanner,
+ // data: data key 和 value 名字一样的时候，可以直接只写一个
+ data
+ })
+ }
+
+ async homeList (data = {}) {
+ let http = new Ajax()
+ // suc的返回值（ajax请求到的，后端给我们的数据）
+ return await http.get({
+ url: config.urlList.homeList,
+ // data: data key 和 value 名字一样的时候，可以直接只写一个
+ data
+ })
+ }
+
+}
+
+let homeServe = new HomeServe
\ No newline at end of file
diff --git a/js/serve/info.js b/js/serve/info.js
new file mode 100644
index 0000000..8f5d7f8
--- /dev/null
+++ b/js/serve/info.js
@@ -0,0 +1,14 @@
+class InfoServe {
+ // data 是接口请求的参数，默认为空对象，表示这个接口不需要参数
+ async infoList (data = {}) {
+ let http = new Ajax()
+ // suc的返回值（ajax请求到的，后端给我们的数据）
+ return await http.get({
+ url: config.urlList.infoList,
+ // data: data key 和 value 名字一样的时候，可以直接只写一个
+ data
+ })
+ }
+}
+
+let infoServe = new InfoServe
\ No newline at end of file
diff --git a/js/serve/search.js b/js/serve/search.js
new file mode 100644
index 0000000..4074a63
--- /dev/null
+++ b/js/serve/search.js
@@ -0,0 +1,28 @@
+class SearchServe {
+ // data 是接口请求的参数，默认为空对象，表示这个接口不需要参数
+ async searchHot (data = {}) {
+ let http = new Ajax()
+ // suc的返回值（ajax请求到的，后端给我们的数据）
+ return await http.get({
+ url: config.urlList.searchHot,
+ // data: data key 和 value 名字一样的时候，可以直接只写一个
+ data
+ })
+ }
+
+
+
+ async searchKey (data = {}) {
+ let http = new Ajax()
+ // suc的返回值（ajax请求到的，后端给我们的数据）
+ return await http.get({
+ url: config.urlList.searchKey,
+ // data: data key 和 value 名字一样的时候，可以直接只写一个
+ data
+ })
+ }
+
+
+}
+
+let searchServe = new SearchServe
\ No newline at end of file
diff --git a/js/serve/tag.js b/js/serve/tag.js
new file mode 100644
index 0000000..218aed5
--- /dev/null
+++ b/js/serve/tag.js
@@ -0,0 +1,25 @@
+class TagServe {
+ // data 是接口请求的参数，默认为空对象，表示这个接口不需要参数
+ async tagList (data = {}) {
+ let http = new Ajax()
+ // suc的返回值（ajax请求到的，后端给我们的数据）
+ return await http.get({
+ url: config.urlList.tagList,
+ // data: data key 和 value 名字一样的时候，可以直接只写一个
+ data
+ })
+ }
+
+
+ async tagRecommend (data = {}) {
+ let http = new Ajax()
+ // suc的返回值（ajax请求到的，后端给我们的数据）
+ return await http.get({
+ url: config.urlList.tagRecommend,
+ // data: data key 和 value 名字一样的时候，可以直接只写一个
+ data
+ })
+ }
+}
+
+let tagServe = new TagServe
\ No newline at end of file
diff --git a/js/utils/index.js b/js/utils/index.js
new file mode 100644
index 0000000..f4e6bb6
--- /dev/null
+++ b/js/utils/index.js
@@ -0,0 +1,161 @@
+class Utils {
+
+ // 类被初始化的时候，构造函数就会自己运行了
+ constructor() {
+ this.newMap()
+ }
+
+ newMap() {
+ Array.prototype.maps = function (callback) {
+ // var callback = e => `${e}`
+ var res = []
+ for (let i = 0; i < this.length; i++) {
+ var ddd = callback(this[i], i, this)
+ res.push(ddd)
+ }
+ return res.toString().replaceAll(",", "")
+ }
+ }
+
+ $(className) {
+ var classNameArr = className.split(" ");
+ if (classNameArr.length == 1) {
+ var isAll = document.querySelectorAll(classNameArr[0])
+ return isAll.length == 1 ? isAll[0] : isAll
+ } else {
+ var lastChild = classNameArr[classNameArr.length - 1];
+ var lastChildFather = classNameArr[classNameArr.length - 2];
+
+ var lastChildFatherDOM = document.querySelector(lastChildFather);
+
+ var key = "";
+ lastChild.includes(".")
+ ? (key = "className")
+ : lastChild.includes("#")
+ ? (key = "id")
+ : (key = "localName");
+
+ var res = Array.from(lastChildFatherDOM.children).filter(
+ (e) => e[key] == lastChild.replace(".", "")
+ );
+ }
+
+ return res.length <= 1 ? res[0] : res;
+ }
+
+ footer() {
+ // ajax 接口返回的底部导航数据
+ let arr = [
+ { icon: 'icon-shouye', title: '首页', href: 'index.html' },
+ { icon: 'icon-changchenglogo', title: '分类', href: 'domestic.html' },
+ { icon: 'icon-hot', title: '热门', href: 'hot.html' },
+ { icon: 'icon-wo', title: '我的', href: 'me.html' },
+ ]
+ let body = this.$("body")
+
+ // TODO innerHTML 会导致事件丢失
+ body.innerHTML += `
+
+ `
+ }
+
+ item(dom, data, theme = 1) {
+ $(dom).innerHTML = data.maps(v => {
+ return `
+
+
+ 
+
+
${v.title}
+
+
${v.time}
+
+
+ ${v.view}
+
+
+
+ 国产
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/page/hot.html b/page/hot.html
new file mode 100644
index 0000000..01f811d
--- /dev/null
+++ b/page/hot.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 热门
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/page/index.html b/page/index.html
new file mode 100644
index 0000000..b19b941
--- /dev/null
+++ b/page/index.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 我的
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/page/search.html b/page/search.html
new file mode 100644
index 0000000..efa2142
--- /dev/null
+++ b/page/search.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ui参考/10.jpg b/ui参考/10.jpg
new file mode 100644
index 0000000..ab0cc51
Binary files /dev/null and b/ui参考/10.jpg differ
diff --git a/ui参考/4.jpg b/ui参考/4.jpg
new file mode 100644
index 0000000..8ced081
Binary files /dev/null and b/ui参考/4.jpg differ
diff --git a/ui参考/5.jpg b/ui参考/5.jpg
new file mode 100644
index 0000000..d281341
Binary files /dev/null and b/ui参考/5.jpg differ
diff --git a/ui参考/626643f83ef61a16cf7fed32bdaebf31.jpg b/ui参考/626643f83ef61a16cf7fed32bdaebf31.jpg
new file mode 100644
index 0000000..71d4265
Binary files /dev/null and b/ui参考/626643f83ef61a16cf7fed32bdaebf31.jpg differ
diff --git a/ui参考/7.jpg b/ui参考/7.jpg
new file mode 100644
index 0000000..9c35722
Binary files /dev/null and b/ui参考/7.jpg differ
diff --git a/ui参考/8.jpg b/ui参考/8.jpg
new file mode 100644
index 0000000..273fa9d
Binary files /dev/null and b/ui参考/8.jpg differ
diff --git a/ui参考/b80522919e0cd629505efd4a6039a8cc.jpg b/ui参考/b80522919e0cd629505efd4a6039a8cc.jpg
new file mode 100644
index 0000000..766e9ba
Binary files /dev/null and b/ui参考/b80522919e0cd629505efd4a6039a8cc.jpg differ
diff --git a/ui参考/daf32b230087f8dcd1629ef3de14ad1f.jpg b/ui参考/daf32b230087f8dcd1629ef3de14ad1f.jpg
new file mode 100644
index 0000000..9fbd141
Binary files /dev/null and b/ui参考/daf32b230087f8dcd1629ef3de14ad1f.jpg differ
diff --git a/ui参考/mitao68.png b/ui参考/mitao68.png
new file mode 100644
index 0000000..26cb3fb
Binary files /dev/null and b/ui参考/mitao68.png differ
diff --git a/ui参考/rosiLogo.png b/ui参考/rosiLogo.png
new file mode 100644
index 0000000..d006363
Binary files /dev/null and b/ui参考/rosiLogo.png differ
diff --git a/笔记.md b/笔记.md
new file mode 100644
index 0000000..83c817e
--- /dev/null
+++ b/笔记.md
@@ -0,0 +1,26 @@
+ajax 请求一般会有三个状态码
+
+ 1 ajax 提供的 readyState 0 1 2 3 4
+ 2 http 提供的 status 200 404 302 502....
+
+ readyState == 4 && status == 200
+ 客户端和服务器都在线，请求可以正常的收发
+
+ 3 后端自己定义的 状态码
+ ？？？
+ 作用：对我们的业务功能操作进行快速判断
+
+ code 取值有：
+
+ 200：表示成功获取到data数据
+ 100：表示操作成功，但是不需要返回data数据给前端，所以data == null，只是返回一个操作状态的文字提示（例如用户修改，删除）
+ 404：表示没有获取到data数据，所以返回错误的具体信息。
+ 500：表示系统级别的错误，一般后端程序出错，缺少token，或者用户不存在等
+ 403：表示token失效，需要前端重定向登录页面重新登录
+ 前端根据 code 的取值的不同需要自行在拦截器里面处理各种情况，一般建议如下处理：
+
+ code == 200 ：返回data中的数据给前端页面使用
+ code == 100 ：不返回数据给前端页面，不需要toast提示用户
+ code == 404 ：不返回数据给前端页面，但需要toast提示用户
+ code == 500 ：不返回数据给前端页面，但需要弹窗提示用户！
+ code == 403 ：不返回数据给前端页面，但需要弹窗提示用户，强制用户进行某些操作！