小程序端工程代码
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.

180 lines
3.2 KiB

  1. @charset "UTF-8";
  2. /**
  3. *相关初始化
  4. */
  5. .font-color-red {
  6. color: #eb3729 !important;
  7. }
  8. .bg-color-red {
  9. background-color: #eb3729 !important;
  10. }
  11. .icon-color {
  12. color: #eb3729;
  13. }
  14. .cart-color {
  15. color: #eb3729 !important;
  16. border: 1px solid #eb3729 !important;
  17. }
  18. /* padding20 */
  19. .padding20 {
  20. padding: 0.2*100rpx;
  21. }
  22. /* pad20 */
  23. .pad20 {
  24. padding: 0 0.2*100rpx;
  25. }
  26. /* padding30 */
  27. .padding30 {
  28. padding: 0.3*100rpx;
  29. }
  30. /*pad30 */
  31. .pad30 {
  32. padding: 0 0.3*100rpx;
  33. }
  34. /* layout */
  35. .acea-row {
  36. display: flex;
  37. flex-wrap: wrap;
  38. /* 辅助类 */
  39. }
  40. .acea-row.row-middle {
  41. align-items: center;
  42. }
  43. .acea-row.row-top {
  44. align-items: flex-start;
  45. }
  46. .acea-row.row-bottom {
  47. align-items: flex-end;
  48. }
  49. .acea-row.row-center {
  50. justify-content: center;
  51. }
  52. .acea-row.row-right {
  53. justify-content: flex-end;
  54. }
  55. .acea-row.row-left {
  56. justify-content: flex-start;
  57. }
  58. .acea-row.row-between {
  59. justify-content: space-between;
  60. }
  61. .acea-row.row-around {
  62. justify-content: space-around;
  63. }
  64. .acea-row.row-column-around {
  65. flex-direction: column;
  66. justify-content: space-around;
  67. }
  68. .acea-row.row-column {
  69. flex-direction: column;
  70. }
  71. .acea-row.row-column-between {
  72. flex-direction: column;
  73. justify-content: space-between;
  74. }
  75. /* 上下左右垂直居中 */
  76. .acea-row.row-center-wrapper {
  77. align-items: center;
  78. justify-content: center;
  79. }
  80. /* 上下两边居中对齐 */
  81. .acea-row.row-between-wrapper {
  82. align-items: center;
  83. justify-content: space-between;
  84. }
  85. /* 轮播图 */
  86. .slider-banner {
  87. position: relative;
  88. width: 100%;
  89. /* height:750rpx; */
  90. overflow: hidden;
  91. }
  92. .slider-banner{
  93. }
  94. .slider-banner .swiper-container {
  95. height: 100%;
  96. }
  97. .slider-banner image{
  98. display: block;
  99. width: 100%;
  100. height: 100%;
  101. }
  102. .start {
  103. width: 1.22*100rpx;
  104. height: 0.3*100rpx;
  105. background-image: url("https://wx.yixiang.co/static/images/start.png");
  106. background-repeat: no-repeat;
  107. background-size: 1.22*100rpx auto;
  108. }
  109. .start.star5 {
  110. background-position: 0 0.03*100rpx;
  111. }
  112. .start.star4 {
  113. background-position: 0 -0.3*100rpx;
  114. }
  115. .start.star3 {
  116. background-position: 0 -0.7*100rpx;
  117. }
  118. .start.star2 {
  119. background-position: 0 -1.05*100rpx;
  120. }
  121. .start.star1 {
  122. background-position: 0 -1.4*100rpx;
  123. }
  124. .start.star0 {
  125. background-position: 0 -1.75*100rpx;
  126. }
  127. /* 单选框和多选框 */
  128. .checkbox-wrapper {
  129. position: relative;
  130. }
  131. .checkbox-wrapper input {
  132. display: none;
  133. }
  134. .checkbox-wrapper .icon {
  135. position: absolute;
  136. left: 0;
  137. top: 50%;
  138. display: inline-block;
  139. width: 18px;
  140. height: 18px;
  141. border: 1px solid #cccccc;
  142. border-radius: 50%;
  143. transform: translate(0, -50%);
  144. }
  145. .checkbox-wrapper input:checked + .icon {
  146. background-color: #e93323;
  147. border-color: #e93323;
  148. background-image: url("https://wx.yixiang.co/static/images/enter.png");
  149. background-size: 0.21*100rpx 0.15*100rpx;
  150. background-repeat: no-repeat;
  151. background-position: center center;
  152. }
  153. .Loads {
  154. height: 0.8*100rpx;
  155. font-size: 0.25*100rpx;
  156. color: #000;
  157. }
  158. .Loads .iconfont {
  159. font-size: 0.3*100rpx;
  160. margin-right: 0.1*100rpx;
  161. height: 0.32*100rpx;
  162. line-height: 0.32*100rpx;
  163. }
  164. /*加载动画*/
  165. @keyframes load {
  166. from {
  167. transform: rotate(0deg);
  168. }
  169. to {
  170. transform: rotate(360deg);
  171. }
  172. }
  173. .loadingpic {
  174. animation: load 3s linear 1s infinite;
  175. }
  176. .loading {
  177. animation: load linear 1s infinite;
  178. }