金诚优选前端代码
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.

160 lines
4.6 KiB

  1. .bargain_contanier{
  2. width: 100%;
  3. position: relative;
  4. .bargain_head{
  5. width: 100%;
  6. height: 400rpx;
  7. position: relative;
  8. image{
  9. width: 100%;
  10. height: 100%;
  11. }
  12. }
  13. .rule{
  14. width:74px;
  15. height:24px;
  16. color: #ffffff;
  17. background:rgba(17, 17, 17, 0.1);
  18. border-radius:100px 0px 0px 100px;
  19. position: absolute;
  20. display: flex;
  21. justify-content: center;
  22. align-items: center;
  23. top: 15px;
  24. right: 0;
  25. font-size:11px;
  26. }
  27. .body_box{
  28. position: relative;
  29. top: -30px;
  30. width: 92%;
  31. display: flex;
  32. flex-direction: column;
  33. .bargain_body{
  34. margin: -0px 15px 10px 15px;
  35. padding: 10px;
  36. border-radius:6px;
  37. width: 100%;
  38. .bargain_goods{
  39. display: flex;
  40. background-color: #fff;
  41. padding: 10px;
  42. margin-bottom: 10px;
  43. align-items: center;
  44. .goods_left{
  45. width:110px;
  46. margin-right: 10px;
  47. image{
  48. width: 100%;
  49. }
  50. }
  51. .goods_right{
  52. display: flex;
  53. flex-direction: column;
  54. flex: 1;
  55. .goods_name{
  56. font-size:13px;
  57. font-weight:400;
  58. color:rgba(51,51,51,1);
  59. line-height:20px;
  60. word-break: break-all;
  61. word-wrap: break-word;
  62. overflow: hidden;
  63. text-overflow: ellipsis;
  64. display: -webkit-box;
  65. -webkit-line-clamp: 2;
  66. line-clamp: 2;
  67. -webkit-box-orient: vertical;
  68. }
  69. .number{
  70. height:14px;
  71. font-size:10px;
  72. font-family:PingFangSC;
  73. font-weight:400;
  74. color:rgba(170,170,170,1);
  75. line-height:14px;
  76. font-size: 10px;
  77. margin-top: 3px;
  78. }
  79. .past_price{
  80. margin: 6px 0px 4px 0;
  81. height:17px;
  82. font-size:12px;
  83. font-family:PingFangSC;
  84. font-weight:400;
  85. color:rgba(102,102,102,1);
  86. line-height:17px;
  87. span{
  88. text-decoration: line-through
  89. }
  90. }
  91. .right_foot{
  92. position: relative;
  93. display: flex;
  94. justify-content:space-between;
  95. align-items: center;
  96. .new_price{
  97. height:24px;
  98. font-size:12px;
  99. font-weight:600;
  100. color:#FB5054;
  101. line-height:24px;
  102. }
  103. .btn{
  104. display: flex;
  105. justify-content: center;
  106. align-items: center;
  107. width:80px;
  108. height:24px;
  109. font-size:12px;
  110. color: #ffffff;
  111. background:rgba(251,80,84,1);
  112. border-radius:12px;
  113. }
  114. .bind-btn{
  115. position: absolute;
  116. top: 0;
  117. left: 0;
  118. right: 0;
  119. bottom: 0;
  120. }
  121. }
  122. }
  123. }
  124. }
  125. }
  126. .box_body{
  127. display: flex;
  128. background: rgba(17,17,17,.5);
  129. position: fixed;
  130. bottom: 0;
  131. left: 0;
  132. right: 0;
  133. top: 0;
  134. flex-direction: column;
  135. align-items: center;
  136. .rule_box{
  137. width: 84%;
  138. height: 60%;
  139. font-size: 13px;
  140. padding: 15px;
  141. background: #fff;
  142. border-radius: 6px;
  143. top: 84px;
  144. z-index: 999;
  145. margin-top: 79px;
  146. overflow: scroll;
  147. }
  148. .icon-close{
  149. color: #FFF;
  150. border-radius: 50%;
  151. bottom: 80px;
  152. border: 1px solid #fff;
  153. box-sizing: border-box;
  154. width: 27px;
  155. height: 27px;
  156. display: flex;
  157. justify-content: center;
  158. margin-top: 20px;
  159. }
  160. }
  161. }