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,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="app">
<h3>{{ '哈哈哈哈哈' | spl }}</h3>
<button @click="a">哈哈哈</button>
<lb-hello>
<template v-slot:back>
<h1>返回按钮</h1>
</template>
<template v-slot:action>
<h1>喜欢 和 分享</h1>
</template>
</lb-hello>
<lb-swiper @sclick="getData"></lb-swiper>
<h2>qdqwdwq</h2>
<lb-footer ref="footer" :footer-arr="tabs"></lb-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 组件?
// 就是使用频率搞的html代码块 js function
// 全局组件
// 局部组件
// 父子组件之间的数据传递
// 父 ---> 子 props
// 子 ---> 父 $emit
// 父 访问 子 的方法 $refs
// 反过来? 和 兄弟之间的相互访问 $parent $root
// 生命周期
Vue.component('lb-hello', {
template: `
<div>
<div class="back">
<slot name="back"></slot>
</div>
<h2>全局组件</h2>
<div class="action">
<slot name="action"></slot>
</div>
</div>
`,
data() {
return {}
},
methods: {}
})
var footer = {
template: `
<div>
<p>{{test}}</p>
<lb-hello></lb-hello>
<ul>
<li v-for="(item,index) in footerArr || footer">{{item.title}}</li>
</ul>
</div>
`,
props: {
footerArr: {
type: Array,
default: () => []
},
test: {
type: String,
default: '这默认数值'
}
},
data () {
return {
footer: [
{ title: '商城' },
{ title: '购物车' },
{ title: '订单' },
{ title: '返回首页' },
]
}
},
created() {
// console.log("======: ",this.$parent.$data.tabs)
console.log(this.$parent.$children[1])
},
methods: {
footertest() {
console.log("footer 子组件的方法")
}
}
};
var swiper = {
template: `
<button @click="setSata">点我</button>
`,
data() {
return {
arr: 'swiper的数据'
}
},
methods: {
setSata() {
this.$emit('sclick', this.arr)
}
}
}
// 代码片段
var mix = {
data () {
return {
page: 0,
totalPage: 100
}
},
methods: {
}
};
new Vue({
el: '.app',
mixins: [mix],
data: {
tabs: [
{ title: '首页' },
{ title: '门店' },
{ title: '商城' },
{ title: '我的' },
]
},
created() {
console.log(this.page)
},
methods: {
getData(res) {
console.log(res)
},
testf(res) {
console.log(res)
},
a () {
this.$refs.footer.footertest()
}
},
filters: {
spl(val) {
return val.substr(0,1)
}
},
components: {
'lb-footer':footer,
'lb-swiper':swiper,
}
})
</script>
</html>

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="header" v-cloak>
<p>{{ sb }}</p>
<ul v-once>
<li v-for="(item,index) in list">{{ index }} {{ item.name }}</li>
</ul>
<ul>
<li v-for="(v,a) in cva">{{ a }} {{ v }}</li>
</ul>
<img v-bind:src="img" alt="">
<p v-if= "isLogin" >deli</p>
<p v-else>asdfvb</p>
<h2 v-show="isShow">v-show</h2>
<div v-text="content"></div>
<input type="text" v-model="userName" placeholder="请输入号码">
{{userName}}
<button @click="test">登录</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '.header',
data:{
sb: '你是个啥',
list: [
{id:1,name:'123'},
{id:2,name:'123345'},
{id:3,name:'1234353543'},
{id:4,name:'1235438373873'},
],
cva:{
id:5,
name:5646
},
img:'https://www.baidu.com/img/dong_47f08bb2dd6546c9a788f71d7463ce48.gif',
isLogin:false,
isShow: true,
content: '<h2>这是测试标题</h2>',
userName: '张三',
},
methods:{
test() {
this.test2();
},
test2(){
alert(this.userName)
}
}
})
</script>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title {
color: red;
}
.content li {
display: none;
}
.content-active {
display: block !important;
}
</style>
</head>
<body>
<div class="header">
<ul>
<li v-for="(item,index) in tabs"
v-bind:class="index == currentIndex ? 'title' : ''"
@click="tabChange(index)">
{{ item.title }}</li>
</ul>
<ul class="content">
<li v-for="(item,index) in tabs" v-bind:class="index == currentIndex ? 'content-active' : ''">{{ item.content }}</li>
</ul>
<h2>{{dddd}}</h2>
<h3>{{dddd}}</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'.header',
data: {
currentIndex: 0,
tabs: [
{ title: '社会', content: '社会的内容' },
{ title: '社会1', content: '社会的内容1' },
{ title: '社会2', content: '社会的内容2' },
]
},
methods:{
tabChange(i) {
this.currentIndex = i;
}
},
watch: {
currentIndex (newval,oldval) {
console.log("newval: ", newval)
console.log("oldval: ", oldval)
}
},
computed: {
dddd() {
console.log(11111)
return this.currentIndex
}
}
})
</script>
</html>

View File

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.router-link-exact-active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/index">首页</router-link>
<router-link to="/about">我的</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<div class="content">
<router-view></router-view>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Index = {
template: `
<div>
<ul>
<router-link tag="li" :to="{ path: '/info', query: { id: item.id } }" v-for="item in newsList" >
{{item.title}}
</router-link>
</ul>
</div>
`,
data() {
return {
newsList: [
{ id: 1, title: '哈哈'},
{ id: 2, title: '哈哈'},
{ id: 3, title: '哈哈'},
]
}
},
methods: {
goInfo(id) {
this.$router.push({
path: '/info',
query: {
id: id
}
})
}
}
}
const About = {template: '<div>我的</div>'};
const Login = {
template: '<div @click="LoginSub">登录</div>',
methods: {
LoginSub() {
localStorage.setItem("token","W3456754567UIUYTFRDGFHNGRE7")
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
}
}
}
};
const Info = () => {
return {
template: `
<div>
详情 {{ $route.query.id }}
</div>
`,
created() {
console.log(this.$route.query.id)
}
}
};
const routes = [
{
path: '/index',
component: Index,
meta: {
title: '首页',
isLogin: false
}
},
{
path: '/about',
component: About,
meta: {
title: '我的',
isLogin: true
}
},
{
path: '/login',
component: Login,
meta: {
title: '登录',
isLogin: false
}
},
{
path: '/info',
component: Info(),
name: 'info',
meta: {
title: '详情页',
isLogin: false
}
},
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes
});
router.beforeEach((to, from, next) => {
document.title = to.meta.title;
if (to.meta.isLogin) {
// 是否登录
if (localStorage.getItem("token") != null) {
next()
} else {
next({
path: '/login',
query: {
from: to.path
}
})
}
} else {
next()
}
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
router,
el: '#app',
});
</script>
</html>

View File

@@ -0,0 +1,11 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 0;
}
a {
text-decoration: none;
}

View File

@@ -0,0 +1,267 @@
.header {
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 0.92rem;
background: linear-gradient(90deg,#0af,#0085ff);
z-index: 999;
padding: 0.185rem 0.13rem 0.075rem;
box-sizing: border-box;
}
.location {
color: #fff;
display: flex;
align-items: center;
}
.location span {
font-size: .17rem;
margin: 0 0.05rem;
font-weight: 700;
}
.search {
background: #fff;
height: 0.345rem;
border-radius: .02rem;
margin-top: 0.1rem;
display: flex;
justify-content: center;
align-items: center;
}
.search span {
font-size: .14rem;
color: #999;
margin-left: .05rem;
}
.search i {
font-size: .14rem;
color: #999;
}
.content {
margin-top: 0.94rem;
margin-bottom: 0.48rem;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 0.48rem;
border-top: .01rem solid #f5f5f5;
background: #fff;
z-index: 999;
display: flex;
justify-content: space-around;
align-items: center;
}
.footer li {
display: flex;
flex-direction: column;
align-items: center;
}
.footer li span{
color: #8e8e93;
font-size: .12rem;
zoom: 0.9;
margin-top: 0.035rem;
}
.active {
color: #0089dc;
}
.active span {
color: #0089dc !important;
}
.menu {
display: flex;
flex-wrap: wrap;
}
.menu li{
width: 20%;
text-align: center;
margin-top: .11rem;
}
.menu li img{
width: .45rem;
height: .45rem;
}
.menu li p{
color: #666;
font-size: .12rem;
}
.activity {
margin-top: 0.265rem;
padding-left: .15rem;
padding-top: .12rem;
box-sizing: border-box;
background: linear-gradient(
0deg
,#f4f4f4 5%,#fafafa 95%);
display: flex;
justify-content: space-between;
height: 1.1rem;
}
.activity_text h3{
font-size: .17rem;
font-weight: 700;
color: #333;
margin-bottom: .05rem;
}
.activity_text .des{
font-size: .13rem;
color: #777;
margin-bottom: .09rem;
}
.activity_text .buy{
font-size: .12rem;
color: #af8260;
}
.activity_img {
width: 1.41rem;
height: .94rem;
}
.shop_list {
margin-top: 0.19rem;
}
.shop_list .title {
font-size: .15rem;
color: #333;
text-align: center;
position: relative;
width: 35%;
margin: 0 auto;
}
.shop_list .title::before {
content: " ";
width: .2rem;
height: .01rem;
background-color: #999;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.shop_list .title::after {
content: " ";
width: .2rem;
height: .01rem;
background-color: #999;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.condition {
display: flex;
justify-content: space-around;
align-items: center;
height: .4rem;
margin-top: 0.225rem;
margin-bottom: 0.26rem;
}
.condition li{
font-size: .13rem;
color: #666;
}
.list>li {
display: flex;
border-bottom: .01rem solid #f5f5f5;
padding-bottom: .15rem;
margin-top: 0.185rem;
}
.list li .shop_logo{
width: .64rem;
height: .64rem;
}
.list_text {
margin-left: .1rem;
width: calc(100% - .7rem);
}
.list_text_title {
display: flex;
justify-content: space-between;
align-items: center;
}
.list_text_title h3 {
font-size: .15rem;
color: #333;
font-weight: 700;
}
.list_text_title i {
font-size: .12rem;
color: #666;
}
.zan {
margin-top: 0.08rem;
margin-bottom: 0.08rem;
}
.zan img {
width: .56rem;
margin-right: 0.045rem;
}
.zan span {
font-size: .11rem;
zoom: 0.9;
color: #666;
}
.peisong {
display: flex;
justify-content: space-between;
align-items: center;
color: #999;
font-size: .11rem;
zoom: 0.9;
}
.tag {
display: flex;
margin-top: .1rem;
}
.tag li {
font-size: .165rem;
padding: 0 0.03rem;
box-sizing: border-box;
border: .01rem solid rgb(221, 221, 221);
zoom: 0.5;
color: rgb(102, 102, 102);
margin-right: .09rem;
border-radius: .02rem;
}
.youhui {
margin-top: .2rem;
}
.youhui li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.075rem;
}
.youhui .tip {
line-height: .18rem;
width: .18rem;
height: .18rem;
background: rgb(240, 115, 115);
color: #fff;
font-size: .12rem;
margin-right: .08rem;
border-radius: .02rem;
text-align: center;
zoom: 0.8;
}
.youhui .youhui_text {
font-size: .12rem;
color: #666;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sss {
display: flex;
width: 87%;
}

View File

@@ -0,0 +1,75 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
height: 0.595rem;
background: #fff;
padding: 0 0.125rem;
align-items: center;
justify-content: space-between;
display: flex;
}
.header i{
width: 0.095rem;
height: 0.17rem;
}
.header .header_c{
font-family: PingFang-SC-Bold;
font-size: 0.17rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #000000;
}
.center{
margin-top: 0.595rem;
padding: 0 0.125rem;
}
.center_q{
border-bottom: 0.085rem solid #f3f4f7;
}
.center_q{
height: 1.08rem;
display: flex;
align-items: center;
justify-content: space-between;
}
ul li{
display: flex;
align-items: center;
justify-content: space-between;
height: 0.5rem;
}
.center .center_a{
font-family: PingFang-SC-Bold;
font-size: 0.26rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.16rem;
letter-spacing: 0rem;
color: #010101;
}
.center .center_b{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.16rem;
letter-spacing: 0rem;
color: #909090;
}
.center .center_c{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.16rem;
letter-spacing: 0rem;
color: #909090;
}
li:first-child .center_c{
margin-right: 0.3rem;
}

View File

@@ -0,0 +1,67 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
padding: .1rem;
margin-top: .1rem;
}
.center{
margin-top: 0.48rem;
padding: 0 .3rem;
display: flex;
flex-direction: column;
}
.center p{
font-family: PingFang-SC-Medium;
font-size: 0.27rem;
font-weight: bold;
font-stretch: normal;
line-height: 0.194rem;
letter-spacing: 0rem;
color: #000000;
margin-top: .845rem;
margin-bottom: 0.45rem;
}
.center ul input{
border-left: 0;
font-size: 0.18rem;
font-stretch: normal;
letter-spacing: 0rem;
color: #c7c7cc;
padding: .17rem 0;
border-bottom: .01rem solid #c7c7cc;
width: 311px;
border-top: 0;
border-right: 0;
}
button{
background-color: #5697f4;
border-radius: 0.245rem;
height: 0.49rem;
color: #fff;
font-size: .15rem;
margin-bottom: 0.28rem;
margin-top: 0.3rem;
border: none;
}
.header_a{
display: flex;
justify-content: space-between;
}
.header_a span{
font-family: PingFang-SC-Regular;
font-size: 0.14rem;
font-weight: bold;
font-stretch: normal;
line-height: 0.194rem;
letter-spacing: 0rem;
color: #9696a4;
}
a{
font-family: PingFang-SC-Regular;
font-size: 0.14rem;
font-weight: bold;
letter-spacing: 0rem;
color: #5697f4;
}

View File

