index.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. @themeColor: var(--themeColor);
  2. @textColor:hsl(0, 0%, calc((var(--perceived-lightness) - var(--threshold)) * -10000000%));
  3. @backgroundColor:rgb(var(--red), var(--green), var(--blue));
  4. page {
  5. --threshold: 0.5;
  6. --border-threshold: 0.8;
  7. --r: calc(var(--red) * 0.2126);
  8. --g: calc(var(--green) * 0.7152);
  9. --b: calc(var(--blue) * 0.0722);
  10. --sum: calc(var(--r) + var(--g) + var(--b));
  11. --perceived-lightness: calc(var(--sum) / 255);
  12. }
  13. .top_scrprell {
  14. position: sticky;
  15. width: 100%;
  16. z-index: 99;
  17. }
  18. .list {
  19. .li {
  20. width: 700rpx;
  21. margin: 20rpx auto;
  22. padding: 20rpx 10rpx;
  23. background: white;
  24. border-radius: 20rpx;
  25. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(34, 34, 34, 0.1);
  26. .li-title {
  27. font-size: 32rpx;
  28. margin: 20rpx auto;
  29. }
  30. // #e73434
  31. .li-cont {
  32. display: flex;
  33. .li-cont-left {
  34. width: 160rpx;
  35. margin-right: 20rpx;
  36. .goods_image {
  37. width: 160rpx;
  38. height: 160rpx;
  39. }
  40. }
  41. .li-cont-rigth {
  42. flex: 1;
  43. display: flex;
  44. // justify-content: space-between;
  45. align-items: center;
  46. flex-direction: column;
  47. .li-row{
  48. display: flex;
  49. justify-content: space-between;
  50. width: 100%;
  51. margin-bottom: 10rpx;
  52. }
  53. .desc {
  54. overflow: hidden;
  55. display: -webkit-box;
  56. -webkit-line-clamp: 2;
  57. -webkit-box-orient: vertical;
  58. }
  59. .li-row-right{
  60. display: flex;
  61. justify-content: flex-end;
  62. width: 100%;
  63. }
  64. }
  65. }
  66. .date {
  67. color: black;
  68. }
  69. .li-footer {
  70. display: flex;
  71. justify-content: space-between;
  72. align-items: center;
  73. margin-top: 10rpx;
  74. .footer-left {
  75. color: #949494;
  76. }
  77. .footer-right {
  78. flex: 1;
  79. display: flex;
  80. justify-content: flex-end;
  81. .btn-ov {
  82. padding: 4rpx 20rpx;
  83. border: 1rpx solid #949494;
  84. border-radius: 30rpx;
  85. margin-left: 10rpx;
  86. }
  87. .btn-end {
  88. padding: 4rpx 20rpx;
  89. border-radius: 30rpx;
  90. background: @backgroundColor;
  91. margin-left: 10rpx;
  92. // color: white;
  93. border: 1rpx solid #949494;
  94. }
  95. }
  96. }
  97. }
  98. }
  99. .logistics {
  100. height: 300rpx;
  101. overflow-y: auto;
  102. padding: 10rpx;
  103. }