抖音c端
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.

313 lines
5.7 KiB

  1. .BoxX{
  2. overflow: hidden;
  3. background-image: url("https://formall.oss-accelerate.aliyuncs.com/douyin_ifomall/imgData/cmdBg.png");
  4. background-size: 100% auto;background-repeat: no-repeat;
  5. }
  6. .commBox {
  7. width: 96%;
  8. margin: 27rpx auto;
  9. background-color: #fff;
  10. border-radius: 20rpx;
  11. overflow: hidden;
  12. }
  13. .titleBox {
  14. width: 100%;
  15. overflow: hidden;
  16. height: 140rpx;
  17. background-image: url("https://formall.oss-accelerate.aliyuncs.com/cimg/v20211214/home_icon_d9qt.png");
  18. background-size: 100% 100%;
  19. background-repeat: no-repeat;
  20. }
  21. .titleImg {
  22. width: 180rpx;
  23. height: 40rpx;
  24. float: left;
  25. margin: 20rpx;
  26. display: block;
  27. }
  28. .specialTitle {
  29. float: left;
  30. margin: 10rpx 20rpx;
  31. font-size: 38rpx;
  32. font-family: YouSheBiaoTiHei;
  33. font-weight: 600;
  34. color: #37332d;
  35. }
  36. .more {
  37. float: right;
  38. font-size: 24rpx;
  39. font-family: OPPOSans;
  40. font-weight: 500;
  41. color: #866741;
  42. margin: 16rpx 20rpx;
  43. }
  44. .rup {
  45. width: 13rpx;
  46. height: 20rpx;
  47. margin: 2rpx 0 0 6rpx;
  48. }
  49. .contBox {
  50. overflow: hidden;
  51. /* width: 96%; */
  52. margin: -50rpx auto 0 auto;
  53. }
  54. .topImg {
  55. width: 100%;
  56. height: 140rpx;
  57. border-radius: 16rpx;
  58. margin-bottom: 40rpx;
  59. /* background-color: chartreuse; */
  60. }
  61. .topImg image {
  62. border-radius: 16rpx;
  63. width: 100%;
  64. height: 100%;
  65. }
  66. .itemBox {
  67. overflow: hidden;
  68. display: -webkit-box;
  69. overflow-x: scroll;
  70. -webkit-overflow-scrolling: touch;
  71. margin: 20rpx auto;
  72. width: 96%;
  73. }
  74. .itemBox::-webkit-scrollbar {
  75. display: none;
  76. }
  77. .item {
  78. width: 240rpx;
  79. /* background-color: antiquewhite; */
  80. margin-right: 20rpx;
  81. }
  82. .itemImg {
  83. position: relative;
  84. width: 240rpx;
  85. height: 240rpx;
  86. border-radius: 16rpx;
  87. /* background-color: aquamarine; */
  88. }
  89. .itemImg image {
  90. width: 100%;
  91. height: 100%;
  92. border-radius: 16rpx;
  93. }
  94. .sellout {
  95. position: absolute;
  96. top: 0;
  97. left: 0;
  98. background-color: rgba(0, 0, 0, 0.5);
  99. width: 240rpx;
  100. height: 240rpx;
  101. border-radius: 20rpx;
  102. }
  103. .selloutImg {
  104. width: 195rpx !important;
  105. height: 154rpx !important;
  106. margin: 18% auto;
  107. display: block;
  108. }
  109. .titleNameBox {
  110. margin-top: 16rpx;
  111. height: 72rpx;
  112. line-height: 36rpx;
  113. display: flex;
  114. align-items: center;
  115. justify-content: center;
  116. }
  117. .titleName {
  118. color: #402e1e;
  119. font-size: 30rpx;
  120. font-family: "PingFangSC-Regular";
  121. font-weight: 400;
  122. width: 100%;
  123. font-size: 28rpx;
  124. /* font-family: OPPOSans; */
  125. /* font-weight: 500; */
  126. /* color: #333; */
  127. display: -webkit-box;
  128. -webkit-line-clamp: 2;
  129. -webkit-box-orient: vertical;
  130. overflow: hidden;
  131. text-overflow: ellipsis;
  132. }
  133. .priceBox {
  134. overflow: hidden;
  135. margin: 0 0 10rpx 0;
  136. height: 56rpx;
  137. }
  138. .f {
  139. float: left;
  140. }
  141. .r {
  142. float: right;
  143. }
  144. .sellingBox {
  145. overflow: hidden;
  146. height: 100%;
  147. line-height: 56rpx;
  148. }
  149. .fuhao {
  150. color: #df2d2d;
  151. font-size: 24rpx;
  152. float: left;
  153. font-family: OPPOSans;
  154. /* font-weight: bold; */
  155. margin-top: 10rpx;
  156. }
  157. .fuhaoX{
  158. color: #d5af67;
  159. font-family: "PingFangSC-Medium";
  160. font-size: 30rpx;
  161. font-weight: 400;
  162. float: left;
  163. }
  164. .btn{
  165. width: 116rpx;
  166. height: 52rpx;
  167. border-radius: 26rpx;
  168. line-height: 52rpx;
  169. background: linear-gradient(90deg, #E3BA79, #BC8D3E);
  170. text-align: center;
  171. color: #feffff;
  172. font-family: "PingFangSC-Regular";
  173. font-size: 26rpx;
  174. font-weight: 400;
  175. }
  176. .int {
  177. float: left;
  178. font-size: 36rpx;
  179. font-family: OPPOSans;
  180. font-weight: bold;
  181. color: #df2d2d;
  182. }
  183. .originalBox {
  184. overflow: hidden;
  185. height: 100%;
  186. line-height: 56rpx;
  187. }
  188. .origina {
  189. text-align: right;
  190. font-size: 24rpx;
  191. font-family: OPPOSans;
  192. font-weight: 400;
  193. text-decoration: line-through;
  194. color: #999;
  195. margin-top: 10rpx;
  196. margin-right: 10rpx;
  197. }
  198. .originaX{
  199. color: #a4a4a4;
  200. font-family: "PingFangSC-Regular";
  201. font-size: 24rpx;
  202. font-weight: 400;
  203. line-height: 30rpx;
  204. text-decoration: line-through;
  205. /* margin-top: 10rpx; */
  206. line-height: 60rpx;
  207. margin-left: 10rpx;
  208. }
  209. .jifengBtn{
  210. background: linear-gradient(90deg, #E3BA79, #BC8D3E);
  211. color: #fff1d9;
  212. font-family: "PingFangSC-Medium";
  213. font-size: 26rpx;
  214. font-weight: 400;
  215. line-height: 52rpx;
  216. text-align: center;
  217. border-radius: 2rpx;
  218. }
  219. .countBox {
  220. width: 100%;
  221. height: 46rpx;
  222. background-image: url("https://formall.oss-accelerate.aliyuncs.com/cimg/v20211214/home_icon_bq.png");
  223. background-size: 100% 100%;
  224. background-repeat: no-repeat;
  225. margin-bottom: 20rpx;
  226. line-height: 46rpx;
  227. overflow: hidden;
  228. }
  229. .countText {
  230. font-size: 22rpx;
  231. font-family: OPPOSans;
  232. font-weight: 400;
  233. color: #999;
  234. background: linear-gradient(180deg, #dcb07d 0%, #f5e0bf 100%);
  235. -webkit-background-clip: text;
  236. -webkit-text-fill-color: transparent;
  237. margin-left: 8rpx;
  238. }
  239. .countDate {
  240. font-size: 24rpx;
  241. font-family: OPPOSans;
  242. font-weight: bold;
  243. color: #4c3820;
  244. margin-right: 8rpx;
  245. }
  246. .moreItem {
  247. background: #f7f7f7;
  248. border-radius: 8px;
  249. }
  250. .noDataImg {
  251. width: 160rpx;
  252. height: 160rpx;
  253. margin: 25% auto 5% auto;
  254. }
  255. .noDataImg image {
  256. width: 100%;
  257. height: 100%;
  258. }
  259. .noDataText {
  260. text-align: center;
  261. font-size: 22rpx;
  262. font-family: OPPOSans;
  263. font-weight: 500;
  264. color: #999;
  265. }
  266. .product {
  267. width: 96%;
  268. height: 140rpx;
  269. margin: 30rpx auto 10rpx;
  270. border-radius: 16rpx;
  271. overflow: hidden;
  272. }
  273. .product image {
  274. height: 100%;
  275. display: block;
  276. width: 100%;
  277. }