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

327
历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/22.css Normal file
View File

@@ -0,0 +1,327 @@
.header {
padding: 0 0.3rem;
height: 0.9rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
background-color: white;
font-weight: 900;
box-sizing: border-box;
z-index: 999;
background: white;
}
.header img {
width: 0.2rem;
height: 0.33rem;
}
.header span {
font-size: 0.34rem;
color: #333333;
}
.content {
width: 100%;
box-sizing: border-box;
transition: transform ease 0.3s;
}
.shuaxin{
align-items: center;
height: 0.9rem;
display: flex;
justify-content: center;
}
.shuaxin img{
width: 0.3rem;
height: 0.3rem;
}
.address {
border-top: 0.01rem solid #f2f2f2;
background-image: url("../../img/22/yellow-red-block.png");
width: 100%;
height: 1.26rem;
background-size: 100%;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.3rem;
box-sizing: border-box;
}
.add_l {}
.add_up {
font-size: 0.3rem;
color: #333333;
margin-top: 0.12rem;
margin-bottom: 0.15rem;
}
.add_up .name {
margin-right: 0.52rem;
font-weight: 900;
}
.add_down {
font-size: 0.24rem;
color: #333333;
margin-bottom: 0.2rem;
}
.address img {
width: 0.14rem;
height: 0.26rem;
}
.select {
border-top: 0.19rem solid #f2f2f2;
height: 1.18rem;
width: 100%;
font-size: 0.28rem;
color: #333333;
display: flex;
align-items: center;
justify-content: space-between;
background-color: white;
border-bottom: 0.16rem solid #f2f2f2;
padding-left: 0.26rem;
box-sizing: border-box;
}
.select .pay {
padding-right: 0.44rem;
box-sizing: border-box;
display: flex;
align-items: center;
}
.pay img {
padding-left: 0.07rem;
width: 0.31rem;
height: 0.06rem;
}
.goods {
border-bottom: 0.01rem solid #f2f2f2;
}
.goods_title {
height: 0.62rem;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 0.01rem solid #f2f2f2;
}
.goods_title .l {
width: 0.24rem;
height: 0.22rem;
margin-left: 0.24rem;
margin-right: 0.06rem;
}
.goods_title span {
font-size: 0.26rem;
color: #333333;
margin-right: 0.16rem;
margin: 0.2rem 0.16rem 0.17rem0;
}
.goods_title .r {
width: 0.1rem;
height: 0.19rem;
}
.information {
height: 2.22rem;
display: flex;
align-items: center;
}
.information img {
width: 2rem;
height: 1.65rem;
margin-left: 0.24rem;
margin-right: 0.36rem;
}
.information .des {
width: 100%;
}
.des p {
font-size: 0.28rem;
color: #333333;
width: 3.5rem;
margin-bottom: 0.08rem;
}
.des .up {
font-size: 0.2rem;
color: #999999;
margin-bottom: 0.12rem;
}
.des .down{
color: #ea4e3d;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.des .number {
font-size: 0.2rem;
}
.des .number .one{
font-size: 0.34rem;
}
.des .number .two{
font-size: 0.24rem;
}
.des .amount {
font-size: 0.2rem;
color: #999999;
margin-right: 0.76rem;
transform: scale(0.9);
}
.remarkes{
width: 100%;
height: 0.88rem;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 0.3rem;
border-top: 0.01rem solid #f2f2f2;
border-bottom: 0.01rem solid #f2f2f2;
box-sizing: border-box;
}
.remarkes .three{
font-size: 0.3rem;
color: #333333;
margin-right: 0.31rem;
}
.remarkes .four{
font-size: 0.26rem;
color: #aaaaaa;
}
.cost{
margin-left: 0.3rem;
margin-right: 0.26rem;
}
.cost_up{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.22rem;
margin-bottom: 0.24rem;
}
.cost_up p{
font-size: 0.24rem;
color: #333333;
}
.cost_up span{
font-size: 0.24rem;
color: #f09c48;
}
.cost_down{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.16rem;
}
.cost_down p{
font-size: 0.24rem;
color: #333333;
}
.cost_down span{
font-size: 0.24rem;
color: #ea4e3d;
}
.money{
border-top: 0.01rem solid #f2f2f2;
border-bottom: 0.16rem solid #f2f2f2;
display: flex;
align-items: center;
justify-content: space-between;
height: 0.84rem;
padding-left: 0.31rem;
padding-right: 0.26rem;
box-sizing: border-box;
}
.money p{
font-size: 0.3rem;
color: #333333;
}
.money span{
font-size: 0.34rem;
color: #ea4e3d;
}
.footer{
display: flex;
justify-content: flex-end;
align-items: center;
height: 1rem;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: white;
}
.text{
display: flex;
justify-content: center;
align-items: center;
}
.text p:first-child{
font-size: 0.26rem;
color: #c6c6c6;
}
.text p:nth-child(2){
font-size: 0.26rem;
color: #999999;
margin-right: 0.27rem;
}
.text p:last-child{
font-size: 0.24rem;
color: #000000;
}
.text span{
font-size: 0.3rem;
color: #000000;
margin-left: 0.06rem;
}
.footer .button{
font-size: 0.28rem;
color: #ffffff;
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
display: flex;
justify-content: center;
align-items: center;
margin-left: 0.42rem;
margin-right: 0.24rem;
}

