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.
|
|
|
|
<template>
|
|
|
|
|
<view class="background">
|
|
|
|
|
<!--按钮-->
|
|
|
|
|
<image class="button" @click="click" src="@/static/transition/page8/pictures/button.png"></image>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
methods: {
|
|
|
|
|
click() {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/homepages/homes/home/home' // 跳转到 主界面
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0; /* 起始透明度 */
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1; /* 结束透明度 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.background {
|
|
|
|
|
background-image: url("@/static/transition/page8/pictures/background.png");
|
|
|
|
|
background-size: cover;
|
|
|
|
|
background-position: center;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column; /* 纵向排列 */
|
|
|
|
|
align-items: center; /* 水平居中 */
|
|
|
|
|
justify-content: flex-end; /* 使内容向底部对齐 */
|
|
|
|
|
position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
|
|
width: 36%;
|
|
|
|
|
height: 6%;
|
|
|
|
|
bottom: 5%; /* 距离底部 20% 的位置 */
|
|
|
|
|
left: 50%; /* 水平居中 */
|
|
|
|
|
transform: translateX(-50%); /* 通过 translateX 使其居中 */
|
|
|
|
|
animation: fadeIn 3s forwards; /* 添加渐变动画 */
|
|
|
|
|
}
|
|
|
|
|
</style>
|
