抖音c端
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

index.ttss 9.0 KiB

2 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  1. /* pages/spellDetail/index.wxss */
  2. page {
  3. height: auto;
  4. overflow: auto;
  5. background: #F4F5F9;
  6. /* background-image: url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/spelldetail-bg.png'); */
  7. background-size: cover;
  8. background-repeat: no-repeat;
  9. }
  10. .container{
  11. margin-bottom:40rpx;
  12. }
  13. .status{
  14. width: 690rpx;
  15. padding:0 28rpx;
  16. margin: 0 auto;
  17. box-sizing: border-box;
  18. background:rgba(255,255,255,1);
  19. border-radius:15rpx;
  20. }
  21. .edit{
  22. position: fixed;
  23. width: 750rpx;
  24. height: 185rpx;
  25. bottom: 60rpx;
  26. left: 0;
  27. }
  28. .status-top{
  29. width: 100%;
  30. height: 75rpx;
  31. box-sizing: border-box;
  32. border-bottom: 1rpx solid #F9F9F9;
  33. /* overflow: hidden; */
  34. }
  35. .p-status{
  36. float: left;
  37. width: 260rpx;
  38. font-size:32rpx;
  39. font-family:PingFang-SC-Bold;
  40. font-weight:bold;
  41. color:rgba(243,69,58,1);
  42. line-height: 75rpx;
  43. }
  44. .p-time{
  45. float: right;
  46. font-size:26rpx;
  47. font-family:PingFang-SC-Medium;
  48. font-weight:500;
  49. color:rgba(243,69,58,1);
  50. width: 38rpx;
  51. height: 30rpx;
  52. margin-top: 22rpx;
  53. background:rgba(252,220,221,1);
  54. border-radius:10rpx;
  55. line-height: 30rpx;
  56. text-align: center;
  57. margin: 22rpx 6rpx;
  58. }
  59. .p-mao{
  60. float: right;
  61. font-size:26rpx;
  62. font-family:PingFang-SC-Medium;
  63. font-weight:500;
  64. color:rgba(243,69,58,1);
  65. line-height: 75rpx;
  66. }
  67. .p-text{
  68. float: right;
  69. font-size:26rpx;
  70. font-family:PingFang-SC-Regular;
  71. font-weight:400;
  72. color:rgba(51,51,51,1);
  73. line-height:75rpx;
  74. }
  75. .status-center{
  76. width: 100%;
  77. overflow: hidden;
  78. padding: 20rpx 0;
  79. text-align: center;
  80. border-bottom: 1rpx solid #F9F9F9;
  81. }
  82. .tuanzhang{
  83. float: left;
  84. width: 120rpx;
  85. height: 120rpx;
  86. position: relative;
  87. box-sizing:border-box;
  88. }
  89. .touxiangitems{
  90. padding: 20rpx;
  91. margin: 0;
  92. overflow: hidden;
  93. }
  94. .touxiang{
  95. width: 80rpx;
  96. height: 80rpx;
  97. border-radius: 40rpx;
  98. overflow: hidden;
  99. }
  100. .no-touxiang{
  101. width: 80rpx;
  102. height: 80rpx;
  103. overflow: hidden;
  104. background:rgba(252,220,221,1);
  105. border:1rpx solid rgba(243,69,58,1);
  106. border-radius:50%;
  107. box-sizing: border-box;
  108. line-height: 78rpx;
  109. text-align: center;
  110. font-size:32rpx;
  111. font-family:PingFang-SC-Regular;
  112. font-weight:400;
  113. color:rgba(243,69,58,1);
  114. margin: 0;
  115. padding: 0;
  116. }
  117. .touxiang image{
  118. width: 80rpx;
  119. height: 80rpx;
  120. }
  121. .tuan-icon{
  122. position: absolute;
  123. bottom:20rpx;
  124. left:28rpx;
  125. width: 64rpx;
  126. height: 27rpx;
  127. }
  128. .tuan-icon image{
  129. display: block;
  130. width: 64rpx;
  131. height: 27rpx;
  132. }
  133. .status-bottom{
  134. width: 100%;
  135. height: auto;
  136. overflow: hidden;
  137. }
  138. .position-icon{
  139. width: 38rpx;
  140. float: left;
  141. }
  142. .position-icon image{
  143. width: 27rpx;
  144. height: 37rpx;
  145. margin-top: 17rpx;
  146. }
  147. .position{
  148. font-size:28rpx;
  149. font-family:PingFang-SC-Medium;
  150. font-weight:500;
  151. color:rgba(51,51,51,1);
  152. line-height: 72rpx;
  153. }
  154. .detail{
  155. position: relative;
  156. width: 690rpx;
  157. padding:0 28rpx;
  158. margin: 30rpx auto 0;
  159. box-sizing: border-box;
  160. background:rgba(255,255,255,1);
  161. border-radius:15rpx;
  162. }
  163. /* .return-index{
  164. position: absolute;
  165. right: 30rpx;
  166. top: 30rpx;
  167. width: 50rpx;
  168. height: 50rpx;
  169. }
  170. .return-index image{
  171. display: block;
  172. width: 50rpx;
  173. height: 50rpx;
  174. } */
  175. .return-index{
  176. position: fixed;
  177. right: 50rpx;
  178. top: 60rpx;
  179. width:100rpx!important;
  180. height:100rpx;
  181. z-index: 100;
  182. background:rgba(255,255,255,1);
  183. line-height: 95rpx;
  184. border:1rpx solid rgba(227,227,227,1);
  185. border-radius:50%;
  186. }
  187. .return-index image{
  188. position: absolute;
  189. width: 60rpx;
  190. left: 0;
  191. right: 0;
  192. top: 0;
  193. bottom: 0;
  194. margin: auto;
  195. }
  196. .detail-top{
  197. width: 100%;
  198. height: auto;
  199. overflow: hidden;
  200. padding-bottom: 12rpx;
  201. }
  202. .detail-top01{
  203. float: left;
  204. width: 180rpx;
  205. }
  206. .detail-top01 image{
  207. width: 180rpx;
  208. height: 180rpx;
  209. margin-top: 33rpx;
  210. }
  211. .detail-top02{
  212. width: 208rpx;
  213. float: left;
  214. margin-left: 16rpx;
  215. }
  216. .title{
  217. font-size:30rpx;
  218. font-family:PingFang-SC-Bold;
  219. font-weight:bold;
  220. color:rgba(51,51,51,1);
  221. line-height:44rpx;
  222. margin-top: 30rpx;
  223. overflow:hidden;
  224. text-overflow:ellipsis;
  225. white-space:nowrap;
  226. }
  227. .des{
  228. font-size:26rpx;
  229. font-family:PingFang-SC-Medium;
  230. font-weight:500;
  231. color:rgba(134,134,134,1);
  232. line-height:40rpx;
  233. overflow:hidden;
  234. text-overflow:ellipsis;
  235. white-space:nowrap;
  236. }
  237. .detail-top03{
  238. float: left;
  239. padding-top: 180rpx;
  240. width: 230rpx;
  241. }
  242. .detail-p-name{
  243. float: right;
  244. font-size:26rpx;
  245. font-family:PingFang-SC-Medium;
  246. font-weight:500;
  247. color:#FD782D;
  248. line-height:44rpx;
  249. }
  250. .detail-p-price{
  251. float: right;
  252. font-size:26rpx;
  253. font-family:PingFang-SC-Medium;
  254. font-weight:500;
  255. color:#FD782D;
  256. line-height:44rpx;
  257. }
  258. .detail-bottom{
  259. border-top: 1rpx solid #F9F9F9;
  260. width: 100%;
  261. overflow: hidden;
  262. height: 86rpx;
  263. }
  264. .b-unit{
  265. float: right;
  266. font-size:24rpx;
  267. font-family:PingFang-SC-Medium;
  268. font-weight:500;
  269. color:rgba(237,63,46,1);
  270. margin-top: 36rpx;
  271. }
  272. .b-price{
  273. float: right;
  274. font-size:40rpx;
  275. font-family:PingFang-SC-Medium;
  276. font-weight:500;
  277. color:rgba(237,63,46,1);
  278. margin-top: 18rpx;
  279. }
  280. .b-name{
  281. float: right;
  282. font-size:26rpx;
  283. font-family:PingFang-SC-Medium;
  284. font-weight:500;
  285. color:rgba(51,51,51,1);
  286. margin-right: 6rpx;
  287. margin-top: 34rpx;
  288. }
  289. .order{
  290. width: 690rpx;
  291. padding:10rpx 28rpx;
  292. margin: 30rpx auto 0;
  293. box-sizing: border-box;
  294. background:rgba(255,255,255,1);
  295. border-radius:15rpx;
  296. }
  297. .order-list{
  298. height: 55rpx;
  299. }
  300. .order-title{
  301. line-height: 55rpx;
  302. float: left;
  303. font-size:26rpx;
  304. font-family:PingFang-SC-Medium;
  305. font-weight:500;
  306. color:rgba(51,51,51,1);
  307. }
  308. .order-text{
  309. float: right;
  310. text-align: right;
  311. line-height: 55rpx;
  312. font-size:26rpx;
  313. font-family:PingFang-SC-Medium;
  314. font-weight:500;
  315. color:#FD782D;
  316. }
  317. .user-motto {
  318. border: 0;
  319. width:650rpx;
  320. height:85rpx;
  321. background:linear-gradient(90deg,rgba(248,85,45,1) 0%,rgba(241,60,66,1) 0%,rgba(248,86,46,1) 100%);
  322. border-radius:43rpx;
  323. font-size:36rpx;
  324. font-family:PingFang-SC-Medium;
  325. font-weight:500;
  326. color:rgba(254,254,254,1);
  327. line-height: 85rpx;
  328. margin-top: 100rpx;
  329. }
  330. .user-enough{
  331. border: 0;
  332. width:650rpx;
  333. height:85rpx;
  334. background:linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  335. border-radius:43rpx;
  336. font-size:36rpx;
  337. font-family:PingFang-SC-Medium;
  338. font-weight:500;
  339. color:rgba(254,254,254,1);
  340. line-height: 85rpx;
  341. margin-top: 100rpx;
  342. }
  343. .user-motto::after {
  344. border: none;
  345. }
  346. .button button:nth-of-type(1){
  347. width:520rpx;
  348. height:95rpx;
  349. margin: 30rpx auto 38rpx;
  350. background:linear-gradient(90deg,rgba(248,85,45,1) 0%,rgba(241,60,66,1) 0%,rgba(248,86,46,1) 100%);
  351. border-radius:47rpx;
  352. color: #fff;
  353. }
  354. .button button:nth-of-type(2){
  355. width:520rpx;
  356. height:95rpx;
  357. background:rgba(255,255,255,1);
  358. border:1rpx solid rgba(190,190,190,1);
  359. border-radius:47rpx;
  360. color:#333333;
  361. margin-bottom: 50rpx;
  362. }
  363. .alert-bg{
  364. width: 100%;
  365. height: 100vh;
  366. position: fixed;
  367. opacity: 0.7;
  368. background: #000;
  369. top: 0;
  370. left: 0;
  371. z-index: 200;
  372. }
  373. .alert-box{
  374. width: 600rpx;
  375. height: 332rpx;
  376. position: fixed;
  377. z-index: 300;
  378. background: #fff;
  379. top: 50vh;
  380. margin-top: -162rpx;
  381. left: 85rpx;
  382. border-radius:15rpx;
  383. }
  384. .alert-close{
  385. position: absolute;
  386. width: 47rpx;
  387. height: 98rpx;
  388. top: -98rpx;
  389. right: 0;
  390. }
  391. .alert-close image{
  392. width: 47rpx;
  393. height: 98rpx;
  394. }
  395. .alert-title{
  396. text-align: center;
  397. font-size:30rpx;
  398. line-height: 30rpx;
  399. margin-top: 79rpx;
  400. font-family:PingFang-SC-Medium;
  401. font-weight:500;
  402. color:rgba(51,51,51,1);
  403. }
  404. .alert-button .share{
  405. width:500rpx;
  406. height:95rpx;
  407. background:linear-gradient(90deg,rgba(248,85,45,1) 0%,rgba(241,60,66,1) 0%,rgba(248,86,46,1) 100%);
  408. border-radius:47rpx;
  409. margin-top: 79rpx;
  410. }
  411. .al-bg{
  412. position: fixed;
  413. width: 100%;
  414. height: 100vh;
  415. top: 0;
  416. left: 0;
  417. background:rgba(0,0,0,1);
  418. opacity:0.65;
  419. z-index: 200;
  420. }
  421. .al-content{
  422. background: #fff;
  423. position: fixed;
  424. width: 545rpx;
  425. z-index: 300;
  426. top: 200rpx;
  427. left: 102rpx;
  428. border-radius: 15rpx;
  429. }
  430. .al-top{
  431. width: 100%;
  432. }
  433. .al-top image{
  434. position: relative;
  435. height: 298rpx;
  436. margin-top: -96rpx;
  437. width: 545rpx;
  438. }
  439. .al-center{
  440. padding: 80rpx 30rpx;
  441. font-size:30rpx;
  442. font-family:PingFang-SC-Regular;
  443. font-weight:400;
  444. color:rgba(51,51,51,1);
  445. }
  446. .al-bottom{
  447. width:462rpx;
  448. height:95rpx;
  449. background:linear-gradient(90deg,rgba(248,85,45,1) 0%,rgba(241,60,66,1) 0%,rgba(248,86,46,1) 100%);
  450. border-radius:47rpx;
  451. font-size:30rpx;
  452. font-family:PingFang-SC-Medium;
  453. font-weight:500;
  454. color:rgba(255,255,255,1);
  455. text-align: center;
  456. line-height: 95rpx;
  457. margin: 0 auto 43rpx;
  458. }