页面添加头部底部标签

src/views/stylist/sex.vue

@@ -1,4 +1,5 @@
 <template>
+  <header-title style-type="3" />
   <div class="sex-select">
     <div class="text">Before we begin.</div>
     <div class="desc">Who are you styling?</div>
@@ -14,8 +15,11 @@
       </div>
     </div>
   </div>
+  <footer-navigation />
 </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 {useUserInfoStore} from '@/stores'
@@ -36,7 +40,7 @@ const handleSelect = (value: string) => {
 </script>
 <style lang="less" scoped>
 .sex-select {
-  height: 100vh;
+  height: calc(100vh - 12rem - 14.9rem);
   overflow: hidden;
   color: #fff;
   position: relative;
@@ -58,7 +62,7 @@ const handleSelect = (value: string) => {
   .select-list {
     display: flex;
     position: absolute;
-    bottom: 31.6rem;
+    bottom: 15.7rem;
     width: calc(100% - 12.4rem - 8.5rem);
     display: flex;
     justify-content: space-between;