Skip to content

P
pptist
Commit 5100ff1f authored by zhengke's avatar zhengke
Browse files
Options

Merge branch 'router' of http://gitlab.oytour.com/viitto/pptist into router

parents b54cb58f 951919bc
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 35 deletions
src/assets/styles/common.css
View file @ 5100ff1f
......@@ -6,7 +6,6 @@ page {
Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
sans-serif;
}
/* .0123456789+-ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz导入设计文件基础数据绑定模板预览选择、上传图片地创作分享置夹建修改新 */
@font-face {
font-family: "alifont";src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/L514hmGnjb2E.woff2") format("woff2"),
......
src/views/Website/components/Whyme.vue
View file @ 5100ff1f
<template>
<div class="column items-center" style="margin-top: 255px">
<div class="animate__animated animate__fadeInUp" v-show="scrollTop>50">
<div class="column items-center" style="margin-top: 13.02vw;min-height:100vh;">
<div :class="{'animate__animated animate__fadeInUp':whyt && scrollTop>=(whyt.offsetTop-clientHeight+30)}" ref="whyt">
<div class="card-title">为什么选择 Travel Design</div>
<div class="card-sub-title text-center">打造服务旅游的次世代专业级设计工具<br/>更快更精美的包装出你的行程产品</div>
</div>
<div class="two-card row" ref="whyc1">
<div class="small mg " style="background: #5926DC" :class="{'animate__animated animate__backInLeft':whyc1 && scrollTop>=(whyc1.offsetTop-clientHeight+30)}">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713338905000_460.png" class="team" />
<div style="margin-top:10.42vw;font-size: 1.77vw;line-height: 2.7vw;" class="text-white text-weight-bolder">实时协同，提升各角色<br/>工作流程中的效率</div>
<div style="margin-top: 2.083vw;font-size: 1.146vw; line-height: 1.9791vw;" class="text-white">公司设计师上传精美模板到平台，销售和OP可以根据自己的需要高效的完成设计,并分享已设计好的行程</div>
<div class="btn" style="margin-top: 2.6vw;">团队协作</div>
</div>
<div class="big" :class="{'animate__animated animate__backInRight':whyc1 && scrollTop>=(whyc1.offsetTop-clientHeight+30)}" style="background: #2E79E2;box-shadow: 0px 0px 2.6vw 0px rgba(40,77,172,0.53);">
<div class="btn">专业模板</div>
<div style="margin-top:2.291vw;font-size: 1.77vw;line-height:1;" class="text-white text-weight-bolder">预设大量专业美工行程模板供选择</div>
<div style="margin-top: 1.5625vw;font-size: 1.146vw; line-height: 1.9791vw;" class="text-white">从模板中直接替换文字、图片和Logo等信息<br/>即可完成设计文件</div>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_339.png" style="position: absolute;right: 0;bottom: 0;width:35.73vw"/>
</div>
</div>
<div class="two-card row" ref="whyc2" style="margin-top: 1.71vw">
<div class="big mg" :class="{'animate__animated animate__backInUp':whyc2 && scrollTop>=(whyc2.offsetTop-clientHeight+30)}" style="background: #30D7D5;box-shadow: 0px 0px 2.6vw 0px rgba(40,77,172,0.53);">
<div class="text-center">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_184.png" style="width:33.90625vw">
</div>
<div class="row items-end" style="margin-top: 3.854vw;">
<div class="col" style="margin-right: 5.9375vw;">
<div style="font-size: 1.77vw;line-height:1;" class="text-white text-weight-bolder">像做PPT一样简单的设计行程</div>
<div style="margin-top: 1.5625vw;font-size: 1.146vw; line-height: 1.9791vw;" class="text-white">我们采用PPT交互设计，减少不必要的学习使用成本任何人都可以轻松上手操作。</div>
</div>
<div class="btn">快速上手</div>
</div>
</div>
<div class="small" :class="{'animate__animated animate__backInUp':whyc2 && scrollTop>=(whyc2.offsetTop-clientHeight+30)}" style="background: #3556F9">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_228.png" class="team2" />
<div style="margin-top: 13.52vw;" class="text-right">
<div class="btn">海量资源</div>
</div>
<div style="margin-top:2.29vw;font-size: 1.77vw;line-height: 1;" class="text-white text-weight-bolder">大量的POI数据快速索引</div>
<div style="margin-top: 1.77vw;font-size: 1.146vw; line-height: 1.9791vw;" class="text-white">我们提供了海量的POI信息，无论是风景图片还是景点介绍，你都可以快速的在Travel Design中找到</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
const props = defineProps({
scrollTop: {
type: Number,
required: true,
},
});
const whyt = ref<HTMLElement>()
const whyc1 = ref<HTMLElement>()
const whyc2 = ref<HTMLElement>()
const clientHeight = ref(document.documentElement.clientHeight)
</script>
<style scoped>
.website .card-title{
font-weight: 800;
font-size: 60px;
font-size: 2.6vw;
color: #000000;
line-height: 1;
}
.website .visible-hide{
visibility: hidden;
}
.website .card-sub-title{
font-weight: 400;
font-size: 24px;
font-size: 1.041vw;
color: #625A7E;
line-height: 40px;
margin-top: 38px;
line-height: 1.875vw;
margin-top: 1.875vw;
}
.website .two-card{
margin-top: 10.42vw;
}
.website .two-card .small{
width:26.3vw;
padding:2.08vw 2.6vw;
position: relative;
border-radius: 1.77vw;
}
.website .two-card .mg{
margin-right: 1.71vw;
}
.website .two-card .big{
width:43.85vw;
padding:2.08vw 2.6vw;
position: relative;
border-radius: 1.77vw;
}
.website .two-card .team{
width:16.4vw;
position: absolute;
top: -2.08vw;
right: 2.6vw;
}
.website .two-card .team2{
width:21.40625vw;
position: absolute;
top: -0.8854vw;
left: 2.6vw;
}
.website .two-card .btn{
/* height:2.6-50px; 18-0.9375 22-1.1458 44-2.291 30-1.5625 */
height: 2.6vw;
line-height: 2.6vw;
background: #000000;
border-radius: 0.9375vw;
color:#FFF;
padding:0 1.1458vw;
display: inline-block;
}
</style>
src/views/Website/components/welcomes.vue
View file @ 5100ff1f
......@@ -4,10 +4,10 @@
<div class="animate__animated animate__fadeInDown logo">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png" alt="">
</div>
<div class="animate__animated animate__fadeInUp" style="margin-top: 45px">
<div class="animate__animated animate__fadeInUp" style="margin-top: 2.343vw">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_838.png" style="width: 17.8vw;">
</div>
<div class="animate__animated animate__fadeInUp text-center q-mt-xl text-info" style="width: 449px;font-size: 18px;">
<div class="animate__animated animate__fadeInUp text-center q-mt-xl text-info" style="width: 23.38vw;font-size: 0.9375vw;">
可云端编辑的专业级行程设计工具，为旅游行业量身打造打开网页就可以做出精美行程。
</div>
<div class="animate__animated animate__fadeInUp linkToSpace cusor-pointer">
......@@ -83,10 +83,10 @@ const setTopSetupHandler = (setup:number)=>{
</script>
<style scoped>
.website .logo{
margin-top: 188px;
margin-top: 9.791vw;
}
.website .logo img{
width: 452px;
width: 23.54vw;
}
.website .text-info{
color:#625A7E;
......@@ -96,9 +96,9 @@ const setTopSetupHandler = (setup:number)=>{
background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_735.png');
background-size: 100% auto;
padding-top: 10.41%;
font-size: 26px;
font-size: 1.35vw;
color: #FFFFFF;
text-shadow: 0px 0px 13px rgba(21,62,161,0.94);
text-shadow: 0px 0px 0.677vw rgba(21,62,161,0.94);
text-align: center;
user-select: none;
position: relative;
......@@ -133,7 +133,7 @@ const setTopSetupHandler = (setup:number)=>{
opacity: 0;
display: none;
/* transform: scale(0.1); */
margin-top: -500px;
margin-top: 26.04vw;
}
}
......@@ -147,14 +147,14 @@ const setTopSetupHandler = (setup:number)=>{
}
100% {
width: 60vw;
margin-top: 100px;
margin-top: 5.2vw;
}
}
.website .img-change.step-1{
width: 54.47vw !important;
}
.website .img-change.step-2{
margin-right: 150px;
margin-right: 7.8125vw;
}
.website .two-card.step-2{
align-items: end !important;
......@@ -172,58 +172,58 @@ const setTopSetupHandler = (setup:number)=>{
width: 0px;
}
100% {
width: 150px;
width: 7.8125vw;
}
}
@keyframes left-box-step-3 {
0% {
width: 150px;
width: 7.8125vw;
margin-right: -5.05vw;
}
100% {
width: auto;
margin-right: 50px;
margin-right: 2.6vw;
}
}
.website .tabs-item{
background: #DDE3F3;
border-radius: 25px;
margin-right: 30px;
height: 50px;
line-height: 50px;
padding: 0 34px;
border-radius: 1.3vw;
margin-right: 1.5625vw;
height: 2.6vw;
line-height: 2.6vw;
padding: 0 1.77vw;
font-weight: 800;
font-size: 32px;
font-size: 1.66vw;
color: #ACB7D6;
min-width: 142px;
min-width: 7.3958vw;
user-select: none;
}
.website .tabs-item.active{
background: linear-gradient(134deg, #649DED, #570AD8);
box-shadow: 0px 0px 27px 0px #9CB2E1;
box-shadow: 0px 0px 1.40625vw 0px #9CB2E1;
color: #FFF;
}
.website .tabs-content{
margin-top: 50px;
min-width: 500px;
margin-top: 2.6vw;
min-width: 26.04vw;
overflow: hidden;
user-select: none;
min-height: 220px;
min-height: 11.458vw;
}
.website .tabs-content .title{
font-weight: 800;
font-size: 44px;
font-size: 2.291vw;
color: #000000;
line-height: 1;
}
.website .tabs-content .info{
font-weight: 400;
font-size: 18px;
font-size: 0.9375vw;
color: #625A7E;
margin:30px 0;
margin:1.5625vw 0;
}
.website .tabs-content img{
width: 44px;
width: 2.291vw;
cursor: pointer;
}
</style>
\ No newline at end of file
src/views/Website/index.vue
View file @ 5100ff1f
<template>
<el-scrollbar ref="scrollRef" height="100vh" @scroll="onChange" class="none-scroll-bar">
<el-scrollbar ref="scrollRef" height="100vh" @scroll="onChange" style="" class="none-scroll-bar">
<div class="website">
<Welcomes :scroll-top="top"></Welcomes>
<Whyme :scroll-top="top"></Whyme>
......@@ -33,6 +33,7 @@ const onChange = (e:any)=>{
min-height: 100vh;
background-repeat: repeat-y;
background-size: 100% auto;
}
.none-scroll-bar .el-scrollbar__bar{
display: none !important;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment