# Conflicts: # unpackage/dist/cache/.vite/deps/_metadata.jsonmaster
commit
14b368d378
@ -1,17 +1,42 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="background">
|
||||||
|
<!--按钮-->
|
||||||
|
<image class="button" @click="click" src="@/static/transition/page2/pictures/button.png"></image>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
methods: {
|
||||||
return {};
|
click() {
|
||||||
}
|
uni.navigateTo({
|
||||||
|
url: '/pages/inforamtion/boy_weight/boy_weight' // 跳转到 page3
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
.background {
|
||||||
|
background-image: url("@/static/transition/page2/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: 315px;
|
||||||
|
height: 60px;
|
||||||
|
bottom: 20%; /* 距离底部 20% 的位置 */
|
||||||
|
left: 50%; /* 水平居中 */
|
||||||
|
transform: translateX(-50%); /* 通过 translateX 使其居中 */
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,17 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="background">
|
||||||
|
<!-- 男生按钮 -->
|
||||||
|
<image
|
||||||
|
class="boy_image"
|
||||||
|
@click="clickBoyImage"
|
||||||
|
v-if="!isBoySelected"
|
||||||
|
:class="{'slide-in-left': !isBoySelected}"
|
||||||
|
src="/static/information/sex/pictures/boy.png"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
class="boy_image"
|
||||||
|
@click="clickBoyImage"
|
||||||
|
v-else
|
||||||
|
:class="{'slide-in-left': !isBoySelected}"
|
||||||
|
src="/static/information/sex/pictures/shift_boy.png"
|
||||||
|
></image>
|
||||||
|
|
||||||
|
<!-- 女生按钮 -->
|
||||||
|
<image
|
||||||
|
class="girl_image"
|
||||||
|
@click="clickGirlImage"
|
||||||
|
v-if="!isGirlSelected"
|
||||||
|
:class="{'slide-in-right': !isGirlSelected}"
|
||||||
|
src="/static/information/sex/pictures/girl.png"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
class="girl_image"
|
||||||
|
@click="clickGirlImage"
|
||||||
|
v-else
|
||||||
|
:class="{'slide-in-right': !isGirlSelected}"
|
||||||
|
src="/static/information/sex/pictures/shift_girl.png"
|
||||||
|
></image>
|
||||||
|
|
||||||
|
<!-- 底部下一步按钮 -->
|
||||||
|
<image
|
||||||
|
class="button"
|
||||||
|
@click="goToNextPage"
|
||||||
|
src="/static/information/sex/pictures/button.png"
|
||||||
|
></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
}
|
isBoySelected: false,
|
||||||
}
|
isGirlSelected: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 跳转到下一页
|
||||||
|
goToNextPage() {
|
||||||
|
const targetPage = this.isBoySelected
|
||||||
|
? "/pages/information/boy_height/boy_height"
|
||||||
|
: "/pages/information/girl_height/girl_height";
|
||||||
|
uni.navigateTo({
|
||||||
|
url: targetPage, // 根据选择跳转到对应页面
|
||||||
|
});
|
||||||
|
},
|
||||||
|
clickBoyImage() {
|
||||||
|
this.isBoySelected = true;
|
||||||
|
this.isGirlSelected = false; // 取消女生选中状态
|
||||||
|
},
|
||||||
|
clickGirlImage() {
|
||||||
|
this.isGirlSelected = true;
|
||||||
|
this.isBoySelected = false; // 取消男生选中状态
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "@/static/information/sex/css/sex.css";
|
||||||
</style>
|
</style>
|
||||||
|
@ -0,0 +1,48 @@
|
|||||||
|
|
||||||
|
.background {
|
||||||
|
background-image: url("/static/information/sex/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; /* 为绝对定位子元素提供相对定位的上下文 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.boy_image {
|
||||||
|
position: absolute; /* 绝对定位 */
|
||||||
|
width: 30%;
|
||||||
|
height: 16%;
|
||||||
|
bottom: 33%; /* 距离底部 20% 的位置 */
|
||||||
|
left: 10%; /* 水平居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.girl_image {
|
||||||
|
position: absolute; /* 绝对定位 */
|
||||||
|
width: 30%;
|
||||||
|
height: 16%;
|
||||||
|
bottom: 33%; /* 距离底部 20% 的位置 */
|
||||||
|
right: 10%; /* 水平居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
position: absolute; /* 绝对定位 */
|
||||||
|
width: 90%;
|
||||||
|
height: 12%;
|
||||||
|
bottom: 2%; /* 距离底部 20% 的位置 */
|
||||||
|
left: 50%; /* 水平居中 */
|
||||||
|
transform: translateX(-50%); /* 通过 translateX 使其居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.boy_image,
|
||||||
|
.girl_image {
|
||||||
|
transition: transform 0.3s ease; /* 设置过渡效果 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.boy_image:hover,
|
||||||
|
.girl_image:hover {
|
||||||
|
transform: scale(1.1); /* 鼠标悬浮时放大 */
|
||||||
|
}
|
After Width: | Height: | Size: 314 KiB |
After Width: | Height: | Size: 9.0 KiB |
After Width: | Height: | Size: 211 KiB |
After Width: | Height: | Size: 9.3 KiB |
After Width: | Height: | Size: 8.8 KiB |
After Width: | Height: | Size: 10 KiB |
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"hash": "538e540a",
|
"hash": "3dcffc29",
|
||||||
"configHash": "9c86ed2d",
|
"configHash": "cc60d382",
|
||||||
"lockfileHash": "039e346f",
|
"lockfileHash": "e3b0c442",
|
||||||
"browserHash": "6871cd63",
|
"browserHash": "e601f541",
|
||||||
"optimized": {},
|
"optimized": {},
|
||||||
"chunks": {}
|
"chunks": {}
|
||||||
}
|
}
|
Loading…
Reference in new issue