page { background-color: #fff; } .content.data-v-d3798410 { position: relative; } .content .background.data-v-d3798410 { height: 500rpx; overflow: hidden; position: relative; width: 100%; z-index: 9; } .content .background .background-inner.data-v-d3798410 { background: linear-gradient(to right top, #1f68e9, #2c74ef); border-radius: 0 0 50% 50%; content: ""; height: 500rpx; left: -20%; position: absolute; top: 0; width: 140%; z-index: -1; } .content .background .user-info.data-v-d3798410 { display: -webkit-flex; display: flex; padding: 40rpx; position: relative; z-index: 10; } .content .background .user-info .left-content.data-v-d3798410 { border: 2rpx solid #fff; border-radius: 100%; height: 125rpx; overflow: hidden; width: 125rpx; } .content .background .user-info .left-content image.data-v-d3798410 { height: 100%; width: 100%; } .content .background .user-info .right-content.data-v-d3798410 { color: #fff; display: -webkit-flex; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-left: 30rpx; } .content .background .user-info .right-content .name.data-v-d3798410 { align-items: center; display: -webkit-flex; display: flex; font-size: 38rpx; font-weight: 700; } .content .background .user-info .right-content .name image.data-v-d3798410 { height: 20rpx; margin-left: 10rpx; width: 20rpx; } .content .background .user-info .right-content .id.data-v-d3798410 { color: hsla(0, 0%, 100%, 0.847); font-size: 28rpx; margin-top: 16rpx; } .content .background .user-info .right-content .login.data-v-d3798410 { color: #fff; font-size: 38rpx; font-weight: 700; } .content .order.data-v-d3798410 { align-self: center; background-color: #fff; border-radius: 12rpx; box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1); display: -webkit-flex; display: flex; justify-content: space-between; margin: -120rpx 50rpx 20rpx; padding: 30rpx 20rpx 20rpx; position: relative; z-index: 99; } .content .order .order-item.data-v-d3798410 { align-items: center; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; width: 150rpx; } .content .order .order-item image.data-v-d3798410 { height: 50rpx; width: 50rpx; } .content .order .order-item text.data-v-d3798410 { color: #444; font-size: 28rpx; margin-top: 20rpx; } .content .cell-content.data-v-d3798410 { background-color: #fff; padding: 0 20rpx; } .content .cell-content .cell.data-v-d3798410 { align-items: center; background-color: #fff; border: 0; display: -webkit-flex; display: flex; justify-content: space-between; margin: 0; padding: 18rpx 40rpx; } .content .cell-content .cell .icon.data-v-d3798410 { flex-shrink: 0; height: 44rpx; width: 44rpx; } .content .cell-content .cell text.data-v-d3798410 { color: #333; display: block; flex-grow: 1; font-size: 30rpx; margin-left: 30rpx; text-align: left; } .content .cell-content .cell .more.data-v-d3798410 { flex-shrink: 0; height: 22rpx; width: 12rpx; } .content .cell-content .divider.data-v-d3798410 { background-color: #f4f4f4; height: 1rpx; margin: 8rpx 0; width: 100%; } .content .tips.data-v-d3798410 { color: gray; font-size: 24rpx; padding: 20rpx 0 40rpx; text-align: center; } .content .easter-egg.data-v-d3798410 { animation: shake-d3798410 1s linear 0.15s infinite; bottom: 100rpx; height: 100rpx; position: fixed; right: 50rpx; width: 100rpx; z-index: 88; } .hover-class.data-v-d3798410 { opacity: 0.7; } @-webkit-keyframes shake-d3798410 { 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%, to { transform: rotate(0); } } @keyframes shake-d3798410 { 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%, to { transform: rotate(0); } }