detail页面调整

src/component/DetailCopy/model/modelNav.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="modelNav">
+		<div class="modelNav_item" v-for="item,index in designvDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+			<img :src="item.path" alt="">
+		</div>
+		<div class="modelNav_item add" @click="">
+			+
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import position from './modelPosition.vue';
+export default defineComponent({
+    components:{
+		position,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
+			designvDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			frontBack:{} as any,
+		})
+		watch(()=>detailData.frontBack_,(newFollowVue)=>{
+			detailData.frontBack = newFollowVue
+		})
+		const selectDetailItem = (item:any,index:number)=>{
+			store.commit('DesignDetailCopy/setDesignColthes',item.id)
+		}
+		// onBeforeUnmount(()=>{
+		// 	detailData.selectIndex = -1
+		// })
+        return{
+			...toRefs(detailData),
+			selectDetailItem,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .modelNav{
+		> .modelNav_item{
+			width: 12rem;
+			height: 12rem;
+			padding: 1rem;
+			border-radius: 2rem;
+			border: 2px solid #B4B4B4;
+			margin-bottom: 1.5rem;
+			cursor: pointer;
+			&:last-child{
+			    margin-bottom: 0;
+			}
+			&.active{
+				border: 3px solid #000;
+			}
+			> img{
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+			&.add{
+				font-size: 8rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+	}
+</style>