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.

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