@@ -0,0 +1,85 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
height: 0.595rem;
background: #fff;
padding: 0 0.125rem;
align-items: center;
justify-content: space-between;
display: flex;
background: #f3f4f7;
}
.header .header_a{
font-family: PingFang-SC-Medium;
font-size: 0.15rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.35rem;
letter-spacing: 0rem;
color: #000000;
}
.header .header_b{
font-family: PingFang-SC-Bold;
font-size: 0.18rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.35rem;
letter-spacing: 0rem;
color: #000000;
}
.header button{
background-color: #5697f4;
border-radius: 0.025rem;
font-family: PingFang-SC-Bold;
font-size: 0.13rem;
font-weight: normal;
font-stretch: normal;
color: #ffffff;
width: 0.62rem;
height: 0.315rem;
border: none;
}
.center{
margin-top: .6rem;
padding-top: .05rem;
}
.center_b{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.35rem;
letter-spacing: 0rem;
color: #a7a7a7;
margin-left: .3rem;
}
.center_a{
background: #f3f4f7;
height: 6rem;
}
.center_c{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.35rem;
letter-spacing: 0rem;
color: #a7a7a7;
margin-left: .17rem;
margin-top: .06rem;
}
.center_a button{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #5a5a5a;
background-color: #e0e0e0;
border-radius: 0.13rem;
margin-left: .19rem;
margin-top: .05rem;
border: .01rem solid #e0e0e0;
}

View File

@@ -0,0 +1,78 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
height: 0.595rem;
background: #fff;
padding: 0 0.125rem;
align-items: center;
justify-content: space-between;
display: flex;
border: solid 0.005rem rgb(234 234 234 / 60%);
}
.header span{
font-family: PingFang-SC-Bold;
font-size: 0.18rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.24rem;
letter-spacing: 0rem;
color: #333333;
}
.header i{
color: #999;
}
.conter{
margin-top: 0.795rem;
padding: 0 0.125rem;
}
li{
display: flex;
align-items: center;
justify-content: space-between;
height: 0.525rem;
padding: .08rem 0;
border-bottom: .01rem solid #ececec;
}
.conter_a{
display: flex;
}
.conter_a img{
width: 0.36rem;
height: 0.36rem;
}
.conter_a span{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: -0.003rem;
color: #333333;
margin-left: .16rem;
}
.conter_b button{
width: 0.6rem;
height: 0.315rem;
border-radius: 0.025rem;
border: solid 0.005rem #498af5;
color: #498af5;
background: #ffffff;
margin-right: .09rem;
}
.conter_b img {
width: 0.125rem;
height: 0.03rem;
margin-bottom: .03rem;
}
li:nth-child(n+2) button{
border-radius: 0.025rem;
border: solid 0.005rem #e1e1e1;
color:#e1e1e1 ;
background: #ffffff;
margin-right: .09rem;
width: 0.6rem;
height: 0.315rem;
}

View File

