main.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. .zskk-title {
  2. font-size: 20px;
  3. font-family: "微软雅黑";
  4. font-weight: 600;
  5. color: #323232;
  6. letter-spacing: 2px;
  7. }
  8. .zskk-box .zskk-advertising {
  9. height: 380px;
  10. }
  11. .zskk-box .zskk-advertising .swiper-container {
  12. height: 380px;
  13. }
  14. .zskk-box .zskk-advertising .swiper-container img {
  15. width: 100%;
  16. height: 100%;
  17. }
  18. .zskk-box .zskk-subscribe {
  19. height: 180px;
  20. display: flex;
  21. align-items: center;
  22. justify-content: center;
  23. }
  24. .zskk-box .zskk-subscribe a {
  25. margin-right: 15px;
  26. height: 66%;
  27. }
  28. .zskk-box .zskk-subscribe img {
  29. height: 100%;
  30. }
  31. .zskk-box .zskk-specialist {
  32. height: 390px;
  33. display: flex;
  34. justify-content: center;
  35. position: relative;
  36. background: #fff;
  37. }
  38. .zskk-box .zskk-specialist::after {
  39. content: "";
  40. background: url("/images/specialistBg.jpg") no-repeat right top -40px;
  41. opacity: 0.15;
  42. top: 0;
  43. left: 0;
  44. bottom: 0;
  45. right: 0;
  46. position: absolute;
  47. z-index: 1;
  48. }
  49. .zskk-box .zskk-specialist .zskk-listData {
  50. height: 100%;
  51. width: 900px;
  52. position: absolute;
  53. z-index: 2;
  54. }
  55. .zskk-box .zskk-specialist .zskk-listData .zskk-title {
  56. height: 50px;
  57. width: 100%;
  58. display: flex;
  59. justify-content: space-between;
  60. }
  61. .zskk-box .zskk-specialist .zskk-listData .zskk-title .zskk-select,
  62. .zskk-box .zskk-specialist .zskk-listData .zskk-title .zskk-info {
  63. height: 50px;
  64. display: flex;
  65. justify-content: center;
  66. align-items: center;
  67. background: none;
  68. }
  69. .zskk-box .zskk-specialist .zskk-listData .zskk-title .zskk-select {
  70. font-size: 12px;
  71. color: #666666;
  72. }
  73. .zskk-box .zskk-specialist .zskk-listData .zskk-title .zskk-info {
  74. font-size: 18px;
  75. color: #353334;
  76. }
  77. .zskk-box .zskk-specialist .zskk-listData .zskk-list {
  78. height: 250px;
  79. width: 100%;
  80. display: flex;
  81. justify-content: space-between;
  82. }
  83. .zskk-box .zskk-specialist .zskk-listData .zskk-list .zskk-oneInfo {
  84. height: 280px;
  85. width: 210px;
  86. display: flex;
  87. flex-direction: column;
  88. box-sizing: border-box;
  89. padding: 10px;
  90. background: #fff;
  91. border-radius: 4px;
  92. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  93. }
  94. .zskk-box .zskk-specialist .zskk-listData .zskk-list .zskk-oneInfo img {
  95. height: 184px;
  96. width: 190px;
  97. border-radius: 50%;
  98. }
  99. .zskk-box .zskk-specialist .zskk-listData .zskk-list .zskk-oneInfo .zskk-name {
  100. padding: 10px 0 0 0;
  101. display: flex;
  102. justify-content: center;
  103. font-size: 18px;
  104. font-weight: 600;
  105. }
  106. .zskk-box
  107. .zskk-specialist
  108. .zskk-listData
  109. .zskk-list
  110. .zskk-oneInfo
  111. .zskk-position {
  112. padding: 10px 0;
  113. display: flex;
  114. justify-content: center;
  115. color: #9a9a9a;
  116. }
  117. .zskk-box .zskk-setmeal {
  118. height: 650px;
  119. background: #fff;
  120. margin-top: 20px;
  121. display: flex;
  122. justify-content: center;
  123. }
  124. .zskk-box .zskk-setmeal .zskk-list-not {
  125. height: 500px;
  126. font-size: 30px;
  127. color: #666;
  128. display: flex;
  129. align-items: center;
  130. justify-content: center;
  131. }
  132. .zskk-box .zskk-setmeal .zskk-content {
  133. height: 100%;
  134. width: 900px;
  135. }
  136. .zskk-box .zskk-setmeal .zskk-content .zskk-title {
  137. height: 50px;
  138. width: 900px;
  139. display: flex;
  140. }
  141. .zskk-box .zskk-setmeal .zskk-content .zskk-title .zskk-info {
  142. height: 50px;
  143. display: flex;
  144. justify-content: center;
  145. align-items: center;
  146. font-size: 18px;
  147. padding-right: 15px;
  148. }
  149. .zskk-box .zskk-setmeal .zskk-content .zskk-title ul {
  150. display: flex;
  151. }
  152. .zskk-box .zskk-setmeal .zskk-content .zskk-title ul li {
  153. list-style: none;
  154. font-size: 12px;
  155. color: #666666;
  156. padding: 0 15px;
  157. cursor: pointer;
  158. line-height: 55px;
  159. letter-spacing: 0px;
  160. }
  161. .zskk-box .zskk-setmeal .zskk-content .zskk-title ul .zskk-active {
  162. color: #ed305b;
  163. }
  164. .zskk-box .zskk-setmeal .zskk-content .zskk-list {
  165. width: 100%;
  166. display: flex;
  167. flex-wrap: wrap;
  168. }
  169. .zskk-box .zskk-setmeal .zskk-content .zskk-list .zskk-oneInfo {
  170. height: 260px;
  171. width: 200px;
  172. display: flex;
  173. flex-direction: column;
  174. background: #fff;
  175. border-radius: 4px;
  176. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  177. margin-bottom: 40px;
  178. margin-right: 33px;
  179. overflow: hidden;
  180. }
  181. .zskk-box
  182. .zskk-setmeal
  183. .zskk-content
  184. .zskk-list
  185. .zskk-oneInfo:nth-child(4n + 4) {
  186. margin-right: 0px;
  187. }
  188. .zskk-box .zskk-setmeal .zskk-content .zskk-list .zskk-oneInfo img {
  189. height: 200px;
  190. width: 200px;
  191. }
  192. .zskk-box .zskk-setmeal .zskk-content .zskk-list .zskk-oneInfo .zskk-name {
  193. font-size: 12px;
  194. width: 60%;
  195. padding: 5px 0;
  196. color: #676767;
  197. font-weight: 600px;
  198. box-sizing: border-box;
  199. padding: 5px 10px;
  200. }
  201. .zskk-box .zskk-setmeal .zskk-content .zskk-list .zskk-oneInfo .zskk-price {
  202. display: flex;
  203. justify-content: space-between;
  204. box-sizing: border-box;
  205. padding: 0 10px;
  206. }
  207. .zskk-box
  208. .zskk-setmeal
  209. .zskk-content
  210. .zskk-list
  211. .zskk-oneInfo
  212. .zskk-price
  213. .zskk-prices {
  214. display: flex;
  215. justify-content: space-between;
  216. }
  217. .zskk-box
  218. .zskk-setmeal
  219. .zskk-content
  220. .zskk-list
  221. .zskk-oneInfo
  222. .zskk-price
  223. .zskk-prices
  224. .zskk-now-prices {
  225. color: #e4204d;
  226. font-size: 14px;
  227. display: flex;
  228. align-items: flex-end;
  229. }
  230. .zskk-box
  231. .zskk-setmeal
  232. .zskk-content
  233. .zskk-list
  234. .zskk-oneInfo
  235. .zskk-price
  236. .zskk-prices
  237. .zskk-original-prices {
  238. color: #bdbdbd;
  239. font-size: 12px;
  240. display: flex;
  241. align-items: flex-end;
  242. font-style: inherit;
  243. text-decoration: line-through;
  244. }
  245. .zskk-box
  246. .zskk-setmeal
  247. .zskk-content
  248. .zskk-list
  249. .zskk-oneInfo
  250. .zskk-price
  251. .zskk-discount
  252. span {
  253. background: #cde7dc;
  254. font-size: 12px;
  255. color: #5eb491;
  256. padding: 0 8px;
  257. border-radius: 10px;
  258. }
  259. .zskk-box .zskk-service {
  260. height: 400px;
  261. margin: 20px 0;
  262. display: flex;
  263. position: relative;
  264. justify-content: center;
  265. }
  266. .zskk-box .zskk-service::after {
  267. content: "";
  268. background: url("/images/serviceBg.jpg") no-repeat -10px;
  269. background-size: 100% 100%;
  270. opacity: 0.1;
  271. top: 0;
  272. left: 0;
  273. bottom: 0;
  274. right: 0;
  275. position: absolute;
  276. z-index: 1;
  277. }
  278. .zskk-box .zskk-service .swiper-slide {
  279. position: relative;
  280. /*width: 450px !important;*/
  281. height: 300px;
  282. }
  283. .zskk-box .zskk-service .swiper-slide .title {
  284. position: absolute;
  285. bottom: 0px;
  286. height: 50px;
  287. width: 100%;
  288. background: rgba(0, 0, 0, 0.6);
  289. border-radius: 0 0 5px 5px;
  290. color: #fff;
  291. font-size: 15px;
  292. line-height: 50px;
  293. display: flex;
  294. justify-content: center;
  295. align-items: center;
  296. }
  297. .zskk-box .zskk-service .swiper-slide .zskk-bg-0{
  298. background:rgba(227,161,124,.8)
  299. }
  300. .zskk-box .zskk-service .swiper-slide .zskk-bg-1{
  301. background:rgba(171,76,56,.8)
  302. }
  303. .zskk-box .zskk-service .swiper-slide .zskk-bg-2{
  304. background:rgba(178,219,201,.8)
  305. }
  306. .zskk-box .zskk-service .swiper-slide .zskk-bg-3{
  307. background:rgba(185,214,220,.8)
  308. }
  309. .zskk-box .zskk-service .swiper-slide .zskk-bg-4{
  310. background:rgba(247,232,239,.8)
  311. }
  312. .zskk-box .zskk-service .swiper-slide .zskk-bg-5{
  313. background:rgba(233,236,207,.8)
  314. }
  315. .zskk-box .zskk-service .zskk-content {
  316. height: 100%;
  317. width: 900px;
  318. position: absolute;
  319. z-index: 2;
  320. }
  321. .zskk-box .zskk-service .zskk-content .zskk-title {
  322. height: 50px;
  323. width: 900px;
  324. display: flex;
  325. align-items: center;
  326. }
  327. .zskk-box .zskk-service .zskk-content .zskk-flowInfo {
  328. overflow: hidden;
  329. }
  330. .zskk-box .zskk-service .zskk-content .zskk-flowInfo .swiper-service {
  331. }
  332. .zskk-box .zskk-service .zskk-content img {
  333. height: 100%;
  334. width: 100%;
  335. border-radius: 5px;
  336. box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  337. }
  338. .zskk-box .zskk-newsinfo {
  339. height: 400px;
  340. background: #fff;
  341. margin-top: 0px;
  342. display: flex;
  343. justify-content: center;
  344. }
  345. .zskk-box .zskk-newsinfo .zskk-content {
  346. height: 100%;
  347. width: 900px;
  348. }
  349. .zskk-box .zskk-newsinfo .zskk-content .zskk-title {
  350. height: 50px;
  351. width: 900px;
  352. display: flex;
  353. }
  354. .zskk-box .zskk-newsinfo .zskk-content .zskk-title .zskk-info {
  355. height: 50px;
  356. display: flex;
  357. justify-content: center;
  358. align-items: center;
  359. }
  360. .zskk-box .zskk-newsinfo .zskk-content .zskk-title .zskk-infonav {
  361. display: flex;
  362. margin-left: 15px;
  363. }
  364. .zskk-box .zskk-newsinfo .zskk-content .zskk-title .zskk-infonav li {
  365. list-style: none;
  366. }
  367. .zskk-box .zskk-newsinfo .zskk-content .zskk-title .zskk-infonav li a {
  368. color: #666666;
  369. font-size: 12px;
  370. padding: 0 15px;
  371. cursor: pointer;
  372. line-height: 55px;
  373. letter-spacing: 0px;
  374. }
  375. .zskk-box
  376. .zskk-newsinfo
  377. .zskk-content
  378. .zskk-title
  379. .zskk-infonav
  380. .zskk-active
  381. a {
  382. color: #ed305b;
  383. }
  384. .zskk-box .zskk-newsinfo .zskk-content .zskk-news {
  385. height: 325px;
  386. display: flex;
  387. justify-content: space-between;
  388. font-size: 18px;
  389. }
  390. .zskk-box .zskk-newsinfo .zskk-content .zskk-news .zskk-newPicture {
  391. width: 490px;
  392. margin-left: 6px;
  393. position: relative;
  394. }
  395. .zskk-box
  396. .zskk-newsinfo
  397. .zskk-content
  398. .zskk-news
  399. .zskk-newPicture
  400. .zskk-newsicon {
  401. position: absolute;
  402. left: -6px;
  403. }
  404. .zskk-box .zskk-newsinfo .zskk-content .zskk-news .zskk-newPicture .zskk-hide {
  405. display: none;
  406. }
  407. .zskk-box
  408. .zskk-newsinfo
  409. .zskk-content
  410. .zskk-news
  411. .zskk-newPicture
  412. .zskk-newsimg {
  413. width: 100%;
  414. height: 324px;
  415. border-radius: 5px;
  416. }
  417. .zskk-box .zskk-newsinfo .zskk-content .zskk-newsInfo {
  418. width: 410px;
  419. }
  420. .zskk-box .zskk-newsinfo .zskk-content .zskk-newsInfo ul {
  421. margin-left: 20px;
  422. height: calc(100% - 24px);
  423. }
  424. .zskk-box .zskk-newsinfo .zskk-content .zskk-newsInfo li {
  425. list-style: none;
  426. font-size: 14px;
  427. overflow: hidden;
  428. text-overflow: ellipsis;
  429. white-space: nowrap;
  430. height: calc(100% / 5);
  431. padding-top: 10px;
  432. box-sizing: border-box;
  433. color: #666666;
  434. }
  435. .zskk-box .zskk-newsinfo .zskk-content .zskk-newsInfo .zskk-active {
  436. color: #59b38d;
  437. }
  438. .zskk-box .zskk-newsinfo .zskk-content .zskk-newsInfo .zskk-getAdd {
  439. text-decoration: underline;
  440. cursor: pointer;
  441. margin-left: 20px;
  442. }
  443. .zskk-box .zskk-newsinfo .zskk-content .zskk-newsInfo .zskk-getAdd a {
  444. color: #666666;
  445. font-size: 14px;
  446. }
  447. .zskk-box .zskk-flow {
  448. height: 200px;
  449. background: #fff;
  450. margin-top: 20px;
  451. display: flex;
  452. justify-content: center;
  453. }
  454. .zskk-box .zskk-flow .zskk-content {
  455. height: 100%;
  456. width: 900px;
  457. }
  458. .zskk-box .zskk-flow .zskk-content .zskk-title {
  459. height: 50px;
  460. width: 900px;
  461. display: flex;
  462. }
  463. .zskk-box .zskk-flow .zskk-content .zskk-title .zskk-info {
  464. height: 50px;
  465. display: flex;
  466. justify-content: center;
  467. align-items: center;
  468. font-size: 18px;
  469. }
  470. .zskk-box .zskk-flow .zskk-content .zskk-flowInfo {
  471. display: flex;
  472. }
  473. .zskk-box .zskk-flow .zskk-content .zskk-flowInfo .zskk-oneInfo {
  474. display: flex;
  475. flex-direction: column;
  476. align-items: center;
  477. width: 105px;
  478. }
  479. .zskk-box .zskk-flow .zskk-content .zskk-flowInfo .zskk-oneInfo span {
  480. color: #999999;
  481. }