front/pages/information/sex/sex.vue

<template>
  <view class="background">
    <!-- human 图片，带有渐变效果 -->
    <image
        class="human"
        :class="{ 'fade-in': isHumanVisible }"
        src="/static/information/sex/pictures/human.png"
    ></image>

    <!-- 男生按钮 -->
    <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,
      isHumanVisible: false, // 控制 human 图片显示
    };
  },
  mounted() {
    // 页面加载时延时显示 human 图片
    setTimeout(() => {
      this.isHumanVisible = true;
    }, 100); // 延迟 100ms 开始渐变，可以根据需求调整
  },
  methods: {
    goToNextPage() {
      const targetPage = this.isBoySelected
          ? "/pages/information/boy_weight_start/boy_weight_start"
          : "/pages/information/girl_weight/girl_weight";
      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";

/* 渐变效果样式 */
.human {
  opacity: 0; /* 初始透明 */
  transition: opacity 1.5s ease-in-out; /* 渐变持续时间和效果 */
}
.fade-in {
  opacity: 1; /* 最终完全显示 */
}
</style>