.page { background-color: #F4F4F4; } .listBox{ position: relative; z-index: 1; padding-top: 5rpx; width: 100vw; height: 100vh; } .content { width: 100%; padding-bottom:120rpx; } .top { position: relative; .topphone { position: absolute; z-index: 1; bottom: -20rpx; left: 50%; transform: translate(-50%, -50%); .topphonebg { position: relative; width: 288rpx; image{ width: 288rpx; height: 70rpx; } } .topphonetext { position: absolute; font-size: 28rpx; font-weight: bold; color: #fff; display: flex; align-items: center; top: 16rpx; left: 25%; text-align: center; image { width: 28rpx; height: 28rpx; margin-right: 10rpx; } } } .topimg { margin: 25rpx; image { width: 100%; border-radius: 20rpx; } } } .titleall-box { display: flex; justify-content: space-between; padding: 40rpx 20rpx 20rpx 0; .titleall-left { font-size: 32rpx; font-weight: bold; display: flex; align-items: center; .titleall-left-line { width: 14rpx; height: 36rpx; border-radius: 0 10rpx 10rpx 0; background-color: #E60012; box-shadow: 0 0 10rpx 5rpx #fbdadc; margin-right: 20rpx; } text { font-size: 28rpx; color: #999999; } } } .message-list{ background-color: #FFFFFF; border-radius: 20rpx; font-size: 26rpx; margin: 25rpx; padding-bottom: 20rpx; .info-box { padding: 0 40rpx; border-radius: 20rpx; margin-bottom: 30rpx; .info-box-list { display: flex; align-items: center; border-bottom: 2rpx solid #ececec; padding-top: 30rpx; padding-bottom: 30rpx; .width100 { width: 100% !important; } .info-box-width { width: 50%; font-size: 30rpx; font-weight: bold; .info-box-content { display: flex; align-items: center; image{ width: 20rpx; height: 20rpx; } .input-text { width: 100rpx; } } .info-box-small { font-size: 26rpx; color: #a8a8a8; font-weight: 500; margin-top: 10rpx; } .info-box-list-img { margin-top: 30rpx; image { width: 180rpx; height: 180rpx; border-radius: 20rpx; } } .input-text { font-size: 30rpx; } .inputtext{ color: #3d3d3d; } } .serve { display: flex; justify-content: space-between; width: 100%; .serve-title { font-size: 30rpx; font-weight: bold; } .serve-right { font-size: 28rpx; text-align: right; color: #909090; .serve-right-top { margin-bottom: 20rpx; } } } } .info-box-list:last-child { border-bottom: 0; } } } /* 底部 */ .page-footer{ position: fixed; bottom: 0; display: flex; height: 200rpx; background-color: #fff; width: 100%; padding: 20rpx; z-index: 10; justify-content: space-between; flex-direction: column; align-content: center; .form_dong{ width: 100%; display: flex; justify-content: space-evenly; margin-top: 20rpx; >view{ width: 20%; text-align: center; font-size: 20rpx; color: #fff; height: 50rpx; border-radius: 100rpx; padding: 10rpx; line-height: 31rpx; background-color: #E60012; } } .footer-buy{ width: 100%; height: 80rpx; background-color: #E60012; border-radius: 100rpx; color: #fff; text-align: center; line-height: 80rpx; } } .dan_write{ width: 100%; margin: 0 auto; background-color: #FFFFFF; >button{ width: 60%; background-color: #E60012; border-radius: 100rpx; color: #FFFFFF; } >view{ display: flex; padding: 10rpx; align-items: center; >input{ background-color: #FFFFFF; border-left: 2rpx solid gray; margin-left: 20rpx; } } } form{ width: 100%; .yuansu{ width: 100%; font-size: 30rpx; font-weight: bold; // display: flex; // justify-content: space-evenly; // align-items: center; margin-top: 20rpx; border-bottom: 2rpx solid #ececec; >label{ font-size: 30rpx; color: #3d3d3d; font-weight: 500; margin-top: 10rpx; } >input{ font-size: 30rpx; background-color: #fbdadc; // width: 300rpx; } >button{ // width: 140rpx; // height: 40rpx; border-radius: 20rpx; font-size: 24rpx; text-align: center; line-height: 40rpx; color: #FFFFFF; background-color: #E60012; margin-top: 20rpx; } >textarea{ font-size: 30rpx; background-color: #fbdadc; border-radius: 10rpx; width: 100%; // width: 300rpx; } >.radio_box{ width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; >radio-group{ width: 100%; display: flex; justify-content: space-evenly; align-items: center; >label{ display: flex; } } } } }