244 lines
6.5 KiB
Vue
244 lines
6.5 KiB
Vue
|
<template>
|
||
|
|
<div class="home">
|
||
|
|
<navList @setSelectKey="setSelectKey" :navListData="navListData" :selectKey="selectKey"></navList>
|
||
|
|
<div class="contentBox">
|
||
|
|
<div class="homeContent" ref="parent">
|
||
|
|
<navListBox @setSelectKey=setSelectKey :navListData="navListData" :selectKey="selectKey"></navListBox>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="back" @click="setBack()">< Back</div>
|
||
|
|
<design class="design" v-if="selectKey_ == 'design'"></design>
|
||
|
|
<MoodboardUpload class="moodBoard" v-if="selectKey_ == 'moodBoard'"></MoodboardUpload>
|
||
|
|
<PrintboardUpload class="printBoard" v-if="selectKey_ == 'printBoard'"></PrintboardUpload>
|
||
|
|
<ColorboardUpload class="colorBoard" v-if="selectKey_ == 'colorBoard'"></ColorboardUpload>
|
||
|
|
<SketchboardUpload class="sketchBoard" v-if="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent,computed,ref,watch,nextTick,provide,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 design from './design/index.vue'
|
||
|
|
import MoodboardUpload from './collection/MoodboardUpload.vue'
|
||
|
|
import PrintboardUpload from './collection/PrintboardUpload.vue'
|
||
|
|
import ColorboardUpload from './collection/ColorboardUpload.vue'
|
||
|
|
import SketchboardUpload from './collection/SketchboardUpload.vue'
|
||
|
|
|
||
|
|
import navList from './nav.vue'
|
||
|
|
import navListBox from './navBox.vue'
|
||
|
|
|
||
|
|
|
||
|
|
import { gsap, TweenMax } from "gsap";
|
||
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||
|
|
export default defineComponent({
|
||
|
|
components:{
|
||
|
|
design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,navList,navListBox
|
||
|
|
},
|
||
|
|
setup(props,{emit}) {
|
||
|
|
const store = useStore();
|
||
|
|
let driver__:any = computed(()=>{
|
||
|
|
return store.state.Guide.guide
|
||
|
|
})
|
||
|
|
provide('driver__',driver__)
|
||
|
|
|
||
|
|
const data = reactive({
|
||
|
|
|
||
|
|
selectKey:'',
|
||
|
|
selectKey_:'',
|
||
|
|
adminData:{
|
||
|
|
position:'',
|
||
|
|
dom:null as any,
|
||
|
|
parentDom:null as any,
|
||
|
|
},
|
||
|
|
navListData:[
|
||
|
|
{
|
||
|
|
icon:'',
|
||
|
|
value:'design',
|
||
|
|
name:'1',
|
||
|
|
task:'1-1',
|
||
|
|
},{
|
||
|
|
icon:'',
|
||
|
|
value:'moodBoard',
|
||
|
|
name:'2',
|
||
|
|
task:'1-2',
|
||
|
|
},{
|
||
|
|
icon:'',
|
||
|
|
value:'printBoard',
|
||
|
|
name:'3',
|
||
|
|
task:'1-3',
|
||
|
|
},{
|
||
|
|
icon:'',
|
||
|
|
value:'colorBoard',
|
||
|
|
name:'3',
|
||
|
|
task:'1-4',
|
||
|
|
},{
|
||
|
|
icon:'',
|
||
|
|
value:'sketchBoard',
|
||
|
|
name:'3',
|
||
|
|
task:'1-5',
|
||
|
|
},{
|
||
|
|
icon:'',
|
||
|
|
value:'color3',
|
||
|
|
name:'3',
|
||
|
|
task:'2-1',
|
||
|
|
},{
|
||
|
|
icon:'',
|
||
|
|
value:'color4',
|
||
|
|
name:'3',
|
||
|
|
task:'3-1',
|
||
|
|
},{
|
||
|
|
icon:'',
|
||
|
|
value:'color5',
|
||
|
|
name:'3',
|
||
|
|
task:'4-1',
|
||
|
|
},{
|
||
|
|
icon:'',
|
||
|
|
value:'color6',
|
||
|
|
name:'3',
|
||
|
|
task:'4-2',
|
||
|
|
},{
|
||
|
|
icon:'',
|
||
|
|
value:'color7',
|
||
|
|
name:'3',
|
||
|
|
task:'5-1',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
})
|
||
|
|
const dataTime = reactive({
|
||
|
|
selectTime:null as any,
|
||
|
|
})
|
||
|
|
const dataDom = reactive({
|
||
|
|
parent:null as any
|
||
|
|
})
|
||
|
|
const setBack = ()=>{
|
||
|
|
data.selectKey = ''
|
||
|
|
updataPage()
|
||
|
|
}
|
||
|
|
const setSelectKey = (value:any)=>{
|
||
|
|
let {str,dom,position} = value
|
||
|
|
data.adminData.dom = dom
|
||
|
|
data.adminData.parentDom = value?.parentDom
|
||
|
|
data.adminData.position = position
|
||
|
|
data.selectKey = str
|
||
|
|
updataPage()
|
||
|
|
}
|
||
|
|
const updataPage = ()=>{
|
||
|
|
let {dom,position} = data.adminData
|
||
|
|
let contentDom:any = document.querySelectorAll('.home .content')[0]
|
||
|
|
clearTimeout(dataTime.selectTime)
|
||
|
|
let {top,left,width,height} = dom.getBoundingClientRect()
|
||
|
|
let parentPosition = dataDom.parent.getBoundingClientRect()
|
||
|
|
let parentTop = parentPosition?.top
|
||
|
|
let parentLeft = parentPosition?.left
|
||
|
|
if(data.selectKey_ && data.selectKey == ''){
|
||
|
|
// let index = data.navListData.findIndex((item:any) => item.value === data.selectKey_);
|
||
|
|
let y = top - parentTop + height / 2
|
||
|
|
let x = left - parentLeft + width / 2
|
||
|
|
if(position == 'nav'){
|
||
|
|
x = 0
|
||
|
|
y = dom.offsetTop + dom.offsetHeight / 2
|
||
|
|
}
|
||
|
|
contentDom.style.transformOrigin = `${x}px ${y}px`
|
||
|
|
gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
|
||
|
|
dataTime.selectTime = setTimeout(() => {
|
||
|
|
data.selectKey_ = data.selectKey
|
||
|
|
}, 500);
|
||
|
|
}else{
|
||
|
|
data.selectKey_ = data.selectKey
|
||
|
|
nextTick(()=>{
|
||
|
|
// let index = data.navListData.findIndex((item:any) => item.value === str);
|
||
|
|
let y = top - parentTop + height / 2
|
||
|
|
let x = left - parentLeft + width / 2
|
||
|
|
if(position == 'nav'){
|
||
|
|
x = 0
|
||
|
|
y = dom.offsetTop + dom.offsetHeight / 2
|
||
|
|
}
|
||
|
|
contentDom.style.transformOrigin = `${x}px ${y}px`
|
||
|
|
gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// watch(()=>data.selectKey,(newVal:any,oldVal:any)=>{
|
||
|
|
// let navDom:any = document.querySelectorAll('.home .navList')
|
||
|
|
// let contentDom:any = document.querySelectorAll('.home .content')[0]
|
||
|
|
// clearTimeout(dataTime.selectTime)
|
||
|
|
// if(oldVal && newVal == ''){
|
||
|
|
// dataTime.selectTime
|
||
|
|
// let index = data.navListData.findIndex(item => item.value === oldVal);
|
||
|
|
// let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
|
||
|
|
// contentDom.style.transformOrigin = `0px ${top}px`
|
||
|
|
// gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
|
||
|
|
// dataTime.selectTime = setTimeout(() => {
|
||
|
|
// data.selectKey_ = newVal
|
||
|
|
// }, 500);
|
||
|
|
// }else{
|
||
|
|
// data.selectKey_ = newVal
|
||
|
|
// nextTick(()=>{
|
||
|
|
// let index = data.navListData.findIndex(item => item.value === newVal);
|
||
|
|
// let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
|
||
|
|
// contentDom.style.transformOrigin = `0px ${top}px`
|
||
|
|
// gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
return{
|
||
|
|
...toRefs(dataDom),
|
||
|
|
...toRefs(data),
|
||
|
|
setBack,
|
||
|
|
setSelectKey,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
provide() {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.home{
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
> .contentBox{
|
||
|
|
position: relative;
|
||
|
|
flex: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
> .content,
|
||
|
|
>.homeContent{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 3rem;
|
||
|
|
}
|
||
|
|
> .content{
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
transform: scale(0);
|
||
|
|
background: #ff6666;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
> *{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
> .back{
|
||
|
|
width: auto;
|
||
|
|
height: auto;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
> .homeContent{
|
||
|
|
// background: #91ff66;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|