list.css 4.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. /* product/list/list.wxss */
  2. .ssbox {padding: 20rpx 35rpx;position: fixed;top: 0;left: 0;right: 0;}
  3. .search {background: #F0F2F3;height: 70rpx;border-radius: 35rpx;padding: 0 30rpx;align-items: center;font-size: 26rpx;color: #666;overflow: hidden;}
  4. .search image {width: 30rpx;height: 30rpx;margin-right: 13rpx;}
  5. .search view {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
  6. .filter {padding: 0 20rpx;}
  7. .filter .li {width: 33.33%;display: flex;display: -webkit-flex;align-items: center;justify-content: center;padding: 25rpx 0;font-size: 30rpx;color: #333;}
  8. .filter .li.active {color: var(--mina);}
  9. .updown {width: 14rpx;height: 23rpx;margin-left: 9rpx;}
  10. .tabcon {flex-wrap: wrap;padding: 0 20rpx 20rpx;}
  11. .tabcon .li {background: #fff;border-radius: 10rpx;width: 345rpx;margin: 20rpx 20rpx 0 0;}
  12. .tabcon .li:nth-child(2n) {margin-right: 0;}
  13. .jsdimgs {width: 345rpx;height: 345rpx;position: relative;}
  14. .jsdpro {width: 100%;height: 100%;}
  15. /* .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;} */
  16. .vip {font-size: 20rpx !important;background: #FFEFD9;color: var(--vip);padding: 0 8rpx 2rpx 8rpx;border-radius: 6rpx;font-weight: normal !important;margin-left: 12rpx;}
  17. .price .vip .members {font-size: 20rpx !important;font-weight: normal !important;margin-left: 2rpx;}
  18. .price .vip .sale {font-size: 20rpx !important;font-weight: normal !important;}
  19. .jsdimg {width: 82rpx;height: 36rpx;position: absolute;top: 20rpx;left: 20rpx;}
  20. .jsdinfo {padding: 15rpx 20rpx 30rpx;}
  21. .proname {font-size: 28rpx;color: #333;
  22. /* text-overflow: ellipsis;
  23. white-space: nowrap; */
  24. line-height: 36rpx;height: 72rpx;overflow: hidden;margin-bottom: 20rpx;font-weight: bold;}
  25. .operate {justify-content: space-between;align-items: center;}
  26. .price {font-size: 24rpx;color: #FE0419;align-items: center;display: flex;}
  27. .price text {font-size: 36rpx;font-weight: bold;}
  28. .price text.del {font-weight: normal;font-size: 24rpx;color: #999;margin-left: 12rpx;text-decoration: line-through;}
  29. .add-cart image {width: 42rpx;height: 42rpx;}
  30. .nums {align-items: center;}
  31. .num {font-size: 30rpx;width: 50rpx;text-align: center;line-height: 42rpx;}
  32. /* 筛选 */
  33. .isRuleShow {display: block;}
  34. .isRuleHide {display: none;}
  35. .shaixuan {align-items: center;}
  36. .shaixuan image {width: 26rpx;height: 26rpx;margin-left: 10rpx;}
  37. .shai {position: fixed;
  38. /* #ifdef H5 */
  39. top: 39px;
  40. /* #endif */
  41. /* #ifndef H5 */
  42. top: 0;
  43. /* #endif */
  44. right: -310px;bottom: 0;width: 310px;background: #fff;z-index: 100;}
  45. .shai-box {position: absolute;top: 0;left: 0;right: 0;bottom: 122rpx;overflow-y: scroll;-webkit-overflow-scrolling: touch;z-index: 1;padding: 0 20rpx;}
  46. .shai-tit {padding: 25rpx 0;position: relative;font-size: 28rpx;color: #333;}
  47. .quanbu {position: absolute;top: 50%;transform: translateY(-50%);right: 0;font-size: 24rpx;color: #777;align-items: center;}
  48. .quanbu image {width: 20rpx;height: 13rpx;margin-left: 8rpx;}
  49. .shai-lis {flex-wrap: wrap;}
  50. .shai-lis .li {height: 60rpx;line-height: 60rpx;background: #F2F2F2;font-size: 24rpx;color: #333;text-align: center;border-radius: 30rpx;margin-right: 3.5%;margin-bottom: 30rpx;padding: 0 20rpx 0 20rpx;}
  51. .shai-lis .li:nth-child(3n) {margin-right: 0;}
  52. .shai-lis .li.active {background: #FCF0F2;color: #FE0419;}
  53. .shai-bot {position: absolute;left: 0;right: 0;bottom: 0;border-top: 2rpx solid #E8E8E8;padding: 20rpx;align-items: center;justify-content: space-between;background: #fff;z-index: 2;}
  54. .reset {width: 250rpx;height: 76rpx;line-height: 76rpx;border-radius: 40rpx;border: 2rpx solid #999999;font-size: 30rpx;color: #333;text-align: center;}
  55. .confirm {width: 250rpx;height: 80rpx;line-height: 80rpx;background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(247, 26, 71, 1) 0%, rgba(254, 23, 72, 1) 0%, rgba(255, 67, 5, 1) 100%);border-radius: 40rpx;font-size: 30rpx;color: #fff;text-align: center;}
  56. .confirm text {font-size: 24rpx;}
  57. /* 购物车 */
  58. .dots {display: block;height: 32rpx;border-radius: 30rpx;padding: 0 15rpx;font-size: 24rpx;line-height: 30rpx;min-width: 30rpx;box-sizing: border-box;text-align: center;position: absolute;top: -10rpx;right: -15%;border: 1rpx solid;color: #C7435A;}
  59. .dot {top: 0;left: 0;position: fixed;width: 40rpx;height: 40rpx;border-radius: 50%;background: #1dae01;display: flex;flex-direction: row;justify-content: center;align-items: center;font-size: 24rpx;color: white;}
  60. .xiaol {margin-bottom: 15rpx;line-height: 32rpx;}
  61. .zhuan {float: left;height: 32rpx;font-size: 20rpx;color: #fff;box-sizing: border-box;align-items: center;margin-right: 15rpx;}
  62. .zhuan text {padding: 0 6rpx;border-radius: 2rpx 0 0 2rpx;background: #C28A4F;height: 32rpx;line-height: 32rpx;}
  63. .zhuan view {font-size: 22rpx;color: #BF7A40;padding: 0 5rpx 0 2rpx;background: #fff;height: 28rpx;border: 2rpx solid #C08046;border-radius: 0 2rpx 2rpx 0;border-left: none;}
  64. .yishou {font-size: 24rpx;color: #999;clear: both;overflow: hidden;}
  65. .shouqin {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;}