Info.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. .page-goods-info{
  2. background:#e5e5e5;
  3. display:flex;
  4. width:100vw;
  5. min-height:100vh;
  6. flex-direction: column;
  7. .goods-img{
  8. height:150px;
  9. width:100%;
  10. .img{
  11. width:100%;
  12. height:100%;
  13. }
  14. }
  15. .goods-option{
  16. background:#FFF;
  17. display:flex;
  18. flex-direction:column;
  19. .title{
  20. margin-top:10px;
  21. margin-left:10px;
  22. font-size:14px;
  23. font-weight:bold;
  24. height:50px;
  25. line-height: 50px;;
  26. }
  27. .type{
  28. margin-left:10px;
  29. font-size:12px;
  30. height:40px;
  31. display:flex;
  32. flex-direct:row;
  33. justify-content: flex-start;
  34. align-items: center;
  35. .caption{
  36. font-size:12px;
  37. }
  38. .option{
  39. display:flex;
  40. flex-direction: row;
  41. .opt1{
  42. background:#fbdcba;
  43. font-size:12px;
  44. padding:2px 3px;
  45. margin-right:10px;
  46. font-weight:bold;
  47. color:#333;
  48. }
  49. }
  50. }
  51. }
  52. .content{
  53. padding:10px;
  54. font-size:12px;
  55. }
  56. .footer{
  57. display:flex;
  58. height:80px;
  59. background:#FFF;
  60. position:fixed;
  61. bottom:0px;
  62. width:100%;
  63. flex-direction: column;
  64. .price{
  65. height:50px;
  66. width:100%;
  67. display:flex;
  68. flex-direction: row;
  69. .intro{
  70. display:flex;
  71. flex-direction: column;
  72. width:70%;
  73. margin-left:10px;
  74. .price-text{
  75. font-size:12px;
  76. display:flex;
  77. flex-direction: row;
  78. .current{
  79. color:$teacher-main-color;
  80. font-size:14px;
  81. .sign{
  82. font-size:12px;
  83. }
  84. }
  85. .del{
  86. color:#CCC;
  87. font-size:14px;
  88. margin-left:10px;
  89. text-decoration: line-through;
  90. .sign{
  91. font-size:12px;
  92. }
  93. }
  94. }
  95. .price-tips{
  96. font-size:12px;
  97. color:#CCC;
  98. }
  99. }
  100. .qty{
  101. display:flex;
  102. width:30%;
  103. flex-direction: row;
  104. justify-content: flex-end;
  105. align-items: center;
  106. margin-right:10px;
  107. .btn-miut{
  108. border-radius: 50%;
  109. display:flex;
  110. width:20px;
  111. height:20px;
  112. font-size:12px;
  113. background:$teacher-main-color;
  114. color:#FFF;
  115. justify-content: center;
  116. align-content: center;
  117. }
  118. .num{
  119. width:30px;
  120. text-align:center;
  121. }
  122. .btn-plus{
  123. border-radius: 50%;
  124. display:flex;
  125. width:20px;
  126. height:20px;
  127. font-size:12px;
  128. background:$teacher-main-color;
  129. color:#FFF;
  130. justify-content: center;
  131. align-content: center;
  132. }
  133. }
  134. }
  135. .btn{
  136. display:flex;
  137. flex-direction: row;
  138. justify-content:center;
  139. align-items: center;
  140. padding:5px 0px;
  141. .btn-buy{
  142. display:flex;
  143. justify-content: center;
  144. align-items: center;
  145. width:50%;
  146. .buy{
  147. border-radius: 10px;
  148. border:1px solid #a4907e;
  149. font-size:12px;
  150. height:25px;
  151. width:100px;
  152. color:#a4907e;
  153. background:#FFF;
  154. padding:0px;
  155. line-height: 25px;
  156. }
  157. }
  158. .btn-cart{
  159. display:flex;
  160. justify-content: center;
  161. align-items: center;
  162. width:50%;
  163. .cart{
  164. border-radius: 10px;
  165. border:1px solid #a4907e;
  166. background:#a4907e;
  167. color:#FFF;
  168. font-size:12px;
  169. height:25px;
  170. width:100px;
  171. padding:0px;
  172. line-height: 25px;
  173. }
  174. }
  175. }
  176. }
  177. }