|
|
@@ -0,0 +1,2025 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="tip">
|
|
|
+ <img src="../assets/img/shop/tips.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="img">
|
|
|
+ <div
|
|
|
+ id="duobi"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/duobi.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="duobiBig"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/duobiBig.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="dOne"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/dOne.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="dTwo"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/dTwo.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="dThree"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/dThree.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="dFour"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/dFour.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="dFive"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/dFive.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="dSix"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/dSix.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="dSeven"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/dSeven.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="dEight"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/dEight.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="dNight"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/dNight.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="bottom"
|
|
|
+ v-show="eighteen != 1"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/door/bottom.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="screan"
|
|
|
+ v-show="eighteen != 1"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/door/screan.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="tou"
|
|
|
+ v-show="eighteen != 1"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/door/tou.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="ai"
|
|
|
+ v-show="eighteen != 1"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/door/ai.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="eighteen == 1"
|
|
|
+ id="all"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setOne,
|
|
|
+ getOne,
|
|
|
+ setTwo,
|
|
|
+ getTwo,
|
|
|
+ setThree,
|
|
|
+ getThree,
|
|
|
+ setFour,
|
|
|
+ getFour,
|
|
|
+ setFive,
|
|
|
+ getFive,
|
|
|
+ setSix,
|
|
|
+ getSix,
|
|
|
+ setSeven,
|
|
|
+ getSeven,
|
|
|
+ setEight,
|
|
|
+ getEight,
|
|
|
+ setNight,
|
|
|
+ getNight,
|
|
|
+ setTen,
|
|
|
+ getTen,
|
|
|
+ setEleven,
|
|
|
+ getEleven,
|
|
|
+ setTwelve,
|
|
|
+ getTwelve,
|
|
|
+ setThirteen,
|
|
|
+ getThirteen,
|
|
|
+ setFourteen,
|
|
|
+ getFourteen,
|
|
|
+ setFifteen,
|
|
|
+ getFifteen,
|
|
|
+ setSixteen,
|
|
|
+ getSixteen,
|
|
|
+ setSeventeen,
|
|
|
+ getSeventeen,
|
|
|
+ setEighteen,
|
|
|
+ getEighteen,
|
|
|
+ setNighteen,
|
|
|
+ getNighteen,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/robot/allScrean.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right"><img src="../assets/img/right.png" alt="" /></div>
|
|
|
+ <div class="button">进入CocoBlockly编程平台</div>
|
|
|
+ <video
|
|
|
+ id="musicC"
|
|
|
+ :src="require('../assets/music/click.mp3')"
|
|
|
+ v-show="false"
|
|
|
+ ></video>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ that: this,
|
|
|
+ panThing: "",
|
|
|
+ one: "",
|
|
|
+ two: "",
|
|
|
+ three: "",
|
|
|
+ four: "",
|
|
|
+ five: "",
|
|
|
+ six: "",
|
|
|
+ seven: "",
|
|
|
+ eight: "",
|
|
|
+ night: "",
|
|
|
+ ten: "",
|
|
|
+ eleven: "",
|
|
|
+ twelve: "",
|
|
|
+ thirteen: "",
|
|
|
+ fourteen: "",
|
|
|
+ fifteen: "",
|
|
|
+ sixteen: "",
|
|
|
+ seventeen: "",
|
|
|
+ eighteen: "",
|
|
|
+ nighteen: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ directives: {
|
|
|
+ drag: {
|
|
|
+ // 指令的定义
|
|
|
+ inserted: function (el, binding) {
|
|
|
+ // el.drag();
|
|
|
+ console.log(el);
|
|
|
+ //获取元素
|
|
|
+ // var dv = document.getElementById("dv");
|
|
|
+ let x = 0;
|
|
|
+ let y = 0;
|
|
|
+ let l = 0;
|
|
|
+ let t = 0;
|
|
|
+ let isDown = false;
|
|
|
+ var dv = document.getElementById("duobi");
|
|
|
+ var dv1 = document.getElementById("duobiBig");
|
|
|
+ var dv2 = document.getElementById("dOne");
|
|
|
+ var dv3 = document.getElementById("dTwo");
|
|
|
+ var dv4 = document.getElementById("dThree");
|
|
|
+ var dv5 = document.getElementById("dFour");
|
|
|
+ var dv6 = document.getElementById("dFive");
|
|
|
+ var dv7 = document.getElementById("dSix");
|
|
|
+ var dv8 = document.getElementById("dSeven");
|
|
|
+ var dv9 = document.getElementById("dEight");
|
|
|
+ var dv10 = document.getElementById("dNight");
|
|
|
+ var dv11 = document.getElementById("bottom");
|
|
|
+ var dv12 = document.getElementById("screan");
|
|
|
+ var dv13 = document.getElementById("tou");
|
|
|
+ var dv14 = document.getElementById("ai");
|
|
|
+ var allOne = document.getElementById("all");
|
|
|
+ var musicC = document.getElementById("musicC");
|
|
|
+
|
|
|
+ //鼠标按下事件
|
|
|
+ el.onmousedown = function (e) {
|
|
|
+ //获取x坐标和y坐标
|
|
|
+ e.preventDefault();
|
|
|
+ x = e.clientX;
|
|
|
+ y = e.clientY;
|
|
|
+
|
|
|
+ //获取左部和顶部的偏移量
|
|
|
+ l = el.offsetLeft;
|
|
|
+ t = el.offsetTop;
|
|
|
+ //开关打开
|
|
|
+ isDown = true;
|
|
|
+ //设置样式
|
|
|
+ el.style.cursor = "move";
|
|
|
+ subiao(el);
|
|
|
+ };
|
|
|
+ function subiao(cdiv) {
|
|
|
+ document.onmousemove = function (e) {
|
|
|
+ if (isDown == false) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //获取x和y
|
|
|
+ var nx = e.clientX;
|
|
|
+ var ny = e.clientY;
|
|
|
+ //计算移动后的左偏移量和顶部的偏移量
|
|
|
+ var nl = nx - (x - l);
|
|
|
+ var nt = ny - (y - t);
|
|
|
+
|
|
|
+ cdiv.style.left = nl + "px";
|
|
|
+ cdiv.style.top = nt + "px";
|
|
|
+
|
|
|
+ if (el.id == "duobi") {
|
|
|
+ binding.value.setPan("duobi");
|
|
|
+ moveP(nl, nt, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "duobiBig") {
|
|
|
+ binding.value.setPan("duobiBig");
|
|
|
+ moveP(nl, nt, 2);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "dOne") {
|
|
|
+ binding.value.setPan("dOne");
|
|
|
+ moveP(nl, nt, 3);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "dTwo") {
|
|
|
+ binding.value.setPan("dTwo");
|
|
|
+ moveP(nl, nt, 4);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "dThree") {
|
|
|
+ binding.value.setPan("dThree");
|
|
|
+ moveP(nl, nt, 5);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "dFour") {
|
|
|
+ binding.value.setPan("dFour");
|
|
|
+ moveP(nl, nt, 6);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "dFive") {
|
|
|
+ binding.value.setPan("dFive");
|
|
|
+ moveP(nl, nt, 7);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "dSix") {
|
|
|
+ binding.value.setPan("dSix");
|
|
|
+ moveP(nl, nt, 8);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "dSeven") {
|
|
|
+ binding.value.setPan("dSeven");
|
|
|
+ moveP(nl, nt, 9);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "dEight") {
|
|
|
+ binding.value.setPan("dEight");
|
|
|
+ moveP(nl, nt, 10);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "dNight") {
|
|
|
+ binding.value.setPan("dNight");
|
|
|
+ moveP(nl, nt, 11);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "bottom") {
|
|
|
+ binding.value.setPan("bottom");
|
|
|
+ moveP(nl, nt, 12);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "screan") {
|
|
|
+ binding.value.setPan("screan");
|
|
|
+ moveP(nl, nt, 13);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "tou") {
|
|
|
+ binding.value.setPan("tou");
|
|
|
+ moveP(nl, nt, 14);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "ai") {
|
|
|
+ binding.value.setPan("ai");
|
|
|
+ moveP(nl, nt, 15);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "all") {
|
|
|
+ binding.value.setPan("all");
|
|
|
+ moveP(nl, nt, 16);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ //鼠标抬起事件
|
|
|
+ el.onmouseup = function (e) {
|
|
|
+ //开关关闭
|
|
|
+ isDown = false;
|
|
|
+ el.style.cursor = "default";
|
|
|
+ document.onmousemove = null;
|
|
|
+ var nx = e.clientX;
|
|
|
+ var ny = e.clientY;
|
|
|
+ var nl = nx - (x - l);
|
|
|
+ var nt = ny - (y - t);
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "duobi") {
|
|
|
+ st(nl, nt, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "duobiBig") {
|
|
|
+ st(nl, nt, 2);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "dOne") {
|
|
|
+ st(nl, nt, 3);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "dTwo") {
|
|
|
+ st(nl, nt, 4);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "dThree") {
|
|
|
+ st(nl, nt, 5);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "dFour") {
|
|
|
+ st(nl, nt, 6);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "dFive") {
|
|
|
+ st(nl, nt, 7);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "dSix") {
|
|
|
+ st(nl, nt, 8);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "dSeven") {
|
|
|
+ st(nl, nt, 9);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "dEight") {
|
|
|
+ st(nl, nt, 10);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "dNight") {
|
|
|
+ st(nl, nt, 11);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "bottom") {
|
|
|
+ st(nl, nt, 12);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "screan") {
|
|
|
+ st(nl, nt, 13);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "tou") {
|
|
|
+ st(nl, nt, 14);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "ai") {
|
|
|
+ st(nl, nt, 15);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "all") {
|
|
|
+ st(nl, nt, 16);
|
|
|
+ }
|
|
|
+
|
|
|
+ pan();
|
|
|
+ };
|
|
|
+ function pan() {
|
|
|
+ var btn = document.getElementsByClassName("button")[0];
|
|
|
+ var right = document.getElementsByClassName("right")[0];
|
|
|
+
|
|
|
+ var policeL = dv5.offsetLeft;
|
|
|
+ var policeT = dv5.offsetTop;
|
|
|
+
|
|
|
+ if (
|
|
|
+ binding.value.getOne() == 1 &&
|
|
|
+ binding.value.getTwo() == 1 &&
|
|
|
+ binding.value.getThree() == 1 &&
|
|
|
+ binding.value.getFour() == 1 &&
|
|
|
+ binding.value.getFive() == 1 &&
|
|
|
+ binding.value.getSix() == 1 &&
|
|
|
+ binding.value.getSeven() == 1 &&
|
|
|
+ binding.value.getEight() == 1 &&
|
|
|
+ binding.value.getNight() == 1 &&
|
|
|
+ binding.value.getTen() == 1 &&
|
|
|
+ binding.value.getEighteen() == 1
|
|
|
+ ) {
|
|
|
+ btn.className = "button dark";
|
|
|
+ btn.onclick = function () {
|
|
|
+ binding.value.go();
|
|
|
+ };
|
|
|
+ right.style.display = "block";
|
|
|
+ right.style.left = policeL + 435 + "px";
|
|
|
+ right.style.top = policeT + 65 + "px";
|
|
|
+ } else {
|
|
|
+ btn.className = "button";
|
|
|
+ btn.onclick = null;
|
|
|
+ right.style.display = "none";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function st(nl, nt, type) {
|
|
|
+ var dbL = dv.offsetLeft;
|
|
|
+ var dbT = dv.offsetTop;
|
|
|
+
|
|
|
+ var dbBL = dv1.offsetLeft;
|
|
|
+ var dbBT = dv1.offsetTop;
|
|
|
+
|
|
|
+ var oneL = dv2.offsetLeft;
|
|
|
+ var oneT = dv2.offsetTop;
|
|
|
+
|
|
|
+ var twoL = dv3.offsetLeft;
|
|
|
+ var twoT = dv3.offsetTop;
|
|
|
+
|
|
|
+ var threeL = dv4.offsetLeft;
|
|
|
+ var threeT = dv4.offsetTop;
|
|
|
+
|
|
|
+ var fourL = dv5.offsetLeft;
|
|
|
+ var fourT = dv5.offsetTop;
|
|
|
+
|
|
|
+ var fiveL = dv6.offsetLeft;
|
|
|
+ var fiveT = dv6.offsetTop;
|
|
|
+
|
|
|
+ var sixL = dv7.offsetLeft;
|
|
|
+ var sixT = dv7.offsetTop;
|
|
|
+
|
|
|
+ var sevenL = dv8.offsetLeft;
|
|
|
+ var sevenT = dv8.offsetTop;
|
|
|
+
|
|
|
+ var eightL = dv9.offsetLeft;
|
|
|
+ var eightT = dv9.offsetTop;
|
|
|
+
|
|
|
+ var nightL = dv10.offsetLeft;
|
|
|
+ var nightT = dv10.offsetTop;
|
|
|
+
|
|
|
+ var tenL = dv11.offsetLeft;
|
|
|
+ var tenT = dv11.offsetTop;
|
|
|
+
|
|
|
+ var elevenL = dv12.offsetLeft;
|
|
|
+ var elevenT = dv12.offsetTop;
|
|
|
+
|
|
|
+ var twelveL = dv13.offsetLeft;
|
|
|
+ var twelveT = dv13.offsetTop;
|
|
|
+
|
|
|
+ var thirteenL = dv14.offsetLeft;
|
|
|
+ var thirteenT = dv14.offsetTop;
|
|
|
+
|
|
|
+ var allL = allOne.offsetLeft;
|
|
|
+ var allT = allOne.offsetTop;
|
|
|
+
|
|
|
+ var firstL = threeL - dbBL;
|
|
|
+ var firstT = threeT - dbBT;
|
|
|
+
|
|
|
+ var secondL = threeL - oneL;
|
|
|
+ var secondT = threeT - oneT;
|
|
|
+
|
|
|
+ var thirdL = threeL - twoL;
|
|
|
+ var thirdT = threeT - twoT;
|
|
|
+
|
|
|
+ var fourthL = sixL - nightL;
|
|
|
+ var fourthT = sixT - nightT;
|
|
|
+
|
|
|
+ var fivethL = threeL - sixL;
|
|
|
+ var fivethT = threeT - sixT;
|
|
|
+
|
|
|
+ var sixthL = fiveL - dbL;
|
|
|
+ var sixthT = fiveT - dbT;
|
|
|
+
|
|
|
+ var seventhL = sevenL - eightL;
|
|
|
+ var seventhT = sevenT - eightT;
|
|
|
+
|
|
|
+ var eighthL = fiveL - sevenL;
|
|
|
+ var eighthT = fiveT - sevenT;
|
|
|
+
|
|
|
+ var nightL = sixL - fiveL;
|
|
|
+ var nightT = sixT - fiveT;
|
|
|
+
|
|
|
+ var tenthL = threeL - fourL;
|
|
|
+ var tenthT = threeT - fourT;
|
|
|
+
|
|
|
+ var eleventhL = tenL - thirteenL;
|
|
|
+ var eleventhT = tenT - thirteenT;
|
|
|
+
|
|
|
+ var twelvethL = thirteenL - tenL;
|
|
|
+ var twelvethT = thirteenT - tenT;
|
|
|
+
|
|
|
+ var thirteenthL = elevenL - twelveL;
|
|
|
+ var thirteenthT = elevenT - twelveT;
|
|
|
+
|
|
|
+ var fourteenthL = thirteenL - elevenL;
|
|
|
+ var fourteenthT = thirteenT - elevenT;
|
|
|
+
|
|
|
+ var fifteenthL = elevenL - tenL;
|
|
|
+ var fifteenthT = elevenT - tenT;
|
|
|
+
|
|
|
+ var sixteenthL = tenL - elevenL;
|
|
|
+ var sixteenthT = tenT - elevenT;
|
|
|
+
|
|
|
+ var seventeenthL = elevenL - thirteenL;
|
|
|
+ var seventeenthT = elevenT - thirteenT;
|
|
|
+
|
|
|
+ var eighteenthL = fourL - elevenL;
|
|
|
+ var eighteenthT = fourT - elevenT;
|
|
|
+ if (
|
|
|
+ -175 < firstL &&
|
|
|
+ firstL < -22 &&
|
|
|
+ 42 < firstT &&
|
|
|
+ firstT < 106 &&
|
|
|
+ type == 2
|
|
|
+ ) {
|
|
|
+ dv1.style.left = threeL + 96 + "px";
|
|
|
+ dv1.style.top = threeT - 77 + "px";
|
|
|
+ binding.value.setOne(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 2) {
|
|
|
+ binding.value.setOne(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -26 < secondL &&
|
|
|
+ secondL < 2 &&
|
|
|
+ -176 < secondT &&
|
|
|
+ secondT < 10 &&
|
|
|
+ type == 3
|
|
|
+ ) {
|
|
|
+ dv2.style.left = threeL + 12 + "px";
|
|
|
+ dv2.style.top = threeT + 82 + "px";
|
|
|
+ binding.value.setTwo(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 3) {
|
|
|
+ binding.value.setTwo(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -335 < thirdL &&
|
|
|
+ thirdL < -303 &&
|
|
|
+ -237 < thirdT &&
|
|
|
+ thirdT < 71 &&
|
|
|
+ type == 4
|
|
|
+ ) {
|
|
|
+ dv3.style.left = threeL + 322 + "px";
|
|
|
+ dv3.style.top = threeT + 18 + "px";
|
|
|
+ binding.value.setThree(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 4) {
|
|
|
+ binding.value.setThree(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -35 < fourthL &&
|
|
|
+ fourthL < 69 &&
|
|
|
+ -8 < fourthT &&
|
|
|
+ fourthT < 8 &&
|
|
|
+ type == 11
|
|
|
+ ) {
|
|
|
+ dv10.style.left = sixL - 7 + "px";
|
|
|
+ dv10.style.top = sixT - 1 + "px";
|
|
|
+ binding.value.setFour(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 11) {
|
|
|
+ binding.value.setFour(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -152 < fivethL &&
|
|
|
+ fivethL < 394 &&
|
|
|
+ 34 < fivethT &&
|
|
|
+ fivethT < 103 &&
|
|
|
+ type == 8 &&
|
|
|
+ binding.value.getOne() == 1 &&
|
|
|
+ binding.value.getFour() == 1
|
|
|
+ ) {
|
|
|
+ dv7.style.left = threeL + 122 + "px";
|
|
|
+ dv7.style.top = threeT - 77 + "px";
|
|
|
+ dv10.style.left = threeL + 115 + "px";
|
|
|
+ dv10.style.top = threeT - 78 + "px";
|
|
|
+ binding.value.setFive(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 8) {
|
|
|
+ binding.value.setFive(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -163 < sixthL &&
|
|
|
+ sixthL < -40 &&
|
|
|
+ -16 < sixthT &&
|
|
|
+ sixthT < 36 &&
|
|
|
+ type == 1
|
|
|
+ ) {
|
|
|
+ dv.style.left = fiveL + 100 + "px";
|
|
|
+ dv.style.top = fiveT - 12 + "px";
|
|
|
+ binding.value.setSix(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 1) {
|
|
|
+ binding.value.setSix(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -21 < seventhL &&
|
|
|
+ seventhL < 4 &&
|
|
|
+ -32 < seventhT &&
|
|
|
+ seventhT < -8 &&
|
|
|
+ type == 10
|
|
|
+ ) {
|
|
|
+ dv9.style.left = sevenL + 12 + "px";
|
|
|
+ dv9.style.top = sevenT + 18 + "px";
|
|
|
+ binding.value.setSeven(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 10) {
|
|
|
+ binding.value.setSeven(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -112 < eighthL &&
|
|
|
+ eighthL < -91 &&
|
|
|
+ 22 < eighthT &&
|
|
|
+ eighthT < 42 &&
|
|
|
+ type == 9 &&
|
|
|
+ binding.value.getSix() == 1 &&
|
|
|
+ binding.value.getSeven() == 1
|
|
|
+ ) {
|
|
|
+ dv8.style.left = fiveL + 102 + "px";
|
|
|
+ dv8.style.top = fiveT - 27 + "px";
|
|
|
+ dv9.style.left = fiveL + 114 + "px";
|
|
|
+ dv9.style.top = fiveT - 11 + "px";
|
|
|
+ binding.value.setEight(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 9) {
|
|
|
+ binding.value.setEight(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -427 < nightL &&
|
|
|
+ nightL < -375 &&
|
|
|
+ -22 < nightT &&
|
|
|
+ nightT < 4 &&
|
|
|
+ type == 7 &&
|
|
|
+ binding.value.getSix() == 1 &&
|
|
|
+ binding.value.getSeven() == 1 &&
|
|
|
+ binding.value.getEight() == 1
|
|
|
+ ) {
|
|
|
+ dv6.style.left = sixL + 392 + "px";
|
|
|
+ dv6.style.top = sixT + 10 + "px";
|
|
|
+ dv.style.left = sixL + 491 + "px";
|
|
|
+ dv.style.top = sixT - 3 + "px";
|
|
|
+ dv8.style.left = sixL + 493 + "px";
|
|
|
+ dv8.style.top = sixT - 18 + "px";
|
|
|
+ dv9.style.left = sixL + 505 + "px";
|
|
|
+ dv9.style.top = sixT - 2 + "px";
|
|
|
+ binding.value.setNight(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 7) {
|
|
|
+ binding.value.setNight(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -306 < tenthL &&
|
|
|
+ tenthL < 289 &&
|
|
|
+ -85 < tenthT &&
|
|
|
+ tenthT < 177 &&
|
|
|
+ binding.value.getFour() == 1 &&
|
|
|
+ binding.value.getOne() == 1 &&
|
|
|
+ binding.value.getTwo() == 1 &&
|
|
|
+ binding.value.getThree() == 1 &&
|
|
|
+ binding.value.getFive() == 1 &&
|
|
|
+ binding.value.getSix() == 1 &&
|
|
|
+ binding.value.getSeven() == 1 &&
|
|
|
+ binding.value.getEight() == 1 &&
|
|
|
+ binding.value.getNight() == 1 &&
|
|
|
+ type == 6
|
|
|
+ ) {
|
|
|
+ dv5.style.left = threeL + 0 + "px";
|
|
|
+ dv5.style.top = threeT + 0 + "px";
|
|
|
+ binding.value.setTen(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 6) {
|
|
|
+ binding.value.setTen(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -111 < eleventhL &&
|
|
|
+ eleventhL < 131 &&
|
|
|
+ -109 < eleventhT &&
|
|
|
+ eleventhT < 109 &&
|
|
|
+ type == 15
|
|
|
+ ) {
|
|
|
+ dv14.style.left = tenL + 0 + "px";
|
|
|
+ dv14.style.top = tenT - 4 + "px";
|
|
|
+ binding.value.setEleven(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 15) {
|
|
|
+ binding.value.setEleven(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -115 < twelvethL &&
|
|
|
+ twelvethL < 124 &&
|
|
|
+ -115 < twelvethT &&
|
|
|
+ twelvethT < 113 &&
|
|
|
+ type == 12
|
|
|
+ ) {
|
|
|
+ dv11.style.left = thirteenL + 0 + "px";
|
|
|
+ dv11.style.top = thirteenT + 3 + "px";
|
|
|
+ binding.value.setTwelve(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 12) {
|
|
|
+ binding.value.setTwelve(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -80 < thirteenthL &&
|
|
|
+ thirteenthL < -9 &&
|
|
|
+ 16 < thirteenthT &&
|
|
|
+ thirteenthT < 117 &&
|
|
|
+ type == 14
|
|
|
+ ) {
|
|
|
+ dv13.style.left = elevenL + 45 + "px";
|
|
|
+ dv13.style.top = elevenT - 92 + "px";
|
|
|
+ binding.value.setThirteen(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 14) {
|
|
|
+ binding.value.setThirteen(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -124 < fourteenthL &&
|
|
|
+ fourteenthL < 108 &&
|
|
|
+ -102 < fourteenthT &&
|
|
|
+ fourteenthT < 102 &&
|
|
|
+ type == 13
|
|
|
+ ) {
|
|
|
+ dv12.style.left = thirteenL + 0 + "px";
|
|
|
+ dv12.style.top = thirteenT + 6 + "px";
|
|
|
+ if (binding.value.getThirteen() == 1) {
|
|
|
+ dv13.style.left = thirteenL + 0 + 45 + "px";
|
|
|
+ dv13.style.top = thirteenT + 6 - 92 + "px";
|
|
|
+ }
|
|
|
+ binding.value.setFourteen(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 13) {
|
|
|
+ binding.value.setFourteen(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -122 < fifteenthL &&
|
|
|
+ fifteenthL < 126 &&
|
|
|
+ -100 < fifteenthT &&
|
|
|
+ fifteenthT < 96 &&
|
|
|
+ type == 12
|
|
|
+ ) {
|
|
|
+ dv11.style.left = elevenL + 0 + "px";
|
|
|
+ dv11.style.top = elevenT - 3 + "px";
|
|
|
+ if (binding.value.getThirteen() == 1) {
|
|
|
+ dv13.style.left = elevenL + 0 + 45 + "px";
|
|
|
+ dv13.style.top = elevenT - 0 - 92 + "px";
|
|
|
+ }
|
|
|
+ binding.value.setFifteen(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 12) {
|
|
|
+ binding.value.setFifteen(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -120 < sixteenthL &&
|
|
|
+ sixteenthL < 120 &&
|
|
|
+ -99 < sixteenthT &&
|
|
|
+ sixteenthT < 99 &&
|
|
|
+ type == 13
|
|
|
+ ) {
|
|
|
+ dv12.style.left = tenL + 0 + "px";
|
|
|
+ dv12.style.top = tenT + 2 + "px";
|
|
|
+ if (binding.value.getThirteen() == 1) {
|
|
|
+ dv13.style.left = tenL + 0 + 45 + "px";
|
|
|
+ dv13.style.top = tenT + 2 - 92 + "px";
|
|
|
+ }
|
|
|
+ binding.value.setSixteen(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 13) {
|
|
|
+ binding.value.setSixteen(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -113 < seventeenthL &&
|
|
|
+ seventeenthL < 120 &&
|
|
|
+ -96 < seventeenthT &&
|
|
|
+ seventeenthT < 106 &&
|
|
|
+ type == 15
|
|
|
+ ) {
|
|
|
+ dv14.style.left = elevenL + 0 + "px";
|
|
|
+ dv14.style.top = elevenT - 5 + "px";
|
|
|
+ if (binding.value.getThirteen() == 1) {
|
|
|
+ dv13.style.left = elevenL + 0 + 45 + "px";
|
|
|
+ dv13.style.top = elevenT - 0 - 92 + "px";
|
|
|
+ }
|
|
|
+ binding.value.setSeventeen(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ playMusic();
|
|
|
+ } else if (type == 15) {
|
|
|
+ binding.value.setSeventeen(0);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ -314 < eighteenthL &&
|
|
|
+ eighteenthL < -88 &&
|
|
|
+ -15 < eighteenthT &&
|
|
|
+ eighteenthT < 205 &&
|
|
|
+ ((eleventhL == 0 && eleventhT == 2) ||
|
|
|
+ (twelvethL == 0 && twelvethT == -2)) &&
|
|
|
+ binding.value.getThirteen() == 1 &&
|
|
|
+ (binding.value.getFourteen() == 1 ||
|
|
|
+ binding.value.getSeventeen() == 1) &&
|
|
|
+ (binding.value.getSixteen() == 1 || binding.value.getFifteen() == 1)
|
|
|
+ ) {
|
|
|
+ binding.value.setEighteen(1); //设置第一个j2可以跟着j1一起动
|
|
|
+ all.style.left = fourL + 250 + "px";
|
|
|
+ all.style.top = fourT - 66 + "px";
|
|
|
+ playMusic();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function playMusic() {
|
|
|
+ musicC.play();
|
|
|
+ }
|
|
|
+
|
|
|
+ function moveP(nl, nt, type) {
|
|
|
+ var allL = allOne.offsetLeft;
|
|
|
+ var allT = allOne.offsetTop;
|
|
|
+ if (binding.value.getFour() == 1 && type == 8) {
|
|
|
+ dv10.style.left = nl - 7 + "px";
|
|
|
+ dv10.style.top = nt - 1 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getOne() == 1 && type == 5) {
|
|
|
+ dv1.style.left = nl + 96 + "px";
|
|
|
+ dv1.style.top = nt - 77 + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ binding.value.getTwo() == 1 &&
|
|
|
+ binding.value.getThree() == 1 &&
|
|
|
+ type == 5
|
|
|
+ ) {
|
|
|
+ dv2.style.left = nl + 12 + "px";
|
|
|
+ dv2.style.top = nt + 82 + "px";
|
|
|
+ dv3.style.left = nl + 322 + "px";
|
|
|
+ dv3.style.top = nt + 18 + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ binding.value.getFour() == 1 &&
|
|
|
+ binding.value.getOne() == 1 &&
|
|
|
+ binding.value.getTwo() == 1 &&
|
|
|
+ binding.value.getThree() == 1 &&
|
|
|
+ binding.value.getFive() == 1 &&
|
|
|
+ type == 5
|
|
|
+ ) {
|
|
|
+ dv2.style.left = nl + 12 + "px";
|
|
|
+ dv2.style.top = nt + 82 + "px";
|
|
|
+ dv3.style.left = nl + 322 + "px";
|
|
|
+ dv3.style.top = nt + 18 + "px";
|
|
|
+ dv7.style.left = nl + 122 + "px";
|
|
|
+ dv7.style.top = nt - 77 + "px";
|
|
|
+ dv10.style.left = nl + 115 + "px";
|
|
|
+ dv10.style.top = nt - 78 + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ binding.value.getFour() == 1 &&
|
|
|
+ binding.value.getOne() == 1 &&
|
|
|
+ binding.value.getTwo() == 1 &&
|
|
|
+ binding.value.getThree() == 1 &&
|
|
|
+ binding.value.getFive() == 1 &&
|
|
|
+ binding.value.getSix() == 1 &&
|
|
|
+ binding.value.getSeven() == 1 &&
|
|
|
+ binding.value.getEight() == 1 &&
|
|
|
+ binding.value.getNight() == 1 &&
|
|
|
+ type == 5
|
|
|
+ ) {
|
|
|
+ dv1.style.left = nl + 96 + "px";
|
|
|
+ dv1.style.top = nt - 77 + "px";
|
|
|
+ dv2.style.left = nl + 12 + "px";
|
|
|
+ dv2.style.top = nt + 82 + "px";
|
|
|
+ dv3.style.left = nl + 322 + "px";
|
|
|
+ dv3.style.top = nt + 18 + "px";
|
|
|
+ dv6.style.left = nl + 514 + "px";
|
|
|
+ dv6.style.top = nt - 67 + "px";
|
|
|
+ dv7.style.left = nl + 122 + "px";
|
|
|
+ dv7.style.top = nt - 77 + "px";
|
|
|
+ dv.style.left = nl + 613 + "px";
|
|
|
+ dv.style.top = nt - 80 + "px";
|
|
|
+ dv8.style.left = nl + 615 + "px";
|
|
|
+ dv8.style.top = nt - 95 + "px";
|
|
|
+ dv9.style.left = nl + 627 + "px";
|
|
|
+ dv9.style.top = nt - 79 + "px";
|
|
|
+ dv10.style.left = nl + 115 + "px";
|
|
|
+ dv10.style.top = nt - 78 + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ binding.value.getFour() == 1 &&
|
|
|
+ binding.value.getOne() == 1 &&
|
|
|
+ binding.value.getTwo() == 1 &&
|
|
|
+ binding.value.getThree() == 1 &&
|
|
|
+ binding.value.getFive() == 1 &&
|
|
|
+ binding.value.getSix() == 1 &&
|
|
|
+ binding.value.getSeven() == 1 &&
|
|
|
+ binding.value.getEight() == 1 &&
|
|
|
+ binding.value.getNight() == 1 &&
|
|
|
+ binding.value.getTen() == 1 &&
|
|
|
+ type == 6
|
|
|
+ ) {
|
|
|
+ dv1.style.left = nl + 96 + "px";
|
|
|
+ dv1.style.top = nt - 77 + "px";
|
|
|
+ dv2.style.left = nl + 12 + "px";
|
|
|
+ dv2.style.top = nt + 82 + "px";
|
|
|
+ dv3.style.left = nl + 322 + "px";
|
|
|
+ dv3.style.top = nt + 18 + "px";
|
|
|
+ dv4.style.left = nl + 0 + "px";
|
|
|
+ dv4.style.top = nt + 0 + "px";
|
|
|
+ dv6.style.left = nl + 514 + "px";
|
|
|
+ dv6.style.top = nt - 67 + "px";
|
|
|
+ dv7.style.left = nl + 122 + "px";
|
|
|
+ dv7.style.top = nt - 77 + "px";
|
|
|
+ dv.style.left = nl + 613 + "px";
|
|
|
+ dv.style.top = nt - 80 + "px";
|
|
|
+ dv8.style.left = nl + 615 + "px";
|
|
|
+ dv8.style.top = nt - 95 + "px";
|
|
|
+ dv9.style.left = nl + 627 + "px";
|
|
|
+ dv9.style.top = nt - 79 + "px";
|
|
|
+ dv10.style.left = nl + 115 + "px";
|
|
|
+ dv10.style.top = nt - 78 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getSeven() == 1 && type == 9) {
|
|
|
+ dv9.style.left = nl + 12 + "px";
|
|
|
+ dv9.style.top = nt + 18 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getSix() == 1 && type == 7) {
|
|
|
+ dv.style.left = nl + 100 + "px";
|
|
|
+ dv.style.top = nt - 12 + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ binding.value.getSix() == 1 &&
|
|
|
+ binding.value.getSeven() == 1 &&
|
|
|
+ binding.value.getEight() == 1 &&
|
|
|
+ type == 7
|
|
|
+ ) {
|
|
|
+ dv.style.left = nl + 100 + "px";
|
|
|
+ dv.style.top = nt - 12 + "px";
|
|
|
+ dv8.style.left = nl + 102 + "px";
|
|
|
+ dv8.style.top = nt - 27 + "px";
|
|
|
+ dv9.style.left = nl + 114 + "px";
|
|
|
+ dv9.style.top = nt - 11 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getThirteen() == 1 && type == 13) {
|
|
|
+ dv13.style.left = nl + 45 + "px";
|
|
|
+ dv13.style.top = nt - 92 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getEleven() == 1 && type == 15) {
|
|
|
+ dv11.style.left = nl + 0 + "px";
|
|
|
+ dv11.style.top = nt + 3 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getTwelve() == 1 && type == 15) {
|
|
|
+ dv11.style.left = nl + 0 + "px";
|
|
|
+ dv11.style.top = nt + 3 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getFourteen() == 1 && type == 13) {
|
|
|
+ dv14.style.left = nl + 0 + "px";
|
|
|
+ dv14.style.top = nt - 5 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getSeventeen() == 1 && type == 13) {
|
|
|
+ dv14.style.left = nl + 0 + "px";
|
|
|
+ dv14.style.top = nt - 5 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getFifteen() == 1 && type == 13) {
|
|
|
+ dv11.style.left = nl + 0 + "px";
|
|
|
+ dv11.style.top = nt - 3 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getSixteen() == 1 && type == 13) {
|
|
|
+ dv11.style.left = nl + 0 + "px";
|
|
|
+ dv11.style.top = nt - 3 + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ binding.value.getFour() == 1 &&
|
|
|
+ binding.value.getOne() == 1 &&
|
|
|
+ binding.value.getTwo() == 1 &&
|
|
|
+ binding.value.getThree() == 1 &&
|
|
|
+ binding.value.getFive() == 1 &&
|
|
|
+ binding.value.getSix() == 1 &&
|
|
|
+ binding.value.getSeven() == 1 &&
|
|
|
+ binding.value.getEight() == 1 &&
|
|
|
+ binding.value.getNight() == 1 &&
|
|
|
+ binding.value.getTen() == 1 &&
|
|
|
+ binding.value.getEighteen() == 1 &&
|
|
|
+ type == 6
|
|
|
+ ) {
|
|
|
+ dv1.style.left = nl + 96 + "px";
|
|
|
+ dv1.style.top = nt - 77 + "px";
|
|
|
+ dv2.style.left = nl + 12 + "px";
|
|
|
+ dv2.style.top = nt + 82 + "px";
|
|
|
+ dv3.style.left = nl + 322 + "px";
|
|
|
+ dv3.style.top = nt + 18 + "px";
|
|
|
+ dv4.style.left = nl + 0 + "px";
|
|
|
+ dv4.style.top = nt + 0 + "px";
|
|
|
+ dv6.style.left = nl + 514 + "px";
|
|
|
+ dv6.style.top = nt - 67 + "px";
|
|
|
+ dv7.style.left = nl + 122 + "px";
|
|
|
+ dv7.style.top = nt - 77 + "px";
|
|
|
+ dv.style.left = nl + 613 + "px";
|
|
|
+ dv.style.top = nt - 80 + "px";
|
|
|
+ dv8.style.left = nl + 615 + "px";
|
|
|
+ dv8.style.top = nt - 95 + "px";
|
|
|
+ dv9.style.left = nl + 627 + "px";
|
|
|
+ dv9.style.top = nt - 79 + "px";
|
|
|
+ dv10.style.left = nl + 115 + "px";
|
|
|
+ dv10.style.top = nt - 78 + "px";
|
|
|
+ all.style.left = nl + 250 + "px";
|
|
|
+ all.style.top = nt - 66 + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ (640 < allL ||
|
|
|
+ 640 > allL) && (448 < allT ||
|
|
|
+ 448 > allT) && binding.value.getEighteen() == 1 && type == 16
|
|
|
+ ) {
|
|
|
+ binding.value.setEighteen(0);
|
|
|
+ dv13.style.left = nl + 45 + "px";
|
|
|
+ dv13.style.top = nt - 89 + "px";
|
|
|
+ dv11.style.left = nl + 0 + "px";
|
|
|
+ dv11.style.top = nt + 3 + "px";
|
|
|
+ dv12.style.left = nl + 0 + "px";
|
|
|
+ dv12.style.top = nt + 3 + "px";
|
|
|
+ dv14.style.left = nl + 0 + "px";
|
|
|
+ dv14.style.top = nt - 5 + "px";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ go() {
|
|
|
+ this.$router.push("/blockly");
|
|
|
+ },
|
|
|
+ setPan(value) {
|
|
|
+ this.panThing = value;
|
|
|
+ },
|
|
|
+ getPan() {
|
|
|
+ return this.panThing;
|
|
|
+ },
|
|
|
+ setOne(value) {
|
|
|
+ this.one = value;
|
|
|
+ },
|
|
|
+ getOne() {
|
|
|
+ return this.one;
|
|
|
+ },
|
|
|
+ setTwo(value) {
|
|
|
+ this.two = value;
|
|
|
+ },
|
|
|
+ getTwo() {
|
|
|
+ return this.two;
|
|
|
+ },
|
|
|
+ setThree(value) {
|
|
|
+ this.three = value;
|
|
|
+ },
|
|
|
+ getThree() {
|
|
|
+ return this.three;
|
|
|
+ },
|
|
|
+ setFour(value) {
|
|
|
+ this.four = value;
|
|
|
+ },
|
|
|
+ getFour() {
|
|
|
+ return this.four;
|
|
|
+ },
|
|
|
+ setFive(value) {
|
|
|
+ this.five = value;
|
|
|
+ },
|
|
|
+ getFive() {
|
|
|
+ return this.five;
|
|
|
+ },
|
|
|
+ setSix(value) {
|
|
|
+ this.six = value;
|
|
|
+ },
|
|
|
+ getSix() {
|
|
|
+ return this.six;
|
|
|
+ },
|
|
|
+ setSeven(value) {
|
|
|
+ this.seven = value;
|
|
|
+ },
|
|
|
+ getSeven() {
|
|
|
+ return this.seven;
|
|
|
+ },
|
|
|
+ setEight(value) {
|
|
|
+ this.eight = value;
|
|
|
+ },
|
|
|
+ getEight() {
|
|
|
+ return this.eight;
|
|
|
+ },
|
|
|
+ setNight(value) {
|
|
|
+ this.night = value;
|
|
|
+ },
|
|
|
+ getNight() {
|
|
|
+ return this.night;
|
|
|
+ },
|
|
|
+ setTen(value) {
|
|
|
+ this.ten = value;
|
|
|
+ },
|
|
|
+ getTen() {
|
|
|
+ return this.ten;
|
|
|
+ },
|
|
|
+ setEleven(value) {
|
|
|
+ this.eleven = value;
|
|
|
+ },
|
|
|
+ getEleven() {
|
|
|
+ return this.eleven;
|
|
|
+ },
|
|
|
+ setTwelve(value) {
|
|
|
+ this.twelve = value;
|
|
|
+ },
|
|
|
+ getTwelve() {
|
|
|
+ return this.twelve;
|
|
|
+ },
|
|
|
+ setThirteen(value) {
|
|
|
+ this.thirteen = value;
|
|
|
+ },
|
|
|
+ getThirteen() {
|
|
|
+ return this.thirteen;
|
|
|
+ },
|
|
|
+ setFourteen(value) {
|
|
|
+ this.fourteen = value;
|
|
|
+ },
|
|
|
+ getFourteen() {
|
|
|
+ return this.fourteen;
|
|
|
+ },
|
|
|
+ setFifteen(value) {
|
|
|
+ this.fifteen = value;
|
|
|
+ },
|
|
|
+ getFifteen() {
|
|
|
+ return this.fifteen;
|
|
|
+ },
|
|
|
+ setSixteen(value) {
|
|
|
+ this.sixteen = value;
|
|
|
+ },
|
|
|
+ getSixteen() {
|
|
|
+ return this.sixteen;
|
|
|
+ },
|
|
|
+ setSeventeen(value) {
|
|
|
+ this.seventeen = value;
|
|
|
+ },
|
|
|
+ getSeventeen() {
|
|
|
+ return this.seventeen;
|
|
|
+ },
|
|
|
+ setEighteen(value) {
|
|
|
+ this.eighteen = value;
|
|
|
+ },
|
|
|
+ getEighteen() {
|
|
|
+ return this.eighteen;
|
|
|
+ },
|
|
|
+ setNighteen(value) {
|
|
|
+ this.nighteen = value;
|
|
|
+ },
|
|
|
+ getNighteen() {
|
|
|
+ return this.nighteen;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ margin: 25px 0 30px 20px;
|
|
|
+ width: 419px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip > img,
|
|
|
+ #screan > img,
|
|
|
+ #tou > img,
|
|
|
+ #ai > img,
|
|
|
+ #duobi > img,
|
|
|
+ #duobiBig > img,
|
|
|
+ #dOne > img,
|
|
|
+ #dTwo > img,
|
|
|
+ #dThree > img,
|
|
|
+ #dFour > img,
|
|
|
+ #dFive > img,
|
|
|
+ #dSix > img,
|
|
|
+ #dSeven > img,
|
|
|
+ #dEight > img,
|
|
|
+ #dNight > img,
|
|
|
+ #bottom > img,
|
|
|
+ .right > img {
|
|
|
+ width: 100%;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin: auto;
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
+
|
|
|
+ #duobi {
|
|
|
+ width: 130px;
|
|
|
+ position: absolute;
|
|
|
+ left: 13%;
|
|
|
+ top: 30%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 8;
|
|
|
+ }
|
|
|
+
|
|
|
+ #duobiBig {
|
|
|
+ width: 165px;
|
|
|
+ position: absolute;
|
|
|
+ left: 12%;
|
|
|
+ top: 36%;
|
|
|
+ -webkit-transform: translateY(-50%);
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 6;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dOne {
|
|
|
+ width: 35px;
|
|
|
+ position: absolute;
|
|
|
+ left: 13%;
|
|
|
+ top: 58%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dTwo {
|
|
|
+ width: 40px;
|
|
|
+ position: absolute;
|
|
|
+ left: 16%;
|
|
|
+ top: 55%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dThree {
|
|
|
+ width: 370px;
|
|
|
+ position: absolute;
|
|
|
+ left: 21%;
|
|
|
+ top: 63%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dFour {
|
|
|
+ width: 370px;
|
|
|
+ position: absolute;
|
|
|
+ left: 21%;
|
|
|
+ top: 36%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dFive {
|
|
|
+ width: 370px;
|
|
|
+ position: absolute;
|
|
|
+ left: 41%;
|
|
|
+ top: 53%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 7;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dSix {
|
|
|
+ width: 450px;
|
|
|
+ position: absolute;
|
|
|
+ left: 41%;
|
|
|
+ top: 69%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 6;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dSeven {
|
|
|
+ width: 280px;
|
|
|
+ position: absolute;
|
|
|
+ left: 43%;
|
|
|
+ top: 33%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dEight {
|
|
|
+ width: 80px;
|
|
|
+ position: absolute;
|
|
|
+ left: 57%;
|
|
|
+ top: 45%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dNight {
|
|
|
+ width: 92px;
|
|
|
+ position: absolute;
|
|
|
+ left: 63%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 6;
|
|
|
+ }
|
|
|
+
|
|
|
+ #bottom {
|
|
|
+ width: 180px;
|
|
|
+ position: absolute;
|
|
|
+ left: 70%;
|
|
|
+ top: 51%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+
|
|
|
+ #screan {
|
|
|
+ width: 180px;
|
|
|
+ position: absolute;
|
|
|
+ left: 70%;
|
|
|
+ top: 69%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 14;
|
|
|
+ }
|
|
|
+
|
|
|
+ #all {
|
|
|
+ width: 180px;
|
|
|
+ position: absolute;
|
|
|
+ left: 70%;
|
|
|
+ top: 69%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 15;
|
|
|
+ }
|
|
|
+
|
|
|
+ #ai {
|
|
|
+ width: 180px;
|
|
|
+ position: absolute;
|
|
|
+ top: 32%;
|
|
|
+ left: 70%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 12;
|
|
|
+ }
|
|
|
+
|
|
|
+ #tou {
|
|
|
+ width: 85px;
|
|
|
+ position: absolute;
|
|
|
+ top: 41%;
|
|
|
+ left: 82%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 13;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ color: #fff;
|
|
|
+ background: #8ca1de;
|
|
|
+ width: 550px;
|
|
|
+ height: 55px;
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 55px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 40px;
|
|
|
+ position: absolute;
|
|
|
+ left: 55%;
|
|
|
+ top: 70%;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dark {
|
|
|
+ background: #5b79d0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+</style>
|
lcw
