|
@@ -2,7 +2,7 @@ |
|
|
* @Author: zwq |
|
|
* @Author: zwq |
|
|
* @Date: 2022-05-31 15:49:03 |
|
|
* @Date: 2022-05-31 15:49:03 |
|
|
* @LastEditors: zwq |
|
|
* @LastEditors: zwq |
|
|
* @LastEditTime: 2022-06-06 15:27:38 |
|
|
|
|
|
|
|
|
* @LastEditTime: 2022-11-22 14:41:50 |
|
|
* @Description: |
|
|
* @Description: |
|
|
--> |
|
|
--> |
|
|
<template> |
|
|
<template> |
|
@@ -11,9 +11,8 @@ |
|
|
style="width:100%;height:100%;border-bottom:1px dotted #ff0000;padding-bottom:10px" |
|
|
style="width:100%;height:100%;border-bottom:1px dotted #ff0000;padding-bottom:10px" |
|
|
> |
|
|
> |
|
|
<el-row :gutter="20"> |
|
|
<el-row :gutter="20"> |
|
|
<el-col :span="6"><div class="Ugui"></div></el-col> |
|
|
|
|
|
<el-col :span="18"> |
|
|
|
|
|
<div class="zhigui"> |
|
|
|
|
|
|
|
|
<el-col :span="24"> |
|
|
|
|
|
<div class="zhigui" id="zhigui"> |
|
|
<div class="car" id="car"></div> |
|
|
<div class="car" id="car"></div> |
|
|
</div> |
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
@@ -358,8 +357,7 @@ export default { |
|
|
} |
|
|
} |
|
|
], |
|
|
], |
|
|
car: '', |
|
|
car: '', |
|
|
zhigui: '', |
|
|
|
|
|
motion: '' |
|
|
|
|
|
|
|
|
zhigui: '' |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created () {}, |
|
|
created () {}, |
|
@@ -369,10 +367,24 @@ export default { |
|
|
methods: { |
|
|
methods: { |
|
|
init () { |
|
|
init () { |
|
|
this.car = document.getElementById('car') |
|
|
this.car = document.getElementById('car') |
|
|
this.motion = setInterval(() => { |
|
|
|
|
|
|
|
|
this.zhigui = document.getElementById('zhigui') |
|
|
|
|
|
this.runCar() |
|
|
|
|
|
}, |
|
|
|
|
|
runCar () { |
|
|
|
|
|
const runCarInterval = setInterval(() => { |
|
|
this.car.style.left = this.car.offsetLeft - 1 + 'px' |
|
|
this.car.style.left = this.car.offsetLeft - 1 + 'px' |
|
|
if (this.car.offsetLeft <= 0) { |
|
|
if (this.car.offsetLeft <= 0) { |
|
|
clearInterval(this.motion) |
|
|
|
|
|
|
|
|
clearInterval(runCarInterval) |
|
|
|
|
|
this.backCar() |
|
|
|
|
|
} |
|
|
|
|
|
}, 100) |
|
|
|
|
|
}, |
|
|
|
|
|
backCar () { |
|
|
|
|
|
const backCarInterval = setInterval(() => { |
|
|
|
|
|
this.car.style.left = this.car.offsetLeft + 1 + 'px' |
|
|
|
|
|
if (this.zhigui.clientWidth - this.car.offsetLeft - this.car.offsetWidth <= 0) { |
|
|
|
|
|
clearInterval(backCarInterval) |
|
|
|
|
|
this.runCar() |
|
|
} |
|
|
} |
|
|
}, 100) |
|
|
}, 100) |
|
|
} |
|
|
} |
|
@@ -383,17 +395,11 @@ export default { |
|
|
<style scoped> |
|
|
<style scoped> |
|
|
.zhigui { |
|
|
.zhigui { |
|
|
height: 250px; |
|
|
height: 250px; |
|
|
background: url("../../../assets/img/直轨.jpeg") repeat; |
|
|
|
|
|
|
|
|
background: url("../../../assets/1.png") repeat; |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
padding-top: 100px; |
|
|
padding-top: 100px; |
|
|
position: relative; |
|
|
position: relative; |
|
|
} |
|
|
} |
|
|
.Ugui { |
|
|
|
|
|
height: 250px; |
|
|
|
|
|
transform: rotate(180deg); |
|
|
|
|
|
background: url("../../../assets/img/U轨道.jpeg") repeat; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
.wareBody { |
|
|
.wareBody { |
|
|
margin: auto; |
|
|
margin: auto; |
|
|
height: 90%; |
|
|
height: 90%; |
|
@@ -428,12 +434,12 @@ export default { |
|
|
background-color: #09bb07; |
|
|
background-color: #09bb07; |
|
|
} |
|
|
} |
|
|
.car { |
|
|
.car { |
|
|
width: 50px; |
|
|
|
|
|
height: 50px; |
|
|
|
|
|
background-color: rgb(116, 79, 250); |
|
|
|
|
|
background: url("../../../assets/img/car.jpeg") repeat; |
|
|
|
|
|
|
|
|
width: 100px; |
|
|
|
|
|
height: 100px; |
|
|
|
|
|
background: url("../../../assets/2.png") repeat; |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
right: 0; |
|
|
right: 0; |
|
|
|
|
|
bottom: 40%; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
} |
|
|
} |
|
|
.line { |
|
|
.line { |
|
|