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

259 lines
5.3 KiB

  1. .module-box {
  2. background: #ffffff;
  3. padding: 10px 20px;
  4. .meal-price {
  5. border: 2px solid #979797;
  6. height: 50px;
  7. line-height: 48px;
  8. text-align: center;
  9. font-size: 16px;
  10. text:first-child {
  11. color: #e50303
  12. }
  13. text:last-child {
  14. text-decoration: line-through;
  15. }
  16. }
  17. .module-title {
  18. display: flex;
  19. justify-content: space-between;
  20. color: #000;
  21. align-items: center;
  22. span:nth-child(1) {
  23. font-size: 22px;
  24. font-weight: bold;
  25. display: inline-block;
  26. //padding-left: 6px;
  27. //border-left: 4px solid #E7031C;
  28. }
  29. span:nth-child(2) {
  30. font-size: 12px;
  31. display: flex;
  32. align-items: center;
  33. text{
  34. font-size: 15px;
  35. font-weight: 600;
  36. margin-left: 5px;
  37. }
  38. }
  39. }
  40. .space-btween {
  41. display: flex;
  42. justify-content: space-between;
  43. align-items: center;
  44. }
  45. .module-content {
  46. padding: 10px 0;
  47. position: relative;
  48. //套餐
  49. .meal_list {
  50. overflow: auto;
  51. white-space: nowrap;
  52. width: 100%;
  53. table, image {
  54. width: 100% !important;
  55. height: auto;
  56. }
  57. .store_list {
  58. //top:0;
  59. width: 26.4%;
  60. position: relative;
  61. display: inline-block;
  62. margin-right: 10%;
  63. view {
  64. box-sizing: border-box;
  65. }
  66. image {
  67. width: 100%;
  68. height: 100px;
  69. }
  70. .description {
  71. width: 100%;
  72. margin-top: 5px;
  73. font-size: 14px;
  74. //height: 48px;
  75. overflow: hidden;
  76. word-break: break-all;
  77. //word-spacing: ;
  78. -webkit-line-clamp: 2;
  79. text-overflow: ellipsis;
  80. //display: -webkit-box;
  81. //-webkit-box-orient: vertical;
  82. //white-space: normal;
  83. }
  84. .price {
  85. font-size: 14px;
  86. height: auto;
  87. /*overflow: visible;*/
  88. white-space: normal;
  89. overflow: hidden;
  90. text-overflow: ellipsis;
  91. }
  92. &:last-child {
  93. margin-right: 0;
  94. &:after {
  95. display: none;
  96. /*content: ; */
  97. }
  98. }
  99. &:after {
  100. content: "";
  101. display: block;
  102. position: absolute;
  103. right: -28%;
  104. top: 20%;
  105. width: 18%;
  106. height: 10%;
  107. background: url('https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/uploading.png');
  108. background-size: 100% 100%;
  109. }
  110. }
  111. }
  112. .add {
  113. position: relative;
  114. transform: translateY(120%);
  115. width: 18px;
  116. height: 18px;
  117. margin-bottom: auto;
  118. &:last-child {
  119. display: none;
  120. }
  121. .t {
  122. position: absolute;
  123. top: 8px;
  124. left: 0;
  125. width: 100%;
  126. height: 2px;
  127. background: #b2b2b2;
  128. border-radius: 19px
  129. }
  130. .l {
  131. position: absolute;
  132. left: 8px;
  133. top: 0;
  134. height: 100%;
  135. width: 2px;
  136. background: #b2b2b2;
  137. border-radius: 19px
  138. }
  139. }
  140. .meal {
  141. position: relative;
  142. width: 25%;
  143. .goods_image {
  144. position: relative;
  145. width: 100%;
  146. padding-top: 100%;
  147. image {
  148. position: absolute;
  149. left: 0;
  150. top: 0;
  151. width: 100%;
  152. height: 100%;
  153. object-fit: cover;
  154. object-position: center;
  155. }
  156. }
  157. .goods_title {
  158. margin-top: 10px;
  159. overflow: hidden;
  160. text-overflow: ellipsis;
  161. display: -webkit-box;
  162. -webkit-line-clamp: 3;
  163. -webkit-box-orient: vertical;
  164. color: #000;
  165. }
  166. }
  167. .content {
  168. margin-left: 120px;
  169. height: 100%;
  170. .content_title {
  171. padding-right: 30px;
  172. overflow: hidden;
  173. text-overflow: ellipsis;
  174. white-space: nowrap;
  175. font-size: 16px;
  176. line-height: 18px;
  177. }
  178. .content_info {
  179. display: flex;
  180. justify-content: space-between;
  181. align-items: baseline;
  182. vertical-align: bottom;
  183. .price {
  184. color: #e50303;
  185. font-size: 18px;
  186. }
  187. .delPrice {
  188. margin-right: auto;
  189. font-size: 12px;
  190. }
  191. .onlyPrice {
  192. color: #9c9c9c;
  193. font-size: 14px;
  194. }
  195. }
  196. .countDown {
  197. margin-top: 7px;
  198. .text {
  199. font-size: 12px;
  200. color: #4a4a4a;
  201. }
  202. .release {
  203. display: flex;
  204. flex-direction: row;
  205. justify-content: space-between;
  206. align-items: center;
  207. .time {
  208. display: flex;
  209. align-items: center;
  210. text {
  211. line-height: 19px;
  212. margin: 0 3px;
  213. }
  214. .dot {
  215. display: inline-block;
  216. width: 19px;
  217. height: 19px;
  218. background: #6d6d6d;
  219. font-size: 12px;
  220. line-height: 19px;
  221. text-align: center;
  222. }
  223. }
  224. .btnBuy {
  225. display: inline-block;
  226. width: 70px;
  227. height: 25px;
  228. border-radius: 50px;
  229. color: #ffffff;
  230. background: #ea4448;
  231. font-size: 12px;
  232. line-height: 25px;
  233. text-align: center;
  234. }
  235. }
  236. }
  237. }
  238. }
  239. }