jianjun
4 years ago
7 changed files with 4 additions and 1790 deletions
@ -1,213 +0,0 @@ |
|||
<template> |
|||
<div class="data-pay"> |
|||
<el-row :span="24"> |
|||
<el-col v-for="(item,index) in data" |
|||
:key="index" |
|||
:md="span" |
|||
:offset="index==0?4:0" |
|||
:sm="12" |
|||
:xs="24" |
|||
> |
|||
<div class="item"> |
|||
<div :style="{backgroundColor:item.color}" |
|||
class="top" |
|||
/> |
|||
<div class="header"> |
|||
<p class="title">{{ item.title }}</p> |
|||
<img :src="item.src" |
|||
alt="" |
|||
class="img" |
|||
> |
|||
<template v-if="item.subtitle"> |
|||
<p :style="{color:item.color}" |
|||
class="subtitle" |
|||
> |
|||
{{ item.subtitle }} |
|||
</p> |
|||
</template> |
|||
<template v-if="item.money || item.dismoney"> |
|||
<p :style="{color:item.color}" |
|||
class="money" |
|||
> |
|||
<span>¥</span> |
|||
<count-to :end-val="item.money" /> |
|||
<s>{{ item.dismoney }}</s> |
|||
<em>{{ item.tip }}</em> |
|||
</p> |
|||
</template> |
|||
<div class="line" /> |
|||
<a :href="item.href?item.href:'javascript:void(0);'" |
|||
:style="{backgroundColor:item.color}" |
|||
class="btn" |
|||
@click="item.click?item.click(item):''" |
|||
>{{ item.subtext }}</a> |
|||
</div> |
|||
<div class="list"> |
|||
<div v-for="(citem,cindex) in item.list" |
|||
:key="cindex" |
|||
class="list-item" |
|||
> |
|||
<i v-if="citem.check" |
|||
:style="{color:item.color}" |
|||
class="list-item-icon list-item--check" |
|||
>√</i> |
|||
<i v-else |
|||
class="list-item-icon list-item--no" |
|||
>x</i> |
|||
<a :href="citem.href?citem.href:'javascript:void(0);'"> |
|||
<el-tooltip :disabled="!citem.tip" |
|||
effect="dark" |
|||
placement="top" |
|||
> |
|||
<div slot="content" |
|||
v-html="citem.tip" |
|||
/> |
|||
<span :class="{'list-item--link':citem.href}">{{ citem.title }}</span> |
|||
</el-tooltip> |
|||
|
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CountTo from '@/components/CountTo' |
|||
|
|||
export default { |
|||
name: 'DataPay', |
|||
components: {CountTo}, |
|||
props: { |
|||
option: { |
|||
type: Object, |
|||
default: () => { |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
animation() { |
|||
return this.option.animation |
|||
}, |
|||
decimals() { |
|||
return this.option.decimals || 0 |
|||
}, |
|||
span() { |
|||
return this.option.span || 6 |
|||
}, |
|||
data() { |
|||
return this.option.data || [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.data-pay .item { |
|||
margin: 0 auto; |
|||
padding-bottom: 16px; |
|||
width: 80%; |
|||
position: relative; |
|||
border-radius: 4px; |
|||
background-color: #fff; |
|||
min-height: 670px; |
|||
-webkit-box-shadow: 1px 2px 10px #eee; |
|||
box-shadow: 1px 2px 10px #eee; |
|||
} |
|||
|
|||
.data-pay .top { |
|||
width: 100%; |
|||
height: 6px; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
border-radius: 4px 4px 0 0; |
|||
} |
|||
|
|||
.data-pay .header { |
|||
margin-bottom: 40px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.data-pay .title { |
|||
text-align: center; |
|||
padding: 20px 0 10px; |
|||
font-size: 20px; |
|||
font-weight: 200; |
|||
} |
|||
|
|||
.data-pay .money span { |
|||
margin-right: 5px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.data-pay .money .b { |
|||
margin-right: 2px; |
|||
font-size: 20px; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.data-pay .money s { |
|||
margin-right: 3px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.data-pay .money em { |
|||
font-size: 14px; |
|||
font-style: normal; |
|||
} |
|||
|
|||
.data-pay .img { |
|||
width: 50px; |
|||
} |
|||
|
|||
.data-pay .line { |
|||
width: 60%; |
|||
height: 1px; |
|||
background: rgba(150, 150, 150, 0.1); |
|||
margin: 20px auto; |
|||
} |
|||
|
|||
.data-pay .btn { |
|||
display: block; |
|||
width: 120px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
border-radius: 32px; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
-webkit-transition: opacity 0.2s ease-in-out; |
|||
transition: opacity 0.2s ease-in-out; |
|||
} |
|||
|
|||
.data-pay .list-item { |
|||
list-style: none; |
|||
padding-left: 20px; |
|||
margin-bottom: 12px; |
|||
color: #666; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.data-pay .list-item a { |
|||
color: #666; |
|||
} |
|||
|
|||
.data-pay .list-item-icon { |
|||
color: #515a6e; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.data-pay .list-item--link { |
|||
font-size: 12px; |
|||
color: #2d8cf0; |
|||
} |
|||
|
|||
.data-pay .list-item--no, |
|||
.data-pay .list-item--no + span { |
|||
color: #c5c8ce; |
|||
} |
|||
</style> |
|||
@ -1,85 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<Header /> |
|||
<data-pay :option="option" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import DataPay from '@/views/official/DataPay' |
|||
import Header from '@/views/official/header' |
|||
import {MessageBox} from 'element-ui' |
|||
|
|||
export default { |
|||
name: 'PayService', |
|||
components: {Header, DataPay}, |
|||
data() { |
|||
return { |
|||
option: { |
|||
span: 8, |
|||
data: [ |
|||
{ |
|||
title: '私有部署', |
|||
src: 'https://qiniu.smileyi.top/vip1.png', |
|||
money: 599, |
|||
dismoney: 999, |
|||
tip: '/次', |
|||
color: '#2054F0FF', |
|||
subtext: '购买', |
|||
click: function() { |
|||
MessageBox.alert('<img src="https://qiniu.smileyi.top/pay_qrcode1.jpg"/>', '添加客服微信', { |
|||
dangerouslyUseHTMLString: true |
|||
}) |
|||
}, |
|||
list: [ |
|||
{ |
|||
title: '官方部署，快速使用', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '一次部署，开心使用', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '愉快解决，不再头疼', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '服务稳定，持久耐用', |
|||
check: true |
|||
} |
|||
] |
|||
}, { |
|||
title: '私有定制', |
|||
src: 'https://qiniu.smileyi.top/vip2.png', |
|||
color: '#33C9FDFF', |
|||
money: 888, |
|||
dismoney: 1000, |
|||
tip: '/起', |
|||
subtext: '购买', |
|||
click: function() { |
|||
MessageBox.alert('<img src="https://qiniu.smileyi.top/pay_qrcode2.jpg"/>', '添加客服微信', { |
|||
dangerouslyUseHTMLString: true |
|||
}) |
|||
}, |
|||
list: [ |
|||
{ |
|||
title: '私有定制，随心所欲', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '强大团队，快速赋能你的业务', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '效果满意，价格美丽', |
|||
check: true |
|||
} |
|||
] |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
@ -1,99 +0,0 @@ |
|||
<template> |
|||
<div class="top-header"> |
|||
<img class="logo" src="@/assets/images/official/TDUCK@2x.png"> |
|||
<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> |
|||
</template> |
|||
|
|||
<script> |
|||
import store from '@/store' |
|||
|
|||
export default { |
|||
name: 'Header', |
|||
computed: { |
|||
getStore() { |
|||
return store |
|||
}, |
|||
isLogin() { |
|||
return this.getStore.getters['user/isLogin'] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.top-header { |
|||
width: 100%; |
|||
height: 72px; |
|||
line-height: 72px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-around; |
|||
align-content: center; |
|||
align-items: center; |
|||
background: linear-gradient(-67deg, rgb(32, 84, 240), rgba(51, 201, 253, 1), rgba(35, 86, 244, 1)); |
|||
* { |
|||
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; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -1,871 +0,0 @@ |
|||
<template> |
|||
<el-container> |
|||
<el-header |
|||
v-if="style.header.isShow" |
|||
:style="style.header" |
|||
data-aos="fade-down" |
|||
> |
|||
<div class="header-page"> |
|||
<div |
|||
class="header-logo" |
|||
style="transform: translate(0px, 0px)" |
|||
data-aos="fade-right" |
|||
@click="$router.push({path:'/'})" |
|||
> |
|||
<img |
|||
src="@/assets/images/official/TDUCK@2x.png" |
|||
alt="img" |
|||
> |
|||
</div> |
|||
<div class="header-menu" :class="{ 'header-menu-open': isMenuShow }"> |
|||
<a @click="$router.push({path:'/'})">首页</a> |
|||
<a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">开源项目</a> |
|||
<a class="menu-item" href="https://doc.tduckapp.com/" target="_blank">开发文档</a> |
|||
<a @click="$router.push({path:'/payService'})">付费服务</a> |
|||
<a class="add-contact-me"> |
|||
加入社群 |
|||
<div> |
|||
<img src="@/assets/images/official/contact_me_qr.png"> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="header-btn"> |
|||
<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 |
|||
class="header-mobile-menu" |
|||
:class="{ 'header-mobile-menu-open': isMenuShow }" |
|||
@click="onShowMenu" |
|||
> |
|||
<em /><em /><em /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-header> |
|||
<el-main :style="style.content"> |
|||
<div id="back-box" class="back-box" /> |
|||
<div id="content-page" class="content-page"> |
|||
<div class="content-explain"> |
|||
<h1 data-aos="fade-up" data-aos-duration="1000">让企业轻松拥有问卷系统</h1> |
|||
<h1 data-aos="fade-up" data-aos-duration="1100">TDuck - Have what you want, get you income.</h1> |
|||
<div data-aos="fade-up" data-aos-duration="1200"> |
|||
<el-button class="banner-button-start" @click="onStart">开始使用</el-button> |
|||
<el-button class="banner-button-preview" @click="$router.push({path:'/home'})">在线预览</el-button> |
|||
</div> |
|||
</div> |
|||
<div id="image" data-aos="fade-up" class="image"> |
|||
<img :src="require('@/assets/images/official/banner02.svg')"> |
|||
</div> |
|||
</div> |
|||
<div class="content-wrapper"> |
|||
<div class="en-title" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1000">OUR STRENGTHS</div> |
|||
<el-row :gutter="2" class="content-wrapper-features"> |
|||
<el-col :xs="24" :md="8" data-aos="fade-right"> |
|||
<p class="title">无保留，全开源</p> |
|||
<p>遵循《阿里巴巴Java开发手册》编码规范，代码全量开源</p> |
|||
</el-col> |
|||
<el-col :xs="24" :md="8" data-aos="fade-up"> |
|||
<p class="title">简洁，不失强大</p> |
|||
<p>基于 Element + VUE 前端框架，界面简洁，独特美感</p> |
|||
</el-col> |
|||
<el-col :xs="24" :md="8" data-aos="fade-left"> |
|||
<p class="title">所见，即所得</p> |
|||
<p>无需编程，拖拽可视化模板或组件，即可生成精美问卷</p> |
|||
</el-col> |
|||
</el-row> |
|||
<div data-aos="zoom-in" data-aos-duration="1000" class="content-wrapper-image"> |
|||
<img src="@/assets/images/official/desc1.png"> |
|||
</div> |
|||
<div class="content-wrapper-solutions"> |
|||
<p class="title">我们的解决方案</p> |
|||
<el-row> |
|||
<el-col :xs="24" :md="8"> |
|||
<div class="solution-item" data-aos="zoom-out-up" data-aos-duration="1000"> |
|||
<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> |
|||
</el-col> |
|||
<el-col :xs="24" :md="8" data-aos="zoom-out-up"> |
|||
<div class="solution-item" data-aos-duration="1000"> |
|||
<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> |
|||
</el-col> |
|||
<el-col :xs="24" :md="8" data-aos="zoom-out-up"> |
|||
<div class="solution-item" data-aos-duration="1000"> |
|||
<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> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div class="content-wrapper-company"> |
|||
<p class="title">他们都在使用</p> |
|||
<img data-aos="zoom-in" src="@/assets/images/official/use-commony.png"> |
|||
</div> |
|||
</div> |
|||
</el-main> |
|||
<el-footer :style="style.footer"> |
|||
<div class="footer-page"> |
|||
<el-row :gutter="20" class="footer-content"> |
|||
<el-col :xs="24" :md="6" data-aos="fade-up" data-aos-delay="100"> |
|||
<h1>关于我们</h1> |
|||
<p> |
|||
TDuck — 是一款能够帮助 |
|||
你进行信息收集、市场开拓、 |
|||
客户挖掘并展开持续营销活 动的管理平台。 |
|||
</p> |
|||
</el-col> |
|||
<el-col :xs="24" :md="4" :offset="1" class="project-url" data-aos="fade-up" data-aos-delay="200"> |
|||
<h1>项目地址</h1> |
|||
<a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Gitee码云</a> |
|||
<a href="https://github.com/TDuckCloud/tduck-platform" target="_blank">Github</a> |
|||
</el-col> |
|||
<el-col :xs="24" :md="5" data-aos="fade-up" data-aos-delay="300"> |
|||
<h1>联系方式</h1> |
|||
<span>pr@tduckapp.com</span> |
|||
<span>+86 15080929435</span> |
|||
<span> 加入团队 mama@tduckapp.com</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="4" data-aos="fade-up" data-aos-delay="400"> |
|||
<h1>友情地址</h1> |
|||
<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> |
|||
</el-col> |
|||
<el-col :xs="24" :md="4" data-aos="fade-up" data-aos-delay="500"> |
|||
<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> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="footer-copyright" data-aos="fade-down" data-aos-anchor-placement="top-bottom"> |
|||
<p>本站由 ucloud 提供云服务器</p> |
|||
<p>本站由 又拍云 提供CDN加速/云储存服务</p> |
|||
<p>Copyright © 2021 TDuckApp. All Rights Reserved. 湘ICP备18023961号-2 版权所有</p> |
|||
</div> |
|||
</div> |
|||
</el-footer> |
|||
</el-container> |
|||
</template> |
|||
|
|||
<script> |
|||
import store from '@/store' |
|||
|
|||
export default { |
|||
name: 'AppIndex', |
|||
data() { |
|||
return { |
|||
// 是否展开菜单 只在屏幕宽度小于767时有效 |
|||
isMenuShow: false, |
|||
// 滚动条到顶部的距离 |
|||
scrollTop: 0, |
|||
// 屏幕宽度 |
|||
screenWidth: document.body.clientWidth, |
|||
style: { |
|||
header: { |
|||
isShow: true, |
|||
isFixed: false, |
|||
// background: "linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)", |
|||
height: 'unset', |
|||
lineHeight: '64px', |
|||
background: 'rgba(255,255,255,0)', |
|||
position: 'absolute', |
|||
width: '100%', |
|||
top: 0, |
|||
zIndex: 100, |
|||
padding: 0 |
|||
// overflow: "hidden", |
|||
// transition:'height 0.5s' |
|||
}, |
|||
content: { |
|||
overflow: 'hidden', |
|||
position: 'relative' |
|||
}, |
|||
footer: { |
|||
height: 'auto', |
|||
background: |
|||
'linear-gradient( 163deg, rgba(32, 84, 241, 0.67), rgba(34, 78, 243, 0.67), rgba(56, 234, 255, 0.67))', |
|||
marginTop: '100px' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
getStore() { |
|||
return store |
|||
}, |
|||
isLogin() { |
|||
return this.getStore.getters['user/isLogin'] |
|||
} |
|||
}, |
|||
watch: { |
|||
/* 监听屏幕宽度变化 */ |
|||
screenWidth(val) { |
|||
this.screenWidth = val |
|||
if (val > 751) { |
|||
this.isMenuShow = false |
|||
} |
|||
console.log('this.screenWidth', this.screenWidth) |
|||
} |
|||
}, |
|||
mounted() { |
|||
window.addEventListener('scroll', this.handleScroll, true) |
|||
const that = this |
|||
window.onresize = () => { |
|||
return (() => { |
|||
window.screenWidth = document.body.clientWidth |
|||
that.screenWidth = window.screenWidth |
|||
})() |
|||
} |
|||
this.msgCard() |
|||
}, |
|||
methods: { |
|||
// 屏幕滚动方法 |
|||
handleScroll() { |
|||
// 滚动时收起菜单栏 |
|||
this.isMenuShow = false |
|||
this.scrollTop = |
|||
document.documentElement.scrollTop || document.body.scrollTop |
|||
// 屏幕滚动大于64 设置背景色 |
|||
if (this.scrollTop > 64) { |
|||
this.style.header.background = |
|||
'linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)' |
|||
this.style.header.position = 'fixed' |
|||
// 动画 |
|||
if (!this.style.header.isFixed) { |
|||
this.style.header.isShow = false |
|||
setTimeout(() => { |
|||
this.style.header.isShow = true |
|||
}, 10) |
|||
} |
|||
this.style.header.isFixed = true |
|||
// this.style.header.height = '0' |
|||
// this.transition ='height 0.5s' |
|||
// this.style.header.header = '64px' |
|||
} else { |
|||
this.style.header.isFixed = false |
|||
|
|||
this.style.header.background = 'rgba(255,255,255,0)' |
|||
// 小于64 判断当前菜单栏是否处于展开状态 |
|||
// if (this.isMenuShow) { |
|||
// this.style.header.background = |
|||
// "linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)"; |
|||
// } else { |
|||
// this.style.header.background = "rgba(255,255,255,0)"; |
|||
// } |
|||
this.style.header.position = 'absolute' |
|||
} |
|||
}, |
|||
// 屏幕变窄时展开和关闭menu的方法 |
|||
onShowMenu() { |
|||
this.isMenuShow = !this.isMenuShow |
|||
if (this.isMenuShow) { |
|||
// 如果展开 设置背景 |
|||
this.style.header.background = |
|||
'linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)' |
|||
} else { |
|||
// 如果是关闭 则在动画完成之后根据当前是否在顶部修改背景 当前屏幕滚动小于64px：设置透明 否则 显示背景 |
|||
setTimeout(() => { |
|||
if (this.scrollTop > 64) { |
|||
this.style.header.background = |
|||
'linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)' |
|||
} else { |
|||
this.style.header.background = 'rgba(255,255,255,0)' |
|||
} |
|||
}, 300) |
|||
} |
|||
}, |
|||
onStart() { |
|||
// window.location.href = 'https://gitee.com/TDuckApp/tduck-platform' |
|||
window.open('https://gitee.com/TDuckApp/tduck-platform', '_blank') |
|||
}, |
|||
msgCard() { |
|||
// <a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">3798</a> |
|||
this.$notify({ |
|||
title: '关注下 Star 数', |
|||
duration: 0, |
|||
position: 'bottom-left', |
|||
customClass: 'notify-success', |
|||
dangerouslyUseHTMLString: true, |
|||
message: '<div style="line-height: 30px">我们需要您的支持，请点击按钮帮助我们增加 gitee star。<span class="github-btn"><a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Start</a></span></div>' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
.header-page { |
|||
max-width: 1280px; |
|||
// box-shadow: rgb(0 0 0 / 5%) 0px 4px 6px; |
|||
margin: auto; |
|||
display: flex; |
|||
padding: 0 24px; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
|
|||
.header-logo { |
|||
display: inline-block; |
|||
position: relative; |
|||
width: 150px; |
|||
min-width: 150px; |
|||
line-height: 64px; |
|||
|
|||
img { |
|||
width: 100%; |
|||
vertical-align: middle; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
.header-btn { |
|||
position: relative; |
|||
text-align: right; |
|||
|
|||
button { |
|||
font-size: 12px; |
|||
font-weight: 400; |
|||
background-color: #fff; |
|||
color: #2667f5; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
padding: 0 15px; |
|||
border: none; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.header-mobile-menu-open { |
|||
em:nth-child(1) { |
|||
transform: translateY(6px) rotate(45deg); |
|||
} |
|||
|
|||
em:nth-child(2) { |
|||
opacity: 0; |
|||
} |
|||
|
|||
em:nth-child(3) { |
|||
transform: translateY(-6px) rotate(-45deg); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.header-menu { |
|||
a { |
|||
font-weight: 400; |
|||
color: #fff; |
|||
padding: 0 20px; |
|||
} |
|||
|
|||
a:first-child { |
|||
padding-left: 0; |
|||
} |
|||
|
|||
a:last-child { |
|||
padding-right: 0; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
} |
|||
|
|||
:hover { |
|||
div { |
|||
visibility: visible; |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.header-menu-open { |
|||
height: calc(48px * 5); |
|||
} |
|||
} |
|||
|
|||
.back-box { |
|||
color: #fff; |
|||
position: absolute; |
|||
top: -100vh; |
|||
left: -100px; |
|||
width: 150vw; |
|||
// height: 50vw; |
|||
height: 150vh; |
|||
border-radius: 0 280px; |
|||
transform: rotate(-22deg); |
|||
background: linear-gradient(60deg,#1E53F4,#1E53F4,#30cffd,#30cffd,#30cffd); |
|||
} |
|||
|
|||
.content-page { |
|||
height: calc(100vh - 64px); |
|||
color: #fff; |
|||
// mix-blend-mode: difference; |
|||
margin-top: 64px; |
|||
max-width: 1280px; |
|||
margin: auto; |
|||
padding: 24px; |
|||
display: flex; |
|||
// align-items:center; |
|||
// text-align: center; |
|||
position: relative; |
|||
|
|||
.content-explain { |
|||
z-index: 1; |
|||
position: absolute; |
|||
top: 20%; |
|||
padding: 0 40px; |
|||
// min-width: 650px; |
|||
|
|||
h1:first-child { |
|||
font-size: 50px; |
|||
} |
|||
|
|||
> div { |
|||
width: 100% !important; |
|||
margin-top: 40px; |
|||
text-align: center; |
|||
|
|||
.banner-button { |
|||
&-start { |
|||
min-width: 140px; |
|||
color: #2667f5; |
|||
// background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%); |
|||
box-shadow: 0 8px 24px fade(#ffffff, 35); |
|||
border-radius: 20px; |
|||
border: none; |
|||
padding: 0 42px; |
|||
line-height: 40px; |
|||
height: 40px; |
|||
transition: transform .3s, box-shadow .3s; |
|||
|
|||
&:hover { |
|||
transform: translateY(-5px); |
|||
box-shadow: 0 13px 24px fade(#ffffff, 45); |
|||
// background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%); |
|||
} |
|||
} |
|||
|
|||
&-preview { |
|||
box-shadow: 0 8px 24px fade(#ffffff, 35); |
|||
border-radius: 20px; |
|||
padding: 0 42px; |
|||
border: 1px solid #fff; |
|||
color: #fff; |
|||
line-height: 40px; |
|||
height: 40px; |
|||
background-color: rgba($color: #000000, $alpha: 0); |
|||
transition: transform .3s, box-shadow .3s; |
|||
|
|||
&:hover { |
|||
color: #2667f5; |
|||
background-color: #FFF; |
|||
transform: translateY(-5px); |
|||
transition: all 0.4s ease 0s; |
|||
box-shadow: 0 13px 24px fade(#ffffff, 45); |
|||
// background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.image { |
|||
position: absolute; |
|||
top: 20%; |
|||
right: 0; |
|||
width: 50%; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content-wrapper { |
|||
.title { |
|||
text-align: center; |
|||
font-size: 23px; |
|||
font-weight: bold; |
|||
color: #232323; |
|||
line-height: 76px; |
|||
} |
|||
|
|||
max-width: 1280px; |
|||
margin: auto; |
|||
margin-top: 200px; |
|||
text-align: center; |
|||
|
|||
.en-title { |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
margin: auto; |
|||
margin: 100px 0; |
|||
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% |
|||
); |
|||
line-height: 7vw; |
|||
font-size: 6vw; |
|||
font-weight: bold; |
|||
letter-spacing: 10%; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
} |
|||
|
|||
&-features { |
|||
> div { |
|||
p:first-child { |
|||
font-size: 25px; |
|||
font-weight: bold; |
|||
color: #222; |
|||
line-height: 68px; |
|||
} |
|||
|
|||
p:last-child { |
|||
font-size: 10px; |
|||
font-weight: 300; |
|||
color: #222; |
|||
line-height: 22px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-image { |
|||
width: 100%; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
&-solutions { |
|||
p { |
|||
text-align: center; |
|||
font-size: 23px; |
|||
font-weight: bold; |
|||
color: #232323; |
|||
line-height: 76px; |
|||
} |
|||
|
|||
.solution-item { |
|||
margin: auto; |
|||
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; |
|||
transition: transform .3s, box-shadow .3s; |
|||
|
|||
&:hover { |
|||
transform: translateY(-5px); |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-company { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-content: center; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
margin-top: 200px; |
|||
|
|||
img { |
|||
width: 80%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.footer-page { |
|||
max-width: 1280px; |
|||
margin: auto; |
|||
|
|||
.footer-content { |
|||
padding: 64px 24px 32px 24px; |
|||
color: #FFF; |
|||
|
|||
h1 { |
|||
font-size: 20px; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
a, span, p { |
|||
display: block; |
|||
margin-bottom: 12px; |
|||
font-size: 12px; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.qrcode { |
|||
width: 100%; |
|||
display: flex; |
|||
align-content: center; |
|||
|
|||
div { |
|||
margin: 10px; |
|||
} |
|||
|
|||
img { |
|||
width: 50%; |
|||
margin-top: 30px; |
|||
min-width: 115px; |
|||
min-height: 114px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.footer-copyright { |
|||
padding-bottom: 12px; |
|||
text-align: center; |
|||
color: #FFF; |
|||
font-weight: 300; |
|||
|
|||
p { |
|||
margin-top: 0; |
|||
margin-bottom: 8px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// @media screen and (max-width: 576px) { |
|||
@media screen and (max-width: 600px) { |
|||
#back-box { |
|||
min-width: 450px; |
|||
min-height: 450px; |
|||
position: absolute; |
|||
top: -3%; |
|||
left: -50%; |
|||
right: -50%; |
|||
width: 200vw; |
|||
// height: 50vw; |
|||
height: 200vw; |
|||
border-radius: 50%; |
|||
transform: rotate(-22deg); |
|||
background: linear-gradient(-67deg, #30cffd, #1e53f4); |
|||
} |
|||
#content-page { |
|||
padding: 24px 0; |
|||
|
|||
h1:first-child { |
|||
font-size: 30px; |
|||
} |
|||
|
|||
h1:last-child { |
|||
font-size: 24px; |
|||
} |
|||
|
|||
#image { |
|||
top: 53% !important; |
|||
right: 0 !important; |
|||
width: 100% !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media screen and (max-width: 767px) { |
|||
.el-header { |
|||
overflow: hidden; |
|||
} |
|||
.header-menu { |
|||
transition: all 0.3s; |
|||
width: 100%; |
|||
height: 0; |
|||
order: 5; |
|||
|
|||
a { |
|||
padding: 0 20px !important; |
|||
display: block; |
|||
height: 48px; |
|||
line-height: 48px; |
|||
} |
|||
} |
|||
.header-btn { |
|||
button { |
|||
margin-right: 48px; |
|||
} |
|||
|
|||
.header-mobile-menu { |
|||
width: 16px; |
|||
height: 14px; |
|||
position: absolute; |
|||
top: 27px; |
|||
right: 0; |
|||
cursor: pointer; |
|||
float: right; |
|||
z-index: 100; |
|||
|
|||
em { |
|||
display: block; |
|||
width: 100%; |
|||
height: 2px; |
|||
background: #fff; |
|||
margin-top: 4px; |
|||
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity; |
|||
} |
|||
|
|||
:first-child { |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
} |
|||
#content-page { |
|||
text-align: center; |
|||
|
|||
> div:first-child { |
|||
width: 100%; |
|||
position: unset !important; |
|||
margin-top: 50px; |
|||
|
|||
padding: 0; |
|||
// top: 10% !important; |
|||
} |
|||
|
|||
#image { |
|||
top: 40%; |
|||
right: 10%; |
|||
width: 80%; |
|||
} |
|||
} |
|||
.content-wrapper-company { |
|||
margin-top: 80px !important; |
|||
img { |
|||
width: 100% !important; |
|||
} |
|||
} |
|||
.footer-page { |
|||
text-align: center; |
|||
|
|||
.project-url { |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media screen and (min-width: 950px) { |
|||
.header-btn { |
|||
width: 150px; |
|||
} |
|||
} |
|||
|
|||
@media screen and (max-width: 1000px) { |
|||
#content-page { |
|||
div:last-child { |
|||
top: 40%; |
|||
right: 25%; |
|||
width: 60%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.github-btn { |
|||
a { |
|||
font-weight: bold; |
|||
color: #303133; |
|||
padding: 4px 12px; |
|||
border: solid 1px #DCDFE6; |
|||
margin-left: 8px; |
|||
position: relative; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
a:hover { |
|||
color: #2C67E3; |
|||
} |
|||
|
|||
a:last-child:before { |
|||
position: absolute; |
|||
display: inline-block; |
|||
border-width: 7px; |
|||
border-style: solid; |
|||
border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent; |
|||
left: -15px; |
|||
top: 25%; |
|||
content: ''; |
|||
} |
|||
|
|||
/* 小角的背景填充*/ |
|||
a:last-child:after { |
|||
position: absolute; |
|||
display: inline-block; |
|||
border-width: 6px; /*与before的三角形重叠差1px，和元素边框是边框宽度一致*/ |
|||
border-style: solid; |
|||
border-color: transparent #eee transparent transparent; /*边框颜色（小角的填充色）要与整体元素背景一致*/ |
|||
left: -12px; |
|||
top: 25%; |
|||
content: ''; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,508 +0,0 @@ |
|||
<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