123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- html,
- body {
- height: 100%;
- background-color: #f5f5f5;
- font-family: PingFangSC-Regular;
- color: #333333;
- overflow-x: hidden;
- }
- .tab {
- box-sizing: border-box;
- width: 100%;
- padding: 28rpx 120rpx 0;
- background: #ffffff;
- font-size: 32rpx;
- color: #666666;
- text-align: center;
- position: fixed;
- z-index: 900;
- }
- .tab > view{
- display: flex;
- justify-content: space-between;
- }
- .tab > view>view {
- padding: 0 22rpx 28rpx;
- }
- .tab .line {
- padding: 0;
- width: 140rpx;
- height: 4rpx;
- background: #3296FB;
- position: absolute;
- left: 120rpx;
- bottom: 0;
- }
- .tab .selected {
- color: #3296FB;
- }
- .contentNull {
- width: 100%;
- height: 100%;
- background: #ffffff;
- position: relative;
- }
- .contentNull > view {
- position: absolute;
- top: 332rpx;
- left: 222rpx;
- display: flex;
- flex-direction: column;
- }
- .contentNull > view > image {
- width: 308rpx;
- height: 308rpx;
- }
- .contentNull > view > text {
- font-size: 28rpx;
- color: #9197a3;
- text-align: center;
- }
- .content {
- width: 200%;
- height: 100%;
- display: flex;
- box-sizing: border-box;
- padding-top: 100rpx;
- }
- .content >scroll-view {
- width: 750rpx;
- height: 100%;
- background: #f5f5f5;
- }
- .content .item {
- background: #ffffff;
- box-sizing: border-box;
- padding: 32rpx 32rpx 0;
- display: flex;
- flex-direction: column;
- margin: 20rpx 20rpx 0;
- }
- .content .item > .header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 18rpx;
- }
- .content .item > .header > .left {
- display: flex;
- align-items: center;
- font-size: 32rpx;
- }
- .content .item > .header > .left > image {
- width: 52rpx;
- height: 52rpx;
- margin-right: 20rpx;
- border-radius: 50%;
- }
- .content .header > .right {
- font-size: 30rpx;
- color: #ff801a;
- }
- .content .sItem:nth-child(2) .header > .right {
- color: #3AB261;
- }
- .content .sItem:nth-child(2) .footer {
- justify-content: flex-end;
- }
- .content .item > .detail {
- width: 100%;
- background: #fafafa;
- font-size: 28rpx;
- color: #666666;
- line-height: 26px;
- box-sizing: border-box;
- padding: 18rpx 28rpx;
- margin-bottom: 28rpx;
- }
- .content .item > .detail > view {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .content .item>.detail>view>text:last-child{
- display: block;
- width: 400rpx;
- text-align: right;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .content .item > .money {
- text-align: right;
- font-size: 28rpx;
- line-height: 26px;
- margin-bottom: 32rpx;
- }
- .content .item > .money > text {
- font-family: PingFangSC-Medium;
- font-size: 32rpx;
- }
- .content .item > .line {
- height: 2rpx;
- transform: scaleY(0.5);
- background: #eeeeee;
- margin-bottom: 18rpx;
- }
- .content .item > .footer {
- display: flex;
- align-items: center;
- padding-bottom: 20rpx;
- }
- .content .item > .footer .btn {
- border: 1rpx solid #cccccc;
- border-radius: 30rpx;
- padding: 12rpx 24rpx;
- font-size: 26rpx;
- color: #666666;
- }
- .content .item > .footer > .pay {
- background: #3296fb;
- color: #ffffff;
- border: none;
- }
|