|
@@ -22,7 +22,7 @@ |
|
|
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>{{ item.text }}</div> |
|
|
<div>{{ item.text }}</div> |
|
@@ -34,22 +34,38 @@ |
|
|
<!-- 数字人 --> |
|
|
<!-- 数字人 --> |
|
|
<div |
|
|
<div |
|
|
id="virtual" |
|
|
id="virtual" |
|
|
@touchmove="onMouseMove1()" |
|
|
|
|
|
@touchstart="onMouseDown1()" |
|
|
|
|
|
@touchend="onMouseUp1()" |
|
|
|
|
|
|
|
|
@touchmove="onMouseMove1" |
|
|
|
|
|
@touchstart="onMouseDown1" |
|
|
|
|
|
@touchend="onMouseUp1" |
|
|
class="material" |
|
|
class="material" |
|
|
:style="{ |
|
|
:style="{ |
|
|
transformOrigin: 'top left', |
|
|
|
|
|
|
|
|
transformOrigin: transformOrigin, |
|
|
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 :src="materialList.virtual.material" alt="" /> |
|
|
<img :src="materialList.virtual.material" alt="" /> |
|
|
<!-- 边框 --> |
|
|
<!-- 边框 --> |
|
|
<!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> |
|
|
<!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> |
|
|
|
|
|
<div |
|
|
|
|
|
id="circle" |
|
|
|
|
|
class="outSide" |
|
|
|
|
|
@touchmove="scaleMoving" |
|
|
|
|
|
@touchstart="scaleStart" |
|
|
|
|
|
@touchend="scaleEnd" |
|
|
|
|
|
> |
|
|
|
|
|
<div id="circle" class="circle bottomRight"> |
|
|
|
|
|
<img |
|
|
|
|
|
id="circle" |
|
|
|
|
|
class="sacleIcon" |
|
|
|
|
|
src="../assets/icon/Scale.png" |
|
|
|
|
|
alt="" |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -57,29 +73,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 { |
|
@@ -93,8 +109,10 @@ export default { |
|
|
windowHeight: 0, |
|
|
windowHeight: 0, |
|
|
scale: 1, |
|
|
scale: 1, |
|
|
domIndex: -1, //当前点击的图片 |
|
|
domIndex: -1, //当前点击的图片 |
|
|
domIndex1: -1 //当前点击的数字人 |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
domIndex1: -1, //当前点击的数字人 |
|
|
|
|
|
transformOrigin: "top left", |
|
|
|
|
|
touchStart: {}, |
|
|
|
|
|
}; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
computed: { |
|
|
computed: { |
|
@@ -107,65 +125,65 @@ 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"]), |
|
|
// 鼠标按下事件 |
|
|
// 鼠标按下事件 |
|
|
onMouseDown(index) { |
|
|
onMouseDown(index) { |
|
|
this.dragging = true |
|
|
|
|
|
this.domIndex = index |
|
|
|
|
|
|
|
|
this.dragging = true; |
|
|
|
|
|
this.domIndex = index; |
|
|
//双指缩放初始化 |
|
|
//双指缩放初始化 |
|
|
if (event.touches[1]) { |
|
|
if (event.touches[1]) { |
|
|
this.startDistance = this.getDistance( |
|
|
this.startDistance = this.getDistance( |
|
|
event.touches[0], |
|
|
event.touches[0], |
|
|
event.touches[1] |
|
|
event.touches[1] |
|
|
) |
|
|
|
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
// 记录点击瞬间的鼠标坐标 |
|
|
// 记录点击瞬间的鼠标坐标 |
|
|
this.startX = event.touches[0].clientX |
|
|
|
|
|
this.startY = event.touches[0].clientY |
|
|
|
|
|
|
|
|
this.startX = event.touches[0].clientX; |
|
|
|
|
|
this.startY = event.touches[0].clientY; |
|
|
}, |
|
|
}, |
|
|
// 鼠标抬起 |
|
|
// 鼠标抬起 |
|
|
onMouseUp(index) { |
|
|
onMouseUp(index) { |
|
|
this.dragging = false |
|
|
|
|
|
|
|
|
this.dragging = false; |
|
|
// this.domIndex = -1 |
|
|
// this.domIndex = -1 |
|
|
}, |
|
|
}, |
|
|
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 |
|
|
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 |
|
|
onMouseMove(index) { |
|
|
onMouseMove(index) { |
|
|
// 禁止默认事件--下拉 |
|
|
// 禁止默认事件--下拉 |
|
|
event.preventDefault() |
|
|
|
|
|
if (!this.dragging) return |
|
|
|
|
|
if (this.domIndex != index) return |
|
|
|
|
|
|
|
|
event.preventDefault(); |
|
|
|
|
|
if (!this.dragging) return; |
|
|
|
|
|
if (this.domIndex != index) return; |
|
|
// console.log(event.touches[0]) |
|
|
// console.log(event.touches[0]) |
|
|
|
|
|
|
|
|
// 双指缩放 |
|
|
// 双指缩放 |
|
|
if (event.touches[1]) { |
|
|
if (event.touches[1]) { |
|
|
const distance = this.getDistance(event.touches[0], event.touches[1]) |
|
|
|
|
|
const scale = (distance / this.startDistance).toFixed(2) |
|
|
|
|
|
this.materialList.scList[index].w = scale |
|
|
|
|
|
this.materialList.scList[index].h = scale |
|
|
|
|
|
|
|
|
const distance = this.getDistance(event.touches[0], event.touches[1]); |
|
|
|
|
|
const scale = (distance / this.startDistance).toFixed(2); |
|
|
|
|
|
this.materialList.scList[index].w = scale; |
|
|
|
|
|
this.materialList.scList[index].h = scale; |
|
|
} |
|
|
} |
|
|
const deltaX = event.touches[0].clientX - this.startX |
|
|
|
|
|
const deltaY = event.touches[0].clientY - this.startY |
|
|
|
|
|
|
|
|
const deltaX = event.touches[0].clientX - this.startX; |
|
|
|
|
|
const deltaY = event.touches[0].clientY - this.startY; |
|
|
// console.log(deltaX) |
|
|
// console.log(deltaX) |
|
|
this.materialList.scList[index].x += deltaX.toFixed(0) * this.proportion |
|
|
|
|
|
this.materialList.scList[index].y += deltaY.toFixed(0) * this.proportion |
|
|
|
|
|
|
|
|
this.materialList.scList[index].x += deltaX.toFixed(0) * this.proportion; |
|
|
|
|
|
this.materialList.scList[index].y += deltaY.toFixed(0) * this.proportion; |
|
|
|
|
|
|
|
|
this.startX = event.touches[0].clientX |
|
|
|
|
|
this.startY = event.touches[0].clientY |
|
|
|
|
|
|
|
|
this.startX = event.touches[0].clientX; |
|
|
|
|
|
this.startY = event.touches[0].clientY; |
|
|
|
|
|
|
|
|
// 得到父子盒子信息 |
|
|
// 得到父子盒子信息 |
|
|
const fatherRect = this.$refs.fatherBox.getBoundingClientRect() |
|
|
|
|
|
|
|
|
const fatherRect = this.$refs.fatherBox.getBoundingClientRect(); |
|
|
// 子盒子信息 |
|
|
// 子盒子信息 |
|
|
const sonRect = document |
|
|
const sonRect = document |
|
|
.getElementById(`item${index}`) |
|
|
.getElementById(`item${index}`) |
|
|
.getBoundingClientRect() |
|
|
|
|
|
|
|
|
.getBoundingClientRect(); |
|
|
// 限制X轴 |
|
|
// 限制X轴 |
|
|
// console.log(fatherRect) |
|
|
// console.log(fatherRect) |
|
|
// console.log(sonRect) |
|
|
// console.log(sonRect) |
|
@@ -191,51 +209,63 @@ export default { |
|
|
// 数字人的处理 |
|
|
// 数字人的处理 |
|
|
// 鼠标按下事件 |
|
|
// 鼠标按下事件 |
|
|
onMouseDown1() { |
|
|
onMouseDown1() { |
|
|
this.domIndex = -2 |
|
|
|
|
|
this.dragging = true |
|
|
|
|
|
|
|
|
this.domIndex = -2; |
|
|
|
|
|
this.dragging = true; |
|
|
//双指缩放初始化 |
|
|
//双指缩放初始化 |
|
|
if (event.touches[1]) { |
|
|
if (event.touches[1]) { |
|
|
this.startDistance = this.getDistance( |
|
|
this.startDistance = this.getDistance( |
|
|
event.touches[0], |
|
|
event.touches[0], |
|
|
event.touches[1] |
|
|
event.touches[1] |
|
|
) |
|
|
|
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
// 记录点击瞬间的鼠标坐标 |
|
|
// 记录点击瞬间的鼠标坐标 |
|
|
this.startX = event.touches[0].clientX |
|
|
|
|
|
this.startY = event.touches[0].clientY |
|
|
|
|
|
|
|
|
this.startX = event.touches[0].clientX; |
|
|
|
|
|
this.startY = event.touches[0].clientY; |
|
|
}, |
|
|
}, |
|
|
// 鼠标抬起 |
|
|
// 鼠标抬起 |
|
|
onMouseUp1() { |
|
|
onMouseUp1() { |
|
|
this.dragging = false |
|
|
|
|
|
this.startDistance = 0 |
|
|
|
|
|
|
|
|
this.dragging = false; |
|
|
|
|
|
this.startDistance = 0; |
|
|
|
|
|
console.log( |
|
|
|
|
|
this.materialList.virtual.x, |
|
|
|
|
|
this.materialList.virtual.y, |
|
|
|
|
|
"position now" |
|
|
|
|
|
); |
|
|
|
|
|
// Toast.success( |
|
|
|
|
|
// this.materialList.virtual.x + "," + this.materialList.virtual.y |
|
|
|
|
|
// ); |
|
|
}, |
|
|
}, |
|
|
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 |
|
|
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 |
|
|
onMouseMove1() { |
|
|
|
|
|
|
|
|
onMouseMove1(e) { |
|
|
|
|
|
// 右下角缩放 |
|
|
|
|
|
if (e.target.id == "circle") return; |
|
|
// 禁止默认事件--下拉 |
|
|
// 禁止默认事件--下拉 |
|
|
event.preventDefault() |
|
|
|
|
|
if (!this.dragging) return |
|
|
|
|
|
|
|
|
event.preventDefault(); |
|
|
|
|
|
if (!this.dragging) return; |
|
|
// console.log(event.touches[0]) |
|
|
// console.log(event.touches[0]) |
|
|
|
|
|
|
|
|
// 双指缩放 |
|
|
// 双指缩放 |
|
|
if (event.touches[1]) { |
|
|
|
|
|
const distance = this.getDistance(event.touches[0], event.touches[1]) |
|
|
|
|
|
const scale = (distance / this.startDistance).toFixed(2) |
|
|
|
|
|
this.materialList.virtual.w = scale |
|
|
|
|
|
this.materialList.virtual.h = scale |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// if (event.touches[1]) { |
|
|
|
|
|
// const distance = this.getDistance(event.touches[0], event.touches[1]); |
|
|
|
|
|
// const scale = (distance / this.startDistance).toFixed(2); |
|
|
|
|
|
// this.materialList.virtual.w = scale; |
|
|
|
|
|
// this.materialList.virtual.h = scale; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
// 得到父子盒子信息 |
|
|
// 得到父子盒子信息 |
|
|
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 deltaY = event.touches[0].clientY - this.startY |
|
|
|
|
|
|
|
|
const deltaX = event.touches[0].clientX - this.startX; |
|
|
|
|
|
const deltaY = event.touches[0].clientY - this.startY; |
|
|
// console.log(deltaX) |
|
|
// console.log(deltaX) |
|
|
this.materialList.virtual.x += deltaX.toFixed(0) * this.proportion |
|
|
|
|
|
this.materialList.virtual.y += deltaY.toFixed(0) * this.proportion |
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
this.startX = event.touches[0].clientX; |
|
|
|
|
|
this.startY = event.touches[0].clientY; |
|
|
|
|
|
|
|
|
// 限制X轴 |
|
|
// 限制X轴 |
|
|
// console.log(fatherRect) |
|
|
// console.log(fatherRect) |
|
@@ -261,59 +291,89 @@ export default { |
|
|
// 控制台 |
|
|
// 控制台 |
|
|
controlImg(type) { |
|
|
controlImg(type) { |
|
|
if (this.domIndex == -1) { |
|
|
if (this.domIndex == -1) { |
|
|
Toast('请选择素材') |
|
|
|
|
|
return |
|
|
|
|
|
|
|
|
Toast("请选择素材"); |
|
|
|
|
|
return; |
|
|
} |
|
|
} |
|
|
if (type == 1) { |
|
|
if (type == 1) { |
|
|
this.materialList[this.domIndex].scale += 0.1 |
|
|
|
|
|
|
|
|
this.materialList[this.domIndex].scale += 0.1; |
|
|
} |
|
|
} |
|
|
if (type == 2) { |
|
|
if (type == 2) { |
|
|
this.materialList[this.domIndex].scale -= 0.1 |
|
|
|
|
|
|
|
|
this.materialList[this.domIndex].scale -= 0.1; |
|
|
} |
|
|
} |
|
|
if (type == 3) { |
|
|
if (type == 3) { |
|
|
// 如果是点的数字人 |
|
|
// 如果是点的数字人 |
|
|
if (this.domIndex == -2) { |
|
|
if (this.domIndex == -2) { |
|
|
this.materialList.virtual.z += 1 |
|
|
|
|
|
|
|
|
this.materialList.virtual.z += 1; |
|
|
if (this.materialList.virtual.z >= 10) { |
|
|
if (this.materialList.virtual.z >= 10) { |
|
|
this.materialList.virtual.z = 10 |
|
|
|
|
|
|
|
|
this.materialList.virtual.z = 10; |
|
|
} |
|
|
} |
|
|
return |
|
|
|
|
|
|
|
|
return; |
|
|
} |
|
|
} |
|
|
// 点的素材 |
|
|
// 点的素材 |
|
|
this.materialList.scList[this.domIndex].z += 1 |
|
|
|
|
|
|
|
|
this.materialList.scList[this.domIndex].z += 1; |
|
|
if (this.materialList.scList[this.domIndex].z >= 10) { |
|
|
if (this.materialList.scList[this.domIndex].z >= 10) { |
|
|
this.materialList.scList[this.domIndex].z = 10 |
|
|
|
|
|
|
|
|
this.materialList.scList[this.domIndex].z = 10; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
if (type == 4) { |
|
|
if (type == 4) { |
|
|
// 如果是点的数字人 |
|
|
// 如果是点的数字人 |
|
|
if (this.domIndex == -2) { |
|
|
if (this.domIndex == -2) { |
|
|
this.materialList.virtual.z -= 1 |
|
|
|
|
|
|
|
|
this.materialList.virtual.z -= 1; |
|
|
if (this.materialList.virtual.z <= 0) { |
|
|
if (this.materialList.virtual.z <= 0) { |
|
|
this.materialList.virtual.z = 0 |
|
|
|
|
|
|
|
|
this.materialList.virtual.z = 0; |
|
|
} |
|
|
} |
|
|
return |
|
|
|
|
|
|
|
|
return; |
|
|
} |
|
|
} |
|
|
// 点的素材 |
|
|
// 点的素材 |
|
|
this.materialList.scList[this.domIndex].z -= 1 |
|
|
|
|
|
|
|
|
this.materialList.scList[this.domIndex].z -= 1; |
|
|
if (this.materialList.scList[this.domIndex].z <= 0) { |
|
|
if (this.materialList.scList[this.domIndex].z <= 0) { |
|
|
this.materialList.scList[this.domIndex].z = 0 |
|
|
|
|
|
|
|
|
this.materialList.scList[this.domIndex].z = 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
// 素材超出显示范围 |
|
|
// 素材超出显示范围 |
|
|
exceed() { |
|
|
exceed() { |
|
|
Toast('素材超出显示范围') |
|
|
|
|
|
|
|
|
Toast("素材超出显示范围"); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
scaleMoving(e) { |
|
|
|
|
|
// 禁止默认事件--下拉 |
|
|
|
|
|
event.preventDefault(); |
|
|
|
|
|
const x = e.changedTouches[0].clientX; |
|
|
|
|
|
const y = e.changedTouches[0].clientY; |
|
|
|
|
|
|
|
|
|
|
|
// 变化大小,true为变小,false为变大 |
|
|
|
|
|
const flag = Math.sign(x - this.touchStart.pageX) == -1 ? true : false; |
|
|
|
|
|
console.log(flag, "flag"); |
|
|
|
|
|
console.log(this.proportion); |
|
|
|
|
|
if (!flag) { |
|
|
|
|
|
this.materialList.virtual.w += 0.008; |
|
|
|
|
|
} else { |
|
|
|
|
|
this.materialList.virtual.w -= 0.008; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
scaleStart(e) { |
|
|
|
|
|
const x = e.changedTouches[0].clientX; |
|
|
|
|
|
const y = e.changedTouches[0].clientY; |
|
|
|
|
|
this.touchStart = { |
|
|
|
|
|
pageX: x, |
|
|
|
|
|
pageY: y, |
|
|
|
|
|
}; |
|
|
|
|
|
console.log(this.touchStart, "touchStart"); |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
scaleEnd(e) {}, |
|
|
|
|
|
|
|
|
// 计算双指距离 |
|
|
// 计算双指距离 |
|
|
getDistance(touch1, touch2) { |
|
|
getDistance(touch1, touch2) { |
|
|
const dx = touch1.pageX - touch2.pageX |
|
|
|
|
|
const dy = touch1.pageY - touch2.pageY |
|
|
|
|
|
return Math.sqrt(dx * dx + dy * dy) |
|
|
|
|
|
|
|
|
const dx = touch1.pageX - touch2.pageX; |
|
|
|
|
|
const dy = touch1.pageY - touch2.pageY; |
|
|
|
|
|
return Math.sqrt(dx * dx + dy * dy); |
|
|
}, |
|
|
}, |
|
|
go(url) { |
|
|
go(url) { |
|
|
this.$router.push(url) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
this.$router.push(url); |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
// proportion(newValue) { |
|
|
// proportion(newValue) { |
|
@@ -322,13 +382,18 @@ export default { |
|
|
}, |
|
|
}, |
|
|
created() {}, |
|
|
created() {}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.inPage = true |
|
|
|
|
|
scrollToID('top') |
|
|
|
|
|
|
|
|
this.inPage = true; |
|
|
|
|
|
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> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
@@ -381,6 +446,34 @@ export default { |
|
|
// height: 150px; |
|
|
// height: 150px; |
|
|
// background-color: red; |
|
|
// background-color: red; |
|
|
} |
|
|
} |
|
|
|
|
|
border: 3px solid #09ff00; |
|
|
|
|
|
.outSide { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 85px; |
|
|
|
|
|
height: 85px; |
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
right: 0; |
|
|
|
|
|
transform: translate(50%, 50%); |
|
|
|
|
|
.circle { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
width: 35px; |
|
|
|
|
|
height: 35px; |
|
|
|
|
|
line-height: 35px; |
|
|
|
|
|
border-radius: 50% 50%; |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
border: 1px solid #969696; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
|
|
|
.sacleIcon { |
|
|
|
|
|
width: 65%; |
|
|
|
|
|
height: 65%; |
|
|
|
|
|
transform: rotate(90deg); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |