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

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

View File

@@ -0,0 +1,177 @@
<!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,
ul,
li {
margin: 0;
padding: 0;
}
.main {
position: relative;
}
.main ul {
overflow: hidden;
margin-top: 45px;
}
.main ul li {
display: flex;
height: 45px;
align-items: center;
position: relative;
padding: 0 15px;
border-bottom: 1px solid #f4f0f0;
transition-duration: 0.3s;
}
.main .item {
width: 100%;
}
.main .action {
display: flex;
align-items: center;
height: 100%;
position: absolute;
right: -180px;
}
.main .action .item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: #fff;
}
.head {
z-index: 999;
}
.head ul {
height: 45px;
line-height: 45px;
position: fixed;
top: 0;
left: 0;
}
.head ul li {
display: inline-block !important;
float: left;
margin-left: 20px;
}
.shuaxin {
width: 30px;
height: 30px;
position: absolute;
top: -30px;
right: 50%;
z-index: 2;
}
</style>
</head>
<body>
<div class="head">
<ul>
<li>
推荐
</li>
<li>
热门
</li>
<li>
动画
</li>
<li>
影视
</li>
</ul>
</div>
<div class="main">
<img src="./img/shuaxin.png" alt="" height="30px" width="30px" class="shuaxin">
<ul>
<li>
<div class="item">内容1</div>
</li>
<li>
<div class="item">内容2</div>
</li>
<li>
<div class="item">内容3</div>
</li>
</ul>
</div>
</body>
<script>
var startY = 0;
_(".shuaxin").forEach((v, i) => {
_(".shuaxin").forEach((v, i) => {
v.open = false
v.addEventListener('touchstart', (e) => {
startY = e.targetTouches[0].screenY;
_(".shuaxin").forEach((j, index) => {
if (index != i) {
j.style.transform = `translateY(-30px)`;
}
})
console.log("startY: ", startY);
})
v.addEventListener('touchmove', (e) => {
var moveY = e.targetTouches[0].screenY
if (!v.open) {
var y = moveY - startY
console.log("下滑:",);
v.style.transform = `translateY(${
y < 50 ? y : 50}px)`
v.open=true
}
else {
if (v.open) {
var newY = -50 + (moveY - startY)
v.style.transform = `translateY(${newY <= 0 ? 0 : newY}px)`;
}
}
})
})
v.addEventListener('touchend', (e) => {
var endY = e.changedTouches[0].screenY;
var ox = endY -startY
if (startY < endY) {
if (ox < 250) {
v.style.transform = `translateY(0px)`
v.open = false
}
else {
v.style.transform = `translateY(250px)`
setTimeout(function(){
v.style.transform = `translateY(0px)`},3000);
}
}
})
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

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

View File

@@ -0,0 +1,77 @@
<!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>jianshu</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3450073_k0kkbv9byw.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./jianshu.css">
</head>
<body>
<div class="main">
<div class="tittle hidden">
<div class="author left themeColor">推荐作者</div>
<div class="shuaxin right">
<i class="iconfont icon-jiazai_shuaxin_o themeColor"></i>
<span class="themeColor">换一批</span>
</div>
</div>
<ul class="list">
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" class="left">
<div class="item_text hidden">
<div class="name left">卢璇说</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
<span>关注</span>
</div>
</div>
<div class="item_desc themeColor">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" class="left">
<div class="item_text hidden">
<div class="name left">卢璇说</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
<span>关注</span>
</div>
</div>
<div class="item_desc themeColor">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" class="left">
<div class="item_text hidden">
<div class="name left">卢璇说</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
<span>关注</span>
</div>
</div>
<div class="item_desc themeColor">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" class="left">
<div class="item_text hidden">
<div class="name left">卢璇说</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
<span>关注</span>
</div>
</div>
<div class="item_desc themeColor">写了2154.9k字 · 34.8k喜欢</div>
</li>
</ul>
<div class="all">
<span>查看全部</span>
<i class="iconfont icon-gengduo"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zol</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3450073_k0kkbv9byw.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./zol.css">
</head>
<body>
<div class="main">
<img class="logo left" src="https://icon.zol-img.com.cn/mainpage/2019logo/festival/2022duanwu-logo_2x.png" alt="">
<div class="search left">
<ul class="tuijian hidden">
<li>综合</li>
<li>综合</li>
<li>综合</li>
<li>综合</li>
<li>综合</li>
</ul>
<div class="search_input hidden">
<input type="text" class="left" placeholder="">
<div class="search_button left">搜索</div>
</div>
</div>
<ul class="menu right">
<ul>
<li><a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载app</div>
</a></li>
<li><a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载app</div>
</a></li>
<li><a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载app</div>
</a></li>
</ul>
</ul>
</div>
</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>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3447719_1onasnozfl8.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/baidu.css">
<style>
.top_left {
clear: both;
}
.sousuo {
clear: right;
}
</style>
</head>
<body>
<div class="main">
<div class="top hidden">
<img src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt=""
class="logo left" height="40px" width="128px">
<div class="top_left left hidden">
<div class="shuru left">
<span>网页</span>
<i class="iconfont icon-xiayiyeqianjinchakangengduo-copy"></i>
<input type="text" placeholder="把疫情造成的损失补回来..">
<span class="number">4</span></div>
</div>
<div class="sousuo left">百度一下</div>
</div>
<ul class="top_right">
<li>
<a href="">美国三天发生300多起枪击事件</a>
</li>
</ul>
</div>
<div class="bottom">
<ul>
<li><a href="">一夜过去雅安地震情况怎么样了?</a></li>
<li><a href="">31省份昨日新增本土“18+43”</a></li>
<li><a href="">把疫情造成的损失补回来...</a></li>
<li><a href="">歼-20现身台海了?</a></li>
<li><a href="">美国一医院发生枪击案致4人死亡</a></li>
<li><a href="">乌第一夫人称9岁儿子是军事专家</a></li>
</ul>
<i class="iconfont icon-xiayiyeqianjinchakangengduo-copy">
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3447719_1onasnozfl8.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/baidu1.css">
</head>
<body>
<div class="main">
<div class="top hidden">
<img src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt=""
class="logo">
<div class="input hidden">
<div class="web left">
<i class="iconfont icon-xiayiyeqianjinchakangengduo-copy"></i>
<span>网页</span>
</div>
<input type="text" placeholder="回头看高考青春永不言老">
<span>4</span>
</div>
<div class="anniu">百度一下</div>
<ul class="xinwen">
<li><a href="">罗永浩回应被恢复执行2900万</a></li>
</ul>
</div>
<div class="bottom">
<ul></ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,100 @@
.main {
width: 100%;
height: 121px;
margin: 0 auto;
background: #fff;
float: left;
}
.main .top {
width: 1190px;
margin: 0px auto;
height: 46px;
padding-top: 46px;
}
.main .top .top_left {
display: inline-block;
height: 46px;
}
.main .top .top_lef span{
float: left;
}
.main .top .top_left .input {
border: 2px solid #4e6ef2;
border-left: none;
border-right: none;
}
.main .top .top_left .input input{
width: 443px;
height: 16px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 15px;
padding-right: 33px;
margin-right: 51px;
}
.main .top .top_left .shuru {
height: 40px;
border: 2px solid #4e6ef2;
border-right: none;
float: left;
margin-left: 18px;
border-radius: 10px 0px 0px 10px;
text-align: left;
padding-left: 16px;
padding-right: 10px;
line-height: 44px;
color: #9195a3;
font-size: 12px;
box-sizing: border-box;
}
.main .top .top_left .shuru i{
font-size: 12px;
}
.main .top .top_left .shuru input{
padding-left: 16px;
width: 491px;
height: 40px;
font-size: 16px;
color: #9195a3;
}
.main .input span{
display: inline-block;
height: 18px;
top: 6px;
text-align: center;
color: #fff;
font-size: 12px;
border-radius: 20px;
background-color: #FC561F;
}
.main .top .top_left .sousuo {
font-size: 17px;
color: #fff;
width: 112px;
text-align: center;
line-height: 44px;
background-color: #4e6ef2;
float: left;
border-radius: 0 10px 10px 0;
}
.main .top ul {
margin-left: 30px;
float: left;
}
.main .top .top_right {
float: right;
height: 46px;
}
.main .bottom .ul {
font-size: 13px width: 1194px;
margin: 0 auto;
}

View File

@@ -0,0 +1,83 @@
.main{
position: relative;
top: -10px;
width: 100%;
height: 120px;
background: #fff;
}
.main .top{
position: relative;
top: 10px;
width: 1190px;
height: 46px;
margin: 0 auto;
}
.main .top img{
float: left;
width: 128px;
height: 40px;
margin-top: -2px;
margin-right: 4px;
}
.main .top .input{
margin-left: 18px;
float: left;
width: 443px;
height: 16px;
line-height: 16px;
padding: 12px 33px 12px 15px;
border: 2px solid #4e6ef2;
border-radius: 10px 0px 0px 10px;
border-right: none;
font-size: 16px;
color: #333;
}
.main .top .input .web{
position: absolute;
display: inline-block;
top: -1px;
padding: 0 10px;
width: 38px;
height: 44px;
text-align: left;
font-size: 12px;
margin: 0 auto;
color: #9195a3;
padding-left: 16px;
}
.main .top .input .web span{
line-height: 44px;
}
.main .top .input .web i{
position: absolute;
top: 16px;
left: 44px;
width: 11px;
height: 12px;
}
.main .top .input input{
width: 443px;
height: 16px;
line-height: 16px;
padding: 12px 33px 12px 15px;
margin-left: 51px;
caret-color: #333;
font-size: 16px;
color: #333;
margin-top: -12px;
}
.main .top .anniu{
width: 112px;
height: 44px;
background-color: #4E6EF2;
color: #fff;
font-size: 17px;
border-radius: 0 10px 10px 0;
float: left;
line-height: 44px;
text-align: center;
}
.main .top ul{
float: right;
}
.main .bottom

View File

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

View File

@@ -0,0 +1,184 @@
.meun {
width: 240px;
height: 100%;
position: fixed;
z-index: 999;
border-right: 1px solid #e6e6e8;
box-sizing: border-box;
}
.meun .logo {
width: 146px;
height: 36px;
margin: 0 auto;
display: block;
margin-top: 18px;
margin-bottom: 34px;
}
.meun ul {
padding: 0 28px;
}
.meun ul li {
height: 40px;
line-height: 40px;
margin-bottom: 8px;
}
.meun ul .active {
background: #f7f7f7;
border-radius: 3px;
}
.meun ul li a{}
.meun ul li a img {
vertical-align: text-top;
margin-left: 4.5px;
}
.meun ul li a span {
font-size: 16px;
color: #111622;
}
.header {
position: fixed;
width: calc(100% - 240px);
height: 64px;
left: 240px;
z-index: 999;
border-bottom: 1px solid #e6e6e8;
box-sizing: border-box;
}
.header .search{
width: 440px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #e6e6e8;
border-radius: 3px;
box-sizing: border-box;
margin: 14px 0 0 32px;
}
.header .search input {
background: #0000;
height: 100%;
padding-left: 17px;
width: 343px;
box-sizing: border-box;
}
.header .search .but{
position: relative;
height: 100%;
width: 75px;
padding-left: 20px;
line-height: 34px;
}
.header .search .but::before {
content: " ";
position: absolute;
width: 1px;
height: 16px;
background-color: #e6e6e6;
top: 50%;
left: 0;
transform: translateY(-50%);
/* margin-top: -8px; */
}
.header .search .but span {
font-size: 16px;
color: #666;
}
.header .login{
width: 611px;
}
.header .login .menu_two {
line-height: 64px;
}
.header .login .menu_two li {
float: left;
margin-right: 16px;
padding-right: 10px;
}
.header .login .menu_two li a{}
.header .login .menu_two li a i {}
.header .login .menu_two li a span {
font-size: 14px;
color: #111622;
}
.header .login .log_reg {
margin-top: 14px;
}
.header .login .log_reg li:first-child {
border: 1px solid #e6e6e8;
height: 30px;
border-radius: 5px;
padding: 0 8px;
}
.header .login .log_reg li:last-child {
padding:0 26px;
height: 30px;
background-color: #ff2626;
border-radius: 5px;
color: #fff;
}
.header .login .log_reg li {
float: left;
line-height: 32px;
margin-right: 24px;
}
.header .login .log_reg li i {}
.header .login .log_reg li span {}
.content {
margin-left: 272px;
padding-top: 96px;
padding-right: 16px;
padding-bottom: 72px;
}
.content .firstchild img{
width: 600px !important;
height: 266.263px !important;
float: left;
padding-right: 16px;
}
.content .secondchild{
display: inline-block;
height: 266.26px;
box-sizing: border-box;
}
.content .secondchild .yonghuxinxi{
margin-top: 17px;
}
.content .secondchild .yonghuxinxi img{
float: left;
}
.content .secondchild .yonghuxinxi .v_text{
float: left;
margin-left: 8px;
}
.content .secondchild .yonghuxinxi .v_text .v_tittle{
font-size: 16px;
margin-top: -2px;
line-height: 22px;
}
.content .secondchild .yonghuxinxi .v_text .name{
margin-top: 14px;
font-size: 14px;
color: #505666;
}
.content .secondchild .yonghuxinxi .v_text .shuliang{
font-size: 14px;
color: #505666;
}
.content .fengmian{
width: 291.8px !important;
height: 163.637px !important;
}
.content .secondchild .yonghuxinxi img {
width: 36px;
height: 36px;
border-radius: 18px;
}

View File

@@ -0,0 +1,63 @@
.main{
width: 280px;
border: 1px solid #000;
}
.main .tittle{
margin-bottom: 15px;
}
.main .tittle .author,.main .tittle .shuaxin,.main .tittle .shuaxin i{
font-size: 14px;
}
.main .tittle .shuaxin i{}
.main .tittle .shuaxin span{
}
.list{}
.list li{
margin-bottom: 15px;
overflow: hidden;
}
.list li img{
width: 48px;
height: 48px;
border-radius: 100%;
margin-right: 10px;
}
.list li .item_r{
width: 222px;
margin-top: 2px;
}
.list li .item_r .item_text{
overflow: hidden;
}
.list li .item_r .item_text .name{
font-size: 14px;
color: #333;
}
.list li .item_r .item_text .follow{
color: #42c02e;
}
.list li .item_r .item_text .follow i{
font-size: 13px;
}
.list li .item_r .item_text .follow span{
font-size: 13px;
}
.list li .item_r .item_desc{
font-size: 12px
color: #969696;
}
.all {
height: 25.07px;
font-size: 13px;
color: #787878;
background-color: #f7f7f7;
border: 1px solid #dcdcdc;
border-radius: 4px;
text-align: center;
line-height: 30.07px;
}
.all i {
font-size: 13px;
}

View File

@@ -0,0 +1,17 @@
:root{
--color:#969696;
}
.themeColor{
color: var(--color);
}
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}

View File

@@ -0,0 +1,72 @@
.main{
width: 1000px;
margin: 0 auto;
height: 93px;
box-sizing: border-box;
}
.main .logo{
width: 233px;
margin-top: 40px;
}
.main .search{
margin-left: 64px;
margin-top: 24px;
}
.main .search ul{
overflow: hidden;
}
.search_input {
width: 469px;
height: 36px;
margin-top: 4px;
}
.search_input input {
width: 389px;
height: 36px;
border: 1px solid #ccc;
box-sizing: border-box;
border-right: none;
padding-left: 14px;
}
.search_input .search_button{
width: 80px;
height: 100%;
background: #3686f1;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 36px;
}
.main .tuijian li {
color: #666;
float: left;
width: 42px;
}
.tuijian li:first-child{
color: #333;
font-weight: bold;
}
.main .menu{
margin-top: 40px;
}
.menu li{
float: left;
text-align: center;
margin-right: 18px;
}
.menu li :last-child{
margin-right: 0 !important;
}
.menu li img{
width: 20px;
height: 20px;
}
.menu li a{
color: #1f4f88;
font-size: 12px;
}

View File

@@ -0,0 +1,160 @@
<!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_3445167_it6ine1mov8.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/haokan.css">
</head>
<body>
<div class="meun">
<img class="logo" src="./img/logo.png" alt="">
<ul>
<li class="active">
<a href="">
<img src="./img/home.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg" alt="">
<span>首页</span>
</a>
</li>
</ul>
</div>
<div class="header">
<div class="search left">
<input class="left" type="text" placeholder="搜索">
<div class="but left">
<i class="iconfont icon-sousuo"></i>
<span>搜索</span>
</div>
</div>
<div class="login right hidden">
<ul class="menu_two hidden left">
<li>
<a href="">
<i class="iconfont icon-sousuo"></i>
<span>下载客户端</span>
</a>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<span>创作中心</span>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<span>消息</span>
</li>
</ul>
<ul class="log_reg hidden right">
<li>
<i class="iconfont icon-sousuo"></i>
<span>上传视频</span>
</li>
<li>
<span>登 录</span>
</li>
</ul>
</div>
</div>
<div class="content">
<ul left>
<li class="firstchild"><img
src="https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2022-5/1652165445258/1758dd6fa448.png"
alt="" class="guanggao"></li>
<li class="secondchild">
<img src="https://pics3.baidu.com/feed/9922720e0cf3d7ca1b47fa688f10ca036b63a911.jpeg?token=d745f044389e24fec45f0325b05b817d"
alt="" class="fengmian">
<div class="yonghuxinxi">
<img src="https://pic.rmb.bdstatic.com/bjh/user/b41bec8ad1220e68a9d6dafb9b12de0f.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=33184"
alt="" class="head">
<div class="v_text">
<div class="v_tittle">辽城学子为高考考生加油</div>
<div class="name">中国大学在线</div>
<div class="shuliang">219次播放·3天前</div>
</div>
</li>
<li class="secondchild">
<img src="https://pics3.baidu.com/feed/9922720e0cf3d7ca1b47fa688f10ca036b63a911.jpeg?token=d745f044389e24fec45f0325b05b817d"
alt="" class="fengmian">
<div class="yonghuxinxi">
<img src="https://pic.rmb.bdstatic.com/bjh/user/b41bec8ad1220e68a9d6dafb9b12de0f.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=33184"
alt="" class="head">
<div class="v_text">
<div class="v_tittle">辽城学子为高考考生加油</div>
<div class="name">中国大学在线</div>
<div class="shuliang">219次播放·3天前</div>
</div>
</li>
<li class="secondchild">
<img src="https://pics3.baidu.com/feed/9922720e0cf3d7ca1b47fa688f10ca036b63a911.jpeg?token=d745f044389e24fec45f0325b05b817d"
alt="" class="fengmian">
<div class="yonghuxinxi">
<img src="https://pic.rmb.bdstatic.com/bjh/user/b41bec8ad1220e68a9d6dafb9b12de0f.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=33184"
alt="" class="head">
<div class="v_text">
<div class="v_tittle">辽城学子为高考考生加油</div>
<div class="name">中国大学在线</div>
<div class="shuliang">219次播放·3天前</div>
</div>
</li>
<li class="secondchild">
<img src="https://pics3.baidu.com/feed/9922720e0cf3d7ca1b47fa688f10ca036b63a911.jpeg?token=d745f044389e24fec45f0325b05b817d"
alt="" class="fengmian">
<div class="yonghuxinxi">
<img src="https://pic.rmb.bdstatic.com/bjh/user/b41bec8ad1220e68a9d6dafb9b12de0f.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=33184"
alt="" class="head">
<div class="v_text">
<div class="v_tittle">辽城学子为高考考生加油</div>
<div class="name">中国大学在线</div>
<div class="shuliang">219次播放·3天前</div>
</div>
</li>
<li class="secondchild">
<img src="https://pics3.baidu.com/feed/9922720e0cf3d7ca1b47fa688f10ca036b63a911.jpeg?token=d745f044389e24fec45f0325b05b817d"
alt="" class="fengmian">
<div class="yonghuxinxi">
<img src="https://pic.rmb.bdstatic.com/bjh/user/b41bec8ad1220e68a9d6dafb9b12de0f.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=33184"
alt="" class="head">
<div class="v_text">
<div class="v_tittle">辽城学子为高考考生加油</div>
<div class="name">中国大学在线</div>
<div class="shuliang">219次播放·3天前</div>
</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header line">
<img src="./img/返回@2x.png" alt="">
<div>填写订单</div>
<div></div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,27 @@
.body{
background-color: #f2f2f2;
}
.header {
width: 100%;
height: 0.88rem;
background-color: #ffffff;
display: flex;
align-items: center;
position: fixed;
z-index: 999;
box-sizing: border-box;
top: 0
}
.header img {
width: 0.2rem;
height: 0.33rem;
margin-left: 0.3rem;
}
.header div {
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #333333;
margin-left: 2.58rem;
}
.content{}
.footer{}

View File

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

View File

@@ -0,0 +1,17 @@
:root{
--color:#f2f2f2;
}
.themeColor{
color: var(--color);
}
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

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.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

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>Document</title>
</head>
<body>
<button>点击</button>
<div style="display: block;" class="text">别点了- -</div>
</body>
<script>
var botton = $("botton"),text = $("text")
botton.onclick = function () {
if (text.style.display == "block"){
text.style.display = "none"
}
else{
text.style.display = "block"
text.style.color = `hsl(${Math.random() * 360},100%,50%)`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="tittle">
<li class="active">首页</li>
<li>游戏</li>
<li>电影</li>
<li>体育</li>
</ul>
<ul class="content">
<li class="active">首页 的内容</li>
<li>游戏 的内容</li>
<li>电影 的内容</li>
<li>体育 的内容</li>
</ul>
</body>
<script>
var tittleLi = _("tittle li"),contentLi = _("content li")
tittleLi.forEach(function(item, index) {
item.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 152px;
border-radius: 6px;
box-shadow: 2px 2px 9px #d7d7d7;
display: none;
position: fixed;
}
li {
height: 40px;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>新建文件夹</li>
<li>上传文件</li>
<li>上传文件夹</li>
<li>刷新网页</li>
</ul>
</body>
<script>
$("body").oncontextmenu = function (e) {
e.preventDefault();
var { x, y } = e;
var { clientWidth, clientHeight } = document.body;
if (clientWidth - x < 152 && clientHeight - y <160){
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display:block;`
}else if (clientWidth - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
}else if (clientHeight - y < 160){`
top: ${y - 160}px;
left: ${x}px;
display:block;`
}else {
$("ul").style = `
top: ${y}px;
left: ${x}px;
display: block;
`
}}
</script>
</html>

View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
span {
position: fixed;
}
</style>
</head>
<body>
</body>
<script>
var textArr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']
var index = 0;
$("body").onclick = function (e) {
var time = null;
var { x, y } = e;
var span = document.createElement("span");
span.innerText = textArr[index];
span.style = `
left:${x}px;
top:${y}px;
`;
index++
index > 11 ? index = 0 : ''
span.move = 0
$("body").appendChild(span)
function motion() {
span.move += 4;
console.log("span.move: ", span.move);
if (span.move > 100) {
setTimeout(() => $("body").removeChild(span),
cancelAnimationFrame(time))
}
else {
span.style.top = `${y - span.move}px`
time = requestAnimationFrame(motion)
}
}
motion()
}
function motion(el, y) {
time = setTimeout(function fn() {
el.move += 4;
console.log("el.move: ", el.move);
if (el.move > 100) {
setTimeout(() => $("body").removeChild(el), 300)
clearTimeout(time)
} else {
el.style.top = `${y - el.move}px`
time = setTimeout(fn, 1000 / 60)
}
}, 1000 / 60)
setTimeout(function () {
$("body").removeChild(el)
}, 800)
}
function a() {
var c = 1
function test() {
c++
return c;
}
return test
}
var t = a();
console.log(t());
console.log(t());
var c = a();
console.log(c());
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入搜索关键字">
<ul></ul>
</body>
<script>
var arr = ['今天天气不好', 'js学习', 'js练习', '不想学习', '今天天气一般,是阴天', '不喜欢学习'];
$("input").oninput = function () {
searchList = []
if ($("input").value.length != 0) {
arr.forEach(function (v, i) {
if (v.includes($("input").value)) {
var span = `<span style="color: red;">${$("input").value}</span>`
searchList.push(v.replace($("input").value, span))
}
});
renderLi();
} else {
$("ul").innerHTML = ""
}
}
function renderLi() {
$("ul").innerHTML = ""
searchList.forEach(function (v, i) {
$("ul").innerHTML += `<li>${v}</li>`
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,10 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}

View File

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

View File

@@ -0,0 +1,41 @@
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

View File

@@ -0,0 +1,54 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,101 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

View File

@@ -0,0 +1,22 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}

View File

@@ -0,0 +1,92 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

View File

@@ -0,0 +1,95 @@
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

View File

@@ -0,0 +1,145 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,23 @@
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,113 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@@ -0,0 +1,15 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

View File

@@ -0,0 +1,15 @@
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})

View File

@@ -0,0 +1,111 @@
<!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>tab</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<div class="app">
<ul class="title">
<li :class=" i == index ? 'active' : '' "
v-for="v,i in arr"
@click="index = i"
:key="i">
{{ v.title }}
</li>
</ul>
<ul class="content">
<li :class=" i == index ? 'active' : '' " v-for="v,i in arr" :key="i">
<p v-for="item,index in v.content">{{ item.text }}</p>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
new Vue({
el: '.app',
data: {
index: 0,
arr: [
{
title: '首页',
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
{ text: '首页的内容4' },
{ text: '首页的内容5' },
]
},
{
title: '社会',
content: [
{ text: '社会 的内容1' },
{ text: '社会 的内容2' },
{ text: '社会 的内容3' },
]
},
{
title: '军事',
content: [
{ text: '军事 的内容1' },
{ text: '军事 的内容2' },
{ text: '军事 的内容3' },
]
},
{
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
]
},
methods: {
change(index) {
this.index = index
}
}
})
</script>
</html>

View File

@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="left">
<img src="" alt="">
</div>
<div class="center">
<ul>
<li>
<p>a</p>
</li>
<li>
<p>a</p>
</li>
<li>
<p>a</p>
</li>
</ul>
</div>
<div class="right">
<button>登录</button>
</div>
</div>
<div class="content">
<div class="top">
<img src="" alt="">
<div class="input">
<input type="text">
<div>
<img src="" alt="">
</div>
</div>
<ul>
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
</div>
</div>
</div>
<div class="right">
<ul>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
</li>
</ul>
</div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="footer">
<div class="top">
<ul class="right">
<li>
<p>ddd</p>
<ul>
<li>fff</li>
<li>fff</li>
<li>fff</li>
<li>fff</li>
<li>fff</li>
<li>fff</li>
</ul>
</li>
<li>
<p>ddd</p>
<ul>
<li>fff</li>
<li>fff</li>
<li>fff</li>
<li>fff</li>
<li>fff</li>
<li>fff</li>
</ul>
</li>
</ul>
<div class="left">
<p>关注微信</p>
<img src="" alt="">
</div>
</div>
<p>
fff
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="top">
<div class="left">
<img src="" alt="">
</div>
<div class="center">
<input type="text">
<p>搜狗搜索</p>
</div>
<div class="right">
<p>无障碍浏览</p>
<img src="" alt="">
<img src="" alt="">
<p>登录</p>
</div>
</div>
</div>
<div class="content">
<div class="left">
<div class="top">
<img src="" alt="">
</div>
<div class="bottom">
<div class="bottom_left">
<div>
<p></p>
<p></p>
</div>
<ul>
<li>
<p></p>
</li>
<li></li>
<li></li>
</ul>
<div>
<img src="" alt="">
<p></p>
</div>
</div>
<div class="bottom_right">
<div>
<p></p>
</div>
<p></p>
<ul>
<li>
<p></p>
</li>
<li></li>
<li></li>
</ul>
<div>
<img src="" alt="">
<img src="" alt="">
</div>
<div>
<img src="" alt="">
<p></p>
</div>
</div>
</div>
</div>
<div class="right">
<img src="" alt="">
<ul>
<li>
<p></p>
</li>
<li></li>
<li></li>
</ul>
</div>
<div>
<div>
<p></p>
<p></p>
<p></p>
</div>
<video src=""></video>
<p></p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="left">
<img src="" alt="">
<ul>
<li>
<p>
</p>
</li>
<li></li>
<li></li>
</ul>
</div>
<div class="left">
<div>
<input type="text" placeholder="请输入书籍名或作者名">
<img src="" alt="">
</div>
<ul>
<li>
<p>作家专区
</p>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="content">
<div class="top">
<img src="" alt="">
</div>
<div>
<img src="" alt="">
<ul class="left">
<li>
<p></p>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="left">
<img src="" alt="">
<ul>
<li>
<p></p>
</li>
<li></li>
<li></li>
</ul>
</div>
<div class="center">
<input type="text" placeholder="北京新增本土8例无症状4例">
</div>
<div class="right">
<img src="" alt="">
<p>无障碍</p>
<p>登录</p>
</div>
</div>
<div class="content">
<div><img src="" alt="">
<p>好问题广场</p>
</div>
<div class="left">
<img src="" alt="">
<p>登录</p>
</div>
<div class="right">
<p></p>
<ul>
<li>
<p></p>
</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,172 @@
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
width: 100%;
height: 100vh;
background-image: url("../img/back.png");
background-size: contain;
position: relative;
overflow: hidden;
user-select: none;
}
.result {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 30px;
z-index: 999;
}
.s_normal {
font-size: 30px;
color: aliceblue;
}
.s_hard {
font-size: 30px;
color: aliceblue;
}
.fanhui {
font-size: 30px;
color: aliceblue;
}
.pifu img {
width: 34px;
height: 24px;
margin-left: 10px;
}
.ground {
position: absolute;
width: 100%;
height: 112px;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
.ground img {
position: absolute;
width: 100%;
height: 100%;
}
.bird {
width: 34px;
height: 24px;
position: absolute;
left: 100px;
transition: all linear 0.15s;
z-index: 999;
}
.up {
transform: rotate(-38deg);
}
.down {
transform: rotate(90deg);
}
.sg {
width: 55px;
position: absolute;
}
@keyframes birdShake {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes birdOneMotion {
0% {
background: url("../img/hn1.png");
}
50% {
background: url("../img/hn2.png");
}
100% {
background: url("../img/hn3.png");
}
}
@keyframes birdOneMotion2 {
0% {
background: url("../img/hn4.png");
}
50% {
background: url("../img/hn5.png");
}
100% {
background: url("../img/hn6.png");
}
}
@keyframes birdOneMotion3 {
0% {
background: url("../img/hn7.png");
}
50% {
background: url("../img/hn8.png");
}
100% {
background: url("../img/hn9.png");
}
}
.start {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.start .play {
width: 60px;
margin-top: 20px;
cursor: pointer;
}
.pause {
position: absolute;
left: 20px;
top: 20px;
cursor: pointer;
z-index: 999;
}
.show {
display: block;
}
.hidden {
display: none;
}
audio {
display: none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 358 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1,45 @@
<!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="./css/index.css">
</head>
<body id="body">
<audio class="bgm" src="./sounds/sfx_bgm.ogg" loop></audio>
<audio class="hit" src="./sounds/sfx_hit.ogg"></audio>
<audio class="point" src="./sounds/sfx_point.ogg"></audio>
<div class="result hidden">
</div>
<img class="pause hidden" src="./img/pause.png" alt="">
<div class="start">
<img class="logo" src="./img/title.png" alt="">
<div class="s_normal">普通难度</div>
<div class="s_hard">地狱难度</div>
<div class="fanhui">重新开始</div>
<div class="pifu">
<img class="pifu1" src="./img/hn2.png" alt="">
<img class="pifu2" src="./img/hn5.png" alt="">
<img class="pifu3" src="./img/hn8.png" alt="">
</div>
</div>
<div class="bird bird_one" id="bird" style="top: 0px; animation: birdOneMotion 0.4s linear infinite;"></div>
<div class="ground">
<img class="groundOne" src="./img/diban.png" alt="">
<img class="groundTwo" src="./img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</html>

View File

@@ -0,0 +1,300 @@
class bird {
// 游戏的默认状态 false 未开始 true 开始游戏
gameStatus = false;
innerHeight = window.innerHeight;
innerWidth = window.innerWidth;
// 鸟的下落速度
birdDownSpeed = 8;
// 鸟的上升速度
birdUpSpeed = 40;
// 地板的移动速度
groundSpeed = 5;
// 上下水管的间隙
WaterPipeClearance = 150
// 水管的左右间隙
WaterPipeLeftRightClearance = 300
// 生成水管的X轴位置
WaterPipeX = 0
// 一秒创建多少个水管
createdWaterPipeXTime = 1000
// 总分
TotalScore = 0
birdTheme = "birdOneMotion"
constructor() {
console.log(this.innerWidth);
this.bindEvent();
this.birdAction();
this.groundAction();
this.resultAction()
setInterval(() => {
if (this.gameStatus) {
this.createdWaterPipe();
}
}, this.createdWaterPipeXTime)
// this.createdWaterPipe();
}
bindEvent() {
click(".s_normal", () => {
$(".bgm").play()
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
this.changeGameStatus()
})
click(".s_hard", () => {
$(".bgm").play()
this.WaterPipeClearance = 100
this.birdDownSpeed = 10
this.birdUpSpeed = 30
this.WaterPipeLeftRightClearance = 200
this.createdWaterPipeXTime = 3000
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
this.changeGameStatus()
})
click(".pause", () => {
this.changeGameStatus()
_(".sg").forEach(v => clearInterval(v.time))
$(".bgm").pause();
})
click(".pifu1", () => {
console.log("点击换皮肤")
this.birdTheme = `birdOneOneMotion`
$(".bird").style.animation = ` birdOneMotion 0.4s linear infinite`
})
click(".pifu2", () => {
console.log("点击换皮肤2")
this.birdTheme = `birdOneMotion2`
$(".bird").style.animation = ` birdOneMotion2 0.4s linear infinite`
})
click(".pifu3", () => {
console.log("点击换皮肤3")
this.birdTheme = `birdOneMotion3`
$(".bird").style.animation = ` birdOneMotion3 0.4s linear infinite`
})
}
changeGameStatus() {
if (this.gameStatus) {
$(".start").remove("hidden")
$(".pause").add("hidden")
this.gameStatus = false
} else {
$(".result").remove("hidden")
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite`
$(".start").add("hidden")
$(".pause").remove("hidden")
this.gameStatus = true
}
}
resultAction() {
var TotalScoreArr = String(this.TotalScore).split("")
$(".result").innerHTML = ""
TotalScoreArr.forEach(v => {
$(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
BumpGround(type) {
var GroundYStart = this.innerHeight - 112;
if (type = 1) {
GroundYStart -= 34
}
var birdBTop = $(".bird").offsetTop + $(".bird").offsetHeight;
if (birdBTop >= GroundYStart) {
console.log("碰到地板了");
this.gameOver();
}
}
birdAction() {
var clcikTime = 0, currentTime = 0;
// 设置鸟的初始位置
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
setInterval(() => {
if (this.gameStatus) {
this.BumpGround("1")
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`;
}
}, 1000 / 16)
click("body", () => {
if (this.gameStatus) {
this.BumpGround("2")
clcikTime = (new Date()).getTime()
$(".bird").add("up")
$(".bird").remove("down")
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`
}
})
setInterval(() => {
if (this.gameStatus) {
currentTime = (new Date()).getTime();
if (currentTime - clcikTime > 300) {
$(".bird").add("down")
$(".bird").remove("up")
}
}
}, 300)
}
groundAction() {
$(".groundOne").style.left = '0px';
$(".groundTwo").style.left = `${this.innerWidth}px`;
setInterval(() => {
$(".groundOne").style.left = `${parseInt($(".groundOne").style.left) - this.groundSpeed}px`
$(".groundTwo").style.left = `${parseInt($(".groundTwo").style.left) - this.groundSpeed}px`
if (parseInt($(".groundOne").style.left) <= -this.innerWidth) {
$(".groundOne").style.left = `${this.innerWidth}px`
}
if (parseInt($(".groundTwo").style.left) <= -this.innerWidth) {
$(".groundTwo").style.left = `${this.innerWidth}px`
}
}, 1000 / 16)
}
createdWaterPipe() {
var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
if (this.WaterPipeX == 0) {
this.WaterPipeX = this.innerWidth
} else {
this.WaterPipeX += this.WaterPipeLeftRightClearance
}
var cretedImg = (type) => {
var img = document.createElement("img");
img.src = `./img/${type == "top" ? 'sg_t' : 'sg_b'}.png`;
img.className = "sg"
img.style = `
${type}: ${type == "top" ? 0 : 112}px;
height: ${type == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
left: ${this.WaterPipeX}px
`;
return img
}
var TopWaterPipe = cretedImg("top")
var BottomWaterPipe = cretedImg("bottom")
$("body").appendChild(TopWaterPipe)
$("body").appendChild(BottomWaterPipe)
this.WaterPipeMove(TopWaterPipe)
this.WaterPipeMove(BottomWaterPipe)
}
WaterPipeMove(img) {
img.time = setInterval(() => {
img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
if (parseInt(img.style.left) <= -55) {
try {
clearInterval(img.time)
$("body").removeChild(img)
} catch (error) { }
} else {
this.collision($(".bird"), img)
}
}, 1000 / 30)
}
/**
* 碰撞检测
* @param {*} el1 鸟
* @param {*} el2 水管
*/
collision(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
console.log('碰撞成功')
this.gameOver();
} else {
if ((el2.offsetLeft + el2.offsetWidth) == 101) {
this.TotalScore += 0.5
if (!String(this.TotalScore).includes(".")) {
console.log("==========分数=======: ", this.TotalScore);
$(".point").play()
this.resultAction()
}
if (this.TotalScore == 10) {
console.log("分数大于10分 可以修改背景")
$("body").style.backgroundImage = `url("./img/back2.png") `
}
}
}
}
gameOver() {
$(".hit").play()
this.changeGameStatus()
_(".sg").forEach(v => clearInterval(v.time))
var gameOver = document.createElement("img")
gameOver.src = "./img/gameover.png"
$(".start").replaceChild(gameOver, $(".logo"))
click(".fanhui", () => location.reload())
click(".s_normal", () => location.reload())
click(".s_hard", () => location.reload())
}
}
new bird()

View File

@@ -0,0 +1,29 @@
class Util {
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
}
click(className,callback) {
$(className).onclick = () => {
callback()
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject } = new Util()
inject()

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