<template>
  <div class="pattern-container">
      <view class="content">
          <image mode="aspectFill" class="bg-img" :src="staticImg.patternBg"/>
          <image mode="aspectFill" @click="jumpPage(0)"  class="step1" :src="staticImg.step1"/>
          <image mode="aspectFill" @click="jumpPage(1)"  class="step2" :src="staticImg.step2"/>
          <image mode="aspectFill" @click="jumpPage(2)"  class="step3" :src="staticImg.step3"/>
          <image mode="aspectFill" @click="jumpPage(3)"  class="step4" :src="staticImg.step4"/>
          <image mode="aspectFill" @click="jumpPage(4)"  class="step5" :src="staticImg.step5"/>
      </view>
  </div>
</template>

<script lang="ts" setup >

import { CardModeEnum, OpraModeEnum } from '@/enum/constant';
import { useStaticImg } from '@/hooks/index'

const staticImg = useStaticImg()

const jumpPage = (step: number) => {
    uni.navigateTo({
      url: `/pages/GameView/index?mode=${CardModeEnum.OPRA}&collectionId=1641627325030051841&opraMode=${OpraModeEnum.PRACTICE}`,
    });
}



</script>
<style scoped lang="less">
.pattern-container {
  width: 100vw;
  min-height: 100vh;
  background-size: 750rpx;
  position: relative;
  overflow: hidden;
  image {
      width: 178rpx;
      height: 186rpx;
      display: block;
  }
  .bg-img {
      width: 100%;
      height: 1834rpx;
  }
  .step1 {
      position: absolute;
      top: 274rpx;
      left: 100rpx;
  }
  .step2 {
      position: absolute;
      top: 464rpx;
      right: 72rpx;
  }
  .step3 {
      position: absolute;
      top: 644rpx;
      left: 194rpx;
  }
  .step4 {
      position: absolute;
      top: 859rpx;
      right: 63rpx;
  }

  .step5 {
      position: absolute;
      top: 1120rpx;
      right: 328rpx;
  }

  .practice {
      width: 160rpx;
      height: 84rpx;
      position: fixed;
      right: 0;
      top: 56rpx;
      z-index: 1;
  }

}


.content {
  position: relative;
}

</style>