324
历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/39.css Normal file
View File

@@ -0,0 +1,324 @@
body{
width: 100%;
}
.header{
width: 100%;
height: .9rem;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
padding: 0 0.37rem;
box-sizing: border-box;
}
.header .photo{
width: 0.42rem;
height: 0.42rem;
}
.header .select{
display: flex;
justify-content: space-between;
width: 2.5rem;
}
.select li{
font-size: 0.28rem;
color: #fefefe;
text-shadow: 0.01rem 0.01rem white;
letter-spacing: 0.04rem;
}
.select .active{
position: relative;
}
.select .active::after{
content: "";
position: absolute;
height: 0.03rem;
width: 0.4rem;
background: white;
bottom: -0.12rem;
left: calc((100% - 0.4rem) / 2);
}
.header .search{
width: 0.43rem;
height: 0.43rem;
}
.content{
position: relative;
height: calc(100vh - 1rem);
}
.content .background{
width: 100%;
height: calc(100vh - 1rem);
object-fit: cover;
}
.model{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #0000008c;
}
.content .title{
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
bottom: 0.65rem;
left: 0.3rem;
}
.title .name{
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 0.22rem;
}
.name img{
width: 0.28rem;
height: 0.26rem;
margin-right: 0.1rem;
margin-left: 0.07rem;
}
.name p{
font-size: 0.26rem;
color: #ffc600;
}
.title .goods{
width: 5.85rem;
height: 1.68rem;
background-color: #ffffff;
display: flex;
justify-content: flex-start;
align-items: center;
}
.goods .picture{
width: 1.48rem;
height: 1.48rem;
margin-left: 0.09rem;
}
.goods_name{
position: relative;
flex: 1;
margin-left: 0.15rem;
}
.goods_name p{}
.goods_name .des{
font-size: 0.28rem;
color: #333333;
margin-bottom: 0.1rem;
}
.goods_name .price{
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 0.18rem;
}
.price .number{
font-size: 0.28rem;
color: #333333;
}
.price .text{
width: 0.6rem;
height: 0.24rem;
background-color: #ea4e3d;
border-radius: 0.12rem;
display: flex;
justify-content: center;
align-items: center;
margin-left: 0.03rem;
}
.price .text p{
font-size: 0.2rem;
color: #fffefe;
transform: scale(0.8);
}
.goods_name .all{
font-size: 0.2rem;
color: #626262;
margin-top: 0.1rem;
}
.goods_name .icon{
width: 0.46rem;
height: 0.46rem;
background-color: #333333;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
right: 0.34rem;
}
.goods_name .icon img{
width: 0.27rem;
height: 0.27rem;
}
.music{
display: flex;
justify-content: flex-start;
align-items: center;
position: absolute;
bottom: 0.13rem;
left: 0.3rem;
}
.music img{
width: 0.27rem;
height: 0.28rem;
margin-right: 0.13rem;
}
.music p{
font-size: 0.24rem;
color: #ffffff;
}
.content .menu{
position: absolute;
z-index: 1;
bottom: 0.14rem;
right: 0.19rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0;
}
.user{
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
}
.user .top{
width: 0.96rem;
height: 0.97rem;
border: 0.03rem solid #ffffff;
border-radius: 50%;
}
.user .add{
width: 0.34rem;
height: 0.33rem;
border-radius: 50%;
background-color: #ea4e3d;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0.3rem;
bottom: -7px;
}
.user .add img{
width: 0.23rem;
height: 0.23rem;
}
.menu p{
font-size: 0.2rem;
color: #ffffff;
}
.menu .like{
text-align: center;
}
.menu .like img{
width: 0.68rem;
height: 0.63rem;
margin-top: 0.35rem;
}
.menu .like p{
}
.menu .share{
text-align: center;
}
.menu .share img{
width: 0.67rem;
height: 0.8rem;
margin-bottom: 0.08rem;
margin-top: 0.2rem;
}
.menu .share p{}
.menu .comment{
text-align: center;
}
.menu .comment img{
width: 0.7rem;
height: 0.7rem;
margin-top: 0.2rem;
}
.menu .comment p{
margin-top: 0.13rem;
}
.menu .shopping{
text-align: center;
}
.menu .shopping img{
width: 0.61rem;
height: 0.61rem;
margin-top: 0.28rem;
}
.menu .shopping p{
margin-top: 0.08rem;
}
.footer{
height: 1rem;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: #141414;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.39rem;
padding-right: 0.54rem;
box-sizing: border-box;
letter-spacing: 0.03rem;
z-index: 1;
}
.footer .active{
font-size: 0.3rem;
color: #ffffff;
position: relative;
}
.footer .active::after{
content: "";
position: absolute;
width: 0.51rem;
height: 0.04rem;
background: white;
bottom: -0.24rem;
left: calc((100% - 0.51rem) / 2);
}
.footer li {
font-size: 0.24rem;
color: #ffffff;
}

