You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
2.2 KiB
132 lines
2.2 KiB
<template>
|
|
<view class="page1">
|
|
<block>
|
|
<image src="@/static/page1-bg.png" class="bkg" alt="" />
|
|
<view class="page1-wrap">
|
|
<image src="/static/logo.png" class="logo"></image>
|
|
<view class="page1-wrap_title">
|
|
<image src="/static/page1-title1.png" class="page1-wrap_title1"></image>
|
|
<image src="/static/page1-title2.png" class="page1-wrap_title2"></image>
|
|
</view>
|
|
<view class="page1-wrap_star" @click="playVideo">
|
|
<image src="/static/page1-icon1.png" class="page1-wrap_star1"></image>
|
|
<image src="/static/page1-icon2.png" class="page1-wrap_star2"></image>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showVideo: false,
|
|
}
|
|
},
|
|
methods: {
|
|
playVideo() {
|
|
this.$emit('playVideo', true)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page1 {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: relative;
|
|
font-size: 0;
|
|
|
|
|
|
.bkg {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
&-wrap {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: scroll;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding-bottom: 350rpx;
|
|
|
|
.logo {
|
|
width: 415rpx;
|
|
height: 82rpx;
|
|
margin: 65rpx 0 0 35rpx;
|
|
}
|
|
|
|
&_title {
|
|
margin-top: 60rpx;
|
|
}
|
|
|
|
&_title1 {
|
|
width: 675rpx;
|
|
height: 156rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&_title2 {
|
|
width: 638rpx;
|
|
height: 106rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-top: 35rpx;
|
|
}
|
|
|
|
&_star {
|
|
margin-top: 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
&_star1 {
|
|
width: 307rpx;
|
|
height: 274rpx;
|
|
margin-top: 120rpx;
|
|
margin-right:20rpx;
|
|
animation: float 2s ease-in-out infinite;
|
|
}
|
|
|
|
&_star2 {
|
|
width: 218rpx;
|
|
height: 195rpx;
|
|
margin-left: -80rpx;
|
|
animation: twinkle 2s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-20rpx);
|
|
}
|
|
}
|
|
|
|
@keyframes twinkle {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
</style> |