tduck-front/src/views/official/index.vue

<template>
    <div class="official-container">
        <div class="header-container">
            <div class="background">
                <img src="@/assets/images/official/background.svg">
            </div>
            <div id="headerNav" :class="{'is-fixed' : isFixed}" class="top-header">
                <img class="logo" src="@/assets/images/official/TDUCK@2x.png" @click="$router.push({path:'/'})">
                <div>
                    <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" @click="$router.push({path:'/payService'})">付费服务</span>
                    <span class="menu-item add-contact-me">加入社群
                        <div>
                            <img src="@/assets/images/official/contact_me_qr.png">
                        </div>
                    </span>
                </div>
                <div>
                    <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">
                <div class="left">
                    <p class="slogan animate__animated animate__fadeInLeftBig">
                        填鸭，待定，SLOGAN
                    </p>
                    <p class="slogan-desc animate__animated animate__fadeInLeftBig">
                        TDuck - Have what you want,
                        get you income.
                    </p>
                    <el-button @click="$router.push({path:'/home'})">立即体验</el-button>
                </div>
                <div class="right">
                    <img src="@/assets/images/official/banner2.png">
                </div>
            </div>
        </div>
        <div class="introduction">
            <p class="en-title">OUR STRENGTHS</p>
            <div class="features">
                <div>
                    <p> 无保留，全开源</p>
                    <p> 遵循《阿里巴巴Java开发手册》编码规范，代码全量开源</p>
                </div>
                <div>
                    <p> 简洁，不失强大</p>
                    <p> 基于 Element + VUE 前端框架，界面简洁，独特美感</p>
                </div>
                <div>
                    <p> 所见，即所得</p>
                    <p> 无需编程，拖拽可视化模板或组件，即可生成精美问卷</p>
                </div>
            </div>
            <img class="img1" src="@/assets/images/official/desc1.png">
        </div>
        <p class="title">我们的解决方案</p>
        <div class="solutions">
            <div class="solution-item">
                <p class="title">客户体验</p>
                <img src="@/assets/images/official/solution1.png">
                <p class="desc">客户满意度 宾馆服务满意度 </p>
                <p class="desc"> 餐厅满意度调查 公共服务满意度</p>
                <p class="desc">旅游服务满意度 经销商满意度 </p>
                <p @click="$router.push({path:'/home'})">前往体验 ></p>
            </div>
            <div class="solution-item">
                <p class="title">市场调研</p>
                <img src="@/assets/images/official/solution2.png">
                <p class="desc">餐饮市场调查 手机市场调查 </p>
                <p class="desc"> 培训市场调查 消费者调查 </p>
                <p class="desc">APP市场调查 女性消费者偏好调查 </p>
                <p @click="$router.push({path:'/home'})">前往体验 ></p>
            </div>
            <div class="solution-item">
                <p class="title">报名登记</p>
                <img src="@/assets/images/official/solution3.png">
                <p class="desc">才艺比赛报名 粉丝活动报名 </p>
                <p class="desc"> 聚餐出游报名 活动/会务微信报名 </p>
                <p class="desc"> 讲座公开课报名 商品订单 </p>
                <p @click="$router.push({path:'/home'})">前往体验 ></p>
            </div>
        </div>
        <div class="use-company">
            <p class="title">他们都在使用</p>
            <div>
                <img src="https://qiniu.smileyi.top/lanzhouxiandaizhiye.png" style="width: 170px; height: 30px;">
                <img src="https://qiniu.smileyi.top/baoluekeji.png" style="width: 117px; height: 33px;">
                <img src="https://qiniu.smileyi.top/tongxinraunjian.png" style="width: 100px; height: 29px;">
                <img src="https://qiniu.smileyi.top/yunshangshien.png" style="width: 100px; height: 24px;">
            </div>
            <div>
                <img src="https://qiniu.smileyi.top/wanshitong.png" style="width: 24px; height: 24px;">
                <img src="https://qiniu.smileyi.top/shengji@2x.png" style="width: 48px; height: 46px;">
                <img src="https://qiniu.smileyi.top/hebeijiangong.png" style="width: 46px; height: 48px;">
                <img src="https://qiniu.smileyi.top/indexLogo.d128b371@2x.png" style="width: 134px; height: 41px;">
                <img src="https://qiniu.smileyi.top/zhongguopingan.png" style="width: 165px; height: 28px;">
            </div>
            <div>
                <img src="https://qiniu.smileyi.top/舒心家园房产@2x.png" style="width: 168px; height: 40px;">
                <img src="https://qiniu.smileyi.top/丽珠试剂@2x.png" style="width: 150px; height: 53px;">
                <img src="https://qiniu.smileyi.top/申银万国期货@2x.png" style="width: 192px; height: 47px;">
                <img src="https://qiniu.smileyi.top/ucloud@2x.png" style="width: 241px; height: 29px;">
                <img src="https://qiniu.smileyi.top/H3C@2x.png" style="width: 127px; height: 54px;">
            </div>
            <div>
                <img src="https://qiniu.smileyi.top/中央企业工业互联网融通平台@2x.png" style="width: 169px; height: 47px;">
                <img src="https://qiniu.smileyi.top/yifengertiyan.png" style="width: 206px; height: 32px;">
                <img src="https://qiniu.smileyi.top/hauxin@2x.png" style="width: 315px; height: 50px;">
                <img src="https://qiniu.smileyi.top/17466041@2x.png" style="width: 138px; height: 62px;">
                <img src="https://qiniu.smileyi.top/美博会@2x.png" style="width: 118px; height: 67px;">
            </div>
            <div>
                <img src="https://qiniu.smileyi.top/zhangzhutong.png" style="width: 43px; height: 45px;">
                <img src="https://qiniu.smileyi.top/泰享健康@2x.png" style="width: 196px; height: 48px;">
                <img src="https://qiniu.smileyi.top/renrenyun.png" style="width: 156px; height: 54px;">
                <img src="https://qiniu.smileyi.top/xykj@2x.png" style="width: 209px; height: 51px;">
                <img src="https://qiniu.smileyi.top/上海市闵行区卫生健康委员会@2x.png" style="width: 47px; height: 49px;">
            </div>
        </div>
        <div class="footer">
            <div class="top">
                <div>
                    <p class="title">关于我们</p>
                    <p class="desc">
                        TDuck — 是一款能够帮助
                        你进行信息收集、市场开拓、
                        客户挖掘并展开持续营销活 动的管理平台。
                    </p>
                </div>
                <div>
                    <p class="title">项目地址</p>
                    <a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Gitee码云</a>
                    <a href="https://github.com/TDuckCloud/tduck-platform" target="_blank">Github</a>
                </div>
                <div>
                    <p class="title">联系方式</p>
                    <p class="desc">pr@tduckapp.com</p>
                    <p class="desc">+86 15080929435</p>
                    <p class="desc"> 加入团队 mama@tduckapp.com</p>
                </div>
                <div>
                    <p class="title">友情地址</p>
                    <a href="https://element.eleme.cn/#/zh-CN/" target="_blank">ElementUI</a>
                    <a href="https://gitee.com/mrhj/form-generator" target="_blank"> form-generator</a>
                </div>
                <div class="qrcode">
                    <div>
                        <img src="@/assets/images/official/wxmpqrcode.png">
                        <p class="desc">填鸭-公众号</p>
                    </div>
                    <div>
                        <img src="@/assets/images/official/contact_me_qr.png">
                        <p class="desc">官方社群</p>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <p>本站由 ucloud 提供云服务器</p>
                <p>本站由 又拍云 提供CDN加速/云储存服务</p>
                <p>Copyright © 2021 TDuckApp. All Rights Reserved. 湘ICP备18023961号-2 版权所有</p>
            </div>
        </div>
    </div>