@@ -0,0 +1,56 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
height: 0.595rem;
background: #fff;
padding: 0 0.125rem;
align-items: center;
justify-content: space-between;
display: flex;
}
.header i{
width: 0.095rem;
height: 0.17rem;
}
.header span{
font-family: PingFang-SC-Bold;
font-size: 0.17rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.4rem;
letter-spacing: 0.017rem;
color: #1b1b1b;
}
.center{
margin-top: 0.595rem;
padding: 0 0.125rem;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 2.2rem;
}
.center img{
width: 1.035rem;
height: 1.29rem;
margin-bottom: 0.365rem;
}
.center_a{
display: flex;
}
.center_a img{
width: 0.18rem;
height: 0.18rem;
margin-bottom: 0.365rem;
}
.center_a span{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: -0.003rem;
color: #737373;
margin-left: .1rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1 @@
<svg width="60" height="10" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="a"><stop stop-color="#FFDE00" offset="0%"/><stop stop-color="#FFB000" offset="100%"/></linearGradient></defs><path d="M54.017 8.072l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L53.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm-48 0L3.465 9.633c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L5.63.589c.213-.515.557-.523.774 0L7.55 3.352l2.982.237c.556.044.67.368.24.736L8.497 6.269l.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L17.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L29.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L41.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56z" fill="url(#a)" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1,156 @@
var body = document.querySelector("body");
var people = document.querySelector(".people");
var bombAudio = document.querySelector(".bombAudio");
var appleAudio = document.querySelector(".appleAudio");
// 屏幕的宽度
var screenWidth = document.body.clientWidth;
var screenHeight = document.body.clientHeight;
var fraction = 0;
var gameProbability = 0.4;
var bmobSpeed = 80;
var appleOffset = 20;
function createdEle(type) {
var Img = document.createElement("img");
Img.src = type == 1 ? './img/apple.png' : './img/boom.png';
Img.className = type == 1 ? 'apple' : 'boom';
// 56 84
// 元素的宽度
var SpanWidth = type == 1 ? 40 : 60;
var SpanLeft = Math.random() * (screenWidth - SpanWidth)
if (SpanLeft <= SpanWidth) {
SpanLeft = 0
}
Img.style = `
position: absolute;
left: ${SpanLeft}px;
top: ${type == 1 ? -56 : -84}px;
`;
body.appendChild(Img);
animation(type, Img)
}
function animation(type, span) {
// 苹果🍎
if (type == 1) {
var appleInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + appleOffset}px`;
// 判断苹果是否超过苹果最大高度,如果超过,删除苹果并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(appleInterval)
} else {
JudgingCollision(span, appleInterval)
}
},60)
// 炸弹💣
} else {
var boomInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + 20}px`;
//判断炸弹是否超过苹果最大高度,如果超过,删除炸弹并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(boomInterval)
} else {
JudgingCollision(span, boomInterval)
}
},bmobSpeed)
}
}
/**
* 判断是否碰撞
* @constructor
*/
function JudgingCollision(span, timeout) {
var people = document.querySelector(".people");
var peopleX1 = parseInt(people.style.left);
var peopleX2 = parseInt(people.style.left) + people.clientWidth;
var peopleX3 = people.offsetTop;
var peopleX4 = people.offsetTop + people.clientHeight;
var spanX1 = parseInt(span.style.left);
var spanX2 = parseInt(span.style.left) + span.clientWidth;
var spanX3 = parseInt(span.style.top);
var spanX4 = parseInt(span.style.top) + span.clientHeight;
// 碰撞检测
if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
// 没碰上
}else{
if (span.className == "apple") {
fraction += 10;
// 如果分数超过100分,
if (fraction >= 100) {
// 降低苹果出现的概率,也就是提高炸弹数量
gameProbability = 0.2;
// 并且加快炸弹的速度
bmobSpeed = 80;
appleOffset = 40;
}
document.querySelector(".fraction").innerText = `${fraction}分`;
appleAudio.play()
body.removeChild(span)
clearInterval(timeout)
} else {
fraction -= 20;
document.querySelector(".fraction").innerText = `${fraction}分`;
bombAudio.play();
if (fraction <= 0) {
clearInterval(timeout)
confirm("游戏失败")
location.reload()
} else {
span.src = "./img/bombimg.png"
clearInterval(timeout)
setTimeout(function (){
body.removeChild(span)
},100)
}
}
}
}
function init () {
var probability = Number(Math.random().toFixed(1))
if (probability <= gameProbability) {
createdEle(1)
} else {
createdEle(2)
}
}
setInterval(function (){
init();
},200)
body.onmousemove = function (e) {
if (e.x <= 100) {
people.style.left = `0px`;
} else {
people.style.left = `${e.x - 100}px`;
}
// 判断人物向右移动
if (parseInt(people.style.left) > screenWidth / 2) {
people.className = 'people'
// 判断人物向左移动 添加类名 leftPeople,使用css3的水平镜像翻转人物
} else {
people.className = 'people leftPeople'
}
}
// 接到一个苹果加10分
// 接到炸弹减20
// 默认0分
// 结束条件:分数 < 0
// 任务
// 分数 >100 的时候 炸弹速度加快(),炸弹的数量变多(概率)
//

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(375, 100)
};
window.onresize = function () {
getRem(375, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,148 @@
<!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>tabs切换</title>
<style>
html,
body,
div,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
margin: 0;
padding: 0;
list-style: none;
}
.title {
height: 45px;
display: flex;
align-items: center;
justify-content: space-around;
}
.show_title{
color: red;
}
.content li{
display: none;
}
.show_content{
display: inline-block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="title">
</ul>
<ul class="content">
</ul>
</div>
</body>
<script>
var title = document.querySelector(".title");
var content = document.querySelector(".content");
var tabs = [
{
title: '推荐',
list: [
{
title : '推荐的内容1',
time: '2021-03-05'
},
{
title : '推荐的内容2',
time: '2021-03-05'
}
]
},
{
title: '游戏',
list: [
{
title : '游戏的内容1',
time: '2021-03-05'
},
{
title : '游戏的内容2',
time: '2021-03-05'
}
]
},
{
title: '热点',
list: [
{
title : '热点的内容1',
time: '2021-03-05'
},
{
title : '热点的内容2',
time: '2021-03-05'
}
]
}
];
function CreateTitle(){
tabs.forEach(function(v,i){
title.innerHTML += `<li class="${ i==0?'show_title':'' }">${v.title}</li>`
});
}
function CreateContent(){
tabs.forEach(function(v,i){
content.innerHTML += `<li class="${i==0?'show_content':''}">${v.list.map(function(item){
return `<span>${item.title}</span>`
}).toString().replace(/,/g,"")
}</li>`
})
}
function clickTabs(){
var Title_li = document.querySelectorAll(".title li")
var Content_li = document.querySelectorAll(".content li")
console.log("Title_li,Content_li",Title_li,Content_li);
Title_li.forEach(function(a,b){
console.log("aaaa",a);
a.onclick = function(){
Title_li.forEach(function(k,j){
k.classList.remove("show_title")
Content_li[j].classList.remove("show_content")
})
a.classList.add("show_title")
Content_li[b].classList.add("show_content")
}
})
}
CreateTitle();
CreateContent();
clickTabs();
</script>
</html>

View File

@@ -0,0 +1,24 @@
<!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,html{
height: 100%;
}
</style>
</head>
<body></body>
<script>
var index = 0;
var body = document.querySelector("body")
body.onclick = function(event){
var X = event.x,
Y = event.y;
}
</script>
</html>

View File

@@ -0,0 +1,135 @@
<!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>旋转地球</title>
<style>
body{ height:768px; overflow:hidden; background-color:#000}
#sun{ width:2000px; height:2000px; background-image:url(images/dc4.png); background-size:100% 100%; position:absolute; right:-1400px; top:-1000px;
border-radius:1000px;
box-shadow:0 0 200px #F30,
0 0 20px #F00,
0 0 10px #FF0,
0 0 200px #F30;
animation-name:bbb;
animation-duration:360s;
animation-iteration-count:infinite;
animation-timing-function:linear}
#box{
width:400px;
height:400px;
position:absolute;
top:300px;
left:300px;
border-radius:200px;
/*transform-style:preserve-3d;
transform:rotateX(70deg);*/
transform:rotate(-15deg);
overflow:hidden;
box-shadow:0 0 30px #00F,
0 0 30px #00F;
}
#shadow{
width:400px;
height:400px;
border-radius:200px;
position:absolute;
z-index:999;
box-shadow:0px 0 80px black inset,
60px 0 60px black inset;
}
#img{
width:2400px;
height:400px;
position:absolute;
left:-800px;
background-image:url(images/mapa.jpg);
border-radius:200px;
animation-name:aaa;
animation-duration:10s;
animation-iteration-count:infinite;
animation-timing-function:linear
}
#div1{
width:400px;
height:400px;
border-radius:200px;
position:absolute;
background:-webkit-gradient(radial,330 200,10,330 200,80,from(#FFF),to(blue));
opacity:0.3;
/*transform-style:preserve-3d;
transform:translateX(400px);*/
/*animation-name:aaa;
animation-duration:5s;
animation-iteration-count:infinite;
animation-timing-function:linear;*/
}
@keyframes ccc{
0%{
background-position:-80px 0px;
}
50%{
background-position:0px -80px;
}
100%{
background-position:-80px 0px;
}
}
@keyframes bbb{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframes aaa{
0%{
left:-2000px;
}
100%{
left:-800px;
}
}
</style>
<script>
window.onload=function()
{
/*
var oDiv = document.getElementById("div1");
for(var i = 0;i<=180;i++)
{
var aImg = document.createElement("img");
aImg.src="cir.svg";
aImg.style.transformStyle="preserve-3d";
aImg.style.position="absolute";
aImg.style.transform="rotateX("+i+"deg)";
oDiv.appendChild(aImg);
}
*/
}
</script>
</head>
<body>
<div id="sun"></div>
<div id="box">
<div id="shadow"></div>
<div id="img"></div>
<div id="div1">
</div>
</div>
<div></div>
</body>
</html>

View File

@@ -0,0 +1,358 @@
<!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>饿了么</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_17yqrqf00bk.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/elema.css">
</head>
<body>
<div class="header">
<div class="location">
<i class="iconfont icon-weizhi"></i>
<span>政务环路合肥市行政服务中心</span>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="search">
<i class="iconfont icon-sousuo"></i>
<span>搜索饿了么商家、商品名称</span>
</div>
</div>
<div class="content">
<ul class="menu">
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
</ul>
<div class="activity padd">
<div class="activity_text">
<h3>品质套餐</h3>
<div class="des">搭配齐全吃得好</div>
<div class="buy">立即抢购 ></div>
</div>
<img class="activity_img" src="../img/cai.png" />
</div>
<div class="shop_list">
<div class="title">推荐商家</div>
<ul class="condition">
<li>
综合排序
<i class="iconfont icon-zhankai"></i>
</li>
<li>
综合排序
</li>
<li>
综合排序
</li>
<li>
综合
<i class="iconfont icon-zhankai"></i>
</li>
</ul>
<ul class="list padd">
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元,满26元减2元,满36元减4元,满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<ul class="footer">
<li>
<i class="iconfont icon-shuaxin"></i>
<span>首页</span>
</li>
<li class="active">
<i class="iconfont icon-shuaxin"></i>
<span>首页</span>
</li>
<li>
<i class="iconfont icon-shuaxin"></i>
<span>首页</span>
</li>
<li>
<i class="iconfont icon-shuaxin"></i>
<span>首页</span>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,13 @@
<!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>game</title>
<link rel="stylesheet" href="../js/game.js">
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,58 @@
<!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>demo1</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_w3yt2wymib.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">
<i class="iconfont icon-fanhui"></i>
<span class="header_c">收入详情</span>
<span></span>
</div>
<div class="center">
<div class="center_q">
<span></span>
<span class="center_a">+¥399.00</span>
<span></span>
</div>
<ul>
<li>
<span class="center_b">流水号</span>
<span class="center_c">20181125015755</span>
</li>
<li>
<span class="center_b">付款类型</span>
<span class="center_c">充值</span>
</li>
<li>
<span class="center_b">收支类型</span>
<span class="center_c">充值</span>
</li>
<li>
<span class="center_b">支付方式</span>
<span class="center_c">微信钱包</span>
</li>
<li>
<span class="center_b">创建时间</span>
<span class="center_c">2018-11-25 21:03:03</span>
</li>
<li>
<span class="center_b">备注</span>
<span class="center_c">微信充值399.00元</span>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,37 @@
<!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>demo2</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_w3yt2wymib.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index2.css">
</head>
<body>
<div class="header">
<i class="iconfont icon-fanhui"></i>
</div>
<div class="center">
<p>
登录
</p>
<ul>
<input type="text" placeholder="请输入账号">
<input type="text" placeholder="请输入密码">
</ul>
<button>登录</button>
<div class="header_a">
<span>忘记密码?</span>
<div>
<span>没有账号?</span>
<a href="">立即注册</a>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,28 @@
<!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>demo3</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index3.css">
</head>
<body>
<div class="header">
<span class="header_a">取消</span>
<span class="header_b">设置备注和标签</span>
<button>确定</button>
</div>
<div class="center">
<p class="center_b">输入标签</p>
<div class="center_a">
<p class="center_c">所有标签</p>
<button>同事</button>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,139 @@
<!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>demo4</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_w3yt2wymib.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index4.css">
</head>
<body>
<div class="header">
<i class="iconfont icon-fanhui"></i>
<span>全部粉丝(200)</span>
<span></span>
</div>
<div class="conter">
<ul>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
</ul>
</div>
</body>
</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>demo5</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_w3yt2wymib.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index5.css">
</head>
<body>
<div class="header">
<i class="iconfont icon-fanhui"></i>
<span>拼团</span>
<span></span>
</div>
<div class="center">
<img src="../img/suo.png" alt="">
<div class="center_a">
<img src="../img/gantan.png" alt="">
<span>抱歉,该功能暂未开通!</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,57 @@
<!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>rich and strong</title>
<style>
body,
html {
height: 100%;
}
</style>
</head>
<body>
</body>
<script>
var index = 0;
var body = document.querySelector("body")
body.onclick = function (event) {
// console.log(event)
var x = event.x;
var Y = event.y;
var Text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
index > 11 ? index = 0 : '';
// console.log(Text[index])
var span = document.createElement("span");
span.innerText = Text[index];
span.style = `
position: fixed;
left: ${x}px;
top: ${Y}px;
transition: all ease 1s;
opacity: 1;
color: hsla(${parseInt(Math.random() * 360)},100%,50%);`;
body.appendChild(span)
console.log(span)
animation(span,Y);
index++
}
function animation(a,y) {
setTimeout(function (){
a.style.opacity = 0
a.style.top = `${y-100}px`
},100)
setTimeout(function (){
body.removeChild(a)
},1100)
}
</script>
</html>

View File

@@ -0,0 +1,41 @@
<!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>搜索</title>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul></ul>
</body>
<script>
var JyList = ['天天学习', '努力学习', '天天蹦迪', '天天吃屎', '努力向上'];
var ul = document.querySelector("ul")
var input = document.querySelector("input");
input.oninput = function () {
// console.log(input)
if (input.value.trim().length > 0) {
var newList = [];
JyList.forEach(function (v, i) {
if (v.indexOf(input.value) > -1) {
var start = v.indexOf(input.value);
var length = input.value.length;
var newStr = `<span style="color:red">${v.substr(start, length)}</span>`;
newList.push(v.replace(input.value, newStr))
}
});
ul.innerHTML = ""
newList.forEach(function (v) {
ul.innerHTML += `<li>${v}</li>`
})
} else {
ul.innerHTML = ""
}
}
</script>
</html>

View File

@@ -0,0 +1,85 @@
<!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>tabs切换</title>
<style>
html,
body,
div,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
margin: 0;
padding: 0;
list-style: none;
}
.title {
height: 45px;
display: flex;
align-items: center;
justify-content: space-around;
}
.show_title{
color: red;
}
.content li{
display: none;
}
.show_content{
display: inline-block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="title">
<li class="show_title">推荐</li>
<li>游戏</li>
<li>热点</li>
</ul>
<ul class="content">
<li class="show_content">推荐的内容</li>
<li>游戏的内容</li>
<li>热点的内容</li>
</ul>
</div>
</body>
<script>
var title = document.querySelectorAll(".title li")
var content = document.querySelectorAll(".content li")
title.forEach(function (vao,index) {
// console.log(vao)
vao.onclick = function () {
// console.log(vao)
title.forEach(function (asd,bb) {
asd.classList.remove("show_title")
content[bb].classList.remove("show_content")
})
vao.classList.add("show_title");
content[index].classList.add("show_content")
}
})
</script>
</html>

View File

@@ -0,0 +1,149 @@
<!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>tabs切换</title>
<style>
html,
body,
div,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
margin: 0;
padding: 0;
list-style: none;
}
.title {
height: 45px;
display: flex;
align-items: center;
justify-content: space-around;
}
.show_title{
color: red;
}
.content li{
display: none;
}
.show_content{
display: inline-block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="title">
</ul>
<ul class="content">
</ul>
</div>
</body>
<script>
var title = document.querySelector(".title");
var content = document.querySelector(".content");
var tabs = [
{
title: '推荐',
list: [
{
title : '推荐的内容1',
time: '2021-03-05'
},
{
title : '推荐的内容2',
time: '2021-03-05'
}
]
},
{
title: '游戏',
list: [
{
title : '游戏的内容1',
time: '2021-03-05'
},
{
title : '游戏的内容2',
time: '2021-03-05'
}
]
},
{
title: '热点',
list: [
{
title : '热点的内容1',
time: '2021-03-05'
},
{
title : '热点的内容2',
time: '2021-03-05'
}
]
}
];
// function RenderTitle () {
// tabs.forEach(function (v,i){
// title.innerHTML += `<li class="${ i == 0 ? 'show_title' : ''}">${v.title}</li>`
// })
// }
// function RenderContent () {
// tabs.forEach(function (v,i){
// content.innerHTML += `<li class="${ i == 0 ? 'show_content' : ''}">${
// (
// v.list.map(function (item) {
// return `<p>${item.title}</p>`
// }).toString().replace(/,/g, "")
// )
// }</li>`
// })
// }
// function changeTabs() {
// var title = document.querySelectorAll(".title li")
// console.log("title",title);
// var content = document.querySelectorAll(".content li")
// title.forEach(function (vao,index) {
// // console.log(vao)
// vao.onclick = function () {
// // console.log(vao)
// title.forEach(function (asd,bb) {
// asd.classList.remove("show_title")
// content[bb].classList.remove("show_content")
// })
// vao.classList.add("show_title");
// content[index].classList.add("show_content")
// }
// })
// }
// RenderTitle();
// RenderContent();
// changeTabs()
</script>
</html>

View File

@@ -0,0 +1,37 @@
<!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>弹窗</title>
<style>
.none{
width: 200px;
}
</style>
</head>
<body>
<button>登录</button>
<!-- <button onclick="baba()">登录</button> -->
</body>
<script>
var button = document.querySelector("button")
console.log(button);
// function baba(){
// alert(123)
// }
button.onclick = function () {
// console.log(button.className);
button.classList.toggle("none")
// alert('123465')
}
// button.addEventListener('click',function(){
// alert('123456')
// })
// button.addEventListener('click',function(){
// alert('1999996')
// })
</script>
</html>

View File

@@ -0,0 +1,2 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

View File

@@ -0,0 +1,9 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}

View File

@@ -0,0 +1,99 @@
.header{
height: 81px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
.header_a{
height: 44px;
background: #d43d3d;
display: flex;
justify-content: space-between;
padding: 11px 24px;
box-sizing: border-box;
}
.kong img{
width: 28px;
height: 25px;
}
.header_b img{
width: 84px;
height: 22px;
margin-right: -2px;
}
.header_b i{
color: #fff;
font-size: 20px;
}
.header_b{
display: flex;
align-items: center;
}
.header_a .sousuo{
width: 24px;
height: 24px;
}
.header_c{
height: 36px;
background: #f4f5f6;
display: flex;
overflow: hidden;
}
.header_c .header_d{
flex-grow: 3;
display: flex;
align-items: center;
justify-content: space-between;
overflow-x: scroll;
padding-left: 15px;
}
.header_d li{
flex-shrink: 0;
padding-right: 10px;
font-size: 17px;
}
.header_c i{
width: 45px;
height: 40px;
text-align: center;
line-height: 37px;
font-size: 22px;
color: #f85959;
box-shadow: -1px 1px 7px #d2d2d2;
}
.header_d li:nth-child(5){
color: #f85959
}
.content{
margin-top: 81px;
}
.content_a{
padding-bottom: 16px;
}
.content_b{
display: flex;
justify-content: space-between;
}
.content_a li{
margin: 0 15px;
border-bottom: 1px solid #f4f4f4;
padding-bottom: 10px;
padding-top: 15px;
}
.content_a img{
width: 114px;
height: 64px;
}
.content_a h3{
font-size: 17px;
font-weight: 400;
margin-bottom: 6px;
}
.content_a p{
font-size: 12px;
color: #999;
zoom: 0.8;
}

View File

@@ -0,0 +1,94 @@
<!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>今日头条</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_daptp7zb3p9.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="header">
<div class="header_a">
<div class="kong">
<img src="./youxiang.png" alt="">
<div></div>
</div>
<div class="header_b">
<img src="./jinritoutiao.png" alt="">
<i class="iconfont icon-shuaxin"></i>
</div>
<img class="sousuo" src="./sousuo.png" alt="">
</div>
<div class="header_c">
<p>11111111111111</p>
<ul class="header_d">
<li>推荐</li>
<li>视频</li>
<li>热点</li>
<li>社会</li>
<li>娱乐</li>
<li>军事</li>
<li>科技</li>
<li>汽车</li>
</ul>
<i class="iconfont icon-jiahao"></i>
</div>
</div>
<div class="content">
<ul class="content_a">
<li class="content_b">
<div class="content_c">
<h3>降央卓玛演唱《国家》,美女反串唱男声,歌声让人陶醉</h3>
<p>国剧盛典&nbsp;评论&nbsp;10086</p>
</div>
<img src="./meinv.png" alt="">
</li>
<li class="cont">
<h3>降央卓玛演唱《国家》,美女反串唱男声,歌声让人陶醉</h3>
<p>国剧盛典&nbsp;评论&nbsp;10086</p>
</li>
<li class="content_b">
<div class="content_c">
<h3>降央卓玛演唱《国家》,美女反串唱男声,歌声让人陶醉</h3>
<p>国剧盛典&nbsp;评论&nbsp;10086</p>
</div>
<img src="./meinv.png" alt="">
</li>
<li class="cont">
<h3>降央卓玛演唱《国家》,美女反串唱男声,歌声让人陶醉</h3>
<p>国剧盛典&nbsp;评论&nbsp;10086</p>
</li>
<li class="content_b">
<div class="content_c">
<h3>降央卓玛演唱《国家》,美女反串唱男声,歌声让人陶醉</h3>
<p>国剧盛典&nbsp;评论&nbsp;10086</p>
</div>
<img src="./meinv.png" alt="">
</li>
<li class="cont">
<h3>降央卓玛演唱《国家》,美女反串唱男声,歌声让人陶醉</h3>
<p>国剧盛典&nbsp;评论&nbsp;10086</p>
</li>
<li class="content_b">
<div class="content_c">
<h3>降央卓玛演唱《国家》,美女反串唱男声,歌声让人陶醉</h3>
<p>国剧盛典&nbsp;评论&nbsp;10086</p>
</div>
<img src="./meinv.png" alt="">
</li>
</ul>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 918 B

View File

@@ -0,0 +1,10 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}

View File

@@ -0,0 +1,127 @@
.iconfont{
margin-right: 4px;
font-size: 20px;
line-height: 20px;
vertical-align: -1px;
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.header{
height: 40px;
color: #b0b0b0;
background: #333;
line-height: 40px;
}
.herdd li,
.herdc li,
.content li{
display: inline-block;
}
.header a{
color:#b0b0b0;
}
.header .herdd li a::after,
.herdc li:nth-child(-n+3) a::after{
content: "";
width: 1.6px;
height: 16px;
background: #424242;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 7px;
}
.header .herdd li a,
.header .herdc li:nth-child(-n+3) a
{
position: relative;
margin-right: 10px;
}
.header .herdd li:last-child a::after,
.herdc li:nth-child(3) a::after{
content: ;
position: static;
}
.herdc li:last-child{
width: 120px;
height: 40px;
color: #b0b0b0;
background: #424242;
text-align: center;
position: relative;
}
.herdc li:last-child .aaa{
width: 316px;
height: 0;
color: #424242;
box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
background: #fff;
position: absolute;
right: 0;
line-height: 100px;
font-size: 12px;
transition: height .3s;
}
.herdc li:last-child:hover span {
display: block;
}
.herdc li:last-child:hover .aaa {
height: 100px;
}
.herdc li:last-child span{
display: none;
transition: all 1s ease 3s;
}
.search {
margin-top: 25px;
overflow: hidden;
}
.search .logo {
width: 55px;
height: 55px;
background: #ff6700 url("../img/mi-logo.png");
background-position: center;
}
.search ul {
margin-left: 187px;
height: 55px;
line-height: 55px;
}
.search ul li {
float: left;
padding: 0 10px;
}
.search ul li a{
color: #333;
}
.search .bbb {
width: 296px;
height: 50px;
border: 1px solid #e0e0e0;
}
.search .bbb input{
width: 245px;
height: 48px;
border: none;
outline: none;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
border-right: 1px solid #e0e0e0;
}
.search .ccc {
width: 51px;
height: 48px;
text-align: center;
line-height: 48px;
}
.search .ccc:hover {
background: #ff6700;
}
.search .ccc:hover i {
color: #fff;
}

View File

@@ -0,0 +1,14 @@
.float_left {
float: left;
}
.float_right {
float: right;
}
.header_a{
width: 1323px;
margin: 0 auto;
}
.content{
margin: 25px;
}

View File

@@ -0,0 +1,132 @@
<!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>css练习</title>
<style>
a {
font-size: 100px;
font-style: italic;
font-weight: 900;
font-family: cursive;
color: brown;
background: burlywood;
}
.lll{
font-size: 15px;
font-style: italic;
font-weight: 900;
font-family: cursive;
color: brown;
background: burlywood;
height: 120px;
width: 1100px;
line-height: 2;
}
.ppp{
text-indent: 50px;
}
button{
outline: none;
}
.qwe {
font-size: 50px;
letter-spacing: 13px;
text-shadow: #9e9e9e 19px 32px 2px;
color:red;
font-family: "FontName";
}
.dfg {
border-left: 10px solid yellow;
border-right: 10px solid #ff000000;
border-top: 10px solid #0000ff00;
border-bottom: 10px solid #00800000;
width: 0px;
height: 0px;
width: 0;
height: 0;}
ul li {
color: #9e9e9e;
}
a {
text-decoration: none;
}
body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
@font-face {
font-family: "FontName";
src: url('tp.ttf') format('truetype');}
</style>
</head>
<body>
<a href="">那最帅的哥哥</a>
<p class="lll">周星驰得知吴孟达去世消息后,发声悼念,称“刚刚已经得知这个消息,虽然这段时间一直在关注吴孟达的病情,多少会有一些心理准备,但还是非常难过悲痛,不舍得。吴孟达的病情来得快,走得急。他是我那么多年的搭档和老友,现时我还无法接受。”
相关报道:
吴孟达患肝癌去世,希望他来世还能和周星驰一起拍电影
在喜剧电影史上,周星驰和吴孟达绝对是不可替代的黄金组合。
可惜,因为种种原因,两个人已经十八年没有再合作过。
之前,有人问吴孟达何时能再看到两人合作。
吴孟达说:“只要我没死,他没有退休,就有机会合作。”
可惜,现如今,随着吴孟达的突然离世,这一切永远不能再实现。
</p>
<p class="ppp">
在真实生活中,达叔也从不敷衍。他生前留下的最后一条微博写着“我是中国人”,令无数网友集体致敬。透过这短短五个字,人们读懂了他对国家朴素而自然的爱。
达叔是中国人,他对祖国的热爱,代表了香港同胞的主流价值观。观众缅怀和尊重达叔,不仅因为他演技精湛,更重要的是他有一颗干净、滚烫的爱国之心,正如有网友所称:“艺术无国界,艺术家有祖国。”
然而,就是这种最纯粹的爱国情感,居然也能戳中香港一些宵小之徒的痛处。吴孟达辞世后,个别人在香港社交媒体上竟无耻地恶语相向,泼脏水、贴标签,无所不用其极。此番操弄,再次暴露出他们逢中必反到了缺乏人性、没有底线的地步,对爱国者的仇视到了丧心病狂的地步。
</p>
<div class="qwe">
莫斯利安
</div>
<button>开始游戏</button>
<div class="asd"></div>
<ul>
<li>qwrwer</li>
<li>qwfdga</li>
<li>gfdbgf</li>
<li>gzbarh</li>
<li>bdds</li>
<li>bxthth</li>
<li>sdbyjns</li>
<li>xbths</li>
</ul>
<div class="dfg"></div>
<div class="zzz">
<div class="xxx">
<input type="text">
<i></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,129 @@
<!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>小米商城</title>
<link rel="stylesheet" href="http:////at.alicdn.com/t/font_2390935_zum8uoyn2e.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_a">
<ul class="herdd float_left">
<li>
<a href="" target="_blank">小米商城</a>
</li>
<li>
<a href="" target="_blank">MIUI</a>
</li>
<li>
<a href="" target="_blank">IOT</a>
</li>
<li>
<a href="" target="_blank">云服务</a>
</li>
<li>
<a href="" target="_blank">天星数科</a>
</li>
<li>
<a href="" target="_blank">有品</a>
</li>
<li>
<a href="" target="_blank">小爱开放平台</a>
</li>
<li>
<a href="" target="_blank">企业团购</a>
</li>
<li>
<a href="" target="_blank">资质证照</a>
</li>
<li>
<a href="" target="_blank">协议规则</a>
</li>
<li>
<a href="" target="_blank">下载APP</a>
</li>
<li>
<a href="" target="_blank">智能生活</a>
</li>
<li>
<a href="" target="_blank">Select Location</a>
</li>
</ul>
<ul class="herdc float_right">
<li>
<a href="">登录</a>
</li>
<li>
<a href="">注册</a>
</li>
<li>
<a href="">消息通知</a>
</li>
<li>
<a href="">
<i class="iconfont icon-gouwuche"></i>
购物车
</a>
<div class="aaa">
<span>
购物车中还没有商品,赶紧选购吧!
</span>
</div>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="header_a">
<div class="search">
<div class="logo float_left">
</div>
<ul class="asss float_left">
<li>
<a href="">小米手机</a>
</li>
<li>
<a href="">Redmi 红米</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>
<li>
<a href="">社区</a>
</li>
</ul>
<div class="bbb float_right">
<input type="text" class="float_left" placeholder="会讲故事的 儿童牙刷">
<div class="ccc float_left">
<i class="iconfont icon-sousuo"></i>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>

View File

@@ -0,0 +1,125 @@
.menu_type {
display: flex;
flex-wrap: wrap;
}
.header .search i{
font-size: 0.2rem;
}
.menu_type li {
width: 20%;
text-align: center;
}
.menu_type img {
width: 0.5rem;
height: 0.5rem;
}
.menu_type p {
font-size: 0.12rem;
color: #666;
}
.three_meals {
margin-top: 0.25rem;
margin-bottom: 0.3rem;
}
.title{
font-size: 0.16rem;
font-weight: 600;
color: #999;
line-height: 0.22rem;
}
.meals_title{
display: flex;
align-items: flex-end;
height: 0.42rem;
margin-bottom: 0.15rem;
}
.meals_title .active {
color: #333 !important;
font-size: 0.3rem !important;
}
.meals_title .active::after {
content: '';
height: 0.06rem;
border-radius: 0.03rem;
width: 100%;
left: 0px;
bottom: 0.03rem;
background: #ff9d9b;
position: absolute;
z-index: 50;
display: block;
}
.meals_title li{
position: relative;
font-size: .16rem;
color: #666;
margin-right: 0.2rem;
}
.three_meals_item {
width: 1.65rem;
}
.three_meals_item img{
width: 1.65rem;
height: 2.23rem;
border-radius: 0.07rem;
}
.recommend {
margin-bottom: 15px;
}
.recommend_title {
font-size: 25px;
font-weight: 600;
color: #333;
line-height: 36px;
margin-bottom: 20px;
}
.recommend_list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.recommend_list li {
width: 30%;
box-shadow: 0px 0px 0.12rem rgb(0 0 0 / 10%);
background: #fff;
border-radius: 0.23rem;
margin-bottom: 0.22rem;
}
.recommend_active {
background: #fe9b95 !important;
box-shadow: 0px 0px 0.12rem rgba(255,155,149,0.5) !important;
}
.recommend_active a span{
color: #fff !important;
}
.recommend_list li a {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.recommend_list li img {
width: 0.19rem;
height: 0.19rem;
margin-right: 0.04rem;
}
.recommend_list li span {
font-size: 0.13rem;
color: #333;
line-height: 0.46rem;
display: inline-block;
vertical-align: top;
font-weight: 600;
}
.djdzz_list {
display: none;
overflow: hidden;
}
.djdzz_father .active {
display: block !important;
}

View File

@@ -0,0 +1,42 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
height: 0.45rem;
background: #fff;
padding: 0 0.16rem;
align-items: center;
justify-content: space-between;
display: flex;
z-index: 9999;
border-bottom: 0.01rem solid #f5f5f5;
}
.header a{
text-decoration: none;
font-size: 0.15rem;
width: 0.5rem;
background: #ff4c39;
text-align: center;
height: 0.3rem;
border-radius: 0.03rem;
color: #fff;
line-height: 2;
}
.header input{
background: #eee;
border: 0;
width: 60%;
height: 0.29rem;
padding-left: 0.19rem;
}
.header p{
color: #fff;
background: #ff4c39;
font-size: 0.16rem;
width: 0.5rem;
height: 0.3rem;
border-radius: 0.03rem;
text-align: center;
line-height: 0.29rem;
}

View File

@@ -0,0 +1,65 @@
.type {
height: calc(100vh - 79.47px);
display: flex;
}
.content {
padding-bottom: 0 !important;
}
.type_left {
width: 80px;
background: #f5f5f5;
overflow-y: scroll;
}
.type_left .active {
background: #fff;
}
.type_left li {
font-size: 14px;
height: 70px;
padding: 10px 0px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.type_left li .icon {
width: 25px;
height: 25px;
background: url("https://s1.st.meishij.net/p2/20191108/20191108113258_481.png");
background-size: 25px 500px;
}
.type_left li span {
color: #333;
font-size: 12px;
}
.type_right {
width: calc(100% - 80px);
overflow-y: scroll;
}
.type_right .li {
float: left;
width: 33%;
text-align: center;
padding: 0px 10px 16px;
box-sizing: border-box;
}
.type_right .right_contet {
overflow: hidden;
display: none;
}
.type_right .active {
display: block !important;
}
.type_right .li img {
width: 62px;
height: 62px;
}
.type_right .li p {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
color: #333;
}

View File

@@ -0,0 +1,92 @@
.header{position: fixed;
width: 100%;
left: 0;
top: 0;
right: 0;
z-index: 9999;
padding: 0 0.16rem;
box-sizing: border-box;
background: #fff;
height: 45px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f5f5f5;}
.header .back a{font-size: .15rem;
color: #333;}
.back a i{font-weight: 600;}
.header p{font-size: .18rem;
color: #000;
font-weight: 600;}
.header .icon-icon_sousuoxian{font-size: 0.25rem;}
.content{padding-top: 0.44rem;
padding-left: .16rem;
padding-right: .16rem;
box-sizing: border-box;}
.content li{float: left;
margin-top: .16rem;
width: 1.66rem;
box-shadow: 0 0.03rem 0.06rem rgb(0 0 0 / 10%);
border-radius: .07rem;}
.content .content_p{width: 1.66rem;
height: 2.22rem;
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: .07rem;}
.content .content_p .content_y{
width: 0.2rem;
height: 0.2rem;
position: absolute;
top: .05rem;
right: .1rem;
text-align: center;
line-height: 0.2rem;
background: #00000085;
border-radius: 100%;
}
.content_y i{
font-size: .12rem;
color: #fff;
position: absolute;
top: 0;
left: .05rem;
}
.content p{
margin: .1rem .1rem 0 .1rem;
font-size: 16px;
color: #333;
font-weight: 600;
}
.content_pa{
margin: 0.2rem .1rem 0 .1rem;
padding-bottom: .1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.content_pa .left,
.right{display: flex;
align-items: center;}
.content_pa .left img{
width: .18rem;
height: .18rem;
border-radius: 100%;
}
.content_pa .left span{
font-size: .09rem;
color: #666;
margin-left: 1px;
}
.content_pa .right i{
font-size: .14rem;
color: #000;
}
.content_pa .right span{
font-size: .09rem;
color: #666;
}
.content li:nth-child(2n) {
margin-left: .1rem;}

View File

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

View File

@@ -0,0 +1,165 @@
.header {
position: fixed;
width: 100%;
left: 0;
top: 0;
right: 0;
z-index: 9999;
padding: 0.16rem;
box-sizing: border-box;
background: #fff;
}
.padd_16 {
padding: 0 0.16rem;
}
.header {
position: fixed;
width: 100%;
left: 0;
top: 0;
right: 0;
z-index: 9999;
padding: 0.16rem;
box-sizing: border-box;
background: #fff;
}
.search {
height: 0.4rem;
display: flex;
align-items: center;
background: #f5f5f5;
border-radius: 4px;
padding-left: 0.2rem;
}
.search i {
color: #999;
}
.search span {
font-size: 0.16rem;
color: #999;
margin-left: 0.08rem;
}
.padd_16 {
padding: 0 0.16rem;
}
.content {
padding-top: 0.72rem;
padding-bottom: 51px;
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 51px;
display: flex;
justify-content: space-around;
align-items: center;
background: #fff;
z-index: 9999;
border-top: 1px solid #eaeaea;
}
.footer .jihuo {
color: #f15a4f;
}
.footer li a {
text-align: center;
}
.footer li img {
width: 30px;
height: 30px;
}
.footer li p {
font-size: 10px;
color: #666666;
}
.three_meals_list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.djdzz_list .djdzz_item:nth-child(2n) {
margin-right: 0 !important;
}
.djdzz_item {
box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
border-bottom-left-radius: 0.07rem;
border-bottom-right-radius: 0.07rem;
margin-bottom: 14px;
width: 49%;
float: left;
margin-right: 5px;
}
.djdzz_item img {
height: 222px;
width: 100%;
border-top-left-radius: 0.07rem;
border-top-right-radius: 0.07rem;
}
.cons {
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.user {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.user_left img {
width: 18px;
height: 18px;
border-radius: 100%;
vertical-align: bottom;
}
.user_left span {
height: 18px;
font-size: 9px;
color: #666;
padding-left: 5px;
}
.user_right i {
font-size: 10px;
}
.user_right span {
padding-left: 15px;
color: #666;
font-size: 9px;
}
.text{
font-size: 0.18rem;
font-weight: 600;
color: #333;
padding: 0.12rem 0px 0.02rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.yang {
font-size: 8px;
height: 12px;
border-radius: 2px;
color: #fff;
padding: 0px 3px;
font-weight: 600;
background: #ff8d8d;
margin-bottom: 10px;
}
.desc{
background: #fff2f2;
border-radius: 2px;
margin: 5px 0 5px 0px;
padding: 4px 0px 4px 6px;
font-size: 0.11rem;
color: #ff8d8d;
line-height: 0.14rem;
overflow: hidden;
text-overflow: ellipsis;
}

View File

@@ -0,0 +1,59 @@
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.swiper,
.swiper_list {
overflow: hidden;
position: relative;
}
.swiper-wrapper,
.wrapper_list {
display: flex;
}
.swiper-wrapper li,
.wrapper_list li {
flex-shrink: 0;
width: 100%;
}
.swiper-wrapper img,
.wrapper_list img {
width: 100%;
height: 100%;
}
.swiper-button {
position: absolute;
top: 50%;
color: #fff;
font-size: 23px;
padding: 5px 5px;
background: #00000075;
transform: translateY(-50%);
}
.prev {
left: 0;
}
.next {
right: 0;
}
.swiper-pagination,
.pagination {
display: flex;
position: absolute;
left: 50%;
bottom: 16px;
transform: translate(-50%);
}
.swiper-pagination li,
.pagination li {
width: 8px;
height: 8px;
border-radius: 100%;
background: #CCC;
margin-right: 5px;
}
.swiper-pagination .active,
.pagination .active {
background: #007aff !important;
}

View File

@@ -0,0 +1,70 @@
.lb-toast {
padding: 8px 12px;
position: fixed;
left: 50%;
transform: translate(-50%);
background-color: rgba(0, 0, 0, 0.7);
border-radius: 8px;
z-index: 99999;
}
.lb-toast_text {
color: #fff;
font-size: 14px;
line-height: 20px;
}
.spinner {
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.spinner > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 518 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 512 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 912 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 432 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@@ -0,0 +1,28 @@
var config = {
environment: 'dev', // 当前项目所属的开发环境 dev,test,prod
baseUrl () {
switch (config.environment) {
case "dev":
return config.devbasrUrl;
break;
case "test":
return config.testbasrUrl;
break;
case "prod":
return config.prodbasrUrl;
break;
}
},
devbasrUrl: 'http://127.0.0.1:3000/api', // dev 开发阶段
testbasrUrl: 'http://127.0.0.1:3000/test', // test 测试阶段
prodbasrUrl: 'http://127.0.0.1:3000/prod', // prod 正式阶段
apiList: {
index: '/index/class', // 首页获取分类数据接口
banner: '/index/banner', // 获取banner图
type: '/index/type', // 获取banner图下面的九宫格分类数据
threeMeals: '/index/threeMeals', // 每日三餐
video: '/video/list'//菜谱视频大全列表
}
}

View File

@@ -0,0 +1,65 @@
class Api {
constructor() {
this.ajax = new XMLHttpRequest();
this.baseUrl = config.baseUrl();
}
get(option) {
toast.loading();
// 转换get参数
var params = "";
for (const key in option.data) {
params+= `&${key}=${option.data[key]}`
}
params = params.replace("&", "?")
option.url = this.baseUrl+option.url + params;
return new Promise((resolve,reject) => {
this.ajax.open("GET",option.url);
this.ajax.send();
return this.readystatechange(resolve, reject)
});
}
post(option) {
toast.loading();
return new Promise( (resolve,reject) => {
this.ajax.open("POST",this.baseUrl+option.url);
this.ajax.setRequestHeader("Content-Type","application/json");
this.ajax.setRequestHeader("bmy","liubing");
this.ajax.send(option.data);
return this.readystatechange(resolve, reject)
});
}
readystatechange(success,error) {
this.ajax.onreadystatechange = () => {
if (this.ajax.readyState == 4 ) {
if (this.ajax.status == 200) {
var data = JSON.parse(this.ajax.response);
toast.clearLoading();
switch (data.status) {
case 200:
success(data.result);
break;
case 500:
toast.tips({ message: data.message });
throw new Error(data.message);
break;
}
} else {
error && error(this.ajax)
throw new Error("网络请求出错");
}
}
}
}
}
var api = new Api();

View File

@@ -0,0 +1,241 @@
class Index {
constructor() {
this.currentIndex = 0;
this.allUserDo = [
{ type: 1, title: '推荐', page: 1, content: [] },
{ type: 2, title: '时令', page: 1, content: [] },
{ type: 3, title: '食肉', page: 1, content: [] },
{ type: 4, title: '素食', page: 1, content: [] },
{ type: 5, title: '烘焙', page: 1, content: [] }
];
this.getBanner();
this.getType();
this.getthreeMeals();
this.getIndexClass();
}
getIndexClass() {
// 渲染大家都在做的标题和内容
this.allUserDo.forEach((v,i) => {
$(".userdo").innerHTML += `
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
`;
$(".djdzz_father").innerHTML += `
<div class="djdzz_list three_meals_list ${i == 0 ? 'active' : ''}">
</div>
`;
});
var a = $(".userdo li"),
b = $(".djdzz_father .djdzz_list");
$("body").onscroll = () => {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
Array.from(b).filter((v,i)=>{
if (v.className.indexOf("active") > -1) {
this.currentIndex = i;
}
});
this.allUserDo[this.currentIndex].page+=1;
this.getdata("scroll");
console.log(this.currentIndex)
}
}
// tabs 切换
a.forEach((v, i) => {
v.onclick = async () => {
this.currentIndex = i;
a.forEach((item,index) => {
item.className = "";
b[index].classList.remove("active")
});
b[i].classList.add("active")
v.className = "active";
await this.getdata();
}
});
this.getdata();
}
/**
* 获取首页的分类数据
* @returns {Promise<void>}
*/
async getdata(type = "click") {
if (this.allUserDo[this.currentIndex].content.length == 0 || type == "scroll") {
var res = await indexService.indexClass({
type: this.allUserDo[this.currentIndex].type,
page: this.allUserDo[this.currentIndex].page
});
this.allUserDo[this.currentIndex].content = [
...this.allUserDo[this.currentIndex].content,
...res.items
]
var currentF = $(".djdzz_father .djdzz_list")[this.currentIndex]
// 把数据插入到对应的 djdzz_list 中
var a = this.allUserDo[this.currentIndex].content;
currentF.innerHTML = "";
a.forEach((item,i) => {
currentF.innerHTML += `
<div class="djdzz_item">
${
Array.isArray(item.img)
? `<img src="${item.img[0]}" alt="">`
: `<img src="${item.img}" alt="">`
}
<div class="cons">
<div class="text">${item.title}</div>
${
typeof item.label == "string" || item.label == null
? ''
: `<span class="yang">养</span>
<div class="desc">${item.label.desc}</div>`
}
${
Array.isArray(item.author) ? '' : `<div class="user">
<div class="user_left">
<img src="${item.author.avatar_url}" alt="">
<span>${item.author.nickname}</span>
</div>
<div class="user_right">
<i class="iconfont iconyanjing"></i>
<span>${item.viewed_amount}</span>
</div>
</div>`
}
</div>
</div>
`
})
}
}
/**
* banner下面的九宫格数据
* @returns {Promise<void>}
*/
async getType() {
var res = await indexService.type();
res.forEach((v,i) => {
$(".menu_type").innerHTML += `
<li>
<a href="flist.html?id=${v.href}">
<img src="${v.img}" alt="">
<p>${v.title}</p>
</a>
</li>
`
})
}
/**
* 每日三餐
* @returns {Promise<void>}
*/
async getthreeMeals() {
let res = await indexService.threeMeals();
// 渲染 每日三餐 标题
res.forEach((v,i) => {
$(".meals_title").innerHTML += `
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
`
});
res.forEach((v,i) => {
$(".wrapper_list").innerHTML+=`
<li class="three_meals_list">
${
(v.content.map((item, index) => {
return `<div class="three_meals_item">
<img src="${item.img}" alt="">
<div class="text">${item.title}</div>
<span class="yang">养</span>
<div class="desc">${item.des}</div>
</div>`
})).toString().replace(/,/g,"")
}
</li>
`;
});
var titleLi = $(".three_title li");
var threeSwiper = new Swiper(".swiper_list",{
time: 1000,
initialSlide: 0,
loop: false,
speed: 300,
autoplay: false,
grabCursor: true,
swiperWrapper: '.wrapper_list',
pagination: {
el: '.pagination'
},
on: {
slideChange: function (index) {
titleLi.forEach(v => v.className = "");
titleLi[index].className = "active"
}
},
});
titleLi.forEach((v,i) => {
v.onclick = function () {
threeSwiper.slideTo(i)
}
})
}
/**
* 获取banner数据
* @returns {Promise<void>}
*/
async getBanner() {
var res = await indexService.banner();
var bannerFather = $(".swiper-wrapper")
res.forEach((v,i)=>{
bannerFather.innerHTML += `
<li>
<a href="./bannerinfo.html?id=${v.url}">
<img src="${v.img}" alt="">
</a>
</li>
`
});
// 初始banner轮播
new Swiper(".swiper",{
time: 1000,
initialSlide: 0,
loop: false,
speed: 300,
autoplay: false,
grabCursor: true,
});
}
}
new Index();

View File

@@ -0,0 +1,66 @@
class Type {
constructor() {
this.index = 0;
this.typeMenu = [];
this.getLeftMenu();
}
async getLeftMenu() {
var res = await typeService.leftMenu();
res.forEach((v, i) => {
v.page = 1;
v.content = []
$(".type_left").innerHTML += `
<li class="${i == 0 ? 'active' : ''}">
<div class="icon" style="background-position: 0px ${v.position}px"></div>
<span>${v.title}</span>
</li>
`;
$(".type_right").innerHTML += `
<div class="right_contet ${i == 0 ? 'active' : ''}"></div>
`
});
var typeLi = $(".type_left li");
var rightContent = $(".type_right .right_contet");
console.log("rightContent: ", rightContent);
typeLi.forEach((v, i) => {
v.onclick = () => {
typeLi.forEach((t, index) => {
t.className = "";
rightContent[index].classList.remove("active");
});
v.className = "active";
this.index = i;
this.getRightMenu();
rightContent[i].classList.add("active");
}
})
this.typeMenu = res;
this.getRightMenu();
}
async getRightMenu() {
if (this.typeMenu[this.index].content.length == 0) {
var res = await typeService.rightMenu({
url: this.typeMenu[this.index].url
});
this.typeMenu[this.index].content = [
...this.typeMenu[this.index].content,
...res
];
var rContent = $(".type_right .right_contet");
this.typeMenu[this.index].content.forEach((v, i) => {
rContent[this.index].innerHTML += `
<div class="li">
<img src="${v.img}" alt="">
<p>${v.title}</p>
</div>
`
});
}
}
}
new Type();

View File

@@ -0,0 +1,43 @@
class Video {
constructor() {
this.videoMenu()
this.page = 1
}
async videoMenu() {
let res = await videoService.video({
page: this.page
});
res.items.forEach((v, i) => {
$(".content").innerHTML += `
<li>
<a href="">
<div class="content_p"
style="background-image: url(${v.bd_photo});">
<div class="content_y">
<i class="iconfont icon-shipinbofang_Facet"></i>
</div>
</div>
<p>${v.seo_title}</p>
<div class="content_pa">
<div class="left">
<img src="../img/shi.png" alt="">
<span>美食杰</span>
</div>
<div class="right">
<i class="iconfont icon-yanjing"></i>
<span>${v.click_num}</span>
</div>
</div>
</a>
</li>
`
});
}
}
new Video();

View File

@@ -0,0 +1,45 @@
class IndexService {
constructor() {}
/**
* 首页获取分类数据接口
*/
async indexClass(data = {}) {
var api = new Api();
return await api.get({
url: config.apiList.index,
data: data
});
api = null;
}
async banner(data = {}) {
var api = new Api();
return await api.get({
url: config.apiList.banner,
data: data
});
api = null;
}
async type(data = {}) {
var api = new Api();
return await api.get({
url: config.apiList.type,
data: data
});
api = null;
}
async threeMeals(data = {}) {
var api = new Api();
return await api.get({
url: config.apiList.threeMeals,
data: data
});
api = null;
}
}
var indexService = new IndexService();

View File

@@ -0,0 +1,25 @@
class TypeService {
constructor() {}
async leftMenu(data = {}) {
var api = new Api();
return await api.get({
url: config.apiList.leftMenu,
data: data
});
api = null;
}
async rightMenu(data = {}) {
var api = new Api();
return await api.get({
url: config.apiList.rightMenu,
data: data
});
api = null;
}
}
var typeService = new TypeService();

View File

@@ -0,0 +1,13 @@
class VideoService {
constructor() {}
async video(data = {}) {
var api = new Api();
return await api.get({
url: config.apiList.video,
data: data
});
api = null;
}
}
var videoService = new VideoService()

View File

@@ -0,0 +1,29 @@
function $(className) {
var newClassName = className.split(" ");
if (newClassName.length > 1) {
var father = newClassName[newClassName.length - 2];
var childrenList = document.querySelector(father).children;
var arr = Array.from(childrenList).filter(function (el){
if (
el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
||
el.tagName.toLowerCase() == newClassName[newClassName.length-1]
) {
return el;
}
});
if (arr.length > 1) {
return document.querySelectorAll(className)
} else if (arr.length == 1){
return document.querySelector(className)
} else {
throw new Error(`${className} 不存在,请检查`)
}
} else {
return document.querySelector(newClassName);
}
}

View File

@@ -0,0 +1,20 @@
!(function(win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 375) * 100 + 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
//初始化
setFontSize();
}(window, document));

View File

@@ -0,0 +1,308 @@
// 保护
(function () {
// 类的构造函数
function swiper (el,option) {
this.defaultOption = {
el: '.swiper',
width () {
return $(this.el).clientWidth
},
timer: null,
time: 3000,
initialSlide: 0,
direction: 'vertical',
speed: 800,
grabCursor: false,
loop: false,
autoplay: false,
swiperWrapper: '.swiper-wrapper',
on: {
},
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.next',
prevEl: '.prev',
},
// 事件控制中心,主要保存事件的
eventList: {}
}
if (typeof el == "string") {
this.defaultOption.el = el || this.defaultOption.el;
this.defaultOption.time = option.time || this.defaultOption.time;
this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
this.defaultOption.direction = option.direction || this.defaultOption.direction;
this.defaultOption.speed = option.speed || this.defaultOption.speed;
this.defaultOption.grabCursor = option.grabCursor || this.defaultOption.grabCursor;
this.defaultOption.loop = option.loop || this.defaultOption.loop;
this.defaultOption.autoplay = option.autoplay || this.defaultOption.autoplay;
this.defaultOption.swiperWrapper = option.swiperWrapper || this.defaultOption.swiperWrapper;
if (option.hasOwnProperty("pagination")) {
this.defaultOption.pagination.el = option.pagination.el || this.defaultOption.pagination.el;
}
if (option.hasOwnProperty("navigation")) {
this.defaultOption.navigation.nextEl = option.navigation.nextEl || this.defaultOption.navigation.nextEl;
this.defaultOption.navigation.prevEl = option.navigation.prevEl || this.defaultOption.navigation.prevEl;
}
if (option.hasOwnProperty("on")) {
for (const key in option.on) {
this.defaultOption.on[key] = option.on[key]
}
}
this.next = $(this.defaultOption.navigation.nextEl);
this.wrapper = $(this.defaultOption.swiperWrapper);
this.prev = $(this.defaultOption.navigation.prevEl);
this.pagination = $(this.defaultOption.pagination.el);
this.el = $(this.defaultOption.el);
this.init();
} else {
throw new Error("最外层父节点的类名必传")
}
}
// 类的方法
swiper.prototype = {
init () {
this.CreatedPagination();
this.setInitialSlide();
this.setGrabCursor();
if (this.defaultOption.autoplay) {
this.autoPlay();
this.el.onmouseover = () => clearInterval(this.defaultOption.timer);
this.el.onmouseout = () => this.autoPlay();
}
this.nextClick();
this.prevClick();
this.initSwiperSlide();
},
/**
* 注册移动端滑动
*/
initSwiperSlide: function () {
var fa = this.el,
startX = 0,
startY = 0;
fa.addEventListener('touchstart', function (e) {
e.stopPropagation()
startX = e.targetTouches[0].pageX
startY = e.targetTouches[0].pageY
})
var getDirection = function (startx, starty, endx, endy) {
// 获得角度
var getAngle = function(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
// 如果滑动距离太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
}
return result;
}
fa.addEventListener('touchmove', (e) => {
e.stopPropagation()
var endX = e.changedTouches[0].pageX;
var endY = e.changedTouches[0].pageY;
var direction = getDirection(startX, startY, endX, endY);
// if (direction == 3 || direction == 4) {
// var x = parseInt(endX - startX) - 40
// // this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(${x}px,0px,0px)`;
// }
});
fa.addEventListener('touchend', (e) => {
e.stopPropagation()
var endX = e.changedTouches[0].pageX;
var endY = e.changedTouches[0].pageY;
var direction = getDirection(startX, startY, endX, endY);
switch (direction) {
case 0:
console.log("未滑动!");
break;
case 1:
console.log("向上!")
break;
case 2:
console.log("向下!")
break;
case 3:
console.log("向左!")
this.setSpeed();
this.animation(-this.defaultOption.width())
break;
case 4:
console.log("向右滑动");
this.setSpeed();
this.animation(this.defaultOption.width())
break;
default:
}
})
},
setInitialSlide() {
if (this.defaultOption.initialSlide != 0) {
this.changePagination(this.defaultOption.initialSlide)
}
},
setGrabCursor() {
this.defaultOption.grabCursor ? this.wrapper.style.cursor = "pointer" : ""
},
setSpeed() {
this.wrapper.style.transition = `all ease ${this.defaultOption.speed / 1000}s`;
},
nextClick() {
// this 指向
// var test = this;
// 1:保存this
// 2: =>
// 3: a().bind(this)
this.next != null ? this.next.onclick = () => {
this.setSpeed();
this.animation(-this.defaultOption.width())
} : ''
},
prevClick() {
this.prev != null ? this.prev.onclick = () => {
this.setSpeed();
this.animation(this.defaultOption.width())
} : ''
},
slideTo(index) {
this.setSpeed();
this.changePagination(index)
},
on (eventType,event) {
this.defaultOption.eventList[eventType] = event;
},
CreatedPagination() {
if (this.pagination != null) {
Array.from(this.wrapper.children).forEach((v,i) => {
this.pagination.innerHTML += ` <li class="${i == 0 ? 'active' : ''}"></li>`
});
this.BindPaginationClick();
}
},
BindPaginationClick() {
Array.from(this.pagination.children).forEach((v,i) => {
v.onclick = () => {
this.setSpeed();
this.changePagination(i)
}
})
},
changePagination(i) {
this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(i);
this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i);
if (this.pagination != null) {
Array.from(this.pagination.children).forEach((item) => {
item.className = ""
});
Array.from(this.pagination.children)[i].className = "active";
}
this.wrapper.style.transform = `translateX(${i * -this.defaultOption.width()}px)`;
},
animation(offset) {
var val = parseInt(this.wrapper.style.transform.match(/translateX\(([\s\S]*?)\)/)[1]);
var newOffset = offset + val;
var maxWidth = -(this.wrapper.children.length - 1) * this.defaultOption.width();
if (newOffset > 0) {
if (this.defaultOption.loop) {
newOffset = maxWidth;
} else {
newOffset = 0
}
}
if (newOffset < maxWidth) {
if (this.defaultOption.loop) {
newOffset = 0;
} else {
newOffset = maxWidth
}
}
var index = Math.abs(newOffset / this.defaultOption.width());
this.changePagination(index);
this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(index);
this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(index)
},
autoPlay () {
this.defaultOption.timer = setInterval(() => {
this.animation(-this.defaultOption.width())
}, this.defaultOption.time);
}
}
function $(className) {
var newClassName = className.split(" ");
if (newClassName.length > 1) {
var father = newClassName[newClassName.length - 2];
var childrenList = document.querySelector(father).children;
var arr = Array.from(childrenList).filter(function (el){
if (
el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
||
el.tagName.toLowerCase() == newClassName[newClassName.length-1]
) {
return el;
}
});
if (arr.length > 1) {
return document.querySelectorAll(className)
} else if (arr.length == 1){
return document.querySelector(className)
} else {
throw new Error(`${className} 不存在,请检查`)
}
} else {
return document.querySelector(newClassName);
}
}
window.Swiper = swiper;
})()

View File

@@ -0,0 +1,61 @@
class Toast {
constructor() {
this.body = document.querySelector("body");
}
/**
* time: 提示显示时间
* position: 位置 top = 20%, center = 50%, bottom = 20%
* message: 提示的文字
* @param option
*/
tips(option = {}) {
var defaultOption = {
time: 3000,
position: 'center',
message: '默认'
};
defaultOption.time = option.time || defaultOption.time;
defaultOption.position = option.position || defaultOption.position;
defaultOption.message = option.message || defaultOption.message;
var tpl = `<div class="lb-toast" style="${
defaultOption.position == "bottom"
? 'bottom: 10%'
: `top: ${defaultOption.position == "top" ? '10%' : '50%'}`
}">
<div class="lb-toast_text">${defaultOption.message}</div>
</div>`;
this.body.innerHTML += tpl;
setTimeout(() => {
var toast = document.querySelector(".lb-toast");
console.log(toast)
this.body.removeChild(toast)
}, defaultOption.time)
}
loading() {
var tpl = `<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>`;
this.body.innerHTML += tpl;
}
clearLoading() {
var spinner = document.querySelector(".spinner");
if (spinner != null) {
this.body.removeChild(spinner)
}
}
}
var toast = new Toast();

View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,142 @@
<!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>美食</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="../css/tool/clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_e4lfl35goz.css">
<link rel="stylesheet" href="../css/tool/public.css">
<link rel="stylesheet" href="../css/utils/toast.css">
<link rel="stylesheet" href="../css/utils/swiper.css">
<link rel="stylesheet" href="../css/page/index.css">
</head>
<body>
<div class="header">
<div class="search">
<i class="iconfont icon-icon_sousuoxian"></i>
<span>搜索百万免费菜谱</span>
</div>
</div>
<div class="content">
<div class="swiper">
<ul class="swiper-wrapper" style="transform: translateX(0px);">
</ul>
<!-- 如果需要分页器 -->
<ul class="swiper-pagination"></ul>
</div>
<ul class="menu_type">
</ul>
<div class="three_meals padd_16">
<div class="title">每日三餐</div>
<ul class="three_title meals_title">
</ul>
<div class="swiper_list">
<ul class="wrapper_list" style="transform: translateX(0px);">
</ul>
</div>
</div>
<div class="recommend padd_16">
<div class="recommend_title">为你推荐</div>
<ul class="recommend_list">
<li class="recommend_active">
<a href="">
<img src="../img/t_1.png" alt="">
<span>每日优惠</span>
</a>
</li>
<li>
<a href="">
<img src="../img/t_2.png" alt="">
<span>食材大全</span>
</a>
</li>
<li>
<a href="">
<img src="../img/t_3.png" alt="">
<span>热门专题</span>
</a>
</li>
<li>
<a href="">
<img src="../img/t_4.png" alt="">
<span>菜谱分类</span>
</a>
</li>
<li>
<a href="">
<img src="../img/t_5.png" alt="">
<span>本周流行</span>
</a>
</li>
<li>
<a href="">
<img src="../img/t_6.png" alt="">
<span>视频菜谱</span>
</a>
</li>
</ul>
</div>
<div class="djdzz padd_16">
<div class="title">大家都在做</div>
<ul class="userdo meals_title">
</ul>
<div class="djdzz_father">
</div>
</div>
</div>
<ul class="footer">
<li>
<a href="index.html">
<img src="../img/home.png" alt="">
<p class="jihuo">首页</p>
</a>
</li>
<li>
<a href="video.html">
<img src="../img/video.png" alt="">
<p>视频</p>
</a>
</li>
<li>
<a href="type.html">
<img src="../img/type.png" alt="">
<p>分类</p>
</a>
</li>
<li>
<a href="">
<img src="../img/like.png" alt="">
<p>我的</p>
</a>
</li>
</ul>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/utils/swiper.js"></script>
<script src="../js/utils/toast.js"></script>
<script src="../js/http/api.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/page/index.js"></script>
</html>

View File

@@ -0,0 +1,25 @@
<!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>search</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="../css/tool/clear.css">
<link rel="stylesheet" href="../css/tool/public.css">
<link rel="stylesheet" href="../css/page/search.css">
</head>
<body>
<div class="header">
<a href="">
返回
</a>
<input type="text" placeholder="菜谱名、食材名">
<p>搜索</p>
</div>
<div class="content">
<ul></ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="../css/tool/clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2414147_8fm7pcq4hwi.css">
<link rel="stylesheet" href="../css/tool/public.css">
<link rel="stylesheet" href="../css/utils/toast.css">
<link rel="stylesheet" href="../css/page/type.css">
</head>
<body>
<div class="header">
<div class="search">
<i class="iconfont iconsousuo"></i>
<span>搜索百万免费菜谱</span>
</div>
</div>
<div class="content">
<div class="type">
<ul class="type_left">
</ul>
<div class="type_right">
</div>
</div>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/utils/swiper.js"></script>
<script src="../js/utils/toast.js"></script>
<script src="../js/http/api.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/service/typeService.js"></script>
<script src="../js/page/type.js"></script>
</html>

View File

@@ -0,0 +1,37 @@
<!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>video</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="../css/tool/clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_e4lfl35goz.css">
<link rel="stylesheet" href="../css/tool/public.css">
<link rel="stylesheet" href="../css/utils/toast.css">
<link rel="stylesheet" href="../css/page/video.css">
</head>
<body>
<div class="header">
<div class="back">
<a href="">
<i class="iconfont icon-fanhui"></i>
<span>返回</span>
</a>
</div>
<p>菜谱视频大全</p>
<i class="iconfont icon-icon_sousuoxian"></i>
</div>
<ul class="content">
</ul>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/utils/swiper.js"></script>
<script src="../js/utils/toast.js"></script>
<script src="../js/http/api.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/service/videoService.js"></script>
<script src="../js/page/video.js"></script>
</html>

View File

@@ -0,0 +1,44 @@
const app = require("express")();
const httpServer = require("http").createServer(app);
const io = require("socket.io")(httpServer, {});
// 保存在线用户数据
var userOnline = []
io.on("connection", socket => {
console.log("有一个客户端建立了链接");
socket.on("login", (res) => {
console.log(res);
var isHave = userOnline.filter((val,index) => {
return val.username == res.username
});
if (isHave.length > 0) {
socket.emit("UserNameExist");
} else {
userOnline.push(res);
socket.join(res.roomid);
socket.emit("LoginSuccess");
}
});
socket.on("getUserOnline", (id) => {
console.log("房间号:",id)
console.log("UserOnline:",userOnline)
socket.join(id);
// socket.emit("UserOnline", userOnline);
io.in(id).emit("UserOnline", userOnline);
});
socket.on("getMessage", (res) => {
socket.to(res.roomid).emit("sedMessage", res);
});
});
httpServer.listen(3000);

View File

@@ -0,0 +1,646 @@
{
"name": "backend",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"accepts": {
"version": "1.3.7",
"resolved": "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz",
"integrity": "sha1-UxvHJlF6OytB+FACHGzBXqq1B80=",
"requires": {
"mime-types": "~2.1.24",
"negotiator": "0.6.2"
}
},
"after": {
"version": "0.8.2",
"resolved": "https://registry.npm.taobao.org/after/download/after-0.8.2.tgz",
"integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8="
},
"array-flatten": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/array-flatten/download/array-flatten-1.1.1.tgz",
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
},
"arraybuffer.slice": {
"version": "0.0.7",
"resolved": "https://registry.npm.taobao.org/arraybuffer.slice/download/arraybuffer.slice-0.0.7.tgz",
"integrity": "sha1-O7xCdd1YTMGxCAm4nU6LY6aednU="
},
"backo2": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/backo2/download/backo2-1.0.2.tgz",
"integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
},
"base64-arraybuffer": {
"version": "0.1.4",
"resolved": "https://registry.npm.taobao.org/base64-arraybuffer/download/base64-arraybuffer-0.1.4.tgz",
"integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI="
},
"base64id": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/base64id/download/base64id-2.0.0.tgz",
"integrity": "sha1-J3Csa8R9MSr5eov5pjQ0LgzSXLY="
},
"blob": {
"version": "0.0.5",
"resolved": "https://registry.npm.taobao.org/blob/download/blob-0.0.5.tgz",
"integrity": "sha1-1oDu7yX4zZGtUz9bAe7UjmTK9oM="
},
"body-parser": {
"version": "1.19.0",
"resolved": "https://registry.npm.taobao.org/body-parser/download/body-parser-1.19.0.tgz",
"integrity": "sha1-lrJwnlfJxOCab9Zqj9l5hE9p8Io=",
"requires": {
"bytes": "3.1.0",
"content-type": "~1.0.4",
"debug": "2.6.9",
"depd": "~1.1.2",
"http-errors": "1.7.2",
"iconv-lite": "0.4.24",
"on-finished": "~2.3.0",
"qs": "6.7.0",
"raw-body": "2.4.0",
"type-is": "~1.6.17"
}
},
"bytes": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/bytes/download/bytes-3.1.0.tgz",
"integrity": "sha1-9s95M6Ng4FiPqf3oVlHNx/gF0fY="
},
"component-bind": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/component-bind/download/component-bind-1.0.0.tgz",
"integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E="
},
"component-emitter": {
"version": "1.3.0",
"resolved": "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.3.0.tgz",
"integrity": "sha1-FuQHD7qK4ptnnyIVhT7hgasuq8A="
},
"component-inherit": {
"version": "0.0.3",
"resolved": "https://registry.npm.taobao.org/component-inherit/download/component-inherit-0.0.3.tgz",
"integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM="
},
"content-disposition": {
"version": "0.5.3",
"resolved": "https://registry.npm.taobao.org/content-disposition/download/content-disposition-0.5.3.tgz",
"integrity": "sha1-4TDK9+cnkIfFYWwgB9BIVpiYT70=",
"requires": {
"safe-buffer": "5.1.2"
}
},
"content-type": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/content-type/download/content-type-1.0.4.tgz",
"integrity": "sha1-4TjMdeBAxyexlm/l5fjJruJW/js="
},
"cookie": {
"version": "0.4.0",
"resolved": "https://registry.npm.taobao.org/cookie/download/cookie-0.4.0.tgz?cache=0&sync_timestamp=1587525873712&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcookie%2Fdownload%2Fcookie-0.4.0.tgz",
"integrity": "sha1-vrQ35wIrO21JAZ0IhmUwPr6cFLo="
},
"cookie-signature": {
"version": "1.0.6",
"resolved": "https://registry.npm.taobao.org/cookie-signature/download/cookie-signature-1.0.6.tgz",
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
},
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1607566575639&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz",
"integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
"requires": {
"ms": "2.0.0"
}
},
"depd": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
},
"destroy": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/destroy/download/destroy-1.0.4.tgz",
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
"encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/encodeurl/download/encodeurl-1.0.2.tgz",
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
},
"engine.io": {
"version": "3.5.0",
"resolved": "https://registry.npm.taobao.org/engine.io/download/engine.io-3.5.0.tgz",
"integrity": "sha1-nWuYXIo5sf6HzZHrAU3gVSJZghs=",
"requires": {
"accepts": "~1.3.4",
"base64id": "2.0.0",
"cookie": "~0.4.1",
"debug": "~4.1.0",
"engine.io-parser": "~2.2.0",
"ws": "~7.4.2"
},
"dependencies": {
"cookie": {
"version": "0.4.1",
"resolved": "https://registry.npm.taobao.org/cookie/download/cookie-0.4.1.tgz?cache=0&sync_timestamp=1587525873712&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcookie%2Fdownload%2Fcookie-0.4.1.tgz",
"integrity": "sha1-r9cT/ibr0hupXOth+agRblClN9E="
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-4.1.1.tgz?cache=0&sync_timestamp=1607566575639&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.1.1.tgz",
"integrity": "sha1-O3ImAlUQnGtYnO4FDx1RYTlmR5E=",
"requires": {
"ms": "^2.1.1"
}
},
"ms": {
"version": "2.1.3",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.3.tgz?cache=0&sync_timestamp=1607433856838&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.3.tgz",
"integrity": "sha1-V0yBOM4dK1hh8LRFedut1gxmFbI="
}
}
},
"engine.io-client": {
"version": "3.5.1",
"resolved": "https://registry.npm.taobao.org/engine.io-client/download/engine.io-client-3.5.1.tgz",
"integrity": "sha1-tQBFijnAzRl6kh4OdZchp0bQvbk=",
"requires": {
"component-emitter": "~1.3.0",
"component-inherit": "0.0.3",
"debug": "~3.1.0",
"engine.io-parser": "~2.2.0",
"has-cors": "1.1.0",
"indexof": "0.0.1",
"parseqs": "0.0.6",
"parseuri": "0.0.6",
"ws": "~7.4.2",
"xmlhttprequest-ssl": "~1.5.4",
"yeast": "0.1.2"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz?cache=0&sync_timestamp=1607566575639&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"requires": {
"ms": "2.0.0"
}
}
}
},
"engine.io-parser": {
"version": "2.2.1",
"resolved": "https://registry.npm.taobao.org/engine.io-parser/download/engine.io-parser-2.2.1.tgz",
"integrity": "sha1-V85WEdk3DulPmWQbWJ+UyX5PXac=",
"requires": {
"after": "0.8.2",
"arraybuffer.slice": "~0.0.7",
"base64-arraybuffer": "0.1.4",
"blob": "0.0.5",
"has-binary2": "~1.0.2"
}
},
"escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/escape-html/download/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
},
"etag": {
"version": "1.8.1",
"resolved": "https://registry.npm.taobao.org/etag/download/etag-1.8.1.tgz",
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
},
"express": {
"version": "4.17.1",
"resolved": "https://registry.npm.taobao.org/express/download/express-4.17.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fexpress%2Fdownload%2Fexpress-4.17.1.tgz",
"integrity": "sha1-RJH8OGBc9R+GKdOcK10Cb5ikwTQ=",
"requires": {
"accepts": "~1.3.7",
"array-flatten": "1.1.1",
"body-parser": "1.19.0",
"content-disposition": "0.5.3",
"content-type": "~1.0.4",
"cookie": "0.4.0",
"cookie-signature": "1.0.6",
"debug": "2.6.9",
"depd": "~1.1.2",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"finalhandler": "~1.1.2",
"fresh": "0.5.2",
"merge-descriptors": "1.0.1",
"methods": "~1.1.2",
"on-finished": "~2.3.0",
"parseurl": "~1.3.3",
"path-to-regexp": "0.1.7",
"proxy-addr": "~2.0.5",
"qs": "6.7.0",
"range-parser": "~1.2.1",
"safe-buffer": "5.1.2",
"send": "0.17.1",
"serve-static": "1.14.1",
"setprototypeof": "1.1.1",
"statuses": "~1.5.0",
"type-is": "~1.6.18",
"utils-merge": "1.0.1",
"vary": "~1.1.2"
}
},
"finalhandler": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/finalhandler/download/finalhandler-1.1.2.tgz",
"integrity": "sha1-t+fQAP/RGTjQ/bBTUG9uur6fWH0=",
"requires": {
"debug": "2.6.9",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"on-finished": "~2.3.0",
"parseurl": "~1.3.3",
"statuses": "~1.5.0",
"unpipe": "~1.0.0"
}
},
"forwarded": {
"version": "0.1.2",
"resolved": "https://registry.npm.taobao.org/forwarded/download/forwarded-0.1.2.tgz",
"integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
},
"fresh": {
"version": "0.5.2",
"resolved": "https://registry.npm.taobao.org/fresh/download/fresh-0.5.2.tgz",
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
},
"has-binary2": {
"version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/has-binary2/download/has-binary2-1.0.3.tgz?cache=0&sync_timestamp=1587049505010&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-binary2%2Fdownload%2Fhas-binary2-1.0.3.tgz",
"integrity": "sha1-d3asYn8+p3JQz8My2rfd9eT10R0=",
"requires": {
"isarray": "2.0.1"
}
},
"has-cors": {
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/has-cors/download/has-cors-1.1.0.tgz",
"integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
},
"http-errors": {
"version": "1.7.2",
"resolved": "https://registry.npm.taobao.org/http-errors/download/http-errors-1.7.2.tgz",
"integrity": "sha1-T1ApzxMjnzEDblsuVSkrz7zIXI8=",
"requires": {
"depd": "~1.1.2",
"inherits": "2.0.3",
"setprototypeof": "1.1.1",
"statuses": ">= 1.5.0 < 2",
"toidentifier": "1.0.0"
}
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.24.tgz",
"integrity": "sha1-ICK0sl+93CHS9SSXSkdKr+czkIs=",
"requires": {
"safer-buffer": ">= 2.1.2 < 3"
}
},
"indexof": {
"version": "0.0.1",
"resolved": "https://registry.npm.taobao.org/indexof/download/indexof-0.0.1.tgz",
"integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
},
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
},
"ipaddr.js": {
"version": "1.9.1",
"resolved": "https://registry.npm.taobao.org/ipaddr.js/download/ipaddr.js-1.9.1.tgz",
"integrity": "sha1-v/OFQ+64mEglB5/zoqjmy9RngbM="
},
"isarray": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/isarray/download/isarray-2.0.1.tgz",
"integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
},
"media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz",
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
},
"merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/merge-descriptors/download/merge-descriptors-1.0.1.tgz",
"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
},
"methods": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/methods/download/methods-1.1.2.tgz",
"integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
},
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz",
"integrity": "sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE="
},
"mime-db": {
"version": "1.46.0",
"resolved": "https://registry.npm.taobao.org/mime-db/download/mime-db-1.46.0.tgz",
"integrity": "sha1-Ymd0in95lZTePLyM3pHe80lmHO4="
},
"mime-types": {
"version": "2.1.29",
"resolved": "https://registry.npm.taobao.org/mime-types/download/mime-types-2.1.29.tgz?cache=0&sync_timestamp=1613609297921&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime-types%2Fdownload%2Fmime-types-2.1.29.tgz",
"integrity": "sha1-HUq3faZLkfX3JInfKSNlY3VLsbI=",
"requires": {
"mime-db": "1.46.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz?cache=0&sync_timestamp=1607433856838&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"negotiator": {
"version": "0.6.2",
"resolved": "https://registry.npm.taobao.org/negotiator/download/negotiator-0.6.2.tgz",
"integrity": "sha1-/qz3zPUlp3rpY0Q2pkiD/+yjRvs="
},
"on-finished": {
"version": "2.3.0",
"resolved": "https://registry.npm.taobao.org/on-finished/download/on-finished-2.3.0.tgz",
"integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
"requires": {
"ee-first": "1.1.1"
}
},
"parseqs": {
"version": "0.0.6",
"resolved": "https://registry.npm.taobao.org/parseqs/download/parseqs-0.0.6.tgz",
"integrity": "sha1-jku1oZ0c3IRKCKyXTTTic6+mcNU="
},
"parseuri": {
"version": "0.0.6",
"resolved": "https://registry.npm.taobao.org/parseuri/download/parseuri-0.0.6.tgz",
"integrity": "sha1-4Ulugp46wv9H85pN0ESzKCPEolo="
},
"parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npm.taobao.org/parseurl/download/parseurl-1.3.3.tgz",
"integrity": "sha1-naGee+6NEt/wUT7Vt2lXeTvC6NQ="
},
"path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-0.1.7.tgz?cache=0&sync_timestamp=1601401033318&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-to-regexp%2Fdownload%2Fpath-to-regexp-0.1.7.tgz",
"integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
},
"proxy-addr": {
"version": "2.0.6",
"resolved": "https://registry.npm.taobao.org/proxy-addr/download/proxy-addr-2.0.6.tgz",
"integrity": "sha1-/cIzZQVEfT8vLGOO0nLK9hS7sr8=",
"requires": {
"forwarded": "~0.1.2",
"ipaddr.js": "1.9.1"
}
},
"qs": {
"version": "6.7.0",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz?cache=0&sync_timestamp=1616097552021&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.7.0.tgz",
"integrity": "sha1-QdwaAV49WB8WIXdr4xr7KHapsbw="
},
"range-parser": {
"version": "1.2.1",
"resolved": "https://registry.npm.taobao.org/range-parser/download/range-parser-1.2.1.tgz",
"integrity": "sha1-PPNwI9GZ4cJNGlW4SADC8+ZGgDE="
},
"raw-body": {
"version": "2.4.0",
"resolved": "https://registry.npm.taobao.org/raw-body/download/raw-body-2.4.0.tgz",
"integrity": "sha1-oc5vucm8NWylLoklarWQWeE9AzI=",
"requires": {
"bytes": "3.1.0",
"http-errors": "1.7.2",
"iconv-lite": "0.4.24",
"unpipe": "1.0.0"
}
},
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
"integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
},
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz",
"integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo="
},
"send": {
"version": "0.17.1",
"resolved": "https://registry.npm.taobao.org/send/download/send-0.17.1.tgz",
"integrity": "sha1-wdiwWfeQD3Rm3Uk4vcROEd2zdsg=",
"requires": {
"debug": "2.6.9",
"depd": "~1.1.2",
"destroy": "~1.0.4",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"fresh": "0.5.2",
"http-errors": "~1.7.2",
"mime": "1.6.0",
"ms": "2.1.1",
"on-finished": "~2.3.0",
"range-parser": "~1.2.1",
"statuses": "~1.5.0"
},
"dependencies": {
"ms": {
"version": "2.1.1",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.1.tgz?cache=0&sync_timestamp=1607433856838&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.1.tgz",
"integrity": "sha1-MKWGTrPrsKZvLr5tcnrwagnYbgo="
}
}
},
"serve-static": {
"version": "1.14.1",
"resolved": "https://registry.npm.taobao.org/serve-static/download/serve-static-1.14.1.tgz",
"integrity": "sha1-Zm5jbcTwEPfvKZcKiKZ0MgiYsvk=",
"requires": {
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"parseurl": "~1.3.3",
"send": "0.17.1"
}
},
"setprototypeof": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/setprototypeof/download/setprototypeof-1.1.1.tgz",
"integrity": "sha1-fpWsskqpL1iF4KvvW6ExMw1K5oM="
},
"socket.io": {
"version": "2.4.1",
"resolved": "https://registry.npm.taobao.org/socket.io/download/socket.io-2.4.1.tgz",
"integrity": "sha1-la2GHJpSNp1/Gmis8NShsW2kUdI=",
"requires": {
"debug": "~4.1.0",
"engine.io": "~3.5.0",
"has-binary2": "~1.0.2",
"socket.io-adapter": "~1.1.0",
"socket.io-client": "2.4.0",
"socket.io-parser": "~3.4.0"
},
"dependencies": {
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-4.1.1.tgz?cache=0&sync_timestamp=1607566575639&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.1.1.tgz",
"integrity": "sha1-O3ImAlUQnGtYnO4FDx1RYTlmR5E=",
"requires": {
"ms": "^2.1.1"
}
},
"ms": {
"version": "2.1.3",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.3.tgz?cache=0&sync_timestamp=1607433856838&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.3.tgz",
"integrity": "sha1-V0yBOM4dK1hh8LRFedut1gxmFbI="
}
}
},
"socket.io-adapter": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/socket.io-adapter/download/socket.io-adapter-1.1.2.tgz",
"integrity": "sha1-qz8Nb2a4/H/KOVmrWZH4IiF4m+k="
},
"socket.io-client": {
"version": "2.4.0",
"resolved": "https://registry.npm.taobao.org/socket.io-client/download/socket.io-client-2.4.0.tgz?cache=0&sync_timestamp=1615558422922&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsocket.io-client%2Fdownload%2Fsocket.io-client-2.4.0.tgz",
"integrity": "sha1-qvtdWUo8VaNDVVYvyK6iLtkRmjU=",
"requires": {
"backo2": "1.0.2",
"component-bind": "1.0.0",
"component-emitter": "~1.3.0",
"debug": "~3.1.0",
"engine.io-client": "~3.5.0",
"has-binary2": "~1.0.2",
"indexof": "0.0.1",
"parseqs": "0.0.6",
"parseuri": "0.0.6",
"socket.io-parser": "~3.3.0",
"to-array": "0.1.4"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz?cache=0&sync_timestamp=1607566575639&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"requires": {
"ms": "2.0.0"
}
},
"socket.io-parser": {
"version": "3.3.2",
"resolved": "https://registry.npm.taobao.org/socket.io-parser/download/socket.io-parser-3.3.2.tgz",
"integrity": "sha1-74cgCdCtz3BPL76DAZGhR1KtULY=",
"requires": {
"component-emitter": "~1.3.0",
"debug": "~3.1.0",
"isarray": "2.0.1"
}
}
}
},
"socket.io-parser": {
"version": "3.4.1",
"resolved": "https://registry.npm.taobao.org/socket.io-parser/download/socket.io-parser-3.4.1.tgz",
"integrity": "sha1-sGr4ODApdYN+qy3JgAN9okBU1ko=",
"requires": {
"component-emitter": "1.2.1",
"debug": "~4.1.0",
"isarray": "2.0.1"
},
"dependencies": {
"component-emitter": {
"version": "1.2.1",
"resolved": "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.2.1.tgz",
"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-4.1.1.tgz?cache=0&sync_timestamp=1607566575639&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.1.1.tgz",
"integrity": "sha1-O3ImAlUQnGtYnO4FDx1RYTlmR5E=",
"requires": {
"ms": "^2.1.1"
}
},
"ms": {
"version": "2.1.3",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.3.tgz?cache=0&sync_timestamp=1607433856838&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.3.tgz",
"integrity": "sha1-V0yBOM4dK1hh8LRFedut1gxmFbI="
}
}
},
"statuses": {
"version": "1.5.0",
"resolved": "https://registry.npm.taobao.org/statuses/download/statuses-1.5.0.tgz?cache=0&sync_timestamp=1609654031532&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstatuses%2Fdownload%2Fstatuses-1.5.0.tgz",
"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
},
"to-array": {
"version": "0.1.4",
"resolved": "https://registry.npm.taobao.org/to-array/download/to-array-0.1.4.tgz",
"integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA="
},
"toidentifier": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/toidentifier/download/toidentifier-1.0.0.tgz",
"integrity": "sha1-fhvjRw8ed5SLxD2Uo8j013UrpVM="
},
"type-is": {
"version": "1.6.18",
"resolved": "https://registry.npm.taobao.org/type-is/download/type-is-1.6.18.tgz",
"integrity": "sha1-TlUs0F3wlGfcvE73Od6J8s83wTE=",
"requires": {
"media-typer": "0.3.0",
"mime-types": "~2.1.24"
}
},
"unpipe": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/unpipe/download/unpipe-1.0.0.tgz",
"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
},
"utils-merge": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
},
"ws": {
"version": "7.4.4",
"resolved": "https://registry.npm.taobao.org/ws/download/ws-7.4.4.tgz",
"integrity": "sha1-ODvJdCyyAikskHfOq29gR7F/LVk="
},
"xmlhttprequest-ssl": {
"version": "1.5.5",
"resolved": "https://registry.npm.taobao.org/xmlhttprequest-ssl/download/xmlhttprequest-ssl-1.5.5.tgz",
"integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4="
},
"yeast": {
"version": "0.1.2",
"resolved": "https://registry.npm.taobao.org/yeast/download/yeast-0.1.2.tgz",
"integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
}
}
}

