feat: stylist&customer&sex页面

src/views/stylist/sex.vue

@@ -0,0 +1,66 @@
+<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">
+const options = ref([
+  { label: 'Female', value: '1' },
+  { label: 'Male', value: '0' }
+])
+
+const handleSelect = (value: string) => {
+  console.log(value)
+}
+</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>