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,68 @@
<!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>
</head>
<body>
var data = ajax.responseText<br>
把字符串类型的对象数组转换真正的对象
console.log(typeof data);//typeof 判断是什么类型
console.log(JSON.parse(data))<br>
把对象转化为字符串
var a = { id: 1, name: '张三' }
console.log(JSON.stringify(a));<br>
php打印
echo $xx;
exit();
<ul>
</ul>
</body>
<script>
// 1.创建一个新的ajax对象
var ajax = new XMLHttpRequest//XML Http Request
// 2.传入后端地址(配置需要访问的后端地址,请求方式)
//ajax.open("GET", "http://127.0.0.1/index.php?id=1")
ajax.open("POST", "http://127.0.0.1/index.php")
var params = {
id: 10
}
ajax.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
//3.发送请求
//ajax.send()
ajax.send(JSON.stringify(params))
// 4.监听请求状态
// on(监听) ready(读取) state(状态) change(变化)
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var data = JSON.parse(ajax.responseText)
console.log();
// 把resule里面的title插入到ul里面
data.resule.forEach(v => {
document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
});
} else {
alert("网络出错")
}
}
}
</script>
</html>

View File

@@ -0,0 +1,83 @@
class Ajax {
constructor() {
this.ajax = new XMLHttpRequest
}
//链式调用
num = 0
test() {
this.num += 1
return this //普通方法这里是this.num
}
test2() {
this.num += 100
return this.num
}
get(params) {
var str = ""
for (const key in params.data) {
console.log("key: ", key);
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
console.log(`${params.url}${str}`);
this.ajax.open("GET", `${params.url}${str}`)
this.ajax.send();
this.readystatechange(params.success, params.error)
}
//Promise方法
get(params) {
return new Promise((success, error) => {
var str = ""
for (const key in params.data) {
console.log("key: ", key);
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
console.log(`${params.url}${str}`);
this.ajax.open("GET", `${params.url}${str}`)
this.ajax.send();
this.readystatechange(success, error)
})
}
post() { }
readystatechange(success, error) {
this.ajax.onreadystatechange = () => {
if (this.ajax.readyState == 4) {
if (this.ajax.status == 200) {
var data = JSON.parse(this.ajax.responseText)
//console.log(data);
success(data)
} else {
error(this.ajax)
}
}
}
}
}
var ajax = new Ajax()

View File

@@ -0,0 +1,76 @@
<!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>ajax封装</title>
</head>
<body>
</body>
<script src="./ajax.js"></script>
<script>
//普通方法
// ajax.test()
// //console.log(ajax.test2());
// var result = ajax.test2()
// console.log(result);
// 链式调用
var result = ajax.test().test2()
console.log(result);
//异步转同步 callback回调函数解决
console.log(1);
ajax.get({
url: 'http://127.0.0.1/index.php',
data: {
id: 1,
page: 2
},
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
//Promise方法要写这四行
}).then(res => {
console.log("2 :", res);
}).catch(err => {
console.log(err);
})
console.log(3);//同步的话打印顺序是123 异步顺序是132
//Promise方法不需要这两行
// success: (res) => {
// console.log(res);
// },
// error: (err) => {
// }
//})
// promise
var a = async () => {
console.log("1");
var res = await ajax.get({
url: 'http://127.0.0.1/index.php',
data: {
id: 1,
page: 2
},
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
})
console.log("2 :", res);
console.log(3);
}
</script>
</html>

View File

@@ -0,0 +1,23 @@
//console.log(111111);
// require是从外部获取一个模块接口
// 方法1
// const a = require("./until")
// a.test()
// 方法2 (解构)
// const { test } = require("./until")
// test()
// 方法3
// const a = require("./until")
// a.a.test()
//console.log(require("./until"));
// 自己生成文件
const fs = require("fs")
// 文件生成位置名字,内容
fs.writeFileSync("./1.txt", "ssm")

View File

@@ -0,0 +1,157 @@
{
"name": "7-5",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "7-5",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"axios": "^0.27.2"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"dependencies": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/follow-redirects": {
"version": "1.15.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
"integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
}
},
"dependencies": {
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"requires": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"follow-redirects": {
"version": "1.15.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
"integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.52.0"
}
}
}
}

View File

@@ -0,0 +1,14 @@
{
"name": "7-5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"aa": "node-dev index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.27.2"
}
}

View File

@@ -0,0 +1,93 @@
// 引入插件
const request = require('request')
const iconv = require('iconv-lite')
// 把字符串转化为虚拟dom
const cheerio = require('cheerio')
const fs = require('fs')
// 所有页数数组 主要用来存页面地址
var pageArr = []
// 基地址
var url = 'https://pic.netbian.com'
// 下标
var pageIndex = 0
// 详情页地址
var infoArr = []
var infoIndex = 0
// 生成页面链接
for (var i = 1; i <= 3; i++) {
if (i == 1) {
pageArr.push(url)
} else {
pageArr.push(`${url}/index_${i}.html`)
}
}
console.log("pageArr: ", pageArr);
function requestPage() {
get(pageArr[pageIndex], ($) => {
$(".slist li").each(function (index, ele) {
// hasClass获取标签类名
if (!$(this).hasClass("nextpage")) {//nextpage是下一页所以要排除
infoArr.push(
`${url}${$(this).find("a").attr("href")}`
)
}
})
requestInfo()
// console.log("infoArr:", infoArr);
})
}
//生成详情页
function requestInfo() {
get(infoArr[infoIndex], ($) => {
request(`${url}${$(".photo-pic img").attr("src")}`)
.pipe(fs.createWriteStream(`./img/${Math.random() * 1000 + `${Date.now()}`}.png`))
infoIndex += 1
if (infoIndex < infoArr.length) {
requestInfo()
} else {
pageIndex += 1
if (pageIndex < pageArr.length) {
requestPage()
}
}
})
}
// gbk转换
function get(url, callback) {
request({
url: url,
method: 'GET',
encoding: 'binary'
}, function (error, response, body) {
var buf = new Buffer(body, 'binary');
var str2 = iconv.decode(buf, 'gbk');
// console.log(str2);
// $就是虚拟dom
const $ = cheerio.load(str2)
// callback把$返回出去
callback($)
})
}
requestPage()

View File

@@ -0,0 +1,18 @@
{
"name": "pc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"a": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cheerio": "^1.0.0-rc.12",
"fs": "^0.0.1-security",
"iconv-lite": "^0.6.3",
"request": "^2.88.2"
}
}

View File

@@ -0,0 +1,11 @@
class until {
test() {
console.log("hhhhhhh");
}
}
// exports是接口
// 方法1、2
// module.exports = new until()
// 方法3
exports.a = new until()

View File

@@ -0,0 +1,133 @@
<!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>
</head>
<body>
<div class="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">Go to 首页</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/Info">Go to Info</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Index = {
data() {
return {
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' }
]
}
},
// js跳转页面 在to里面填地址(例: :to={"path:'/Info',参数(quer(query:{id:v.id})或者params传参数)}")
// quer传参: :to={"path:'/Info',query:{id:v.id,page:1}}"
// params传参:params:{id:v.id,page:1} > 然后const routes中的 path改为: '/Info/:id/:page' 加一个name: 'Info'
template: `
<div class="index">
首页
<ul>
<li @click="enterInfo(i)" v-for="v,i in list" :key="i">{{v.title}}</li>
</ul>
</div>
`,
// <router-link tag="a" :to="{name:'Info',params:{id:v.id,page:1}}" v-for="v,i in list">{{v.title}}</router-link> router-link页面跳转写法
methods: {
enterInfo(v) {
this.$router.push({
name: 'Info',
query: {
id: v.id,
page: 1
}
})
}
}
}
const Bar = { template: '<div>bar</div>' }
const Info = {
template: '<div>详情页{{$route.params.id}}</div>',
data() {
return {
// id: 0
}
},
// query传参把参数渲染到页面上
// 方法1 :data的return定义一个变量默认为0 > created中this.xx = this.$route.query.xx > template中: '<div>详情页{{xx}}</div>'
// 方法2 :直接在template中写: '<div>详情页{{$route.query.xx}}</div>',
// params传参把参数渲染到页面上 就是把query的方法中的query改为params
created() {
// this.id = this.$route.query.id
// 拿到地址栏参数的方法
console.log(this.$route.query.id);
},
methods: {}
}
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/', component: Index },
{ path: '/bar', component: Bar },
{
path: '/Info', component: Info, name: 'Info'
// params传参写法 path: '/Info/:id/:page', component: Info, name: 'Info'
}
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
mode: 'hash',
routes // (缩写) 相当于 routes: routes
})
// 导航守卫
router.beforeEach((to, from, next) => {
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
el: '.app',
router
})//.$mount('#app')也可以挂载或el
// 现在,应用已经启动了!
</script>
</html>

