.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; }