头部和底部栏

src/views/Workshop/selectStyle.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, toRefs } from "vue";
 import SelectItem from "@/components/selectStyle/selectItem.vue";
+import HeaderTitle from '@/components/HeaderTitle.vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -54,6 +58,9 @@ let data = reactive({
 		},
 	]
 })
+const toSelectModel = ()=>{
+	router.push({ path: 'selectModel' })
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -62,6 +69,7 @@ defineExpose({})
 const { selectList } = toRefs(data);
 </script>
 <template>
+	<header-title />
 	<div class="selectStyle">
 		<div class="text">
 			<div class="title">
@@ -75,11 +83,14 @@ const { selectList } = toRefs(data);
 			<SelectItem :selectList="selectList" />
 		</div>
 	</div>
+	<div class="footer">
+		<button @click.stop="toSelectModel">Continue</button>
+	</div>
 </template>
 <style lang="less" scoped>
 	.selectStyle{
 		width: 100%;
-		height: 100%;
+		// height: 100%;
 		position: relative;
 		> .text{
 			text-align: center;
@@ -103,4 +114,31 @@ const { selectList } = toRefs(data);
 			padding: 0 4rem;
 		}
 	}
+	.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>