页面添加头部底部标签

src/views/stylist/dressfor.vue

@@ -1,16 +1,20 @@
 <template>
+  <header-title style-type="3" />
   <div class="dressfor-container flex">
     <div class="content flex-1 flex flex-column">
-      <div class="setting flex flex-between">
+      <!-- <div class="setting flex flex-between">
         <van-icon name="arrow-left" color="#fff" @click="handleBack" />
         <SvgIcon name="setting" size="70" />
-      </div>
+      </div> -->
       <div class="text">What are you dressing for?</div>
       <div class="start-btn" @click="handleStart">Start</div>
     </div>
   </div>
+  <footer-navigation />
 </template>
 <script setup lang="ts">
+import HeaderTitle from '@/components/HeaderTitle.vue'
+import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 
@@ -25,7 +29,7 @@ const handleStart = () => {
 </script>
 <style lang="less" scoped>
 .dressfor-container {
-  height: 100vh;
+  height: calc(100vh - 12rem - 14.9rem);
   overflow: hidden;
   color: #fff;
   position: relative;

src/views/stylist/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <header-title style-type="3" />
   <div class="stylist-page">
     <!-- 主要内容区域 -->
     <div class="content">
@@ -48,6 +49,7 @@
       <Video ref="videoRef" />
     </van-dialog>
   </div>
+  <footer-navigation />
 </template>
 
 <script setup lang="ts">
@@ -57,6 +59,8 @@ import Video from './components/Video.vue'
 import { useUserInfoStore } from '@/stores'
 import male from '@/assets/images/male.png'
 import female from '@/assets/images/female.png'
+import HeaderTitle from '@/components/HeaderTitle.vue'
+import FooterNavigation from '@/components/FooterNavigation.vue'
 
 const router = useRouter()
 const userInfoStore = useUserInfoStore()
@@ -111,7 +115,7 @@ const handleChangeSwiper = (type: 'next' | 'prev') => {
 
 const handleClickStylist = (item: any) => {
   console.log(item)
-  showVideo.value = true
+//   showVideo.value = true
 }
 
 const handleContinue = () => {
@@ -136,7 +140,7 @@ watch(showVideo, (newValue) => {
 .stylist-page {
   position: relative;
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - 12rem - 14.9rem);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -165,6 +169,7 @@ watch(showVideo, (newValue) => {
     font-weight: 400;
     color: white;
     font-family: 'boskaRegular';
+    line-height: 96%;
   }
 }
 

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;