home.wxss 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017
  1. /**index.wxss**/
  2. .bg {
  3. width: 100%;
  4. min-height: 100%;
  5. background-color: #fff;
  6. }
  7. .swiper {
  8. width: 710rpx;
  9. height: 280rpx;
  10. /* box-sizing: border-box; */
  11. /* padding-left: 20rpx; */
  12. /* padding-right: 20rpx; */
  13. box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.3);
  14. margin: 0 auto;
  15. border-radius: 10rpx;
  16. }
  17. .swiperImage {
  18. width: 100%;
  19. height: 280rpx;
  20. border-radius: 10rpx;
  21. overflow: hidden;
  22. }
  23. .swiper-container {
  24. position: relative;
  25. background: url('http://fohow.oss-cn-shenzhen.aliyuncs.com/neverse/homebg.png') no-repeat #fff fixed top;
  26. background-size: contain;
  27. }
  28. .swiper-dots {
  29. position: absolute;
  30. left: 0;
  31. right: 0;
  32. bottom: 20rpx;
  33. display: flex;
  34. justify-content: center;
  35. }
  36. .swiper-dot {
  37. margin: 0 8rpx;
  38. width: 24rpx;
  39. height: 7rpx;
  40. background: #fff;
  41. /* opacity: 0.5; */
  42. border-radius: 30%;
  43. transition: all .6s;
  44. }
  45. .swiper-active {
  46. background: #eab86a;
  47. }
  48. .column {
  49. margin-top: 20rpx;
  50. background-color: #fff;
  51. padding-bottom: 20rpx;
  52. }
  53. .first-project {
  54. /* padding-top: 20rpx; */
  55. padding: 20rpx 20rpx 0;
  56. display: flex;
  57. }
  58. .first-project__image {
  59. margin-right: 12rpx;
  60. float: left;
  61. display: block;
  62. width: 350rpx;
  63. height: 210rpx;
  64. /* border-radius: 8rpx; */
  65. /* border: 1rpx solid #dddddd; */
  66. }
  67. .first-project__image:nth-child(2) {
  68. margin-right: 0rpx;
  69. }
  70. .second-project {
  71. /* padding-top: 20rpx; */
  72. box-sizing: border-box;
  73. padding: 20rpx 20rpx 0;
  74. display: flex;
  75. }
  76. .second-project__image {
  77. margin-right: 13rpx;
  78. float: left;
  79. display: block;
  80. width: 170rpx;
  81. height: 188rpx;
  82. /* border-radius: 8rpx; */
  83. /* border: 1rpx solid #dddddd; */
  84. }
  85. .second-project__image:nth-child(4) {
  86. margin-right: 0rpx;
  87. }
  88. .recommend {
  89. margin: 20rpx;
  90. border-radius: 5rpx;
  91. overflow: hidden;
  92. }
  93. .recommend-title {
  94. display: block;
  95. height: 57rpx;
  96. background-color: #c8d1d8;
  97. font-size: 30rpx;
  98. line-height: 57rpx;
  99. color: #ffffff;
  100. text-shadow: 0rpx 0rpx 10rpx #a6b2bc;
  101. font-weight: bold;
  102. text-align: center;
  103. }
  104. .recommend-bg {
  105. padding: 10rpx;
  106. height: 354rpx;
  107. border-top: 3rpx solid #bac5ce;
  108. background-color: #f3f3f3;
  109. }
  110. .recommend-image {
  111. float: left;
  112. display: block;
  113. width: 250rpx;
  114. height: 250rpx;
  115. }
  116. .recommend-info {
  117. float: left;
  118. display: block;
  119. width: 404rpx;
  120. padding: 0 18rpx;
  121. height: 250rpx;
  122. background-color: #ffffff;
  123. }
  124. .recommend-projectTitle {
  125. padding-top: 26rpx;
  126. margin-bottom: 28rpx;
  127. line-height: 48rpx;
  128. color: #4c4c4c;
  129. -webkit-line-clamp: 2;
  130. font-size: 28rpx;
  131. }
  132. .recommend-price {
  133. line-height: 36rpx;
  134. font-size: 36rpx;
  135. color: #eab86a;
  136. font-weight: bold;
  137. }
  138. .recommend-point {
  139. padding-top: 18rpx;
  140. font-size: 24rpx;
  141. color: #a6bfd4;
  142. }
  143. .recommend-more {
  144. width: 240rpx;
  145. height: 64rpx;
  146. margin: 20rpx auto 0;
  147. line-height: 64rpx;
  148. border-radius: 64rpx;
  149. text-align: center;
  150. font-size: 28rpx;
  151. color: #fff;
  152. background: -webkit-linear-gradient(left, #ff5c5c , #ff9b74);
  153. background: linear-gradient(to right, #ff5c5c , #ff9b74);
  154. }
  155. .projects {
  156. padding-top: 10rpx;
  157. background-color: #fff;
  158. position: relative;
  159. }
  160. .projects-title {
  161. font-size: 28rpx;
  162. padding-bottom: 20rpx;
  163. font-weight: bold;
  164. text-align: center;
  165. color: #d9dee3;
  166. }
  167. .projectbg {
  168. background-color: #fff;
  169. padding-bottom: 1rpx;
  170. }
  171. .project {
  172. position: relative;
  173. margin: 0 auto;
  174. width: 710rpx;
  175. height: auto;
  176. background-color: #f7f7f7;
  177. margin-bottom: 20rpx;
  178. border-radius: 8rpx;
  179. }
  180. .project1 {
  181. position: relative;
  182. margin: 0 auto;
  183. width: 710rpx;
  184. /* height: 580rpx; */
  185. background-color: #ffffff;
  186. margin-bottom: 20rpx;
  187. border-radius: 10rpx;
  188. overflow: hidden;
  189. }
  190. .project-left {
  191. float: left;
  192. width: 390rpx;
  193. padding-left: 20rpx;
  194. padding-top: 15rpx;
  195. }
  196. .project-describe {
  197. width: 710rpx;
  198. /* height: 130rpx; */
  199. padding: 20rpx 20rpx 0 20rpx;
  200. box-sizing: border-box;
  201. }
  202. .project-title {
  203. font-size: 28rpx;
  204. color: #2b2b2b;
  205. line-height: 36rpx;
  206. height: 72rpx;
  207. -webkit-line-clamp: 2;
  208. }
  209. .project-title1 {
  210. font-size: 30rpx;
  211. color: #2b2b2b;
  212. -webkit-line-clamp: 1;
  213. }
  214. .project-right {
  215. float: right;
  216. margin-right: 10rpx;
  217. margin-top: 10rpx;
  218. display: block;
  219. width: 258rpx;
  220. height: 258rpx;
  221. /*border: 1rpx solid #dddddd;*/
  222. }
  223. .project-image {
  224. display: block;
  225. width: 100%;
  226. height: 378rpx;
  227. }
  228. .project-count {
  229. padding-top: 15rpx;
  230. font-size: 24rpx;
  231. color: #bbbbbb;
  232. }
  233. .project-count1 {
  234. float: right;
  235. padding-top: 20rpx;
  236. font-size: 24rpx;
  237. color: #bbbbbb;
  238. }
  239. .project-price {
  240. padding-top: 90rpx;
  241. font-size: 28rpx;
  242. color: #eab86a;
  243. }
  244. .project-price1 {
  245. float: left;
  246. padding-top: 10rpx;
  247. font-size: 28rpx;
  248. color: #4c4c4c;
  249. padding-bottom:20rpx;
  250. }
  251. .project-point {
  252. color: #eab86a;
  253. /* color: #bbbbbb; */
  254. font-size: 24rpx;
  255. margin-top: 4rpx;
  256. margin-left: 10rpx;
  257. }
  258. .project-out {
  259. position: absolute;
  260. right: 20rpx;
  261. bottom: 20rpx;
  262. width: 66rpx;
  263. height: 66rpx;
  264. background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/xcx/sellout.png');
  265. background-size: 100% 100%;
  266. z-index: 10;
  267. }
  268. .project-green {
  269. position: absolute;
  270. right: 10rpx;
  271. top: 10rpx;
  272. width: 48rpx;
  273. height: 48rpx;
  274. background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/xcx/green.png');
  275. background-size: 100% 100%;
  276. z-index: 10;
  277. }
  278. .project-no {
  279. position: absolute;
  280. left: 10rpx;
  281. top: 10rpx;
  282. background: #8fcd85;
  283. z-index: 10;
  284. font-size: 25rpx;
  285. color: #fff;
  286. height: 35rpx;
  287. width: 96rpx;
  288. text-align: center;
  289. line-height: 35rpx;
  290. }
  291. .project-jizhu {
  292. position: absolute;
  293. left: 10rpx;
  294. top: 10rpx;
  295. background: #ffb468;
  296. z-index: 10;
  297. font-size: 25rpx;
  298. color: #fff;
  299. height: 35rpx;
  300. width: 96rpx;
  301. text-align: center;
  302. line-height: 35rpx;
  303. }
  304. .project-jieshu {
  305. position: absolute;
  306. left: 10rpx;
  307. top: 10rpx;
  308. background: red;
  309. z-index: 10;
  310. font-size: 25rpx;
  311. color: #fff;
  312. height: 35rpx;
  313. width: 96rpx;
  314. text-align: center;
  315. line-height: 35rpx;
  316. }
  317. .project-chenggong {
  318. position: absolute;
  319. left: 10rpx;
  320. top: 10rpx;
  321. background: skyblue;
  322. z-index: 10;
  323. font-size: 25rpx;
  324. color: #fff;
  325. height: 35rpx;
  326. width: 96rpx;
  327. text-align: center;
  328. line-height: 35rpx;
  329. }
  330. .project-tuikuan {
  331. position: absolute;
  332. left: 10rpx;
  333. top: 10rpx;
  334. background: brown;
  335. z-index: 10;
  336. font-size: 25rpx;
  337. color: #fff;
  338. height: 35rpx;
  339. width: 96rpx;
  340. text-align: center;
  341. line-height: 35rpx;
  342. }
  343. .project-jindu {
  344. height: 80rpx;
  345. width: 710rpx;
  346. background: #f9f9f9;
  347. position: relative;
  348. /* padding: 32rpx 140rpx 0 100rpx; */
  349. box-sizing: border-box;
  350. color: #fe7554;
  351. display:-webkit-box;
  352. display:flex;
  353. align-items:center;
  354. }
  355. .jindu {
  356. font-size: 30rpx;
  357. color: #ff9262;
  358. padding-left: 20rpx;
  359. padding-bottom:5rpx;
  360. /* position: absolute;
  361. top: 20rpx;
  362. left: 20rpx; */
  363. /* float: left; */
  364. flex:1;
  365. }
  366. .jindu-percent{
  367. font-size: 30rpx;
  368. color: #ff9262;
  369. flex:1;
  370. padding-left: 20rpx;
  371. padding-right: 20rpx;
  372. padding-bottom:5rpx;
  373. /* position: absolute;
  374. top: 20rpx;
  375. right: 10rpx; */
  376. /* float: right; */
  377. }
  378. .kefu-icon{
  379. position: fixed;
  380. bottom: 10rpx;
  381. right: 10rpx;
  382. z-index: 999;
  383. width: 132rpx;
  384. height: 132rpx;
  385. }
  386. .project-price {
  387. padding-top: 90rpx;
  388. font-size: 28rpx;
  389. color: #eab86a;
  390. }
  391. .selectitem {
  392. /* height: 216rpx; */
  393. background: #fff;
  394. display: flex;
  395. box-sizing: border-box;
  396. padding: 40rpx 40rpx 0rpx;
  397. width: 100%;
  398. overflow: hidden;
  399. }
  400. .selectitem-index {
  401. display: inline-block;
  402. }
  403. .item-index {
  404. width: 96rpx;
  405. height: 96rpx;
  406. background: #fff;
  407. /* border-radius: 35%; */
  408. margin-right: 50rpx;
  409. margin-bottom: 20rpx;
  410. /* display: inline-block; */
  411. }
  412. .item-index:nth-child(5) {
  413. margin-right: 0;
  414. }
  415. .item-name {
  416. font-size: 20rpx;
  417. color: #000;
  418. text-align: center;
  419. width: 96rpx;
  420. }
  421. .seckill {
  422. width: 100%;
  423. /* display: none; */
  424. }
  425. .seckill-top {
  426. position: relative;
  427. }
  428. .seckill-title {
  429. width: 710rpx;
  430. height: 66rpx;
  431. background: -webkit-linear-gradient(left, #fff, #fff1ee, #ffe4dd);
  432. background: -o-linear-gradient(right, #fff, #fff1ee, #ffe4dd);
  433. background: -moz-linear-gradient(right, #fff, #fff1ee, #ffe4dd);
  434. background: linear-gradient(to right, #fff, #fff1ee, #ffe4dd);
  435. margin: 30rpx auto 20rpx;
  436. border-radius: 5rpx;
  437. box-sizing: border-box;
  438. padding: 0 20rpx;
  439. }
  440. .seckill-img {
  441. display: block;
  442. width: 220rpx;
  443. height: 70rpx;
  444. position: absolute;
  445. left: 20rpx;
  446. top: -3rpx;
  447. }
  448. .time-text {
  449. color: #594848;
  450. font-size: 28rpx;
  451. float: right;
  452. line-height: 66rpx;
  453. height: 66rpx;
  454. padding-right: 20rpx;
  455. }
  456. .time-click {
  457. float: right;
  458. /* line-height: 58rpx; */
  459. margin-top: 13rpx;
  460. /* height: 58rpx; */
  461. font-size: 20rpx;
  462. color: #fff;
  463. }
  464. .time-item {
  465. float: right;
  466. margin-right: 5rpx
  467. }
  468. .time-kuang {
  469. background: #594848;
  470. height: 42rpx;
  471. width: 39rpx;
  472. text-align: center;
  473. line-height: 42rpx;
  474. font-size: 24rpx;
  475. }
  476. .time-kuang1 {
  477. background: #594848;
  478. height: 42rpx;
  479. width: 59rpx;
  480. text-align: center;
  481. line-height: 42rpx;
  482. margin-left: 10rpx;
  483. font-size: 24rpx;
  484. }
  485. .time-color {
  486. color: #614f4f;
  487. font-size: 24rpx;
  488. }
  489. .seckill-scrol {
  490. height: 90rpx;
  491. width: 100%;
  492. border-bottom: 1rpx solid #ddd;
  493. margin-bottom: 30rpx;
  494. }
  495. .time-nav {
  496. height: 90rpx;
  497. overflow: hidden;
  498. white-space: nowrap;
  499. }
  500. .time-part {
  501. display: inline-block;
  502. width: 20%;
  503. color: #4c4c4c;
  504. position: relative;
  505. height: 90rpx;
  506. }
  507. .part-text {
  508. /* color: #4c4c4c; */
  509. font-size: 30rpx;
  510. font-weight: 600;
  511. text-align: center;
  512. }
  513. .part-text1 {
  514. /* color: #4c4c4c; */
  515. font-size: 24rpx;
  516. text-align: center;
  517. }
  518. .seckill-teambuy {
  519. height: 402rpx;
  520. width: 710rpx;
  521. background: #f7f7f7;
  522. margin: 0 auto;
  523. border-radius: 10rpx;
  524. box-sizing: border-box;
  525. padding: 13rpx 13rpx 20rpx;
  526. margin-bottom: 20rpx;
  527. }
  528. .teambuy-buyimg {
  529. display: block;
  530. width: 454rpx;
  531. height: 242rpx;
  532. background: #8fcd85;
  533. float: left;
  534. }
  535. .teambuy-top {
  536. margin-bottom: 10rpx;
  537. }
  538. .teambuy-top-right {
  539. width: 230rpx;
  540. height: 242rpx;
  541. background: #fff;
  542. float: right
  543. }
  544. .teambuy-buytext {
  545. color: #999999;
  546. font-size: 26rpx;
  547. text-align: center;
  548. padding-top: 30rpx;
  549. padding-bottom: 30rpx;
  550. }
  551. .teambuy-buytext1 {
  552. color: #eab86a;
  553. font-weight: 600;
  554. text-align: center;
  555. font-size: 36rpx;
  556. padding-bottom: 30rpx;
  557. }
  558. .teambuy-buytext2 {
  559. color: #999999;
  560. text-align: center;
  561. font-size: 22rpx;
  562. text-decoration: line-through;
  563. }
  564. .teambuy-bottom-title {
  565. /* height: 75rpx; */
  566. width: 454rpx;
  567. display: -webkit-box;
  568. -webkit-box-orient: vertical;
  569. -webkit-line-clamp: 2;
  570. overflow: hidden;
  571. text-overflow: ellipsis;
  572. font-size: 28rpx;
  573. color: #4c4c4c;
  574. margin-bottom: 15rpx;
  575. }
  576. .teambuy-bottom-shopcar {
  577. display: block;
  578. height: 22rpx;
  579. width: 24rpx;
  580. float: left;
  581. margin-right: 20rpx;
  582. padding-top: 5rpx;
  583. }
  584. .teambuy-bottom-shoptext {
  585. float: left;
  586. color: #999999;
  587. font-size: 22rpx;
  588. }
  589. .teambuy-bottom-left {
  590. float: left;
  591. }
  592. .teambuy-bottom-right {
  593. float: right;
  594. margin-right: 20rpx;
  595. }
  596. .teambuy-bottom-btn {
  597. width: 196rpx;
  598. height: 76rpx;
  599. background: -webkit-linear-gradient(left, #ff5f5d, #ff7f6a, #ff9973);
  600. background: -o-linear-gradient(right, #ff5f5d, #ff7f6a, #ff9973);
  601. background: -moz-linear-gradient(right, #ff5f5d, #ff7f6a, #ff9973);
  602. background: linear-gradient(to right, #ff5f5d, #ff7f6a, #ff9973);
  603. border-radius: 50rpx;
  604. font-size: 31rpx;
  605. color: #fff;
  606. text-align: center;
  607. line-height: 76rpx;
  608. margin-top: 30rpx;
  609. }
  610. .seckill-project {
  611. height: 288rpx;
  612. width: 710rpx;
  613. background: #f7f7f7;
  614. box-sizing: border-box;
  615. padding: 13rpx;
  616. /* padding-right: 0; */
  617. margin: 0 auto;
  618. margin-bottom: 38rpx;
  619. }
  620. .seckill-project-img {
  621. display: block;
  622. height: 264rpx;
  623. width: 265rpx;
  624. background: #fff;
  625. }
  626. .seckill-project-left {
  627. float: left;
  628. }
  629. .seckill-project-right {
  630. float: right;
  631. padding-left: 10rpx;
  632. /* box-sizing: border-box; */
  633. }
  634. .seckill-project-text {
  635. color: #999999;
  636. text-align: center;
  637. font-size: 26rpx;
  638. }
  639. .seckill-project-text1 {
  640. display: -webkit-box;
  641. -webkit-box-orient: vertical;
  642. -webkit-line-clamp: 2;
  643. overflow: hidden;
  644. text-overflow: ellipsis;
  645. width: 400rpx;
  646. height: 75rpx;
  647. font-size: 28rpx;
  648. color: #4c4c4c;
  649. margin-top: 20rpx;
  650. margin-bottom: 20rpx;
  651. }
  652. .seckill-project-text2 {
  653. font-size: 24rpx;
  654. color: #999999;
  655. margin-bottom: 30rpx;
  656. }
  657. .seckill-project-moneypart {
  658. float: left;
  659. }
  660. .seckill-project-btnpart {
  661. float: right;
  662. margin-right: 20rpx;
  663. }
  664. .seckill-moneypart-text {
  665. color: #eab86a;
  666. font-weight: 600;
  667. font-size: 32rpx;
  668. }
  669. .seckill-moneypart-text1 {
  670. color: #999999;
  671. font-size: 32rpx;
  672. font-size: 20rpx;
  673. text-decoration: line-through;
  674. }
  675. .seckill-project-btn {
  676. width: 196rpx;
  677. height: 76rpx;
  678. background: -webkit-linear-gradient(left, #ff5f5d, #ff7f6a, #ff9973);
  679. background: -o-linear-gradient(right, #ff5f5d, #ff7f6a, #ff9973);
  680. background: -moz-linear-gradient(right, #ff5f5d, #ff7f6a, #ff9973);
  681. background: linear-gradient(to right, #ff5f5d, #ff7f6a, #ff9973);
  682. border-radius: 50rpx;
  683. font-size: 31rpx;
  684. color: #fff;
  685. text-align: center;
  686. line-height: 76rpx;
  687. }
  688. .teamshopping {
  689. position: relative;
  690. margin-bottom: 30rpx;
  691. }
  692. .teamshopping-title {
  693. width: 710rpx;
  694. height: 66rpx;
  695. background: -webkit-linear-gradient(left, #fff, #f3f3f3, #e5e5e5);
  696. background: -o-linear-gradient(right, #fff, #f3f3f3, #e5e5e5);
  697. background: -moz-linear-gradient(right, #fff, #f3f3f3, #e5e5e5);
  698. background: linear-gradient(to right, #fff, #f3f3f3, #e5e5e5);
  699. margin: 30rpx auto 30rpx;
  700. border-radius: 5rpx;
  701. box-sizing: border-box;
  702. padding: 0 20rpx;
  703. }
  704. .teamshopping-titleimg {
  705. display:block;
  706. width:220rpx;
  707. height:70rpx;
  708. position:absolute;
  709. left:20rpx;
  710. top:-3rpx;
  711. }
  712. .teamshopping-item {
  713. /* height: 436rpx; */
  714. width: 710rpx;
  715. background: #f7f7f7;
  716. margin: 0 auto 20rpx;
  717. box-sizing: border-box;
  718. padding: 13rpx;
  719. border-radius:10rpx;
  720. position: relative;
  721. }
  722. .teamshopping-img {
  723. display: block;
  724. height: 242rpx;
  725. width: 456rpx;
  726. background: #a6bfd4;
  727. }
  728. .teamshopping-topleft {
  729. float: left;
  730. }
  731. .teamshopping-topright {
  732. position: relative;
  733. float: right;
  734. background: #fff;
  735. width: 230rpx;
  736. height: 242rpx;
  737. }
  738. .teamshopping-name {
  739. display: -webkit-box;
  740. -webkit-box-orient: vertical;
  741. -webkit-line-clamp: 2;
  742. overflow: hidden;
  743. text-overflow: ellipsis;
  744. width: 684rpx;
  745. /* height: 75rpx; */
  746. font-size: 28rpx;
  747. color: #4c4c4c;
  748. margin-top: 20rpx;
  749. margin-bottom: 20rpx;
  750. }
  751. .teamshopping-text {
  752. color: #bbbbbb;
  753. font-size: 24rpx;
  754. float: left;
  755. padding-right: 45rpx;
  756. padding-top: 12.5rpx;
  757. }
  758. .teamshopping-text1 {
  759. color: #4c4c4c;
  760. font-size: 24rpx;
  761. float: left;
  762. /* padding-right: 205rpx; */
  763. padding-top: 12.5rpx;
  764. }
  765. .teamshopping-text2 {
  766. color: #999999;
  767. font-size: 24rpx;
  768. float: right;
  769. padding-top: 12.5rpx;
  770. padding-right: 10rpx;
  771. }
  772. .teamshopping-text3 {
  773. color: #4c4c4c;
  774. font-size: 35rpx;
  775. float: left;
  776. font-weight: 600;
  777. padding-right: 10rpx;
  778. }
  779. .newprojects-title {
  780. width: 710rpx;
  781. height: 66rpx;
  782. background: -webkit-linear-gradient(left, #fff, #f3f3f3, #e5e5e5);
  783. background: -o-linear-gradient(right, #fff, #f3f3f3, #e5e5e5);
  784. background: -moz-linear-gradient(right, #fff, #f3f3f3, #e5e5e5);
  785. background: linear-gradient(to right, #fff, #f3f3f3, #e5e5e5);
  786. margin: 0 auto 30rpx;
  787. border-radius: 5rpx;
  788. box-sizing: border-box;
  789. padding: 0 20rpx;
  790. }
  791. .newprojects-titleimg {
  792. display:block;
  793. width:220rpx;
  794. height:70rpx;
  795. position:absolute;
  796. left:20rpx;
  797. top:6rpx;
  798. }
  799. .circle {
  800. width: 160rpx;
  801. height: 160rpx;
  802. position: absolute;
  803. right: 26rpx;
  804. top: 20rpx;
  805. border-radius: 50%;
  806. background: #ff7655;
  807. /* background: -webkit-linear-gradient(#ff7555, #ff865a, #ff9f62);
  808. background: -o-linear-gradient(#ff7555, #ff865a ,#ff9f62);
  809. background: -moz-linear-gradient(#ff7555, #ff865a, #ff9f62);
  810. background: linear-gradient(#ff7555, #ff865a, #ff9f62); */
  811. overflow: hidden;
  812. }
  813. .clip_left,.clip_right{
  814. width:160rpx;
  815. height:160rpx;
  816. position: absolute;
  817. top: 0rpx;
  818. left: 0rpx;
  819. }
  820. .circle_left, .circle_right{
  821. width:160rpx;
  822. height:160rpx;
  823. position: absolute;
  824. border-radius: 50%;
  825. top: 0rpx;
  826. left: 0rpx;
  827. }
  828. .mask {
  829. width: 120rpx;
  830. height: 120rpx;
  831. border-radius: 50%;
  832. left: 21rpx;
  833. top: 21rpx;
  834. background: #FFF;
  835. position: absolute;
  836. text-align: center;
  837. line-height: 120rpx;
  838. font-size: 28rpx;
  839. }
  840. .circle_right,.clip_right {
  841. clip:rect(0,auto,auto,80rpx);
  842. }
  843. .circle_left , .clip_left{
  844. clip:rect(0,80rpx,auto,0);
  845. }
  846. .circle_left{
  847. background: #eee;
  848. }
  849. .circle_right{
  850. background: #eee;
  851. }
  852. .end{
  853. font-size: 25rpx;
  854. color: #bbbbbb;
  855. /* float: right; */
  856. /* margin-top: 27rpx; */
  857. /* margin-right: 65rpx; */
  858. position: absolute;
  859. right:65rpx;
  860. top:193rpx;
  861. }
  862. .project-no {
  863. position: absolute;
  864. left: 13rpx;
  865. top: 13rpx;
  866. background: -webkit-linear-gradient(left, #2fbd2d, #56cd33, #7cde38);
  867. background: -o-linear-gradient(right, #2fbd2d, #56cd33, #7cde38);
  868. background: -moz-linear-gradient(right, #2fbd2d, #56cd33, #7cde38);
  869. background: linear-gradient(to right, #2fbd2d, #56cd33, #7cde38);
  870. z-index: 10;
  871. font-size: 25rpx;
  872. color: #fff;
  873. height: 35rpx;
  874. width: 96rpx;
  875. text-align: center;
  876. line-height: 35rpx;
  877. }
  878. .project-jizhu {
  879. position: absolute;
  880. left: 13rpx;
  881. top: 13rpx;
  882. background: -webkit-linear-gradient(left, #ff5d5d, #ff7e69, #ff9a73);
  883. background: -o-linear-gradient(right, #ff5d5d, #ff7e69, #ff9a73);
  884. background: -moz-linear-gradient(right, #ff5d5d, #ff7e69, #ff9a73);
  885. background: linear-gradient(to right, #ff5d5d, #ff7e69, #ff9a73);
  886. z-index: 10;
  887. font-size: 25rpx;
  888. color: #fff;
  889. height: 35rpx;
  890. width: 96rpx;
  891. text-align: center;
  892. line-height: 35rpx;
  893. }
  894. .project-chenggong {
  895. position: absolute;
  896. left: 13rpx;
  897. top: 13rpx;
  898. background: -webkit-linear-gradient(left, #845f44, #a4835d, #c2a374);
  899. background: -o-linear-gradient(right, #845f44, #a4835d, #c2a374);
  900. background: -moz-linear-gradient(right, #845f44, #a4835d, #c2a374);
  901. background: linear-gradient(to right, #845f44, #a4835d, #c2a374);
  902. z-index: 10;
  903. font-size: 25rpx;
  904. color: #fff;
  905. height: 35rpx;
  906. width: 96rpx;
  907. text-align: center;
  908. line-height: 35rpx;
  909. }
  910. .active {
  911. color: #eab86a;
  912. /* border-bottom: 1rpx solid #eab86a; */
  913. /* border-width: 32rpx; */
  914. }
  915. .part-bottom {
  916. position:absolute;
  917. /* width:50%; */
  918. height:6rpx;
  919. width:32rpx;
  920. margin: 10rpx auto 0;
  921. background:#eab86a;
  922. left: 50%;
  923. bottom: 0;
  924. transform: translate(-50%);
  925. }
  926. .othercolor {
  927. color:#eab86a;
  928. background:#fff;
  929. font-weight:600;
  930. border:1rpx solid #cccccc;
  931. }
  932. .othercolor1 {
  933. color:#c68987;
  934. background:#fff;
  935. border:1rpx solid #cccccc;
  936. }
  937. .othercolor2 {
  938. color: #fff;
  939. background:-webkit-linear-gradient(left, #d8dfe5, #aab6c2);
  940. background:linear-gradient(to right, #d8dfe5, #aab6c2);
  941. border:1rpx solid #cccccc;
  942. }
  943. .project-miaosha {
  944. width: 60rpx;
  945. height: 28rpx;
  946. display: inline-block;
  947. float: left;
  948. padding-top: 95rpx;
  949. padding-right: 10rpx;
  950. }
  951. .project-stop {
  952. height: 38rpx;
  953. width: 258rpx;
  954. background: #ffefe4;
  955. color: #ff9434;
  956. position: absolute;
  957. right: 10rpx;
  958. bottom: 13rpx;
  959. font-size: 20rpx;
  960. text-align: center;
  961. line-height: 38rpx;
  962. }
  963. .seckill-no-img {
  964. display: block;
  965. width: 710rpx;
  966. height: 288rpx;
  967. margin: 30rpx auto 40rpx;
  968. }
  969. .seckill-no-text {
  970. text-align: center;
  971. color: #999;
  972. font-size: 24rpx;
  973. margin-bottom: 60rpx;
  974. }
  975. .project-video{
  976. width:100%;
  977. position: relative;
  978. }
  979. .video-box{}
  980. .video-box .project-title{
  981. font-size: 18px;
  982. padding: 10px 15px;
  983. line-height: normal;
  984. height: auto;
  985. }
  986. .video-box .project-price{
  987. float: none !important;
  988. padding: 0 15px;
  989. font-size: 18px;
  990. }
  991. .video-box .project-count{
  992. padding: 5px 15px;
  993. }
  994. .video-buybtn{
  995. position: absolute;
  996. bottom: 15px;
  997. right: 20px;
  998. padding: 0px 20px;
  999. background: #eab86a;
  1000. color: #FFF;
  1001. border-radius: 45px;
  1002. font-size: 14px;
  1003. }
  1004. .playImg{
  1005. position: absolute;
  1006. top: 50%;
  1007. left: 50%;
  1008. transform: translate(-50%,-50%);
  1009. width: 94rpx;
  1010. height: 94rpx;
  1011. }