View File

@@ -0,0 +1,17 @@
{
"name": "backend",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node-dev index.js"
},
"keywords": [],
"author": "",
"private": true,
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"socket.io": "^2.3.0"
},
"description": ""
}

View File

@@ -0,0 +1,22 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
input{
border:none;
outline:medium;
}

View File

@@ -0,0 +1,274 @@
.big{
display: flex;
justify-content: center;
width: 800px;
height: 600px;
position: absolute;
top: 5%;
left: 22%;
box-shadow: 0 0 35px rgba(0, 0, 0, .2);
}
/* ----------------------------------------- */
.left{
width: 800px;
background-color: #fff;
position: relative;
}
.left_header{
display: flex;
justify-content: space-between;
background-color: #fff;
align-items: center;
height: 50px;
position: relative;
border-bottom: solid 1px #ddddde;
}
.left_header>div{
display: flex;
}
.user{
display: flex;
align-items: center;
}
.left_content{
height: 62%;
overflow-y: scroll;
}
.conp{
margin: 0 auto;
width: 200px;
}
.conp p{
margin-top: 30px;
color: #9d9d9d;
background-color: #f8f8f8;
border-radius: 10px;
height: 30px;
width: 230px;
text-align: center;
line-height: 30px;
}
.liaotian div{
padding-left: 20px;
}
.liaotian div p{
padding-bottom: 20px;
}
.liaotian div span{
box-sizing: border-box;
padding: 15px;
width: 90%;
border-radius: 20px;
font-size: 30px;
display: block;
background-color: red;
}
.liaotian div img{
border-radius: 20px;
padding: 10px;
}
.liaotian{
margin-top: 20px;
display: flex;
align-items: flex-start;
}
.liaotianmast{
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
.liaotianmast div{
padding-right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.liaotianmast div p{
padding-bottom: 20px;
}
.liaotianmast div span{
box-sizing: border-box;
padding: 10px;
border-radius: 20px;
font-size: 30px;
display: block;
background-color: red;
}
.liaotianmast div img{
border-radius: 20px;
padding: 10px;
}
/* ------------------------------------------- */
.right{
width: 300px;
background-color: #f5f8f8;
}
.right_header{
background-color: #f5f8f8;
display: flex;
align-items: center;
font-size: 20px;
padding-left: 20px;
color: #727575;
height: 50px;
position: relative;
border-bottom: solid 1px #ddddde;
}
.right_header p{
padding-left: 15px;
}
.right_content{
height: 94%;
overflow-y: scroll;
}
.right_content div{
display: flex;
}
.right_content div{
display: flex;
align-items: center;
padding-top: 10px;
}
.right_content div p{
padding-left: 10px;
}
.user_log i{
font-size: 25px;
padding-left: 10px;
position: relative;
}
.bq {
width: 500px;
height: 250px;
background: #fff;
border: 1px solid #000;
position: absolute;
left: 0;
bottom: 40px;
overflow-y: scroll;
display: none;
}
.bq li {
margin-right: 5px;
float: left;
}
.bq img {
width: 30px;
height: 30px;
}
.dt {
width: 500px;
height: 250px;
background: #fff;
border: 1px solid #000;
position: absolute;
left: 0;
bottom: 40px;
overflow-y: scroll;
display: none;
}
.dt li {
margin-right: 5px;
float: left;
}
.dt img {
width: 89px;
height: 89px;
}
.floot_con{
background-color: #f5f8f8;
height: 35px;
line-height: 35px;
}
.floot_con div{
padding-left: 20px;
float: left;
}
.floot .shuru {
width: 100%;
height: 100px;
outline: none;
overflow-y: scroll;
}
.floot_con select{
margin-top: 8px;
line-height: 35px;
height: 20px;
outline: none;
float: left;
}
.icon-icon23:before {
content: "\e62d";
font-size: 45px;
}
p{
font-size: 20px;
}
.right_content img {
width: 40px;
height: 40px;
border-radius: 100%;
}
.active {
animation-name: doudong;
animation-duration:1s;
}
@keyframes doudong {
0% {
transform: rotate(180deg);
}
10% {
transform: rotate(135deg);
}
20% {
transform: rotate(90deg);
}
30% {
transform: rotate(45deg);
}
40% {
transform: rotate(0deg);
}
50% {
transform: rotate(-45deg);
}
60% {
transform: rotate(-90deg);
}
70% {
transform: rotate(-135deg);
}
80% {
transform: rotate(-180deg);
}
90% {
transform: rotate(180deg);
}
}

View File

@@ -0,0 +1,49 @@
.header{
display: flex;
flex-direction: column;
align-items: center;
margin: 100px auto;
border-radius: 20px;
height: 460px;
width: 378px;
box-sizing: border-box;
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}
.header img{
width: 200px;
border-radius:150px;
margin: 50px 0 ;
}
input{
width: 50%;
/* background-color: red; */
width: 100%;
font-size: 20px;
padding-bottom: 5px;
border-bottom: solid 1px #ddddde;
margin-bottom: 20px;
}
.header div{
height: 50px;
background-color: #88b4d8;
width: 100%;
color: #fff;
text-align: center;
font-size:20px;
line-height: 50px;
border-radius: 30px;
}
.modal-body {}
.modal-body img{
width: 120px;
height: 120px;
margin-bottom: 10px;
}
.modal-body .active {
border: 1px solid #000;
box-sizing: border-box;
}

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