From 660a40d471ebfdd3d4d117218ef8f28086c292cb Mon Sep 17 00:00:00 2001
From: wangqing <250543222@qq.com>
Date: Sun, 6 Jun 2021 17:31:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/root.js   |  10 +-
 src/views/404.vue            |   2 +-
 src/views/official/index.vue | 171 ++++++++++++++++++++++++++++++++---
 3 files changed, 162 insertions(+), 21 deletions(-)

diff --git a/src/router/modules/root.js b/src/router/modules/root.js
index d24eb25..17334c0 100644
--- a/src/router/modules/root.js
+++ b/src/router/modules/root.js
@@ -24,11 +24,6 @@ export default [
                 meta: {requireLogin: false},
                 component: () => import(/* webpackChunkName: 'root' */ '@/views/official/introduction.vue')
             },
-            {
-                path: 'login',
-                meta: {requireLogin: false},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/account/login.vue')
-            },
             {
                 path: 'forget/password',
                 meta: {requireLogin: false},
@@ -51,6 +46,11 @@ export default [
             }
         ]
     },
+    {
+        path: '/login',
+        meta: {requireLogin: false},
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/account/login.vue')
+    },
     {
         path: '/home',
         meta: {requireLogin: true},
diff --git a/src/views/404.vue b/src/views/404.vue
index fdeb0e0..5426786 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -23,7 +23,7 @@ export default {
     justify-content: center;
     justify-items: center;
     .title {
-        color: rgba(32, 91, 181, 100);
+        color: $--color-primary;
         font-size: 84px;
         text-align: left;
     }
diff --git a/src/views/official/index.vue b/src/views/official/index.vue
index 8fdf1f4..6b3538f 100644
--- a/src/views/official/index.vue
+++ b/src/views/official/index.vue
@@ -1,20 +1,28 @@
 <template>
     <div class="official-container">
+        <el-backtop target=".official-container" />
         <div class="header-container">
             <div class="background">
                 <img src="@/assets/images/official/background.svg">
             </div>
-            <div class="top-header">
+            <div id="headerNav" :class="{'is-fixed' : isFixed}" class="top-header">
                 <img class="logo" src="@/assets/images/official/TDUCK@2x.png">
                 <div>
-                    <span class="menu-item">首页</span>
-                    <span class="menu-item">开源项目</span>
-                    <span class="menu-item">开发文档</span>
+                    <span class="menu-item" @click="$router.push({path:'/'})">首页</span>
+                    <a class="menu-item" href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">开源项目</a>
+                    <a class="menu-item" href="https://doc.tduckapp.com/" target="_blank">开发文档</a>
                     <span class="menu-item">付费服务</span>
-                    <span class="menu-item">加入社群</span>
+                    <span class="menu-item add-contact-me">加入社群
+                        <div>
+                            <img src="@/assets/images/official/contact_me_qr.png">
+                        </div>
+                    </span>
                 </div>
                 <div>
-                    <el-button>登录</el-button>
+                    <el-button v-if="isLogin" @click="$router.push({path:'/home'})">控 制 台</el-button>
+                    <el-button v-if="!isLogin" @click="$router.push({path:'/login'})">
+                        登 录
+                    </el-button>
                 </div>
             </div>
             <div class="content-header">
@@ -26,7 +34,7 @@
                         TDuck - Have what you want,
                         get you income.
                     </p>
-                    <el-button>立即体验</el-button>
+                    <el-button @click="$router.push({path:'/home'})">立即体验</el-button>
                 </div>
                 <div class="right">
                     <img src="@/assets/images/official/banner2.png">
@@ -59,7 +67,7 @@
                 <p class="desc">客户满意度 宾馆服务满意度 </p>
                 <p class="desc"> 餐厅满意度调查 公共服务满意度</p>
                 <p class="desc">旅游服务满意度 经销商满意度 </p>
-                <p>前往体验 ></p>
+                <p @click="$router.push({path:'/home'})">前往体验 ></p>
             </div>
             <div class="solution-item">
                 <p class="title">市场调研</p>
@@ -67,7 +75,7 @@
                 <p class="desc">餐饮市场调查 手机市场调查 </p>
                 <p class="desc"> 培训市场调查 消费者调查 </p>
                 <p class="desc">APP市场调查 女性消费者偏好调查 </p>
-                <p>前往体验 ></p>
+                <p @click="$router.push({path:'/home'})">前往体验 ></p>
             </div>
             <div class="solution-item">
                 <p class="title">报名登记</p>
@@ -75,7 +83,7 @@
                 <p class="desc">才艺比赛报名 粉丝活动报名 </p>
                 <p class="desc"> 聚餐出游报名 活动/会务微信报名 </p>
                 <p class="desc"> 讲座公开课报名 商品订单 </p>
-                <p>前往体验 ></p>
+                <p @click="$router.push({path:'/home'})">前往体验 ></p>
             </div>
         </div>
         <p class="title">他们都在使用</p>
@@ -162,15 +170,56 @@
 </template>
 
 <script>
+import store from '@/store'
+
 export default {
-    name: 'Official'
+    name: 'Official',
+    data() {
+        return {
+            isFixed: false,
+            offsetTop: 0
+        }
+    },
+    computed: {
+        getStore() {
+            return store
+        },
+        isLogin() {
+            return this.getStore.getters['user/isLogin']
+        }
+    },
+    mounted() {
+        window.addEventListener('scroll', this.initHeight)
+        let that = this
+        this.$nextTick(() => {
+            // 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
+            that.offsetTop = document.querySelector('#headerNav').offsetTop
+        })
+    },
+    // 回调中移除监听
+    destroyed() {
+        window.removeEventListener('scroll', this.handleScroll)
+    },
+    methods: {
+        initHeight() {
+            // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
+            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+            // 如果被卷曲的高度大于吸顶元素到顶端位置 的距离
+            this.isFixed = scrollTop > this.offsetTop
+        }
+    }
 }
 </script>
 
 <style lang="scss" scoped>
+html,
+body {
+    height: 100%;
+}
 .official-container {
-    min-width: 960px;
+    min-width: 1280px;
     height: 100%;
+    overflow-x: hidden;
 }
 .header-container {
     position: relative;
@@ -182,6 +231,9 @@ export default {
         }
     }
     .top-header {
+        width: 100%;
+        height: 72px;
+        line-height: 72px;
         display: flex;
         flex-direction: row;
         justify-content: space-around;
@@ -199,6 +251,30 @@ export default {
             margin-right: 73px;
             line-height: 72px;
         }
+        .add-contact-me {
+            position: relative;
+            div {
+                margin-top: 20px;
+                position: absolute;
+                right: 0%;
+                top: 100%;
+                visibility: hidden;
+                opacity: 0;
+                transform: translateY(100px);
+                transition: 0.3s;
+            }
+            img {
+                width: 100px;
+                height: 100px;
+            }
+        }
+        .add-contact-me:hover {
+            div {
+                visibility: visible;
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
         .login-btn {
             width: 95px;
             height: 37px;
@@ -252,6 +328,7 @@ export default {
         background: linear-gradient(-32deg, rgba(32, 84, 241, 0.51) 0%, rgba(34, 78, 243, 0.51) 0%, rgba(56, 234, 255, 0.51) 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
+        animation: show 0.5s forwards;
     }
     .features {
         display: flex;
@@ -331,6 +408,9 @@ export default {
     width: 100%;
     height: 464px;
     background: linear-gradient(163deg, rgba(32, 84, 241, 0.67), rgba(34, 78, 243, 0.67), rgba(56, 234, 255, 0.67));
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     .top {
         display: flex;
         flex-direction: row;
@@ -347,7 +427,7 @@ export default {
             font-weight: 300;
             color: #fff;
             line-height: 20px;
-            width: 292px;
+            max-width: 292px;
         }
         a {
             font-size: 16px;
@@ -359,6 +439,9 @@ export default {
         }
         .qrcode {
             display: flex;
+            div {
+                margin: 10px;
+            }
             img {
                 margin-top: 30px;
                 width: 115px;
@@ -367,7 +450,8 @@ export default {
         }
     }
     .bottom {
-        margin-top: 130px;
+        position: relative;
+        bottom: 0;
         p {
             text-align: center;
             font-size: 16px;
@@ -377,8 +461,65 @@ export default {
         }
     }
 }
+.top-header {
+    animation: stickyMenu1 0.5s ease-in-out;
+}
+.is-fixed {
+    position: fixed;
+    z-index: 999;
+    animation: stickyMenu 0.7s ease-in-out;
+    top: 0;
+    background: linear-gradient(-67deg, rgba(32, 84, 241, 1), rgba(51, 201, 253, 1), rgba(35, 86, 244, 1));
+}
+@keyframes stickyMenu1 {
+    0% {
+        opacity: 0;
+        background: rgba(32, 84, 241, 1);
+    }
+    50% {
+        opacity: 0.5;
+        background: rgba(32, 84, 241, 1);
+    }
+    100% {
+        background-color: transparent;
+        opacity: 1;
+    }
+}
+@keyframes stickyMenu {
+    0% {
+        margin-top: -120px;
+        opacity: 0;
+    }
+    50% {
+        margin-top: -64px;
+        opacity: 0;
+    }
+    100% {
+        margin-top: 0;
+        opacity: 1;
+    }
+}
+@media only screen and (max-width: 1580px) {
+    .content-header {
+        .slogan-desc {
+            font-size: 25px !important;
+        }
+    }
+}
+@media only screen and (max-width: 1280px) {
+    .content-header {
+        .slogan {
+            font-size: 39px !important;
+        }
+        .slogan-desc {
+            font-size: 20px !important;
+        }
+    }
+}
+::v-deep .el-button {
+    border: none;
+}
 ::v-deep .el-button span {
-    //font-size: 18px;
     font-weight: 400;
     color: #2667f5;
 }