Files
ClassContent/历届学生/逯帅帅/项目开发/上课项目/饿了么/css/index.css
2024-09-27 02:06:13 +08:00

275 lines
4.7 KiB
CSS

.header {
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 0.92rem;
background: linear-gradient(90deg,#0af,#0085ff);
z-index: 999;
padding: 0.185rem 0.13rem 0.075rem;
box-sizing: border-box;
}
.location {
color: #fff;
display: flex;
align-items: center;
}
.location span {
font-size: .17rem;
margin: 0 0.05rem;
font-weight: 700;
}
.search {
background: #fff;
height: 0.345rem;
border-radius: .02rem;
margin-top: 0.1rem;
display: flex;
justify-content: center;
align-items: center;
}
.search span {
font-size: .14rem;
color: #999;
margin-left: .05rem;
}
.search i {
font-size: .14rem;
color: #999;
}
.content {
margin-top: 0.94rem;
margin-bottom: 0.48rem;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 0.48rem;
border-top: .01rem solid #f5f5f5;
background: #fff;
z-index: 999;
display: flex;
justify-content: space-around;
align-items: center;
}
.footer li {
display: flex;
flex-direction: column;
align-items: center;
}
.footer li i{
}
.footer li span{
color: #8e8e93;
font-size: .12rem;
zoom: 0.9;
margin-top: 0.035rem;
}
.active {
color: #0089dc;
}
.active span {
color: #0089dc !important;
}
.menu {
display: flex;
flex-wrap: wrap;
}
.menu li{
width: 20%;
text-align: center;
margin-top: .11rem;
}
.menu li img{
width: .45rem;
height: .45rem;
}
.menu li p{
color: #666;
font-size: .12rem;
}
.activity {
margin-top: 0.265rem;
padding-left: .15rem;
padding-top: .12rem;
box-sizing: border-box;
background: linear-gradient(
0deg
,#f4f4f4 5%,#fafafa 95%);
display: flex;
justify-content: space-between;
height: 1.1rem;
}
.activity_text {
}
.activity_text h3{
font-size: .17rem;
font-weight: 700;
color: #333;
margin-bottom: .05rem;
}
.activity_text .des{
font-size: .13rem;
color: #777;
margin-bottom: .09rem;
}
.activity_text .buy{
font-size: .12rem;
color: #af8260;
}
.activity_img {
width: 1.41rem;
height: .94rem;
}
.shop_list {
margin-top: 0.19rem;
}
.shop_list .title {
font-size: .15rem;
color: #333;
text-align: center;
position: relative;
width: 35%;
margin: 0 auto;
}
.shop_list .title::before {
content: " ";
width: .2rem;
height: .01rem;
background-color: #999;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.shop_list .title::after {
content: " ";
width: .2rem;
height: .01rem;
background-color: #999;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.condition {
display: flex;
justify-content: space-around;
align-items: center;
height: .4rem;
margin-top: 0.225rem;
margin-bottom: 0.26rem;
}
.condition li{
font-size: .13rem;
color: #666;
}
.list {}
.list>li {
display: flex;
border-bottom: .01rem solid #f5f5f5;
padding-bottom: .15rem;
margin-top: 0.185rem;
}
.list li .shop_logo{
width: .64rem;
height: .64rem;
}
.list_text {
margin-left: .1rem;
width: calc(100% - .7rem);
}
.list_text_title {
display: flex;
justify-content: space-between;
align-items: center;
}
.list_text_title h3 {
font-size: .15rem;
color: #333;
font-weight: 700;
}
.list_text_title i {
font-size: .12rem;
color: #666;
}
.zan {
margin-top: 0.08rem;
margin-bottom: 0.08rem;
}
.zan img {
width: .56rem;
margin-right: 0.045rem;
}
.zan span {
font-size: .11rem;
zoom: 0.9;
color: #666;
}
.peisong {
display: flex;
justify-content: space-between;
align-items: center;
color: #999;
font-size: .11rem;
zoom: 0.9;
}
.tag {
display: flex;
margin-top: .1rem;
}
.tag li {
font-size: .165rem;
padding: 0 0.03rem;
box-sizing: border-box;
border: .01rem solid rgb(221, 221, 221);
zoom: 0.5;
color: rgb(102, 102, 102);
margin-right: .09rem;
border-radius: .02rem;
}
.youhui {
margin-top: .2rem;
}
.youhui li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.075rem;
}
.youhui .tip {
line-height: .18rem;
width: .18rem;
height: .18rem;
background: rgb(240, 115, 115);
color: #fff;
font-size: .12rem;
margin-right: .08rem;
border-radius: .02rem;
text-align: center;
zoom: 0.8;
}
.youhui .youhui_text {
font-size: .12rem;
color: #666;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sss {
display: flex;
width: 87%;
}
.youhui .youhui_icon {}
.youhui .youhui_icon span {}
.youhui .youhui_icon i {}