<template>
  <div class="dressfor-container flex">
    <div class="content flex-1 flex flex-column">
      <div class="setting flex flex-between">
        <van-icon name="arrow-left" color="#fff" size="70" />
        <SvgIcon name="setting" size="70" />
      </div>
      <div class="text">What are you dressing for?</div>
      <div class="start-btn" @click="handleStart">Start</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

const handleStart = () => {
  console.log('click start')
  router.push('/asistant')
}
</script>
<style lang="less" scoped>
.dressfor-container {
  height: 100vh;
  overflow: hidden;
  color: #fff;
  position: relative;
  background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 6rem 0 0 0;
  .content {
    .setting {
      padding: 0 4.9rem 0 8.4rem;
      .c-svg {
        width: initial;
      }
    }
    .text {
      font-family: 'satoshiBold';
      font-size: 11rem;
      line-height: 106%;
      text-align: center;
      margin-top: 43.8rem;
      margin-bottom: 14rem;
    }
    .start-btn {
      font-size: 5.6rem;
      width: 32.5rem;
      height: 8.1rem;
      border: 2px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4rem;
      margin: 0 auto;
    }
  }
}
</style>
