HuiZhouGuJianZhu/src/views/Bag.vue

<template>
  <div
    class="bag"
  >
    <div class="left-wrap">
      <div
        v-for="(item, idx) in sceneList"
        :key="idx"
        class="scene"
        :class="gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? 'unlock' : 'lock'"
        :style="{
          width: `calc(${item.width} / 1080 * 100vh)`,
          height: `calc(${item.height} / 1080 * 100vh)`,
          top: `calc(${item.top} / 1080 * 100vh)`,
          left: `calc(${item.left} / 1080 * 100vh)`,
        }"
      >
        <img
          class=""
          :src="require(`@/assets/images/bg-${item.idxInConfig + 1}.jpg`)"
          alt=""
          draggable="false"
        >
        <div class="text-wrap">
          <span>{{ gameProgress.jagsawProgress[item.idxInConfig].name }} {{ gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? '（已完成）' : '(未完成)' }}</span>
          <div class="bottom-right">
            <img
              class="fraction"
              :src="require(`@/assets/images/jagsaw-shade-${gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? 'unlock' : 'lock'}.png`)"
              alt=""
              draggable="false"
            >
            &ensp;× {{ sceneTree[item.idxInConfig].children.reduce((a, b) => {
              return {
                jagsawNumber: a.jagsawNumber + b.jagsawNumber
              }
            }).jagsawNumber }}
          </div>
        </div>
      </div>
    </div>
    <div class="right-wrap">
      <img
        src="@/assets/images/title-game-rule.png"
        alt=""
        class="title"
      >
      <p>每完成一节课，即可获得一块碎片</p>
      <p>收集碎片完成拼图游戏，解锁章节图纸</p>
      <p>解锁所有章节图纸，建设古镇</p>
      <button class="build" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BagView',
  data() {
    return {
      sceneList: [
        {
          idxInConfig: 0,
          width: 586,
          height: 360,
          top: 50,
          left: 40,
        },
        {
          idxInConfig: 4,
          width: 324,
          height: 360,
          top: 50,
          left: 637,
        },
        {
          idxInConfig: 5,
          width: 467,
          height: 204,
          top: 420,
          left: 40,
        },
        {
          idxInConfig: 3,
          width: 234,
          height: 186,
          top: 634,
          left: 40,
        },
        {
          idxInConfig: 1,
          width: 223,
          height: 186,
          top: 634,
          left: 283,
        },
        {
          idxInConfig: 2,
          width: 444,
          height: 400,
          top: 420,
          left: 516,
        },

      ]
    }
  },
  computed: {
    ...mapState([
      'gameProgress',
    ]),
    sceneTree() {
      return config.sceneTree
    },
  },
  mounted() {
  },
  unmounted() {
  },
  methods: {
    ...mapMutations([
    ]),
  },
}
</script>

<style lang="less" scoped>
.bag {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/bg-game.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  >.left-wrap {
    position: relative;
    background-image: url(@/assets/images/bg-bag-page-frame.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 92.59vh;
    height: 80.56vh;
    padding: calc(50 / 1080 * 100vh) calc(40 / 1080 * 100vh);
    flex: 0 0 auto;
    >.scene {
      position: absolute;
      cursor: pointer;
      >img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      >.text-wrap {
        position: absolute;
        left: 0;
        background: rgba(255,255,255,0.7);
        bottom: 0;
        width: 100%;
        height: calc(40 / 1080 * 100vh);
        padding-left: calc(9 / 1080 * 100vh);
        padding-right: calc(9 / 1080 * 100vh);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: calc(16 / 1080 * 100vh);
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        >span {
        }
        >.bottom-right {
          display: flex;
          justify-content: center;
          align-items: center;
          >img.fraction {
          }
        }
      }
    }
    .scene.unlock {
      >.text-wrap {
        color: #30B07A;
      }
    }
    .scene.lock {
      >.text-wrap {
        color: #C26827;
      }
    }
  }
  >.right-wrap {
    width: 51.39vh;
    height: 100vh;
    counter-reset: game-rule;
    display: flex;
    flex-direction: column;
    justify-content: center;
    >img.title {
      width: calc(311 / 1080 * 100vh);
      height: calc(74 / 1080 * 100vh);
      margin-bottom: calc(60 / 1080 * 100vh);
    }
    >p {
      margin-bottom: 1em;
      font-size: calc(30 / 1080 * 100vh);
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #C26827;
      counter-increment: game-rule;
      &::before {
        display: inline-block;
        content: counter(game-rule) '.' ' ';
        white-space: pre;
      }
    }
    >button.build {
      margin-top: calc(60 / 1080 * 100vh);
      background-image: url(@/assets/images/btn-build-town.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      width: calc(323 / 1080 * 100vh);
      height: calc(120 / 1080 * 100vh);
      margin-left: auto;
      margin-right: auto;
    }
  }
}
</style>