order.wxss 2.0 KB

123456789101112131415161718192021222324252627282930313233
  1. .tab-bar{border-bottom: 2rpx solid #ebedf0; display: flex; justify-content: space-between; align-items: center; box-sizing: content-box; position: fixed; top: 0; left: 0; width: 100%; z-index: 99;}
  2. .tab-item{flex: 0; flex-basis: 22%; padding: 0 10rpx; text-align: center; line-height: 88rpx; font-size:28rpx; box-sizing: border-box;}
  3. .tab-item.active .label{border-bottom: 4rpx solid var(--themeColor); color: var(--themeColor);}
  4. .label{display: inline-block; position: relative; border-bottom: 4rpx solid transparent; color: #7d7e80;}
  5. .tab-bar ~ .content{padding-top: 88rpx;}
  6. .info{position: absolute; top: 10rpx; right: -20rpx; line-height: 24rpx; background: var(--themeColor);
  7. border-radius: 32rpx; font-size: 20rpx; color: #fff; border:3rpx solid #fff; box-sizing: border-box; padding:2rpx 6rpx; min-width: 16px;}
  8. .order-card{margin-top: 16rpx; box-sizing: border-box; position: relative; padding: 20rpx;}
  9. .order-card:first-child{margin-top: 0;}
  10. .order-card-main{display: flex; justify-content: space-between; align-items: center;}
  11. .order-card-main > image{flex-shrink: 0; width: 180rpx; height: 180rpx; border-radius: 20rpx;}
  12. .order-card-content{display: flex; flex-direction:column; flex-shrink: 1; width: 100%; margin-left: 20rpx;}
  13. .listTitle{color:#595757;font-size:28rpx; overflow: hidden;text-overflow:ellipsis;display:-webkit-box;height:84rpx;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  14. .order-card-footer{border-top: 2rpx dashed #efefef; margin-top: 20rpx; padding-top: 20rpx; text-align: right;}
  15. .order-card-footer > text, .order-card-footer > button{margin-left: 20rpx; display: inline-block; vertical-align: middle; font-size:24rpx;border-color: var(--subtitleColor);color: var(--subtitleColor);}
  16. .comment{
  17. position: relative;
  18. overflow: visible;
  19. }
  20. .badge--fixed{
  21. color: #fff;
  22. background: #ee3a43;
  23. position: absolute;
  24. top: -6rpx;
  25. right: 30rpx;
  26. transform: translate(50%,-50%);
  27. transform-origin: 100%;
  28. font-size: 20rpx;
  29. line-height: 1.6;
  30. padding: 0 6rpx;
  31. border-radius: 20rpx;
  32. }