325 lines
5.1 KiB
CSS
325 lines
5.1 KiB
CSS
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;
|
|
}
|
|
|