.flexflex { display: flex; } .flexcenter { display: flex; justify-content: center; align-items: center; } .flexjcenter { display: flex; justify-content: center; } .flexacenter { display: flex; align-items: center; } .flex1 { flex: 1; } .sidebar-box { position: fixed; right: 15rpx; bottom: 200rpx; width: 72rpx; background-color: #f6f6f6; border-radius: 18rpx; box-shadow: rgba(0, 0, 0, 0.24) 0 0 12rpx; transition: all 0.3s; } .sidebar-box.sidebar-hide-box { right: 0; transform: translateX(50%); } .sidebar-box .sidebar-item:not(:last-of-type) { border-bottom: 1rpx solid #ebebeb; } .sidebar-box .sidebar-item.toTop { width: 100%; padding-top: 30rpx; padding-bottom: 24rpx; } .sidebar-box .sidebar-item.toTop .toTop-icon { width: 36rpx; height: 36rpx; } .sidebar-box .sidebar-item.offerBtn { flex-direction: column; padding-top: 31.5rpx; padding-bottom: 19.5rpx; } .sidebar-box .sidebar-item.offerBtn .offerBtn-icon { width: 48rpx; height: 48rpx; border-radius: 50%; background-color: #fff; box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.34901961); margin-bottom: 7.5rpx; } .sidebar-box .sidebar-item.offerBtn .offerBtn-icon .offerBtn-img { width: 30rpx; height: 30rpx; } .sidebar-box .sidebar-item.offerBtn .offerBtn-icon .zufang-img { width: 33rpx; height: 33rpx; } .sidebar-box .sidebar-item.offerBtn .offerBtn-icon .wx-img { width: 40rpx; height: 40rpx; } .sidebar-box .sidebar-item.offerBtn .offerBtn-text { text-align: center; color: #333333; font-size: 21rpx; white-space: break-spaces; } .sidebar-box .sidebar-item.applyFor { flex-direction: column; padding-top: 31.5rpx; padding-bottom: 28.5rpx; } .sidebar-box .sidebar-item.applyFor .applyFor-icon { width: 63rpx; height: 63rpx; } .sidebar-box .sidebar-item.applyFor .applyFor-text { text-align: center; color: #333333; font-size: 21rpx; } .sidebar-box .sidebar-item.applyFor .applyFor-text .applyFor-text-text { display: block; } @keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } } .opinion-box { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.70588235); display: flex; align-items: flex-end; animation: slidebj 0.5s forwards; } .opinion-box .box { width: 100vw; height: 960rpx; background: linear-gradient(180deg, #f5f6f2 1%, #fff6df 35%, #f2af1c 100%); border: none; border-radius: 30rpx 30rpx 0 0; box-shadow: 0 0 22.5rpx rgba(0, 0, 0, 0.10196078); padding: 45rpx 48rpx 0; animation: slideUp 0.5s forwards; position: relative; } .opinion-box .box .sun { width: 180rpx; height: 159rpx; position: absolute; top: 30rpx; right: 30rpx; } .opinion-box .box .title { font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-weight: 650; font-style: normal; font-size: 54rpx; color: #000000; margin-bottom: 30rpx; } .opinion-box .box .hint { font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-weight: 400; font-style: normal; font-size: 28rpx; color: #555555; line-height: 45rpx; white-space: pre; margin-bottom: 42rpx; } .opinion-box .box .case { width: 654rpx; height: 603rpx; background-color: #f6f6f6; border-radius: 30rpx; box-shadow: 0 0 22.5rpx rgba(0, 0, 0, 0.10196078); flex-direction: column; } .opinion-box .box .case .QRcode { width: 360rpx; height: 360rpx; background-color: #ffffff; border: 1rpx solid #f2f2f2; border-radius: 9rpx; margin-bottom: 24rpx; } .opinion-box .box .case .QRcode .img { width: 327rpx; height: 327rpx; } .opinion-box .box .case .prompt { font-size: 24rpx; letter-spacing: 1.5rpx; color: #555555; text-align: center; line-height: 42rpx; } .huddle-box { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.70588235); display: flex; align-items: flex-end; animation: slidebj 0.5s forwards; } .huddle-box .box { width: 100vw; height: 1078.5rpx; border-radius: 45rpx 45rpx 0 0; box-shadow: 0 0 22.5rpx rgba(0, 0, 0, 0.10196078); animation: slideUp 0.5s forwards; background: linear-gradient(0.0796881deg, #333275 0%, #420080 100%); position: relative; flex-direction: column; align-items: center; padding-top: 48rpx; z-index: 1; } .huddle-box .box .code { width: 100vw; } .huddle-box .box .bj { width: 750rpx; height: 1078.5rpx; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; } .huddle-box .box .bj-bottom { width: 189rpx; height: 201rpx; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .huddle-box .box .top { width: 298.5rpx; height: 54rpx; margin-bottom: 19.5rpx; } .huddle-box .box .title { width: 466.5rpx; height: 129rpx; margin-bottom: 6rpx; } .huddle-box .box .text { font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-weight: 400; font-style: normal; font-size: 30rpx; color: #FFFFFF; text-align: center; line-height: 45rpx; margin-bottom: 37.5rpx; } .huddle-box .box .case { width: 540rpx; height: 600rpx; background: linear-gradient(180deg, #f2f2f2 0%, #ebebeb 100%); border-radius: 22.5rpx; flex-direction: column; align-items: center; padding-top: 75rpx; margin: 0 auto; } .huddle-box .box .case .QRcode { width: 360rpx; height: 360rpx; background-color: #ffffff; border-color: #f2f2f2; border-radius: 15rpx; box-shadow: 0 0 7.5rpx rgba(0, 0, 0, 0.18431373); margin-bottom: 39rpx; } .huddle-box .box .case .QRcode .img { width: 327rpx; height: 327rpx; } .huddle-box .box .case .hint .img { width: 48rpx; height: 48rpx; } .huddle-box .box .case .hint .img.img-left { transform: rotate(180deg); } .huddle-box .box .case .hint .hint-text { font-size: 27rpx; color: #000000; text-align: center; line-height: 42rpx; margin: 0 22.5rpx; }