选择风格、模特、模特设计页面调整

src/views/Workshop/selectStyle.vue

@@ -3,23 +3,27 @@ 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'
-import editProfile1 from '@/assets/images/editProfile1.jpg'
+import editProfile1_1 from '@/assets/images/workshop/selectStyle/selectStyle1-1.png'
+import editProfile1_2 from '@/assets/images/workshop/selectStyle/selectStyle1-2.png'
+import editProfile1_3 from '@/assets/images/workshop/selectStyle/selectStyle1-3.png'
+import editProfile1_4 from '@/assets/images/workshop/selectStyle/selectStyle1-4.png'
 const router = useRouter()
 
 //const props = defineProps({
 //})
-//const emit = defineEmits([
-//])
+const emit = defineEmits([
+	'view-type'
+])
 let data = reactive({
 	selectList: 
 	[
 		{
 			id:1,
 			imgList:[
-				editProfile1,
-				editProfile1,
-				editProfile1,
-				editProfile1,
+				editProfile1_1,
+				editProfile1_2,
+				editProfile1_3,
+				editProfile1_4,
 			],
 			isLike: false,
 			isAdd: false,
@@ -27,50 +31,54 @@ let data = reactive({
 		{
 			id:2,
 			imgList:[
-				editProfile1,
-				editProfile1,
-				editProfile1,
-				editProfile1,
+				editProfile1_1,
+				editProfile1_2,
+				editProfile1_3,
+				editProfile1_4,
 			],
 			isLike: false,
 			isAdd: false,
 		},
 		{
-			id:2,
+			id:3,
 			imgList:[
-				editProfile1,
-				editProfile1,
-				editProfile1,
-				editProfile1,
+				editProfile1_1,
+				editProfile1_2,
+				editProfile1_3,
+				editProfile1_4,
 			],
 			isLike: false,
 			isAdd: false,
 		},
 		{
-			id:2,
+			id:4,
 			imgList:[
-				editProfile1,
-				editProfile1,
-				editProfile1,
-				editProfile1,
+				editProfile1_1,
+				editProfile1_2,
+				editProfile1_3,
+				editProfile1_4,
 			],
 			isLike: false,
 			isAdd: false,
 		},
-	]
+	],
+	select:{
+		
+	}
 })
 const toSelectModel = ()=>{
 	router.push({ path: 'selectModel' })
 }
 onMounted(()=>{
+	emit('view-type', 1)
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-const { selectList } = toRefs(data);
+const { selectList, select } = toRefs(data);
 </script>
 <template>
-	<header-title />
+	<header-title style-type="2" />
 	<div class="selectStyle">
 		<div class="text">
 			<div class="title">
@@ -81,23 +89,32 @@ const { selectList } = toRefs(data);
 			</div>
 		</div>
 		<div class="selectContent">
-			<SelectItem :selectList="selectList" />
+			<SelectItem :selectList="selectList" v-model:select="select" />
 		</div>
 	</div>
+	<div class="footer placeholder"></div>
 	<div class="footer">
 		<button @click.stop="toSelectModel">Continue</button>
 	</div>
 </template>
 <style lang="less" scoped>
+	.header-title {
+		--header-title-background: #f6f6f6;
+	}
 	.selectStyle{
 		width: 100%;
+		flex: 1;
 		// height: 100%;
 		position: relative;
+		display: flex;
+		flex-direction: column;
+		background-color: #f6f6f6;
+		overflow: hidden;
 		> .text{
 			text-align: center;
 			width: 100%;
-			margin-top: 7rem;
-			margin-bottom: 4.8rem;
+			margin-top: 3.4rem;
+			margin-bottom: 7.2rem;
 			> .title{
 				font-family: satoshiBold;
 				font-weight: 700;
@@ -112,7 +129,9 @@ const { selectList } = toRefs(data);
 			}
 		}
 		.selectContent{
-			padding: 0 4rem;
+			padding: 0 3.5rem;
+			flex: 1;
+			overflow: auto;
 		}
 	}
 	.footer {
@@ -121,20 +140,23 @@ const { selectList } = toRefs(data);
 		bottom: 0;
 		left: 0;
 		height: 11.2rem;
-		background-color: #000;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
+		background-color: #f6f6f6;
+		&.placeholder{
+			position: relative;
+		}
 		> 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;
+			border: 0.3rem solid #000;
+			background-color: #000;
+			font-family: satoshiBold;
+			font-weight: 700;
+			font-size: 3.6rem;
 			color: #fff;
 			margin-right: 5rem;
 			&:active {