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; */
}

86
历届学生/front-end-team/项目练习/上课项目/菜谱App/css/index.css Normal file
View File

@@ -0,0 +1,86 @@
.header {
display: flex;
align-items: center;
justify-content: space-between;
height: .9rem;
padding: 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: .7rem;
background: #f5f5f5;
width: 100%;
display: flex;
align-items: center;
padding-left: .26rem;
font-size: .28rem;
}
.header .search i {
margin-right: .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;
}

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;
}

70
历届学生/front-end-team/项目练习/上课项目/菜谱App/demo.html Normal file
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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">首页</li>
<li>社会</li>
<li>财经</li>
<li>体育</li>
</ul>
<ul class="tabs_content">
<li class="active_content">首页 的内容</li>
<li>社会 的内容</li>
<li>财经 的内容</li>
<li>体育 的内容</li>
</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(".tabs_title li").click(function() {
// 链式调用
$(this).addClass("active_title").siblings().removeClass("active_title")
//
$(".tabs_content li").eq($(this).index())
.addClass("active_content")
.siblings()
.removeClass("active_content")
})
</script>
</html>

35
历届学生/front-end-team/项目练习/上课项目/菜谱App/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/public.css">
<link rel="stylesheet" href="./css/index.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) {
console.log(res.result);
$(".right").empty();
res.result.forEach(v => {
$(".right").append(`
<li>
<img src="${v.img}" alt="">
<p>${v.title}</p>
</li>
`)
})
}
});
}
}
new index();

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";
}

2
历届学生/front-end-team/项目练习/上课项目/菜谱App/笔记.txt Normal file
View File

@@ -0,0 +1,2 @@
jquery: 就是原生js的封装