View File

@@ -0,0 +1,189 @@
<!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>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<div class="add">
<!-- <ul class="title">
<li :class=" i == index ? 'active' : '' " v-for="v,i in arr" @click="index = i" :key="i">
{{ v.title }}
</li>
</ul>
<ul class="content">
<li :class=" i == index ? 'active' : '' " v-for="v,i in arr" :key="i">
<p v-for="item,index in v.content">{{ item.text }}</p>
</li>
</ul> -->
<p>{{text}}</p>
<p v-text="imgSrc"></p>
<!-- v-html -->
<div v-html="imgSrc"></div>
<p></p>
<!-- v-for -->
<ul>
<li v-for="v,i in news">{{v.id}}|{{v.title}}</li>
</ul>
<p></p>
<div v-for="value,key in obj">{{key}}:{{value}}</div>
<!-- v-bind 简写‘:’ -->
<img :src="img" alt="">
<!-- v-if -->
<div v-if="type==0">一级会员</div>
<div v-else-if="type==1">二级会员</div>
<div v-else>请登录</div> <!-- <div v-else="type==2">请登录</div> -->
<!-- v-show -->
<div v-show="show">嘻嘻嘻</div>
<p></p>
<!-- v-model (input、select、textarea都适用)-->
<input type="text" placeholder="请输入" v-model="name">{{name}}
<p></p>
<!-- v-on 简写‘@’ -->
<button v-on:click="Button">登录</button>
<!-- <button @click="Button">登录</button> -->
<p></p>
<!-- tab切换 -->
<!-- <ul class="title">
<li :class="i==Index?'active':''" v-for="v,i in arr" :key="i" @click="change(i)">{{v.title}}</li>
</ul>
<ul class="content">
<li :class="i==Index?'active':''" v-for="v,i in arr" :key="i">
<p v-for="ele,index in v.content" :key="index">{{ele.text}}</p>
</li>
</ul> -->
<ul class="title">
<li :class="i==Index?'active':''" v-for="v,i in arr" :key="i" @click="change(i)">{{v.title}}</li>
</ul>
<ul class="content">
<li :class="i==Index?'active':''" v-for="v,i in arr" :key="i">
<p v-for="a,b in v.content">{{a.text}}</p>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
new Vue({
el: ".add",
data: {
// index: 0,
arr: [
{
title: '首页',
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
{ text: '首页的内容4' },
{ text: '首页的内容5' },
]
},
{
title: '社会',
content: [
{ text: '社会 的内容1' },
{ text: '社会 的内容2' },
{ text: '社会 的内容3' },
{ text: '社会 的内容4' },
]
},
{
title: '军事',
content: [
{ text: '军事 的内容1' },
{ text: '军事 的内容2' },
{ text: '军事 的内容3' },
]
},
{
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
],
text: '1111',
imgSrc: `<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">`,
news: [
{ id: 1, title: 'a' },
{ id: 2, title: 'b' },
{ id: 3, title: 'c' }
],
obj: { id: 1, title: 'a' },
img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
type: 2,
show: false,
name: '',
Index: 0
},
// 所有方法存放地方
methods: {
Button() {
console.log("Button:", this.name);
},
// change(index) {
// this.index = index
// }
change(index) {
this.Index = index
console.log(index);
}
}
})
</script>
</html>

View File

@@ -0,0 +1,71 @@
<!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>
</head>
<div class="app">
<abc @change="getData" ></abc>
<!-- :x=" '2' " -->
<!-- <c></c>
<d></d> -->
</div>
<body>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component('abc', {
template: `
<div>
<h1>{{title}}</h1>
<h2 @click="submit">{{ x }}</h2>
</div>`,
data() {
return {
title: '我是全局组件',
list: "这是子组件的数据"
}
},
props: {
x: {
default: "这是默认标题",
type: String
}
},
methods: {
submit() {
this.$emit("change", this.list)
}
}
})
// var c = {
// template: `<h1>{{title}}</h1>`,
// data() {
// return {
// title: '我是局部组件',
// }
// }
// }
new Vue({
el: ".app",
data: {},
methods: {
getData(val) {
console.log("父组件收到的数据:", val);
}
},
// components: {
// c,
// "d": c
// }
})
</script>
</html>

View File

@@ -0,0 +1,117 @@
<!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>
</head>
<body>
<div class="app">
<!-- 父传子的写法1 -->
<abc :xixi="text"></abc>
<!-- 局部组件的两种写法 -->
<!-- <c></c> -->
<!-- 父传子的写法2 -->
<def></def>
<def :x="'2333 传了参数'"></def>
<!-- 子传父 -->
<def @click="get" :x="'2'"></def>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 父组件————>子组件 传数据 用!!props!!
// 方法1:在子组件定义一个数组(props:['xx']) > Vue-datd中写一个值(text:'xx') > <xx(子组件标签名) :xx(数组中的名字)="text" > 子组件中template写<h2>{{xx(数组中的名字)}}<h2>
// 方法2:在子组件定义一个对象(props:{xx:{}}) > <xx(子组件名) :xx(props里的xx) > 子组件中template写<h2>{{xx(props里的xx)}}<h2>
// 子组件————>父组件 $emit 借助这个把数据抛出去 $parent
// 全局组件(两个参数 '名字(不能是html默认标签的名字)',值(必须是{}))
Vue.component('abc', {//abc是标签名 可以随便取名
// template就是html标签 必须写
template: `
<div>
<h2>{{title}}</h2>
//父传子的写法1
<h2>{{xixi}}</h2>
</div>
`,
// 写法1
props: ['xixi'],
data() {
return {
title: '我是全局组件',
}
},
created() {
console.log("我是全局组件的生命周期:", this);
},
})
// 局部组件 def是变量名 不是标签名
var def = {
template: `
<div>
<h2>{{title}}</h2>
//父传子的写法2
<h2>{{x}}</h2>
//子传父
<h2 @click="submit">{{x}}</h2>
</div>`,
// 写法2
props: {
x: {
default: "父组件向子组件传数据方法2 没传参数默认写",
type: String
}
},
data() {
return {
title: '我是局部组件',
list: "子传父"
}
},
created() {
console.log("我是局部组件的生命周期:", this);
},
methods: {
submit() {
this.$emit("change", this.list)//两个参数 参数1:自定义名字 参数2:要抛出去的值
}
}
}
new Vue({
el: '.app',
data: {
text: '父组件向子组件传数据 方法1'
},
methods: {
get(val) {
console.log("父组件收到的数据:", val);
}
},
// 局部组件
components: {
// 方法一
//"c": def, //非简写
// 方法二
def //当名字和值一样时(def(标签名):def(变量名))可以简写为(def)
}
})
</script>
</html>

View File

@@ -0,0 +1,31 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0px;
padding: 0px;
}
html {
font-size: 0;
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}

View File

