Commit be0949ef555265c20a736e03a019398b3f6170e8

Authored by liuguangkuo
1 parent 7d63707229
Exists in master

change fit web

... ... @@ -34,6 +34,449 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
34 34 display: block; }
35 35  
36 36 img {
37   - display: block;
38 37 vertical-align: top;
39   - width: 0; }
  38 + width: 100%; }
  39 +
  40 +body {
  41 + font-family: 'NotoSansHans-Thin', 'Heiti SC', 'Microsoft Yahei', simsun, sans-serif;
  42 + line-height: 1;
  43 + color: #FFF; }
  44 +
  45 +.fl {
  46 + float: left !important; }
  47 +
  48 +.fr {
  49 + float: right !important; }
  50 +
  51 +.clearfix:before, .clearfix:after {
  52 + content: "";
  53 + display: table; }
  54 +
  55 +.clearfix:after {
  56 + clear: both;
  57 + overflow: hidden; }
  58 +
  59 +.nav {
  60 + height: 88px;
  61 + line-height: 88px;
  62 + position: fixed;
  63 + width: 100%;
  64 + left: 0;
  65 + top: 0;
  66 + background-color: rgba(27, 27, 27, 0.8);
  67 + z-index: 99; }
  68 + .nav h1 {
  69 + width: 178px;
  70 + float: left;
  71 + margin-left: 68px; }
  72 + .nav h1 img {
  73 + vertical-align: middle; }
  74 + .nav .logo {
  75 + width: 60px; }
  76 + .nav .fit_icon {
  77 + width: 108px; }
  78 + .nav .nav-lit {
  79 + float: right;
  80 + margin-right: 28px; }
  81 + .nav li {
  82 + width: 123px;
  83 + display: inline-block;
  84 + float: left;
  85 + margin-right: 10px; }
  86 + .nav li img {
  87 + vertical-align: middle; }
  88 + .nav li a {
  89 + display: block; }
  90 +
  91 +.page1 {
  92 + height: 100vh;
  93 + background: url(../images/16x9/1.jpg) no-repeat;
  94 + background-size: cover; }
  95 +
  96 +.page-left, .page-right {
  97 + width: 50%;
  98 + position: relative;
  99 + height: 100vh;
  100 + top: 50%; }
  101 +
  102 +.page1-subtitle {
  103 + width: 216px; }
  104 +
  105 +.page1-logo {
  106 + width: 110px;
  107 + padding-left: 65px; }
  108 +
  109 +.page1-text {
  110 + width: 315px;
  111 + padding-bottom: 45px; }
  112 +
  113 +.page1-download {
  114 + float: left;
  115 + margin-right: 20px; }
  116 + .page1-download a {
  117 + display: block;
  118 + width: 123px;
  119 + margin-bottom: 12px; }
  120 +
  121 +.page1-code {
  122 + width: 92px;
  123 + float: left; }
  124 +
  125 +.page1-right {
  126 + width: auto;
  127 + float: right;
  128 + margin-right: 105px;
  129 + display: inline;
  130 + margin-top: -150px; }
  131 +
  132 +.page2 {
  133 + height: 100vh;
  134 + background: url(../images/16x9/2.jpg) no-repeat;
  135 + background-size: cover;
  136 + position: relative; }
  137 +
  138 +.page2-left, .page4-left {
  139 + padding-left: 5%;
  140 + text-align: center;
  141 + width: 40%;
  142 + margin-top: -130px; }
  143 + .page2-left h2, .page4-left h2 {
  144 + font-size: 48px;
  145 + font-weight: 200;
  146 + padding-bottom: 20px; }
  147 + .page2-left p, .page4-left p {
  148 + font-size: 20px;
  149 + font-weight: 100;
  150 + line-height: 1.5;
  151 + -webkit-font-smoothing: antialiased; }
  152 + .page2-left li, .page4-left li {
  153 + display: inline-block; }
  154 + .page2-left strong, .page4-left strong {
  155 + display: block;
  156 + width: 60px;
  157 + margin: 0 auto;
  158 + padding-bottom: 20px; }
  159 + .page2-left .w60, .page4-left .w60 {
  160 + width: 60%; }
  161 +
  162 +.page2-right, .page4-right {
  163 + position: relative;
  164 + float: right;
  165 + bottom: -100px;
  166 + top: auto;
  167 + right: 30px;
  168 + width: 50%; }
  169 +
  170 +.page2-iphone, .page4-iphone {
  171 + position: absolute;
  172 + top: 0;
  173 + right: 0;
  174 + width: 363px;
  175 + height: 737px;
  176 + background: url(../images/phone.png) no-repeat; }
  177 + .page2-iphone img, .page4-iphone img {
  178 + position: absolute;
  179 + top: 79px;
  180 + left: 19px;
  181 + width: 329px; }
  182 +
  183 +.page3 {
  184 + height: 100vh;
  185 + background: url(../images/16x9/3.jpg) no-repeat;
  186 + background-size: cover;
  187 + position: relative; }
  188 +
  189 +.page3-top, .page3-foot {
  190 + text-align: center;
  191 + padding-top: 6%; }
  192 + .page3-top h2, .page3-foot h2 {
  193 + font-size: 48px;
  194 + font-weight: 200;
  195 + padding-bottom: 20px; }
  196 + .page3-top p, .page3-foot p {
  197 + font-size: 20px;
  198 + font-weight: 100;
  199 + line-height: 1.5;
  200 + -webkit-font-smoothing: antialiased; }
  201 +
  202 +.page3-foot h2 {
  203 + font-size: 26px;
  204 + padding-bottom: 10px; }
  205 +
  206 +.page3-foot p {
  207 + font-size: 18px; }
  208 +
  209 +.page3-center {
  210 + width: 502px;
  211 + height: 283px;
  212 + background: url(../images/iphone.png) no-repeat;
  213 + padding: 23px 73px 20px 75px;
  214 + margin: 45px auto 0; }
  215 +
  216 +.page3-foot {
  217 + padding-top: 15px; }
  218 +
  219 +.page4 {
  220 + height: 100vh;
  221 + background: url(../images/16x9/4.jpg) no-repeat;
  222 + background-size: cover;
  223 + position: relative; }
  224 +
  225 +.page4-right {
  226 + right: 0; }
  227 +
  228 +.page4-left {
  229 + padding-left: 0;
  230 + padding-right: 5%; }
  231 +
  232 +.page4-iphone {
  233 + position: absolute;
  234 + top: 0;
  235 + left: 30px;
  236 + right: auto; }
  237 +
  238 +.page5 {
  239 + height: 100vh;
  240 + background-color: #FFF;
  241 + position: relative; }
  242 +
  243 +.page5-menu {
  244 + text-align: center;
  245 + padding-top: 18%; }
  246 + .page5-menu li {
  247 + display: inline-block;
  248 + width: 77px; }
  249 + .page5-menu .weibo {
  250 + padding: 0 110px; }
  251 +
  252 +.mail {
  253 + text-align: center;
  254 + color: #646464;
  255 + padding-top: 7%; }
  256 + .mail a {
  257 + color: #646464;
  258 + text-decoration: none; }
  259 + .mail h3 {
  260 + font-size: 20px;
  261 + color: #434343;
  262 + padding-bottom: 10px; }
  263 + .mail ul {
  264 + width: 210px;
  265 + margin: 0 auto;
  266 + text-align: left; }
  267 + .mail li {
  268 + font-size: 16px;
  269 + padding-left: 30px;
  270 + line-height: 35px; }
  271 + .mail img {
  272 + width: 20px;
  273 + margin-right: 10px;
  274 + vertical-align: middle; }
  275 +
  276 +.foot {
  277 + text-align: center;
  278 + color: #646464;
  279 + font-size: 14px; }
  280 +
  281 +.foot-menu {
  282 + padding-top: 8%; }
  283 + .foot-menu a {
  284 + padding: 0 40px;
  285 + border-left: solid 1px #f9c613;
  286 + color: #646464;
  287 + text-decoration: none; }
  288 + .foot-menu a:first-child {
  289 + border: none; }
  290 +
  291 +.copyright {
  292 + padding-top: 20px;
  293 + font-size: 12px;
  294 + line-height: 20px; }
  295 +
  296 +@media (max-width: 769px) {
  297 + .page1-left {
  298 + text-align: center;
  299 + width: 40%;
  300 + top: 45%; }
  301 + .page1-left .page1-logo {
  302 + padding-left: 0; }
  303 + .page1-right {
  304 + margin-right: 10%; }
  305 + .page2-left, .page4-left {
  306 + width: 35%;
  307 + margin-top: -20%;
  308 + bottom: -20%; }
  309 + .page2-left h2, .page4-left h2 {
  310 + font-size: 42px; }
  311 + .page2-left p, .page4-left p {
  312 + font-size: 16px; }
  313 + .page2-left .w60, .page4-left .w60 {
  314 + width: auto; }
  315 + .page2-left ul, .page4-left ul {
  316 + margin-top: 10%; }
  317 + .page2-left strong, .page4-left strong {
  318 + width: 80px; }
  319 + .page2-right, .page4-right {
  320 + bottom: -20%; }
  321 + .page2-iphone {
  322 + width: 300px;
  323 + height: 609px;
  324 + background-size: 100% auto; }
  325 + .page2-iphone img {
  326 + top: 66px;
  327 + left: 13px;
  328 + width: 272px; }
  329 + .page3-top {
  330 + padding-top: 35%; }
  331 + .page4-iphone {
  332 + background-size: 100% auto; }
  333 + .page4-iphone img {
  334 + left: 16px; }
  335 + .page5-menu {
  336 + padding-top: 35%; }
  337 + .page5-menu li {
  338 + width: 120px; }
  339 + .mail h3 {
  340 + font-size: 34px; }
  341 + .mail ul {
  342 + width: 330px; }
  343 + .mail li {
  344 + font-size: 30px;
  345 + margin-top: 25px; }
  346 + .mail li img {
  347 + width: 40px;
  348 + margin-right: 20px; }
  349 + .foot {
  350 + font-size: 24px; }
  351 + .copyright {
  352 + font-size: 18px;
  353 + line-height: 26px; } }
  354 +
  355 +@media screen and (max-width: 768px) {
  356 + .page {
  357 + height: auto;
  358 + overflow: hidden; }
  359 + .page-left, .page-right {
  360 + height: auto;
  361 + float: none !important; }
  362 + .nav {
  363 + display: none; }
  364 + .page-left {
  365 + text-align: center;
  366 + width: 100%;
  367 + padding-top: 15%; }
  368 + .page1-left {
  369 + padding-bottom: 10%; }
  370 + .page1-right {
  371 + width: 235px;
  372 + margin: 0 auto;
  373 + display: block;
  374 + padding-bottom: 20%; }
  375 + .page1-logo {
  376 + width: 70px; }
  377 + .page1-subtitle {
  378 + width: 120px; }
  379 + .page1-text {
  380 + width: 235px;
  381 + padding-bottom: 10%; }
  382 + .page2-left, .page4-left {
  383 + margin: 0;
  384 + padding-left: 0; }
  385 + .page2-left li, .page4-left li {
  386 + margin: 0 15px; }
  387 + .page2-left strong, .page4-left strong {
  388 + width: 60px;
  389 + padding-bottom: 10px; }
  390 + .page2-right, .page4-right {
  391 + width: 100%;
  392 + bottom: auto;
  393 + right: auto; }
  394 + .page2-iphone {
  395 + position: relative;
  396 + width: 272px;
  397 + height: 554px;
  398 + margin: 0 auto;
  399 + top: 105px; }
  400 + .page2-iphone img {
  401 + position: absolute;
  402 + width: 247px;
  403 + top: 59px;
  404 + left: 12px; }
  405 + .page3-top {
  406 + padding-top: 15%; }
  407 + .page3-top h2 {
  408 + font-size: 42px; }
  409 + .page3-top p {
  410 + font-size: 16px; }
  411 + .page3-center {
  412 + width: 320px;
  413 + height: 160px;
  414 + margin: 10% auto 0;
  415 + background-size: 100% auto;
  416 + padding: 0; }
  417 + .page3-center ul {
  418 + width: 248px;
  419 + margin: 0 auto;
  420 + padding-top: 10px; }
  421 + .page3-foot {
  422 + padding-bottom: 10%; }
  423 + .page4-iphone {
  424 + position: relative;
  425 + width: 272px;
  426 + height: 554px;
  427 + margin: 0 auto;
  428 + top: 105px;
  429 + left: 0; }
  430 + .page4-iphone img {
  431 + position: absolute;
  432 + width: 247px;
  433 + top: 59px;
  434 + left: 12px; }
  435 + .page5-menu {
  436 + padding-top: 15%; }
  437 + .page5-menu li {
  438 + width: 80px; }
  439 + .page5-menu .weibo {
  440 + padding: 0 15px; }
  441 + .mail h3 {
  442 + font-size: 24px; }
  443 + .mail ul {
  444 + width: 250px; }
  445 + .mail li {
  446 + font-size: 22px;
  447 + margin-top: 10px; }
  448 + .mail li img {
  449 + width: 22px;
  450 + margin-right: 10px; }
  451 + .foot {
  452 + font-size: 16px;
  453 + padding-bottom: 15%; }
  454 + .foot-menu a {
  455 + padding: 0 20px; }
  456 + .copyright {
  457 + font-size: 12px;
  458 + line-height: 18px; } }
  459 +
  460 +@media screen and (max-width: 321px) {
  461 + .page2-left h2, .page4-left h2, .page3-top h2, .page3-foot h2 {
  462 + font-size: 34px; }
  463 + .page2-left p, .page4-left p, .page3-top p, .page3-foot p {
  464 + font-size: 14px; }
  465 + .page2-left strong, .page4-left strong, .page3-top strong, .page3-foot strong {
  466 + width: 50px; }
  467 + .page5-menu li {
  468 + width: 60px; }
  469 + .mail h3 {
  470 + font-size: 18px; }
  471 + .mail ul {
  472 + width: 220px; }
  473 + .mail li {
  474 + font-size: 16px;
  475 + margin-top: 0;
  476 + line-height: 30px; }
  477 + .mail li img {
  478 + width: 18px; }
  479 + .foot {
  480 + font-size: 14px; }
  481 + .foot-menu a {
  482 + padding: 0 10px; } }
dist/images/overview_index_target_01_screen_large.jpg

64.8 KB

... ... @@ -0,0 +1,139 @@
  1 +<!DOCTYPE html>
  2 +<html lang="cn-zh">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  6 + <title>fit</title>
  7 + <link rel="stylesheet" type="text/css" href="dist/css/style.css">
  8 +</head>
  9 +<body>
  10 + <div class="nav">
  11 + <h1><a href="/"><img class="logo" src="dist/images/logo.svg" alt="Fit - 私人健身教练"><img class="fit_icon" src="dist/images/fit_subtitle.svg" alt="Fit - 私人健身教练"></a></h1>
  12 + <ul class="nav-lit">
  13 + <li>
  14 + <a href="/checkClient.html?f=fit"><img src="dist/images/btn-android.png" alt="Fit android apk"></a>
  15 + </li>
  16 + <li><a href="https://itunes.apple.com/cn/app/fit-si-ren-jian-shen-jiao-lian/id1102364578?mt=8" class="downloadBtn"><img src="dist/images/btn-app.png" alt="Fit 苹果下载"></a></li>
  17 + <li><img src="dist/images/btn-qrcode.png" alt="Fit 二维码"></li>
  18 + </ul>
  19 + </div>
  20 + <div class="warp">
  21 + <div class="page page1 clearfix">
  22 + <div class="page-left page1-left fl">
  23 + <img class="page1-logo" src="dist/images/logo.svg" alt="fit">
  24 + <img class="page1-subtitle" src="dist/images/fit_subtitle.svg" alt="fit">
  25 + </div>
  26 + <div class="page-right page1-right fr clearfix">
  27 + <div class="page1-text">
  28 + <img src="dist/images/slogan.svg" alt="塑造自己">
  29 + </div>
  30 + <div class="page1-download">
  31 + <a href="https://itunes.apple.com/cn/app/fit-si-ren-jian-shen-jiao-lian/id1102364578?mt=8" class="downloadBtn"><img src="dist/images/btn-app.png" alt="Fit 苹果下载"></a>
  32 + <a href="/checkClient.html?a=index" class="downloadBtn"><img src="dist/images/btn-android.png" alt="Fit android app"></a>
  33 + </div>
  34 + <div class="page1-code">
  35 + <img src="dist/images/qrcode.svg" alt="二维码">
  36 + </div>
  37 + </div>
  38 + </div>
  39 +
  40 + <div class="page page2 clearfix">
  41 + <div class="page-left page2-left fl">
  42 + <h2>丰富 健身课程</h2>
  43 + <p>满足不同需求的人群,</p>
  44 + <p>零基础用户也能简单开启健身历程,</p>
  45 + <p>高效达成自己的健身目标。</p>
  46 + <ul>
  47 + <li>
  48 + <strong><img src="dist/images/weight.svg" alt="减肥"></strong>减肥
  49 + </li>
  50 + <li class="w60">
  51 + <strong><img src="dist/images/shape.svg" alt="塑形"></strong>塑形
  52 + </li>
  53 + <li>
  54 + <strong><img src="dist/images/strong.svg" alt="增肌"></strong>增肌
  55 + </li>
  56 + </ul>
  57 + </div>
  58 + <div class="page-right page2-right fr">
  59 + <div class="page2-iphone">
  60 + <img src="dist/images/overview_index_target_01_screen_large.jpg" alt="丰富健身课程">
  61 + </div>
  62 + </div>
  63 + </div>
  64 +
  65 + <div class="page page3 clearfix ">
  66 + <div class="page3-top">
  67 + <h2>顶尖 健身导师</h2>
  68 + <p>顶级健身导师及团队精心打造训练课程及健身计划,</p>
  69 + <p>精准示范训练动作,配备高品质视频呈现。</p>
  70 + </div>
  71 + <div class="page3-center">
  72 + <ul>
  73 + <li><img src="dist/images/overview_index_p3_02_screen_larger.jpg" alt="陈蕴" /></li>
  74 + </ul>
  75 + </div>
  76 + <div class="page3-foot">
  77 + <h2>陈蕴</h2>
  78 + <p>OneFit健身学院创始人</p>
  79 + <p>UnderArmour中国唯一签约健身导师</p>
  80 + </div>
  81 + </div>
  82 +
  83 + <div class="page page4 clearfix">
  84 + <div class="page-left page4-left fr">
  85 + <h2>记录 训练数据</h2>
  86 + <p>健身打卡,见证你的进阶历程。</p>
  87 + <p>有趣的成长体系,让训练不再枯燥,</p>
  88 + <p>激励自己获取无穷动力。</p>
  89 + <ul>
  90 + <li>
  91 + <strong><img src="dist/images/history.svg" alt="训练记录"></strong>训练记录
  92 + </li>
  93 + <li class="w60">
  94 + <strong><img src="dist/images/develop.svg" alt="等级成长"></strong>等级成长
  95 + </li>
  96 + <li>
  97 + <strong><img src="dist/images/badge.svg" alt="专属徽章"></strong>专属徽章
  98 + </li>
  99 + </ul>
  100 + </div>
  101 + <div class="page-right page4-right fl">
  102 + <div class="page4-iphone">
  103 + <img src="dist/images/example1.jpg" alt="丰富健身课程">
  104 + </div>
  105 + </div>
  106 + </div>
  107 +
  108 + <div class="page page5 clearfix">
  109 + <ul class="page5-menu">
  110 + <li class="wechat">
  111 + <img src="dist/images/wechat.svg" alt="微信公众号">
  112 + <div class="img-code"></div>
  113 + </li>
  114 + <li class="weibo">
  115 + <a href="http://weibo.com/fitfitness"><img src="dist/images/weibo.svg" alt="官方微博"></a>
  116 + </li>
  117 + <li class="toutiao">
  118 + <a href="http://www.toutiao.com/m6252224496"><img src="dist/images/headline.svg" alt="今日头条"></a>
  119 + </li>
  120 + </ul>
  121 + <div class="mail">
  122 + <h3>联系我们</h3>
  123 + <ul>
  124 + <li><img src="dist/images/mail.svg" alt="邮箱"><a href="mailto:#">love@fitapp.cn</a></li>
  125 + <li><img src="dist/images/phone.svg" alt="联系电话">021-62939160</li>
  126 + </ul>
  127 + </div>
  128 + <div class="foot">
  129 + <div class="foot-menu">
  130 + <a href="/aboutUs" class="aboutus">关于Fit</a>
  131 + <a href="/agreement" class="agreement">用户协议</a>
  132 + <a href="/notice" class="notice">注意事项</a>
  133 + </div>
  134 + <div class="copyright"><p>WWW.FITAPP.CN 2016 © All Rights Reserved.</p><p>沪ICP备16009482号</p></div>
  135 + </div>
  136 + </div>
  137 + </div>
  138 +</body>
  139 +</html>
0 140 \ No newline at end of file
1 1 @import "reset";
2 2 @include global-reset;
3 3 img{
4   - display: block;
5 4 vertical-align: top;
6   - width:0;
  5 + width: 100%;
7 6 }
  7 +body{
  8 + font-family: 'NotoSansHans-Thin', 'Heiti SC', 'Microsoft Yahei', simsun, sans-serif;
  9 + line-height: 1;
  10 + color:#FFF;
  11 +}
  12 +.fl{
  13 + float:left!important;
  14 +}
  15 +.fr{
  16 + float: right!important;
  17 +}
  18 +.clearfix{
  19 + &:before,
  20 + &:after {
  21 + content: "";
  22 + display: table;
  23 + }
  24 + &:after {
  25 + clear: both;
  26 + overflow: hidden;
  27 + }
  28 +}
  29 +//nav
  30 +.nav{
  31 + height: 88px;
  32 + line-height: 88px;
  33 + position: fixed;
  34 + width:100%;
  35 + left:0;
  36 + top:0;
  37 + background-color: rgba(27, 27, 27, 0.8);
  38 + z-index: 99;
  39 + h1{
  40 + width: 178px;
  41 + float: left;
  42 + margin-left: 68px;
  43 + img{
  44 + vertical-align: middle;
  45 + }
  46 + }
  47 + .logo{
  48 + width: 60px;
  49 + }
  50 + .fit_icon{
  51 + width: 108px;
  52 + }
  53 + .nav-lit{
  54 + float: right;
  55 + margin-right: 28px;
  56 + }
  57 + li{
  58 + width: 123px;
  59 + display: inline-block;
  60 + float:left;
  61 + margin-right: 10px;
  62 + img{
  63 + vertical-align: middle;
  64 + }
  65 + a{
  66 + display: block;
  67 +
  68 + }
  69 + }
  70 +}
  71 +//page1
  72 +.page1{
  73 + height: 100vh;
  74 + background: url(../images/16x9/1.jpg) no-repeat;
  75 + background-size:cover;
  76 +}
  77 +.page-left,.page-right{
  78 + width:50%;
  79 + position: relative;
  80 + height: 100vh;
  81 + top:50%;
  82 +}
  83 +.page1-subtitle{
  84 + width: 216px;
  85 +}
  86 +.page1-logo{
  87 + width: 110px;
  88 + padding-left: 65px;
  89 +}
  90 +.page1-text{
  91 + width: 315px;
  92 + padding-bottom: 45px;
  93 +}
  94 +.page1-download{
  95 + float:left;
  96 + margin-right: 20px;
  97 + a{
  98 + display: block;
  99 + width: 123px;
  100 + margin-bottom: 12px
  101 + }
  102 +}
  103 +.page1-code{
  104 + width: 92px;
  105 + float:left;
  106 +}
  107 +.page1-right{
  108 + width: auto;
  109 + float: right;
  110 + margin-right: 105px;
  111 + display: inline;
  112 + margin-top:-150px;
  113 +}
  114 +
  115 +//page2
  116 +.page2{
  117 + height: 100vh;
  118 + background: url(../images/16x9/2.jpg) no-repeat;
  119 + background-size:cover;
  120 + position: relative;
  121 +}
  122 +.page2-left,.page4-left{
  123 + padding-left:5%;
  124 + text-align: center;
  125 + width: 40%;
  126 + margin-top: -130px;
  127 + h2{
  128 + font-size: 48px;
  129 + font-weight: 200;
  130 + padding-bottom: 20px;
  131 + }
  132 + p{
  133 + font-size: 20px;
  134 + font-weight: 100;
  135 + line-height:1.5;
  136 + -webkit-font-smoothing: antialiased;
  137 + }
  138 + li{
  139 + display:inline-block;
  140 + }
  141 + strong{
  142 + display: block;
  143 + width:60px;
  144 + margin:0 auto;
  145 + padding-bottom: 20px;
  146 + }
  147 + .w60{
  148 + width: 60%;
  149 + }
  150 +}
  151 +.page2-right,.page4-right{
  152 + position: relative;
  153 + float:right;
  154 + bottom: -100px;
  155 + top:auto;
  156 + right:30px;
  157 + width: 50%;
  158 +}
  159 +.page2-iphone,.page4-iphone{
  160 + position: absolute;
  161 + top:0;
  162 + right:0;
  163 + width:363px;
  164 + height:737px;
  165 + background: url(../images/phone.png) no-repeat;
  166 + img{
  167 + position: absolute;
  168 + top:79px;
  169 + left:19px;
  170 + width: 329px;
  171 + }
  172 +}
  173 +
  174 +//page3
  175 +.page3{
  176 + height: 100vh;
  177 + background: url(../images/16x9/3.jpg) no-repeat;
  178 + background-size:cover;
  179 + position: relative;
  180 +}
  181 +.page3-top,.page3-foot{
  182 + text-align: center;
  183 + padding-top: 6%;
  184 + h2{
  185 + font-size: 48px;
  186 + font-weight: 200;
  187 + padding-bottom: 20px;
  188 + }
  189 + p{
  190 + font-size: 20px;
  191 + font-weight: 100;
  192 + line-height:1.5;
  193 + -webkit-font-smoothing: antialiased;
  194 + }
  195 +}
  196 +.page3-foot{
  197 + h2{
  198 + font-size: 26px;
  199 + padding-bottom: 10px;
  200 + }
  201 + p{
  202 + font-size: 18px;
  203 + }
  204 +}
  205 +.page3-center{
  206 + width: 502px;
  207 + height:283px;
  208 + background: url(../images/iphone.png) no-repeat;
  209 + padding:23px 73px 20px 75px;
  210 + margin:45px auto 0;
  211 +}
  212 +.page3-foot{
  213 + padding-top: 15px;
  214 +}
  215 +
  216 +//page4
  217 +.page4{
  218 + height: 100vh;
  219 + background: url(../images/16x9/4.jpg) no-repeat;
  220 + background-size:cover;
  221 + position: relative;
  222 +}
  223 +.page4-right{
  224 + right:0;
  225 +}
  226 +.page4-left{
  227 + padding-left: 0;
  228 + padding-right: 5%;
  229 +}
  230 +.page4-iphone{
  231 + position: absolute;
  232 + top:0;
  233 + left:30px;
  234 + right:auto;
  235 +}
  236 +
  237 +//page5
  238 +.page5{
  239 + height: 100vh;
  240 + background-color: #FFF;
  241 + position: relative;
  242 +}
  243 +.page5-menu{
  244 + text-align: center;
  245 + padding-top: 18%;
  246 + li{
  247 + display:inline-block;
  248 + width:77px;
  249 + }
  250 + .weibo{
  251 + padding:0 110px;
  252 + }
  253 +}
  254 +.mail{
  255 + text-align: center;
  256 + color: #646464;
  257 + padding-top: 7%;
  258 + a{
  259 + color: #646464;
  260 + text-decoration: none;
  261 + }
  262 + h3{
  263 + font-size: 20px;
  264 + color:#434343;
  265 + padding-bottom: 10px;
  266 + }
  267 + ul{
  268 + width: 210px;
  269 + margin:0 auto;
  270 + text-align: left;
  271 + }
  272 + li{
  273 + font-size: 16px;
  274 + padding-left: 30px;
  275 + line-height: 35px;
  276 + }
  277 + img{
  278 + width:20px;
  279 + margin-right: 10px;
  280 + vertical-align: middle;
  281 + }
  282 +}
  283 +.foot{
  284 + text-align: center;
  285 + color:#646464;
  286 + font-size: 14px;
  287 +}
  288 +.foot-menu{
  289 + padding-top: 8%;
  290 + a{
  291 + padding:0 40px;
  292 + border-left:solid 1px #f9c613;
  293 + color:#646464;
  294 + text-decoration: none;
  295 + &:first-child{
  296 + border:none;
  297 + }
  298 + }
  299 +}
  300 +.copyright{
  301 + padding-top: 20px;
  302 + font-size: 12px;
  303 + line-height: 20px;
  304 +}
  305 +
  306 +// 小屏幕(平板,大于等于 768px
  307 +@media (max-width: 769px) {
  308 + //page1
  309 + .page1-left{
  310 + text-align: center;
  311 + width: 40%;
  312 + top:45%;
  313 + .page1-logo{
  314 + padding-left: 0;
  315 + }
  316 + }
  317 + .page1-right{
  318 + margin-right: 10%;
  319 + }
  320 + //page2
  321 + .page2-left, .page4-left{
  322 + width: 35%;
  323 + margin-top: -20%;
  324 + bottom: -20%;
  325 + h2{
  326 + font-size: 42px;
  327 + }
  328 + p{
  329 + font-size: 16px;
  330 + }
  331 + .w60{
  332 + width: auto;
  333 + }
  334 + ul{
  335 + margin-top: 10%;
  336 + }
  337 + strong{
  338 + width: 80px;
  339 + }
  340 + }
  341 + .page2-right, .page4-right{
  342 + bottom: -20%;
  343 + }
  344 + .page2-iphone{
  345 + width: 300px;
  346 + height: 609px;
  347 + background-size: 100% auto;
  348 + img{
  349 + top: 66px;
  350 + left: 13px;
  351 + width: 272px
  352 + }
  353 + }
  354 +
  355 + //page3
  356 + .page3-top{
  357 + padding-top: 35%;
  358 + }
  359 +
  360 + //page4
  361 + .page4-iphone{
  362 + background-size: 100% auto;
  363 + img{
  364 + left: 16px;
  365 + }
  366 + }
  367 +
  368 + //page5
  369 + .page5-menu{
  370 + padding-top: 35%;
  371 + li{
  372 + width: 120px;
  373 + }
  374 + }
  375 + .mail{
  376 + h3{
  377