|
@@ -1,10 +1,5 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div |
|
|
|
|
|
v-if="proportion" |
|
|
|
|
|
:class="inPage ? 'page active' : 'page'" |
|
|
|
|
|
id="pageBody" |
|
|
|
|
|
@touchstart="globalClick" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<div v-if="proportion" :class="inPage ? 'page active' : 'page'" id="pageBody" @touchstart="globalClick"> |
|
|
<div class="content" :style="bgStyle" ref="fatherBox"> |
|
|
<div class="content" :style="bgStyle" ref="fatherBox"> |
|
|
<!-- 控制框 --> |
|
|
<!-- 控制框 --> |
|
|
<!-- <div class="control"> |
|
|
<!-- <div class="control"> |
|
@@ -27,38 +22,20 @@ |
|
|
transform: 'scale(' + item.w / proportion + ') ', |
|
|
transform: 'scale(' + item.w / proportion + ') ', |
|
|
zIndex: item.z, |
|
|
zIndex: item.z, |
|
|
top: item.y / proportion + 'px', |
|
|
top: item.y / proportion + 'px', |
|
|
left: item.x / proportion + 'px', |
|
|
|
|
|
}" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
left: item.x / proportion + 'px' |
|
|
|
|
|
}"> |
|
|
<div id="itemText">{{ item.text }}</div> |
|
|
<div id="itemText">{{ item.text }}</div> |
|
|
<img id="itemImg" :src="item.material" alt="" /> |
|
|
<img id="itemImg" :src="item.material" alt="" /> |
|
|
<!-- 边框 --> |
|
|
<!-- 边框 --> |
|
|
<div id="itemBorder" :class="domIndex == index ? 'active' : ''"></div> |
|
|
<div id="itemBorder" :class="domIndex == index ? 'active' : ''"></div> |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-if="domIndex == index" |
|
|
|
|
|
id="itemDelete" |
|
|
|
|
|
class="itemDelete" |
|
|
|
|
|
@touchstart="delItem(index)" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<div v-if="domIndex == index" id="itemDelete" class="itemDelete" @touchstart="delItem(index)"> |
|
|
<img id="itemDelete" src="../assets/icon/delete.png" alt="" /> |
|
|
<img id="itemDelete" src="../assets/icon/delete.png" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-if="domIndex == index" |
|
|
|
|
|
id="iCircle" |
|
|
|
|
|
class="outSide" |
|
|
|
|
|
@touchmove="scaleMovingMaterial(index)" |
|
|
|
|
|
@touchstart="scaleStartMaterial" |
|
|
|
|
|
@touchend="scaleEndMaterial" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<div v-if="domIndex == index" id="iCircle" class="outSide" @touchmove="scaleMovingMaterial(index)" @touchstart="scaleStartMaterial" @touchend="scaleEndMaterial"> |
|
|
<div id="iCircle" class="circle bottomRight"> |
|
|
<div id="iCircle" class="circle bottomRight"> |
|
|
<img |
|
|
|
|
|
id="iCircle" |
|
|
|
|
|
class="sacleIcon" |
|
|
|
|
|
src="../assets/icon/Scale.png" |
|
|
|
|
|
alt="" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
<img id="iCircle" class="sacleIcon" src="../assets/icon/Scale.png" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -75,28 +52,15 @@ |
|
|
transform: 'scale(' + materialList.virtual.w / proportion + ') ', |
|
|
transform: 'scale(' + materialList.virtual.w / proportion + ') ', |
|
|
zIndex: materialList.virtual.z, |
|
|
zIndex: materialList.virtual.z, |
|
|
top: materialList.virtual.y / proportion + 'px', |
|
|
top: materialList.virtual.y / proportion + 'px', |
|
|
left: materialList.virtual.x / proportion + 'px', |
|
|
|
|
|
}" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
left: materialList.virtual.x / proportion + 'px' |
|
|
|
|
|
}"> |
|
|
<!-- <div>{{ item.text }}</div> --> |
|
|
<!-- <div>{{ item.text }}</div> --> |
|
|
<img id="virtualImg" :src="materialList.virtual.material" alt="" /> |
|
|
<img id="virtualImg" :src="materialList.virtual.material" alt="" /> |
|
|
<!-- 边框 --> |
|
|
<!-- 边框 --> |
|
|
<!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> |
|
|
<!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> |
|
|
<div |
|
|
|
|
|
v-if="isFcous" |
|
|
|
|
|
id="circle" |
|
|
|
|
|
class="outSide" |
|
|
|
|
|
@touchmove="scaleMovingVirtual" |
|
|
|
|
|
@touchstart="scaleStartVirtual" |
|
|
|
|
|
@touchend="scaleEndVirtual" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<div v-if="isFcous" id="circle" class="outSide" @touchmove="scaleMovingVirtual" @touchstart="scaleStartVirtual" @touchend="scaleEndVirtual"> |
|
|
<div id="circle" class="circle bottomRight"> |
|
|
<div id="circle" class="circle bottomRight"> |
|
|
<img |
|
|
|
|
|
id="circle" |
|
|
|
|
|
class="sacleIcon" |
|
|
|
|
|
src="../assets/icon/Scale.png" |
|
|
|
|
|
alt="" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
<img id="circle" class="sacleIcon" src="../assets/icon/Scale.png" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -106,29 +70,29 @@ |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
// 组件 |
|
|
// 组件 |
|
|
import Vue from "vue"; |
|
|
|
|
|
import { Toast } from "vant"; |
|
|
|
|
|
import { mapState, mapActions } from "vuex"; |
|
|
|
|
|
|
|
|
import Vue from 'vue'; |
|
|
|
|
|
import { Toast } from 'vant'; |
|
|
|
|
|
import { mapState, mapActions } from 'vuex'; |
|
|
// 工具 |
|
|
// 工具 |
|
|
import { scrollToID } from "../utils"; |
|
|
|
|
|
|
|
|
import { scrollToID } from '../utils'; |
|
|
|
|
|
|
|
|
Vue.use(Toast); |
|
|
Vue.use(Toast); |
|
|
export default { |
|
|
export default { |
|
|
props: { |
|
|
props: { |
|
|
imgUrl: { |
|
|
imgUrl: { |
|
|
default: false, |
|
|
|
|
|
|
|
|
default: false |
|
|
// type: String |
|
|
// type: String |
|
|
}, |
|
|
}, |
|
|
materialList: { |
|
|
materialList: { |
|
|
default: false, |
|
|
default: false, |
|
|
type: Object, |
|
|
|
|
|
|
|
|
type: Object |
|
|
}, |
|
|
}, |
|
|
videoType: { |
|
|
videoType: { |
|
|
default: false, |
|
|
|
|
|
|
|
|
default: false |
|
|
}, |
|
|
}, |
|
|
proportion: { |
|
|
proportion: { |
|
|
default: false, |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
default: false |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
@@ -143,16 +107,16 @@ export default { |
|
|
scale: 1, |
|
|
scale: 1, |
|
|
domIndex: -1, //当前点击的图片 |
|
|
domIndex: -1, //当前点击的图片 |
|
|
domIndex1: -1, //当前点击的数字人 |
|
|
domIndex1: -1, //当前点击的数字人 |
|
|
transformOrigin: "top left", |
|
|
|
|
|
|
|
|
transformOrigin: 'top left', |
|
|
touchStart: {}, |
|
|
touchStart: {}, |
|
|
isFcous: false, |
|
|
isFcous: false, |
|
|
scaleNum: 0.015, // 缩放系数,数值越大缩放灵敏度越高,反之亦然 |
|
|
|
|
|
|
|
|
scaleNum: 0.003 // 缩放系数,数值越大缩放灵敏度越高,反之亦然 |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
computed: { |
|
|
computed: { |
|
|
...mapState({ |
|
|
...mapState({ |
|
|
characters: (state) => state.publicObj.characters, |
|
|
|
|
|
|
|
|
characters: state => state.publicObj.characters, |
|
|
//动态计算样式 |
|
|
//动态计算样式 |
|
|
bgStyle() { |
|
|
bgStyle() { |
|
|
return { |
|
|
return { |
|
@@ -160,31 +124,25 @@ export default { |
|
|
// height: '1920px', |
|
|
// height: '1920px', |
|
|
// transform: 'scale(0.2)', |
|
|
// transform: 'scale(0.2)', |
|
|
backgroundImage: `url(${this.materialList.BGI.material})`, |
|
|
backgroundImage: `url(${this.materialList.BGI.material})`, |
|
|
backgroundSize: "cover", |
|
|
|
|
|
backgroundPosition: "center", |
|
|
|
|
|
|
|
|
backgroundSize: 'cover', |
|
|
|
|
|
backgroundPosition: 'center' |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
|
|
|
}), |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
methods: { |
|
|
methods: { |
|
|
...mapActions(["setCharacters"]), |
|
|
|
|
|
|
|
|
...mapActions(['setCharacters']), |
|
|
// 组件 |
|
|
// 组件 |
|
|
globalClick(e) { |
|
|
globalClick(e) { |
|
|
console.log(e.target.id); |
|
|
console.log(e.target.id); |
|
|
// 当点击区域不是数字人时,取消数字人的聚焦框 |
|
|
// 当点击区域不是数字人时,取消数字人的聚焦框 |
|
|
if ( |
|
|
|
|
|
!( |
|
|
|
|
|
e.target.id == "virtual" || |
|
|
|
|
|
e.target.id == "virtualImg" || |
|
|
|
|
|
e.target.id == "circle" |
|
|
|
|
|
) |
|
|
|
|
|
) { |
|
|
|
|
|
|
|
|
if (!(e.target.id == 'virtual' || e.target.id == 'virtualImg' || e.target.id == 'circle')) { |
|
|
this.isFcous = false; |
|
|
this.isFcous = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 当点击区域不是素材时,取消素材的聚焦框 |
|
|
// 当点击区域不是素材时,取消素材的聚焦框 |
|
|
if (e.target.id[0] != "i") { |
|
|
|
|
|
|
|
|
if (e.target.id[0] != 'i') { |
|
|
this.domIndex = -2; |
|
|
this.domIndex = -2; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
@@ -196,10 +154,7 @@ export default { |
|
|
this.domIndex = index; |
|
|
this.domIndex = index; |
|
|
//双指缩放初始化 |
|
|
//双指缩放初始化 |
|
|
if (event.touches[1]) { |
|
|
if (event.touches[1]) { |
|
|
this.startDistance = this.getDistance( |
|
|
|
|
|
event.touches[0], |
|
|
|
|
|
event.touches[1] |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
this.startDistance = this.getDistance(event.touches[0], event.touches[1]); |
|
|
} |
|
|
} |
|
|
// 记录点击瞬间的鼠标坐标 |
|
|
// 记录点击瞬间的鼠标坐标 |
|
|
this.startX = event.touches[0].clientX; |
|
|
this.startX = event.touches[0].clientX; |
|
@@ -216,7 +171,7 @@ export default { |
|
|
event.preventDefault(); |
|
|
event.preventDefault(); |
|
|
if (!this.dragging) return; |
|
|
if (!this.dragging) return; |
|
|
if (this.domIndex != index) return; |
|
|
if (this.domIndex != index) return; |
|
|
if (event.target.id == "iCircle") return; |
|
|
|
|
|
|
|
|
if (event.target.id == 'iCircle') return; |
|
|
// console.log(event.touches[0]) |
|
|
// console.log(event.touches[0]) |
|
|
|
|
|
|
|
|
// 双指缩放 |
|
|
// 双指缩放 |
|
@@ -238,9 +193,7 @@ export default { |
|
|
// 得到父子盒子信息 |
|
|
// 得到父子盒子信息 |
|
|
const fatherRect = this.$refs.fatherBox.getBoundingClientRect(); |
|
|
const fatherRect = this.$refs.fatherBox.getBoundingClientRect(); |
|
|
// 子盒子信息 |
|
|
// 子盒子信息 |
|
|
const sonRect = document |
|
|
|
|
|
.getElementById(`item${index}`) |
|
|
|
|
|
.getBoundingClientRect(); |
|
|
|
|
|
|
|
|
const sonRect = document.getElementById(`item${index}`).getBoundingClientRect(); |
|
|
// 限制X轴 |
|
|
// 限制X轴 |
|
|
// console.log(fatherRect) |
|
|
// console.log(fatherRect) |
|
|
// console.log(sonRect) |
|
|
// console.log(sonRect) |
|
@@ -264,7 +217,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
delItem(index) { |
|
|
delItem(index) { |
|
|
console.log(index, "index"); |
|
|
|
|
|
|
|
|
console.log(index, 'index'); |
|
|
this.materialList.scList.splice(index, 1); |
|
|
this.materialList.scList.splice(index, 1); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
@@ -276,10 +229,7 @@ export default { |
|
|
this.dragging = true; |
|
|
this.dragging = true; |
|
|
//双指缩放初始化 |
|
|
//双指缩放初始化 |
|
|
if (event.touches[1]) { |
|
|
if (event.touches[1]) { |
|
|
this.startDistance = this.getDistance( |
|
|
|
|
|
event.touches[0], |
|
|
|
|
|
event.touches[1] |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
this.startDistance = this.getDistance(event.touches[0], event.touches[1]); |
|
|
} |
|
|
} |
|
|
// 记录点击瞬间的鼠标坐标 |
|
|
// 记录点击瞬间的鼠标坐标 |
|
|
this.startX = event.touches[0].clientX; |
|
|
this.startX = event.touches[0].clientX; |
|
@@ -289,11 +239,7 @@ export default { |
|
|
virtualTouchUp() { |
|
|
virtualTouchUp() { |
|
|
this.dragging = false; |
|
|
this.dragging = false; |
|
|
this.startDistance = 0; |
|
|
this.startDistance = 0; |
|
|
console.log( |
|
|
|
|
|
this.materialList.virtual.x, |
|
|
|
|
|
this.materialList.virtual.y, |
|
|
|
|
|
"position now" |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
console.log(this.materialList.virtual.x, this.materialList.virtual.y, 'position now'); |
|
|
// Toast.success( |
|
|
// Toast.success( |
|
|
// this.materialList.virtual.x + "," + this.materialList.virtual.y |
|
|
// this.materialList.virtual.x + "," + this.materialList.virtual.y |
|
|
// ); |
|
|
// ); |
|
@@ -301,7 +247,7 @@ export default { |
|
|
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 |
|
|
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 |
|
|
virtualTouchMoving(e) { |
|
|
virtualTouchMoving(e) { |
|
|
// 右下角缩放 |
|
|
// 右下角缩放 |
|
|
if (e.target.id == "circle") return; |
|
|
|
|
|
|
|
|
if (e.target.id == 'circle') return; |
|
|
// 禁止默认事件--下拉 |
|
|
// 禁止默认事件--下拉 |
|
|
event.preventDefault(); |
|
|
event.preventDefault(); |
|
|
if (!this.dragging) return; |
|
|
if (!this.dragging) return; |
|
@@ -317,9 +263,7 @@ export default { |
|
|
// 得到父子盒子信息 |
|
|
// 得到父子盒子信息 |
|
|
const fatherRect = this.$refs.fatherBox.getBoundingClientRect(); |
|
|
const fatherRect = this.$refs.fatherBox.getBoundingClientRect(); |
|
|
// 子盒子信息 |
|
|
// 子盒子信息 |
|
|
const sonRect = document |
|
|
|
|
|
.getElementById(`virtual`) |
|
|
|
|
|
.getBoundingClientRect(); |
|
|
|
|
|
|
|
|
const sonRect = document.getElementById(`virtual`).getBoundingClientRect(); |
|
|
|
|
|
|
|
|
const deltaX = event.touches[0].clientX - this.startX; |
|
|
const deltaX = event.touches[0].clientX - this.startX; |
|
|
const deltaY = event.touches[0].clientY - this.startY; |
|
|
const deltaY = event.touches[0].clientY - this.startY; |
|
@@ -354,7 +298,7 @@ export default { |
|
|
// 控制台 |
|
|
// 控制台 |
|
|
controlImg(type) { |
|
|
controlImg(type) { |
|
|
if (this.domIndex == -1) { |
|
|
if (this.domIndex == -1) { |
|
|
Toast("请选择素材"); |
|
|
|
|
|
|
|
|
Toast('请选择素材'); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (type == 1) { |
|
|
if (type == 1) { |
|
@@ -396,7 +340,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
// 素材超出显示范围 |
|
|
// 素材超出显示范围 |
|
|
exceed() { |
|
|
exceed() { |
|
|
Toast("素材超出显示范围"); |
|
|
|
|
|
|
|
|
Toast('素材超出显示范围'); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
scaleMovingMaterial(index) { |
|
|
scaleMovingMaterial(index) { |
|
@@ -408,7 +352,7 @@ export default { |
|
|
|
|
|
|
|
|
// 变化大小,true为变小,false为变大 |
|
|
// 变化大小,true为变小,false为变大 |
|
|
const flag = Math.sign(x - this.touchStart.pageX) == -1 ? true : false; |
|
|
const flag = Math.sign(x - this.touchStart.pageX) == -1 ? true : false; |
|
|
console.log(flag, "flag"); |
|
|
|
|
|
|
|
|
console.log(flag, 'flag'); |
|
|
console.log(this.proportion); |
|
|
console.log(this.proportion); |
|
|
if (!flag) { |
|
|
if (!flag) { |
|
|
// 限制最大缩放系数 |
|
|
// 限制最大缩放系数 |
|
@@ -417,7 +361,7 @@ export default { |
|
|
// 更新坐标位置 |
|
|
// 更新坐标位置 |
|
|
this.touchStart = { |
|
|
this.touchStart = { |
|
|
pageX: x, |
|
|
pageX: x, |
|
|
pageY: y, |
|
|
|
|
|
|
|
|
pageY: y |
|
|
}; |
|
|
}; |
|
|
} else { |
|
|
} else { |
|
|
// 限制最小缩放系数 |
|
|
// 限制最小缩放系数 |
|
@@ -426,7 +370,7 @@ export default { |
|
|
// 更新坐标位置 |
|
|
// 更新坐标位置 |
|
|
this.touchStart = { |
|
|
this.touchStart = { |
|
|
pageX: x, |
|
|
pageX: x, |
|
|
pageY: y, |
|
|
|
|
|
|
|
|
pageY: y |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
@@ -436,9 +380,9 @@ export default { |
|
|
const y = e.changedTouches[0].clientY; |
|
|
const y = e.changedTouches[0].clientY; |
|
|
this.touchStart = { |
|
|
this.touchStart = { |
|
|
pageX: x, |
|
|
pageX: x, |
|
|
pageY: y, |
|
|
|
|
|
|
|
|
pageY: y |
|
|
}; |
|
|
}; |
|
|
console.log(this.touchStart, "touchStart"); |
|
|
|
|
|
|
|
|
console.log(this.touchStart, 'touchStart'); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
scaleEndMaterial(e) {}, |
|
|
scaleEndMaterial(e) {}, |
|
@@ -451,7 +395,7 @@ export default { |
|
|
|
|
|
|
|
|
// 变化大小,true为变小,false为变大 |
|
|
// 变化大小,true为变小,false为变大 |
|
|
const flag = Math.sign(x - this.touchStart.pageX) == -1 ? true : false; |
|
|
const flag = Math.sign(x - this.touchStart.pageX) == -1 ? true : false; |
|
|
console.log(flag, "flag"); |
|
|
|
|
|
|
|
|
console.log(flag, 'flag'); |
|
|
console.log(this.proportion); |
|
|
console.log(this.proportion); |
|
|
if (!flag) { |
|
|
if (!flag) { |
|
|
// 限制最大缩放系数 |
|
|
// 限制最大缩放系数 |
|
@@ -460,7 +404,7 @@ export default { |
|
|
// 更新坐标位置 |
|
|
// 更新坐标位置 |
|
|
this.touchStart = { |
|
|
this.touchStart = { |
|
|
pageX: x, |
|
|
pageX: x, |
|
|
pageY: y, |
|
|
|
|
|
|
|
|
pageY: y |
|
|
}; |
|
|
}; |
|
|
} else { |
|
|
} else { |
|
|
// 限制最小缩放系数 |
|
|
// 限制最小缩放系数 |
|
@@ -469,7 +413,7 @@ export default { |
|
|
// 更新坐标位置 |
|
|
// 更新坐标位置 |
|
|
this.touchStart = { |
|
|
this.touchStart = { |
|
|
pageX: x, |
|
|
pageX: x, |
|
|
pageY: y, |
|
|
|
|
|
|
|
|
pageY: y |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
@@ -479,13 +423,13 @@ export default { |
|
|
const y = e.changedTouches[0].clientY; |
|
|
const y = e.changedTouches[0].clientY; |
|
|
this.touchStart = { |
|
|
this.touchStart = { |
|
|
pageX: x, |
|
|
pageX: x, |
|
|
pageY: y, |
|
|
|
|
|
|
|
|
pageY: y |
|
|
}; |
|
|
}; |
|
|
console.log(this.touchStart, "touchStart"); |
|
|
|
|
|
|
|
|
console.log(this.touchStart, 'touchStart'); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
scaleEndVirtual(e) { |
|
|
scaleEndVirtual(e) { |
|
|
console.log(this.materialList.virtual.w, "w"); |
|
|
|
|
|
|
|
|
console.log(this.materialList.virtual.w, 'w'); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 计算双指距离 |
|
|
// 计算双指距离 |
|
@@ -496,7 +440,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
go(url) { |
|
|
go(url) { |
|
|
this.$router.push(url); |
|
|
this.$router.push(url); |
|
|
}, |
|
|
|
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
// proportion(newValue) { |
|
|
// proportion(newValue) { |
|
@@ -506,16 +450,12 @@ export default { |
|
|
created() {}, |
|
|
created() {}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.inPage = true; |
|
|
this.inPage = true; |
|
|
scrollToID("top"); |
|
|
|
|
|
console.log( |
|
|
|
|
|
this.materialList.virtual.x, |
|
|
|
|
|
this.materialList.virtual.y, |
|
|
|
|
|
"position now" |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
scrollToID('top'); |
|
|
|
|
|
console.log(this.materialList.virtual.x, this.materialList.virtual.y, 'position now'); |
|
|
// const elementWidth = document.getElementById('pageBody').clientHeight |
|
|
// const elementWidth = document.getElementById('pageBody').clientHeight |
|
|
// this.proportionSon = elementWidth / 1080 |
|
|
// this.proportionSon = elementWidth / 1080 |
|
|
// console.log(elementWidth) |
|
|
// console.log(elementWidth) |
|
|
}, |
|
|
|
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|