home.wxss 20 KB

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