page { background-color: #f5ecd8; } /* 标题 */ .codeTitle { width: 100vw; height: 45vh; text-align: center; position: absolute; left: 0; top: 0; } /* 按钮 */ .codeShare { width: 100%; position: fixed; bottom: 0; left: 0; background-color: #333333; display: flex; padding: 30rpx 20rpx 40rpx; box-sizing: border-box; z-index: 9; } .codeShare-label { width: calc(50% - 20rpx) !important; margin: 0 10rpx; font-weight: normal; text-align: center; height: 80rpx; line-height: 80rpx; padding: 0; border-radius: 60rpx; border: #c1a468 2rpx solid; font-size: 32rpx; color: #412f0b; background: linear-gradient(to bottom, #eee3c8, #c1a468); } .codeShare-button { color: #ffd887; background: transparent; } /* 二维码 */ .codeCont { position: relative; width: 80vw; left: 10vw; top: 31.5vh; background-color: #fff; box-sizing: border-box; border-radius: 10rpx; justify-items: center; text-align: center; z-index: 8; margin-bottom: 200rpx; } .codeCont-code { width: 340rpx; height: 340rpx; margin: 20rpx 0 40rpx; } .codeCont-tips { border-radius: 10rpx 10rpx 0 0; width: 100%; } .codeCont-gold { position: absolute; width: 100rpx; height: 100rpx; right: 40rpx; top: -40rpx; } .codeCont-text { position: absolute; width: 100%; text-align: center; top: 30rpx; left: 0; color: #71552d; font-weight: 600; } .codeCont-avatar { width: 130rpx; height: 130rpx; border-radius: 50%; margin-bottom: 5rpx; border: 6rpx solid #ebdcb9; } .codeCont-words { margin-top: 40rpx; width: 100%; } /* 弹窗背景图 */ .user-lay{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; position: fixed; background: rgba(0, 0, 0, .6); height: 100vh; width: 100vw; top: 0; left: 0; z-index: 99; box-sizing: border-box; } /* canvas */ .canvasImg{ position: absolute; left: -1000%; height: 650px; width: 375px; background: #fbf6f0; } /* 图片弹出层 */ .sign-img-lay{ text-align: center; } .sign-img-src{ width: 70vw; vertical-align: top; } .sign-img-btn[size="mini"]{ margin-top: 40rpx; background: #f5d48f; font-weight: normal; color: #2f3245; height: 90rpx; line-height: 90rpx; padding: 0; width: 70vw; } .remove-btn[size="mini"]{ margin-top: 20rpx; background: #101010; color: #e5c175; font-weight: normal; } /* 背景 */ .user-back { position: relative; width: 100%; height:600rpx; text-align: center; margin-top: 100rpx; } .user-back-img { position: absolute; width: 70vw; left: 15vw; top: 0; height: 100%; margin: 0 auto; border-radius: 10rpx; } .user-back-cont { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #2f3245; } .user-back-avatar image { width: 140rpx; height: 140rpx; border-radius: 50%; margin-top: -60rpx; margin-bottom: 20rpx; border: 6rpx solid #fff1d1; } .user-back-yard { margin-top: 40rpx; } .codeBack-yard-name { font-size: 28rpx; color: #af7700; } .user-back-yard image { width: 240rpx; height: 240rpx; margin-bottom: 20rpx; }