Skip to content

P
pptist
Commit 63b70339 authored by 罗超's avatar 罗超
Browse files
Options

完成门户首页开发

parent 951919bc
Hide whitespace changes
Inline Side-by-side
Showing with 267 additions and 4 deletions
src/views/Website/components/About.vue 0 → 100644
View file @ 63b70339
<template>
<div class="column items-center about-box" ref="aboutinfo1">
<div :class="{'animate__animated animate__fadeInUp':aboutinfo1 && scrollTop>=(aboutinfo1.offsetTop-clientHeight+30)}">
<div class="full-width text-center cn">关于，成都微途科技</div>
<div class="cd">成都微途科技有限公司成立于2013年<br/>
多年以来专注于旅游行业，致力于旅游行业系统化、标准化进程<br/>
协助旅游行业快速进行互联网转型<br/>
总部位于四川成都，主要提供旅游行业ERP综合管理系统<br/>
CRM系统、数据分析系统、同业服务系统等相关系统IT支持。</div>
</div>
<div class="about-btn cusor-pointer" @click="forwardLogin" :class="{'animate__animated animate__fadeInUp animate__delay-1s':aboutinfo1 && scrollTop>=(aboutinfo1.offsetTop-clientHeight+30)}">立即使用</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const props = defineProps({
scrollTop: {
type: Number,
required: true,
},
});
const aboutinfo1=ref<HTMLElement>()
const clientHeight = ref(document.documentElement.clientHeight)
const forwardLogin = ()=>{
location.href='/login'
}
</script>
<style scoped>
.website .about-box{
margin: 14.583vw auto 0 auto;
}
.website .about-box .cn{
font-weight: 800;
font-size: 3.6458vw;
color: #313131;
line-height: 1;
background: linear-gradient(134deg, #649DED 0%, #570AD8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.website .cd{
font-weight: bold;
font-size: 1.25vw;
color: #625A7E;
line-height: 2.5vw;
margin-top: 3.645833vw;
margin-bottom: 5.20833vw;
text-align: center;
}
.website .about-btn{
background: linear-gradient(134deg, #649DED, #570AD8);
border-radius: 1.77vw;
height: 3.541vw;
line-height: 3.541vw;
padding: 0 3.90625vw;
font-size: 1.3541vw;
color: #FFFFFF;
display: inline-block;
}
</style>
\ No newline at end of file
src/views/Website/components/DataInfo.vue 0 → 100644
View file @ 63b70339
<template>
<div class="column items-center data-box" ref="datainfo1">
<div :class="{'animate__animated animate__fadeInUp':datainfo1 && scrollTop>=(datainfo1.offsetTop-clientHeight+30)}">
<div style="font-size: 2.708vw;color:#000;line-height: 1;" class="text-weight-bolder full-width text-center">数据安全</div>
<div class="feature-btn" style="margin-top: 2.291vw;margin-bottom: 4.1666vw;">独家开发的专属于旅游的地图插件</div>
</div>
<div class="row items-center flex-between full-width">
<div class="text-center" :class="{' animate__animated animate__backInUp':datainfo1 && scrollTop>=(datainfo1.offsetTop-clientHeight+30)}">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_886.png" class="item-img">
<div class="item-text">自动保存</div>
</div>
<div class="text-center " :class="{'animate__animated animate__backInUp animate__delay-1s':datainfo1 && scrollTop>=(datainfo1.offsetTop-clientHeight+30)}">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_89.png" class="item-img">
<div class="item-text">历史版本记录</div>
</div>
<div class="text-center" :class="{'animate__animated animate__backInUp animate__delay-2s':datainfo1 && scrollTop>=(datainfo1.offsetTop-clientHeight+30)}">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_73.png" class="item-img">
<div class="item-text">误删找回</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const props = defineProps({
scrollTop: {
type: Number,
required: true,
},
});
const datainfo1=ref<HTMLElement>()
const clientHeight = ref(document.documentElement.clientHeight)
</script>
<style scoped>
.website .data-box{
margin: 3.23vw auto 0 auto;
width: 71.875vw;
background: linear-gradient(0deg, rgba(255, 255, 255, .6), rgba(247, 249, 255, .6));
border-radius: 1.25vw;
padding:4.9479vw 8.958vw;
}
.website .data-box .item-img{
width: 5.521vw;
margin-bottom: 2.6vw;
}
.website .data-box .item-text{
font-weight: bold;
font-size: 1.25vw;
color: #000000;
}
.website .data-btn{
background: linear-gradient(103deg, #649DED, #570AD8);
border-radius: 1.1458vw;
height: 2.291vw;
line-height: 2.291vw;
padding: 0 1.041vw;
font-weight: 400;
font-size: 1.25vw;
color: #FFFFFF;
display: inline-block;
}
</style>
\ No newline at end of file
src/views/Website/components/Feature.vue 0 → 100644
View file @ 63b70339
<template>
<div class="column items-center" style="margin-top: 20vw;">
<div class="row items-center" ref="feature1" :class="{'animate__animated animate__backInLeft':feature1 && scrollTop>=(feature1.offsetTop-clientHeight+30)}">
<div class="col">
<div style="font-size: 2.91vw;color:#000;line-height: 1;" class="text-weight-bolder">地图工具</div>
<div class="feature-btn" style="margin: 1.71875vw 0;">独家开发的专属于旅游的地图插件</div>
<div style="font-size: 0.9375vw;color:#625A7E;line-height: 1.875vw; width:21.5625vw">根据你的需要，输入城市名称快速生成行程路径也可以自己动手打造个性化的地图信息，我们还预设了地图模板，不用费神设计。</div>
</div>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_611.png" style="width:33.02vw;margin-left: 11.9791vw">
</div>
<div class="row items-center" ref="feature2" :class="{'animate__animated animate__backInRight':feature2 && scrollTop>=(feature2.offsetTop-clientHeight+30)}">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_481.png" style="width:33.02vw;margin-right: 9.27vw">
<div class="col text-right">
<div style="font-size: 2.91vw;color:#000;line-height: 1;" class="text-weight-bolder">导入模板</div>
<div class="feature-btn" style="margin: 1.71875vw 0;">支持私有化的模板上传</div>
<div style="font-size: 0.9375vw;color:#625A7E;line-height: 1.875vw; width:24.583vw">公司美工可以将已经设计好的精美行程上传到平台，目前支持PS文件上传，后续将开放更多的文件支持。我们将严格遵守数据安全承诺，不会将你的模板透露给他人</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const props = defineProps({
scrollTop: {
type: Number,
required: true,
},
});
const feature1=ref<HTMLElement>()
const feature2=ref<HTMLElement>()
const clientHeight = ref(document.documentElement.clientHeight)
</script>
<style>
.website .feature-btn{
background: linear-gradient(103deg, #649DED, #570AD8);
border-radius: 1.1458vw;
height: 2.291vw;
line-height: 2.291vw;
padding: 0 1.041vw;
font-weight: 400;
font-size: 1.25vw;
color: #FFFFFF;
display: inline-block;
}
</style>
\ No newline at end of file
src/views/Website/components/FooterInfo.vue 0 → 100644
View file @ 63b70339
<template>
<div class="column items-center footer-box">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_602.png" style="width:10.15625vw;margin-bottom: 0.78125vw">
<div class="text-desc">@2012-2024 成都微途科技有限公司 版权所有 蜀ICP备13024891号-9</div>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
.website .footer-box{
margin: 15.2vw auto 0 auto;
}
.text-desc{
font-weight: 400;
font-size: 0.7291vw;
color: #625A7E;
line-height: 1;
opacity: 0.4;
padding-bottom: 1.5625vw;
}
</style>
\ No newline at end of file
src/views/Website/components/Product.vue 0 → 100644
View file @ 63b70339
<template>
<div class="column items-center product-box" ref="productinfo1">
<div :class="{'animate__animated animate__fadeInUp':productinfo1 && scrollTop>=(productinfo1.offsetTop-clientHeight+30)}">
<div style="font-size: 2.708vw;color:#000;line-height: 1;" class="text-weight-bolder full-width text-center">产品介绍</div>
<div class="product-btn">打造服务旅游的次世代专业级设计工具<br/>更快更精美的包装出你的行程产品</div>
</div>
<div class="row items-center flex-between full-width">
<div class="text-center" :class="{' animate__animated animate__backInLeft animate__delay-2s':productinfo1 && scrollTop>=(productinfo1.offsetTop-clientHeight+30)}">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_129.png" class="item-img">
</div>
<div class="text-center " :class="{'animate__animated animate__backInLeft animate__delay-1s':productinfo1 && scrollTop>=(productinfo1.offsetTop-clientHeight+30)}">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_907.png" class="item-img">
</div>
<div class="text-center" :class="{'animate__animated animate__backInLeft':productinfo1 && scrollTop>=(productinfo1.offsetTop-clientHeight+30)}">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_309.png" class="item-img">
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const props = defineProps({
scrollTop: {
type: Number,
required: true,
},
});
const productinfo1=ref<HTMLElement>()
const clientHeight = ref(document.documentElement.clientHeight)
</script>
<style scoped>
.website .product-box{
margin: 15.9375vw auto 0 auto;
width: 77.1875vw;
}
.website .product-box .item-img{
width: 24.27vw;
}
.website .product-btn{
font-weight: 400;
font-size: 1.25vw;
color: #625A7E;
line-height: 2.083vw;
margin-top: 2.291vw;
margin-bottom: 4.1666vw;
text-align: center;
}
</style>
\ No newline at end of file
src/views/Website/components/welcomes.vue
View file @ 63b70339
......@@ -10,7 +10,7 @@
<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">
<div class="animate__animated animate__fadeInUp linkToSpace cusor-pointer" @click="forwardLogin">
<div class="column items-center flex-center">
<span>立即使用</span>
</div>
......@@ -79,7 +79,9 @@ const onChange = (e:WheelEvent)=>{
const setTopSetupHandler = (setup:number)=>{
top.value=setup
}
const forwardLogin = ()=>{
location.href='/login'
}
</script>
<style scoped>
.website .logo{
......
src/views/Website/index.vue
View file @ 63b70339
<template>
<el-scrollbar ref="scrollRef" height="100vh" @scroll="onChange" style="" class="none-scroll-bar">
<div class="website">
<div class="website" style="user-select: none;">
<Welcomes :scroll-top="top"></Welcomes>
<Whyme :scroll-top="top"></Whyme>
<div style="height: 1200px;background-color: #000;margin-top: 500px;"></div>
<FeatureVue :scroll-top="top"></FeatureVue>
<DataInfo :scroll-top="top"></DataInfo>
<Product :scroll-top="top"></Product>
<About :scroll-top="top"></About>
<FooterInfo></FooterInfo>
</div>
</el-scrollbar>
</template>
......@@ -11,6 +15,11 @@
import { ref } from 'vue';
import Welcomes from './components/Welcomes.vue';
import Whyme from './components/Whyme.vue';
import FeatureVue from './components/Feature.vue'
import DataInfo from './components/DataInfo.vue'
import Product from './components/Product.vue'
import About from './components/About.vue'
import FooterInfo from './components/FooterInfo.vue'
const top = ref(0)
const scrollRef = ref<any>()
const onChange = (e:any)=>{
......
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