.container-view { height: 100vh; padding: 32rpx; } .clap-info { padding: 40rpx 32rpx 32rpx; border-radius: 32rpx; background-color: #fff; } .clap-img, .input-img { width: 40rpx; height: 40rpx; vertical-align: middle; } .clap-title, .input-title { color: #2A3A5A; font-size: 40rpx; font-weight: 600; font-family: PingFangSC, PingFang SC; font-style: normal; line-height: 40rpx; margin-left: 16rpx; } .clap-text { color: #828DA2; font-size: 24rpx; font-weight: 400; font-family: PingFangSC, PingFang SC; font-style: normal; line-height: 24rpx; margin-top: 24rpx; } .box { margin-top: 32rpx; border-radius: 24rpx 24rpx 0 0; } .camera { margin-top: 32rpx; border-radius: 24rpx 24rpx 0 0; width: 100%; height: 622rpx; } .camera-img { margin-top: 32rpx; border-radius: 24rpx 24rpx 0 0; width: 100%; height: 622rpx; vertical-align: top; } .camera-bottom { height: 178rpx; /* justify-content: center; */ border-radius: 0rpx 0rpx 24rpx 24rpx; background-color: #14151A; } .no-img { padding-left: 46rpx; } .flash { margin-right: 154rpx; } .flash > img { width: 54rpx; height: 54rpx; } .camera-button { width: 114rpx; height: 114rpx; } .retake { color: #14151A; font-size: 32rpx; font-weight: 600; font-family: PingFangSC, PingFang SC; text-align: center; line-height: 32rpx; font-style: normal; width: 144rpx; height: 80rpx; background: #FFFFFF; border-radius: 40rpx; opacity: 0.8; justify-content: center; margin-left: 40rpx; } .use-photo { color: #FFFFFF; font-size: 32rpx; font-weight: 600; font-family: PingFangSC, PingFang SC; text-align: center; line-height: 32rpx; font-style: normal; width: 378rpx; height: 80rpx; background: #0074FF; border-radius: 40rpx; justify-content: center; margin-left: 20rpx; } .input-info { margin-top: 24rpx; padding: 40rpx 32rpx; border-radius: 32rpx; background-color: #fff; } .right-img { width: 28rpx; height: 28rpx; } .input-box{ position: fixed; bottom: 0; left: 0; z-index: 10; height: 100vh; width: 100%; background-color: rgba(0,0,0,0.4); } .input-view { border-radius: 32rpx; background-color: #ffffff; z-index: 100; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 30%; } .close { font-size: 40rpx; line-height: 40rpx; position: fixed; right: 20rpx; top: 20rpx; } .input-view > input { border: 2rpx solid #2A3A5A; border-radius: 24rpx; width: 80%; padding: 10rpx; position: relative; top: 40%; left: 50%; transform: translate(-50%, -50%); } .input-button { position: fixed; bottom: 30rpx; } .close-button { color: #14151A; font-size: 32rpx; font-weight: 600; font-family: PingFangSC, PingFang SC; text-align: center; line-height: 32rpx; font-style: normal; width: 144rpx; height: 80rpx; border: 2rpx solid #2A3A5A; border-radius: 40rpx; opacity: 0.8; justify-content: center; margin-left: 40rpx; } .use-button { color: #FFFFFF; font-size: 32rpx; font-weight: 600; font-family: PingFangSC, PingFang SC; text-align: center; line-height: 32rpx; font-style: normal; width: 378rpx; height: 80rpx; background: #0074FF; border-radius: 40rpx; justify-content: center; margin-left: 20rpx; }