抖音c端
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

577 wiersze
9.1 KiB

  1. @import "../../app.ttss";
  2. .coupons {
  3. width: 100%;
  4. position: relative;
  5. padding-bottom:57rpx;
  6. }
  7. .coupons-body {
  8. flex: 1;
  9. /* overflow: auto; */
  10. }
  11. .banner {
  12. position: relative;
  13. width: 100%;
  14. }
  15. .banner image {
  16. display: block;
  17. width: 100%;
  18. border-radius: 12rpx;
  19. }
  20. .act {
  21. position: relative;
  22. z-index: 1000;
  23. background: #fff;
  24. border-radius: 12rpx;
  25. width: 94%;
  26. margin: 24rpx auto 0;
  27. padding-bottom: 20rpx;
  28. }
  29. .act view {
  30. padding-left: 4.8%;
  31. padding-right: 4.8%;
  32. }
  33. .txt001 {
  34. /* display: block; */
  35. font-size: 34rpx;
  36. color: #363636;
  37. letter-spacing: 0;
  38. text-align: left;
  39. line-height: 48rpx;
  40. padding-top: 3.2%;
  41. }
  42. .txt002 {
  43. font-size: 24rpx;
  44. color: #999;
  45. letter-spacing: 0;
  46. text-align: left;
  47. line-height: 33rpx;
  48. }
  49. .proct {
  50. position: relative;
  51. /* height: 60rpx; */
  52. margin-top: 20rpx;
  53. }
  54. .proct text:nth-of-type(1) {
  55. display: block;
  56. font-size: 30rpx;
  57. letter-spacing: 0;
  58. line-height: 42rpx;
  59. margin-bottom: 20rpx;
  60. text-align: left!important;
  61. /* width: 60rpx; */
  62. /* height: 64rpx; */
  63. }
  64. .proct text:nth-of-type(2) {
  65. display: block;
  66. /* width: 498rpx; */
  67. /* height: 63rpx; */
  68. /* overflow: hidden; */
  69. word-wrap:break-word;
  70. /* text-overflow: ellipsis; */
  71. font-size: 22rpx;
  72. color: #6f6f6f;
  73. letter-spacing: 0;
  74. margin: 0 auto;
  75. }
  76. .orbg {
  77. position: absolute;
  78. top: 256rpx;
  79. z-index: 1000000;
  80. }
  81. .banner text {
  82. position: absolute;
  83. right: 0;
  84. top: 0;
  85. bottom: 0;
  86. margin: auto;
  87. width: 122rpx;
  88. height: 48rpx;
  89. line-height: 48rpx;
  90. opacity: 0.8;
  91. background: #000;
  92. font-size: 24rpx;
  93. color: #fff;
  94. letter-spacing: 0;
  95. text-indent: 0.5em;
  96. border-top-left-radius: 50rpx;
  97. border-bottom-left-radius: 50rpx;
  98. }
  99. .coupons_info {
  100. width: 92%;
  101. height: 120rpx;
  102. display: flex;
  103. justify-content: space-between;
  104. padding: 0 4% 4%;
  105. background: #fff;
  106. }
  107. .coupons_info view {
  108. display: flex;
  109. flex-direction: column;
  110. }
  111. .coupons_info view:nth-child(1) text {
  112. font-size: 30rpx;
  113. line-height: 32rpx;
  114. margin-top: 10%;
  115. }
  116. .coupons_info view:nth-child(1) text:nth-child(1) text {
  117. color: #ff3434;
  118. font-size: 24rpx;
  119. border: 1px solid #ff3434;
  120. border-radius: 6rpx;
  121. margin-left: 2%;
  122. padding: 0 5rpx;
  123. }
  124. .coupons_info view:nth-child(1) text:nth-child(2),
  125. .coupons_info view:nth-child(1) text:nth-child(3) {
  126. color: #b8b8b8;
  127. font-size: 24rpx;
  128. margin-top: 4%;
  129. }
  130. .coupons_info view:nth-child(1) text:nth-child(2) text,
  131. .coupons_info view:nth-child(1) text:nth-child(3) text {
  132. color: #ff3434;
  133. font-size: 24rpx;
  134. }
  135. .coupons_info view:nth-child(2) text:nth-child(1) {
  136. font-size: 36rpx;
  137. color: #ff3434;
  138. margin-top: 40rpx;
  139. font-weight: bold;
  140. }
  141. .coupons_info view:nth-child(2) text:nth-child(2) {
  142. font-size: 24rpx;
  143. color: #b4b4b4;
  144. text-decoration: line-through;
  145. padding-left: 10rpx;
  146. padding-top: 4rpx;
  147. }
  148. .navigator {
  149. display: block;
  150. margin-bottom: 24rpx;
  151. width: 344rpx;
  152. }
  153. .navigator-hover{
  154. opacity: 1!important;
  155. background: #fff!important;
  156. border-radius:16rpx;
  157. }
  158. .active{
  159. opacity: .6;
  160. }
  161. .navigator:nth-of-type(2n) {
  162. float: right;
  163. }
  164. .navigator:nth-of-type(2n+1) {
  165. float: left;
  166. }
  167. .contain {
  168. padding: 24rpx 25rpx 0;
  169. }
  170. .posi {
  171. width: 92%;
  172. display: flex;
  173. flex-direction: column;
  174. padding: 0 4%;
  175. background: #fff;
  176. margin-top: 2%;
  177. }
  178. .posi>view:nth-child(2) {
  179. width: 100%;
  180. height: 87rpx;
  181. display: flex;
  182. justify-content: space-between;
  183. border-top: 1px solid #f6f6f6;
  184. line-height: 87rpx;
  185. }
  186. .posi>view:nth-child(2) text:nth-child(1) {
  187. font-size: 30rpx;
  188. color: #a9a9a9;
  189. }
  190. .posi>view:nth-child(2) text:nth-child(2) {
  191. font-size: 30rpx;
  192. color: #a9a9a9;
  193. }
  194. .posi_logo {
  195. width: 100%;
  196. height: 156rpx;
  197. display: flex;
  198. margin-top: 30rpx;
  199. }
  200. .posi_logo view:nth-child(1) {
  201. width: 126rpx;
  202. height: 126rpx;
  203. border-radius: 50%;
  204. overflow: hidden;
  205. flex: 2;
  206. }
  207. .posi_logo view:nth-child(1) image {
  208. width: 100%;
  209. height: 100%;
  210. }
  211. .posi_logo view:nth-child(2) {
  212. display: flex;
  213. flex-direction: column;
  214. flex: 8;
  215. padding-top: 20rpx;
  216. padding-left: 30rpx;
  217. }
  218. .posi_logo view:nth-child(2) text:nth-child(1) {
  219. font-size: 30rpx;
  220. }
  221. .posi_logo view:nth-child(2) text:nth-child(2) {
  222. font-size: 24rpx;
  223. color: #b8b8b8;
  224. padding-top: 10rpx;
  225. }
  226. .notes view:nth-child(1) {
  227. width: 92%;
  228. height: 87rpx;
  229. padding: 0 4%;
  230. line-height: 87rpx;
  231. background: #fff;
  232. /* border-top: 1rpx solid #f5f5f5; */
  233. }
  234. .notes view:nth-child(1) text {
  235. font-size: 30rpx;
  236. font-weight: bold;
  237. }
  238. .notes view:nth-child(2) {
  239. width: 92%;
  240. height: auto;
  241. padding: 0 4% 4%;
  242. background: #fff;
  243. /* border-bottom: 1rpx solid #f5f5f5; */
  244. display: flex;
  245. flex-direction: column;
  246. }
  247. .notes view:nth-child(2)>text {
  248. font-size: 28rpx;
  249. color: #a9a9a9;
  250. line-height: 45rpx;
  251. }
  252. .spot {
  253. width: 12rpx;
  254. height: 12rpx;
  255. display: inline-block;
  256. background: #a9a9a9;
  257. margin-right: 16rpx;
  258. position: relative;
  259. bottom: 4rpx;
  260. border-radius: 50%;
  261. }
  262. .buy-view {
  263. background: #fff;
  264. position: fixed;
  265. padding-top: 10rpx;
  266. height: 98rpx;
  267. bottom: 0rpx;
  268. left: 0;
  269. right: 0;
  270. }
  271. .buy {
  272. display: block;
  273. background: linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  274. border-radius: 30rpx;
  275. height: 48rpx;
  276. width: 112rpx;
  277. margin: 0 auto;
  278. color: #fff;
  279. font-size: 26rpx;
  280. line-height: 48rpx;
  281. text-align: center;
  282. }
  283. .buyX{
  284. display: block;
  285. background: linear-gradient(90deg, #E3BA79, #BC8D3E);
  286. border-radius: 30rpx;
  287. height: 48rpx;
  288. width: 112rpx;
  289. margin: 0 auto;
  290. color: #fff;
  291. font-size: 26rpx;
  292. line-height: 48rpx;
  293. text-align: center;
  294. }
  295. .coupons1-btn-gm {
  296. background: #00c0ff !important;
  297. border-radius: 10rpx !important;
  298. margin: 0 !important;
  299. padding: 0 !important;
  300. font-family: PingFangSC-Semibold;
  301. font-size: 28rpx;
  302. color: #fff !important;
  303. letter-spacing: 0;
  304. height: 50rpx !important;
  305. width: 138rpx !important;
  306. line-height: 50rpx !important;
  307. }
  308. .coupons1 {
  309. position: relative;
  310. background: #fff;
  311. border-radius: 16rpx;
  312. padding-bottom: 21rpx;
  313. overflow: hidden;
  314. height: 400rpx;
  315. }
  316. /* .coupons1-border {
  317. height: 1rpx;
  318. left: 30rpx;
  319. right: 30rpx;
  320. background: #f5f5f5;
  321. position: absolute;
  322. bottom: 0;
  323. } */
  324. .coupons1-img {
  325. width: 344rpx;
  326. height: 233rpx;
  327. overflow: hidden;
  328. }
  329. .coupons1-img image {
  330. display: block;
  331. width: 100%;
  332. height: 233rpx;
  333. }
  334. .coupons1-info {
  335. padding-left: 20rpx;
  336. }
  337. .coupons1-info-name {
  338. font-size: 28rpx;
  339. color: #000;
  340. letter-spacing: 0;
  341. }
  342. .i {
  343. font-size: 20rpx;
  344. font-style: normal;
  345. }
  346. .coupons1-info-price-p {
  347. display: inline-block;
  348. font-size: 36rpx;
  349. color: #f96563;
  350. line-height: 50rpx;
  351. margin-top: 21rpx;
  352. }
  353. .coupons1-info-price-pX{
  354. display: inline-block;
  355. font-size: 36rpx;
  356. color: #D5AF67;
  357. line-height: 50rpx;
  358. margin-top: 21rpx;
  359. }
  360. .tit {
  361. font-size: 30rpx;
  362. color: #000;
  363. letter-spacing: 0;
  364. line-height: 42rpx;
  365. width: 270rpx;
  366. height: 42rpx;
  367. overflow: hidden;
  368. white-space: nowrap;
  369. text-overflow: ellipsis;
  370. padding-top: 16rpx;
  371. }
  372. .coupons1-info-price-o {
  373. display: block;
  374. text-align: center;
  375. font-size: 26rpx;
  376. color: #b4b4b4;
  377. letter-spacing: 0.96rpx;
  378. text-decoration: line-through;
  379. line-height: 24rpx;
  380. }
  381. .coupons1-info-distance {
  382. font-size: 22rpx;
  383. color: #c0c0c0;
  384. letter-spacing: 0;
  385. padding-bottom: 10rpx;
  386. line-height: 30rpx;
  387. }
  388. .coupons1-info-address {
  389. font-size: 22rpx;
  390. color: #585858;
  391. letter-spacing: 0;
  392. line-height: 30rpx;
  393. }
  394. .coupons1-btn {
  395. position: absolute;
  396. width: 120rpx;
  397. bottom: 25rpx;
  398. right: 13rpx;
  399. }
  400. .coupons1-btn-gm {
  401. background: #00c0ff !important;
  402. border-radius: 10rpx !important;
  403. margin: 0 !important;
  404. padding: 0 !important;
  405. font-family: PingFangSC-Semibold;
  406. font-size: 28rpx;
  407. color: #fff !important;
  408. letter-spacing: 0;
  409. height: 50rpx !important;
  410. width: 138rpx !important;
  411. line-height: 50rpx !important;
  412. }
  413. .subtitle {
  414. font-size: 24rpx;
  415. font-weight: 100;
  416. text-align: left;
  417. overflow: hidden;
  418. white-space: nowrap;
  419. text-overflow: ellipsis;
  420. width: 300rpx;
  421. color: #999;
  422. height: 38rpx;
  423. letter-spacing: 0;
  424. }
  425. .coupons1-info-manjian {
  426. color: #fa7c7a;
  427. font-size: 20rpx;
  428. line-height: 34rpx;
  429. display: inline-block;
  430. }
  431. .jian {
  432. width: 44rpx;
  433. position: absolute;
  434. bottom: 1.7%;
  435. right: 3.5%;
  436. }
  437. /**上拉加载更多**/
  438. .userinfo {
  439. display: flex;
  440. flex-direction: column;
  441. align-items: center;
  442. }
  443. .userinfo-avatar {
  444. width: 128rpx;
  445. height: 128rpx;
  446. margin: 20rpx;
  447. border-radius: 50%;
  448. }
  449. .userinfo-nickname {
  450. color: #aaa;
  451. }
  452. .sy {
  453. display: block;
  454. text-align: center;
  455. width: 120rpx !important;
  456. margin-top: 6rpx;
  457. }
  458. .usermotto {
  459. margin-top: 200px;
  460. }
  461. /**/
  462. scroll-view {
  463. width: 100%;
  464. }
  465. .item {
  466. width: 90%;
  467. height: 300rpx;
  468. margin: 20rpx auto;
  469. background: brown;
  470. overflow: hidden;
  471. }
  472. .item .img {
  473. width: 430rpx;
  474. margin-right: 20rpx;
  475. float: left;
  476. }
  477. .title {
  478. font-size: 30rpx;
  479. display: block;
  480. margin: 30rpx auto;
  481. }
  482. .description {
  483. font-size: 26rpx;
  484. line-height: 15rpx;
  485. }
  486. button::after{ border: none; }
  487. .goback{
  488. position: fixed;
  489. right: 50rpx;
  490. bottom: 60rpx;
  491. width:100rpx!important;
  492. height:100rpx;
  493. z-index: 100;
  494. background:rgba(255,255,255,1);
  495. line-height: 95rpx;
  496. border:1rpx solid rgba(227,227,227,1);
  497. border-radius:50%;
  498. }
  499. .goback image{
  500. position: absolute;
  501. width: 60rpx;
  502. left: 0;
  503. right: 0;
  504. top: 0;
  505. bottom: 0;
  506. margin: auto;
  507. }