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/项目练习/学生项目/李康/菜谱/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;
} */

95
历届学生/front-end-team/项目练习/学生项目/李康/菜谱/css/index.css Normal file
View File

@@ -0,0 +1,95 @@
.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: .02rem solid #e9e9e9;
}
.header .search {
height: 0.7rem;
background: #f5f5f5;
width: 100%;
display: flex;
align-items: center;
padding-left: 0.26rem;
font-size: 0.28rem;
}
.header .search i {
margin-right: 0.2rem;
}
.content {
margin-top: 0.9rem;
height: calc(100vh - 0.9rem);
display: flex;
}
.left {
width: 1.6rem;
height: 100%;
background: #f5f5f5;
overflow-y: scroll;
}
.left li {
height: 1.4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.left .active {
background: #fff;
}
.left li .img {
height: 0.5rem;
width: 0.5rem;
background: url("https://s1.st.meishij.net/p2/20191108/20191108113258_481.png");
background-position: 0 0;
background-size: .5rem 10rem;
}
.left li p {
font-size: 0.24rem;
color: #333;
margin-top: .08rem;
}
.right {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
overflow-y: scroll;
flex: 1;
}
.right li {
width: 33.3%;
text-align: center;
height: 1.8rem;
}
.right li img {
width: 1.24rem;
height: 1.24rem;
}
.right li p {
font-size: 0.24rem;
color: #333;
}

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

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

128
历届学生/front-end-team/项目练习/学生项目/李康/菜谱/css/video.css Normal file
View File

@@ -0,0 +1,128 @@
.header {
position: fixed;
padding: 0 .36rem;
height: 0.9rem;
display: flex;
align-items: center;
justify-content: space-between;
left: 0;
top: 0;
right: 0;
z-index: 999;
box-sizing: border-box;
background: #fff;
border-bottom: 1px solid #e9e9e9;
}
.header .arr {
display: flex;
align-items: center;
justify-content: center;
}
.arr span{
font-size: 0.3rem;
color: #000;
}
.header p {
font-size: 0.36rem;
color: #000;
font-weight: 600;
}
.header .mirror {
font-size: 0.38rem;
}
.content {
padding-top: .88rem;
padding-left: .32rem;
padding-right: .32rem;
box-sizing: border-box;
}
.content li {
float: left;
margin-top: 0.32rem;
width: 3.32rem;
box-shadow: 0 0.06rem 0.12rem rgb(0 0 0 / 10%);
border-radius: 0.14rem;
}
.content li:nth-child(2n) {
margin-left: .2rem;
}
.content li .pict {
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: 0.14rem;
}
.content li .pict_play {
width: 0.4rem;
height: 0.4rem;
position: absolute;
top: 0.1rem;
right: 0.2rem;
text-align: center;
line-height: 0.4rem;
border-radius: 100%;
background: #00000085;
}
.content li .pict .icon-tuijian {
font-size: 0.24rem;
color: #fff;
position: absolute;
top: 0;
left: .1rem;
}
.content li p {
margin: 0.2rem 0.2rem 0 0.2rem;
font-size: .32rem;
font-weight: 600;
color: #333;
}
.content li .pict_au {
margin: 0.4rem 0.2rem 0 0.2rem;
padding-bottom: 0.2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.pict_au .num_left {
display: flex;
align-items: center;
}
.pict_au .num_left .icon-taozi{
width: 0.36rem;
height: 0.36rem;
border-radius: 100%;
}
.pict_au .num_left span {
font-size: 0.24rem;
color: #666;
margin-left: .1rem;
}
.pict_au .num_right {
display: flex;
align-items: center;
}
.pict_au .num_right .icon-shipin {
font-size: 0.24rem;
color: #666;
}
.pict_au .num_right span{
font-size: 0.24rem;
color: #666;
}

35
历届学生/front-end-team/项目练习/学生项目/李康/菜谱/index.html Normal file
View File

@@ -0,0 +1,35 @@
<!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>

58
历届学生/front-end-team/项目练习/学生项目/李康/菜谱/js/index.js Normal file
View File

@@ -0,0 +1,58 @@
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) {
console.log(res.result);
res.result.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.getRightMenu(res.result[$(this).index()].url);
})
}
});
}
getRightMenu() {
var self = this;
$.ajax({
type: "GET",
url: this.baseUrl + "/type/rightMenu",
data: {
url: this.leftArr[this, index].url
},
success: function (res) {
console.log(res.result);
$(".reght").empty();
res.result.forEach(v => {
$(".right").append(`
<li>
<img src="${v.img}" alt="">
<p>${v.title}</p>
</li>
`)
})
}
});
}
}
new index()

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

46
历届学生/front-end-team/项目练习/学生项目/李康/菜谱/js/video.js Normal file
View File

@@ -0,0 +1,46 @@
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) {
res.result.items.forEach((v,i) => {
$(".content").append(`
<li>
<div class="pict"
style="background-image:url(${v.bd_photo}) ;">
<div class="pict_play">
<i class="iconfont icon-tuijian"></i>
</div>
</div>
<p>${v.seo_title}</p>
<div class="pict_au">
<div class="num_left">
<i class="iconfont icon-taozi"></i>
<span>美食杰</span>
</div>
<div class="num_right">
<i class="iconfont icon-shipin"></i>
<span>${v.click_num}</span>
</div>
</div>
</li>
`)
});
}
});
}
}
new video();

38
历届学生/front-end-team/项目练习/学生项目/李康/菜谱/video.html Normal file
View File

@@ -0,0 +1,38 @@
<!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/public.css">
<link rel="stylesheet" href="./css/video.css">
</head>
<body>
<div class="header">
<div class="arr">
<i class="iconfont icon-back1"></i>
<span>返回</span>
</div>
<p>菜谱视频大全</p>
<i class="iconfont icon-search mirror"></i>
</div>
<ul class="content">
</ul>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="./js/video.js"></script>
</html>