@@ -0,0 +1,239 @@
.main {
width: 1200px;
margin: 0 auto;
}
.main>.title {
height: 44px;
line-height: 44px;
}
.main>.title .title-l {
font-size: 24px;
font-weight: 400;
color: #333;
font-family: 'Microsoft YaHei'
}
.main>.title .title-l span {
font-weight: 700;
margin-right: 8px;
}
.main>.title .title-r {}
.main>.title .title-r li {
float: left;
}
.main>.title .title-r li::after {
content: " ";
width: 0.5px;
height: 12px;
background: #ccc;
display: inline-block;
margin-top: 17px;
margin-left: 7.5px;
margin-right: 7.5px;
}
.main>.title .title_r li:last-child ::after {
width: 0 !important;
}
.main>.title .title-r li a {
color: #333;
font-size: 12px;
float: left;
}
.main>.title .title-r li a i {
font-size: 12px;
zoom: 0.8;
}
.wrap {
height: 516px;
}
.menu {
width: 300px;
height: 100%;
}
.hot {
height: 281px;
background: #52a7d9
}
.hot .hot-t {
background: #1d89bf;
height: 38px;
line-height: 38px;
padding-left: 20px;
padding-right: 15px;
box-sizing: border-box;
}
.hot-t .text {
color: #fff;
font-size: 16px
}
.hot-t ul {
width: 167px;
}
.hot-t ul li {
font-size: 14px;
color: #fff;
float: left;
width: 55px;
text-align: center;
}
.hot-t ul .active {
background: #52a7d9
}
.hot-c {
padding: 20px 0 10px 20px
}
.hot-c li {
height: 30px;
line-height: 30px
}
.hot-c li:nth-child(1) span,
.hot-c li:nth-child(2) span,
.hot-c li:nth-child(3) span {
background: #fff;
color: #1d89bf
}
.hot-c li span {
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
display: inline-block;
font-size: 12px;
color: #fff
}
.hot-c li a {
font-size: 12px;
color: #fff;
margin-left: 10px
}
.more {
height: 53px;
text-align: center;
line-height: 53px;
color: #fff;
font-size: 14px;
border-top: 1px dashed #1d89bf;
width: 260px;
margin: 0 auto;
}
.wrap-l-b {
height: 235px;
padding-top: 25px;
padding-left: 20px;
background: #f5f5f5
}
.wrap-l-b .title {
font-size: 16px;
color: #666;
margin-bottom: 5px;
}
.wrap-l-b ul {}
.wrap-l-b ul li {
float: left;
margin-right: 20px;
margin-bottom: 11.5px;
}
.wrap-l-b ul li a {
font-size: 14px;
color: #333;
}
.wrap-r {
width: 900px;
height: 100%;
}
.wrap-r-t {}
.wrap-r-t ul {
border-top: 1px solid #ebebeb
}
.wrap-r-t ul li {
float: left;
padding: 20px 20px 15px;
width: 184px;
height: 195px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb
}
.wrap-r-t ul li img {
width: 160px;
}
.wrap-r-t ul li .title {
font-size: 14px;
word-break: break-all
}
.wrap-r-t ul li .price {
font-size: 12px;
color: #999
}
.wrap-r-t ul li .price span {
font-size: 18px;
color: #f33
}
.wrap-r .wrp-r-b {
height: 53px;
line-height: 53px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
box-sizing: border-box;
}
.center {
width: 90px;
margin: 0 auto;
}
.center li {
width: 12px;
height: 12px;
margin: 0 3px;
border-radius: 100%;
background: #e6e6e6;
float: left;
margin-top: 20.5px;
text-align: center;
}
.center .active {
background: #42afa7 !important;
}

View File

@@ -0,0 +1,64 @@
.main {
width: 280px;
}
.main .title {
margin-bottom: 15px;
}
.main .title .title-l,
.main .title .title-r i,
.main .title .title-r span {
font-size: 14px;
}
.list li {
margin-bottom: 15px;
overflow: hidden;
}
.list img {
width: 48px;
height: 48px;
border-radius: 100%;
margin-right: 10px;
}
.list .author {
width: calc(280px - 58px);
margin-top: 5px
}
.list .author .list-t {
font-size: 14px;
color: #333
}
.list .author .list-t i,
.list .author .list-t .guanzhu {
color: #42c02e;
font-size: 13px
}
.list .author .list-b {
font-size: 12px;
}
.all {
height: 35px;
background: #f7f7f7;
border: 1px solid #dcdcdc;
text-align: center;
line-height: 35px;
border-radius: 4px;
font-size: 13px;
color: #787878;
}
.all span {}
.all i {
font-size: 13px;
}

View File

@@ -0,0 +1,15 @@
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.themeColor {
color: #969696;
}

View File

@@ -0,0 +1,74 @@
.main {
width: 1000px;
margin: 0 auto;
height: 93px;
box-sizing: border-box;
}
.logo {
width: 233px;
margin-top: 40px;
}
.search {
margin-left: 64px;
margin-top: 24px;
}
.search .search-t li {
float: left;
color: #666;
width: 42px;
font-size: 12px;
}
.search .search-t li:first-child {
color: #333;
font-weight: bold;
}
.search .search-b {
width: 469px;
height: 36px;
margin-top: 4px;
}
.search .search-b input {
width: calc(469px - 80px);
height: 36px;
border: 1px solid #ccc;
box-sizing: border-box;
border-right: none;
padding-left: 7px;
font-size: 14px;
}
.search .search-b .sousuo {
width: 80px;
height: 100%;
background: #3686f1;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 36px
}
.download {
margin-top: 40px;
}
.download li {
float: left;
text-align: center;
margin-right: 18px;
}
.download li img {
width: 20px;
height: 20px
}
.download li a {
color: #1f4f88;
font-size: 12px;
}

View File

@@ -0,0 +1,217 @@
<!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>diannao</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3445167_o5pox8tpzh.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/diannao.css">
</head>
<body>
<div class="main">
<!-- 标题 -->
<div class="title hidden">
<!-- 左 -->
<div class="title-l left">
<span>2F</span>笔记本电脑
</div>
<!-- 右 -->
<ul class="title-r right">
<li>
<a href="">联想</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">
更多
<i class="iconfont icon-z044"></i>
</a>
</li>
</ul>
</div>
<!-- 主体 -->
<div class="wrap hidden">
<!-- 左 -->
<div class="menu left">
<!-- 左上 -->
<div class="hot">
<!-- 上 -->
<div class="hot-t ">
<div class="text left">热度排行</div>
<ul class="right">
<li class="active">品牌</li>
<li>品牌</li>
<li>品牌</li>
</ul>
</div>
<!-- 排行榜 -->
<ul class="hot-c">
<li>
<span>1</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>2</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>3</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>4</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>5</span>
<a href="">惠普暗影精灵6</a>
</li>
</ul>
<!-- 更多 -->
<div class="more">
<span>查看更多排行榜</span>
<i class="iconfont icon-z044"></i>
</div>
</div>
<!-- 左下 -->
<div class="wrap-l-b">
<div class="title">热门搜索</div>
<ul>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
</ul>
</div>
</div>
<!-- 右 -->
<div class="wrap-r left">
<div class="wrap-r-t hidden">
<ul class="phone">
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">
OPPO Reno8 Pro+(8GB/256GB)
</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">
OPPO Reno8 Pro+(8GB/256GB)
</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">
OPPO Reno8 Pro+(8GB/256GB)
</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">
OPPO Reno8 Pro+(8GB/256GB)
</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">
OPPO Reno8 Pro+(8GB/256GB)
</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">
OPPO Reno8 Pro+(8GB/256GB)
</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">
OPPO Reno8 Pro+(8GB/256GB)
</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">
OPPO Reno8 Pro+(8GB/256GB)
</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
</ul>
</div>
<div class="wrap-r-b">
<ul class="center">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.menu>li {
float: left;
margin-right: 10px;
}
.drop {
display: none;
}
.menu>li:hover .drop {
display: block !important;
}
li {
list-style: none;
}
</style>
</head>
<body>
<body>
<ul class="menu">
<li>
首页
</li>
<li>
首页1
<ul class="drop">
<li>首页1-1</li>
<li>首页1-2</li>
<li>首页1-3</li>
<li>首页1-4</li>
<li>首页1-5</li>
</ul>
</li>
<li>
首页2
</li>
</ul>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_o5pox8tpzh.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/jianshu.css">
</head>
<body>
<div class="main">
<div class="title hidden">
<div class="title-l left themeColor">
推荐作者
</div>
<div class="title-r right">
<i class="iconfont icon-shuaxin themeColor"></i>
<span class="themeColor">换一批</span>
</div>
</div>
<ul class="list">
<li>
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="list-t hidden">
<span class="left">卢璐说</span>
<div class="guanzhu right">
<i class="iconfont icon-jiahao"></i>
<span>关注</span>
</div>
</div>
<div class="list-b themeColor">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li>
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="list-t hidden">
<span class="left">卢璐说</span>
<div class="guanzhu right">
<i class="iconfont icon-jiahao"></i>
<span>关注</span>
</div>
</div>
<div class="list-b themeColor">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li>
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="list-t hidden">
<span class="left">卢璐说</span>
<div class="guanzhu right">
<i class="iconfont icon-jiahao"></i>
<span>关注</span>
</div>
</div>
<div class="list-b themeColor">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li>
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="list-t hidden">
<span class="left">卢璐说</span>
<div class="guanzhu right">
<i class="iconfont icon-jiahao"></i>
<span>关注</span>
</div>
</div>
<div class="list-b themeColor">写了2154.9k字 · 34.8k喜欢</div>
</li>
</ul>
<div class="all">
<span>查看全部</span>
<i class="iconfont icon-gengduo"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,12 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

