提交

index.css

@@ -0,0 +1,256 @@
+
+html {
+  color: #fff;
+  font-size: 100px;
+  font-family: "PingFang SC", "Microsoft Yahei", "Segoe UI", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; 
+}
+p {
+  margin: 0;
+}
+img {
+  display: block;
+}
+a {
+  color: inherit;
+}
+
+.wrap {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+.wrap .wrap__layout {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wrap .wrap__layout .wrap__layout--box {
+  width: 100%;
+}
+
+
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1rem;
+  background: rgba(0, 0, 0, .06);
+  z-index: 10;
+}
+.nav__wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 .2rem;
+  height: 100%;
+}
+
+.nav img {
+  width: 1.4rem;
+  height: .46rem;
+}
+
+.nav .menu {
+  flex: 1 1 50%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: .2rem;
+  color: #fff;
+}
+
+.nav .menu .index {
+  margin-right: .6rem;
+}
+
+
+.nav .menu.end .about {
+  color: #fff;
+}
+.nav .menu .about, .nav .menu.end .index {
+  color: rgba(255, 255, 255, .5);
+}
+
+.page-1 {
+  background-color: #000;
+  text-align: center;
+}
+.page-1 .title {
+  font-size: .66rem;
+}
+.page-1 .text {
+  font-size: .36rem;
+  margin-top: .3rem;
+}
+.page-1 .download {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1.1rem;
+}
+.page-1 .download .qr {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: .2rem;
+  background: red;
+  border-radius: .08rem;
+}
+.page-1 .download .button {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 1.5rem;
+}
+.page-1 .download .button--ios {
+  width: 1.8rem;
+  height: .54rem;
+}
+.page-1 .download .button--android {
+  width: 1.8rem;
+  height: .54rem;
+}
+
+.content__box {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.content__box .content .title {
+  font-size: .6rem;
+  margin-bottom: .91rem;
+}
+.content__box .content .title .underline {
+  padding-bottom: .41rem;
+  border-bottom: .06rem solid #fff;
+}
+.content__box .content .text {
+  font-size: .3rem;
+}
+.content__box .img {
+  width: 3.02rem;
+  height: 6.02rem;
+}
+.content__box .img img {
+  width: 100%;
+  height: 100%;
+}
+
+.page-2 {
+  background:linear-gradient(223deg,rgba(0,238,164,1) 0%,rgba(0,154,230,1) 100%);
+}
+
+.page-3 {
+  background:linear-gradient(47deg,rgba(233,72,72,1) 0%,rgba(241,187,63,1) 100%);
+}
+
+.page-4 {
+  background:linear-gradient(227deg,rgba(70,166,251,1) 0%,rgba(146,19,255,1) 100%);
+}
+
+.page-5 {
+  background:linear-gradient(41deg,rgba(158,26,255,1) 0%,rgba(227,56,159,1) 100%);
+}
+
+.page-6 {
+  background: url('./img/bottom_bg.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  text-align: center;
+}
+/* .page-6::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  background-color: rgba(0, 0, 0, .7);
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+} */
+.page-6 .content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  padding: 0 40px;
+}
+
+.page-6 .title {
+  font-size: .32rem;
+  margin-bottom: .4rem;
+}
+.page-6 .subtitle {
+  font-size: .24rem;
+  margin-bottom: .3rem;
+}
+.page-6 .text {
+  font-size: .2rem;
+  line-height: 1.7;
+  letter-spacing: 0.02rem;
+}
+.page-6 .footer {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  bottom: 0;
+  width: 100%;
+  height: 1.54rem;
+  border-top: 1px solid rgba(255, 255, 255, .1);
+  font-size: .18rem;
+}
+.page-6 .footer .footer__item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 覆盖 */
+
+.fp-right {
+
+}
+
+#fp-nav.fp-right ul li span {
+  /* width: 10px;
+  height: 10px; */
+  background: rgba(255, 255, 255, .46);
+}
+
+#fp-nav.fp-right ul li .active span {
+  /* width: 16px;
+  height: 16px; */
+  background: #fff;
+}
+
+@media (min-width: 1200px) {
+  html {
+    font-size: calc(1920px / 19.2);
+  }
+  .wrap {
+    width: 1200px;
+  }
+}
+
+@media (max-width: 800px) {
+  html {
+    font-size: 60px;
+  }
+  .content__box .img {
+    width: 1.5rem;
+    height: 3rem;
+  }
+  .page-6 .footer {
+    height: auto;
+    padding: 10px 0;
+  }
+  .page-6 .footer .footer__item {
+    flex-direction: column;
+  }
+}

