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

59
历届学生/front-end-team/项目练习/学生项目/陆旗/菜谱app/css/clear.css Normal file
View File

@@ -0,0 +1,59 @@
/* 清除浏览器默认的css样式 */
:root {
--themeColor: #fb7299;
--whiteColor: #fff;
--blackColor: #000;
--fontSize12: 0.24rem;
--fontSize13: 0.26rem;
--fontSize14: 0.28rem;
--fontSize15: 0.3rem;
--fontSize16: 0.32rem;
--fontSize17: 0.34rem;
--fontSize18: 0.36rem;
--fontSize19: 0.38rem;
--fontSize20: 0.4rem;
--fontSize21: 0.42rem;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
input,
button,
textarea {
outline: none;
border: none;
}
body {
/* font-size: 0px; */
}

94
历届学生/front-end-team/项目练习/学生项目/陆旗/菜谱app/css/index.css Normal file
View File

@@ -0,0 +1,94 @@
.header {
display: flex;
align-items: center;
justify-content: space-between;
height: 0.9rem;
padding: 0 0.3rem;
position: fixed;
width: 100%;
left: 0;
top: 0;
right: 0;
z-index: 999;
background: #fff;
box-sizing: border-box;
border-bottom: 1px solid #e9e9e9;
}
.header .search {
height: 0.7rem;
background: #f5f5f5;
width: 100%;
display: flex;
align-items: center;
padding-left: 0.26rem;
font-size: .28rem;
}
.header .search i {
margin-right: 0.2rem;
}
.content {
margin-top: 0.9rem;
height: calc(100vh - 0.9rem);
display: flex;
}
.left {
height: 100%;
width: 1.6rem;
background: #f5f5f5;
overflow-y: scroll;
}
.left li {
height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.left .active {
background: #fff;
}
.left li .img {
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 li p {
font-size: .24rem;
color: #333;
margin-top: 4px;
}
.right {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
overflow-y: scroll;
flex: 1;
}
.right li {
width: 33%;
text-align: center;
height: 1.8rem;
}
.right li img {
width: 1.24rem;
height: 1.24rem;
}
.right li p {
font-size: .24rem;
color: #333;
}

130
历届学生/front-end-team/项目练习/学生项目/陆旗/菜谱app/css/list.css Normal file
View File

@@ -0,0 +1,130 @@
.header {
position: fixed;
display: flex;
justify-content: space-between;
width: 100%;
height: .9rem;
background: #fff;
padding: 0px .32rem;
box-sizing: border-box;
align-items: center;
border-bottom: 1px solid #f5f5f5;
z-index: 999;
overflow: hidden;
}
.header .back {
display: flex;
align-items: center;
justify-content: center;
}
.header .back span {
font-size: .3rem;
color: #333;
margin-left: .2rem;
}
.header p {
font-size: .36rem;
color: #000;
font-weight: 600;
}
.content {
padding-top: .88rem;
padding-left: .32rem;
padding-right: .32rem;
box-sizing: border-box;
}
.content li {
float: left;
margin-top: .32rem;
width: 3.32rem;
box-shadow: 0 .06rem .12rem rgb(0 0 0 / 10%);
border-radius: .14rem;
}
.content li:nth-child(2n) {
margin-left: .2rem;
}
.content li .content_pic {
width: 3.32rem;
height: 4.44rem;
background-image: url(https://st-cn.meishij.net/p2/20181105/20181105110641_22213.jpg);
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: .14rem;
}
.content_pic .pic_bf {
width: .4rem;
height: .4rem;
position: absolute;
top: .1rem;
right: .2rem;
text-align: center;
line-height: .4rem;
background: #00000085;
border-radius: 100%;
}
.content_pic .pic_bf .icon-tuijian {
font-size: .24rem;
color: #fff;
position: absolute;
top: 0;
left: .1rem;
}
.content li p {
margin: .2rem .2rem 0 .2rem;
font-size: .32rem;
color: #333;
font-weight: 600;
}
.content li .pic_pl {
margin: .4rem .2rem 0 .2rem;
padding-bottom: .2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.pic_pl .num_left {
display: flex;
align-items: center;
}
.pic_pl .num_left .icon-huo {
width: .36rem;
height: .36rem;
border-radius: 100%;
}
.pic_pl .num_left span {
font-size: .24rem;
color: #666;
margin-left: .1rem;
}
.pic_pl .num_right {
display: flex;
align-items: center;
}
.pic_pl .num_right .icon-huo {
font-size: .24rem;
color: #666;
}
.pic_pl .num_right span {
font-size: .24rem;
color: #666;
}

6
历届学生/front-end-team/项目练习/学生项目/陆旗/菜谱app/css/public.css Normal file
View File

@@ -0,0 +1,6 @@
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

36
历届学生/front-end-team/项目练习/学生项目/陆旗/菜谱app/index.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/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/index.css">
<link rel="stylesheet" href=".//css/public.css">
</head>
<body>
<div class="header">
<div class="search">
<i class="iconfont icon-search"></i>
搜索百万免费菜谱
</div>
</div>
<div class="content">
<ul class="left"></ul>
<ul class="right"></ul>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="./js/index.js"></script>
</html>

64
历届学生/front-end-team/项目练习/学生项目/陆旗/菜谱app/js/index.js Normal file
View File

@@ -0,0 +1,64 @@
class index {
constructor() {
this.baseUrl = "http://127.0.0.1:3000/api"
this.index = 0;
this.getLeftMenu();
}
getLeftMenu() {
var self = this
$.ajax({
type: "GET",
url: this.baseUrl + "/type/leftMenu",
success: function (res) {
self.leftArr = res.result
self.leftArr.forEach((v, i) => {
$('.left').append(`
<li class="${i == 0 ? 'active' : ''}">
<div style="background-position: 0 ${v.position}px;" class="img"></div>
<p>${v.title}</p>
</li>
`)
});
$('.left li').click(function () {
$(this).addClass("active").siblings().removeClass("active")
self.index = $(this).index();
self.getRightMenu()
});
self.getRightMenu();
}
});
}
getRightMenu() {
var self = this;
$.ajax({
type: "GET",
url: this.baseUrl + "/type/rightMenu",
data: {
url: this.leftArr[this.index].url
},
success: function (res) {
//留空删除数组
$(".right").empty();
res.result.forEach(v => {
$(".right").append(`
<li>
<img src="${v.img}" alt="">
<p>${v.title}</p>
</li>
`)
})
}
});
}
}
new index();

55
历届学生/front-end-team/项目练习/学生项目/陆旗/菜谱app/js/list.js Normal file
View File

@@ -0,0 +1,55 @@
class video {
constructor() {
this.baseUrl = "http://127.0.0.1:3000/api"
this.page = 1;
this.getVideoMenu();
}
getVideoMenu() {
$.ajax({
type: "GET",
url: this.baseUrl + "/video/list",
data: {
page: this.page
},
success: function (res) {
//console.log(res.result);
// res = Array.from(res.result)
res.result.items.forEach((v, i) => {
// console.log(res.result.items);
$(".content").append(`
<li>
<div class="content_pic"
style="background-image:url(${v.bd_photo}) ;">
<div class="pic_bf">
<i class="iconfont icon-tuijian"></i>
</div>
</div>
<p>${v.seo_title}</p>
<div class="pic_pl">
<div class="num_left">
<i class="iconfont icon-huo"></i>
<span>美食杰</span>
</div>
<div class="num_right">
<i class="iconfont icon-huo"></i>
<span>${v.click_num}</span>
</div>
</div>
</li>
`);
});
}
});
}
}
new video();

11
历届学生/front-end-team/项目练习/学生项目/陆旗/菜谱app/js/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";
}

32
历届学生/front-end-team/项目练习/学生项目/陆旗/菜谱app/list.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>Document</title>
<script src="./js/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/list.css">
<link rel="stylesheet" href=".//css/public.css">
</head>
<body>
<div class="header">
<div class="back">
<i class="iconfont icon-back1"></i>
<span>返回</span>
</div>
<p>菜谱视频大全</p>
<i class="iconfont icon-search"></i>
</div>
<ul class="content">
</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="./js/list.js"></script>
</html>