_indexPage.scss 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590
  1. @charset "UTF-8";
  2. .indexWrapper {
  3. width: 100%;
  4. background-color: #efdbc0;
  5. opacity: 0;
  6. visibility: hidden;
  7. img {
  8. image-rendering: auto;
  9. }
  10. .bg {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 100%;
  16. background: url(https://d1xzlli46wohoc.cloudfront.net/images/indexPage/bg.png) no-repeat 37% 1%/ 470px auto;
  17. transition: 0.3s;
  18. }
  19. .intro {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. width: 100%;
  24. height: 100%;
  25. text-align: center;
  26. overflow: hidden;
  27. &__container {
  28. position: absolute;
  29. top: 0;
  30. left: 0;
  31. width: 100%;
  32. height: 789px;
  33. transform-origin: center top;
  34. }
  35. &__logo {
  36. opacity: 0;
  37. visibility: hidden;
  38. position: absolute;
  39. top: 35px;
  40. left: 50%;
  41. transform: translateX(-50%);
  42. width: 210px;
  43. height: auto;
  44. z-index: 3;
  45. img {
  46. width: 100%;
  47. height: auto;
  48. image-rendering: pixelated;
  49. image-rendering: -webkit-optimize-contrast;
  50. }
  51. }
  52. &__title {
  53. opacity: 0;
  54. visibility: hidden;
  55. position: absolute;
  56. top: 125px;
  57. left: 50%;
  58. transform: translateX(-50%);
  59. display: inline-block;
  60. width: 335px;
  61. height: 168px;
  62. z-index: 3;
  63. img {
  64. width: 100%;
  65. height: auto;
  66. image-rendering: pixelated;
  67. }
  68. }
  69. &__tip {
  70. opacity: 0;
  71. visibility: hidden;
  72. position: absolute;
  73. top: 50%;
  74. left: 50%;
  75. transform: translate(-50%, -50%);
  76. display: inline-block;
  77. width: 165px;
  78. height: 109px;
  79. z-index: 3;
  80. img {
  81. width: 100%;
  82. height: auto;
  83. image-rendering: pixelated;
  84. image-rendering: -webkit-optimize-contrast;
  85. }
  86. }
  87. &__protect {
  88. position: absolute;
  89. left: 50%;
  90. bottom: 15px;
  91. transform: translateX(-50%);
  92. width: 100%;
  93. text-align: center;
  94. font-size: 14px;
  95. letter-spacing: 1px;
  96. color: #fff;
  97. z-index: 3;
  98. }
  99. &__overlay {
  100. // display: none;
  101. position: fixed;
  102. top: 0;
  103. bottom: 0;
  104. left: 0;
  105. right: 0;
  106. background-color: rgba(#000, 0.9);
  107. z-index: 2;
  108. }
  109. &__text {
  110. display: flex;
  111. flex-direction: column;
  112. align-items: center;
  113. justify-content: flex-start;
  114. position: absolute;
  115. top: 110px;
  116. left: 50%;
  117. transform: translateX(-50%);
  118. width: 307px;
  119. height: auto;
  120. img {
  121. opacity: 0;
  122. visibility: hidden;
  123. height: auto;
  124. image-rendering: pixelated;
  125. image-rendering: -webkit-optimize-contrast;
  126. transform: translateY(10px);
  127. &:nth-child(1) {
  128. width: 210px;
  129. margin-bottom: 5px;
  130. }
  131. &:nth-child(2) {
  132. width: 35px;
  133. }
  134. &:nth-child(3) {
  135. width: 315px;
  136. margin-bottom: 5px;
  137. }
  138. &:nth-child(4) {
  139. width: 315px;
  140. margin-bottom: 5px;
  141. }
  142. &:nth-child(5) {
  143. width: 315px;
  144. }
  145. }
  146. }
  147. &__kv {
  148. // opacity: 0;
  149. // visibility: hidden;
  150. position: absolute;
  151. top: 320px;
  152. width: 100%;
  153. height: auto;
  154. transform-origin: center center;
  155. img {
  156. width: 100%;
  157. height: auto;
  158. }
  159. }
  160. &__kol {
  161. position: absolute;
  162. top: 0;
  163. left: 52%;
  164. transform: translateX(-50%);
  165. width: 100%;
  166. height: 340px;
  167. transform-origin: center bottom;
  168. pointer-events: none;
  169. z-index: 1;
  170. img {
  171. position: absolute;
  172. bottom: 0;
  173. left: 50%;
  174. transform: translateX(-50%);
  175. width: auto;
  176. height: 100%;
  177. image-rendering: pixelated;
  178. image-rendering: -webkit-optimize-contrast;
  179. }
  180. }
  181. &__table {
  182. position: absolute;
  183. top: 331px;
  184. width: 100%;
  185. height: 180px;
  186. img {
  187. position: absolute;
  188. width: auto;
  189. height: 100%;
  190. top: 0;
  191. left: 79%;
  192. transform: translateX(-50%);
  193. }
  194. }
  195. &__skip {
  196. opacity: 0;
  197. visibility: hidden;
  198. position: absolute;
  199. left: 50%;
  200. top: 354px;
  201. width: 190px;
  202. height: auto;
  203. transform: translateX(-50%);
  204. img {
  205. width: 100%;
  206. height: auto;
  207. image-rendering: pixelated;
  208. image-rendering: -webkit-optimize-contrast;
  209. }
  210. }
  211. &__bottom {
  212. position: absolute;
  213. width: 200%;
  214. height: 100%;
  215. top: 821px;
  216. left: 50%;
  217. transform: translateX(-50%);
  218. background-color: #efdbc0;
  219. }
  220. &__volume {
  221. position: absolute;
  222. bottom: 10px;
  223. right: 10px;
  224. width: 21px;
  225. height: 26px;
  226. background: url(https://d1xzlli46wohoc.cloudfront.net/images/indexPage/intro-volume-mute.png) no-repeat center center/contain;
  227. z-index: 2;
  228. &.active {
  229. background: url(https://d1xzlli46wohoc.cloudfront.net/images/indexPage/intro-volume-open.png) no-repeat center center/contain;
  230. }
  231. }
  232. }
  233. .index {
  234. display: none;
  235. opacity: 0;
  236. visibility: hidden;
  237. position: absolute;
  238. top: 0;
  239. left: 0;
  240. width: 100%;
  241. height: 100%;
  242. overflow: hidden;
  243. &__container {
  244. opacity: 0;
  245. visibility: hidden;
  246. position: absolute;
  247. top: 0;
  248. left: 0;
  249. width: 100%;
  250. height: 100%;
  251. overflow: hidden;
  252. transform-origin: center top;
  253. }
  254. &__outer {
  255. position: absolute;
  256. top: 0;
  257. left: 0;
  258. width: 100%;
  259. height: 800px;
  260. }
  261. &__title {
  262. opacity: 0;
  263. visibility: hidden;
  264. position: absolute;
  265. top: 70px;
  266. left: 51.5%;
  267. transform: translateX(-50%);
  268. transform-origin: center center;
  269. display: inline-block;
  270. width: auto;
  271. height: 19vh;
  272. z-index: 3;
  273. img {
  274. width: auto;
  275. height: 100%;
  276. image-rendering: auto;
  277. }
  278. }
  279. &__kv {
  280. position: absolute;
  281. top: 0;
  282. left: 0;
  283. width: 100%;
  284. height: 100%;
  285. overflow: auto
  286. }
  287. &__slides {
  288. position: absolute;
  289. top: 0;
  290. left: 0;
  291. height: 640px;
  292. overflow: hidden;
  293. width: auto;
  294. display: flex;
  295. align-items: flex-start;
  296. justify-content: flex-start;
  297. padding-top: 240px;
  298. }
  299. &__bg {
  300. position: absolute;
  301. top: 0;
  302. left: 0;
  303. width: 100%;
  304. height: 100%;
  305. overflow: hidden;
  306. &__img {
  307. position: absolute;
  308. top: 0;
  309. left: 0;
  310. width: 100%;
  311. height: 100%;
  312. background: url(https://d1xzlli46wohoc.cloudfront.net/images/indexPage/bg.jpg) no-repeat;
  313. background-position: 34% top;
  314. background-size: 120%;
  315. image-rendering: -webkit-optimize-contrast;
  316. }
  317. }
  318. &__slide {
  319. position: relative;
  320. font-size: 0;
  321. height: 300px;
  322. z-index: 2;
  323. // border: 1px solid blue;
  324. a {
  325. position: relative;
  326. display: block;
  327. width: 100%;
  328. height: 100%;
  329. }
  330. img {
  331. height: 100%;
  332. width: auto;
  333. image-rendering: pixelated;
  334. image-rendering: -webkit-optimize-contrast;
  335. font-size: 0;
  336. line-height: 0;
  337. }
  338. &[data-kol='Ralf'] {
  339. .index__light {
  340. left: 59%;
  341. }
  342. }
  343. &[data-kol='Drangadrang'] {
  344. .index__light {
  345. left: 36%;
  346. }
  347. }
  348. &-commute_Chang,
  349. &-commute_Li,
  350. &-commute_He,
  351. &-Hao,
  352. &-Yang {
  353. position: absolute;
  354. top: 0;
  355. height: 100%;
  356. // border: 1px solid green;
  357. }
  358. &-Hao {
  359. left: 35%;
  360. width: 23.5%;
  361. .index__light {
  362. left: 67%;
  363. }
  364. }
  365. &-Yang {
  366. left: 59%;
  367. width: 33.5%;
  368. }
  369. &-commute_Chang {
  370. left: 7%;
  371. width: 24%;
  372. .index__light {
  373. left: 64%;
  374. }
  375. }
  376. &-commute_Li {
  377. left: 27.5%;
  378. width: 17.5%;
  379. }
  380. &-commute_He {
  381. left: 45%;
  382. width: 26%;
  383. }
  384. }
  385. &__light {
  386. position: absolute;
  387. bottom: -9vh;
  388. left: 50%;
  389. transform: translateX(-50%);
  390. width: 65vh;
  391. height: 64vh;
  392. background: url(https://d1xzlli46wohoc.cloudfront.net/images/indexPage/index-light.png) no-repeat center center/100% auto;
  393. opacity: 0;
  394. visibility: hidden;
  395. }
  396. &__table {
  397. position: absolute;
  398. top: 471px;
  399. left: 0;
  400. width: 100%;
  401. height: 200px;
  402. background: url(https://d1xzlli46wohoc.cloudfront.net/images/indexPage/index-table.png) repeat-x left top;
  403. background-size: auto 100%;
  404. z-index: 1;
  405. }
  406. &__dishes {
  407. position: sticky;
  408. top: 540px;
  409. left: 0;
  410. width: 100%;
  411. height: 100px;
  412. z-index: 2;
  413. }
  414. &__dish {
  415. opacity: 0;
  416. visibility: hidden;
  417. position: absolute;
  418. top: 0;
  419. left: 0;
  420. width: 100%;
  421. height: 100%;
  422. text-align: center;
  423. img {
  424. width: auto;
  425. height: 100%;
  426. display: inline-block;
  427. image-rendering: pixelated;
  428. image-rendering: -webkit-optimize-contrast;
  429. }
  430. &[data-dish='ordinary'] {
  431. top: 10px;
  432. height: 45px;
  433. }
  434. }
  435. &__bottom {
  436. position: absolute;
  437. width: 100%;
  438. height: 100%;
  439. top: 630px;
  440. left: 0;
  441. background-color: #EDDABF;
  442. }
  443. }
  444. .modal-promo {
  445. button.close {
  446. position: absolute;
  447. top: 5px;
  448. right: 5px;
  449. width: 30px;
  450. height: 30px;
  451. border-radius: 50%;
  452. background: $blue;
  453. opacity: 1;
  454. z-index: 1;
  455. span {
  456. color: #fff;
  457. text-shadow: none;
  458. font-weight: 300;
  459. font-size: 23px;
  460. line-height: 1;
  461. position: relative;
  462. top: 2px;
  463. vertical-align: text-top;
  464. }
  465. }
  466. .modal{
  467. &-dialog {
  468. margin: 0 1.5rem;
  469. }
  470. &-content {
  471. border-radius: 10px;
  472. }
  473. &-body {
  474. padding: 0;
  475. img {
  476. width: 100%;
  477. height: auto;
  478. image-rendering: pixelated;
  479. image-rendering: -webkit-optimize-contrast;
  480. }
  481. }
  482. }
  483. }
  484. }
  485. .modal-open .modal-promo {
  486. overflow: hidden;
  487. }
  488. @media (min-height: 0px) {
  489. .indexWrapper {
  490. .index {
  491. &__title {
  492. top: calc(55px + 3vh);
  493. height: 17vh;
  494. }
  495. &__bottom {
  496. top: 90.5vh;
  497. z-index: 1;
  498. }
  499. &__table {
  500. top: 59.7vh;
  501. height: 31.3vh;
  502. }
  503. &__dishes {
  504. top: 70.5vh;
  505. height: 14vh;
  506. }
  507. &__slides {
  508. height: 100%;
  509. padding-top: 31.6vh;
  510. }
  511. &__slide {
  512. height: 37vh
  513. }
  514. }
  515. }
  516. }