132 lines
2.0 KiB
CSS
132 lines
2.0 KiB
CSS
.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;
|
||
}
|
||
|
||
|