/* 隐藏考试按钮 */ .state-modalPage-course-detail .course-test__btn { display: none; } /* Up arrow */ @keyframes bounce { from, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); } 70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -5px, 0); } 90% { transform: translate3d(0, -2px, 0); } } .bounce { animation-name: bounce; transform-origin: center bottom; animation-iteration-count: infinite; } /* Up arrow */ /* firework animates */ @keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { animation-name: zoomIn; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } .firework { background-image: url(static/assets/images/year-end-report/firework.png); background-repeat: no-repeat; background-size: cover; position: absolute; z-index: 2; pointer-events: none; } /* firework animates */ /* 小人摆动 */ @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } to { transform: rotate3d(0, 0, 1, 0deg); } } .swing { transform-origin: bottom center; animation-name: swing; animation: swing 2s 4s both infinite; } .swing1 { transform-origin: bottom center; animation-name: swing; animation: swing 2s 3s both infinite } /* 小人摆动 */ .swiper-container{width: 100%;height: 100%;} .swiper-slide-content{width: 100%;height: 100%;background-size: cover;} .next { position: absolute; bottom: 2rem; left:0; right:0; z-index: 99; } .next a { width: 1.667rem; height: 1.667rem; } .share { position: absolute; bottom: 2rem; left:0; right:0; z-index: 99; } /* music animate */ @keyframes rotate{ from{transform: rotate(0deg)} to{transform: rotate(359deg)} } .rotate { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -webkit-animation: rotate 3s linear infinite; -moz-animation: rotate 3s linear infinite; -o-animation: rotate 3s linear infinite; animation: rotate 3s linear infinite; } .music { background-image: url(static/assets/images/year-end-report/music-on.png); background-size: cover; width: 2rem; height: 2rem; position: absolute; top: 2rem; right: 2rem; z-index: 999; } .music.off { background-image: url(static/assets/images/year-end-report/music-off.png); opacity: 0.6; } /*******************************/ /********************************/ @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } .flipInY { backface-visibility: visible !important; animation-name: flipInY; } /********************************/ /*************************************/ @keyframes jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } } .jackInTheBox { animation-name: jackInTheBox; } /*************************************/ .slide-page-outer { width: 100%; height: 100%; padding-top: 2rem; background:#434343; background-size: cover; background-repeat: no-repeat; padding-top: 4rem; text-align: left; letter-spacing: 0.18px; background: transparent; } .slide-page-inner { padding: 0 2rem; position: absolute; left: 0; right: 0; z-index: 1; } .slide-page-inner p { font-size: 1.42rem; color: #FFFFFF; line-height: 3rem; margin: 1.5rem 0; text-shadow: 0 1px 2px rgba(51,51,51,0.35); } .slide-page-weixin .slide-page-inner p { margin: 0.5rem 0; padding: 0.5rem 0; } .slide-page-weixin .slide-page-11 .slide-page-inner p { padding: 1rem 0; } .slide-page-inner p.even { margin: 1.667rem 0; } .slide-page-inner .emphasised { font-size: 3rem; color: #FFED03; margin: 0 4px; } .slide-page-inner p.emphasised { margin: 1.667rem 0; } .slide-page-inner .item-emphasised { color: #FFED03; } .slide-page-subject { width: 24rem; position: absolute; bottom: 2rem; right: -4rem; z-index: 0; } .modal-list { white-space: nowrap; padding: 1rem 0; } .modal-list .ellipsis { width: 60px; height: 60px; vertical-align: top; line-height: 50px; color: #efefef; font-size: 2rem; } .slide-page-1, .slide-page-4 { text-align: center; padding-left: 0; } .slide-page-1 .slide-page-title { width: 80%; margin-top: 3rem; } .slide-page-1 .slide-page-body { width: 80%; margin-top: 4rem; } .slide-page-1 .view { position: absolute; left: 0; right: 0; bottom: 2rem; } .slide-page-2 p.days { margin-top: 5rem; text-align: left; } .slide-page-image { padding: 0; } .slide-page-3 .slide-page-subject { width: 50%; position: static; margin-left: 25%; } .slide-page-4 .title { font-size: 2rem; } .slide-page-4 .slide-page-inner .emphasised { font-size: 2.667rem; } .slide-page-4 .slide-page-inner p.emphasised { margin: 1.667rem 0; font-size: 2rem; } .slide-page-weixin .slide-page-4 .slide-page-inner p.emphasised { margin: 1rem 0; } .slide-page-5 .slide-page-subject { padding-top: 3rem; } .slide-page-5 .slide-page-inner p.even { margin: 5rem 0; } .slide-page-5 .slide-page-image { height: 20rem; background-image: url(static/assets/images/year-end-report/p5.png); background-repeat: no-repeat; background-size: contain; background-position: center center; margin-top: -1rem; } .slide-page-weixin .slide-page-6 .slide-page-image { padding: 0; } .slide-page-6 .slide-page-inner p { margin: 1.5rem 0; } .slide-page-8 p { margin: 1rem 0; } .slide-page-8 .slide-page-inner { padding: 0 3.333rem; } .slide-page-8 .slide-page-subject { right: 0; width: 20rem; } .slide-page-9 .slide-page-inner { padding-right: 0; } .slide-page-10 .slide-page-inner p { line-height: 2.8rem; margin: 1rem 0; } #slide-page-11 { height: 100%; } .slide-page-11 .slide-page-inner { padding: 2rem 1.667rem; } .slide-page-11 .slide-page-inner p { color: #444968; padding: 1.04rem 0; margin: 0; line-height: 1.42rem; text-shadow: none; } .slide-page-11 .slide-page-inner p:first-child { padding-top: 2.08rem; } .slide-page-11 .slide-page-inner p { padding: 1.333rem 0 } .slide-page-11 .summary-header { height: 8rem; position:relative; background-color: #fff; margin: 0 20px; padding: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; } .slide-page-11 .summary-header .title { width: 80%; max-height: 6rem; margin: 0 auto; } .slide-page-11 .summary-bar { background-image: url(static/assets/images/year-end-report/p11-1.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 36px; width: 100%; } .slide-page-11 .summary-body { background: #fff; height: 28rem; margin: 0 20px; } .slide-page-11 .summary-body .summary-body-tail { position: absolute; bottom: -21px; left: -1px; right: 0px; background-image: url(static/assets/images/year-end-report/p11-2-1.png); background-size: cover; height: 24px; border: 0; } .slide-page-11 .summary-body .summary-body-tail-plus { position: absolute; right: -18px; bottom: -21px; width: 18px; height: 24px; background-image: url(static/assets/images/year-end-report/p11-2-2.png); background-size: cover; background-repeat: no-repeat; border: 0; } .slide-page-footer { display: none; /* default is hidden */ height: 6rem; background: #fff; position: absolute; bottom: 0; z-index: 2; left: 0; right: 0; } .slide-page-footer .left { width: 0; height: 0; border-bottom: 3rem solid #fff; border-right: 400px solid transparent; position: absolute; top: -2rem; } .slide-page-footer .right { width: 0; height: 0; border-bottom: 3rem solid #fff; border-left: 400px solid transparent; position: absolute; top: -2rem; right: 0; } .slide-page-footer .avatar-container { top: -3rem; } /* 生成图片时样式 */ .image-rendering .share { display: none; } .image-rendering .slide-page-11 .summary-body .summary-body-tail-plus { right: -17px; } .image-rendering .slide-page-footer { display: block; } .image-rendering .slide-page-footer .avatar-container { display: block; } .slide-page-11 .summary-body .summary-body-content .emphasised { color: #F76242; font-size: 2rem; } .slide-page-11 .summary-footer { position: absolute; left: 0; right: 0; bottom: 2rem; } .summary-header .pl { height: 6rem; position: absolute; left: -1rem; bottom: 0; } .summary-header .pr { height: 6rem; position: absolute; right: -1rem; bottom: 0; } .avatar-container { position: absolute; left: 0; right: 0; top: -1.5rem; } .avatar-container img { width: 6rem; height: 6rem; border: 2px solid #fff; } .summary-header-bar { background: #f76447; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; margin: 0 3rem; } .next-year-tip { position: absolute; left: 0; right: 0; bottom: 2rem; } .firework.firework1 { width: 100px; height: 100px; position: absolute; top: -30px; background-size: cover; z-index: 0; } .firework.firework2 { width: 100px; height: 100px; position: absolute; top: -30px; right: 0px; background-size: cover; z-index: 0; } .loading-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #ECE8DE; z-index: 1000; display: flex; justify-content: center; align-items: center; } .slide-page-weixin .slide-page-outer { padding-top: 2rem; } .slide-page-weixin .slide-page-image { padding: 0; } .slide-page-weixin .slide-page-8 .slide-page-subject { height: 15rem; } .slide-page-weixin .slide-page-10 .slide-page-image img { width: 60%; } @media screen and (max-device-height:504px){ .slide-page-10 .slide-page-inner p { line-height: 2rem; } .image-rendering .slide-page-footer { height: 2rem; } .avatar-container img { width: 4rem; height: 4rem; } } @media screen and (max-device-height:568px){ .share { bottom: 1rem; } .music { top: 1rem; right: 1rem; } .slide-page-subject { width: 20rem; } .slide-page-inner { padding: 0 1.667rem; } .slide-page-inner p { font-size: 1.25rem; color: #FFFFFF; margin: 1.166rem 0; line-height: 2rem; } .slide-page-inner .emphasised { font-size: 2rem; color: #FFED03; margin: 0 4px; } .slide-page-2 p.days { margin-top: 3rem; } .slide-page-5 .slide-page-inner p { margin: 0; } .slide-page-8 .slide-page-subject { width: auto; height: 15rem; } .slide-page-10 .slide-page-image { padding: 0; } .slide-page-10 .slide-page-image img { width: 60% } .slide-page-11 .slide-page-inner { padding: 0; } .slide-page-11 .slide-page-inner p{ padding-top: 0.52rem; } .slide-page-11 .slide-page-inner p:first-child { padding-top: 1.04rem; } .slide-page-11 .summary-body { height: 23rem; } .slide-page-11 .summary-footer { bottom: 1rem; } .next-year-tip { bottom: 1rem; } /* Weixin */ .slide-page-weixin .slide-page-outer { padding-top: 1rem; } .slide-page-weixin .share { bottom: 0.3rem; } .slide-page-weixin .slide-page-10 .slide-page-image img { width: 60%; } .image-rendering .slide-page-footer { height: 4rem; } .slide-page-weixin .image-rendering .slide-page-footer { height: 2.4rem; } .avatar-container img { width: 4rem; height: 4rem; } } @media screen and (max-device-height:640px){ .slide-page-inner p { margin: 1rem 0; } .share { bottom: 1rem; } } @media screen and (min-device-height:670px){ .slide-page-weixin .slide-page-outer { } .slide-page-4 .slide-page-inner .emphasised { margin: 1rem 0; } .slide-page-4 .slide-page-inner .text-center img { width: 50%; } } @media screen and (min-device-height:724px){ /* Weixin iphoneX */ .slide-page-weixin .slide-page-outer { padding-top: 2rem; } } @media screen and (min-device-height:750px){ .next { bottom: 2.833rem; } .slide-page-outer { padding-top: 5.667rem; } .slide-page-weixin .slide-page-outer { padding-top: 3rem; } .slide-page-image { padding: 2rem 0; } .slide-page-7 .slide-page-image { padding: 0; } .modal-list { padding: 2rem 0; } .slide-page-inner p, .slide-page-10 .slide-page-inner p { line-height: 3.333rem; margin: 1.667rem 0; } .slide-page-weixin .slide-page-inner p { margin: 0; line-height: 2.5rem; } .slide-page-1 .slide-page-title { margin-top: 5.667rem; } .slide-page-1 .slide-page-body { margin-top: 6.667rem; } .slide-page-1 .view { bottom: 4rem; } .slide-page-5 .slide-page-inner p.even{ line-height: 4rem; } .slide-page-weixin .slide-page-5 .slide-page-inner p.even { line-height: 3rem; } .slide-page-5 .slide-page-image { padding-top: 4rem; } .slide-page-6 .slide-page-image { padding: 2rem 0; } .slide-page-10 .slide-page-image { padding: 0; } .slide-page-outer.slide-page-11 { padding-top: 4.667rem; } .slide-page-weixin .slide-page-outer.slide-page-11 { padding-top: 2.667rem; } .slide-page-11 .slide-page-inner p { padding-top: 1.333rem; } .slide-page-11 .slide-page-inner p:first-child { padding-top: 2.667rem; } .slide-page-weixin .slide-page-11 .slide-page-inner p:first-child { margin: 0; } .slide-page-11 .summary-body { height: 32rem; } .slide-page-weixin .slide-page-11 .summary-body { height: 29rem; } .next-year-tip { bottom: 3rem; } .slide-page-11 .summary-footer { bottom: 4rem; } } @media screen and (min-device-height:800px){ .slide-page-outer.slide-page-11 { padding-top: 5.667rem; } .share { bottom: 4rem; } }