View File

@@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

View File

@@ -0,0 +1,4 @@
/build/
/config/
/dist/
/*.js

View File

@@ -0,0 +1,29 @@
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}

View File

@@ -0,0 +1,14 @@
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

View File

@@ -0,0 +1,14 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}

View File

@@ -0,0 +1,21 @@
# text
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

View File

@@ -0,0 +1,7 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

View File

@@ -0,0 +1,76 @@
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: false,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

View File

@@ -0,0 +1,4 @@
'use strict'
module.exports = {
NODE_ENV: '"production"'
}

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>text</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@@ -0,0 +1,79 @@
{
"name": "text",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "郑若怡 <www.2387641136@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.27.2",
"vant": "latest-v2",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"amfe-flexible": "^2.2.1"
},
"devDependencies": {
"less": "^4.1.2",
"less-loader": "^4.1.0",
"postcss-pxtorem": "^5.1.1",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

View File

@@ -0,0 +1,19 @@
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link to="/">首页</router-link>
<router-link to="/about">我的</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
@import "~@mixins/clear";
</style>

View File

@@ -0,0 +1,72 @@
import { Axios } from "axios";
import config from "@/config";
import { Toast } from "vant";
class Api extends Axios {
constructor() {
console.log(config.checkBaseUrl());
super({
baseURL: config.checkBaseUrl(),
// 超时 超过多少秒链接就不能用了
timeout: 1000,
// 自定义请求头
headers: {}
})
this.inter()
}
async getRequest(params) {
return await this.get(params.url, {
params: params.data,
headers: params.header
})
}
inter() {
// 添加请求拦截器
this.interceptors.request.use(function (config) {
Toast.loading({
duration: 0,
message: '加载中..'
});
//在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
this.interceptors.response.use(function (response) {
console.log(response);
Toast.clear();
response.data = JSON.parse(response.data)
switch (response.data.status) {
case 200:
return response.data.result
break;
case 404:
// 显示错误信息
Toast.fail(response.data.msg);
// 产生一个错误 让程序停下来
throw new Error(response.data.msg);
break;
default:
break;
}
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
}
}
export default new Api()

View File

@@ -0,0 +1,4 @@
@import "./color.less";
@import "./size.less";

View File

@@ -0,0 +1,73 @@
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
// Component Colors
@primary-color: var(--van-blue);
@success-color: var(--van-green);
@danger-color: var(--van-red);
@warning-color: var(--van-orange);
@text-color: var(--van-gray-8);
@text-color-2: var(--van-gray-6);
@text-color-3: var(--van-gray-5);
@text-link-color: #576b95;
@active-color: var(--van-gray-2);
@active-opacity: 0.6;
@disabled-opacity: 0.5;
@background-color: var(--van-gray-1);
@background-color-light: var(--van-white);
// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;
// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
'Microsoft Yahei', sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
sans-serif;
// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;
// Border
@border-color: var(--van-gray-3);
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;

View File

@@ -0,0 +1,19 @@
@f12: 12px;
@f13: 13px;
@f14: 14px;
@f15: 15px;
@f16: 16px;
@f17: 17px;
@f18: 18px;
@f19: 19px;
@f20: 20px;
@f21: 21px;
@f22: 22px;
@f23: 23px;
@f24: 24px;
@f25: 25px;
@f26: 26px;
@f27: 27px;
@f28: 28px;
@f29: 29px;
@f30: 30px;

View File

@@ -0,0 +1,111 @@
@import "../config/color.less";
:root {
// Color Palette
--van-black: @black;
--van-white: @white;
--van-gray-1: @gray-1;
--van-gray-2: @gray-2;
--van-gray-3: @gray-3;
--van-gray-4: @gray-4;
--van-gray-5: @gray-5;
--van-gray-6: @gray-6;
--van-gray-7: @gray-7;
--van-gray-8: @gray-8;
--van-red: @red;
--van-blue: @blue;
--van-orange: @orange;
--van-orange-dark: @orange-dark;
--van-orange-light: @orange-light;
--van-green: @green;
// Gradient Colors
--van-gradient-red: @gradient-red;
--van-gradient-orange: @gradient-orange;
// Component Colors
--van-primary-color: @primary-color;
--van-success-color: @success-color;
--van-danger-color: @danger-color;
--van-warning-color: @warning-color;
--van-text-color: @text-color;
--van-text-color-2: @text-color-2;
--van-text-color-3: @text-color-3;
--van-text-link-color: @text-link-color;
--van-active-color: @active-color;
--van-active-opacity: @active-opacity;
--van-disabled-opacity: @disabled-opacity;
--van-background-color: @background-color;
--van-background-color-light: @background-color-light;
// Padding
--van-padding-base: @padding-base;
--van-padding-xs: @padding-xs;
--van-padding-sm: @padding-sm;
--van-padding-md: @padding-md;
--van-padding-lg: @padding-lg;
--van-padding-xl: @padding-xl;
// Font
--van-font-size-xs: @font-size-xs;
--van-font-size-sm: @font-size-sm;
--van-font-size-md: @font-size-md;
--van-font-size-lg: @font-size-lg;
--van-font-weight-bold: @font-weight-bold;
--van-line-height-xs: @line-height-xs;
--van-line-height-sm: @line-height-sm;
--van-line-height-md: @line-height-md;
--van-line-height-lg: @line-height-lg;
--van-base-font-family: @base-font-family;
--van-price-integer-font-family: @price-integer-font-family;
// Animation
--van-animation-duration-base: @animation-duration-base;
--van-animation-duration-fast: @animation-duration-fast;
--van-animation-timing-function-enter: @animation-timing-function-enter;
--van-animation-timing-function-leave: @animation-timing-function-leave;
// Border
--van-border-color: @border-color;
--van-border-width-base: @border-width-base;
--van-border-radius-sm: @border-radius-sm;
--van-border-radius-md: @border-radius-md;
--van-border-radius-lg: @border-radius-lg;
--van-border-radius-max: @border-radius-max;
}
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
body {
/* font-size: 0; */
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
flex: 1;
margin: 0 10px;
border-radius: 20px;
height: 32px;
}
a {
text-decoration: none;
color: #333;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
img {
width: 100%;
}

View File

@@ -0,0 +1,68 @@
@import "../config/_.less";
.clearfix() {
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.ellipsis() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.no-scrollbar() {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}
.hairline-common() {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
}
.hairline(@color: var(--van-border-color)) {
.hairline-common();
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid @color;
transform: scale(0.5);
}
.hairline-top(@color: var(--van-border-color), @left: 0, @right: 0) {
.hairline-common();
top: 0;
right: @right;
left: @left;
border-top: 1px solid @color;
transform: scaleY(0.5);
}
.hairline-bottom(@color: var(--van-border-color), @left: 0, @right: 0) {
.hairline-common();
right: @right;
bottom: 0;
left: @left;
border-bottom: 1px solid @color;
transform: scaleY(0.5);
}

View File

@@ -0,0 +1,9 @@
@import "../config/_.less";
@import "../mixins/index.less";
.home {
h2 {
color: @green;
font-size: @f20;
.ellipsis();
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,17 @@
<template>
<h2>{{ msg }}</h2>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: '你好我是vue页面'
}
}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,21 @@
export default {
devBaseUrl: 'http://127.0.0.1:3000/api/json',
prodBaseUrl: 'http://127.0.0.1:3000/api/json/prod',
apiList: {
mechanismList: '/mechanismList'
},
checkBaseUrl() {
switch (process.env.NODE_ENV) {
case "development":
return this.devBaseUrl
break;
case "production":
return this.prodBaseUrl
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,22 @@
import 'amfe-flexible'
import Vue from 'vue'
import App from './App'
import router from './router'
import _ from './serve/_'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.prototype.$http = _
Vue.config.productionTip = false
Vue.use(Vant);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

View File

@@ -0,0 +1,8 @@
<template>
<div class="about"> 我的</div>
</template>
<script>
</script>
<style scoped lang="less">
@import "~@page/About";
</style>

View File

@@ -0,0 +1,29 @@
<template>
<div class="home">
<h2>首页</h2>
<van-button type="info">信息按钮</van-button>
</div>
</template>
<script>
export default {
data() {
return {};
},
created() {
this.getData();
},
methods: {
async getData() {
var res = await this.$http.index.getMechanismList({
page: 1,
id: 82,
});
console.log(res);
},
},
};
</script>
<style scoped lang="less">
@import "~@page/Home";
</style>

View File

@@ -0,0 +1,22 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
// 路由懒加载 “() => import('@/page/Home.vue')”
// /* webpackChunkName: "Home" */ 拆分代码
component: () => import(/* webpackChunkName: "Home" */'@/page/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "About" */'@/page/About.vue')
}
]
})

View File

@@ -0,0 +1,5 @@
import HomeServe from "./home";
export default {
index: new HomeServe ()
}

View File

@@ -0,0 +1,11 @@
import api from "@/api/api";
import config from "@/config";
export default class HomeServe {
async getMechanismList(data = {}, header = {}) {
return await api.getRequest({
url: config.apiList.mechanismList,
data, header
})
}
}

View File

@@ -0,0 +1,64 @@
<!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>zol</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/zol.css">
</head>
<body>
<div class="main ">
<img class="logo left" src="https://icon.zol-img.com.cn/mainpage/2019logo/homeLogo-vre2x.png" alt="">
<div class="search left">
<ul class="search-t hidden">
<li>
综合
</li>
<li>
综合
</li>
<li>
综合
</li>
<li>
综合
</li>
<li>
综合
</li>
</ul>
<div class="search-b hidden">
<input type="text" class="left" placeholder="搜索一下">
<div class="sousuo left">搜索</div>
</div>
</div>
<ul class="download right">
<li>
<a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载App</div>
</a>
</li>
<li>
<a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载App</div>
</a>
</li>
<li>
<a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载App</div>
</a>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,78 @@
<!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>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">首页</li>
<li>社会</li>
<li>军事</li>
<li>科技</li>
</ul>
<ul class="content">
<li class="active">首页 的内容</li>
<li>社会 的内容</li>
<li>军事 的内容</li>
<li>科技 的内容</li>
</ul>
</body>
<script>
var titleLi = _(".title li"), contentLi = _(".content li")
titleLi.forEach(function (v, i) {
v.onclick = function () {
titleLi.forEach(function (a, b) {
a.className = " "
contentLi[b].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,88 @@
<!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>
<style>
span {
border: 1px solid #000;
padding: 5px 10px;
}
</style>
</head>
<body>
</body>
<script>
// 九九乘法表
// var result = " ";
// for (var i = 1; i <= 9; i++) {
// for (var j = 1; j <= i; j++) {
// result += `<span>${i} x ${j} = ${i * j}</span>`
// }
// result += " <br/><br/>"
// }
// document.write(result)
// console.log(result);
// 通过循环把数组里面的数据提取出来
// var arr = ["xixixixi", "嘻嘻嘻", "嘻嘻嘻嘻嘻嘻嘻"]
// for (var index = 0; index < arr.length; index++) {
// console.log(arr[index]);
// }
// 把test的数据拿到arr里面
// var arr = ["哈哈哈1", "哈哈哈2", "哈哈哈3"]
// var test = ["哈哈哈4", "哈哈哈5"]
// for (var index = 0; index < test.length; index++) {
// arr.push(test[index])
// console.log(arr.concat(test));
// }
// 简写
// console.log(
// [
// ...arr,
// ...test
// ]
// );
// 对象
// var obj = {
// name: `xixi`,
// age: 18
// }
// console.log(obj);
// for in循环
// for (const key in obj) {
// console.log(obj[key]);//方括号这种写法一般都是处理变量的
// }
// function Test(a, b) {
// return a + b
// }
// var a = Test(10, 100)
// var b = Test(1, 1)
// var c = Test(1, 2)
// var d = Test(1, 3)
// console.log(a, b, c, d);
</script>
</html>

View File

@@ -0,0 +1,87 @@
<!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>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 152px;
border-radius: 6px;
box-shadow: 2px 2px 9px #d7d7d7;
display: none;
position: fixed;
}
li {
height: 40px;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>新建文件夹</li>
<li>上传文件</li>
<li>上传文件夹</li>
<li>刷新网页</li>
</ul>
</body>
<script>
$("body").oncontextmenu = function (e) {
e.preventDefault();
var { x, y } = e;
var { clientWidth, clientHeight } = document.body;
if (clientWidth - x < 152 && clientHeight - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display: block;
`
} else if (clientWidth - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
} else if (clientHeight - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x}px;
display: block;
`
} else {
$("ul").style = `
top: ${y}px;
left: ${x}px;
display: block;
`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main img {
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
<script src="./index.js"></script>
<script>
var img = [
`https://img0.baidu.com/it/u=1132032928,2577726940&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082`,
`https://img2.baidu.com/it/u=3395582942,4228440123&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500`,
`https://img2.baidu.com/it/u=4247972487,2176045580&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313`,
`https://img2.baidu.com/it/u=3081609058,4054949655&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281`
];
//将图片显示到网页上的循环
img.forEach(v => { //function (v) {
$(".main").innerHTML += ` <img src="${v}" alt="">`
})
_(".main img").forEach((v, i) => {
v.onclick = () => {
console.log("被点击了:", v);
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,7 @@
class PicturePreview {
constructor() {
}
}
var text = new PicturePreview("")

View File

@@ -0,0 +1,36 @@
<!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>
</head>
<body>
</body>
<script>
//类的本质就是对象
class PicturePreview {
constructor(text) {//如果不写text 那么打印出来 “我是构造函数 undefined”
//this //通过this定义一个
this.a = text;
//console.log("我是构造函数", text);//如果不写text 你好不会被打印
console.log("我是构造函数", this.a);
}
getA() {
console.log(this.a);
}
}
var text = new PicturePreview("你好")//如果不写new “constructor”不执行 console.log也不会打印
//console.log(text);//打印出来是PicturePreview {}
text.getA()
</script>
</html>

View File

@@ -0,0 +1,73 @@
<!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>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
span {
position: fixed;
transition: all ease 0.5s;
}
</style>
</head>
<body>
</body>
<script>
var textArr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']
var index = 0
$("body").onclick = function (e) {
var { x, y } = e;
var span = document.createElement("span");
span.innerText = textArr[index];
span.style = `
left: ${x}px;
top: ${y}px;`
span.style.color = `hsl(${Math.random() * 360},100%,50%)`
index++
index > 11 ? index = 0 : " "
$("body").appendChild(span)
console.log(span);
motion(span, y) //法1调用
}
// 方法1
function motion(el, y) {
setTimeout(function () {
el.style.top = `${y - 100}px`
}, 150)
setTimeout(function () {
$("body").removeChild(el)
}, 700)
}
// 方法2
// function motion(el, y) {
// }
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,46 @@
<!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>
</head>
<body>
<input type="text" placeholder="请输入搜索关键字">
<ul>
</ul>
</body>
<script>
var arr = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好,是阴天', '不喜欢学习'];
var searchList = [];
$("input").oninput = function () {
searchList = []
if ($("input").value.length != 0) {
arr.forEach(function (v, i) {
if (v.includes($("input").value)) {
var span = `<span style="color: red;">${$("input").value}</span>`
searchList.push(v.replace($("input").value, span))
}
});
renderLi();
} else {
$("ul").innerHTML = ""
}
}
function renderLi() {
$("ul").innerHTML = ""
searchList.forEach(function (v, i) {
$("ul").innerHTML += `<li>${v}</li>`
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,41 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
body {
font-size: 0;
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
img {
width: 100%;
}

View File

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

View File

@@ -0,0 +1,105 @@
.header {
position: fixed;
width: 100%;
height: 1.6rem;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.header .header_logo {
background: var(--themeColor);
height: 0.88rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.3rem;
}
.header .header_logo i {
font-size: 0.45rem;
color: var(--whiteColor);
}
.header .header_logo .search {
flex: 1;
background: var(--whiteColor);
height: 0.6rem;
border-radius: 0.6rem;
margin-left: 10px;
margin-right: 10px;
display: flex;
align-items: center;
}
.header .header_logo .search span {
font-size: var(--fontSize12);
color: var(--textColor);
}
.header .header_logo .search i {
color: var(--textColor) !important;
font-size: 0.26rem !important;
margin-right: 0.1rem;
padding-top: 0.02rem;
margin-left: 0.26rem;
}
.header_menu {
height: 0.72rem;
display: flex;
align-items: center;
background: #fe7fa2;
}
.header_menu a {
color: #fff;
text-decoration: none;
width: 0.8rem;
height: 0.72rem;
text-align: center;
line-height: 0.72rem;
}
.header_menu ul {
display: flex;
flex: 1;
overflow-x: scroll;
padding-left: 0.3rem;
}
.header_menu ul li {
font-size: 0.26rem;
margin-right: 0.26rem;
color: #d3d2d2;
flex-shrink: 0;
}
.header_menu ul .active {
color: var(--whiteColor) !important;
}
.content {
margin-top: 1.6rem;
margin-bottom: 1rem;
}
.swiper-container {
width: 100%;
}
.content {
margin-top: 1.6rem;
margin-bottom: 1rem;
}
.swiper {
width: 100%;
}
.swiper-slide {
height: calc(100vh - 1.6rem - 1rem);
overflow-y: scroll;
}

View File

@@ -0,0 +1,46 @@
.my_top {
font-size: 20px;
height: 200px;
width: 100%;
background-color: #fe7fa2;
color: aliceblue;
}
.my_top i {
color: aliceblue;
font-size: 70px;
position: absolute;
left: 152.6px;
line-height: 200px;
}
.wode {
position: absolute;
left: 167.6px;
top: 135px;
}
ul {
font-size: 20px;
margin-top: 5px;
color: #868181;
}
li {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.my_list {
width: 100%;
margin-left: 5px;
}
li i {
height: 20px;
width: 20px;
margin-right: 5px;
line-height: 26.4px;
}

View File

@@ -0,0 +1,147 @@
:root {
--themeColor: #fb7299;
--whiteColor: #fff;
--blackColor: #000;
--textColor: #999;
--fontSize12: 0.24rem;
--fontSize13: 0.26rem;
--fontSize14: 0.28rem;
--fontSize15: 0.3rem;
--fontSize16: 0.32rem;
--fontSize17: 0.34rem;
--fontSize18: 0.36rem;
--fontSize19: 0.38rem;
--fontSize20: 0.4rem;
--fontSize21: 0.42rem;
}
.footer {
justify-content: space-around;
display: flex;
height: 1rem;
align-items: center;
position: fixed;
border-top: 0.02rem solid #e2e2e2;
width: 100%;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
background: var(--whiteColor);
}
.footer li {
text-align: center;
}
.footer li p {
font-size: 0.24rem;
margin-top: 0.04rem;
}
.footer .active a {
color: var(--themeColor);
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pub-header {
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;
}
.pub-header i {
font-size: 0.4rem;
}
.pub-header .text {
font-size: 0.36rem;
flex: 1;
margin-left: 0.28rem;
}
.content {
margin-top: 1rem;
}
.list {
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list .item {
width: 48%;
flex-shrink: 0;
margin-bottom: 0.24rem;
}
.list .item_top {
position: relative;
}
.list .item_top img {}
.list .item_top span {
bottom: 0.1rem;
right: 0.16rem;
position: absolute;
font-size: 0.24rem;
background: var(--themeColor);
color: #fff;
padding: 0.02rem 0.12rem;
border-radius: 0.16rem;
}
.list .item_text {}
.list .item_text .title {
font-size: 0.34rem;
font-weight: 400;
margin-top: 0.2rem;
}
.list .item_text .model {
font-size: 0.28rem;
color: #bdb7b7;
}
.list .item_text .source {
font-size: 0.28rem;
color: #bdb7b7;
}
.list .item_tag {
margin-top: 0.1rem;
display: flex;
flex-wrap: wrap;
}
.list .item_tag 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;
}

View File

@@ -0,0 +1,63 @@
class Ajax {
constructor() {
this.ajax = new XMLHttpRequest
}
//Promise方法
get(params) {
return new Promise((success, error) => {
var str = ""
for (const key in params.data) {
//console.log("key: ", key);
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
//console.log(`${params.url}${str}`);
this.ajax.open("GET", `${config.checkUrl()}${params.url}${str}`);
this.ajax.send();
this.readystatechange(success, error)
})
}
post() { }
readystatechange(success, error) {
this.ajax.onreadystatechange = () => {
// 4:ajax状态码
if (this.ajax.readyState == 4) {
// 200:http状态码
if (this.ajax.status == 200) {
var data = JSON.parse(this.ajax.responseText)
//console.log(data);
success(this.checkStatus(data))
} else {
error(this.ajax)
}
}
}
}
checkStatus(data) {
switch (data.status) {
case 200://是num类型200 写200 是字符串"200" 写"200"
return data.result
break;
// 200、400 是后端状态码(status)可以随便定义数字
case 404:
alert(data.msg);
// throw是让浏览器抛出一个错误
// new Error是新建一个错误信息
// 抛出一个新的错误信息 会把浏览器运行打断 不会再运行
throw new Error(data.msg)
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,40 @@
var config = {
// 基地址
devBaseUrl: 'http://127.0.0.1:3000/api/json/', // 开发阶段
testBaseUrl: 'http://127.0.0.1:3000/api/test', // 测试阶段
prodBaseUrl: 'http://172.20.10.4:3000/api/json', // 上线阶段
stage: 'dev', //dev test prod
apiList: {//把接口短地址放在这里
index: '/index',
info: '/info',
ClassList: '/class',
ClassListDetails: '/classList',
},
// 底部导航条数据 可以增加删除
footerList: [
{ title: '首页', icon: 'icon-home', url: 'index.html' },
{ title: '机构', icon: 'icon-jigou', url: 'mechanism.html' },
{ title: '模特', icon: 'icon-me', url: 'model.html' },
{ title: '我的', icon: 'icon-wo', url: 'my.html' },
],
checkUrl: function () {
switch (this.stage) {
case "dev":
return this.devBaseUrl
break;
case "test":
return this.testBaseUrl
break;
case "prod":
return this.prodBaseUrl
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,9 @@
class Collect {
constructor() {
header("我的收藏")
}
like() {
localStorage.setItem("like", "")
}
}
new Collect()

View File

@@ -0,0 +1,74 @@
class Edit {
constructor() {
header("分类编辑")
// 从本地取出数据
this.principal = JSON.parse(localStorage.getItem("principal"))
this.additional = JSON.parse(localStorage.getItem("additional"))
this.renderPrincipal()
this.renderAdditional()
}
// 渲染已选菜单
renderPrincipal() {
// 把title渲染到已选菜单
this.principal.forEach(v => {
$(".principal").html(`
<li>${v.title}</li>
`)
});
this.principalClick()
}
// 已选菜单点击事件
principalClick() {
var self = this
click(_(".principal li"), function () {
if (this.index != 0) {
// 向未选标签追加一个数据
self.additional.push(self.principal[this.index])
// 删除一个已选标签
var deleteAItem = self.principal.splice(this.index, 1)
// 提取数据转化为字符串
localStorage.setItem("principal", JSON.stringify(self.principal))
localStorage.setItem("additional", JSON.stringify(self.additional))
$(".additional").html(`
<li>${deleteAItem[0].title}</li>
`)
self.additionalClick()
$(".principal").removeChild(this)
self.principalClick()
}
})
}
// 渲染未选菜单
renderAdditional() {
this.additional.forEach(v => {
$(".additional").html(`
<li>${v.title}</li>
`)
});
this.additionalClick()
}
additionalClick() {
var self = this
click(_(".additional li"), function () {
self.principal.push(self.additional[this.index])
var deleteAItem = self.additional.splice(this.index, 1)
localStorage.setItem("principal", JSON.stringify(self.principal))
localStorage.setItem("additional", JSON.stringify(self.additional))
$(".principal").html(`
<li>${deleteAItem[0].title}</li>
`)
self.principalClick();
$(".additional").removeChild(this)
self.additionalClick()
})
}
}
new Edit()

View File

@@ -0,0 +1,143 @@
class Index {
constructor() {
this.index = 0
// 全局变量
this.principal = []
footer()//每个页面都要调用
this.getClassList()
}
async getClassList() {
var self = this;
if (localStorage.getItem("principal") == null) {
// 调用sever里的indexsever中的ClassList方法
var res = await indexSever.ClassList()
console.log(res);
this.principal = res.principal
localStorage.setItem("principal", JSON.stringify(this.principal))
localStorage.setItem("additional", JSON.stringify(res.additional))
} else {
this.principal = JSON.parse(localStorage.getItem("principal"))
}
// 把数据principal循环放在首页上 渲染页面
this.principal.forEach((v, i) => {
$(".header_menu ul").html(`
// 默认首页激活
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`)
$(".page_wrapper").html(`
<div class="swiper-slide">//这个div相当于li
<div class="list">
</div>
</div>`)
_(".swiper-wrapper .swiper-slide").forEach(v => {
v.onscroll = () => {
const { clientHeight, scrollHeight, scrollTop } = v;
// console.log(clientHeight, scrollHeight, scrollTop);
const distance = scrollHeight - scrollTop - clientHeight;
if (distance <= 1) {
console.log("到底部了");
// 首页
if (this.index == 0) {
this.getIndex()
} else {
this.principal[this.index].page += 1
if (this.principal[this.index].page <= this.principal[this.index].total_page) {
this.GetClassListDetails("more")
} else {
console.log("已经没有数据了!!!");
}
}
}
}
})
});
click($('.header_menu a'), function () {
console.log(this);
})
click(_(".header_menu ul li"), function () {
self.changeActive(this.index)
})
// _(".header_menu ul li").forEach()
this.getIndex()
this.initPage()
}
//除首页外的分类接口
async GetClassListDetails(type = "click") {
var getData = async () => {
var res = await indexSever.ClassListDetails({
page: this.principal[this.index].page,
id: this.principal[this.index].id,
})
this.principal[this.index].total_page = res.total_page
this.principal[this.index].content = [
...this.principal[this.index].content,
...res.data
];
item(_(".swiper-slide .list")[this.index], res.data)
console.log(res);
}
if (type == "click") {
if (this.principal[this.index].id != -1) {
if (this.principal[this.index].content.length == 0) {
getData()
}
}
} else {
getData()
}
}
changeActive(index) {
this.index = index
_(".header_menu ul li").forEach(v => v.remove("active"))
_(".header_menu ul li")[index].add("active")
// 轮播图滑动
this.mySwiper.slideTo(index)
}
// 请求的首页数据
async getIndex() {
// 调用sever里的indexsever中的index方法
var res = await indexSever.index();//sever数据回返回到这里
console.log(res);
// 首页总的数据(把里面的所有对象取出来变成一个新数组)
this.principal[this.index].content = [
// 把最开始20条变成对象
...this.principal[this.index].content,
// 追加数据也变成对象
...res.list//list是存数据的地方
]
console.log(this.principal[this.index].content);
item(_(".swiper-slide .list")[this.index], res.list)
}
//轮播图
initPage() {
var self = this;
this.mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
on: {
slideNextTransitionEnd: function () {
self.changeActive(this.activeIndex)
self.GetClassListDetails()
console.log(this.activeIndex);
}
}
})
}
}
new Index()

View File

@@ -0,0 +1,94 @@
class Info {
constructor() {
header("详情", `<i id="collection" class="iconfont icon-xin"></i>`)
this.getInfo();
this.Like()
}
/**
* 对收藏数组的localStorage中进行操作
*/
// 存数据
setLike(id) {
const like = this.getLike()
if (!!like && Array.isArray(like)) {
like.push(id)
localStorage.setItem("like", JSON.stringify(like))
} else {
localStorage.setItem("like", JSON.stringify([id]))
}
}
// 读取数据
getLike() {
const like = JSON.parse(localStorage.getItem("like"))
if (!!like && Array.isArray(like)) {
return like
}
return []
}
// 删除数据
removeLinke(id) {
let like = this.getLike()
like = like.filter(v => v !== id)
localStorage.setItem("like", JSON.stringify(like))
}
/**
* 根据本地存储的数据判断当前详情是否已被收藏
* 如果已经收藏则改变样式
*/
changeLikeStyle() {
const collectionDom = $("#collection")
// 读取id参数
const id = query("id")
const like = this.getLike()
// 如果id=-1 那么为空 没有收藏 否则已收藏
if (like.indexOf(id) === -1) {
collectionDom.remove("icon-aixin")
collectionDom.add("icon-xin")
} else {
collectionDom.remove("icon-xin")
collectionDom.add("icon-aixin")
}
}
/**
* 根据本地存储的数据判断当前详情
* 如果已有数据则删除数据 对应效果 取消收藏
* 如果没有数据则添加 添加收藏
*/
onLinke() {
const id = query("id")
const like = this.getLike()
// 如果id=-1 那么为空 没有数据存数据 否则删除数据
if (like.indexOf(id) === -1) {
this.setLike(id)
this.changeLikeStyle()
} else {
this.removeLinke(id)
this.changeLikeStyle()
}
}
Like() {
const collectionDom = $("#collection")
this.changeLikeStyle()
click(collectionDom, () => {
this.onLinke()
})
}
async getInfo() {
var res = await indexSever.info({
id: query("id"),
quantity: query("total")
});
res.forEach(v => {
$(".content").html(`<img src="${v}" alt="">`)
});
}
}
new Info();

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,26 @@
class Model {
constructor() {
this.page = 1
header("分类")
this.tag = []
this.getTagList()
}
async getTagList() {
var res = await indexSever.ClassListDetails({
page: this.page,
id: query("id")
})
item($(".tag"), res.data)
this.tag.content = [
...this.tag,
...res.data
];
}
}
new Model()

View File

@@ -0,0 +1,65 @@
// 首页接口
class IndexSever {
// index接口封装
async index(data = {}) {
var ajax = new Ajax()
var res = await ajax.get({
url: config.apiList.index,
// data是由页面传过来的 当没有data时,data可以默认为空
data: data
})
ajax = null;
return res
}
// class接口封装
async ClassList(data = {}) {
// 定义一个变量 先对数据进行保存
var res = await (new Ajax()).get({
url: config.apiList.ClassList,
data: data
})
// 中间可以对数据进行处理
res.principal.unshift({//增加一个首页
//unshift往数组前面追加 push往数组后面追加
id: -1,
page: 1,
title: "首页",
})
// 给每个li增加一个content 把各自的数据存到content里面
res.principal.forEach(v => {
v.content = []
v.page = 1
v.total_page = 0
});
res.additional.forEach(v => {
v.content = []
v.page = 1
v.total_page = 0
});
// 最后返回数据
return res
}
// classlist接口封装
async ClassListDetails(data = {}) {
return await (new Ajax()).get({
url: config.apiList.ClassListDetails,
data: data
})
}
// info接口封装
async info(data = {}) {
return await (new Ajax()).get({
url: config.apiList.info,
data: data,
});
}
}
// 定义一个变量保存new
var indexSever = new IndexSever()

View File

@@ -0,0 +1,137 @@
class Util {
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
HTMLElement.prototype.text = function (text) {
this.innerText = text
}
HTMLElement.prototype.html = function (text) {
this.innerHTML += text;
}
}
header(title = " ", icon) {
$("body").html(`
<div class="pub-header">
<i class="iconfont icon-back1"></i>
<div class="text">${title}</div>
//${icon}
</div>
`)
click($(".icon-back1"), function () {
history.back()
})
}
item(father, data) {
data.forEach(v => {
father.html(`
<div class="item">
<a href="./info.html?id=${v.id}&total=${v.total || v.shuliang}">
<div class="item_top">
<img src="${v.img_src || v.preview}"
alt="">
<span>${v.shuliang || v.total}</span>
</div>
<div class="item_text">
<div class="title ellipsis">${v.title}</div>
<div class="model ellipsis">模特:${v.user || v.renwulist[0].name}</div>
<div class="source ellipsis">${v.source || v.jigoulist[0].name}</div>
</div>
</a>
<div class="item_tag">
${(v.tags || v.biaoqianlist).map(a => {
return ` <a class="tag_item" href="./tag.html?id=${v.id}">${a.name || a.title}</a>`
}).toString().replaceAll(",", "")
}
</div>
</div>
`)
})
}
//
// getQueryVariable(variable) {
// var query = window.location.search.substring(1);
// var vars = query.split("&");
// for (var i = 0; i < vars.length; i++) {
// var pair = vars[i].split("=");
// if (pair[0] == variable) { return pair[1]; }
// }
// return (false);
// }
// 底部导航条
footer() {
var ul = `
<ul class="footer">
${config.footerList.map((v, i) => {
// 判断地址是否包括url的短地址 包括为(true)class加active 不包括为(false)空
return `<li class="${location.href.includes(v.url) ? 'active' : ''}">
<a href="${v.url}">
<i class="iconfont ${v.icon}"></i>
<p>${v.title}</p>
</a>
</li>`
}).toString().replaceAll(",", "")
}
</ul>
`;
//console.log(ul);
// body里面插入ul
$("body").html(ul)
}
// 获取url参数中的key
query(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
// click(className, callback) {
// $(className).onclick = () => {
// callback()
// }
// }
click(className, callback) {
var domArr = Array.from(className);
if (domArr.length != 0) {
className.forEach((v, i) => {
v.onclick = function (e) {
v.index = i;
v.e = e;
callback.call(this)
}
})
} else {
className.onclick = function (e) {
className.e = e;
callback.call(this)
}
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject, query, footer, item, header, //getQueryVariable
} = new Util()
inject()

View File

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

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/collect.css">
</head>
<body>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/ajax.js"></script>
<script src="../js/sever/index.js"></script>
<script src="../js/page/collect.js"></script>
</html>

View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/edit.css">
</head>
<body>
<div class="content">
<div class="title ">已选菜单</div>
<ul class="menu_list principal">
</ul>
<div class="title ">未选菜单</div>
<ul class="menu_list additional">
</ul>
</div>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/ajax.js"></script>
<script src="../js/sever/index.js"></script>
<script src="../js/page/edit.js"></script>
</html>

View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/util/rem.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="header">
<div class="header_logo">
<i class="iconfont icon-taozi1"></i>
<div class="search">
<i class="iconfont icon-search"></i>
<span>200万张图,有你想要的...</span>
</div>
<i class="iconfont icon-wo"></i>
</div>
<div class="header_menu">
<ul></ul>
<a class="iconfont icon-edit" href="./edit.html"></a>
</div>
</div>
<div class="content">
<div class="swiper-container">
<!-- 相当于ul -->
<div class="swiper-wrapper page_wrapper">
</div>
</div>
</div>
<ul>
<li>
<i></i>
<span></span>
</li>
</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.3.0/js/swiper.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/util/index.js"></script>
<script src="../js/ajax/ajax.js"></script>
<script src="../js/sever/index.js"></script>
<script src="../js/page/index.js"></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/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/info.css">
</head>
<body>
<div class="content">
</div>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/ajax.js"></script>
<script src="../js/sever/index.js"></script>
<script src="../js/page/info.js"></script>
</html>

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/mechanism.css">
</head>
<body>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/ajax.js"></script>
<script src="../js/sever/index.js"></script>
<script src="../js/page/mechanism.js"></script>
</html>

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/model.css">
</head>
<body>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/ajax.js"></script>
<script src="../js/sever/index.js"></script>
<script src="../js/page/model.js"></script>
</html>

View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/my.css">
</head>
<body>
<div class="my_top">
<i class="iconfont icon-wo"></i>
<span class="wode">我的</span>
</div>
<ul class="my_bottom">
<li>
<div class="my_list">
<i class="iconfont icon-wushuju"></i>
<span>最近更新</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
<li>
<div class="my_list">
<i class="iconfont icon-wushuju"></i>
<span>单图收藏</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
<li>
<a href="./collect.html" class="my_list">
<i class="iconfont icon-wushuju"></i>
<span>写真收藏</span>
</a>
<i class="iconfont icon-qianjin-tongyong"></i>
<li>
<div class="my_list">
<i class="iconfont icon-wushuju"></i>
<span>关于我们</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
<li>
<div class="my_list">
<i class="iconfont icon-wushuju"></i>
<span>用户协议</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
<li>
<div class="my_list">
<i class="iconfont icon-wushuju"></i>
<span>检测升级</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
<li>
<div class="my_list">
<i class="iconfont icon-wushuju"></i>
<span>清除缓存</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</ul>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/ajax.js"></script>
<script src="../js/sever/index.js"></script>
<script src="../js/page/my.js"></script>
</html>

View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/util/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/tag.css">
</head>
<body>
<div class="content">
<div class="tag list">
</div>
</div>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/ajax.js"></script>
<script src="../js/sever/index.js"></script>
<script src="../js/page/tag.js"></script>
</html>

View File

@@ -0,0 +1,61 @@
<!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>
<style>
body {
height: 30000px;
}
.header {
width: 100%;
height: 50px;
background: red;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
<script>
// var header = $(".header");
// $("body").onscroll = function () {
// if (document.documentElement.scrollTop > 100) {
// header.className = "header fixed"
// } else {
// header.className = "header"
// }
// console.log("页面被滚动了");
// }
var header = $(".header")
$("body").onscroll = function () {
if (document.documentElement.scrollTop > 100) {
header.className = "header fixed"
} else {
header.className = "header"
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,54 @@
<!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>
</head>
<body>
<button>点我</button>
<div style="display:block;" class="text">哈哈哈哈哈哈</div>
</body>
<script>
// var button = $("button"), text = $(".text")
// button.onclick = function () {
// if (text.style.display == "block") {
// text.style.display = "none"
// } else {
// text.style.display = "block",
// text.style.color = `hsl(${Math.random() * 360},100%,50%)`
// }
// }
var button = $("button"), text = $(".text")//text前面没加.
button.onclick = function () {
if (text.style.display == "block") {//加“”号!
text.style.display = "none"//“”号!!
} else {
text.style.display = "block"//“”号!!
text.style.color = `hsl(${Math.random() * 360},100%,50%)`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,86 @@
<!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>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
img {
width: 80px;
height: 96px;
position: fixed;
top: 0px;
}
.dialog {
position: fixed;
width: 100%;
height: 100%;
background: #0000008c;
z-index: 9999;
display: none;
}
.center {
width: 40%;
background: #fff;
padding: 15px 10px;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.title {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ebe9e9;
}
.content {
padding: 20px 0;
text-align: center;
}
.footer {
display: flex;
justify-content: flex-end;
}
.footer .ok {
padding: 3px 15px;
background: #2a6bf4;
color: #fff;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<img src="./hb.png" alt="">
</body>
<script>
function CreatedHB() {
var img = document.createElement("img");
img.src = "./hb.png"
console.log("img: ", img);
}
setInterval(() => { CreatedHb() }, 500)
</script>
</html>

Some files were not shown because too many files have changed in this diff Show More