#list { position: fixed; z-index: 9998; top: 50%; right: 20px; width: 6px; margin-top: -35px; } .list-point { width: 6px; height: 6px; background: #00AAEE; border-radius: @border-radius-base; float: left; margin: 4px auto; opacity: 0.5; cursor: pointer; transition: opacity .3s; } .list-point:hover, .list-point.active { opacity: 1; } .banner-wrapper { position: relative; width: 100%; overflow: hidden; background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover; } .banner-text-wrapper { position: absolute; left: 13%; top: 53%; color: #fff; text-align: right; font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; } .banner-text-wrapper h2 { font-size: 40px; font-weight: normal; font-family: 'Raleway', 'Hiragino Sans GB'; } .banner-text-wrapper h2 p { color: #FF3171; display: inline-block; } .banner-text-wrapper .line { width: 0.8px; height: 76px; position: absolute; background: rgba(255, 255, 255, .44); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03)); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03)); top: 16px; right: -25px; } .banner-text-wrapper > p { margin: 10px auto 24px; font-size: 16px; } .banner-text-wrapper .start-button { margin-bottom: 24px; text-align: right; > a { display: inline-block; height: 40px; padding: 0 16px; border-radius: @border-radius-base; border: 1px solid @primary-color; color: @primary-color; font-size: 15px; background: transparent; transition: box-shadow .45s ease-out; text-align: center; line-height: 36px; margin-left: 8px; } > a:hover { box-shadow: 0 0 10px @primary-color; } } .banner-text-wrapper .github-btn { float: right; line-height: 14px; width: 91px; text-align: left; a:hover { color: #333; } } .down { text-align: center; position: absolute; bottom: 30px; color: rgba(255, 255, 255, .75); left: 50%; margin-left: -7px; } .page { min-height: 700px; height: 100vh; } .content-wrapper { width: 100%; max-width: 1500px; margin: auto; overflow: hidden; background: #fff; .image-wrapper { width: 65%; float: left; position: relative; } .text-wrapper { width: 35%; float: left; position: relative; top: 20%; left: 10px; font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; } .text-wrapper h2, .text-wrapper-bottom h2 { font-size: 32px; color: #666; font-weight: normal; } .text-wrapper p { margin: 10px 0 20px; font-size: 16px; line-height: 28px; color: #999999; } .left-text { padding-left: 10%; } } .image1 { background: url("https://t.alipayobjects.com/images/T1Ch8kXfpdXXXXXXXX.png") no-repeat right / 841px; height: 511px; top: 50%; margin-top: -256px; } .image2 { background: url("https://t.alipayobjects.com/images/T1r5RkXotXXXXXXXXX.png") no-repeat left / 800px; height: 474px; top: 50%; margin-top: -266px; } .image3 { padding-right: 10%; background: url("https://t.alipayobjects.com/images/T1nx0kXdFfXXXXXXXX.png") no-repeat right / 639px; background-origin: content-box; height: 500px; top: 50%; margin-top: -250px; } .image4 { background: url("https://t.alipayobjects.com/images/T1lyJkXg4aXXXXXXXX.png") no-repeat center / 615px; height: 364px; margin: auto; } .text-wrapper-bottom { text-align: center; margin: 10% auto 40px; } .text-wrapper-bottom p { margin: 20px auto; font-size: 16px; line-height: 28px; color: #999; }