lanecarford_front/src/views/stylist/sex.vue

<template>
  <div class="sex-select">
    <div class="text">Before we begin.</div>
    <div class="desc">Who are you styling?</div>

    <div class="select-list">
      <div
        class="option flex flex-center"
        v-for="option in options"
        :key="option.value"
        @click="handleSelect(option.value)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useUserInfoStore } from '@/stores'
const router = useRouter()
const userInfoStore = useUserInfoStore()

const options = ref<any[]>([
  { label: 'Female', value: 'female' },
  { label: 'Male', value: 'male' }
])

const handleSelect = (value: string) => {
  if (value === 'male') {
    // 男性开发中
    return showToast(
      `This feature is currently under development. Please select the 'Female' option for now.`
    )
  }
  const generateParams = userInfoStore.getGenerateParams()
  generateParams.sex = value
  userInfoStore.setGenerateParams(generateParams)
  router.push('/workshop/stylist/dressfor')
}
</script>
<style lang="less" scoped>
.sex-select {
  height: calc(100vh - 12rem - 14.9rem);
  overflow: hidden;
  color: #fff;
  position: relative;
  background: url('@/assets/images/sex_select_bg.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 6rem 12.4rem 0 8.5rem;
  .text {
    font-family: 'robotoBold';
    font-size: 13rem;
    line-height: 106%;
  }
  .desc {
    font-family: 'satoshiRegular';
    font-size: 6.4rem;
    line-height: 132%;
  }
  .select-list {
    display: flex;
    position: absolute;
    bottom: 15.7rem;
    width: calc(100% - 12.4rem - 8.5rem);
    display: flex;
    justify-content: space-between;
    .option {
      // frosted glass style
      text-align: center;
      font-family: 'satoshiRegular';
      font-size: 4.8rem;
      width: 29.7rem;
      height: 8.3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: .2rem;
      background: rgba(255, 255, 255, 0.06);
      border: 0.2rem solid #fff;
      backdrop-filter: blur(95px);
      -webkit-backdrop-filter: blur(95px);
      -moz-backdrop-filter: blur(95px);
      background-clip: padding-box;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    }
  }
}
</style>