.content { background: #f7f8f9; min-height: calc(100vh - 44px); } /* 订单弹出层 */ .users-back { position: fixed; height: 100vh; width: 100%; left: 0; bottom: 0; z-index: 100; background-color: rgba(0, 0, 0, .4); display: none; } .users-back.active { display: block; } .users-content { position: fixed; height: 80vh; width: 100%; left: 0; bottom: 0; z-index: 101; background-color: white; display: none; } .users-content.active { display: block; } .users-title { text-align: center; font-weight: bold; font-size: 40rpx; color: #333; height: 70rpx; line-height: 70rpx; padding: 30rpx; position: relative; } .users-content-icon { position: absolute; right: 30rpx; top: 44rpx; width: 40rpx; height: 40rpx; } .users-lists { padding: 0 30rpx 50rpx; max-height: 70vh; overflow-y: scroll; } .users-lists-item { background: #f7f8f9; padding: 30rpx; border-radius: 20rpx; font-size: 30rpx; margin-bottom: 30rpx; } .users-item { position: relative; line-height: 45rpx; min-height: 45rpx; padding-left: 160rpx; margin: 5rpx 0; text-align: right; } .users-item label { position: absolute; left: 0; top: 0; color: gray; } .users-item .bold { font-weight: bold; color: #da2b56; } /* 订单筛选 */ .screen-flex { display: flex; flex-wrap: wrap; position: fixed; width: 100%; left: 0; top: 0; height: 90rpx; background-color: white; z-index: 99; } .screen-picker { width: 50%; text-align: center; } .screen-text { line-height: 90rpx; height: 90rpx; display: inline-block; font-size: 30rpx; } .screen-icon { margin-left: 5rpx; width: 34rpx; height: 34rpx; vertical-align: -6rpx; } /* 订单为空 */ .order-null { height: 80vh; display: flex; justify-content: center; align-items: center; } /* 订单列表 */ .orders { padding: 30rpx 0 10rpx; margin-top: 90rpx; } .orders-item { margin: 0 30rpx 20rpx; background-color: white; border-radius: 20rpx; } .orders-content { padding: 20rpx 30rpx; } .orders-content-item { line-height: 70rpx; display: flex; justify-content: space-between; font-size: 30rpx; color: #111111; } .orders-content-item label { color: #999999; } .orders-content .orders-content-bottom { padding-right: 30rpx; position: relative; } .orders-content-type { display: flex; } .orders-content-icon { width: 20rpx; height: 20rpx; margin-top: 26rpx; transition: .3s; } .orders-content-icon.active { transform: rotate(90deg); } .orders-content-icon { position: absolute; right: 0; top: 0; } .orders-content-block { background: rgba(68, 110, 254, .03); padding: 20rpx; font-size: 28rpx; border-radius: 10rpx; margin: 10rpx 0; } .item-flex { display: flex; justify-content: space-between; line-height: 50rpx; } .orders-flex { border-bottom: solid 1rpx #F6F6F6; display: flex; justify-content: space-between; align-items: center; padding: 20rpx 30rpx; } .orders-flex:last-child { border-top: solid 1rpx #F6F6F6; border-bottom: none; } .orders-tag { display: inline-block; background: #da2b56; font-size: 26rpx; color: white; border-radius: 10rpx; padding: 0 10rpx; height: 40rpx; line-height: 40rpx; margin-right: 10rpx; } .orders-tag.order-tag-my { background: #da2b56; } .no { font-size: 30rpx; color: #111; line-height: 60rpx; width: calc(100% - 150rpx); } .state { color: #da2b56; font-weight: bold; font-size: 30rpx; line-height: 60rpx; width: 150rpx; text-align: right; } .btns { text-align: right; width: 100%; } .btns-item { display: inline-block; height: 70rpx; line-height: 70rpx; background: #da2b56; color: white; border-radius: 35rpx; padding: 0 30rpx; font-size: 30rpx; } .btns-item.btns-border { line-height: 68rpx; box-sizing: border-box; border: solid 1rpx #da2b56; background: white; color: #da2b56; margin-right: 20rpx; } .pack-center { z-index: 0; }