265 lines
4.3 KiB
CSS
265 lines
4.3 KiB
CSS
/*顶部*/
|
|
/*顶部菜单*/
|
|
.header{
|
|
height: 4.91rem;
|
|
background-color: #909090;
|
|
font-size: 0;
|
|
|
|
|
|
}
|
|
.header_top{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content:space-between;
|
|
padding:0.38rem 0.3rem;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
z-index: 999;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #909090;
|
|
|
|
}
|
|
.header_top img{
|
|
width: 0.19rem;
|
|
height: 0.34rem;
|
|
}
|
|
.header_top span{
|
|
font-size: 0.34rem;
|
|
color: #ffffff;
|
|
}
|
|
.header_top .kong{
|
|
width: 0.19rem;
|
|
height: 0.34rem;
|
|
}
|
|
/*头像*/
|
|
.user{
|
|
width: 5.99rem;
|
|
text-align: center;
|
|
padding-left: 0.74rem;
|
|
padding-right: 0.77rem;
|
|
padding-top: 1.27rem;
|
|
}
|
|
.user_p{
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
}
|
|
.user_p img{
|
|
width: 1.09rem;
|
|
height: 1.09rem;
|
|
border-radius: 100%;
|
|
|
|
}
|
|
.user_p span{
|
|
font-size: 0.2rem;
|
|
color: #fd4a75;
|
|
background-color: #ffe0e8;
|
|
border-radius: 0.03rem;
|
|
border: solid 0.01rem #fd4a75;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -0.16rem;
|
|
transform: translateX(-50%);
|
|
}
|
|
.user p{
|
|
padding-top: 0.24rem;
|
|
font-size: 0.24rem;
|
|
color: #ffffff;
|
|
padding-bottom: 0.38rem;
|
|
}
|
|
|
|
.user .xian{
|
|
width: 5.99rem;
|
|
height: 0.03rem;
|
|
background-color: #7e7e7e;
|
|
}
|
|
.xiaoshou{
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
margin-top: 0.43rem;
|
|
}
|
|
.xiaoshou li{
|
|
text-align: center;
|
|
}
|
|
.xiaoshou li p{
|
|
font-size: 0.34rem;
|
|
color: #ffffff;
|
|
|
|
}
|
|
.xiaoshou li span{
|
|
font-size: 0.24rem;
|
|
color: #ffffff;
|
|
}
|
|
/*底部*/
|
|
.footer{
|
|
|
|
width: 7.5rem;
|
|
height: 0.96rem;
|
|
background-color: #4799ee;
|
|
font-size: 0;
|
|
display: flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
|
|
}
|
|
.footer span{
|
|
font-size: 0.34rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/*中间*/
|
|
.content{
|
|
font-size: 0;
|
|
margin-bottom: 0.96rem;
|
|
}
|
|
/*中间_顶部*/
|
|
.content_top{
|
|
display: flex;
|
|
justify-content:space-between;
|
|
margin-top: 0.38rem;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.23rem;
|
|
margin-bottom: 0.58rem;
|
|
}
|
|
.content_top span{
|
|
font-size: 0.28rem;
|
|
color: #333333;
|
|
}
|
|
.content_top_right{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.content_top_right span{
|
|
font-size: 0.24rem;
|
|
color: #5b6e95;
|
|
margin-right: 0.25rem;
|
|
}
|
|
.content_top_right img{
|
|
width: 0.15rem;
|
|
height: 0.27rem;
|
|
|
|
}
|
|
/*图片*/
|
|
.photo{}
|
|
|
|
.pgoto_1{
|
|
display: flex;
|
|
overflow-x: overlay;
|
|
}
|
|
.pgoto_1 li{
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
margin-right: 0.21rem;
|
|
}
|
|
.pgoto_1 li:first-child{
|
|
margin-left: 0.24rem;
|
|
}
|
|
.pgoto_1 img{
|
|
|
|
width: 2rem;
|
|
height: 2rem;
|
|
|
|
}
|
|
.shadow{
|
|
background: url(../img/yy.png);/*阴影*/
|
|
width: 2rem;
|
|
height: 0.61rem;
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.shadow span{
|
|
font-size: 0.24rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/*横条*/
|
|
.horizontal_1{
|
|
width: 7.5rem;
|
|
height: 1.02rem;
|
|
background-color: #efeff4;
|
|
box-shadow: 0rem 0.05rem 0.095rem 0.005rem
|
|
rgba(141, 141, 141, 0.25);
|
|
opacity: 0.5;
|
|
margin-top: 0.33rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
.horizontal_1 li{
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.horizontal_1 li::after{
|
|
content: "";
|
|
width: 0.01rem;
|
|
height: 0.46rem;
|
|
background-color: #dbdbdb;
|
|
position: absolute;
|
|
right: -0.72rem;
|
|
top: 0.18rem;
|
|
}
|
|
.horizontal_1 li:last-child::after{
|
|
content: none;
|
|
}
|
|
.horizontal_1 .top_1{
|
|
font-size: 0.34rem;
|
|
color: #000;
|
|
font-weight: 600;
|
|
}
|
|
.horizontal_1 .top_2{
|
|
font-size: 0.28rem;
|
|
color: #7e7e7e;
|
|
}
|
|
/*图片部分*/
|
|
.shop{
|
|
display: flex;
|
|
flex-wrap:wrap;
|
|
}
|
|
.shop li{
|
|
margin-left: 0.24rem;
|
|
padding-top: 0.32rem;
|
|
}
|
|
.tupian{
|
|
position: relative;
|
|
}
|
|
.tupian img{
|
|
width: 3.39rem;
|
|
height: 4.68rem;
|
|
}
|
|
.yinying{
|
|
background: url(../img/yy2.png);
|
|
width: 3.39rem;
|
|
height: 0.61rem;
|
|
opacity: 0.8;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items:flex-end;
|
|
padding-left: 0.1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
.yinying span {/*在span里面加阴影*/
|
|
font-size: 0.24rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.shop_1{
|
|
font-size: 0.28rem;
|
|
color: #2b2b2b;
|
|
margin-top: 0.2rem;
|
|
}
|
|
.shop_2{
|
|
font-size: 0.24rem;
|
|
color: #7d7d7d;
|
|
|
|
} |