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"
        v-for="option in options"
        :key="option.value"
        @click="handleSelect(option.value)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
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) => {
  const generateParams = userInfoStore.getGenerateParams()
  generateParams.sex = value 
  userInfoStore.setGenerateParams(generateParams)
  router.push('/stylist/dressfor')
}
</script>
<style lang="less" scoped>
.sex-select {
  height: 100vh;
  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: 31.6rem;
    width: calc(100% - 12.4rem - 8.5rem);
    display: flex;
    justify-content: space-between;
    .option {
      // flex: 1;
      text-align: center;
      font-family: 'satoshiRegular';
      font-size: 6.4rem;
      width: 29.7rem;
      border: .2rem solid #fff;
    }
  }
}
</style>