bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
历届学生/fontendsix/项目练习/上课项目/美食杰/css/Classification.css Normal file
View File

0
历届学生/fontendsix/项目练习/上课项目/美食杰/css/VideoDetails.css Normal file
View File

67
历届学生/fontendsix/项目练习/上课项目/美食杰/css/clear.css Normal file
View File

@@ -0,0 +1,67 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
/* font-size: 0; */
}
a {
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
input {
outline: none;
border: none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img { border:0;}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 {
font-size:200%;
font-weight:normal;
}
:focus { outline: 0;}
a{ text-decoration:none;}
a:hover img{ border:none;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
input,button,select,textarea{outline:none}
textarea{resize:none}
::-webkit-scrollbar {
width: 0;
height: 0;
}
/* .swiper-wrapper .swiper-slide {
height: calc(100vh - 1.6rem - 1rem);
overflow-y: scroll;
} */

19
历届学生/fontendsix/项目练习/上课项目/美食杰/css/collect.css Normal file
View File

@@ -0,0 +1,19 @@
.header{
position: fixed;
display: flex;
justify-content: space-between;
width: 100%;
height: 2.25rem;
background: #fff;
padding: 0px .8rem;
box-sizing: border-box;
align-items: center;
border-bottom: 1px solid #f5f5f5;
z-index: 999;
overflow: hidden;
}
.right{
color: #000;
font-weight: 600;
}

11
历届学生/fontendsix/项目练习/上课项目/美食杰/css/index.css Normal file
View File

@@ -0,0 +1,11 @@
.active {
color: red;
}
.swiper-slide {
display: flex;
}
.swiper-slide img {
width: 49%;
height: 223px;
}

74
历届学生/fontendsix/项目练习/上课项目/美食杰/css/index_wam.css Normal file
View File

@@ -0,0 +1,74 @@
.swiper-slide {
display: flex;
}
.banner img {
width: 100%;
}
.food_title {
padding-top: 16px;
padding-left: 16px;
font-size: 16px;
font-weight: 600;
color: #999;
line-height: 22px;
}
.food_list {
padding-top: 16px;
padding-left: 16px;
display: flex;
margin-bottom: 10px;
height: 42px;
align-items: baseline;
}
.food_list li {
position: relative;
font-size: 16px;
margin-right: 20px;
color: #666;
}
.active {
font-size: 30px !important;
font-weight: 600 !important;
color: #333 !important;
line-height: 36px !important;
}
.active:after {
content: " ";
height: 6px;
border-radius: 3px;
width: 100%;
left: 0px;
bottom: -7px;
background: #ff9d9b;
position: absolute;
z-index: 50;
display: block;
}
.menu {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.menu li {
width: 20%;
text-align: center;
}
.menu img {
width: 50px;
height: 50px;
}
.menu p {
font-size:12px;
color: #666;
}

75
历届学生/fontendsix/项目练习/上课项目/美食杰/css/indext.css Normal file
View File

@@ -0,0 +1,75 @@
.active {
color: red;
font-size: 25px !important;
font-weight: 600 !important;
color: #333 !important;
line-height: 36px !important;
}
.swiper-slide {
display: flex;
justify-content: space-evenly;
}
.swiper-slide img {
width: 100%;
height: 223px;
}
.test{
padding-top: 16px;
padding-left: 16px;
display: flex;
margin-bottom: 10px;
height: 42px;
align-items: baseline;
}
.test li{
position: relative;
font-size: 16px;
margin-right: 20px;
color: #666;
}
.content{
margin-top: 72px;
}
.active:after {
content: " ";
height: 6px;
border-radius: 3px;
width: 100%;
left: 0px;
bottom: -7px;
background: #ff9d9b;
position: absolute;
z-index: 50;
display: block;
}
.banner img {
width: 100%;
height: 168px;
}
.everyfood_titlie {
padding-top: 16px;
padding-left: 16px;
font-size: 16px;
font-weight: 600;
color: #999;
line-height: 22px;
}
.menu {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.menu li {
width: 20%;
text-align: center;
}
.menu img {
width: 50px;
height: 50px;
}
.menu p {
font-size: 12px;
color: #666;
}

276
历届学生/fontendsix/项目练习/上课项目/美食杰/css/indexx.css Normal file
View File

@@ -0,0 +1,276 @@
.header{
align-items: center;
background: #fff;
padding: 0.5rem;
box-sizing: border-box;
height: 2.25rem;
position: fixed;
width: 100%;
z-index: 999;
display: flex;
}
.header a{
margin: 0;
border: 0;
padding: 0;
font-style: normal;
color: #0062cc;
text-decoration: none;
background-color: transparent;
}
.iconfont{
color: #666;
font-size: .9rem !important;
}
.header a:nth-child(2) {
width: 90%;
}
.header input{
width: 100%;
height: 1.5rem;
border: none;
padding-left: .95rem;
margin-left: .5rem;
background: #f1f1f4;
border-radius: 1.5rem;
font-size: .75rem;
}
.content{
margin-bottom: 3rem;
padding-top: 2.5rem;
}
.swiper-wrapper .swiper-slide img{
width: 100%;
}
.banner{
height: 170px;
}
.list{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.list li{
width: 20%;
text-align: center;
}
.list li a{
color: #0062cc;
text-decoration: none;
background-color: transparent;
}
.list li a{
color: #0062cc;
text-decoration: none;
background-color: transparent;
}
.list li a img{
width: 2.5rem;
height: 2.5rem;
}
.list_text{
font-size: .6rem;
color: #666;
}
.active::after{
content: '';
height: .3rem;
border-radius: .15rem;
width: 100%;
left: 0px;
bottom: .15rem;
background: #ff9d9b;
position: absolute;
z-index: 50;
display: block;
}
.meals{
margin-top: 1.6rem;
padding: 0 .8rem;
}
.meals_top{
font-size: .9rem;
font-weight: 600;
color: #999;
line-height: 1.1rem;
margin-bottom: .5rem;
}
.meals_list li{
position: relative;
font-size: .8rem;
margin-right: 1rem;
color: #666;
}
.meals_list{
display: flex;
margin-bottom: .5rem;
align-items: flex-end;
}
.active{
font-size: 1.4rem !important;
color: #333 !important;
}
.meals .meals_li a{
color: #0062cc;
text-decoration: none;
background-color: transparent;
}
.meals .swiper-container{
height:280px;
}
.meals .swiper-wrapper .swiper-slide{
display: flex;
justify-content: space-between
}
.meals .meals .meals_text{}
.meals_text img{
width: 8.35rem;
height: 11.9rem;
border-radius: .35rem;
}
.meals_name{
margin-top: .5rem;
font-size: .9rem;
font-weight: 600;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 167px;
}
.text{
padding: 0 .15rem;
background: #ff8d8d;
color: #fff;
font-size: .4rem;
}
.tips{
font-size: .55rem;
color: #ff8d8d;
line-height: .7rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
background: #fff2f2;
border-radius: .1rem;
padding: .2rem .3rem;
}
.recommend{
margin-top: 1.6rem;
padding: 0 .8rem;
}
.recommend_text{
font-size: 1.25rem;
font-weight: 600;
color: #333;
line-height: 1.8rem;
margin-bottom: .8rem;
}
.recommend ul{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.recommend ul li{
width: 5.2rem;
box-shadow: 0px 0px 0.6rem rgb(0 0 0 / 10%);
background: #fff;
border-radius: 1.05rem;
margin-bottom: 1rem;
}
.recommend_active {
background: #fe9b95 !important;
box-shadow: 0px 0px 0.6rem rgb(255 155 149 / 50%) !important;
}
.recommend li a{
display: flex;
align-items: center;
justify-content: center;
color: #0062cc;
text-decoration: none;
background-color: transparent;
}
.recommend img{
width: .9rem;
height: .9rem;
margin-right: .2rem;
line-height: 2rem;
}
.recommend span{
font-size: .6rem;
color: #333;
line-height: 2.1rem;
display: inline-block;
vertical-align: top;
font-weight: 600;
}
.recommend_active span {
color: #fff !important;
}
.together{
padding: 0 .8rem;
}
.publi{
font-size: .8rem;
font-weight: 600;
color: #999;
line-height: 1.1rem;
margin-bottom: .5rem;
}
.together_list{
display: flex;
justify-content: flex-start;
position: relative;
align-items: flex-end;
}
.together_list .active{
font-size: 1.4rem !important;
color: #333 !important;
}
.together_list li{
margin-right: 1rem;
font-size: .8rem;
color: #666;
cursor: pointer;
position: relative;
}
.together_list .active::after {
content: '';
height: .3rem;
border-radius: .15rem;
width: 100%;
left: 0px;
bottom: .15rem;
background: #ff9d9b;
position: absolute;
z-index: 50;
display: block;
}
.together_bott{
width: 100%;
margin-top: .5rem;
}
.together_bott .together_act {
margin-bottom: .8rem;
-webkit-column-gap:0.1rem;
-moz-column-gap:o.1rem;
-o-column-gap: .6rem;
}

268
历届学生/fontendsix/项目练习/上课项目/美食杰/css/info.css Normal file
View File

@@ -0,0 +1,268 @@
body{
background: #fafafa;
}
.bannerone {
height: 18.75rem;
position: relative;
}
.img_back {
height: 100%;
overflow: hidden;
}
.nav {
display: flex;
justify-content: space-between;
padding: 0 0.8rem;
box-sizing: border-box;
position: fixed;
width: 100%;
top: .8rem;
z-index: 999;
}
.nav .menu {
height: 1.5rem;
padding: 0 .6rem;
background: rgba(0,0,0,0.5);
border-radius: .75rem;
z-index: 14565269565;
}
.nav .menu a p {
line-height: 1.5rem;
font-size: .7rem;
color: #fff;
}
.bannerone img{
width: 100%;
position: relative;
top: -3.3rem;
}
.infolist {
margin: .8rem;
padding: 1rem .75rem .5rem;
background: #fff;
box-sizing: border-box;
position: relative;
box-shadow: 0px 0px 1.6rem rgba(0,0,0,0.1);
border-radius: .8rem;
margin-top: -3rem;
z-index: 999;
}
.infolist .infotitle{
display: flex;
justify-content: space-between;
align-items: center;
}
.infolist h1 h2{
font-size: 1.4rem;
font-weight: 700;
color: #333;
}
.infolist .infotitle i{
font-size: 1.25rem;
}
.infolist .pti{
font-size: .6rem;
color: #999;
line-height: 1rem;
display: block;
padding: .2rem 0px 0px;
border-bottom: 1px solid #f5f5f5;
padding-bottom: .5rem;
}
.bacno {
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.bacno li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.bacno p {
font-size: .6rem;
color: #666666;
}
.bacno .i{
height: 1.5rem;
width: 1.5rem;
background-position: 0px -1.5rem;
background: url("https://st-cn.meishij.net/p2/20200221/20200221173101_145.png");
background-size: 1.5rem 7.5rem;
}
.litext {
overflow: hidden;
height: 2.1rem;
font-weight: 400;
text-align: justify;
font-size: .7rem;
color: #999999;
line-height: 1.05rem;
margin-top: 1rem;
position: relative;
}
.litext .more {
position: absolute;
right: 0;
bottom: 0;
padding-left: 3rem;
font-size: .7rem;
color: #5a92f5;
background-image: linear-gradient(to right,rgba(255,255,255,0.1),rgba(255,255,255,0.5),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1));
}
.icon-houtui-copy-copy {
font-size: .6rem !important;
}
.ms {
margin-top: 1rem;
}
.ms .main{
margin-bottom: .75rem;
}
.ms .top{
margin-bottom: .35rem;
border-bottom: 1px solid rgba(0,0,0,0.05);
padding-bottom: .5rem;
}
.ms .top span {
color: #999;
font-size: .6rem;
padding-left: .3rem;
font-weight: 300;
}
.ms ul li{
display: flex;
justify-content: space-between;
height: 1.75rem;
align-items: center;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ms ul li span{
font-size: .7rem;
color: #999;
font-weight: 400;
}
.content {
margin-top: 1rem;
}
.content_li li {
position: relative;
}
.content_li li .step{
height: 2rem;
line-height: 2rem;
color: #333;
font-size: .9rem;
font-weight: 700;
display: inline-block;
vertical-align: top;
padding: 0px 1rem 0px .75rem;
background: rgba(255,255,255,0.9);
position: absolute;
left: 0px;
top: .75rem;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
z-index: 100;
}
.content_li li img{
width: 100%;
}
.content_li li p{
padding: .75rem .75rem .75rem;
box-sizing: border-box;
}
.outside{
padding-left: .8rem;
padding-right: .8rem;
box-sizing: border-box;
margin-bottom: 2.5rem;
}
.outside_li{
height: 2.5rem;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.outside_li h3{
font-weight: 600;
}
.outside_li a{
font-size: .6rem;
color: #f15e51;
}
.outside ul{
padding: 1rem .8rem;
background: #fff;
border-radius: 16px;
box-shadow: 0px 0px 32px rgba(0,0,0,0.1);
overflow: hidden;
}
.outside ul li{
margin-right: .5rem;
float: left;
text-align: center;
margin-bottom: .3rem;
}
.outside ul li:nth-child(3n){
margin-right: 0px;
}
.outside ul li img{
width: 4.85rem;
height: 4.85rem;
margin-bottom: .5rem;
border-radius: 8px;
}
.outside ul li p{
font-size: 14px;
color: #000;
}
.remode{
padding-left: .8rem;
padding-right: .8rem;
box-sizing: border-box;
margin-bottom: 2.5rem;
}
.remode ul{
padding: 1rem .8rem;
background: #fff;
border-radius: 16px;
box-shadow: 0px 0px 32px rgba(0,0,0,0.1);
}
.remode ul li{
margin-bottom: .8rem;
}
.remode ul li a{
display: flex;
}
.remode ul li img{
width: 7.2rem;
height: 4.8rem;
border-radius: .4rem;
margin-right: .8rem;
}
.remode ul li .recommend_left{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.remode ul li .recommend_left h3{
font-size: 17px;
color: #000;
font-weight: 400;
}
.remode ul li .recommend_left p{
font-size: 12px;
color: #949494;
}
body {
line-height: 1.5;
font-size: 0.8rem;
color: #212121;
outline: 0;
}

0
历届学生/fontendsix/项目练习/上课项目/美食杰/css/like.css Normal file
View File

90
历届学生/fontendsix/项目练习/上课项目/美食杰/css/my.css Normal file
View File

@@ -0,0 +1,90 @@
body{
background: #f5f5f5;
}
.header{
width: 100%;
height: 9.5rem;
background: url(../img/likebeijing.png) no-repeat center;
background-size: 100% 100%;
}
.center{
margin: auto;
width: 300px;
padding-top: 20px;
color: #fff;
font-size: 16px;
}
.header_top{
width: 100%;
display: flex;
align-items: center;
}
.header_top img{
height: 66px;
width: 66px;
border: 3px solid rgba(255,255,255,0.5);
border-radius: 100%;
margin-right: 10px;
}
.header_text p{
font-size: 16px;
}
.header_text span{
font-size: 12px;
}
.header_bott{
display: flex;
width: 100px;
font-size: 12px;
height: 24px;
line-height: 22px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(255,255,255,0.2);
padding: 0px 12px;
margin-left: 82px;
}
.header_bott p{
margin-right: 5px;
}
.info li a{
height: 100%;
justify-content: space-between;
display: flex;
align-items: center;
}
.info li{
padding: 0 .8rem;
box-sizing: border-box;
width: 100%;
height: 44px;
background: #fff;
border-bottom: 1px solid #f5f5f5;
}
.info li:nth-child(3){
margin-top: .5rem;
}
.info li:nth-child(2){
margin-top: .5rem;
}
.info_left{
display: flex;
align-items: center;
font-size: 16px;
color: #333;
}
.info_left img{
width: 1.35rem;
height: 1.35rem;
margin-right: .5rem;
}
.info_right{
display: flex;
align-items: center;
}
.info_right span{
font-size: 20px;
color: #666;
}

251
历届学生/fontendsix/项目练习/上课项目/美食杰/css/public.css Normal file
View File

@@ -0,0 +1,251 @@
.wf-father {
font-size: 0px;
min-height: 1000 px;
width: 100vw;
}
.wf-item {
height: auto;
overflow: hidden;
padding: 0px 5px 16px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
float: left;
width: 50%;
box-sizing: border-box;
}
.wf-itemw {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
border-radius: 7px;
overflow: hidden;
display: block;
}
.img-one {
object-fit: cover;
width: 100%;
height: 60vw;
}
.wf-item-top {
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.wf-item-top .vicon {
height: 20px;
width: 20px;
background: url(https://st-cn.meishij.net/p2/20181206/20181206143142_460.png)
0px 0px no-repeat;
background-size: 20px 40px;
right: 10px;
top: 10px;
position: absolute;
z-index: 100;
}
.wf-item-content {
background: #fff;
padding-bottom: 12px;
}
.wf-title {
font-size: 16px;
color: #333;
font-weight: 600;
line-height: 22px;
padding: 10px 10px 0px 10px;
position: relative;
}
<<<<<<< HEAD
.footer {
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
z-index: 999;
bottom: 0;
left: 0;
right: 0;
background: #fff;
width: 100%;
height: 1rem;
border-top: 0.02rem solid #e8ebec;
}
.footer li {
text-align: center;
=======
.wf-des {
background: #fff2f2;
border-radius: 2px;
position: relative;
margin: 12px 10px 0px 10px;
padding: 4px 6px 4px 6px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
>>>>>>> a1acf77c888621bca27fc7cd2737afcd7d471271
}
.wf-des .t {
font-size: 8px;
line-height: 12px;
height: 12px;
border-radius: 2px;
color: #fff;
position: absolute;
left: 0px;
top: -13px;
padding: 0px 3px;
font-weight: 600;
background: #ff8d8d;
border-bottom-left-radius: 0px;
}
.wf-des-rel {
font-size: 11px;
color: #ff8d8d;
line-height: 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.wf-item-content-bottom {
height: 18px;
margin: 20px 10px 0px;
position: relative;
}
.wf-item-bottom-left {
font-size: 0px;
}
.wf-item-bottom-left img {
height: 18px;
width: 18px;
border-radius: 9px;
overflow: hidden;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
display: inline-block;
vertical-align: top;
}
.wf-item-bottom-left span {
display: inline-block;
vertical-align: top;
height: 18px;
line-height: 18px;
font-size: 9px;
color: #666;
padding-left: 5px;
max-width: 45%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wf-item-bottom-right {
position: absolute;
right: 0px;
top: 0px;
height: 18px;
padding-left: 15px;
line-height: 18px;
color: #666;
font-size: 9px;
}
.wf-item-bottom-right-i {
position: absolute;
left: 0px;
top: 4px;
height: 10px;
width: 13px;
background: url(https://st-cn.meishij.net/p2/20181206/20181206143142_460.png) -4px -20px
no-repeat;
background-size: 20px 40px;
}
.img-four {
left: 0px;
top: 0px;
z-index: 10;
width: 100%;
height: 60vw;
}
.img-four img {
display: block;
height: 49.55%;
width: 49.5%;
position: absolute;
}
.img-four img:nth-child(1) {
left: 0px;
top: 0px;
}
.img-four img:nth-child(2) {
right: 0px;
top: 0px;
}
.img-four img:nth-child(3) {
left: 0px;
bottom: 0px;
}
.img-four img:nth-child(4) {
right: 0px;
bottom: 0px;
}
.mount {
height: 22px;
line-height: 22px;
padding: 0px 6px;
border-radius: 2px;
background: #fff;
position: absolute;
left: 10px;
bottom: 10px;
font-size: 12px;
color: #333;
font-weight: 600;
z-index: 100;
}
.header_screah{
width: 100%;
height: 72px;
}
.header_screahtop{
width: 100%;
height: 72px;
position: fixed;
left: 0px;
top: 0px;
background: #fff;
z-index: 1000;
}
.header_screahtop{
height: 40px;
display: block;
background: #f5f5f5;
border-radius: 4px;
margin: 16px;
width: 91%;
font-size: 16px;
color: #999;
line-height: 40px;
}
.header_screahtop span{
display: inline-block;
background-size: 16px 16px;
height: 18px;
width: 18px;
margin: 1px 8px 0px 16px;
}
.header_screahtop input{
background-color: #f5f5f5;
}

72
历届学生/fontendsix/项目练习/上课项目/美食杰/css/search.css Normal file
View File

@@ -0,0 +1,72 @@
.header{
position: fixed;
display: flex;
justify-content: space-between;
width: 100%;
height: 2.5rem;
background: #fff;
padding: 0px .8rem;
box-sizing: border-box;
align-items: center;
border-bottom: 1px solid #f5f5f5;
z-index: 999;
overflow: hidden;
}
.header div{
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 1.5rem;
background: #ff4c39;
border-radius: .1rem;
color: #fff;
font-size: .7rem;
}
.search_input{
padding-left: .95rem;
width: 60%;
height: 1.5rem;
background: #eee;
color: #333;
font-size: .7rem;
display: block;
line-height: 1.2rem;
border: 0px;
outline: none;
}
.content{
padding-top: 2.5rem
}
.content ul li{
height: 5.5rem;
border-bottom: 1px solid #ccc;
padding: .8rem;
box-sizing: border-box;
}
.content ul li a{
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.imgs{
width: 6rem;
height: 4rem;
position: relative;
overflow: hidden;
margin-right: .5rem;
}
.text h3{
font-size: .9rem;
color: #333;
padding-bottom: 1.75rem;
}
.text p{
font-size: .7rem;
color: #999;
}

13
历届学生/fontendsix/项目练习/上课项目/美食杰/css/swiper-bundle.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

61
历届学生/fontendsix/项目练习/上课项目/美食杰/css/type.css Normal file
View File

@@ -0,0 +1,61 @@
.content {
height: 100vh;
/* padding-top: ; */
}
.left_menu {
width: 80px;
height: 100%;
float: left;
overflow-y: scroll;
background: #f5f5f5;
}
.active_menu {
background: #fff !important;
}
.left_menu .img {
margin: 0 auto;
height: 25px;
width: 25px;
background: url("https://s1.st.meishij.net/p2/20191108/20191108113258_481.png");
background-position: 0 0;
background-size: 25px 500px;
}
.left_menu li {
height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.left_menu li p{
font-size: 12px;
color: #333;
margin-top: 4px;
}
.right_content {
width: calc(100% - 80px);
height: 100%;
float: left;
overflow-y: scroll;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-content: baseline;
}
.right_content li {
width: 33%;
height: 90px;
text-align: center;
}
.right_content li img{
width: 62px;
height: 62px;
}
.right_content li p{
font-size: 12px;
color: #333;
}
.active {
background: #fff !important;
}

0
历届学生/fontendsix/项目练习/上课项目/美食杰/css/video.css Normal file
View File

BIN
历届学生/fontendsix/项目练习/上课项目/美食杰/img/fabu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/fontendsix/项目练习/上课项目/美食杰/img/gywm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
历届学生/fontendsix/项目练习/上课项目/美食杰/img/likebeijing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
历届学生/fontendsix/项目练习/上课项目/美食杰/img/t_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 912 B

BIN
历届学生/fontendsix/项目练习/上课项目/美食杰/img/touxiang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
历届学生/fontendsix/项目练习/上课项目/美食杰/img/wode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/fontendsix/项目练习/上课项目/美食杰/img/xiaoxi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

95
历届学生/fontendsix/项目练习/上课项目/美食杰/js/ajax/index.js Normal file
View File

@@ -0,0 +1,95 @@
class AjAX {
constructor() {
this.xhr = new XMLHttpRequest();
}
/**
*
* @param {*} params
* url: 字符串 请求地址，
* data: 对象
*/
get(params) {
return new Promise((success, error) => {
$.ajax({
type: "GET",
url: `${config.checkStage()}${params.url}`,
data: params.data,
success: (msg) => this.readystatechange(success, error, msg)
});
})
}
post(params) {
return new Promise((success, error) => {
$.ajax({
type: "POST",
url: `${config.checkStage()}${params.url}`,
data: params.data,
success: (msg) => this.readystatechange(success, error, msg)
});
})
}
readystatechange(success, error, res) {
// 业务逻辑状态码的判断
switch (res.status) {
case 200:
success(res.result || res.data)
break;
case 404:
alert(res.message)
throw new Error(res.message)
break;
default:
break;
}
}
}
// a.get({
// url: '/index/class',
// data: {
// type: 1,
// page: 1
// },
// success: (res) => {
// console.log("拿到的数据为：", res);
// },
// error: (err) => {
// console.log("请求出错了：", err);
// }
// });
// function test() {
// return new Promise(function (success, error) {
// var a = 1
// setTimeout(() => {
// a += 1;
// success(a)
// }, 3000)
// })
// }
// var dd = async () => {
// // test()
// // .then((res) => {
// // console.log(res);
// // })
// // .catch()
// var num = await test();
// console.log(num);
// }
// dd()
// 回调地狱
// 异步返回值 回调 promise
// 系统级别判断
// await indexService.class({ type: 1, page: 1 })

54
历届学生/fontendsix/项目练习/上课项目/美食杰/js/config/index.js Normal file
View File

@@ -0,0 +1,54 @@
var config = {
// 开发阶段的请求基地址
devBaseUrl: 'http://127.0.0.1:3000/api',
// 测试阶段的请求基地址
testBaseUrl: 'http://127.0.0.1:3000/test/api',
// 上线阶段的请求基地址
prodBaseUrl: 'http://127.0.0.1:3000/prod/api',
stage: "dev", // dev test prod
apiList: {
threeMeals: '/index/threeMeals', // 每日三餐
saerch:'/search/list',//搜索
banner1:'/index/banner',
typee:'/index/type',//九宫格
threeMealss:'/index/threeMeals',//每日三餐
indexType:'/index/class', // 首页获取分类数据接口
videoList:'/video/list' ,// 菜谱视频大全列表
indexx:'/index/class',
videoList:'/video/list', // 菜谱视频大全列表
indexBanner:'/index/banner', // 获取banner图
indexInfo:'/index/info',//详情
type:'/type/leftMenu', //分类左
typer:'/type/rightMenu', //分类右
typerl:'/type/rightMenuList', //分类右小分类
},
// 底部导航
footerArr: [
{ title: '首页', icon: 'icon-home', path: 'index.html' },
{ title: '视频', icon: 'icon-jigou', path: 'video.html' },
{ title: '分类', icon: 'icon-me', path: 'type.html' },
{ title: '收藏', icon: 'icon-wo', path: 'like.html' },
],
checkStage: function () {
switch (this.stage) {
case "dev":
return this.devBaseUrl;
break;
case "test":
return this.testBaseUrl;
break;
case "prod":
return this.prodBaseUrl;
break;
}
}
}

201
历届学生/fontendsix/项目练习/上课项目/美食杰/js/lib/PhotoSwipeFromDOM.js Normal file
View File

@@ -0,0 +1,201 @@
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; // <figure> element
// include only element nodes
if(figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0]; // <a> element
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if(figureEl.children.length > 1) {
// <figcaption> content
item.title = figureEl.children[1].innerHTML;
}
if(linkEl.children.length > 0) {
// <img> thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
if(!clickedListItem) {
return;
}
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if(childNodes[i].nodeType !== 1) {
continue;
}
if(childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if(index >= 0) {
// open PhotoSwipe if valid index found
openPhotoSwipe( index, clickedGallery );
}
return false;
};
// parse picture index and gallery index from URL (#&pid=1&gid=2)
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) {
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if(!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if(params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options -> getThumbBoundsFn section of documentation for more info
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
}
};
// PhotoSwipe opened from URL
if(fromURL) {
if(options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for(var j = 0; j < items.length; j++) {
if(items[j].pid == index) {
options.index = j;
break;
}
}
} else {
// in URL indexes start from 1
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if( isNaN(options.index) ) {
return;
}
if(disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
// loop through all gallery elements and bind events
var galleryElements = document.querySelectorAll( gallerySelector );
for(var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i+1);
galleryElements[i].onclick = onThumbnailsClick;
}
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if(hashData.pid && hashData.gid) {
openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
}
};

2
历届学生/fontendsix/项目练习/上课项目/美食杰/js/lib/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
历届学生/fontendsix/项目练习/上课项目/美食杰/js/lib/masonry.pkgd.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

17
历届学生/fontendsix/项目练习/上课项目/美食杰/js/lib/onscroll.js Normal file
View File

@@ -0,0 +1,17 @@
function OnScrollBottom(className, callback, type = "2") {
if (type == 1) {
$(className).onscroll = function () {
if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
callback()
}
};
} else {
_(className).forEach((v, i) => {
v.onscroll = function () {
if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
callback()
}
};
})
}
}

4
历届学生/fontendsix/项目练习/上课项目/美食杰/js/lib/photoswipe-ui-default.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
历届学生/fontendsix/项目练习/上课项目/美食杰/js/lib/photoswipe.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
历届学生/fontendsix/项目练习/上课项目/美食杰/js/lib/rem.js Normal file
View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 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";
}

13
历届学生/fontendsix/项目练习/上课项目/美食杰/js/lib/swiper-bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

0
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/Classification.js Normal file
View File

0
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/VideoDetails.js Normal file
View File

18
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/collect.js Normal file
View File

@@ -0,0 +1,18 @@
class collect{
constructor(){
this.getcollect()
}
getcollect(){
$(".left").click(function(){
history.back()
})
console.log(111);
}
}
new collect()

51
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/index.js Normal file
View File

@@ -0,0 +1,51 @@
class index {
constructor() {
this.mySwiper = null;
this.GetThreeMeals();
footer()
}
async GetThreeMeals() {
var res = await indexServe.threeMeals();
console.log(res);
res.forEach((v, i) => {
$(".test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
$(".banner .swiper-wrapper").append(`
<div class="swiper-slide">
${v.content.map((item) => {
return `
<img src="${item.img}" alt="">
`
}).toString().replaceAll(",", "")}
</div>
`)
});
var self = this;
$(".test li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
self.mySwiper.slideTo($(this).index())
});
this.initThreeMealsSwiper()
}
initThreeMealsSwiper() {
this.mySwiper = new Swiper('.banner', {
direction: 'horizontal', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
on: {
slideChangeTransitionEnd: function () {
$(".test li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
},
},
})
}
}
new index()

108
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/index_wam.js Normal file
View File

@@ -0,0 +1,108 @@
class index {
constructor() {
this.mySwiper = null;
this.tjmsg = [ { title: '推荐'}, { title: '时令'},{ title: '食肉'}, { title: '素食'}, { title: '烘焙'} ];
this.GetBanner();
this.GetThreeMeals();
this.GetindexType();
this.Getmenu();
}
async Getmenu() {
var res = await indexServe.typee();
res.forEach(v=>{
$(".menu").append(`<li>
<a href="${v.href}">
<img src="${v.img}" alt="">
<p>${v.title}</p>
</a>
</li>`)
})
}
async GetindexType() {
this.tjmsg.forEach((v, i)=>{
$(".tj .food_list").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
});
this.Updatelist();
console.log("11")
var self = this
$(".tj .food_list li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var type = $('.tj .food_list li').index($(this))
self.Updatelist(type+1)
});
}
async Updatelist(type,page){
var res = await indexServe.indexType(
{
type:type,
page:page
}
);
$(".tj .food_content").html("");
FoodList(res,$(".tj .food_content"))
}
async GetBanner() {
var res = await indexServe.indexBanner();
res.forEach(v=>{
$(".banner .swiper-wrapper").append(`<div class="swiper-slide">
<a href="${v.url}">
<img src="${v.img}" alt="">
</a>
</div>`)
})
this.initindexBanner();
}
async GetThreeMeals() {
var res = await indexServe.threeMeals();
res.forEach((v, i) => {
$(".threeMeals .food_list").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
});
FoodList(res,$(".threeMeals_content .swiper-wrapper"))
var self = this;
var self = this;
$(".threeMeals .food_list li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
self.mySwiper.slideTo($(this).index())
});
this.initThreeMealsSwiper()
}
initThreeMealsSwiper() {
this.mySwiper = new Swiper('.threeMeals_content', {
// direction: 'horizontal', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
on: {
slideChangeTransitionEnd: function () {
$(".threeMeals .food_list li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
},
},
})
}
initindexBanner() {
var ndexBannerSwiper = new Swiper('.banner', {
// direction: 'horizontal', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
}
}
new index()

112
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/indext.js Normal file
View File

@@ -0,0 +1,112 @@
class indext{
constructor() {
screahtop("搜索百万免费菜谱")
this.mySwiper = null;
this.flistitle = [ { title: '推荐'}, { title: '时令'},{ title: '食肉'}, { title: '素食'}, { title: '烘焙'} ];
this.GetThreeMeals();
this.GetindexType();
this.Getmenu();
this.GetBanner();
}
//头部轮播
async GetBanner() {
var res = await indexServe.indexBanner();
res.forEach(v=>{
$(".banner .swiper-wrapper").append(`<div class="swiper-slide">
<a href="${v.url}">
<img src="${v.img}" alt="">
</a>
</div>`)
})
this.initindexBanner();
}
//菜品分类
async Getmenu() {
var res = await indexServe.typee();
res.forEach(v=>{
$(".menu").append(`<li>
<a href="${v.href}">
<img src="${v.img}" alt="">
<p>${v.title}</p>
</a>
</li>`)
})
}
//分类样式
async GetindexType() {
this.flistitle.forEach((v, i)=>{
$(".flist .test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
});
this.Updatelist();
var self = this
$(".flist .test li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var type = $('.flist .test li').index($(this))
self.Updatelist(type+1)
});
}
async Updatelist(type,page){
var res = await indexServe.indexType(
{
type:type,
page:page
}
);
$(".flist .flist_content").html("");
FoodList(res,$(".flist .flist_content"))
}
//菜品轮播
async GetThreeMeals() {
var res = await indexServe.threeMeals();
console.log(res);
res.forEach((v, i) => {
$(".everyfood .test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
});
FoodList(res,$(".bannertwo .swiper-wrapper"))
var self = this;
var self = this;
$(".everyfood .test li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
self.mySwiper.slideTo($(this).index())
});
this.initThreeMealsSwiper()
}
initThreeMealsSwiper() {
this.mySwiper = new Swiper('.bannertwo', {
// direction: 'horizontal', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
on: {
slideChangeTransitionEnd: function () {
$(".test li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
},
},
})
}
initindexBanner() {
var ndexBannerSwiper = new Swiper('.banner', {
// direction: 'horizontal', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
}
}
new indext()

195
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/indexx.js Normal file
View File

@@ -0,0 +1,195 @@
class banner {
constructor() {
this.index = 0;
this.mySwiper = null;
this.Recommend = [
{
type: 1,
title: '推荐',
content: [],
page: 1
},
{
type: 2,
title: '时令',
content: [],
page: 1
},
{
type: 3,
title: '食肉',
content: [],
page: 1
},
{
type: 4,
title: '素食',
content: [],
page: 1
},
{
type: 5,
title: '烘焙',
content: [],
page: 1
}
];
this.Getbanner()
this.Gettypee()
this.GetthreeMealss()
this.GETRecommend()
this.Getindexx()
}
//开始的轮播图
async Getbanner() {
var res = await indexServe.banner1();
console.log(res);
res.forEach((v, i) => {
$(".banner .swiper-wrapper").append(`
<div class="swiper-slide">
<a href="../html${v.url}">
<img src="${v.img}" alt="">
</a>
</div>
`)
});
this.initBannerSwiper();
}
//九宫格
async Gettypee() {
var res = await indexServe.typee();
res.forEach((v, i) => {
$(".list").append(`
<li>
<a href="./?url=${v.href}">
<img src="${v.img}" alt="">
<p class="list_text">${v.title}</p>
</a>
</li>
`)
});
}
//每日三餐轮播图
async GetthreeMealss() {
var res = await indexServe.threeMealss();
console.log(res);
res.forEach((v, i) => {
$(".meals_list").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
$(".meals .swiper-wrapper").append(`
<div class="swiper-slide">
${v.content.map((item) => {
return `
<a href="">
<div class="meals_text">
<img src="${item.img}" alt="">
<p class="meals_name">${item.title}</p>
<span class="text">养</span>
<p class="tips">${item.des}</p>
</div>
</a>
`
}).toString().replaceAll(",", "")}
</div>`)
})
var self = this;
$(".meals_list li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
self.mySwiper.slideTo($(this).index())
});
this.initThreeMealsSwiper()
}
//大家都在做 渲染
async Getindexx() {
var res = await indexServe.indexx({
type: this.Recommend[this.index].type,
page: this.Recommend[this.index].page
})
FoodList(res, $('.together_act'))
}
// 推荐 时令 食肉……
GETRecommend() {
this.Recommend.forEach((v, i) => {
$(".together_list").append(`
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
`)
})
var a = this;
$(".together_list li").click(function () {
$('.together_act ').html("")
a.index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
a.Getindexx()
});
}
//滚动加载
// scrollLoadData() {
// window.onscroll = async () => {
// var scrollTop = document.documentElement.scrollTop
// var scrollHeight = document.documentElement.scrollHeight
// var clientHeight = document.documentElement.clientHeight
// if (parseInt(scrollHeight - scrollTop) == clientHeight) {
// this.Recommend[this.index].page++;
// await this.Getindexx();
// console.log( this.Recommend[this.index].page++);
// }
// }
// }
//轮播图初始化
initThreeMealsSwiper() {
this.mySwiper = new Swiper('.meals', {
direction: 'horizontal',
// pagination: {
// el: '.swiper-pagination',
// },
on: {
slideChangeTransitionEnd: function () {
$(".meals_list li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
},
},
})
}
initBannerSwiper() {
this.banner = new Swiper('.banner', {
direction: 'horizontal', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
}
}
new banner()

14
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/info.js Normal file
View File

@@ -0,0 +1,14 @@
class info{
constructor () {
this.GetfoodInfo()
}
async GetfoodInfo() {
var res = await indexServe.indexInfo({
url: $_GET("url"),
})
}
}
new info()

9
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/like.js Normal file
View File

@@ -0,0 +1,9 @@
class like {
constructor() {
footer()
}
}
new like()

54
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/search.js Normal file
View File

@@ -0,0 +1,54 @@
class search {
constructor() {
this.page = 1
this.scrollLoadData()
this.search_header()
}
search_header() {
$(".header_return").click(function () {
history.back()
})
$(".header_search").click(async () => {
this.Getser()
})
}
async Getser(){
var res = await indexServe.saerch({
q: $(".search_input").val(),
page:this.page
})
res.forEach(v => {
$(".content .content_list").append(`
<li>
<a href="../info.html?url=${v.href}">
<div class="imgs"><img src="${v.img}" alt=""></div>
<div class="text">
<h3>${v.title}</h3>
<p>${v.des}</p>
</div>
</a>
</li>`)
});
}
scrollLoadData() {
window.onscroll = async ()=>{
var scrollTop = document.documentElement.scrollTop
var scrollHeight = document.documentElement.scrollHeight
var clientHeight = document.documentElement.clientHeight
if (parseInt(scrollHeight - scrollTop) == clientHeight) {
this.page++;
console.log(this.page, "页数");
await this.Getser();
}
}
}
}
new search()

52
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/type.js Normal file
View File

@@ -0,0 +1,52 @@
class type {
constructor(){
this.typeurl = [];
this.Gettype();
// this.Gettyper();
}
async Gettype() {
var res = await indexServe.type();
res.forEach((v, i)=>{
this.typeurl.push(v.url)
$(".left_menu").append(`
<li class="${i == 0 ? 'active' : ''}">
<div class="img" style="background-position: ${v.position};"></div>
<p>${v.title}</p>
</li>
`)
})
this.Gettyper(this.typeurl[0])
var self = this
console.log(this.typeurl)
$(".left_menu li").click(function () {
if($(this).is('.active')){
}else {
$(this).addClass("active").siblings().removeClass("active");
var url = $('.left_menu li').index($(this))
self.Gettyper(self.typeurl[url])
}
});
}
async Gettyper(url){
var res = await indexServe.typer(
{
url:url
}
);
$(".right_content").html("");
res.forEach(v=>{
$(".right_content").append(`
<li>
<a href="${v.id}">
<img src="${v.img}" alt="">
<p>${v.title}</p>
</a>
</li>`)
})
}
}
new type()

9
历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/video.js Normal file
View File

@@ -0,0 +1,9 @@
class video {
constructor() {
footer()
}
}
new video()

0
历届学生/fontendsix/项目练习/上课项目/美食杰/js/service/carService.js Normal file
View File

92
历届学生/fontendsix/项目练习/上课项目/美食杰/js/service/indexService.js Normal file
View File

@@ -0,0 +1,92 @@
class IndexService {
async threeMeals(params) {
return await (new AjAX()).get({
url: config.apiList.threeMeals,
data: params
});
}
async saerch(params) {
return await (new AjAX()).get({
url: config.apiList.saerch,
data: params
});
}
async banner1(params) {
return await (new AjAX()).get({
url: config.apiList.banner1,
data: params
});
}
async typee(params) {
return await (new AjAX()).get({
url: config.apiList.typee,
data: params
});
}
async threeMealss(params) {
return await (new AjAX()).get({
url: config.apiList.threeMealss,
data: params
});
}
async indexType(params) {
return await (new AjAX()).get({
url: config.apiList.indexType,
data: params
});
}
async videoList(params) {
return await (new AjAX()).get({
url: config.apiList.videoList,
data: params
});
}
async indexx(params) {
return await (new AjAX()).get({
url: config.apiList.indexx,
data: params
});
}
async indexBanner(params) {
return await (new AjAX()).get({
url: config.apiList.indexBanner,
data: params
});
}
async indexInfo(params) {
return await (new AjAX()).get({
url: config.apiList.indexInfo,
data: params
});
}
async type(params) {
return await (new AjAX()).get({
url: config.apiList.type,
data: params
});
}
async typer(params) {
return await (new AjAX()).get({
url: config.apiList.typer,
data: params
});
}
async typerl(params) {
return await (new AjAX()).get({
url: config.apiList.typerl,
data: params
});
}
}
var indexServe = new IndexService()

205
历届学生/fontendsix/项目练习/上课项目/美食杰/js/utils/index.js Normal file
View File

@@ -0,0 +1,205 @@
class Utils {
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
footer() {
var currentPath = location.href;
var footerHtml = `
<ul class="footer">
${config.footerArr.map((v, i) => {
return `
<li class="${currentPath.includes(v.path) ? 'footer_active' : ''}">
<a href="${v.path}">
<i class="iconfont ${v.icon}"></i>
<p>${v.title}</p>
</a>
</li>
`
}).toString().replaceAll(",", "")
}
</ul>
`;
$("body").insertAdjacentHTML("beforeend", footerHtml)
}
/**
* 公共的头部
* @param {*} title 头部的中文标题
* @param {*} icon 左边的图标 传html代码
*/
header(title, icon = "") {
var html = `
<div class="header_theme1 theme_color">
<div class="header_theme1_left">
<i class="iconfont icon-back1"></i>
<span>${title}</span>
</div>
<div class="header_theme1_right">
${icon}
</div>
</div>
`;
$("body").innerHTML = html + $("body").innerHTML;
$(".header_theme1_left .icon-back1").onclick = () => history.back()
}
/**
* 搜索
* @param {*} title 中文内容
*/
screahtop(title) {
var html = `
<div class="header_screah">
<div class="header_screahtop">
<a class="header_screahcon">
<span class="iconfont icon-search"></span>
${title}
</a>
</div>
</div>
`;
$("body").append(html);
}
/**
*
* /**
* 详情搜索
* @param {*} title 中文内容
*/
screahinfo() {
var html = `
<div class="header_screah">
<div class="header_screahtop">
<span class="iconfont icon-search"></span>
<input type="text" placeholder="搜索百万免费菜谱">
</div>
</div>
`;
$("body").append(html);
}
/**
*
* @param {*} res ajax请求的返回值
* @param {*} father 父容器
*
* 例 ：
* async do(){
* var res = await indexServe.videoList();
* FoodList(res,$('.had'))
* }
*
*/
FoodList(res, father) {
var html = `
${(Array.isArray(res)) ?
res.map((vv) => {
return `
<div class="wf-father swiper-slide">
${vv.content.map((vvv) => {
return `
<div class="wf-item">
<a class="wf-itemw" href="${vvv.url}">
<div class="wf-item-top">
<img class="img-one" src="${vvv.img}" alt="">
</div>
<div class="wf-item-content">
<div class="wf-title">${vvv.title}</div>
<div class="wf-des">
<div class="t">养</div>
<div class="wf-des-rel">${vvv.des}</div>
</div>
</div>
</a>
</div>
`;
}).toString().replaceAll(",", "")
}
</div>
`;
}).toString().replaceAll(",", "")
: `
<div class="wf-father">
${res.items.map((v) => {
return `
<div class="wf-item">
<a class="wf-itemw" href="${v.path || v.href}">
<div class="wf-item-top">
${v.type == 5 ?
`<div class="img-four">
${v.img.map(item => {
return `<img src="${item}" alt="">`
}).toString().replaceAll(",", "")}
</div>
<div class="mount">${v.total_amount}菜</div>
`
: `<img class="img-one" src="${v.img || v.bd_photo}" alt="">`}
${v.type == 7 || v.hasOwnProperty("intro") ?
`<div class="vicon"></div>`
: ``
}
</div>
<div class="wf-item-content">
<div class="wf-title">${v.title}</div>
${v.type == 5 ? ``
:
`
${('label' in v && v.label != null) ?
`<div class="wf-des">
<div class="t">养</div>
<div class="wf-des-rel">${v.label.desc}</div>
</div>`
: ``
}
<div class="wf-item-content-bottom">
<div class="wf-item-bottom-left">
<img src="${('intro' in v) ? `https://st-cn.meishij.net/user/162/221/ns117912_142372157780527.jpg` : v.author.avatar_url}" alt="">
<span>${('intro' in v) ? `美食杰` : v.author.nickname}</span>
</div>
<div class="wf-item-bottom-right">
<div class="wf-item-bottom-right-i"></div>
<span>${v.click_num || v.viewed_amount}</span>
</div>
</div>
`
}
</div>
</a>
</div>`;
}).toString().replaceAll(",", "")
}`
}
`;
father.append(html);
// $('.wf-father').masonry({
// // options
// itemSelector: '.wf-item',
// columnWidth: 200
// });
}
$_GET(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
}
// 解构赋值
var { footer, $_GET, header, FoodList, screahtop, screahinfo } = new Utils()

0
历届学生/fontendsix/项目练习/上课项目/美食杰/page/Classification.html Normal file
View File

0
历届学生/fontendsix/项目练习/上课项目/美食杰/page/VideoDetails.html Normal file
View File

33
历届学生/fontendsix/项目练习/上课项目/美食杰/page/collect.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/collect.css">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="left">&lt返回</div>
<div class="right">我的收藏</div>
<div class="right1"></div>
</div>
<div>
<ul class="list">
<li>
<a href=""> <img src="" alt=""></a>
<div></div>
</li>
</ul>
</div>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/page/collect.js"></script>
</html>

106
历届学生/fontendsix/项目练习/上课项目/美食杰/page/index.html Normal file
View File

@@ -0,0 +1,106 @@
<!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/lib/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>
<body>
<ul class="test">
</ul>
<div class="swiper-container banner">
<div class="swiper-wrapper">
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<!-- <ul class="ddd">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul> -->
<ul class="footer">
<li>
<a href="">
<i class="iconfont icon-home"></i>
<p>首页</p>
</a>
</li>
<li>
<a href="">
<i class="iconfont icon-jigou"></i>
<p>视频</p>
</a>
</li>
<li>
<a href="">
<i class="iconfont icon-me"></i>
<p>分类</p>
</a>
</li>
<li>
<a href="">
<i class="iconfont icon-wo"></i>
<p>收藏</p>
</a>
</li>
</ul>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/swiper-bundle.min.js"></script>
<script src="../js/lib/masonry.pkgd.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/page/index.js"></script>
<script>
// var a = async function () {
// var res = await indexServe.type();
// console.log(res);
// }
// a()
// var a = document.querySelectorAll(".ddd li")
// a.forEach(v => {
// v.onclick = function () {
// console.log(v.innerText);
// a.forEach(k => {
// k.className = ""
// })
// v.className = "active"
// }
// })
// $(".ddd li").click(function (v) {
// // console.log($(this).text());
// $(this).addClass("active").siblings().removeClass("active")
// });
</script>
</html>

55
历届学生/fontendsix/项目练习/上课项目/美食杰/page/index1.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/lib/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<ul class="footer">
<li>
<a href="">
<i class="iconfont icon-home"></i>
<p>首页</p>
</a>
</li>
<li>
<a href="">
<i class="iconfont icon-jigou"></i>
<p>视频</p>
</a>
</li>
<li>
<a href="">
<i class="iconfont icon-me"></i>
<p>分类</p>
</a>
</li>
<li>
<a href="">
<i class="iconfont icon-wo"></i>
<p>收藏</p>
</a>
</li>
</ul>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/swiper-bundle.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/page/index.js"></script>
</html>

52
历届学生/fontendsix/项目练习/上课项目/美食杰/page/index_wam.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index_wam.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>
<body>
<div class="content">
<div class="swiper-container banner">
<div class="swiper-wrapper"></div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<ul class="menu"></ul>
<div class="threeMeals food">
<div class="food_title">每日三餐</div>
<ul class="food_list"></ul>
<div class="swiper-container threeMeals_content">
<div class="swiper-wrapper"></div>
</div>
</div>
<div class="tj food">
<div class="food_title">大家都在做</div>
<ul class="food_list">
</ul>
<ul class="food_content"></ul>
</div>
</div>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/swiper-bundle.min.js"></script>
<script src="../js/lib/masonry.pkgd.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/page/index_wam.js"></script>
</html>

78
历届学生/fontendsix/项目练习/上课项目/美食杰/page/indext.html Normal file
View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/indext.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>
<body>
<div class="content">
<div class="swiper-container banner">
<div class="swiper-wrapper"></div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<ul class="menu"></ul>
<div class="everyfood">
<div class="everyfood_titlie">每日三餐</div>
<ul class="test"></ul>
<div class="swiper-container bannertwo">
<div class="swiper-wrapper"></div>
</div>
</div>
<div class="flist">
<div class="everyfood_titlie">大家都在做</div>
<ul class="test">
</ul>
<div class="flist_content"></div>
</div>
</div>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/swiper-bundle.min.js"></script>
<script src="../js/lib/masonry.pkgd.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/page/indext.js"></script>
<script>
// var a = async function () {
// var res = await indexServe.type();
// console.log(res);
// }
// a()
// var a = document.querySelectorAll(".ddd li")
// a.forEach(v => {
// v.onclick = function () {
// console.log(v.innerText);
// a.forEach(k => {
// k.className = ""
// })
// v.className = "active"
// }
// })
// $(".ddd li").click(function (v) {
// // console.log($(this).text());
// $(this).addClass("active").siblings().removeClass("active")
// });
</script>
</html>

103
历届学生/fontendsix/项目练习/上课项目/美食杰/page/indexx.html Normal file
View File

@@ -0,0 +1,103 @@
<!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">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2882869_drwz2mflo66.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/indexx.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
<title>Document</title>
</head>
<body>
<div class="header">
<a href="../page/my.html"> <i class="iconfont icon-yonghu"></i></a>
<a href="../page/search.html"><input type="text" name="" id="" placeholder="输入关键词"></a>
</div>
<div class="content">
<div class="swiper-container banner">
<div class="swiper-wrapper">
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<ul class="list">
</ul>
<div class="meals">
<div class="meals_top">每日三餐</div>
<ul class="meals_list">
</ul>
<div class="swiper-container meals">
<div class="swiper-wrapper">
</div>
</div>
</div>
<div class="recommend">
<div class="recommend_text">为你推荐</div>
<ul class="recommend">
<li class="recommend_active">
<a href="">
<img src="../img/t_1.png" alt="">
<span>每日优惠</span>
</a>
</li>
<li >
<a href="">
<img src="../img/gywm.png" alt="">
<span>食材大全</span>
</a>
</li>
<li >
<a href="">
<img src="../img/gywm.png" alt="">
<span>热门专题</span>
</a>
</li>
<li >
<a href="">
<img src="../img/gywm.png" alt="">
<span>彩票分类</span>
</a>
</li>
<li >
<a href="">
<img src="../img/gywm.png" alt="">
<span>本周流行</span>
</a>
</li>
<li >
<a href="">
<img src="../img/gywm.png" alt="">
<span>视频菜谱</span>
</a>
</li>
</ul>
</div>
<div class="together">
<div class="publi">大家都在做</div>
<ul class="together_list">
</ul>
<div class="together_bott">
<div class="together_act"></div>
</div>
</div>
</div>
</body>
<script src="../js/utils/index.js"></script>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/swiper-bundle.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/page/indexx.js"></script>
</html>

77
历届学生/fontendsix/项目练习/上课项目/美食杰/page/info.html Normal file
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>详情</title>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/info.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
</head>
<body>
<div class="bannerone">
<div class="nav">
<div class="menu">
<a href="">
<p>美食</p>
</a>
</div>
<div class="menu">
<a href="">
<p>菜谱分类</p>
</a>
</div>
</div>
<div class="img_back">
<img src="" alt="">
</div>
<div class="infolist">
<div class="infotitle">
<h2></h2>
<i class="iconfont icon-tuijian"></i>
</div>
<p class="pti"></p>
<ul class="bacno"></ul>
<div class="litext">
<p> </p>
</div>
<div class="ms">
<div class="main">
<div class="top">主料</div>
<ul></ul>
</div>
<div class="main">
<div class="top">辅料</div>
<ul></ul>
</div>
</div>
</div>
<div class="content">
<ul class="content_li"></ul>
<div class="outside">
<div class="outside_li">
<h2>其他做法</h2>
<a>更多 ></a>
</div>
<ul></ul>
</div>
<div class="remode">
<div class="outside_li">
<h2>相关推荐</h2>
<a>更多 ></a>
</div>
<ul></ul>
</div>
</div>
</div>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/page/info.js"></script>
</html>

24
历届学生/fontendsix/项目练习/上课项目/美食杰/page/like.html Normal file
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>
<script src="../js/lib/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/like.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>
<body>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/swiper-bundle.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/page/like.js"></script>
</html>

75
历届学生/fontendsix/项目练习/上课项目/美食杰/page/my.html Normal file
View File

@@ -0,0 +1,75 @@
<!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">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/my.css">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="center">
<div class="header_top">
<img src="../img/touxiang.png" alt="">
<div class="header_text">
<p>杰米6004516268</p>
<span>正在通往美食达人的路上...</span>
</div>
</div>
<div class="header_bott">
<p>美食杰DNA</p>
<div class="header_num">0 条></div>
</div>
</div>
</div>
<div class="content">
<ul class="info">
<li>
<a href="../page/search.html">
<div class="info_left">
<img src="../img/xiaoxi.png" alt="">
<span>消息通知</span>
</div>
<div class="info_right"><span>></span></div>
</a>
</li>
<li>
<a href="">
<div class="info_left">
<img src="../img/fabu.png" alt="">
<span>我的发布</span>
</div>
<div class="info_right"><span>></span></div>
</a>
</li>
<li>
<a href="../page/collect.html">
<div class="info_left">
<img src="../img/wode.png" alt="">
<span>我的收藏</span>
</div>
<div class="info_right"><span>></span></div>
</a>
</li>
<li>
<a href="">
<div class="info_left">
<img src="../img/gywm.png" alt="">
<span>关于我们</span>
</div>
<div class="info_right"><span>></span></div>
</a>
</li>
</ul>
</div>
</body>
</html>

31
历届学生/fontendsix/项目练习/上课项目/美食杰/page/search.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/search.css">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="header_return">返回</div>
<input class="search_input" type="text" name="" id="" placeholder="菜谱名、食材名">
<div class="header_search">搜索</div>
</div>
<div class="content">
<ul class="content_list">
</ul>
</div>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/page/search.js"></script>
</html>

32
历届学生/fontendsix/项目练习/上课项目/美食杰/page/type.html Normal file
View File

@@ -0,0 +1,32 @@
<!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/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/type.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>
<body>
<div class="content">
<ul class="left_menu">
</ul>
<ul class="right_content">
</ul>
</div>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/swiper-bundle.min.js"></script>
<script src="../js/lib/masonry.pkgd.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/page/type.js"></script>
</html>

24
历届学生/fontendsix/项目练习/上课项目/美食杰/page/video.html Normal file
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>
<script src="../js/lib/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/video.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>
<body>
</body>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/swiper-bundle.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexService.js"></script>
<script src="../js/page/video.js"></script>
</html>

73
历届学生/fontendsix/项目练习/上课项目/美食杰/笔记.txt Normal file
View File

@@ -0,0 +1,73 @@
jquery
就是原生js的常用方法进行封装和增强
三个阶段
1：考古年代
2: div + css + js + jquery
nodejs
3：angular.js react.js vue.js
页面
1 首页
蔡敏
王安民
陶瑞
计梦梦
接口：4 12 or 2 3 1
2 搜索
计梦梦
接口：7
3 详情页面
陶瑞
接口：11
4 视频
注意：需要加底部导航
蔡敏
接口：6
5 视频详情
王安民
接口：没有
6 分类
注意：需要加底部导航，多次点击不要重复发送请求
王安民
接口：8，9
7 分类列表页面
蔡敏
接口：10
8 我的
计梦梦
9 收藏
计梦梦
组件
10 顶部搜索条的样式 首页 分类
陶瑞
11 首页列表
王安民
12 底部导航
蔡敏