front/pages/information/sex/sex.vue

<template>
  <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>
</template>

<script>
export default {
  data() {
    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>

<style lang="scss">
@import "@/static/information/sex/css/sex.css";
</style>