HuiZhouGuJianZhu/src/views/BuildTown.vue

<template>
  <div
    class="build-town"
  >
    <div class="left">
      <div
        v-for="(item, idx) in sceneList"
        :key="idx"
        class="scene"
        :class="gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? 'unlock' : 'lock'"
        :style="{
          width: `calc(${item.width} / ${windowSizeWhenDesign} * ${unit})`,
          height: `calc(${item.height} / ${windowSizeWhenDesign} * ${unit})`,
          top: `calc(${item.top} / ${windowSizeWhenDesign} * ${unit})`,
          left: `calc(${item.left} / ${windowSizeWhenDesign} * ${unit})`,
        }"
        @click="$router.push({
          name: 'JagsawGame',
          query: {
            sceneL2Idx: item.idxInConfig,
          }
        })"
      >
        <img
          class=""
          :src="require(`@/assets/images/bg-${item.idxInConfig + 1}.jpg`)"
          alt=""
          draggable="false"
        >
        <div class="text-wrap">
          <span>{{ gameProgress.jagsawProgress[item.idxInConfig].name }}</span>
          <img
            v-if="!gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone"
            class="lock"
            src="@/assets/images/lock.png"
            alt=""
            draggable="false"
          >
        </div>
      </div>
      <img
        class="build-tip"
        src="@/assets/images/build-tip.png"
        alt=""
        draggable="false"
      >
    </div>
    <div class="right">
      <div class="bottom-wrap">
        <div
          v-for="(item, idx) in buildList"
          :key="idx"
          class="step"
        >
          <button
            :class="{
              done: gameProgress.buildProgress >= idx
            }"
            @click="recordBuildProgress(idx)"
          >
            <div>{{ item.name }}</div>
          </button>
          <div
            v-if="idx !== buildList.length - 1"
            class="line"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from 'vue'
import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'

export default {
  name: 'BuildTown',
  setup () {
    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
    return {
      windowSizeWhenDesign,
      unit
    }
  },
  data() {
    return {
      sceneList: [
        {
          idxInConfig: 0,
          width: 476,
          height: 294,
          top: 0,
          left: 0,
        },
        {
          idxInConfig: 4,
          width: 262,
          height: 294,
          top: 0,
          left: 484,
        },
        {
          idxInConfig: 5,
          width: 378,
          height: 166,
          top: 302,
          left: 0,
        },
        {
          idxInConfig: 3,
          width: 190,
          height: 152,
          top: 476,
          left: 0,
        },
        {
          idxInConfig: 1,
          width: 179,
          height: 152,
          top: 476,
          left: 199,
        },
        {
          idxInConfig: 2,
          width: 360,
          height: 326,
          top: 302,
          left: 386,
        },
      ],
      buildList: [
        {
          name: '建民居',
        },
        {
          name: '布祠堂',
        },
        {
          name: '立牌坊',
        },
        {
          name: '过程名',
        },
        {
          name: '过程名',
        },
        {
          name: '过程名',
        },
      ],
    }
  },
  computed: {
    ...mapState([
      'gameProgress',
    ]),
    sceneTree() {
      return config.sceneTree
    },
  },
  mounted() {
  },
  unmounted() {
  },
  methods: {
    ...mapMutations([
      'recordBuildProgress',
    ]),
  },
}
</script>

<style lang="less" scoped>
.build-town {
  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: center;
  align-items: center;
  padding-bottom: calc(50 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;
  >.left {
    position: relative;
    width: calc(746 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    height: calc(628 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    margin-right: calc(83 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    >.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(32 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
        padding-left: calc(10 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
        padding-right: calc(10 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
        display: flex;
        align-items: center;
        font-size: calc(16 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        >span {
          padding-top: 0.4em;
        }
        >img.lock {
          margin-left: 0.5em;
          width: calc(15 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
          height: calc(21 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
        }
      }
    }
    .scene.unlock {
      >.text-wrap {
        color: #30B07A;
      }
    }
    .scene.lock {
      >.text-wrap {
        color: #C26827;
      }
    }
    >img.build-tip {
      position: absolute;
      left: 50%;
      bottom: calc(-38 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
      transform: translate(-50%, 100%);
      width: calc(506 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
      height: calc(110 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    }
  }
  >.right {
    position: relative;
    width: calc(950 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    height: calc(628 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    background: red;
    background-image: url(@/assets/images/bg-jagsaw-game-page-frame.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    >div.bottom-wrap {
      position: absolute;
      left: 50%;
      bottom: calc(-70 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
      transform: translate(-50%, 100%);
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      >.step {
        display: flex;
        align-items: center;
        >button {
          width: calc(14 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
          height: calc(14 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
          border-radius: 50%;
          border: 2px solid #C26827;
          position: relative;
          >div {
            position: absolute;
            left: 50%;
            bottom: calc(-11 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
            transform: translate(-50%, 100%);
            font-size: calc(24 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;
            font-family: Source Han Sans CN-Bold, Source Han Sans CN;
            font-weight: bold;
            color: #C26827;
          }
          &.done {
            background-color: #30B07A;
            border: 2px solid #30B07A;
            >div {
              color: #30B07A;
            }
          }
        }
        >.line {
          display: inline-block;
          width: calc(120 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;;
          height: 1px;
          border-top: 1px dashed #C26827;
          margin: 0 calc(8 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;;
        }
      }
    }
  }
}
</style>