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.

581 lines
9.1 KiB

  1. /* pages/spellGroup/mySpellGroup/index.wxss */
  2. .top-img{
  3. width: 100%;
  4. height: 533rpx;
  5. z-index: 1;
  6. }
  7. .top-img image{
  8. width: 100%;
  9. height: 533rpx;
  10. }
  11. .goback {
  12. float:left;
  13. width:122rpx!important;
  14. height:95rpx;
  15. background:rgba(255,255,255,1);
  16. line-height:95rpx;
  17. border:1rpx solid rgba(227,227,227,1);
  18. border-radius:48rpx;
  19. margin-right:25rpx;
  20. }
  21. .timess{
  22. color: #af6e34;
  23. }
  24. .wx-swiper-dots{
  25. margin-bottom: 30rpx;
  26. }
  27. button::after{ border: none; }
  28. .goback image{
  29. position:absolute;
  30. width:60rpx;
  31. left:0;
  32. right:0;
  33. top:0;
  34. bottom:0;
  35. margin:auto;
  36. height: 80rpx;
  37. }
  38. .content-box{
  39. box-sizing: content-box;
  40. height: auto;
  41. overflow: hidden;
  42. }
  43. .content{
  44. position: relative;
  45. width: 100%;
  46. height: auto;
  47. background: #fff;
  48. overflow: hidden;
  49. padding-bottom: 130rpx;
  50. }
  51. .text{
  52. position: relative;
  53. padding: 0 30rpx;
  54. }
  55. .title{
  56. position: relative;
  57. background-color: #fff;
  58. z-index: 100;
  59. width: 750rpx;
  60. padding-top: 30rpx;
  61. padding-left: 30rpx;
  62. line-height: 50rpx;
  63. opacity: 1;
  64. font-size:32rpx;
  65. font-weight:bold;
  66. color:rgba(51,51,51,1);
  67. box-sizing: border-box;
  68. }
  69. .remark{
  70. font-size:24rpx;
  71. font-family:PingFang-SC-Medium;
  72. font-weight:500;
  73. color:rgba(134,134,134,1);
  74. line-height: 48rpx;
  75. }
  76. .des{
  77. width: 100%;
  78. height: auto;
  79. padding-top: 6rpx;
  80. }
  81. .des-peoplenum{
  82. display: inline;
  83. font-size:24rpx;
  84. font-family:PingFang-SC-Medium;
  85. font-weight:500;
  86. color:rgba(0,0,0,1);
  87. line-height:44rpx;
  88. margin-right: 15rpx;
  89. }
  90. .des-saleprice{
  91. display: inline;
  92. font-size:40rpx;
  93. font-family:PingFang-SC-Medium;
  94. font-weight:500;
  95. color:rgba(255,53,53,1);
  96. }
  97. .status{
  98. width: 100%;
  99. border-radius: 15rpx;
  100. background:rgba(255,235,229,1);
  101. margin: 30rpx 0;
  102. overflow: hidden;
  103. }
  104. .status01{
  105. float: left;
  106. width: 130rpx;
  107. height: 130rpx;
  108. }
  109. .status01 image{
  110. width: 90rpx;
  111. height: 90rpx;
  112. border-radius: 45rpx;
  113. margin: 20rpx 0 0 20rpx;
  114. }
  115. .status02{
  116. margin-top: 20rpx;
  117. float: left;
  118. width: 140rpx;
  119. font-size:28rpx;
  120. font-family:PingFang-SC-Medium;
  121. font-weight:500;
  122. color:rgba(51,51,51,1);
  123. }
  124. .r-p-num{
  125. display: inline;
  126. color: #FF3535;
  127. }
  128. .status03{
  129. width: 264rpx;
  130. float: left;
  131. padding-left: 10rpx;
  132. color: #F74812;
  133. box-sizing: border-box;
  134. }
  135. .hh,.mm,.ss{
  136. display: inline-block;
  137. font-size:26rpx;
  138. font-family:PingFang-SC-Medium;
  139. font-weight:500;
  140. color:rgba(255,255,255,1);
  141. height: 38rpx;
  142. width: 38rpx;
  143. background: #F74812;
  144. border-radius:10rpx;
  145. margin: 46rpx 0 0 0;
  146. text-align: center;
  147. line-height: 38rpx;
  148. }
  149. .day-box{
  150. width: 40rpx;
  151. text-align: center;
  152. }
  153. .mao{
  154. display: inline-block;
  155. width: 20rpx;
  156. text-align: center;
  157. }
  158. .status04{
  159. float: left;
  160. width: 146rpx;
  161. }
  162. .s-button{
  163. background:#ED3D2E;
  164. width: 120rpx;
  165. height: 48rpx;
  166. font-size:28rpx;
  167. font-family:PingFang-SC-Medium;
  168. font-weight:500;
  169. color:rgba(255,255,255,1);
  170. text-align: center;
  171. line-height: 48rpx;
  172. border-radius: 24rpx;
  173. margin: 40rpx auto 0;
  174. }
  175. .p-title{
  176. font-size:30rpx;
  177. color:rgba(51,51,51,1);
  178. margin: 10rpx 0 20rpx 0;
  179. }
  180. .p-list{
  181. font-size:24rpx;
  182. font-family:PingFang-SC-Medium;
  183. font-weight:500;
  184. color:rgba(51,51,51,1);
  185. line-height:50rpx;
  186. }
  187. .edit{
  188. position:fixed;
  189. bottom:0;
  190. left:0;
  191. right:0;
  192. padding:20rpx 22rpx;
  193. background:#fff;
  194. }
  195. .edit-left{
  196. float: left;
  197. width: 269rpx;
  198. height: 95rpx;
  199. background:rgba(255,169,2,1);
  200. box-shadow:0px 8rpx 8rpx 1rpx rgba(255,169,2,0.32);
  201. border-radius:48rpx;
  202. }
  203. .edit-right{
  204. float: right;
  205. width: 269rpx;
  206. height: 95rpx;
  207. line-height: 46rpx;
  208. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  209. box-shadow:0px 8rpx 8rpx 1rpx rgba(246,93,51,0.32);
  210. border-radius:48rpx;
  211. }
  212. .edit-left-top{
  213. height: 46rpx;
  214. text-align: center;
  215. line-height:65rpx;
  216. }
  217. .price{
  218. display: inline;
  219. font-size:32rpx;
  220. line-height: 32rpx;
  221. font-family:PingFang-SC-Medium;
  222. font-weight:500;
  223. color:rgba(254,254,254,1);
  224. }
  225. .price-unit{
  226. display: inline;
  227. font-size:27rpx;
  228. line-height: 27rpx;
  229. font-family:PingFang-SC-Medium;
  230. font-weight:500;
  231. color:rgba(254,254,254,1);
  232. }
  233. .edit-left-bottom{
  234. text-align: center;
  235. font-size:30rpx;
  236. line-height: 40rpx;
  237. font-family:PingFang-SC-Medium;
  238. font-weight:500;
  239. color:rgba(254,254,254,1);
  240. }
  241. .edit-right-top{
  242. line-height: 32rpx;
  243. text-align: center;
  244. margin-top: 13rpx;
  245. }
  246. .real-price{
  247. display: inline;
  248. font-size:32rpx;
  249. font-family:PingFang-SC-Medium;
  250. font-weight:500;
  251. color:rgba(254,254,254,1);
  252. }
  253. .real-price-unit{
  254. display: inline;
  255. font-size:27rpx;
  256. line-height: 27rpx;
  257. font-weight:500;
  258. color:rgba(254,254,254,1);
  259. }
  260. .edit-right-bottom{
  261. text-align: center;
  262. font-size:30rpx;
  263. line-height: 40rpx;
  264. font-weight:500;
  265. color:rgba(254,254,254,1);
  266. }
  267. .posi {
  268. position: relative;
  269. }
  270. .applyshop{
  271. font-size:32rpx;
  272. color:rgba(51,51,51,1);
  273. margin: 10rpx 0 20rpx 0;
  274. }
  275. .posi>view:nth-child(2) {
  276. width: 100%;
  277. height: 87rpx;
  278. display: flex;
  279. justify-content: space-between;
  280. line-height: 87rpx;
  281. }
  282. .posi>view:nth-child(2) text:nth-child(1) {
  283. font-size: 30rpx;
  284. color: #a9a9a9;
  285. }
  286. .posi>view:nth-child(2) text:nth-child(2) {
  287. font-size: 30rpx;
  288. color: #a9a9a9;
  289. }
  290. .posi_logo {
  291. width: 100%;
  292. display: flex;
  293. padding: 20rpx 0;
  294. background: #fff;
  295. height: 100rpx;
  296. margin-bottom: 20rpx;
  297. }
  298. .posi_logo view:nth-child(1) {
  299. width: 100rpx;
  300. height: 100rpx;
  301. border-radius: 16rpx;
  302. }
  303. .posi_logo view:nth-child(1) image {
  304. display: block;
  305. width: 100rpx;
  306. height: 100rpx;
  307. border-radius: 16rpx;
  308. border: 1px solid #e5e5e5;
  309. }
  310. .posi_logo view:nth-child(2) {
  311. display: flex;
  312. flex-direction: column;
  313. flex: 8;
  314. padding-left: 30rpx;
  315. }
  316. .posi_logo view:nth-child(2) text:nth-child(1) {
  317. font-size: 32rpx;
  318. color: #333;
  319. letter-spacing: 0;
  320. }
  321. .posi_logo view:nth-child(2) text:nth-child(2) {
  322. font-size: 24rpx;
  323. color: #b8b8b8;
  324. padding-top: 3rpx;
  325. width: 450rpx;
  326. height: 36rpx;
  327. overflow: hidden;
  328. }
  329. .tel {
  330. right: 0;
  331. top: 0;
  332. bottom: 0;
  333. margin: auto;
  334. width: 50rpx;
  335. height: 50rpx;
  336. }
  337. .rest {
  338. font-size: 24rpx;
  339. color: #919191;
  340. letter-spacing: 0;
  341. height: 70rpx;
  342. line-height: 70rpx;
  343. /* border-bottom: 1px solid #eee; */
  344. border-bottom: 1px solid #f9f9f9;
  345. }
  346. .restNum {
  347. font-size: 24rpx;
  348. color: #999;
  349. letter-spacing: 1.16rpx;
  350. text-align: right;
  351. }
  352. .time {
  353. font-size: 24rpx;
  354. color: #333;
  355. letter-spacing: 0;
  356. line-height: 33rpx;
  357. display: inline-block;
  358. }
  359. .txt01 {
  360. font-size: 24rpx;
  361. color: #919191;
  362. letter-spacing: 0;
  363. }
  364. .times {
  365. display: inline-block;
  366. color: #ff4949;
  367. font-weight: bold;
  368. font-size: 26rpx;
  369. text-align: center;
  370. }
  371. .times text {
  372. display: inline-block;
  373. margin: 6rpx;
  374. width: 46rpx;
  375. height: 56rpx;
  376. text-align: center;
  377. font-size: 28rpx;
  378. line-height: 60rpx;
  379. border-radius: 12rpx;
  380. color: #fff;
  381. font-weight: bold;
  382. background: #ff4949;
  383. }
  384. .fenxiang {
  385. position:absolute;
  386. right:28rpx;
  387. top:-27rpx;
  388. width:108rpx;
  389. z-index:1000;
  390. }
  391. .fenxiang image {
  392. width: 108rpx;
  393. position: absolute;
  394. top: 0;
  395. right: 0;
  396. z-index: 10;
  397. }
  398. .user-motto {
  399. width: 270rpx;
  400. border: 0;
  401. background: none;
  402. height: 260rpx;
  403. color: #fff;
  404. position: fixed;
  405. }
  406. .user-motto::after {
  407. border: none;
  408. }
  409. .notes view:nth-child(1) {
  410. height: 87rpx;
  411. line-height: 87rpx;
  412. background: #fff;
  413. border-top: 1px solid #f9f9f9;
  414. }
  415. .notes {
  416. margin: 0 auto;
  417. }
  418. .notes view:nth-child(1) text {
  419. color: #333;
  420. letter-spacing: 0;
  421. font-size: 30rpx;
  422. height: 70rpx;
  423. line-height: 70rpx;
  424. }
  425. .notes view:nth-child(2) {
  426. background: #fff;
  427. display: flex;
  428. flex-direction: column;
  429. }
  430. .notes view:nth-child(2)>text {
  431. font-size: 24rpx;
  432. color: #919191;
  433. letter-spacing: 0;
  434. line-height: 42rpx;
  435. }
  436. .banner {
  437. position: relative;
  438. width: 750rpx;
  439. height: 454rpx;
  440. }
  441. .banner swiper {
  442. width: 750rpx;
  443. height: 454rpx;
  444. }
  445. .banner image {
  446. width: 100%;
  447. height: 100%;
  448. }
  449. .dots {
  450. position: absolute;
  451. left: 0;
  452. right: 0;
  453. bottom: 50rpx;
  454. display: flex;
  455. justify-content: center;
  456. }
  457. .dot {
  458. margin: 0 8rpx;
  459. width: 14rpx;
  460. height: 14rpx;
  461. background: #fff;
  462. border-radius: 8rpx;
  463. transition: all 0.6s;
  464. }
  465. .dot.active {
  466. width: 24rpx;
  467. background: #f80;
  468. }
  469. .detailImg {
  470. width: 92%;
  471. margin: 10rpx auto 0;
  472. }
  473. .detailImg image {
  474. display: block;
  475. width: 100%;
  476. margin-bottom: 20rpx;
  477. }
  478. .poster{
  479. width: 100%;
  480. height: 100%;
  481. padding: 20rpx;
  482. position: absolute;
  483. top: 0;
  484. left: 0;
  485. }
  486. .bottomsave {
  487. width: 100%;
  488. height: 140rpx;
  489. line-height: 140rpx;
  490. margin: auto 0;
  491. bottom:0;
  492. left: 0;
  493. right: 0;
  494. border-top: 1px solid #ccc;
  495. box-shadow: 0 0rpx 150rpx #ccc;
  496. background: #fff;
  497. }
  498. .saveposter {
  499. color: #fff;
  500. width: 380rpx;
  501. height: 80rpx;
  502. border-radius: 50rpx;
  503. background: #f08f04;
  504. margin-top: 30rpx;
  505. font-size: 32rpx;
  506. }
  507. .modal {
  508. width: 100%;
  509. height: 100%;
  510. position: fixed;
  511. top: 0;
  512. left: 0;
  513. background: rgba(0, 0, 0, 0.5);
  514. overflow: hidden;
  515. z-index: 10000;
  516. color: #fff;
  517. }
  518. .modal-content {
  519. width: 540rpx;
  520. height: 233rpx;
  521. line-height: 60rpx;
  522. overflow: hidden;
  523. position: fixed;
  524. top: 50%;
  525. left: 0;
  526. z-index: 11;
  527. background: #f9f9f9;
  528. margin: -130rpx 105rpx;
  529. border-radius: 36rpx;
  530. display: flex;
  531. }
  532. .modal-content view {
  533. display: inline-block;
  534. flex: 1;
  535. text-align: center;
  536. }
  537. .modal-content view>text {
  538. color: #000;
  539. display: block;
  540. font-size: 30rpx;
  541. height: 80rpx;
  542. line-height: 80rpx;
  543. }
  544. .modal-content view>image {
  545. margin-top: 30rpx;
  546. width: 90rpx;
  547. height: 90rpx;
  548. }