sort.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /* pages/sort/sort.wxss */
  2. page {background: #fff;}
  3. .search-box{background: #fff;padding: 0 30rpx 30rpx;height: 70rpx;position: fixed;top: 0;left: 0;right: 0;z-index: 50;}
  4. .search{background: #f7f7f7;border-radius: 35rpx;justify-content: center;font-size: 28rpx;color: #999;height: 70rpx;}
  5. .search image{width: 30rpx;height: 30rpx;margin-right: 20rpx;}
  6. .left {width: 22%;background: #F0F0F0;position: fixed;left: 0;top: 99rpx;font-size: 26rpx;content: #333;bottom: 115rpx;z-index: 51;}
  7. .left .li {line-height: 100rpx;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
  8. .left .li.active {font-weight: bold;background: #fff;border-left: 6rpx solid var(--mina) !important;}
  9. .right {width: 78%;background: #fff;position: absolute;right: 0;top: 100rpx;padding-top: 80rpx;padding-bottom: 115rpx;}
  10. .right-top{position: fixed;top: 99rpx;left: 0;right: 20rpx;z-index: 50;padding-left: 22%;background: #fff;padding-bottom: 30rpx;}
  11. .coupons{background: #FFEBEB;border-radius: 8rpx;padding: 11rpx 15rpx 20rpx 13rpx;line-height: 50rpx;align-items: flex-start;margin-bottom: 30rpx;margin-left: 20rpx;}
  12. .coupons-list{height: 50rpx;}
  13. .coupons-s{height: 70rpx;white-space: nowrap;}
  14. .coupons-list .li{display: inline-block;height: 50rpx;background: linear-gradient(90deg, #FE934C 0%, #FD3A31 100%);border-radius: 8rpx;font-size: 24rpx;color: #fff;margin: 0 15rpx 0 0;vertical-align: top;}
  15. .coupons-tit{height: 50rpx;padding: 0 18rpx;border-right: 2rpx dashed rgba(255,255,255,.3);position: relative;}
  16. .coupons-tit::before,.coupons-tit::after{content: '';display: block;width: 13rpx;height: 13rpx;background: #FFEBEB;position: absolute;right: -6rpx;border-radius: 50%;}
  17. .coupons-tit::before{top: -6rpx;}
  18. .coupons-tit::after{bottom: -6rpx;}
  19. .coupons-list .li text{padding: 0 20rpx;}
  20. .coupon-num{font-size: 24rpx;color: #CD0B01;}
  21. .rico{width: 12rpx;height: 21rpx;margin-left: 12rpx;}
  22. .tab {white-space: nowrap;-webkit-overflow-scrolling: touch;box-sizing: border-box;}
  23. .tab .li {display: inline-block;padding: 0 20rpx;line-height: 48rpx;background: #F7F7F7;margin-right: 10rpx;border-radius: 24rpx;}
  24. .tab .li:first-child{margin-left: 20rpx;}
  25. .tab .li:last-child {margin-right: 0;}
  26. .tab .li.active {color: var(--mina) !important;}
  27. .sort {padding: 0 0 0 20rpx;box-sizing: border-box;}
  28. .price .vip {font-size: 24rpx;margin-left: 12rpx;color: var(--vip);border: 1rpx solid;padding: 0 8rpx 2rpx 8rpx;border-radius: 5px;font-weight: normal;}
  29. .price .vip .members {font-size: 24rpx !important;font-weight: normal !important;margin-left: 2rpx;}
  30. .price .vip .sale {font-size: 24rpx !important;font-weight: normal !important;}
  31. .price text.del {font-weight: normal;font-size: 24rpx;color: #999;margin-left: 12rpx;text-decoration: line-through;}
  32. .sort .li {border-bottom: 2rpx solid #eee;padding-bottom: 39rpx;margin-bottom: 39rpx;overflow: hidden;padding-right: 20rpx;}
  33. .sort .li:last-child {margin-bottom: 0;}
  34. .sort .li .flex {overflow: hidden;}
  35. .proimgs{width: 160rpx;height: 160rpx;border-radius: 10rpx;position: relative;margin-right: 18rpx;border: 2rpx solid #E5E5E5;}
  36. .proimg {box-sizing: border-box;width: 100%;height: 100%;border-radius: 10rpx;}
  37. .shouqing{width: 100%;height: 100%;border-radius: 10rpx;position: absolute;top: 0;left: 0;}
  38. .proname {font-size: 28rpx;color: #333;
  39. /* text-overflow: ellipsis;
  40. white-space: nowrap; */
  41. line-height: 36rpx;height: 73rpx;overflow: hidden;}
  42. .pronames {font-size: 24rpx;color: #999;margin-top: 5rpx;}
  43. .endtime {display: inline-block;height: 32rpx;line-height: 32rpx;border: 2rpx solid #FE0419;border-radius: 6rpx;padding: 0 8rpx;font-size: 24rpx;color: #FE0419;margin: 15rpx 0 65rpx;}
  44. .operate {justify-content: space-between;align-items: center;margin-top: 10rpx;}
  45. .price {font-size: 24rpx;color: #FE0419;align-items: center;display: flex;flex-wrap: nowrap;}
  46. .price text {font-size: 36rpx;font-weight: bold;}
  47. .add-cart image {width: 42rpx;height: 42rpx;}
  48. .nums {align-items: center;}
  49. .num {font-size: 30rpx;width: 50rpx;text-align: center;line-height: 42rpx;}
  50. /* 分类2 */
  51. .sort-left {width: 22%;background: #F0F0F0;position: fixed;left: 0;top: 99rpx;font-size: 26rpx;content: #333;}
  52. .sort-left .li {line-height: 100rpx;text-align: center;height: 101rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
  53. .sort-left .li.active {font-weight: bold;background: #fff;border-left: 6rpx solid var(--mina) !important;}
  54. .sort-right {width: 78%;position: absolute;right: 0;top: 99rpx;box-sizing: border-box;}
  55. .sort-right .rcon {padding: 0 20rpx 20rpx;}
  56. .sort-right .tit {padding: 25rpx 0 15px;font-size: 28rpx;color: #9A9A9A;}
  57. .sort-right .list {flex-wrap: wrap;background: #fff;border-radius: 10rpx;padding: 40rpx 15rpx 0;overflow: hidden;}
  58. .sort-right .list .li {margin-bottom: 55rpx;width: 33.33%;text-align: center;font-size: 28rpx;color: #666;}
  59. .sort-right .list image {display: block;width: 120rpx;height: 120rpx;margin: 0 auto 10rpx;}
  60. .litext {width: 120rpx;height: 120rpx;border-radius: 50%;font-size: 40rpx;color: #fff;text-align: center;line-height: 120rpx;background: #f3f1f2;margin: 0 auto 15rpx;}
  61. .nopronames {height: 31rpx;}
  62. .vip-news{height: 36rpx;background: #222222;border-radius: 8rpx;line-height: 36rpx;flex-wrap: nowrap;margin-left: 12rpx;font-weight: bold;}
  63. .vip-sale{background: linear-gradient(to right,#f9e0bc,#d9a168);font-size: 20rpx !important;color: #222;height: 36rpx;border-radius: 8rpx 0 0 8rpx;white-space: nowrap;width: 70rpx;text-align: center;}
  64. .vip-members{padding: 0 8rpx 0 5rpx;font-size: 22rpx !important;color: #fde9cd !important;white-space: nowrap;}