Initial commit: GamePortrait 竖屏版 - 深色豪华主题

src/components/RushVillage.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="village">
+    <!-- 抢庄 -->
+    <div
+      class="rob-box bounceIn animated"
+      v-if="countDown && countDown > 0 && thisData.rob_time - 3 >= countDown"
+    >
+      <div class="countDown">
+        <span class="time" v-html="countDown"></span>
+        <div class="bg"></div>
+      </div>
+      <div
+        v-if="thisData.rob_banker_id == 0"
+        class="btn"
+        @click="sendRob(true)"
+        :style="`background-image:url(${require('../assets/images/nn/' +
+          $lang[$Type].rob_button)})`"
+      ></div>
+      <div
+        v-if="thisData.rob_banker_id != 0"
+        class="btn unclick"
+        @click="sendRob(false)"
+        :style="`background-image:url(${require('../assets/images/nn/' +
+          $lang[$Type].unrob_button)})`"
+      ></div>
+    </div>
+    <!-- 抢庄成功 -->
+    <div
+      v-if="successRob"
+      class="success-rob fadeInDown animated"
+      :style="`background-image:url( ${require('../assets/images/nn/' +
+        $lang[$Type].rob_result)})`"
+    >
+      <div class="name">{{ thisData.rob_banker_username }}</div>
+    </div>
+    <div
+      class="mask"
+      v-if="countDown && countDown > 0 && thisData.rob_time - 3 >= countDown"
+    ></div>
+    <div
+      class="rob-result"
+      v-if="
+        countDown == 0 && rob_banker_username != '' && thisData.rob_status == 2
+      "
+    >
+      <i
+        :style="`background-image:url(${require('../assets/images/nn/' +
+          $lang[$Type].rob_banker)})`"
+      ></i>
+      {{ rob_banker_username }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex"
+import { showToast } from "vant"
+// showSuccessToast, showFailToast
+export default {
+  data() {
+    return {
+      countDown: 0,
+      rob_banker_username: "",
+      successRob: false
+    }
+  },
+  methods: {
+    sendRob(state) {
+      if (state == true) {
+        var toRobData = {
+          connect: "client",
+          mode: "toRob",
+          table_id: this.thisData.id,
+          number_tab_id: this.thisData.number_tab_id
+        }
+        this.$store.dispatch("socket/sendMsg", {
+          ...toRobData
+        })
+      } else {
+        if (this.$Type == "cn") {
+          showToast("庄已被 " + this.thisData.rob_banker_username + " 抢了！")
+        } else if (this.$Type == "tw") {
+          showToast("莊已被 " + this.thisData.rob_banker_username + " 搶了！")
+        } else if (this.$Type == "en") {
+          showToast(
+            "Zhuang has been robbed by " +
+              this.thisData.rob_banker_username +
+              "！"
+          )
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      $Type: (state) => state.config.$Type,
+      $lang: (state) => state.config.$lang,
+      userInfo: (state) => state.app.userInfo
+    })
+  },
+  watch: {
+    thisData: {
+      handler: function (newData) {
+        // console.log(newData)
+        if (newData.game_id) {
+          // 更新抢庄时间
+          if (newData.sendMode == "startRobCountDown") {
+            this.countDown = newData.rob_count_down
+          } else if (
+            newData.sendMode != "toRobResult" &&
+            newData.sendMode != "toRob"
+          ) {
+            this.countDown = 0
+          }
+
+          // 判断是否系统抢庄
+          if (this.countDown == 0) {
+            if (newData.rob_banker_username) {
+              this.rob_banker_username = newData.rob_banker_username
+            } else {
+              this.rob_banker_username = this.$lang[this.$Type].system
+            }
+          }
+          // 判断抢庄提示
+          if (
+            newData.rob_banker_id == this.userInfo.uid &&
+            newData.rob_status == 1
+          ) {
+            this.successRob = true
+            setTimeout(() => {
+              this.successRob = false
+              newData.rob_status = 2
+            }, 5000)
+          } else {
+            this.successRob = false
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  props: {
+    thisData: Object
+  }
+}
+</script>
+<style scoped>
+.village .mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 3;
+  pointer-events: none;
+  z-index: 90;
+}
+.village .rob-box {
+  width: 4.5rem;
+  height: 6.6rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-top: -3.3rem;
+  margin-left: -2.25rem;
+  z-index: 99;
+}
+.village .rob-box .countDown {
+  width: 4rem;
+  height: 4rem;
+  position: relative;
+  margin: 0 auto 0.6rem auto;
+}
+.village .rob-box .countDown .time {
+  font-size: 1.4rem;
+  display: block;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  line-height: 4rem;
+  font-weight: bold;
+  background-color: #96813b;
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(#96813b),
+    color-stop(50%, #f8eabc),
+    to(#98833d)
+  );
+  background-image: linear-gradient(
+    180deg,
+    #96813b 0%,
+    #f8eabc 50%,
+    #98833d 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.village .rob-box .countDown .bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: url("~@/assets/images/nn/rob_rotate.png") no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  animation: rotate 12000ms linear infinite;
+}
+.village .rob-box .btn {
+  width: 4.2rem;
+  height: 1.2rem;
+  margin: 0 auto;
+  background: url("~@/assets/images/nn/rob_button.png");
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.village .rob-box .btn:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: url("~@/assets/images/nn/rob_button.png");
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  animation: cirZoom infinite linear 2s 0.5s;
+  z-index: -1;
+}
+
+.village .rob-box .btn.unclick {
+  background-image: url("~@/assets/images/nn/unrob_button.png");
+}
+
+.village .rob-box .btn.unclick:after {
+  display: none;
+}
+
+.village .success-rob {
+  position: absolute;
+  width: 9rem;
+  height: 5rem;
+  left: 50%;
+  top: 50%;
+  margin-left: -4.5rem;
+  margin-top: -2rem;
+  z-index: 99;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+.village .success-rob:after {
+  content: "";
+  width: 4.5rem;
+  height: 4.4rem;
+  position: absolute;
+  left: 50%;
+  margin-left: -2.25rem;
+  top: -1.9rem;
+  background: url("~@/assets/images/nn/rob_logo.gif") center center no-repeat;
+  -webkit-background-size: 100%;
+  background-size: 100%;
+}
+.village .success-rob .name {
+  color: #fff;
+  position: absolute;
+  bottom: 0.5rem;
+  left: 50%;
+  width: 8rem;
+  margin-left: -4rem;
+  text-align: center;
+  line-height: 1rem;
+  background: url("~@/assets/images/nn/rob_name_bg.png") center center no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+
+.village .rob-result {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  text-align: center;
+  min-width: 1.2rem;
+  color: #f8eabc;
+  font-size: 0.35rem;
+  font-weight: 500;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  padding-left: 0.75rem;
+  padding-right: 0.35rem;
+  margin-top: -0.8rem;
+  margin-left: -1.2rem;
+  background: url("~@/assets/images/nn/rob_banker_bg.png");
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  -webkit-animation-name: robZoom;
+  animation-name: robZoom;
+  -webkit-animation-duration: 4s;
+  animation-duration: 4s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  z-index: 9999;
+}
+.village .rob-result i {
+  content: "";
+  position: absolute;
+  width: 0.9rem;
+  height: 0.9rem;
+  left: -0.3rem;
+  top: 50%;
+  margin-top: -0.48rem;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+@keyframes robZoom {
+  0% {
+    transform: translate(0, 0) scale(0, 0);
+  }
+  50% {
+    transform: translate(-5.8rem, -1.8rem) scale(1.2, 1.2);
+  }
+  100% {
+    transform: translate(-2.8rem, -4.95rem) scale(1, 1);
+  }
+}
+</style>