C端小程序
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

336 行
5.2 KiB

  1. @import "../../app.wxss";
  2. .coupons {
  3. position: relative;
  4. width: 340rpx;
  5. display: inline-block;
  6. overflow: hidden;
  7. border-radius:12rpx;
  8. }
  9. .coupons-border {
  10. height: 1rpx;
  11. left: 30rpx;
  12. right: 30rpx;
  13. background: #f5f5f5;
  14. position: absolute;
  15. bottom: 0;
  16. }
  17. .coupons-img image {
  18. display: block;
  19. width: 300rpx;
  20. height: 176rpx;
  21. margin: 20rpx auto 0;
  22. /* border-top-left-radius: 10rpx;
  23. border-top-right-radius: 10rpx; */
  24. }
  25. .coupons-info {
  26. width: 335rpx;
  27. height: 152rpx;
  28. border-radius: 0rpx 0rpx 10rpx 10rpx;
  29. background: #fff;
  30. }
  31. .coupons-info-name {
  32. font-size: 30rpx;
  33. color: #3C3C3C;
  34. letter-spacing: 0;
  35. line-height: 38rpx;
  36. }
  37. .coupons-info-price {
  38. padding: 16rpx 0 0;
  39. }
  40. .i {
  41. font-size: 24rpx;
  42. font-style: normal;
  43. }
  44. .coupons-info-price-p {
  45. display: inline-block;
  46. font-size: 50rpx;
  47. margin-bottom: 26rpx;
  48. width: 100%;
  49. }
  50. .price {
  51. font-size: 40rpx;
  52. font-family: PingFang-SC-Bold;
  53. font-weight: bold;
  54. line-height: 44rpx;
  55. margin-left: 16rpx;
  56. padding-top: 16rpx;
  57. color: #FD832D;
  58. }
  59. .rmb{
  60. font-size: 24rpx!important;
  61. margin-right: 4rpx!important;
  62. color: #FD782D!;
  63. }
  64. .num{
  65. color: #FD782D;
  66. }
  67. .tit {
  68. overflow: hidden;
  69. white-space: nowrap;
  70. text-overflow: ellipsis;
  71. font-size: 28rpx;
  72. line-height: 30rpx;
  73. padding-top: 20rpx;
  74. padding-left: 10rpx;
  75. color: #333;
  76. letter-spacing: 0;
  77. }
  78. .coupons-info-price-o {
  79. display: block;
  80. text-align: center;
  81. font-size: 26rpx;
  82. color: #b4b4b4;
  83. letter-spacing: 0.96rpx;
  84. text-decoration: line-through;
  85. line-height: 24rpx;
  86. }
  87. .coupons-info-distance {
  88. font-size: 22rpx;
  89. color: #c0c0c0;
  90. letter-spacing: 0;
  91. padding-bottom: 10rpx;
  92. line-height: 30rpx;
  93. }
  94. .coupons-info-address {
  95. font-size: 22rpx;
  96. color: #585858;
  97. letter-spacing: 0;
  98. line-height: 30rpx;
  99. }
  100. .coupons-btn {
  101. position: absolute;
  102. bottom: 16rpx;
  103. right: 24rpx;
  104. }
  105. .coupons-btn-gm {
  106. border-radius: 10px!important;
  107. margin: 0 !important;
  108. padding: 0 !important;
  109. font-size: 26rpx;
  110. color: #fff !important;
  111. letter-spacing: 0;
  112. height: 51rpx !important;
  113. width: 100rpx !important;
  114. line-height: 51rpx !important;
  115. background:linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%)!important;
  116. }
  117. .coupons-btn-gms {
  118. background: #b9b9b9 !important;
  119. border-radius: 10px!important;
  120. opacity: 0.6;
  121. margin: 0 !important;
  122. padding: 0 !important;
  123. font-family: PingFangSC-Semibold;
  124. font-size: 26rpx;
  125. font-weight: 400;
  126. color: #fff !important;
  127. letter-spacing: 0;
  128. height: 51rpx !important;
  129. width: 100rpx !important;
  130. line-height: 51rpx !important;
  131. }
  132. .subtitle {
  133. font-size: 24rpx;
  134. color: #999;
  135. overflow: hidden;
  136. height: 24rpx;
  137. width: 65%;
  138. padding-left: 10rpx;
  139. line-height: 24rpx;
  140. white-space: nowrap;
  141. text-overflow: ellipsis;
  142. margin-top: 12rpx;
  143. }
  144. .coupons-info-manjian {
  145. font-weight: normal;
  146. font-size: 20rpx;
  147. line-height: 34rpx;
  148. display: inline-block;
  149. color: #ff4949;
  150. letter-spacing: 0;
  151. }
  152. .coupons-info-manjian1 {
  153. font-weight: normal;
  154. font-size: 20rpx;
  155. line-height: 22rpx;
  156. color: #919191;
  157. letter-spacing: 0;
  158. overflow: hidden;
  159. white-space: nowrap;
  160. text-overflow: ellipsis;
  161. width: 300rpx;
  162. margin-top: 16rpx;
  163. }
  164. .coupons-info-manjian text {
  165. display: block;
  166. line-height: 20rpx;
  167. }
  168. .coupons-info-manjian > text:nth-of-type(1) {
  169. display: block;
  170. /* color: #FF4949; */
  171. opacity: 0.6;
  172. }
  173. .view01 {
  174. text-decoration: line-through;
  175. color: #999 !important;
  176. }
  177. .txt2 {
  178. display: block;
  179. color: #ccc;
  180. }
  181. /**上拉加载更多**/
  182. .userinfo {
  183. display: flex;
  184. flex-direction: column;
  185. align-items: center;
  186. }
  187. .userinfo-avatar {
  188. width: 128rpx;
  189. height: 128rpx;
  190. margin: 20rpx;
  191. border-radius: 50%;
  192. }
  193. .userinfo-nickname {
  194. color: #aaa;
  195. }
  196. .sy {
  197. display: block;
  198. text-align: right;
  199. width: 181rpx;
  200. font-size: 24rpx;
  201. color: #999;
  202. height: 40rpx;
  203. margin-top: 106rpx;
  204. }
  205. .usermotto {
  206. margin-top: 200px;
  207. }
  208. scroll-view {
  209. width: 100%;
  210. }
  211. .item {
  212. width: 90%;
  213. height: 300rpx;
  214. margin: 20rpx auto;
  215. background: brown;
  216. overflow: hidden;
  217. }
  218. .item .img {
  219. width: 430rpx;
  220. margin-right: 20rpx;
  221. float: left;
  222. }
  223. .title {
  224. font-size: 30rpx;
  225. display: block;
  226. margin: 30rpx auto;
  227. }
  228. .description {
  229. font-size: 26rpx;
  230. line-height: 15rpx;
  231. }
  232. .navigator-hover {
  233. opacity: 1 !important;
  234. background: #fff;
  235. }
  236. .hover{
  237. opacity: .6;
  238. }
  239. .navigator {
  240. display: inline-block;
  241. background: #fff;
  242. border-radius: 12rpx;
  243. }
  244. .navigator:nth-of-type(2n+1) {
  245. /* margin-right: 10rpx; */
  246. }
  247. .superscript {
  248. position: absolute;
  249. top: -10rpx;
  250. left: -12rpx;
  251. width: 86rpx;
  252. height: 86rpx;
  253. overflow: hidden;
  254. }
  255. /* 使用背景色渐变 */
  256. .superscript .gradual {
  257. width: 100%;
  258. height: 100%;
  259. background: linear-gradient(135deg, #31b968 50%, transparent 50%);
  260. }
  261. /* 使用三角形 */
  262. .superscript .triangle {
  263. width: 0;
  264. height: 0;
  265. border-top: 130rpx solid #31b968;
  266. border-right: 130rpx solid transparent;
  267. }
  268. /* 使用矩形旋转, 和父节点的 overflow:hidden 配合 */
  269. .superscript .rect {
  270. width: 176rpx;
  271. height: 183rpx;
  272. margin: -91rpx 0 0 -91rpx;
  273. transform: rotateZ(45deg);
  274. }
  275. .superscript .desc {
  276. position: absolute;
  277. top: 29%;
  278. left: 16%;
  279. z-index: 1;
  280. color: #fff;
  281. font-size: 23rpx;
  282. transform: rotate(-45deg);
  283. }
  284. .saleprice {
  285. font-size: 24rpx;
  286. display: inline-block;
  287. margin-right: 10rpx;
  288. font-weight: 400;
  289. }