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

index.ttss 8.7 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506
  1. /* pages/spellGroup/spellGroup.wxss */
  2. .topbg {
  3. /* margin-bottom: 20rpx; */
  4. width:100%;
  5. height:234rpx;
  6. background:linear-gradient(180deg,rgba(253,131,45,1) 0%,rgba(254,74,22,1) 100%);
  7. }
  8. .topbg-top{
  9. width:100%;
  10. height: 50%;
  11. display: inline-block
  12. }
  13. .topbg-btom{
  14. width:84%;
  15. height: 40%;
  16. margin: 0 auto;
  17. }
  18. .user-avatar {
  19. width: 20%;
  20. height: 100%;
  21. float: left;
  22. }
  23. .user-box {
  24. width: 82rpx;
  25. height: 82rpx;
  26. border-radius: 50%;
  27. overflow: hidden;
  28. margin: 26rpx 0 0 60rpx;
  29. }
  30. .user-avatar open-data {
  31. display: block;
  32. width: 100%;
  33. height: 100%;
  34. }
  35. .name{
  36. float: left;
  37. color: #FFFFFF;
  38. font-size:32rpx;
  39. font-family:PingFangSC-Medium;
  40. font-weight:500;
  41. margin:0 20rpx;
  42. }
  43. .usre_level{
  44. height:32rpx;
  45. background:linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  46. border-radius:9px 9px 9px 0px;
  47. font-family:PingFangSC-Regular;
  48. font-weight:400;
  49. color:rgba(255,255,255,1);
  50. line-height:28rpx;
  51. float: left;
  52. margin-top: 8rpx;
  53. }
  54. .chengzhang {
  55. font-size: 24rpx;
  56. font-weight: 400;
  57. color: #FFFFFF;
  58. padding: 0 8rpx;
  59. }
  60. .myName{
  61. float: left;
  62. font-size: 32rpx;
  63. margin-top:36rpx;
  64. }
  65. .bot{
  66. display: flex;
  67. flex-direction: column;
  68. }
  69. .view{
  70. height: 40rpx;
  71. display: block;
  72. }
  73. progress{
  74. margin: 14rpx 8rpx 0 20rpx;
  75. float: left;
  76. width:230rpx;
  77. border-radius:60rpx;
  78. overflow:hidden;
  79. }
  80. .msg{
  81. float: left;
  82. font-size:10px!important;
  83. font-family:PingFangSC-Regular;
  84. font-weight:400;
  85. color:rgba(255,255,255,1);
  86. }
  87. .btoml{
  88. float: left;
  89. height: 100%;
  90. width: 50%;
  91. }
  92. .jifen{
  93. font-size: 26rpx;
  94. font-weight: 500;
  95. color: #FFFFFF;
  96. height:30rpx;
  97. line-height: 30rpx;
  98. margin-top: 20rpx;
  99. }
  100. .jifen image{
  101. width: 10rpx;
  102. height: 22rpx;
  103. margin-left: 5rpx;
  104. }
  105. .topbg .score{
  106. font-size: 40rpx;
  107. font-weight: 500;
  108. float: left;
  109. color: #FFFFFF;
  110. margin-right: 10rpx;
  111. }
  112. .qrcode{
  113. width: 84rpx;
  114. height: 84rpx;
  115. float: right;
  116. /* margin-right: 48rpx; */
  117. }
  118. .qrcode image {
  119. margin: auto;
  120. width: 84rpx;
  121. }
  122. page {
  123. height: auto;
  124. overflow: auto;
  125. background: #f7f7f7;
  126. background-size: cover;
  127. background-repeat: no-repeat;
  128. }
  129. .content-box{
  130. height: auto;
  131. padding-bottom: 200rpx;
  132. }
  133. .loading {
  134. text-align: center;
  135. height: 80rpx;
  136. line-height: 80rpx;
  137. font-size: 26rpx;
  138. color: #666;
  139. }
  140. .loading image {
  141. width: 60rpx;
  142. height: 60rpx;
  143. vertical-align: middle;
  144. margin-right: 10rpx;
  145. }
  146. .banner{
  147. margin-bottom: 20rpx;
  148. background: none;
  149. border-radius: 16rpx;
  150. }
  151. .banner .bg {
  152. display: block;
  153. width: 100%;
  154. }
  155. image{
  156. padding: 0;
  157. margin: 0;
  158. }
  159. .banner .bannerbg image{
  160. display: none!important;
  161. height: 0;
  162. overflow: hidden;
  163. }
  164. .bannerimg {
  165. display: block;
  166. width: 710rpx;
  167. height: 260rpx;
  168. border-radius: 15rpx;
  169. margin: -132rpx auto 0;
  170. }
  171. .banner .index-slide-view {
  172. margin: -132rpx auto 0;
  173. }
  174. .top{
  175. position: absolute;
  176. top: 30rpx;
  177. width: 710rpx;
  178. height: 260rpx;
  179. background: #fff;
  180. left: 20rpx;
  181. border-radius: 16rpx;
  182. overflow: hidden;
  183. }
  184. .content .sepll-list{
  185. width: 714rpx;
  186. height: 230rpx;
  187. background: #fff;
  188. border-radius: 30rpx;
  189. margin: 0 auto 30rpx;
  190. }
  191. .content .spell-bot{
  192. width: 674rpx;
  193. float: left;
  194. font-size: 24rpx;
  195. height: 60rpx;
  196. line-height: 60rpx;
  197. border-top: 1rpx #E1E1E1 dashed;
  198. margin: 0 20rpx;
  199. }
  200. .spell-bot .botMsg{
  201. width: 40%;
  202. height: 100%;
  203. float: left;
  204. /* margin-left: 20rpx; */
  205. color: #A6A6A6;
  206. overflow: hidden;
  207. text-overflow:ellipsis;
  208. white-space: nowrap;
  209. }
  210. .spell-bot .botNum{
  211. width: 40%;
  212. height: 100%;
  213. float: right;
  214. text-align: right;
  215. margin-right: 24rpx;
  216. color: #FD782D;
  217. }
  218. .content .spell-left{
  219. width: 170rpx;
  220. height: 170rpx;
  221. float: left;
  222. }
  223. .content .spell-left image{
  224. width: 120rpx;
  225. height: 120rpx;
  226. margin: 25rpx;
  227. border-radius: 8rpx;
  228. }
  229. .content .spell-center{
  230. float: left;
  231. width: 380rpx;
  232. height: 170rpx;
  233. }
  234. .content .tilte{
  235. margin-top: 20rpx;
  236. font-size:32rpx;
  237. font-family:PingFang-SC-Bold;
  238. font-weight:bold;
  239. color:#3C3C3C;
  240. line-height:44rpx;
  241. padding-top: 16rpx;
  242. overflow: hidden;
  243. text-overflow:ellipsis;
  244. white-space: nowrap;
  245. }
  246. .content .remark{
  247. width:304rpx;
  248. font-size:24rpx;
  249. font-family:PingFang-SC-Medium;
  250. font-weight:500;
  251. color:rgba(140,140,140,1);
  252. line-height:44rpx;
  253. overflow: hidden;
  254. text-overflow:ellipsis;
  255. white-space: nowrap;
  256. }
  257. .content .spell-num{
  258. width: 95rpx;
  259. border:1px solid rgba(255,50,50,1);
  260. border-radius:10rpx;
  261. font-size:24rpx;
  262. font-family:PingFang-SC-Medium;
  263. font-weight:500;
  264. color:rgba(255,50,50,1);
  265. line-height:30rpx;
  266. margin: 10rpx 0;
  267. text-align: center;
  268. }
  269. .content .price{
  270. overflow: hidden;
  271. margin-top: 20rpx;
  272. }
  273. .content .price01{
  274. font-size:40rpx;
  275. font-family:PingFang-SC-Medium;
  276. font-weight:500;
  277. color:#FD832D;
  278. line-height:44rpx;
  279. }
  280. .content .price02{
  281. display: inline;
  282. font-size: 24rpx;
  283. font-family:PingFang-SC-Medium;
  284. font-weight:500;
  285. text-decoration:line-through;
  286. color:rgba(140,140,140,1);
  287. }
  288. .content .price-num{
  289. display: inline;
  290. }
  291. .more{
  292. display: inline;
  293. margin-left: -10rpx;
  294. }
  295. .content .price-unit{
  296. display: inline;
  297. font-size:24rpx;
  298. margin-right: 10rpx;
  299. }
  300. .content .spell-right{
  301. float: right;
  302. width: 156rpx;
  303. }
  304. .right-button{
  305. width:140rpx;
  306. height:52rpx;
  307. font-size:26rpx;
  308. background:linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  309. border-radius:20rpx;
  310. font-family:PingFang-SC-Medium;
  311. font-weight:500;
  312. text-align: center;
  313. color:rgba(255,255,255,1);
  314. line-height:52rpx;
  315. margin: 88rpx 24rpx 0 0;
  316. margin-top: 90rpx;
  317. }
  318. .right-text{
  319. font-size:22rpx;
  320. font-family:PingFang-SC-Medium;
  321. font-weight:500;
  322. color:rgba(140,140,140,1);
  323. line-height:60rpx;
  324. text-align: center;
  325. }
  326. .bottom{
  327. width: 690rpx;
  328. height: 85rpx;
  329. position: fixed;
  330. bottom: 26rpx;
  331. left: 30rpx;
  332. /* background:rgba(243,69,58,1); */
  333. border:1px solid rgba(255, 222, 67, 1);
  334. border-radius:40px;
  335. color: #fff;
  336. overflow: hidden;
  337. }
  338. .bottom-left{
  339. width: 50%;
  340. float: left;
  341. margin-left: -1rpx;
  342. text-align: center;
  343. line-height: 85rpx;
  344. font-size:30rpx;
  345. font-family:PingFang-SC-Medium;
  346. font-weight:500;
  347. color:rgba(255,253,245,1);
  348. border-right:1px solid rgba(255, 222, 67, 1);
  349. opacity: 1;
  350. }
  351. .bottom-right{
  352. width: 50%;
  353. float: left;
  354. text-align: center;
  355. line-height: 85rpx;
  356. font-size:30rpx;
  357. font-family:PingFang-SC-Medium;
  358. font-weight:500;
  359. color:rgba(255,253,245,1);
  360. opacity: 1;
  361. }
  362. .spell-bottom{
  363. overflow: hidden;
  364. }
  365. .spell-top{
  366. height: auto;
  367. margin: 0 30rpx;
  368. overflow: hidden;
  369. box-sizing: border-box;
  370. border-bottom: 1rpx solid #EEEEEE;
  371. }
  372. .spell-top-left{
  373. float: left;
  374. width: 60%;
  375. }
  376. .spell-top-right{
  377. float: left;
  378. width: 40%;
  379. }
  380. .top-title{
  381. display: inline;
  382. font-size:24rpx;
  383. font-family:PingFang-SC-Medium;
  384. font-weight:500;
  385. color:rgba(51,51,51,1);
  386. line-height:64rpx;
  387. }
  388. .top-num{
  389. display: inline;
  390. font-size:24rpx;
  391. font-family:PingFang-SC-Medium;
  392. font-weight:500;
  393. color:#FF3232;
  394. line-height:64rpx;
  395. padding-left: 8rpx;
  396. }
  397. .spell-top-right{
  398. text-align: right;
  399. font-size:26rpx;
  400. font-family:PingFang-SC-Medium;
  401. font-weight:500;
  402. color:rgba(255,50,50,1);
  403. line-height:64rpx;
  404. }
  405. .no-data01{
  406. width: 690rpx;
  407. padding-top: 174rpx;
  408. height: calc(100vh - 460rpx);
  409. background: #fff;
  410. margin: 0 auto;
  411. border-radius:15rpx;
  412. box-sizing: border-box;
  413. margin-top: 20rpx;
  414. }
  415. .no-data{
  416. width: 690rpx;
  417. padding-top: 174rpx;
  418. height: calc(100vh - 160rpx);
  419. background: #fff;
  420. margin: 0 auto;
  421. border-radius:15rpx;
  422. box-sizing: border-box;
  423. margin-top:20rpx;
  424. }
  425. .no-data01 image{
  426. width: 261rpx;
  427. height: 272rpx;
  428. display: block;
  429. margin: 0 auto;
  430. }
  431. .no-data image{
  432. width: 261rpx;
  433. height: 272rpx;
  434. display: block;
  435. margin: 0 auto;
  436. }
  437. .no-data-text{
  438. text-align: center;
  439. font-size:34rpx;
  440. font-family:PingFang-SC-Medium;
  441. font-weight:500;
  442. color:rgba(0,0,0,1);
  443. }
  444. button::after{ border: none; }
  445. .goback{
  446. position: fixed;
  447. right: 50rpx;
  448. bottom: 60rpx;
  449. width:100rpx!important;
  450. height:100rpx;
  451. z-index: 100;
  452. background:rgba(255,255,255,1);
  453. line-height: 95rpx;
  454. border:1rpx solid rgba(227,227,227,1);
  455. border-radius:50%;
  456. }
  457. .goback image{
  458. position: absolute;
  459. width: 60rpx;
  460. left: 0;
  461. right: 0;
  462. top: 0;
  463. bottom: 0;
  464. margin: auto;
  465. }
  466. .remainInventory{
  467. background: #ccc;
  468. }
  469. .sort{
  470. width:94%;
  471. height:90rpx;
  472. background:#fff;
  473. margin:0 auto 20rpx;
  474. display: flex;
  475. justify-content: space-between;
  476. align-items: center;
  477. padding: 0 3%
  478. }
  479. .sort view{
  480. width: 180rpx;
  481. line-height: 60rpx;
  482. color: #fff;
  483. font-size: 28rpx;
  484. text-align: center;
  485. background:linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  486. border-radius: 20rpx;
  487. }
  488. .need{
  489. justify-content: center;/*水平居中*/
  490. align-items: center; /*垂直居中*/
  491. display: flex;
  492. }
  493. .need image{
  494. margin-left:5rpx;
  495. width: 40rpx;
  496. height: 40rpx;
  497. }
  498. .btn-hover{
  499. position: relative;
  500. top: 3rpx;
  501. box-shadow:0px 0px 8px #999 inset;
  502. }