.container{ background-color: #F4F4F4; width: 100vw; position: relative; } .bk{ position: absolute; background-color: #3CC7C0; height: 300rpx; width: 100%; } .content{ position: absolute; left: 50%; transform: translateX(-50%); top: 120rpx; width: 92vw; border-radius: 20rpx; display: flex; background-color: rgb(255, 255, 255); flex-direction: column; justify-content: center; align-items: center; padding: 100rpx 0 50rpx 0; } .photo{ position: absolute; width: 120rpx; height: 120rpx; border-radius: 50%; left: 50%; transform: translateX(-50%); top: 50rpx; box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,1); } .name{ font-size: 36rpx; margin-bottom: 10rpx; } .zhicheng{ font-size: 30rpx; color: #3CC7C0; margin-bottom: 10rpx; display: flex; width: 100%; } .zhicheng_title{ flex: 8; text-align: right; } .zhicheng_c{ flex: 1; text-align: center; } .zhicheng_name{ flex: 8; } .hospital{ font-size: 30rpx; color: #666; } .qrcode{ position: absolute; left: 50%; transform: translateX(-50%); top: calc(120rpx + 100rpx + 36rpx + 30rpx + 30rpx + 50rpx + 59rpx); padding: 50rpx 0; background-color: #fff; border-radius: 20rpx; width: 92vw; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #666; font-size: 30rpx; } .block { width: 100vw; background: #fff; border-top-left-radius: 30rpx; border-top-right-radius: 30rpx; position: fixed; bottom: 0; padding-bottom: 50rpx; } .wrapper { margin: 32rpx; display: block; } .header { display: flex; align-items: center; padding: 20rpx ; } .title { flex: 1; text-align: center; font-size: 30rpx; } .cnacle{ position: fixed; bottom: 50rpx; text-align: center; width: 100%; height: 100rpx; line-height: 100rpx; } .imgbox{ display: flex; justify-content: space-around; } .imgbox_item{ display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 23rpx; color: #646566; } .imgbox_item_txt{ margin-top: -15rpx; } .t_icon{ background-color: #3B83FF; padding: 30rpx; border-radius: 50%; }