front/pages/information/girl_height/girl_height.vue

<template>
  <view class="background">
    <!-- 人物图片 -->
    <image class="human slide-in" src="/static/information/girl_height/pictures/human.png"></image>

    <!-- 字体：你的身高是 -->
    <image class="height_text" src="/static/information/girl_height/pictures/height_text.png"></image>

    <!-- 身高选择窗口 -->
    <view class="weight_choice_window" @click="toggleHeightPicker">
      {{ height_number }} cm
    </view>

    <!-- 按钮图片 -->
    <image class="button" src="/static/information/girl_height/pictures/button.png" @click="goToWeightPage"></image>

    <!-- 身高选择轮播 -->
    <view class="height_picker" v-if="is_height_picker_visible">
      <view class="ruler" :style="{ transform: `translateY(-${currentHeightIndex * 100}px)` }"></view>

      <swiper :current="currentHeightIndex" @change="onHeightChange">
        <swiper-item v-for="(height, index) in heightOptions" :key="index">
          <view class="height_option">{{ height }} cm</view>
        </swiper-item>
      </swiper>

    </view>
  </view>
</template>



<script>
export default {
  data() {
    return {
      is_height_picker_visible: false, // 控制身高选择窗口的显示状态
      height_number: 160, // 初始身高为160cm
      heightOptions: Array.from({ length: 81 }, (_, i) => i + 150), // 150cm 到 230cm
      currentHeightIndex: 10 // 默认选择的索引
    };
  },
  methods: {
    toggleHeightPicker() {
      this.is_height_picker_visible = !this.is_height_picker_visible; // 切换显示状态
    },
    onHeightChange(event) {
      this.currentHeightIndex = event.detail.current; // 更新当前身高索引
      this.height_number = this.heightOptions[this.currentHeightIndex]; // 更新显示的身高
    },
    goToWeightPage() {
      uni.navigateTo({
        url: '/pages/information/girl_weight', // 跳转到 girl_weight 界面
      });
    },
  },
};
</script>






<style lang="scss">

.background {
  background-image: url("@/static/information/girl_height/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; /* 为绝对定位子元素提供相对定位的上下文 */
}

.human {
  position: absolute; /* 绝对定位 */
  top: 12%;
  left: 50%;
  width: 65%;
  height: 40%;
  transform: translateX(100%); /* 初始位置在右侧 */
  animation: slide-in 1s forwards; /* 添加动画 */
}

.height_text {
  position: absolute; /* 绝对定位 */
  transform: translateX(-50%); /* 通过 translateX 使其居中 */
  top: 60%;
  left: 50%;
  width: 40%;
  height: 3%;
}

.weight_choice_window {
  position: absolute; /* 绝对定位 */
  transform: translateX(-50%); /* 通过 translateX 使其居中 */
  top: 60%;
  left: 50%;
  width: 80%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 50px auto;
  font-size: 20px;
  background-color: #86A2EF;
  border-top: 2px solid #4F7CEC;
  border-bottom: 2px solid #4F7CEC;
}

.button {
  position: absolute; /* 绝对定位 */
  width: 90%;
  height: 13%;
  bottom: 1%; /* 距离底部 20% 的位置 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 通过 translateX 使其居中 */
}

.height_picker {
  position: absolute; /* 绝对定位 */
  top: 70%; /* 根据需要调整位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}

.height_option {
  font-size: 24px;
  text-align: center;
  line-height: 100px; /* 根据需要调整高度 */
}

/* 动画定义 */
@keyframes slide-in {
  0% {
    transform: translateX(100%); /* 从右侧开始 */
  }
  100% {
    transform: translateX(-50%); /* 移动到屏幕中心 */
  }
}
</style>