.page { background-color: #F9F9F9; width: 100%; height: 100%; } .head{ position: fixed; left: 0; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100rpx; /* #ifdef MP */ height: calc(120rpx + var(--status-bar-height)); padding-top: calc(40rpx + var(--status-bar-height)); /* #endif */ background-color: rgba(255,255,255,1); .logo-title{ width: 64%; color: #000; padding-left: 25rpx; font-size: 32rpx; display: flex; align-items: center; image { width: 32rpx; height: 32rpx; margin-right: 10rpx; } } .title{ } .setting-mess{ width: 20%; display: flex; align-items: center; height: 100%; margin-right: 25rpx; } } .main { margin-top: 100rpx; padding-bottom: 200rpx; } .sup-top { padding: 25rpx; .sup-title { font-size: 32rpx; font-weight: bold; } .sup-title-small { color: #9A9EA1; margin-top: 10rpx; } } /*步骤*/ .stepBox { width: 100%; height: 100rpx; display: flex; justify-content: space-between; align-items: center; .stepItem { width: 33.3%; height: 100rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; position: relative; .stepLine { width:100%; height: 8rpx; background-color: #BCCAEA; position: absolute; top: 26rpx; left: 120rpx; z-index: 0; } .stopOver, .stopUnover { width: 36rpx; height: 36rpx; } .stepLine-active { background-color: #477eff; } .stopOver { border: 8rpx solid #477eff !important; } .stopUnover { margin-bottom: 10rpx; background-color: #fff; border: 8rpx solid #BCCAEA; display: flex; justify-content: center; align-items: center; border-radius: 50%; position: relative; z-index: 1; } .text { color: #B6B6B6; } .text-active { color: #000 !important; } } } .send_bottom { box-sizing: border-box; padding: 28rpx; .stopMinus { background-color: #fff; border: 2rpx solid var(--view-theme); color: var(--view-theme); } .send_btn:nth-of-type(2) { margin-left: 24rpx; } } /* 列表 */ .message-list{ background-color: #FFFFFF; border-radius: 20rpx; font-size: 26rpx; margin: 25rpx; .list{ display: flex; align-items: center; justify-content: space-between; border-bottom: 2rpx solid #eceff4; margin: 0 35rpx; padding: 30rpx 0; .data{ text{ color: #000; } } .more{ input { text-align: right; font-size: 26rpx; } .placeholder { font-size: 26rpx; color: #acacac; line-height: 45rpx; } textarea{ width: 100%; height: 120rpx; background-color: #F4F4F4; border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; margin-top: 26rpx; line-height: 30rpx; } } } .list:last-child { border-bottom: 0; } } .sup-up { background-color: #FFFFFF; border-radius: 20rpx; font-size: 26rpx; margin: 25rpx; padding: 30rpx; .sup-up-title { margin-bottom: 40rpx; } .sup-up-content { display: flex; justify-content: space-between; align-items: center; .sup-up-list { width: 48%; image { width: 100%; } } } } .page-footer{ position: fixed; bottom: 0; display: flex; height: 200rpx; background-color: #fff; padding: 0 25rpx 25rpx 25rpx; width: 100%; .footer-buy{ width: 100%; height: 100%; .buy-at{ width: 100%; height: 100rpx; line-height: 100rpx; background-color: #477eff; text-align: center; border-radius: 30rpx; text{ font-size: 32rpx; color: #FFFFFF; } } .footer-tips { font-size: 23rpx; width: 100%; text-align: center; margin-top: 20rpx; } } }