index.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, shrink-to-fit=no, viewport-fit=cover" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link href="https://cdn.bootcss.com/fullPage.js/3.0.7/fullpage.min.css" rel="stylesheet">
+  <link href="./index.css" rel="stylesheet">
+  <title>由你[官网]-Z世代的互动协作社区</title>
+</head>
+<body>
+  <h1 style="display: none">由你</h1>
+  <div class="nav">
+    <div class="wrap">
+      <div class="nav__wrap">
+        <img src="./img/logo.png" alt="logo">
+        <div class="menu">
+          <div class="index" onclick="index()">首页</div>
+          <div class="about" onclick="about()">关于我们</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="fullpage">
+    <div class="section page page-1">
+      <div class="wrap">
+        <div class="wrap__layout">
+          <div class="wrap__layout--box">
+            <p class="title">“由你” 这里一切都由你</p>
+            <p class="text">Z世代的互动协作社区</p>
+            <div class="download">
+              <div class="qr"></div>
+              <div class="button">
+                <img class="button--ios" src="./img/ios.png">
+                <img class="button--android" src="./img/android.png">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section page page-2">
+      <div class="wrap">
+        <div class="wrap__layout">
+          <div class="wrap__layout--box">
+            <div class="content__box">
+              <div class="content">
+                <p class="title"><span class="underline">内容</span>由你</p>
+                <p class="text">人人平权的社区系统</p>
+                <p class="text">每条内容都将收获等价的激励</p>
+              </div>
+              <div class="img">
+                <img src="./img/phone1.png" alt="img">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section page page-3">
+      <div class="wrap">
+        <div class="wrap__layout">
+          <div class="wrap__layout--box">
+            <div class="content__box right">
+              <div class="img">
+                <img src="./img/phone2.png" alt="img">
+              </div>
+              <div class="content">
+                <p class="title">好玩<span class="underline">由你</span></p>
+                <p class="text">脑洞大开的体力设定</p>
+                <p class="text">社区互动跨界融入游戏化规则</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section page page-4">
+      <div class="wrap">
+        <div class="wrap__layout">
+          <div class="wrap__layout--box">
+            <div class="content__box">
+              <div class="content">
+                <p class="title"><span class="underline">成就</span>由你</p>
+                <p class="text">打破固化的参与规则</p>
+                <p class="text">每个人都可以成为社区合伙人</p>
+              </div>
+              <div class="img">
+                <img src="./img/phone3.png" alt="img">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section page page-5">
+      <div class="wrap">
+        <div class="wrap__layout">
+          <div class="wrap__layout--box">
+            <div class="content__box right">
+              <div class="img">
+                <img src="./img/phone4.png" alt="img">
+              </div>
+              <div class="content">
+                <p class="title">价值<span class="underline">由你</span></p>
+                <p class="text">重视质量的激励策略</p>
+                <p class="text">优质内容可收获的激励无上限</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section page page-6">
+      <div class="wrap">
+        <div class="wrap__layout">
+          <div class="wrap__layout--box">
+            <div class="content">
+              <div class="title">关于我们</div>
+              <div class="subtitle">由你——Z世代的互动协作社区</div>
+              <p class="text">
+                每个人对社区的贡献都值得被记录！在由你，你的每次浏览，分享，评价等行为都将视为对社区的贡献，转换为相应的社区激励。在结识平台好友、获取新鲜资讯、分享有趣动态的同时，还可以收获U米，兑换奖品，成为社区红人，甚至成为由你合伙人，享受项目分红。
+              </p>
+            </div>
+          </div>
+          <div class="footer">
+            <div class="footer__item">
+              <div class="info">联系：Contact</div>
+              <div class="info" style="margin: 0 .6rem;">地址: 陕西省西安市雁塔区翠花南路创意盒子20楼</div>
+              <div class="info">举报电话: 17749037320</div>
+            </div>
+            <div class="footer__item" style="margin-top: .24rem;">
+              <div class="info">商务合作邮箱: business@uptoyo.com</div>
+              <div class="info" style="margin: 0 .6rem;">邮箱: report@uptoyo.com</div>
+              <a href="http://beian.miit.gov.cn" target="_blank">琼ICP备19003173号-1</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://cdn.bootcss.com/fullPage.js/3.0.7/fullpage.min.js"></script>
+  <script src="./index.js"></script>
+</body>
+</html>

index.js

@@ -0,0 +1,21 @@
+
+
+new fullpage('#fullpage', {
+	navigation: true,
+  navigationPosition: 'right',
+  afterLoad: function (origin, destination, direction) {
+    if (destination.index === 5) {
+      document.getElementsByClassName('menu')[0].classList.add('end')
+    } else {
+      document.getElementsByClassName('menu')[0].classList.remove('end')
+    }
+  },
+});
+
+function index() {
+  fullpage_api.moveTo(1)
+}
+
+function about() {
+  fullpage_api.moveTo(6)
+}