82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
|
<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>
|