|
|
@@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div :class="inPage ? 'page active' : 'page'"> |
|
|
|
<div v-if="proportion" :class="inPage ? 'page active' : 'page'" id="pageBody"> |
|
|
|
<div class="content" :style="bgStyle" ref="fatherBox"> |
|
|
|
<!-- 控制框 --> |
|
|
|
<!-- <div class="control"> |
|
|
@@ -18,6 +18,7 @@ |
|
|
|
:key="index" |
|
|
|
class="material" |
|
|
|
:style="{ |
|
|
|
transformOrigin: 'top left', |
|
|
|
transform: 'scale(' + item.w + ') ', |
|
|
|
zIndex: item.z, |
|
|
|
top: item.y + 'px', |
|
|
@@ -38,10 +39,11 @@ |
|
|
|
@touchend="onMouseUp1()" |
|
|
|
class="material" |
|
|
|
:style="{ |
|
|
|
transform: 'scale(' + materialList.virtual.w + ') ', |
|
|
|
transformOrigin: 'top left', |
|
|
|
transform: 'scale(' + materialList.virtual.w / proportion + ') ', |
|
|
|
zIndex: materialList.virtual.z, |
|
|
|
top: materialList.virtual.y + 'px', |
|
|
|
left: materialList.virtual.x + 'px' |
|
|
|
top: materialList.virtual.y / proportion + 'px', |
|
|
|
left: materialList.virtual.x / proportion + 'px' |
|
|
|
}" |
|
|
|
> |
|
|
|
<!-- <div>{{ item.text }}</div> --> |
|
|
@@ -63,12 +65,6 @@ import { scrollToID } from '../utils' |
|
|
|
|
|
|
|
Vue.use(Toast) |
|
|
|
export default { |
|
|
|
// watch: { |
|
|
|
// materialList(newValue, oldValue) { |
|
|
|
// console.log(`count变化了,新值为${newValue},旧值为${oldValue}`) |
|
|
|
// this.materialList = newValue |
|
|
|
// } |
|
|
|
// }, |
|
|
|
props: { |
|
|
|
imgUrl: { |
|
|
|
default: false |
|
|
@@ -77,12 +73,19 @@ export default { |
|
|
|
materialList: { |
|
|
|
default: false, |
|
|
|
type: Object |
|
|
|
}, |
|
|
|
videoType: { |
|
|
|
default: false |
|
|
|
}, |
|
|
|
proportion: { |
|
|
|
default: false |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
inPage: false, |
|
|
|
dragging: false, |
|
|
|
proportionSon: null, |
|
|
|
startDistance: 0, //两指起始位置 |
|
|
|
startX: 0, |
|
|
|
startY: 0, // 鼠标位置x y |
|
|
@@ -99,25 +102,28 @@ export default { |
|
|
|
characters: (state) => state.publicObj.characters, |
|
|
|
//动态计算样式 |
|
|
|
bgStyle() { |
|
|
|
return { |
|
|
|
backgroundImage: `url(${this.materialList.BGI.material})`, |
|
|
|
backgroundSize: 'cover', |
|
|
|
backgroundPosition: 'center' |
|
|
|
if (this.videoType == 1) { |
|
|
|
return { |
|
|
|
// width: '1080px', |
|
|
|
// height: '1920px', |
|
|
|
// transform: 'scale(0.2)', |
|
|
|
backgroundImage: `url(${this.materialList.BGI.material})`, |
|
|
|
backgroundSize: 'cover', |
|
|
|
backgroundPosition: 'center' |
|
|
|
} |
|
|
|
} |
|
|
|
if (this.videoType == 2) { |
|
|
|
return { |
|
|
|
// width: '1920px', |
|
|
|
// height: '1080px', |
|
|
|
// transform: 'scale(0.2)', |
|
|
|
backgroundImage: `url(${this.materialList.BGI.material})`, |
|
|
|
backgroundSize: 'cover', |
|
|
|
backgroundPosition: 'center' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
// imageStyles() { |
|
|
|
// return this.images.map((image, index) => { |
|
|
|
// return { |
|
|
|
// zIndex: index, |
|
|
|
// width: `${image.width}px`, |
|
|
|
// height: `${image.height}px`, |
|
|
|
// position: 'absolute', |
|
|
|
// top: `${image.y}px`, |
|
|
|
// left: `${image.x}px`, |
|
|
|
// }; |
|
|
|
// }); |
|
|
|
// }, |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
@@ -228,39 +234,40 @@ export default { |
|
|
|
this.materialList.virtual.w = scale |
|
|
|
this.materialList.virtual.h = scale |
|
|
|
} |
|
|
|
// 得到父子盒子信息 |
|
|
|
const fatherRect = this.$refs.fatherBox.getBoundingClientRect() |
|
|
|
// 子盒子信息 |
|
|
|
const sonRect = document.getElementById(`virtual`).getBoundingClientRect() |
|
|
|
|
|
|
|
const deltaX = event.touches[0].clientX - this.startX |
|
|
|
const deltaY = event.touches[0].clientY - this.startY |
|
|
|
// console.log(deltaX) |
|
|
|
this.materialList.virtual.x += deltaX |
|
|
|
this.materialList.virtual.y += deltaY |
|
|
|
this.materialList.virtual.x += deltaX.toFixed(0) * this.proportion |
|
|
|
this.materialList.virtual.y += deltaY.toFixed(0) * this.proportion |
|
|
|
|
|
|
|
this.startX = event.touches[0].clientX |
|
|
|
this.startY = event.touches[0].clientY |
|
|
|
|
|
|
|
// 得到父子盒子信息 |
|
|
|
const fatherRect = this.$refs.fatherBox.getBoundingClientRect() |
|
|
|
// 子盒子信息 |
|
|
|
const sonRect = document.getElementById(`virtual`).getBoundingClientRect() |
|
|
|
// 限制X轴 |
|
|
|
// console.log(fatherRect) |
|
|
|
// console.log(sonRect) |
|
|
|
if (this.materialList.virtual.x < -sonRect.width) { |
|
|
|
this.materialList.virtual.x = 0 |
|
|
|
this.exceed() |
|
|
|
} |
|
|
|
if (this.materialList.virtual.x > fatherRect.width) { |
|
|
|
this.materialList.virtual.x = 0 |
|
|
|
this.exceed() |
|
|
|
} |
|
|
|
// 限制Y轴 |
|
|
|
if (this.materialList.virtual.y < -sonRect.height) { |
|
|
|
this.materialList.virtual.y = 0 |
|
|
|
this.exceed() |
|
|
|
} |
|
|
|
if (this.materialList.virtual.y > fatherRect.height) { |
|
|
|
this.materialList.virtual.y = 0 |
|
|
|
this.exceed() |
|
|
|
} |
|
|
|
// if (this.materialList.virtual.x < -sonRect.width) { |
|
|
|
// this.materialList.virtual.x = 0 |
|
|
|
// this.exceed() |
|
|
|
// } |
|
|
|
// if (this.materialList.virtual.x > fatherRect.width) { |
|
|
|
// this.materialList.virtual.x = 0 |
|
|
|
// this.exceed() |
|
|
|
// } |
|
|
|
// // 限制Y轴 |
|
|
|
// if (this.materialList.virtual.y < -sonRect.height) { |
|
|
|
// this.materialList.virtual.y = 0 |
|
|
|
// this.exceed() |
|
|
|
// } |
|
|
|
// if (this.materialList.virtual.y > fatherRect.height) { |
|
|
|
// this.materialList.virtual.y = 0 |
|
|
|
// this.exceed() |
|
|
|
// } |
|
|
|
}, |
|
|
|
// 控制台 |
|
|
|
controlImg(type) { |
|
|
@@ -319,10 +326,18 @@ export default { |
|
|
|
this.$router.push(url) |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
// proportion(newValue) { |
|
|
|
// this.proportionSon = newValue |
|
|
|
// } |
|
|
|
}, |
|
|
|
created() {}, |
|
|
|
mounted() { |
|
|
|
this.inPage = true |
|
|
|
scrollToID('top') |
|
|
|
// const elementWidth = document.getElementById('pageBody').clientHeight |
|
|
|
// this.proportionSon = elementWidth / 1080 |
|
|
|
// console.log(elementWidth) |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
@@ -331,20 +346,7 @@ export default { |
|
|
|
* { |
|
|
|
box-sizing: content-box !important; |
|
|
|
} |
|
|
|
.control { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
width: 200px; |
|
|
|
height: 30px; |
|
|
|
text-align: center; |
|
|
|
line-height: 30px; |
|
|
|
background-color: #fff; |
|
|
|
z-index: 999999; |
|
|
|
} |
|
|
|
|
|
|
|
.page { |
|
|
|
transform: translateX(30%); |
|
|
|
opacity: 0; |
|
|
@@ -363,7 +365,11 @@ export default { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background-color: green; |
|
|
|
// width: 1080px; |
|
|
|
// height: 1920px; |
|
|
|
// transform: scale(0.3, 0.3); |
|
|
|
// transform-origin: top left; |
|
|
|
// background-color: green; |
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
.active { |
|
|
@@ -382,7 +388,7 @@ export default { |
|
|
|
// height: 140px; |
|
|
|
// background-color: red; |
|
|
|
img { |
|
|
|
// width: 150px; |
|
|
|
// width: 216px; |
|
|
|
// height: 150px; |
|
|
|
// background-color: red; |
|
|
|
} |
|
|
|