no message

src/assets/css/common.css

@@ -78,20 +78,33 @@
 .fs-24{
 	font-size: 24px;
 }
+.fs-30{
+	font-size: 30px;
+}
 .fs-34{
 	font-size: 34px;
 }
 
-
+.p-15-20{
+	padding: 15px 15px;
+}
+.pt-60{
+	padding-top: 60px;
+}
 .pt-100{
 	padding-top: 100px;
 }
+.plr-220{
+	padding: 0 220px;
+}
 .plr-24{
 	padding: 0 24px;
 }
 .plr-50{
 	padding: 0 50px;
 }
+
+
 .mr-38{
 	margin-right: 38px;
 }
@@ -128,6 +141,9 @@
 .mb-96{
 	margin-bottom: 96px;
 }
+.mb-5{
+	margin-bottom: 5px;
+}
 .mt-5{
 	margin-top: 5px;
 }
@@ -139,4 +155,25 @@
 }
 .mb-16{
 	margin-bottom: 16px;
-}
+}
+.mb-18{
+	margin-bottom: 18px;
+}
+.mb-60{
+	margin-bottom: 60px;
+}
+
+
+.lh-20{
+	line-height: 20px;
+}
+.lh-17{
+	line-height: 17px;
+}
+
+.w-490{
+	width: 490px;
+}
+.w-320{
+	width: 320px;
+}

src/views/Forestage/Home/index.vue

@@ -2,25 +2,78 @@
   <!-- 首页 -->
   <div class="home-index">
     <div class="index-bg-1">
-        <div v-if="userToken" class="info-1 text-align-center box-sizing-border-box pt-100">
+        <div v-if="!userToken" class="info-1 text-align-center box-sizing-border-box pt-100">
             <div class="fs-34 fc-f fw-500 mb-12">全球商户中心互联网平台</div>
             <div class="fs-14 fc-f fw-400 mb-40">预订门票和浏览全球热门旅行景点</div>
-            <div class="box-1 text-align-center fs-16 mb-12 hand-cursor">登录</div>
-            <div class="box-2 text-align-center fs-16 hand-cursor">注册</div>
+            <div class="box-1 text-align-center fs-16 mb-12 hand-cursor" @click="toLogin()">登录</div>
+            <div class="box-2 text-align-center fs-16 hand-cursor" @click="toRegister()">注册</div>
         </div>
     </div>
 
-    <div class="index-bg-2">
-
+    <div class="index-bg-2  box-sizing-border-box pt-60">
+      <div class="fs-30 mb-18 text-align-center">我們提供的服務</div>
+      <div class="fs-14 mb-60 box-sizing-border-box plr-220 lh-20">
+        我们提供的这个平台让全球景点商家和个人用户直接合作，景点商家将在这里展示和推广来自全球不同国家热门和受欢迎的景点。个人用户可以参与广告推广来赚取收益，通过在此平台上在线订票的方式来分享和推广全球景点，增加景点在全球范围内的知名度，用户们可以从每次订票中得到收益。个人用户还可以通过组建团队来启动互联网创业并实现团队盈利。我们与全球加密货币公司合作，为所有用户提供了新的、简单和安全的支付和提款方式！
+      </div>
+      <div class="box-sizing-border-box plr-220 justify-content-space-between">
+        <div class="home-1">
+          <img class="home-1-img" src="@/assets/img/home/home-1-1.png" alt="">
+          <div class="fs-14 mb-5">互联网合作模式</div>
+          <div class="fs-12 lh-17">我们为商家和用户之间的合作提供了一个便捷有效的平台，让来自全世界的人们实现互联网时代领先的合作。</div>
+        </div>
+        <div class="home-1">
+          <img class="home-1-img" src="@/assets/img/home/home-1-2.png" alt="">
+          <div class="fs-14 mb-5">线上订票收益</div>
+          <div class="fs-12 lh-17">用户可以每天通过实时订票景点门票的方式为商家做推广，根据每个不同景点门票得到不同的个人收益，该收益可以被提款。</div>
+        </div>
+        <div class="home-1">
+          <img class="home-1-img" src="@/assets/img/home/home-1-3.png" alt="">
+          <div class="fs-14 mb-5">开启生意团队</div>
+          <div class="fs-12 lh-17">通过邀请码邀请新用户加入GMC开始生意团队，实现得到团队自动化收益。</div>
+        </div>
+        <div class="home-1">
+          <img class="home-1-img" src="@/assets/img/home/home-1-4.png" alt="">
+          <div class="fs-14 mb-5">加密货币支付方式</div>
+          <div class="fs-12 lh-17">解决全球用户的付款和提款困难问题，我们提供了新的、快速的、便捷的、安全的存款和提款方式。</div>
+        </div>
+      </div>
     </div>
-    <div class="index-bg-3">
 
+    <div class="index-bg-3 box-sizing-border-box pt-60 ">
+      <div class="fs-30 mb-18 text-align-center mb-60">全球非常受欢迎的热门旅行国家</div>
+      <div class="justify-content-space-between plr-220 box-sizing-border-box mb-18">
+        <div class="box-sizing-border-box p-15-20 bg-c-f w-490">
+          <img class="home-2-img mb-12" src="@/assets/img/home/2-1.png" alt="">
+          <div class="fs-18 text-align-center">美國</div>
+        </div>
+        <div class="box-sizing-border-box p-15-20 bg-c-f w-490">
+          <img class="home-2-img mb-12" src="@/assets/img/home/2-2.png" alt="">
+          <div class="fs-18 text-align-center">中國</div>
+        </div>
+      </div>
+      <div class="justify-content-space-between plr-220 box-sizing-border-box">
+        <div class="box-sizing-border-box p-15-20 bg-c-f w-320">
+          <img class="home-2-img mb-12" src="@/assets/img/home/2-3.png" alt="">
+          <div class="fs-18 text-align-center">日本</div>
+        </div>
+        <div class="box-sizing-border-box p-15-20 bg-c-f w-320">
+          <img class="home-2-img mb-12" src="@/assets/img/home/2-4.png" alt="">
+          <div class="fs-18 text-align-center">泰國</div>
+        </div>
+        <div class="box-sizing-border-box p-15-20 bg-c-f w-320">
+          <img class="home-2-img mb-12" src="@/assets/img/home/2-5.png" alt="">
+          <div class="fs-18 text-align-center">歐洲</div>
+        </div>
+      </div>
     </div>
-    <div class="index-bg-4">
 
+    <div class="index-bg-4 box-sizing-border-box pt-60">
+      <div class="fs-30 mb-18 text-align-center mb-12">关于我们的工作模式</div>
+      <div class="fs-30 mb-18 text-align-center mb-12 mb-44">全球商户中心拥有非常重要的桥梁作用，为人们提供了一个有效而便捷的创业和推广业务平台，我们实现了让互联网经济快速增长。</div>
     </div>
+
     <div class="index-bg-5">
-    
+
     </div>
   </div>
 </template>
@@ -77,12 +130,25 @@ export default {
       height: 618px;
       background: url(@/assets/img/home/index2.png) no-repeat;
       background-size: 100% 100%;
+      .home-1{
+        width: 238px;
+        .home-1-img{
+          width: 100%;
+          height: 188px;
+          margin-bottom: 15px;
+        }
+      }
+
     }
     .index-bg-3{
       width: 100%;
       height: 768px;
       background: url(@/assets/img/home/index3.png) no-repeat;
       background-size: 100% 100%;
+      .home-2-img{
+        width: 100%;
+        height: 220px;
+      }
     }
     .index-bg-4{
       width: 100%;