</template>

<script>
import store from '@/store'

export default {
    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: 1280px;
    height: 100%;
    //overflow-x: hidden;
}
.header-container {
    position: relative;
    .background {
        position: absolute;
        z-index: 1;
        img {
            width: 100%;
        }
    }
    .top-header {
        width: 100%;
        height: 72px;
        line-height: 72px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        * {
            z-index: 20;
        }
        .logo {
            width: 182px;
            height: 28px;
        }
        .menu-item {
            font-size: 17px;
            font-weight: 300;
            cursor: pointer;
            color: #fff;
            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;
            background: #fff;
            border-radius: 11px;
        }
    }
    .content-header {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-content: center;
        align-items: center;
        * {
            z-index: 20;
        }
        .slogan {
            font-size: 59px;
            font-weight: bold;
            color: #fff;
            line-height: 18px;
        }
        .slogan-desc {
            font-size: 37px;
            font-weight: bold;
            color: #fff;
            line-height: 43px;
        }
        .right img {
            padding-top: 30px;
            height: 540px;
            width: 375px;
        }
    }
}
.title {
    text-align: center;
    font-size: 23px;
    font-weight: bold;
    color: #232323;
    line-height: 76px;
}
.introduction {
    margin-top: 217px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .en-title {
        font-size: 101px;
        font-weight: bold;
        color: #fff;
        line-height: 97px;
        letter-spacing: 15px;
        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;
        div {
            margin: 0 20px;
            text-align: center;
        }
        :first-child {
            font-size: 25px;
            font-weight: bold;
            color: #222;
            line-height: 68px;
        }
        :last-child {
            font-size: 10px;
            font-weight: 300;
            color: #222;
            line-height: 22px;
        }
    }
    .img1 {
        min-width: 515px;
        height: 438px;
    }
}
.solutions {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    .solution-item {
        width: 250px;
        height: 390px;
        background: linear-gradient(-12deg, rgba(32, 84, 241, 0.08), rgba(34, 78, 243, 0.08), rgba(56, 234, 255, 0.08));
        border-radius: 15px;
        text-align: center;
        cursor: pointer;
        &:hover {
            box-shadow: 0 2px 49px 0 rgba(105, 119, 168, 0.54);
        }
        img {
            width: 197px;
            height: 147px;
        }
        .title {
            font-size: 16px;
            font-weight: bold;
            color: #276ef6;
            line-height: 69px;
        }
        .desc {
            font-size: 9px;
            font-weight: 300;
            color: #222;
            line-height: 15px;
        }
        :last-child {
            font-size: 10px;
            font-weight: 300;
            color: #276ef6;
            line-height: 69px;
        }
    }
}
.use-company {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    margin-top: 200px;
    & > div {
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    div {
        margin: 10px 3px;
    }
    img {
        margin-right: 30px;
    }
}
.footer {
    margin-top: 227px;
    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;
        justify-content: space-evenly;
        text-align: left;
        .title {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            line-height: 60px;
            text-align: left;
        }
        .desc {
            font-size: 12px;
            font-weight: 300;
            color: #fff;
            line-height: 20px;
            max-width: 292px;
        }
        a {
            font-size: 12px;
            font-weight: 300;
            color: #fff;
            cursor: pointer;
            line-height: 30px;
            display: block;
        }
        .qrcode {
            display: flex;
            div {
                margin: 10px;
            }
            img {
                margin-top: 30px;
                width: 115px;
                height: 114px;
            }
        }
    }
    .bottom {
        position: relative;
        bottom: 0;
        p {
            text-align: center;
            font-size: 16px;
            font-weight: 300;
            color: #fff;
            line-height: 20px;
        }
    }
}
.top-header {
    animation: stickyMenu1 0.4s ease-in-out;
}
.is-fixed {
    position: fixed;
    z-index: 999;
    animation: stickyMenu 0.5s 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-weight: 400;
    color: #2667f5;
}
</style>