|
|
@@ -3,67 +3,70 @@
|
|
|
<div class="mask" v-if="actionState"></div>
|
|
|
<Transition :enter-active-class="proxy?.animate.rankingWindow.enter"
|
|
|
:leave-active-class="proxy?.animate.rankingWindow.leave">
|
|
|
- <div class="confirmDiaBg" v-if="actionState">
|
|
|
- <div class="confirmDiaWindow">
|
|
|
- <div class="prompt"><i></i> {{ actionText }}</div>
|
|
|
- <div class="confirmDiaWindow-con">
|
|
|
- <div class="picBox">
|
|
|
- <div class="pic">
|
|
|
- <div class="gamePic">
|
|
|
- <template v-if="currentGame == 'game_fruit'">
|
|
|
- <img src="@/assets/images/game/img2.png" width="200" />
|
|
|
- </template>
|
|
|
- <template v-if="currentGame == 'game_basketball'">
|
|
|
- <img src="@/assets/images/game/img1.png" width="200" />
|
|
|
- </template>
|
|
|
- <template v-if="currentGame == 'game_football'">
|
|
|
- <img src="@/assets/images/game/img3.png" width="200" />
|
|
|
- </template>
|
|
|
- <div class="time" v-if="timerNum > 0">
|
|
|
- <div>{{ timerNum }}</div>
|
|
|
- </div>
|
|
|
+ <div class="confirmDiaBgBox" v-if="actionState">
|
|
|
+ <div class="confirmDiaBg">
|
|
|
+ <div class="confirmDiaWindow">
|
|
|
+ <div class="prompt"><i></i> {{ actionText }}</div>
|
|
|
+ <div class="confirmDiaWindow-con">
|
|
|
+
|
|
|
+
|
|
|
+ <div class="gamePic">
|
|
|
+ <template v-if="currentGame == 'game_fruit'">
|
|
|
+ <img src="@/assets/images/game/img2.png" width="200" />
|
|
|
+ </template>
|
|
|
+ <template v-if="currentGame == 'game_basketball'">
|
|
|
+ <img src="@/assets/images/game/img1.png" width="200" />
|
|
|
+ </template>
|
|
|
+ <template v-if="currentGame == 'game_football'">
|
|
|
+ <img src="@/assets/images/game/img3.png" width="200" />
|
|
|
+ </template>
|
|
|
+ <div class="time" v-if="timerNum > 0">
|
|
|
+ <div>{{ timerNum }}</div>
|
|
|
</div>
|
|
|
- <div class="gamePlayer">
|
|
|
- <div class="item" v-for="item in areaStateList" :key="item.area">
|
|
|
- <div class="player">
|
|
|
- <template v-if="currentGame == 'bodyposecontroller'">
|
|
|
- <div><img src="@/assets/images/game/fruit1.png" class="fade-image"
|
|
|
- :class="{ 'fade-image1': !item.state }"></img></div>
|
|
|
- <div><img v-if="!item.state" src="@/assets/images/game/fruit2.png" class="fade-image"
|
|
|
- :class="{ 'fade-image2': !item.state }"></img></div>
|
|
|
- </template>
|
|
|
- <template v-if="currentGame == 'game_fruit'">
|
|
|
- <div><img src="@/assets/images/game/fruit1.png" class="fade-image"
|
|
|
- :class="{ 'fade-image1': !item.state }"></img></div>
|
|
|
- <div><img v-if="!item.state" src="@/assets/images/game/fruit2.png" class="fade-image"
|
|
|
- :class="{ 'fade-image2': !item.state }"></img></div>
|
|
|
- </template>
|
|
|
- <template v-if="currentGame == 'game_basketball'">
|
|
|
- <div><img src="@/assets/images/game/basketball1.png" class="fade-image"
|
|
|
- :class="{ 'fade-image1': !item.state }"></img></div>
|
|
|
- <div><img v-if="!item.state" src="@/assets/images/game/basketball2.png" class="fade-image"
|
|
|
- :class="{ 'fade-image2': !item.state }"></img></div>
|
|
|
- </template>
|
|
|
- <template v-if="currentGame == 'game_football'">
|
|
|
- <div><img src="@/assets/images/game/football1.png" class="fade-image"
|
|
|
- :class="{ 'fade-image1': !item.state }"></img></div>
|
|
|
- <div><img v-if="!item.state" src="@/assets/images/game/football2.png" class="fade-image"
|
|
|
- :class="{ 'fade-image2': !item.state }"></img></div>
|
|
|
- </template>
|
|
|
- <div v-if="item.state" class="ok"><img src="@/assets/images/game/ok.png"></div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="gamePlayer">
|
|
|
+ <div class="item" v-for="item in areaStateList" :key="item.area">
|
|
|
+ <div class="player">
|
|
|
+ <template v-if="currentGame == 'bodyposecontroller'">
|
|
|
+ <div><img src="@/assets/images/game/fruit1.png" class="fade-image"
|
|
|
+ :class="{ 'fade-image1': !item.state }"></img></div>
|
|
|
+ <div><img v-if="!item.state" src="@/assets/images/game/fruit2.png" class="fade-image"
|
|
|
+ :class="{ 'fade-image2': !item.state }"></img></div>
|
|
|
+ </template>
|
|
|
+ <template v-if="currentGame == 'game_fruit'">
|
|
|
+ <div><img src="@/assets/images/game/fruit1.png" class="fade-image"
|
|
|
+ :class="{ 'fade-image1': !item.state }"></img></div>
|
|
|
+ <div><img v-if="!item.state" src="@/assets/images/game/fruit2.png" class="fade-image"
|
|
|
+ :class="{ 'fade-image2': !item.state }"></img></div>
|
|
|
+ </template>
|
|
|
+ <template v-if="currentGame == 'game_basketball'">
|
|
|
+ <div><img src="@/assets/images/game/basketball1.png" class="fade-image"
|
|
|
+ :class="{ 'fade-image1': !item.state }"></img></div>
|
|
|
+ <div><img v-if="!item.state" src="@/assets/images/game/basketball2.png" class="fade-image"
|
|
|
+ :class="{ 'fade-image2': !item.state }"></img></div>
|
|
|
+ </template>
|
|
|
+ <template v-if="currentGame == 'game_football'">
|
|
|
+ <div><img src="@/assets/images/game/football1.png" class="fade-image"
|
|
|
+ :class="{ 'fade-image1': !item.state }"></img></div>
|
|
|
+ <div><img v-if="!item.state" src="@/assets/images/game/football2.png" class="fade-image"
|
|
|
+ :class="{ 'fade-image2': !item.state }"></img></div>
|
|
|
+ </template>
|
|
|
+ <div v-if="item.state" class="ok"><img src="@/assets/images/game/ok.png"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="name">
|
|
|
- <template v-if="currentGame == 'game_fruit'">玩法：挥动双手切开水果，失败三次结束游戏</template>
|
|
|
- <template v-if="currentGame == 'game_basketball'">玩法：身体左右移动对准篮筐，双手投篮</template>
|
|
|
- <template v-if="currentGame == 'game_football'">玩法：身体左右移动躲避雪糕筒，踢腿射门</template>
|
|
|
+ <div class="picBox"></div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="name">
|
|
|
+ <template v-if="currentGame == 'game_fruit'">玩法：挥动双手切开水果，失败三次结束游戏</template>
|
|
|
+ <template v-if="currentGame == 'game_basketball'">玩法：身体左右移动对准篮筐，双手投篮</template>
|
|
|
+ <template v-if="currentGame == 'game_football'">玩法：身体左右移动躲避雪糕筒，踢腿射门</template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div @click="getExit" class="close"></div>
|
|
|
</div>
|
|
|
- <div @click="getExit" class="close"></div>
|
|
|
</div>
|
|
|
</Transition>
|
|
|
</div>
|
|
|
@@ -330,19 +333,25 @@ defineExpose({
|
|
|
z-index: 998;
|
|
|
}
|
|
|
|
|
|
+.confirmDiaBgBox{
|
|
|
+ position: fixed;
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 998;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
.confirmDiaBg {
|
|
|
- width: 70rem;
|
|
|
- position: fixed;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- margin-left: calc(70rem / -2);
|
|
|
- margin-top: calc(((70rem / 2) + 12rem) / -2);
|
|
|
+ width: 70%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- z-index: 999;
|
|
|
|
|
|
.confirmDiaWindow {
|
|
|
- border-radius: 1.6rem;
|
|
|
+ border-radius: 15px;
|
|
|
opacity: 1;
|
|
|
text-align: center;
|
|
|
display: flex;
|
|
|
@@ -357,7 +366,6 @@ defineExpose({
|
|
|
color: #ffffff;
|
|
|
font-size: 2.5vh;
|
|
|
display: flex;
|
|
|
- line-height: 3vh;
|
|
|
padding-top: 2vh;
|
|
|
|
|
|
i {
|
|
|
@@ -376,130 +384,128 @@ defineExpose({
|
|
|
width: 85%;
|
|
|
padding: 25px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .picBox {
|
|
|
+ .gamePic {
|
|
|
+ border: 5px solid #3BDDCE;
|
|
|
+ width: calc(30vh * (1920 / 1080));
|
|
|
+ height: 30vh;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
|
|
|
- width: 100%;
|
|
|
- background-image: url('@/assets/images/game/bg.png');
|
|
|
- background-position: bottom;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100%;
|
|
|
+ .time {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 7rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gamePlayer {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- padding-bottom: 10vh;
|
|
|
+ width: calc(30vh * (1920 / 1080));
|
|
|
+ position: relative;
|
|
|
+ margin-top: calc(22vh * (1000 / 518) / -2);
|
|
|
|
|
|
- .pic {
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
|
|
|
- .gamePic {
|
|
|
- border: 5px solid #3BDDCE;
|
|
|
- width: 60vh;
|
|
|
- height: calc(60vh * (1080 / 1920));
|
|
|
+ .player {
|
|
|
position: relative;
|
|
|
- display: flex;
|
|
|
+ width: 22vh;
|
|
|
+ height: calc(22vh * (1000 / 518));
|
|
|
+ }
|
|
|
|
|
|
- .time {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- color: #ffffff;
|
|
|
- font-size: 7rem;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+ .ok {
|
|
|
+ width: 8vh;
|
|
|
+ height: 8vh;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-top: 1vh;
|
|
|
+ margin-left: -4vh;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .gamePlayer {
|
|
|
- display: flex;
|
|
|
- width: 60vh;
|
|
|
- margin-top: -20vh;
|
|
|
-
|
|
|
- .item {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .player {
|
|
|
- position: relative;
|
|
|
- width: 22vh;
|
|
|
- height: calc(22vh * (1000 / 518));
|
|
|
- }
|
|
|
-
|
|
|
- .ok {
|
|
|
- width: 8vh;
|
|
|
- height: 8vh;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin-top: 1vh;
|
|
|
- margin-left: -4vh;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .fade-image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .fade-image1 {
|
|
|
- animation: fadeOpacity1 2s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .fade-image2 {
|
|
|
- animation: fadeOpacity2 2s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes fadeOpacity1 {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes fadeOpacity2 {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ .fade-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-image1 {
|
|
|
+ animation: fadeOpacity1 2s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-image2 {
|
|
|
+ animation: fadeOpacity2 2s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadeOpacity1 {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadeOpacity2 {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .picBox {
|
|
|
+ width: calc(30vh * (1920 / 1080) * 2);
|
|
|
+ height: 25vh;
|
|
|
+ background-image: url('@/assets/images/game/bg.png');
|
|
|
+ background-position: bottom;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ margin-top: -15vh;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
.name {
|
|
|
width: 100%;
|
|
|
color: #ffffff;
|
