Skip to content

P
pptist
Commit 28b7defa authored by 罗超's avatar 罗超
Browse files
Options

优化门户

parent fa4fcaa6
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 30 deletions
src/views/Auth/AutoLogin.vue
View file @ 28b7defa
......@@ -34,7 +34,7 @@ const userLoginHandler = async ()=>{
})
} else {
router.push({
path: "/"
path: "/space"
})
}
......
src/views/Website/components/Whyme.vue 0 → 100644
View file @ 28b7defa
<template>
<div class="column items-center" style="margin-top: 255px">
<div class="animate__animated animate__fadeInUp" v-show="scrollTop>50">
<div class="card-title">为什么选择 Travel Design</div>
<div class="card-sub-title text-center">打造服务旅游的次世代专业级设计工具<br/>更快更精美的包装出你的行程产品</div>
</div>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
scrollTop: {
type: Number,
required: true,
},
});
</script>
<style scoped>
.website .card-title{
font-weight: 800;
font-size: 60px;
color: #000000;
line-height: 1;
}
.website .card-sub-title{
font-weight: 400;
font-size: 24px;
color: #625A7E;
line-height: 40px;
margin-top: 38px;
}
</style>
src/views/Website/components/welcomes.vue
View file @ 28b7defa
<template>
<div class="column items-center animate__animated" :class="{'animate__fadeIn':props.top==0,'animate__fadeOut':props.top>0}">
<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 class="window-height overflow-hide" ref="firstCard" @wheel="onChange">
<div class="column items-center" :class="{'welcomes-hide':top>0}">
<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">
<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>
<div class="animate__animated animate__fadeInUp linkToSpace cusor-pointer">
<div class="column items-center flex-center">
<span>立即使用</span>
</div>
</div>
</div>
<div class="animate__animated animate__fadeInUp" style="margin-top: 45px">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_838.png" style="width: 342px;">
</div>
<div class="animate__animated animate__fadeInUp text-center q-mt-xl text-info" style="width: 449px;font-size: 18px;">
可云端编辑的专业级行程设计工具，为旅游行业量身打造打开网页就可以做出精美行程。
</div>
<div class="animate__animated animate__fadeInUp linkToSpace cusor-pointer">立即使用</div>
<div class="animate__animated animate__fadeInUp">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_524.png" style="width: 1206px;">
</div>
</div>
<div class="first-card column items-center flex-center animate__animated animate__fadeIn" v-show="props.top>0">
<div>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_524.png" style="width: 1206px;">
<div class="column items-center full-height two-card" :class="{'flex-center':top>0,'step-2':top>2}">
<div class="row items-center">
<div class="left-box step-2" v-show="top>2" :class="{'step-3':top>3}">
<div class="row items-center">
<div class="tabs-item cusor-pointer" :class="{'active':top==4}" @click="setTopSetupHandler(4)">设计</div>
<div class="tabs-item cusor-pointer" :class="{'active':top==5}" @click="setTopSetupHandler(5)">输出</div>
<div class="tabs-item cusor-pointer" :class="{'active':top==6}" @click="setTopSetupHandler(6)">共享</div>
</div>
<div class="tabs-content animate__animated animate__fadeIn" v-if="top==4">
<div class="title">所见即所得<br/>高效创作</div>
<div class="info">设计功能强大，一站完成行程包装所有需求</div>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_127.png">
</div>
<div class="tabs-content animate__animated animate__fadeIn" v-if="top==5">
<div class="title">同步生成行程文档</div>
<div class="info">同时生成横板或竖版的PDF行程，或生成图片，一步到位，轻松交付</div>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_127.png">
</div>
<div class="tabs-content animate__animated animate__fadeIn" v-if="top==6">
<div class="title">读写分离，精确控制</div>
<div class="info">团队内容共享设计，协作从未如此简单</div>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_127.png">
</div>
</div>
<img src="https://im.oytour.com/website/%E7%BB%84%205.png" :class="{'step-1':top>1,'step-2':top==3}" class="animate__animated animate__fadeInUp img-change" style="width: 62vw;">
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
const props = defineProps({
top: {
scrollTop: {
type: Number,
required: true,
}
})
const canCount = ref(true)
const top = ref(0)
const firstCard = ref<HTMLElement>()
const onChange = (e:WheelEvent)=>{
if((top.value<6 ||(e.deltaY<0 && top.value==6)) && props.scrollTop==0){
e.preventDefault()
e.stopPropagation()
}else{
return
}
if(!canCount.value) return
if(e.deltaY<0 && top.value==0) return
canCount.value=false
top.value += e.deltaY>0?1:-1
setTimeout(() => {
canCount.value=true
}, 50);
}
const setTopSetupHandler = (setup:number)=>{
top.value=setup
}
</script>
<style scoped>
.website .logo{
......@@ -39,22 +92,138 @@ const props = defineProps({
color:#625A7E;
}
.website .linkToSpace{
width:403px;
width:20.989vw;
background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_735.png');
height: 200px;
background-size: 100% auto;
padding-top: 10.41%;
font-size: 26px;
color: #FFFFFF;
line-height: 200px;
text-shadow: 0px 0px 13px rgba(21,62,161,0.94);
text-align: center;
user-select: none;
position: relative;
}
.website .linkToSpace div{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.website .first-card{
position:absolute;
position:sticky;
top: 0;
height: 100vh;
left: 0;
width: 100vw;
z-index: 1;
}
.website .static-item{
position: static !important;
}
.website .welcomes-hide{
animation: spinner-welcomes 0.2s linear both
}
@keyframes spinner-welcomes {
0% {
opacity: 1;
/* transform: scale(1); */
}
100% {
opacity: 0;
display: none;
/* transform: scale(0.1); */
margin-top: -500px;
}
}
.website .flex-center .img-change{
animation: spinner-welcomes-two-img .5s linear both
}
@keyframes spinner-welcomes-two-img {
0% {
width: 62vw;
margin-top: 0;
}
100% {
width: 60vw;
margin-top: 100px;
}
}
.website .img-change.step-1{
width: 54.47vw !important;
}
.website .img-change.step-2{
margin-right: 150px;
}
.website .two-card.step-2{
align-items: end !important;
}
.website .left-box.step-2{
animation: left-box-step-2 .2s linear both;
/* overflow: hidden; */
margin-right: -5.05vw;
}
.website .left-box.step-3{
animation: left-box-step-3 .2s linear both;
}
@keyframes left-box-step-2 {
0% {
width: 0px;
}
100% {
width: 150px;
}
}
@keyframes left-box-step-3 {
0% {
width: 150px;
margin-right: -5.05vw;
}
100% {
width: auto;
margin-right: 50px;
}
}
.website .tabs-item{
background: #DDE3F3;
border-radius: 25px;
margin-right: 30px;
height: 50px;
line-height: 50px;
padding: 0 34px;
font-weight: 800;
font-size: 32px;
color: #ACB7D6;
min-width: 142px;
user-select: none;
}
.website .tabs-item.active{
background: linear-gradient(134deg, #649DED, #570AD8);
box-shadow: 0px 0px 27px 0px #9CB2E1;
color: #FFF;
}
.website .tabs-content{
margin-top: 50px;
min-width: 500px;
overflow: hidden;
user-select: none;
min-height: 220px;
}
.website .tabs-content .title{
font-weight: 800;
font-size: 44px;
color: #000000;
line-height: 1;
}
.website .tabs-content .info{
font-weight: 400;
font-size: 18px;
color: #625A7E;
margin:30px 0;
}
.website .tabs-content img{
width: 44px;
cursor: pointer;
}
</style>
\ No newline at end of file
src/views/Website/index.vue
View file @ 28b7defa
<template>
<el-scrollbar height="100vh" @scroll="onChange">
<el-scrollbar ref="scrollRef" height="100vh" @scroll="onChange" class="none-scroll-bar">
<div class="website">
<welcomes :top="top"></welcomes>
<Welcomes :scroll-top="top"></Welcomes>
<Whyme :scroll-top="top"></Whyme>
<div style="height: 1200px;background-color: #000;margin-top: 500px;"></div>
</div>
</el-scrollbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import welcomes from './components/welcomes.vue';
import Welcomes from './components/Welcomes.vue';
import Whyme from './components/Whyme.vue';
const top = ref(0)
const scrollRef = ref<any>()
const onChange = (e:any)=>{
top.value = e.scrollTop
top.value=e.scrollTop
// if(top.value==0 && e.scrollTop>1){
// //top.value = e.scrollTop>1?1:e.scrollTop
// if(scrollRef.value){
// scrollRef.value.setScrollTop(1)
// }
// }else{
// top.value = e.scrollTop
// }
}
</script>
<style scoped>
<style >
.website{
background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_863.png');
width: 100vw;
......@@ -23,5 +34,7 @@ const onChange = (e:any)=>{
background-repeat: repeat-y;
background-size: 100% auto;
}
.none-scroll-bar .el-scrollbar__bar{
display: none !important;
}
</style>
\ No newline at end of file
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