page { background: #ffffff; } .nav_bg { position: absolute; top: 0; left: 0; width: 100%; height: 400rpx; z-index: 1; } .info_box { position: relative; z-index: 9; background: #ffffff; border-radius: 50rpx 50rpx 0rpx 0rpx; padding: 0 0 150rpx; } .infobox1 { border-radius: 20rpx; margin-top: 168rpx; /*height: 490rpx;*/ } .infobox1 .info1 { /*padding: 70rpx 48rpx 0;*/ } .infobox1 .img { position: absolute; top: -83rpx; left: 0; right: 0; margin: 0 auto; width: 140rpx; height: 140rpx; border-radius: 50%; overflow: hidden; background-color: #fff; .default-img { width: 100%; height: 100%; margin: 0 auto; margin-top: 20rpx; box-sizing: border-box; } } .infobox1 .info1 .tipbox { flex-direction: column; width: 100%; margin-top: 85rpx; } .infobox1 .info1 .tipbox .tip1 .name { font-size: 44rpx; font-weight: bold; color: #000000; line-height: 1; } .infobox1 .info1 .tipbox .tip1 .level { color: #ffffff; font-size: 30rpx; background: #e1c5a2; height: 32rpx; line-height: 32rpx; padding: 0 4rpx; border-radius: 6rpx; margin-left: 10rpx; } .infobox1 .info1 .tipbox .tip2 { font-size: 24rpx; font-weight: 500; color: #999999; line-height: 1; margin-top: 25rpx; } .infobox1 .info2 { border-radius: 20rpx; height: 200rpx; margin: 40rpx 28rpx 0; } .infobox1 .info3 { margin: 22rpx 30rpx 0; height: 60rpx; line-height: 60rpx; background: #f8f8f8; border-radius: 30rpx; font-size: 24rpx; font-weight: 500; color: #999999; text-align: center; } .infobox1 .info2 .block { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 36rpx 0 26rpx 36rpx; box-sizing: border-box; } .infobox1 .info2 .block .bg_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-radius: 30rpx; } .infobox1 .info2 .block:first-child { margin-right: 23rpx; } .infobox1 .info2 .block .num { font-size: 48rpx; font-weight: 600; color: #000000; } .infobox1 .info2 .block .txt { font-size: 22rpx; font-weight: 500; color: #a58e6d; } .infobox1 .info2 .block .tip .tip1 { font-size: 26rpx; font-weight: 500; color: #000000; margin-right: 20rpx; } .infobox1 .info2 .block .tip .right image { width: 10rpx; height: 20rpx; } .infobox1 .info2 .border { width: 2px; height: 86rpx; } .infobox2 { margin: 64rpx 34rpx 0; background: #fff; border-radius: 20rpx; } .infobox2 .title { font-size: 32rpx; line-height: 1; font-weight: bold; color: #030000; } .infobox2 .info { margin-top: 56rpx; flex-wrap: wrap; } .infobox2 .info .block { width: 25%; flex-direction: column; position: relative; } .infobox2 .info .block .img image { width: 40rpx; height: 40rpx; } .infobox2 .info .block .num { position: absolute; top: -5rpx; right: -15rpx; border-radius: 50%; width: 12rpx; height: 12rpx; background: #eb5858; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20rpx; } .infobox2 .info .block .img { position: relative; /*width: 64rpx;*/ /*height: 70rpx;*/ /*margin: auto;*/ } .infobox2 .info .block .tip1 { margin-top: 36rpx; font-size: 26rpx; font-weight: 500; color: #000000; } .service-title { display: flex; justify-content: center; font-size: 36rpx; font-family: PingFang SC; font-weight: bold; color: #030000; line-height: 60rpx; } .service-textarea { // width: 690rpx; display: flex; height: 330rpx; background: #ffffff; border: 1px solid #dddddd; border-radius: 3rpx; padding: 38rpx 30rpx; width: auto; box-sizing: border-box; } .textarea-placeholder { font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #cccccc; line-height: 60rpx; } .user_bg_card { position: absolute; top: 0; left: 0; right: 0; width: 100vw; height: 400rpx; image { width: 100%; height: 100%; } } .message { position: relative; .tip { position: absolute; top: -6rpx; right: -12rpx; width: 12rpx; height: 12rpx; background: #eb5858; border-radius: 50%; } }