页面添加头部底部标签

src/components/HeaderTitle.vue

@@ -5,7 +5,7 @@
 	defineProps({
 		title: { type: String, default: 'AI STYLING ASSISTANT' },
 		hasSetting: { type: Boolean, default: false },
-		styleType: { type: String, default: '1' },//1低 2高
+		styleType: { type: String, default: '1' },//1低 2高 3-12rem
 		isPlaceholder: { type: Boolean, default: true },
 	})
 
@@ -36,6 +36,10 @@
 			--header-title-border-bottom-width: 0.2rem;
 			--header-title-return-left: 7.8rem;
 		}
+		&[style-type="3"] {
+			--header-title-height: 12rem;
+			--header-title-border-bottom-width: 0.2rem;
+		}
 		> div {
 			width: 100%;
 			height: var(--header-title-height, 9.9rem);

src/components/selectStyle/selectItem.vue

@@ -88,11 +88,11 @@ const {} = toRefs(data);
 		> .item{
 			width: calc(50% - 3.1rem / 2);
 			position: relative;
-			margin-bottom: 3.3rem;
+			// margin-bottom: 3.3rem;
 			display: flex;
 			flex-direction: column;
 			> .title{
-				font-size: 3.6rem;
+				font-size: 3.44rem;
 				font-weight: 700;
 				color: #000;
 				font-family: 'satoshiMedium';
@@ -102,7 +102,7 @@ const {} = toRefs(data);
 				justify-content: space-between;
 				align-items: center;
 				flex-wrap: wrap;
-				height: 47.2rem;
+				height: 45rem;
 				margin: 2.4rem 0;
 				background-color: #fff;
 				justify-content: center;
@@ -148,8 +148,8 @@ const {} = toRefs(data);
 					color: #000;
 					margin-right: 1.2rem;
 					border-radius: 50%;
-					width: 6.6rem;
-					height: 6.6rem;
+					width: 5.2rem;
+					height: 5.2rem;
 					padding: 1rem;
 					background-color: #fff;
 					&:last-child{

src/views/Workshop/selectStyle.vue

@@ -2,6 +2,7 @@
 import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
 import SelectItem from "@/components/selectStyle/selectItem.vue";
 import HeaderTitle from '@/components/HeaderTitle.vue'
+import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 import { useGenerateStore, useUserInfoStore } from '@/stores'
 import { showToast } from 'vant';
@@ -122,14 +123,15 @@ const { styleList, select } = toRefs(data);
 			<SelectItem :selectList="styleList" v-model:select="select" @selectItem="selectItem" @updateStyle="updateStyle" />
 		</div>
 	</div>
-	<div class="footer placeholder"></div>
+	<!-- <div class="footer placeholder"></div> -->
 	<div class="footer">
 		<button @click.stop="toProduct">Continue</button>
 	</div>
+	<footer-navigation is-placeholder />
 </template>
 <style lang="less" scoped>
 	.header-title {
-		--header-title-background: #f6f6f6;
+		// --header-title-background: #f6f6f6;
 	}
 	.selectStyle{
 		width: 100%;
@@ -144,7 +146,7 @@ const { styleList, select } = toRefs(data);
 			text-align: center;
 			width: 100%;
 			margin-top: 3.4rem;
-			margin-bottom: 7.2rem;
+			margin-bottom: 4.9rem;
 			> .title{
 				font-family: satoshiBold;
 				font-weight: 700;
@@ -159,13 +161,13 @@ const { styleList, select } = toRefs(data);
 			}
 		}
 		.selectContent{
-			padding: 0 3.5rem;
+			padding: 0 4rem;
 			flex: 1;
 			overflow: auto;
 		}
 	}
 	.footer {
-		position: fixed;
+		// position: fixed;
 		width: 100%;
 		bottom: 0;
 		left: 0;

src/views/asistant/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="asistant-container flex flex-column">
     <div class="header">
-      <HeaderTitle hasSetting styleType="2" />
+      <HeaderTitle hasSetting styleType="3" />
     </div>
     <div class="loading-container" v-if="isLoading">
       <GenerateLoading />

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;