bemege
4 years ago
6 changed files with 1229 additions and 386 deletions
File diff suppressed because it is too large
@ -0,0 +1,508 @@ |
|||
<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"> |
|||
让企业轻松拥有问卷系统 |
|||
</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 |
|||
class="image" |
|||
:src="require('@/assets/images/official/banner02.svg')" |
|||
fit="scale-down" |
|||
> |
|||
</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> |
|||
<img src="@/assets/images/official/use-commony.png"> |
|||
</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: center; |
|||
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{ |
|||
position: relative; |
|||
height: 700px; |
|||
width: 700px; |
|||
.image { |
|||
padding-top: 30px; |
|||
height: 840px; |
|||
width: 700px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.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; |
|||
|
|||
} |
|||
.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> |
|||
Loading…
Reference in new issue