|
|
@@ -132,11 +132,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right"><img src="../assets/img/right.png" alt="" /></div>
|
|
|
- <div style=" position: absolute;bottom: 5%;display:flex;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5%;
|
|
|
+ display: flex;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class="button" v-show="isF">进入CocoBlockly编程平台</div>
|
|
|
- <div class="button dark" style="margin-left:20px" @click="goto('/fans')">进入体验页</div>
|
|
|
+ <div class="button dark" style="margin-left: 20px" @click="goto('/fans')">
|
|
|
+ 进入体验页
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<video
|
|
|
id="musicC"
|
|
|
@@ -307,17 +315,20 @@ export default {
|
|
|
binding.value.getD() == 1
|
|
|
) {
|
|
|
line.style.display = "block";
|
|
|
- line.style.left = baseL - 112 + "px";
|
|
|
- line.style.top = baseT - 44 + "px";
|
|
|
+ // line.style.left = baseL - 112 + "px";
|
|
|
+ // line.style.top = baseT - 44 + "px";
|
|
|
+ line.style.left = baseL - 74.666 + "px";
|
|
|
+ line.style.top = baseT - 29.333 + "px";
|
|
|
btn.className = "button dark";
|
|
|
btn.onclick = function () {
|
|
|
binding.value.go();
|
|
|
};
|
|
|
right.style.display = "block";
|
|
|
- right.style.left = baseL + 435 + "px";
|
|
|
- right.style.top = baseT + 65 + "px";
|
|
|
+ // right.style.left = baseL + 435 + "px";
|
|
|
+ // right.style.top = baseT + 65 + "px";
|
|
|
+ right.style.left = baseL + 290 + "px";
|
|
|
+ right.style.top = baseT + 43.333 + "px";
|
|
|
binding.value.setisF(true);
|
|
|
-
|
|
|
} else {
|
|
|
line.style.display = "none";
|
|
|
btn.className = "button";
|
|
|
@@ -360,79 +371,122 @@ export default {
|
|
|
var lbL = lineL - baseL;
|
|
|
var lbT = lineT - baseT;
|
|
|
|
|
|
- if (260 < mbL && mbL < 320 && -150 < mbT && mbT < -90 && type == 2) {
|
|
|
- motor.style.left = baseL + 292 + "px";
|
|
|
- motor.style.top = baseT - 121 + "px";
|
|
|
+ // if (260 < mbL && mbL < 320 && -150 < mbT && mbT < -90 && type == 2) {
|
|
|
+ if (174 < mbL && mbL < 225 && -100 < mbT && mbT < -60 && type == 2) {
|
|
|
+ // motor.style.left = baseL + 292 + "px";
|
|
|
+ // motor.style.top = baseT - 121 + "px";
|
|
|
+ motor.style.left = baseL + 194.666 + "px";
|
|
|
+ motor.style.top = baseT - 80.66 + "px";
|
|
|
binding.value.setA(1);
|
|
|
playMusic();
|
|
|
} else if (type == 2) {
|
|
|
binding.value.setA(0);
|
|
|
}
|
|
|
|
|
|
+ // if (
|
|
|
+ // 260 < mbL &&
|
|
|
+ // mbL < 320 &&
|
|
|
+ // -150 < mbT &&
|
|
|
+ // mbT < -90 &&
|
|
|
+ // type == 1 &&
|
|
|
+ // binding.value.getD() == 1
|
|
|
+ // ) {
|
|
|
if (
|
|
|
- 260 < mbL &&
|
|
|
- mbL < 320 &&
|
|
|
- -150 < mbT &&
|
|
|
- mbT < -90 &&
|
|
|
+ 174 < mbL &&
|
|
|
+ mbL < 225 &&
|
|
|
+ -100 < mbT &&
|
|
|
+ mbT < -60 &&
|
|
|
type == 1 &&
|
|
|
binding.value.getD() == 1
|
|
|
) {
|
|
|
- motor.style.left = baseL + 292 + "px";
|
|
|
- motor.style.top = baseT - 121 + "px";
|
|
|
- fan.style.left = baseL + 292 - 141 + "px";
|
|
|
- fan.style.top = baseT - 121 - 126 + "px";
|
|
|
+ // motor.style.left = baseL + 292 + "px";
|
|
|
+ // motor.style.top = baseT - 121 + "px";
|
|
|
+ // fan.style.left = baseL + 292 - 141 + "px";
|
|
|
+ // fan.style.top = baseT - 121 - 126 + "px";
|
|
|
+ motor.style.left = baseL + 194.666 + "px";
|
|
|
+ motor.style.top = baseT - 80.66 + "px";
|
|
|
+ fan.style.left = baseL + 194.666 - 94 + "px";
|
|
|
+ fan.style.top = baseT - 80.66 - 84 + "px";
|
|
|
binding.value.setA(1);
|
|
|
playMusic();
|
|
|
} else if (type == 1 && binding.value.getD() == 1) {
|
|
|
binding.value.setA(0);
|
|
|
}
|
|
|
|
|
|
- if (-40 < sbL && sbL < 20 && -250 < sbT && sbT < -210 && type == 5) {
|
|
|
- screan.style.left = baseL - 19 + "px";
|
|
|
- screan.style.top = baseT - 231 + "px";
|
|
|
+ // if (-40 < sbL && sbL < 20 && -250 < sbT && sbT < -210 && type == 5) {
|
|
|
+ if (-33 < sbL && sbL < 10 && -174 < sbT && sbT < -134 && type == 5) {
|
|
|
+ // screan.style.left = baseL - 19 + "px";
|
|
|
+ // screan.style.top = baseT - 231 + "px";
|
|
|
+ screan.style.left = baseL - 12.666 + "px";
|
|
|
+ screan.style.top = baseT - 154 + "px";
|
|
|
binding.value.setB(1);
|
|
|
playMusic();
|
|
|
} else if (type == 5) {
|
|
|
binding.value.setB(0);
|
|
|
}
|
|
|
|
|
|
- if (91 < abL && abL < 131 && 72 < abT && abT < 112 && type == 4) {
|
|
|
- a4.style.left = baseL + 111 + "px";
|
|
|
- a4.style.top = baseT + 92 + "px";
|
|
|
+ // if (91 < abL && abL < 131 && 72 < abT && abT < 112 && type == 4) {
|
|
|
+ if (54 < abL && abL < 94 && 41 < abT && abT < 82 && type == 4) {
|
|
|
+ // a4.style.left = baseL + 111 + "px";
|
|
|
+ // a4.style.top = baseT + 92 + "px";
|
|
|
+ a4.style.left = baseL + 74 + "px";
|
|
|
+ a4.style.top = baseT + 61.333 + "px";
|
|
|
binding.value.setC(1);
|
|
|
playMusic();
|
|
|
} else if (type == 4) {
|
|
|
binding.value.setC(0);
|
|
|
}
|
|
|
|
|
|
+ // if (
|
|
|
+ // -161 < fmL &&
|
|
|
+ // fmL < -121 &&
|
|
|
+ // -146 < fmT &&
|
|
|
+ // fmT < -106 &&
|
|
|
+ // type == 1 &&
|
|
|
+ // binding.value.getD() == 0
|
|
|
+ // ) {
|
|
|
if (
|
|
|
- -161 < fmL &&
|
|
|
- fmL < -121 &&
|
|
|
- -146 < fmT &&
|
|
|
- fmT < -106 &&
|
|
|
+ -114 < fmL &&
|
|
|
+ fmL < -74 &&
|
|
|
+ -104 < fmT &&
|
|
|
+ fmT < -64 &&
|
|
|
type == 1 &&
|
|
|
binding.value.getD() == 0
|
|
|
) {
|
|
|
- fan.style.left = motorL - 141 + "px";
|
|
|
- fan.style.top = motorT - 126 + "px";
|
|
|
+ // fan.style.left = motorL - 141 + "px";
|
|
|
+ // fan.style.top = motorT - 126 + "px";
|
|
|
+ fan.style.left = motorL - 94 + "px";
|
|
|
+ fan.style.top = motorT - 84 + "px";
|
|
|
binding.value.setD(1);
|
|
|
playMusic();
|
|
|
} else if (type == 1 && binding.value.getD() == 0) {
|
|
|
binding.value.setD(0);
|
|
|
}
|
|
|
|
|
|
+ // if (
|
|
|
+ // -132 < lbL &&
|
|
|
+ // lbL < -92 &&
|
|
|
+ // -64 < lbT &&
|
|
|
+ // lbT < -24 &&
|
|
|
+ // type == 6 &&
|
|
|
+ // binding.value.getA() == 1 &&
|
|
|
+ // binding.value.getB() == 1 &&
|
|
|
+ // binding.value.getC() == 1
|
|
|
+ // ) {
|
|
|
if (
|
|
|
- -132 < lbL &&
|
|
|
- lbL < -92 &&
|
|
|
- -64 < lbT &&
|
|
|
- lbT < -24 &&
|
|
|
+ -95 < lbL &&
|
|
|
+ lbL < -54 &&
|
|
|
+ -50 < lbT &&
|
|
|
+ lbT < -9 &&
|
|
|
type == 6 &&
|
|
|
binding.value.getA() == 1 &&
|
|
|
binding.value.getB() == 1 &&
|
|
|
binding.value.getC() == 1
|
|
|
) {
|
|
|
- line.style.left = baseL - 112 + "px";
|
|
|
- line.style.top = baseT - 44 + "px";
|
|
|
+ // line.style.left = baseL - 112 + "px";
|
|
|
+ // line.style.top = baseT - 44 + "px";
|
|
|
+ line.style.left = baseL - 74.666 + "px";
|
|
|
+ line.style.top = baseT - 29.333 + "px";
|
|
|
binding.value.setE(1);
|
|
|
playMusic();
|
|
|
} else if (type == 6) {
|
|
|
@@ -453,8 +507,10 @@ export default {
|
|
|
|
|
|
function moveP(nl, nt, type) {
|
|
|
if (binding.value.getA() == 1 && type == 3) {
|
|
|
- motor.style.left = nl + 292 + "px";
|
|
|
- motor.style.top = nt - 121 + "px";
|
|
|
+ // motor.style.left = nl + 292 + "px";
|
|
|
+ // motor.style.top = nt - 121 + "px";
|
|
|
+ motor.style.left = nl + 194.666 + "px";
|
|
|
+ motor.style.top = nt - 80.66 + "px";
|
|
|
}
|
|
|
|
|
|
if (
|
|
|
@@ -462,33 +518,45 @@ export default {
|
|
|
binding.value.getD() == 1 &&
|
|
|
type == 3
|
|
|
) {
|
|
|
- fan.style.left = nl + 292 - 141 + "px";
|
|
|
- fan.style.top = nt - 121 - 126 + "px";
|
|
|
+ // fan.style.left = nl + 292 - 141 + "px";
|
|
|
+ // fan.style.top = nt - 121 - 126 + "px";
|
|
|
+ fan.style.left = nl + 194.666 - 94 + "px";
|
|
|
+ fan.style.top = nt - 80.66 - 84 + "px";
|
|
|
}
|
|
|
|
|
|
if (binding.value.getB() == 1 && type == 3) {
|
|
|
- screan.style.left = nl - 19 + "px";
|
|
|
- screan.style.top = nt - 231 + "px";
|
|
|
+ // screan.style.left = nl - 19 + "px";
|
|
|
+ // screan.style.top = nt - 231 + "px";
|
|
|
+ screan.style.left = nl - 12.666 + "px";
|
|
|
+ screan.style.top = nt - 154 + "px";
|
|
|
}
|
|
|
|
|
|
if (binding.value.getC() == 1 && type == 3) {
|
|
|
- a4.style.left = nl + 111 + "px";
|
|
|
- a4.style.top = nt + 92 + "px";
|
|
|
+ // a4.style.left = nl + 111 + "px";
|
|
|
+ // a4.style.top = nt + 92 + "px";
|
|
|
+ a4.style.left = nl + 74 + "px";
|
|
|
+ a4.style.top = nt + 61.333 + "px";
|
|
|
}
|
|
|
|
|
|
if (binding.value.getD() == 1 && type == 1) {
|
|
|
- motor.style.left = nl + 141 + "px";
|
|
|
- motor.style.top = nt + 126 + "px";
|
|
|
+ // motor.style.left = nl + 141 + "px";
|
|
|
+ // motor.style.top = nt + 126 + "px";
|
|
|
+ motor.style.left = nl + 94 + "px";
|
|
|
+ motor.style.top = nt + 84 + "px";
|
|
|
}
|
|
|
|
|
|
if (binding.value.getD() == 1 && type == 2) {
|
|
|
- fan.style.left = nl - 141 + "px";
|
|
|
- fan.style.top = nt - 126 + "px";
|
|
|
+ // fan.style.left = nl - 141 + "px";
|
|
|
+ // fan.style.top = nt - 126 + "px";
|
|
|
+ fan.style.left = nl - 94 + "px";
|
|
|
+ fan.style.top = nt - 84 + "px";
|
|
|
}
|
|
|
|
|
|
if (binding.value.getE() == 1 && type == 3) {
|
|
|
- line.style.left = nl - 112 + "px";
|
|
|
- line.style.top = nt - 44 + "px";
|
|
|
+ // line.style.left = nl - 112 + "px";
|
|
|
+ // line.style.top = nt - 44 + "px";
|
|
|
+ line.style.left = nl - 74.666 + "px";
|
|
|
+ line.style.top = nt - 29.333 + "px";
|
|
|
}
|
|
|
|
|
|
if (
|
|
|
@@ -499,17 +567,20 @@ export default {
|
|
|
type == 3
|
|
|
) {
|
|
|
line.style.display = "block";
|
|
|
- line.style.left = nl - 112 + "px";
|
|
|
- line.style.top = nt - 44 + "px";
|
|
|
+ // line.style.left = nl - 112 + "px";
|
|
|
+ // line.style.top = nt - 44 + "px";
|
|
|
+ line.style.left = nl - 74.666 + "px";
|
|
|
+ line.style.top = nt - 29.333 + "px";
|
|
|
btn.className = "button dark";
|
|
|
btn.onclick = function () {
|
|
|
binding.value.go();
|
|
|
};
|
|
|
right.style.display = "block";
|
|
|
- right.style.left = nl + 435 + "px";
|
|
|
- right.style.top = nt + 65 + "px";
|
|
|
+ // right.style.left = nl + 435 + "px";
|
|
|
+ // right.style.top = nt + 65 + "px";
|
|
|
+ right.style.left = nl + 290 + "px";
|
|
|
+ right.style.top = nt + 43.333 + "px";
|
|
|
binding.value.setisF(true);
|
|
|
-
|
|
|
} else {
|
|
|
line.style.display = "none";
|
|
|
btn.className = "button";
|
|
|
@@ -525,7 +596,7 @@ export default {
|
|
|
go() {
|
|
|
this.$router.push("/blockly?typeN=fan");
|
|
|
},
|
|
|
- goto(path) {
|
|
|
+ goto(path) {
|
|
|
this.$router.push(path);
|
|
|
},
|
|
|
setPan(value) {
|
|
|
@@ -572,6 +643,9 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+* {
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
html,
|
|
|
body {
|
|
|
margin: 0;
|
|
|
@@ -605,50 +679,57 @@ body {
|
|
|
}
|
|
|
|
|
|
#fan {
|
|
|
- width: 425px;
|
|
|
+ /* width: 425px; */
|
|
|
+ width: 283.33px;
|
|
|
position: absolute;
|
|
|
- left: 64%;
|
|
|
+ left: 61%;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
z-index: 5;
|
|
|
}
|
|
|
|
|
|
#base {
|
|
|
- width: 423.33px;
|
|
|
+ /* width: 423.33px; */
|
|
|
+ width: 282.21px;
|
|
|
position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 14%;
|
|
|
+ top: 55%;
|
|
|
+ left: 20%;
|
|
|
transform: translateY(-50%);
|
|
|
z-index: 4;
|
|
|
}
|
|
|
|
|
|
#motor {
|
|
|
- width: 134.16px;
|
|
|
+ /* width: 134.16px; */
|
|
|
+ width: 89.44px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
- left: 40%;
|
|
|
+ left: 42%;
|
|
|
transform: translateY(-50%);
|
|
|
z-index: 3;
|
|
|
}
|
|
|
|
|
|
#a4 {
|
|
|
- width: 210px;
|
|
|
+ /* width: 210px; */
|
|
|
+ width: 140px;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 36%;
|
|
|
+
|
|
|
transform: translateY(-50%);
|
|
|
z-index: 5;
|
|
|
}
|
|
|
#screan {
|
|
|
- width: 178.33px;
|
|
|
+ /* width: 178.33px; */
|
|
|
+ width: 118.886px;
|
|
|
position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 57%;
|
|
|
+ left: 51%;
|
|
|
+ top: 56%;
|
|
|
transform: translateY(-50%);
|
|
|
z-index: 3;
|
|
|
}
|
|
|
#line {
|
|
|
- width: 470.83px;
|
|
|
+ /* width: 470.83px; */
|
|
|
+ width: 313.886px;
|
|
|
position: absolute;
|
|
|
left: 72%;
|
|
|
top: 50%;
|
|
|
@@ -665,7 +746,7 @@ body {
|
|
|
font-size: 20px;
|
|
|
text-align: center;
|
|
|
line-height: 55px;
|
|
|
-
|
|
|
+
|
|
|
user-select: none;
|
|
|
border-radius: 5px;
|
|
|
}
|
