.container { background: #fafafa; min-height: 100vh; padding: 0rpx 0 100rpx; } .container,.page-top { box-sizing: border-box; } .page-top { background-image: linear-gradient(-70deg,#11b393,#4eb9f7); height: 290rpx; margin-bottom: 112rpx; padding: 38rpx 27rpx; position: relative; } .shadow { background: #fff; border-radius: 18rpx; box-shadow: 0 0rpx 9rpx 4rpx hsla(0,0%,80%,.75); } .page-top .user-info { align-items: center; display: flex; } .page-top .user-info .left { display: inline-flex; flex-direction: column; } .page-top .user-info .avatar { border: 5rpx solid #fff; border-radius: 50%; display: inline-flex; flex: 0 0 110rpx; height: 110rpx; margin-right: 20rpx; overflow: hidden; width: 110rpx; } .page-top .user-info .avatar image { height: 100%; width: 100%; } .page-top .user-info .info { align-items: center; color: #fff; display: inline-flex; flex: 1; font-size: 26rpx; justify-content: space-between; } .page-top .user-info .info .username { font-size: 33rpx; margin-bottom: 20rpx; } .page-top .user-info .right { display: inline-flex; } .page-top .user-info .right .zhe { height: 58rpx; margin-left: 6px; width: 58rpx; } .page-top .user-info .right .xunzhang { height: 59rpx; width: 118rpx; } .page-top .my-capital { background: #fff; height: 184rpx; left: 27rpx; position: absolute; top: 182rpx; width: calc(100vw - 54rpx); z-index: 3; } .title { align-items: center; color: #000; display: flex; font-size: 29rpx; justify-content: space-between; padding-left: 34rpx; padding-top: 10rpx; } .title .btn,.title .text { display: inline-flex; } .title .btn { color: #666; font-size: 22rpx; padding: 10rpx 14rpx; } .money-box { display: flex; padding: 16rpx 0 24rpx; } .money-box .item { align-items: center; display: inline-flex; flex: 1; flex-direction: column; font-weight: 400; justify-content: center; } .money-box .item .num { color: #f60; font-size: 33rpx; margin-bottom: 4rpx; } .money-box .item .name { color: #666; font-size: 22rpx; } .order-manager { box-sizing: border-box; margin: 0 27rpx 36rpx; } .order-manager .list { display: flex; padding: 18rpx 0 30rpx; } .order-manager .list .item { align-items: center; background: #fff; border: none; color: #666; display: inline-flex; flex: 1; flex-direction: column; font-size: 50rpx; height: 97rpx; justify-content: space-between; } button::after { background: transparent; border: none; } .iconfont { font-size: 64rpx; margin: -10rpx; } .order-manager .list .item .name { font-size: 22rpx; margin-top: 2rpx; } .url-list { align-items: flex-start; box-sizing: border-box; display: flex; flex-wrap: wrap; font-size: 0rpx; margin: 0 27rpx 36rpx; padding-bottom: 12rpx; } .url-list .item { align-items: center; background: transparent; color: #666; display: inline-flex; flex-direction: column; font-size: 26rpx; justify-content: space-between; line-height: 1; padding: 50rpx 0 34rpx; text-align: center; width: 33.33%; } .url-list .item .name { margin-top: 22rpx; } .footer-btn { background: #fff; bottom: 0; box-shadow: 0 0rpx 9rpx 4rpx hsla(0,0%,80%,.75); color: #666; display: flex; font-size: 29rpx; left: 0; padding: 12rpx 0; position: fixed; width: 100vw; } .footer-btn,.footer-btn .btn { align-items: center; } .footer-btn .btn { display: inline-flex; flex: 1; height: 58rpx; justify-content: center; } .footer-btn .btn:not(:last-child) { border-right: 1px solid #999; }