/**index.wxss**/ page { background: #F6F6F6; display: flex; flex-direction: column; justify-content: flex-start; } .userinfo, .uploader, .tunnel,.row{ margin-top: 40rpx; height: 140rpx; width: 100%; background: #FFF; border: 1px solid rgba(0, 0, 0, .1); border-left: none; border-right: none; display: flex; flex-direction: row; align-items: center; transition: all 300ms ease; } .userinfo-avatar { width: 100rpx; height: 100rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { font-size: 32rpx; color: #007AFF; background-color: white; } .userinfo-nickname::after { border: none; } .uploader, .tunnel { height: auto; padding: 0 0 0 40rpx; flex-direction: column; align-items: flex-start; box-sizing: border-box; } .uploader-text, .tunnel-text { width: 100%; line-height: 52px; font-size: 34rpx; color: #007AFF; } .uploader-container { width: 100%; height: 400rpx; padding: 20rpx 20rpx 20rpx 0; display: flex; align-content: center; justify-content: center; box-sizing: border-box; border-top: 1px solid rgba(0, 0, 0, .1); } .uploader-image { width: 100%; height: 360rpx; } .tunnel { padding: 0 0 0 40rpx; } .tunnel-text { position: relative; color: #222; display: flex; flex-direction: row; align-content: center; justify-content: space-between; box-sizing: border-box; border-top: 1px solid rgba(0, 0, 0, .1); } .tunnel-text:first-child { border-top: none; } .tunnel-switch { position: absolute; right: 20rpx; top: -2rpx; } .disable { color: #888; } .service { position: fixed; right: 40rpx; bottom: 40rpx; width: 140rpx; height: 140rpx; border-radius: 50%; background: linear-gradient(#007AFF, #0063ce); box-shadow: 0 5px 10px rgba(0, 0, 0, .3); display: flex; align-content: center; justify-content: center; transition: all 300ms ease; } .service-button { position: absolute; top: 40rpx; } .service:active { box-shadow: none; } .request-text { padding: 20rpx 0; font-size: 24rpx; line-height: 36rpx; word-break: break-all; } .btn{ margin-left: 30px; margin-right: 0; left: 0; right: 0; } .area3{ margin-top: 15rpx; display:flex; /*row 横向 column 列表 */ flex-direction: row; background-color: #f9f7f7; border-radius: 15rpx; margin-left:15rpx; margin-right:15rpx; } .start{ top: 20px; position: relative; } .t1{ position:relative; margin-left: auto; margin-right: auto; } .t2{ position:relative; margin-left: auto; margin-right: auto; } .t3{ margin-left: auto; margin-right: auto; } .userinfo,.row{ margin-top: 1px; left: 10px; right: 10px; width: 90%; } .row{ background-color: white; margin-top: 0px; height: 100px; } .l4{ display: flex; flex-direction: column; margin-left: 10px; font-size: 15px; } .center-view{ margin-top: 0px; text-align: center; display: flex; justify-content: center; }