C端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

156 lines
2.3 KiB

  1. /* components/hot/hot.wxss */
  2. @import "../../app.wxss";
  3. .hotBox {
  4. width: 710rpx;
  5. margin: 0 auto;
  6. }
  7. .hotTitle {
  8. width: 100%;
  9. height: 60rpx;
  10. line-height: 60rpx;
  11. font-size: 30rpx;
  12. display: flex;
  13. justify-content: space-between;
  14. font-family: PingFangSC-Medium;
  15. }
  16. .titleL .titleR {
  17. width: 100rpx;
  18. }
  19. .titleR .text {
  20. float: left;
  21. margin-right: 10rpx;
  22. font-family: PingFangSC-Regular !important;
  23. }
  24. .titleR .view {
  25. height: 40rpx;
  26. width: 40rpx;
  27. /* margin-top: 10rpx; */
  28. float: left;
  29. }
  30. .titleR .img {
  31. height: 28rpx;
  32. width: 28rpx;
  33. }
  34. .sql {
  35. width: 12rpx;
  36. height: 24rpx;
  37. border-radius: 8rpx;
  38. float: left;
  39. margin: 20rpx 10rpx 0 0;
  40. }
  41. .hotCon {
  42. width: 100%;
  43. }
  44. .kanjia,
  45. .pintuan {
  46. width: 346rpx;
  47. height: 156rpx;
  48. float: left;
  49. border-radius: 12rpx;
  50. display: flex;
  51. justify-content: space-between;
  52. position: relative;
  53. }
  54. .kanjia {
  55. margin-right: 18rpx;
  56. background: linear-gradient(130deg, rgba(50, 177, 252, 1) 0%, rgba(47, 108, 255, 1) 100%);
  57. }
  58. .pintuan {
  59. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  60. }
  61. .hotCon .img {
  62. width: 86rpx;
  63. height: 86rpx;
  64. margin: 24rpx 0 46rpx 16rpx;
  65. }
  66. .hotCon .btn {
  67. width: 80rpx;
  68. height: 44rpx;
  69. line-height: 44rpx;
  70. background: rgba(255, 255, 255, 1);
  71. border-radius: 18rpx;
  72. font-size: 24rpx;
  73. position: absolute;
  74. right: 20rpx;
  75. bottom: 20rpx;
  76. text-align: center;
  77. }
  78. .btnk {
  79. color: #2C8DFF;
  80. }
  81. .btnp {
  82. color: #FD782D;
  83. }
  84. .btnNone {
  85. width: 80rpx;
  86. height: 44rpx;
  87. line-height: 44rpx;
  88. border-radius: 18rpx;
  89. font-size: 24rpx;
  90. position: absolute;
  91. right: 20rpx;
  92. bottom: 20rpx;
  93. text-align: center;
  94. background: rgba(255, 255, 255, 0.5)
  95. }
  96. .kjText,
  97. .ptText {
  98. color: #FFFFFF;
  99. margin: 14rpx 10rpx 20rpx 10rpx;
  100. }
  101. .title {
  102. width: 210rpx;
  103. font-size: 30rpx;
  104. overflow: hidden;
  105. text-overflow: ellipsis;
  106. white-space: nowrap;
  107. float: left;
  108. }
  109. .price {
  110. width: 128rpx;
  111. overflow: hidden;
  112. text-overflow: ellipsis;
  113. white-space: nowrap;
  114. font-size: 22rpx;
  115. text-decoration: line-through;
  116. float: left;
  117. }
  118. .expect {
  119. width: 210rpx;
  120. font-size: 22rpx;
  121. float: left;
  122. }
  123. .sale {
  124. width: 140rpx;
  125. font-size: 32rpx;
  126. float: left;
  127. margin-top: -8rpx;
  128. white-space: nowrap;
  129. text-overflow: ellipsis;
  130. overflow: hidden;
  131. }
  132. .sale .simple {
  133. font-size: 20rpx !important;
  134. }