286
历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/64.css Normal file
View File

@@ -0,0 +1,286 @@
body {
width: 100%;
background-color: #f2f3f7;
padding: 0 0.24rem;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: .9rem;
margin-bottom: 0.24rem;
}
.header_l {
display: flex;
justify-content: center;
align-items: center;
}
.header_l img:first-child {
width: 0.2rem;
height: 0.38rem;
margin-right: 0.3rem;
}
.header_l img:last-child {
width: 0.48rem;
height: 0.48rem;
}
.header_m {
display: flex;
justify-content: center;
align-items: center;
}
.header_m p {
font-size: 0.28rem;
color: #000000;
}
.header_m .status {
background-color: #3b75e2;
border-radius: 0.05rem;
font-size: 0.2rem;
color: #ffffff;
margin-left: 0.02rem;
display: flex;
justify-content: center;
align-content: center;
transform: scale(0.8);
padding: .04rem 0.1rem;
}
.header_r {
display: flex;
justify-content: center;
align-items: center;
}
.message {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.message img {
width: 0.42rem;
height: 0.35rem;
}
.message p {
font-size: 0.2rem;
color: #ffffff;
position: absolute;
top: -0.14rem;
right: -0.14rem;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
background-color: #ea4e3d;
text-align: center;
line-height: 0.25rem;
}
.header_r img:last-child {
width: 0.37rem;
height: 0.36rem;
margin-left: 0.38rem;
}
.content {}
.fans {
width: 7.02rem;
height: 1.8rem;
background-image: url("../../img/64/图层1.png");
background-size: cover;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.37rem;
box-sizing: border-box;
margin-bottom: 0.24rem;
}
.fans li {
color: #ffffff;
text-align: center;
}
.fans .number {
font-size: 0.34rem;
}
.fans .text {
font-size: 0.24rem;
margin-top: 0.3rem;
}
.living{
width: 100%;
height: 0.78rem;
background-color: #ffffff;
border-radius: 0.2rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.19rem;
box-sizing: border-box;
margin-bottom: 0.24rem;
}
.living_l{
display: flex;
align-items: center;
justify-content: center;
}
.living_l img{
width: 0.41rem;
height: 0.39rem;
margin-right: 0.09rem;
}
.living_l p{
font-size: 0.32rem;
color: #1a1a1a;
}
.living_r{
display: flex;
align-items: center;
justify-content: center;
}
.living_r a{
font-size: 0.28rem;
color: #0079f1;
margin-right: 0.11rem;
}
.living_r img{
width: 0.12rem;
height: 0.21rem;
}
.identity{
width: 100%;
height: 2.75rem;
background-color: #ffffff;
border-radius: 0.2rem;
padding: 0.28rem 0.34rem;
box-sizing: border-box;
margin-bottom: 0.23rem;
}
.identity > p{
font-weight: 600;
font-size: 0.3rem;
color: #010101;
letter-spacing: 0.015rem;
}
.identity ul{
display: flex;
justify-content: space-between;
align-items: center;
}
.identity li img{
width: 0.6rem;
margin-top: 0.3rem;
}
.identity li{
text-align: center;
}
.identity .text{
font-size: 0.24rem;
color: #333333;
margin-top: 0.19rem;
margin-bottom: 0.08rem;
}
.identity .test{
font-size: 0.22rem;
color: #e93323;
}
.identity ul li:first-child .test{
color: #abb1bc;
}
.manage{
width: 100%;
height: 4.02rem;
background-color: #ffffff;
border-radius: 0.2rem;
padding: 0.36rem 0.34rem;
box-sizing: border-box;
margin-bottom: 0.24rem;
}
.manage > p{
font-weight: 600;
font-size: 0.3rem;
color: #010101;
letter-spacing: 0.015rem;
margin-bottom: 0.48rem;
}
.manage ul{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.manage li{
width: calc(100% / 5);
text-align: center;
}
.manage li img{
height: 0.45rem;
}
.manage li p{
font-size: 0.24rem;
color: #333333;
margin-top: 0.3rem;
margin-bottom: 0.3rem;
}
.market{
width: 100%;
height: 2.51rem;
background-color: #ffffff;
border-radius: 0.2rem;
padding: 0.34rem 0.34rem;
box-sizing: border-box;
margin-bottom: 0.56rem;
}
.market > p{
font-weight: 600;
font-size: 0.3rem;
color: #010101;
letter-spacing: 0.015rem;
margin-bottom: 0.48rem;
}
.market ul{
display: flex;
align-items: center;
justify-content: space-between;
}
.market li{
text-align: center;
}
.market li img{
height: 0.5rem;
}
.market li p{
font-size: 0.24rem;
color: #333333;
margin-top: 0.3rem;
}

131
历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/68.css Normal file
View File

@@ -0,0 +1,131 @@
.background{
width: 100%;
height: 100vh;
/* overflow-y溢出了元素的内容区是否剪辑 */
/* auto内容如果溢出框，则应该提供滚动机制 */
overflow-y: auto;
}
.background img{
width: 100%;
}
/* 遮罩 */
.popover{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgb(0 0 0 / 83%);
}
.content{
position: absolute;
left: 0.75rem;
right: 0.75rem;
top: 2.05rem;
}
.content .card{
width: 6rem;
height: 7rem;
background-color: #ffffff;
border-radius: 0.2rem;
position: relative;
}
.card > img{
width: 6rem;
height: 4.57rem;
position: absolute;
z-index: 1;
}
.card .change{
position: absolute;
z-index: 2;
display: flex;
right: 1rem;
top: 0.3rem;
}
.card .change img{
width: 0.28rem;
height: 0.29rem;
}
.card .change p{
font-size: 0.26rem;
color: #ffffff;
}
.card .information{
position: relative;
text-align: center;
z-index: 2;
}
.information > img{
width: 1.08rem;
height: 1.08rem;
margin-top: 1.64rem;
margin-bottom: 0.51rem;
}
.information .name{
font-size: 0.28rem;
color: #ffffff;
margin-bottom: 0.26rem;
}
.information .address{
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.address img{
width: 0.18rem;
height: 0.24rem;
}
.address p{
font-size: 0.24rem;
color: #ffffff;
margin-left: 0.13rem;
}
.card .code{
position: relative;
z-index: 2;
}
.card .code img{
width: 1.95rem;
height: 1.95rem;
margin-top: 0.25rem;
margin-bottom: 0.1rem;
}
.card .code p{
font-size: 0.28rem;
color: #333333;
}
.popover .share{
position: absolute;
width: 100%;
bottom: 0.28rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.popover .share li{
text-align: center;
}
.popover .share img{
width: 1.08rem;
height: 1.08rem;
}
.popover .share p{
font-size: 0.28rem;
color: #ffffff;
margin-top: 0.2rem;
}

179
历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/css/72.css Normal file
View File

@@ -0,0 +1,179 @@
body{
background-color: #efeff4;
}
.title{
background-color: #ffffff;
width: 100%;
height: .9rem;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.3rem;
padding-right: 0.41rem;
box-sizing: border-box;
}
.title_l{
width: 0.19rem;
height: 0.34rem;
}
.title p{
font-size: 0.34rem;
color: #333333;
font-weight: 600;
}
.title_r{
width: 0.35rem;
height: 0.35rem;
}
.menu{
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
margin-bottom: 0.2rem;
}
.menu ul{
flex: 1;
height: 1.66rem;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
overflow: scroll;
}
.menu li{
width: 21%;
flex: none;
text-align: center;
color: #666666;
}
.menu .active{
color: #357ef4 !important;
position: relative;
}
.menu .active::after{
content: "";
position: absolute;
bottom: -22px;
left: calc((100% - 1.29rem)/2);
width: 1.29rem;
height: 0.05rem;
background-color: #357ef4;
}
.menu .text{
font-size: 0.29rem;
}
.menu .number{
font-size: 0.24rem;
}
.menu img{
width: 0.24rem;
height: 0.13rem;
}
.content > li{
width: 7.01rem;
height: 4.11rem;
background-color: #ffffff;
border-radius: 0.2rem;
margin: 0 0.24rem;
margin-bottom: 0.18rem;
}
.store{
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0.39rem;
}
.store .me{
display: flex;
justify-content: center;
align-items: center;
padding-top: 0.27rem;
padding-bottom: 0.27rem;
}
.me img{
width: 0.71rem;
height: 0.71rem;
}
.me p{
margin-left: 0.14rem;
font-size: 0.3rem;
color: #2c2c2c !important;
}
.store p{
font-size: 0.28rem;
color: #f09c48;
}
.content{}
.content .goods{
margin-left: 0.34rem;
margin-top: 0.2rem;
}
.content .goods li{
display: flex;
justify-content: flex-start;
align-items: center;
}
.content .goods li img{
width: 1.6rem;
height: 1.6rem;
}
.content li .des{
margin-left: 0.18rem;
}
.content li .des .name{
font-size: 0.3rem;
color: #333333;
margin-bottom: 0.1rem;
}
.content li .des .tips{
width: 100%;
height: 0.24rem;
background-color: #fef6ee;
font-size: 0.2rem !important;
color: #f09c48 !important;
padding: 0.02rem 0.09rem 0.03rem 0.06rem;
}
.content li .des p{
font-size: 0.24rem;
color: #959595;
margin-top: 0.08rem;
}
.content .date{
display: flex;
align-items: center;
margin-top: 0.53rem;
margin-left: 0.34rem;
}
.date .time{
font-size: 0.24rem;
color: #959595;
}
.date p:nth-child(2){
font-size: 0.24rem;
color: #333333;
margin-left: 0.42rem;
}
.date p:nth-child(3){
font-size: 0.24rem;
color: #ea4e3d;
}
.date p:last-child{
font-size: 0.2rem;
color: #959595;
}