头部和底部栏

src/views/Workshop/selectModel.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, toRefs } from "vue";
+import HeaderTitle from '@/components/HeaderTitle.vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -39,7 +42,9 @@ let data = reactive({
 const setSelectedModelId = (item)=>{
 	data.selectedModelId = item.id;
 }
-
+const toSelectModelContinue = ()=>{
+	router.push({ path: 'selectModelContinue' })
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -48,6 +53,7 @@ defineExpose({})
 const { modelList, selectedModelId } = toRefs(data);
 </script>
 <template>
+	<header-title />
 	<div class="selectModel">
 		<div class="text">
 			<div class="title">
@@ -68,11 +74,14 @@ const { modelList, selectedModelId } = toRefs(data);
 			</div>
 		</div>
 	</div>
+	<div class="footer">
+		<button @click.stop="toSelectModelContinue">Continue</button>
+	</div>
 </template>
 <style lang="less" scoped>
 	.selectModel{
 		width: 100%;
-		height: 100%;
+		// height: 100%;
 		position: relative;
 		display: flex;
 		flex-direction: column;
@@ -126,4 +135,31 @@ const { modelList, selectedModelId } = toRefs(data);
 			}
 		}
 	}
+	.footer {
+		position: fixed;
+		width: 100%;
+		bottom: 0;
+		left: 0;
+		height: 11.2rem;
+		background-color: #000;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		> button {
+			width: 24.6rem;
+			height: 5.9rem;
+			border-radius: 0.7rem;
+			box-sizing: content-box;
+			border: 0.3rem solid #fff;
+			background: transparent;
+			font-family: satoshiRegular;
+			font-weight: 400;
+			font-size: 4rem;
+			color: #fff;
+			margin-right: 5rem;
+			&:active {
+				opacity: 0.7;
+			}
+		}
+	}
 </style>