online-push.wxss
3.7 KB
.popover_box { position:fixed; width:100%; height:100%; background:rgba(0,0,0,.5); z-index: 58; top:0; left:0; } .popover_box_one { position:fixed; top:calc(50% - 300rpx); left:calc(50% - 300rpx); width: 600rpx; height: 600rpx; z-index: 99; border-radius: 12rpx; background-color: #fff; } .box_one_top { position: relative; width: 100%; height: 160rpx; line-height: 160rpx; border-top-left-radius:10rpx; border-top-right-radius:10rpx; background-color: #4089f6; color: #fff; text-align: center; font-size: 44rpx } .box_one_top button{ position: absolute; top:-20rpx; right: -20rpx; width: 72rpx; height: 72rpx; border: 1px solid transparent !important; padding: 0; background: transparent; } .box_one_top button image{ width: 69rpx; height: 69rpx; display: block; } .box_one_btm { width: 520rpx; height: 240rpx; padding: 40rpx } .box_one_btm_son{ width: 100%; height:200rpx; overflow: hidden; line-height: 50rpx; color: #777777; font-size: 30rpx; white-space: normal; word-break: break-all; text-overflow: ellipsis; } .check_detail { width: 550rpx; height: 77rpx; line-height: 77rpx; background-color: #2493ED; box-shadow: 0 0 5rpx #2493ED; color: #fff; font-size: 28rpx } .popover_box_two { position:fixed; top:calc(50% - 255rpx); left:calc(50% - 240rpx); width: 480rpx; height: 510rpx; z-index: 99; border-radius: 10rpx; background-color: #fff; } .popover_box_two .bellImg{ position: absolute; top: -68rpx; left: 150rpx; width: 174rpx; height: 133rpx; } .popover_box_two .closeTwoBox{ position: absolute; top: 0; right: 0; width: 60rpx; height: 60rpx; border: 1px solid transparent; padding: 0; } .popover_box_two .closeTwoBox image{ width: 30rpx; height: 30rpx; display: block; margin: 15rpx auto 0; } .box_two_top{ width: 100%; height: 50rpx; line-height: 50rpx; font-size: 40rpx; color: #000; text-align: center; margin-top: 120rpx } .box_two_btm { width: 321rpx; height: 117rpx; line-height: 40rpx; margin: 10rpx auto; color: #666666; font-size: 26rpx; text-align: left; margin-top: 30rpx; white-space:normal; word-break:break-all; overflow: hidden; } .check_detail_two { width: 259rpx; height: 64rpx; line-height: 64rpx; background-color: #fff; border: 1rpx solid #2493ED; border-radius: 50rpx; color:#2493ED; font-size: 28rpx; margin: 60rpx auto 0; padding: 0; } .popover_box_three { position:fixed; top:calc(50% - 360rpx); left:calc(50% - 300rpx); width: 600rpx; min-height: 640rpx; z-index: 99; border-radius: 12rpx; background-color: #fff; } .popover_box_three .threeCloseImg{ position: absolute; bottom: -100rpx; left: calc(50% - 30rpx); width: 60rpx; height: 60rpx; z-index: -5; border: 1px solid transparent; padding: 0; } .popover_box_three .threeCloseImg image { width: 55rpx; height: 55rpx; display: block; } .check_detail_three { width: 327rpx; height: 90rpx; line-height: 90rpx; background-color: #2493ED; box-shadow: 0 0 5rpx #2493ED; color: #fff; border: 1rpx solid #2493ED; border-radius: 50rpx; font-size: 32rpx; margin: 0 auto; } .popover_box_three .box_one_btm { width: 520rpx; height: 190rpx; padding: 40rpx } .popover_box_three .bgImgBox { width: 100%; height: 242rpx; } .popover_box_three .bgImg { position: absolute; top: 0; left: 0; width: 100%; height: 242rpx; border-top-left-radius:10rpx; border-top-right-radius:10rpx; background-color: #2493ED; text-align: center; } .btn_three_btm .box_one_btm_son { color:#000 } .box_one_top text { position: absolute; top: 0; left: 0; font-size: 44rpx; width: 100%; height: 100%; line-height: 242rpx; } .popover_box_pic { width: 520rpx; height: 720rpx; position: absolute; left: calc(50% - 260rpx); top: calc(50% - 360rpx); display: flex; align-items: center; just: center;} .popover_box_pic view { width: 100%;} .popover_box_pic_clone { width: 45rpx; height: 45rpx; position: absolute; right: -22rpx; top: -15rpx;} .popover_box_pic_img { width: 100%}