GamePortrait/src/views/help.vue

<template>
  <div class="help">
    <NavBar class="navbar" :clickable="false">
      <template #left>
        <img
          class="icon"
          @click="back"
          src="~@/assets/images/icon/back.png"
          alt=""
        />
      </template>
      <template #title>{{ Lang[Type].help }}</template>
    </NavBar>
    <van-tabs class="help-tabs" v-model:active="active">
      <!-- 百家乐 -->
      <van-tab name="baccarat" :title="Lang[Type].Baccarat">
        <template v-if="Type == 'cn'">
          <van-image
            width="100%"
            :src="require('../assets/images/help/cn_baccarat_1.jpg')"
          />
          <van-image
            width="100%"
            :src="require('../assets/images/help/cn_baccarat_2.jpg')"
          />
        </template>
        <van-image
          v-else-if="Type == 'tw'"
          width="100%"
          :src="require('../assets/images/help/tw_baccarat_1.jpg')"
        />
        <template v-else>
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_baccarat_1.jpg')"
          />
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_all.jpg')"
          />
        </template>
      </van-tab>
      <!-- 龙虎 -->
      <van-tab name="lh" :title="Lang[Type].DragonTiger">
        <van-image
          v-if="Type == 'cn'"
          width="100%"
          :src="require('../assets/images/help/cn_longhu.jpg')"
        />
        <van-image
          v-else-if="Type == 'tw'"
          width="100%"
          :src="require('../assets/images/help/tw_longhu.jpg')"
        />
        <template v-else>
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_longhu.jpg')"
          />
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_all.jpg')"
          />
        </template>
      </van-tab>
      <!-- 牛牛 -->
      <van-tab name="nn" :title="Lang[Type].NN">
        <van-image
          v-if="Type == 'cn'"
          width="100%"
          :src="require('../assets/images/help/cn_nn.jpg')"
        />
        <van-image
          v-else-if="Type == 'tw'"
          width="100%"
          :src="require('../assets/images/help/tw_nn.jpg')"
        />
        <template v-else>
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_nn.jpg')"
          />
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_all.jpg')"
          />
        </template>
      </van-tab>
      <!-- 急速牛牛 -->
      <van-tab name="tc" :title="Lang[Type].ThreeCard">
        <van-image
          v-if="Type == 'cn'"
          width="100%"
          :src="require('../assets/images/help/cn_three_card.jpg')"
        />
        <van-image
          v-else-if="Type == 'tw'"
          width="100%"
          :src="require('../assets/images/help/tw_three_card.jpg')"
        />
        <template v-else>
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_three_card.jpg')"
          />
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_all.jpg')"
          />
        </template>
      </van-tab>
      <!-- 骰宝 -->
      <van-tab name="sb" title="骰宝" v-if="false">
        <div style="padding-bottom: 50px"></div>
      </van-tab>
      <!-- 色碟 -->
      <van-tab name="sd" :title="Lang[Type].Toning">
        <van-image
          v-if="Type == 'cn'"
          width="100%"
          :src="require('../assets/images/help/cn_toning.jpg')"
        />
        <van-image
          v-else-if="Type == 'tw'"
          width="100%"
          :src="require('../assets/images/help/tw_toning.jpg')"
        />
        <template v-else>
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_toning_1.jpg')"
          />
          <van-image
            width="100%"
            :src="require('../assets/images/help/en_toning_2.jpg')"
          />
        </template>
      </van-tab>
      <!-- 轮盘 -->
      <van-tab name="lp" title="轮盘" v-if="false">
        <div style="padding-bottom: 50px"></div>
      </van-tab>
      <!-- 炸金花 -->
      <van-tab name="zjh" title="炸金花" v-if="false">
        <div style="padding-bottom: 50px"></div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex"
import { Tab, Tabs, NavBar } from "vant"
export default {
  name: "demoPage",
  components: { "van-tab": Tab, "van-tabs": Tabs, NavBar },
  data() {
    return {
      active: "tc"
    }
  },
  computed: {
    ...mapState({
      game_id: (state) => state.app.game_id,
      Lang: (state) => state.config.$lang,
      Type: (state) => state.config.$Type
    })
  },
  created() {
    this.active =
      this.game_id == 1
        ? "baccarat"
        : this.game_id == 2
        ? "lh"
        : this.game_id == 4
        ? "nn"
        : "tc"
  },
  methods: {
    back() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.help {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  .navbar {
    .icon {
      width: 24px;
      &:active {
        opacity: 0.6;
      }
      &.margin {
        margin: 0 20px;
      }
    }
  }
  .help-tabs {
    height: calc(100% - 46px);
    overflow: hidden;
    ::v-deep {
      .van-tabs__wrap {
        box-shadow: 0px 0px 4px 0.5px rgba(0, 0, 0, 0.1);
      }
      .van-tabs__content {
        height: calc(100% - 44px);
        overflow-y: auto;
        color: #555;
        font-size: 13px;
        padding: 15px;
      }
    }
    .title {
      padding-top: 20px;
      text-align: center;
      font-size: 16px;
    }
    .div {
      padding: 0 8px;
    }
    .strong {
      color: #ae7b2b;
    }
    p {
      padding: 4px 8px;
    }
    .img {
      width: 100%;
      height: auto;
      display: block;
    }
    .lable {
      font-weight: 600;
      text-align: center;
    }
    .icon-way {
      display: inline-block;
      width: 15px;
      height: 15px;
      vertical-align: middle;
    }
    .table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 20px;
      th,
      td {
        padding: 10px;
      }
    }
  }
}
</style>