fix: 新模式

src/components/luojigou-board-v2/luojigou-board-v2.vue

@@ -0,0 +1,155 @@
+<template>
+  <view class="luojigou-board-v2" >
+    <view class="process" >
+      <span>{{process + 1}}</span>/6
+    </view>
+    <view class="board" >
+      <view class="button-list" >
+        <view class="button" v-for="(item, index) in buttonListCpd" :key="item" >
+          <image class="icon" :src="staticImg[item]" alt="" />
+          <image v-if="index < process" class="right-icon" :src="staticImg.rightIcon" alt="" />
+        </view>
+      </view>
+      <view :class="['question-card', aniState ? 'question-card-small' : 'question-card-ani']" >
+        <!-- <image :src="staticImg.green" alt="" /> -->
+      </view>
+    </view>
+    <view class="answer" >
+      <view class="answer-list" >
+        <view class="answer-item" > 
+
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts" >
+import { useStaticImg, useSchedulerOnce } from '@/hooks'
+import { computed, onMounted, ref } from 'vue';
+
+interface IProps {
+  process: number
+} 
+
+const staticImg = useStaticImg()
+
+const aniState = ref<boolean>(false)
+
+const buttonList = ['red', 'green', 'blue', 'orange', 'purple', 'yellow']
+
+const buttonListCpd = computed(() => buttonList.slice(0, props.process + 1)) 
+
+const props = defineProps<IProps>()
+
+useSchedulerOnce(() => {
+  aniState.value = true
+}, 1900)
+
+
+// 卡片展示的1s动画
+onMounted(() => {
+
+})
+
+
+</script>
+
+
+<style lang="less" scoped >
+.luojigou-board-v2 {
+  position: relative;
+  .process {
+    width: 32rpx;
+    height: 65rpx;
+    background: #FFC047;
+    position: absolute;
+    top: 61rpx;
+    left: -5rpx;
+    font-size: 10rpx;
+    font-family: PingFang SC-Semibold, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    white-space: normal;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top-left-radius: 14rpx;
+    border-bottom-left-radius: 14rpx;
+    span {
+      font-size: 16rpx;
+      font-weight: 600;
+    }
+  }
+  .board {
+    width: 354rpx;
+    height: 354rpx;
+    background: url('@/assets/GameViewV2/board.png') no-repeat top right;
+    .button-list {
+      position: absolute;
+      top: 24rpx;
+      right: 12rpx;
+      .button {
+        width: 36rpx;
+        height: 36rpx;
+        margin-bottom: 11rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        .icon {
+          width: 100%;
+          height: 100%;
+          display: block;
+        }
+        .right-icon {
+          width: 20rpx;
+          height: 20rpx;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+    .question-card {
+      width: 254rpx;
+      height: 284rpx;
+      background-color: #fff;
+      border-radius: 20rpx;
+      position: absolute;
+      top: 12rpx;
+      left: 41rpx;
+      transform-origin: 100% 0%;
+      image {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+
+    .question-card-ani {
+      animation: card-ani 1s ease 1s;  
+    }
+
+    .question-card-small {
+      scale: 20%;
+    }
+  }
+  .answer {
+    .answer-list {
+      
+    }
+  }
+}
+
+
+@keyframes card-ani {
+  0% {
+    scale: 100%;
+  };
+  100% {
+    scale: 20%;
+  }
+}
+</style>

src/pages.json

@@ -19,6 +19,13 @@
 				"disableScroll": true
 			}
 		},
+		{
+			"path": "pages/GameViewV2/index",
+			"style": {
+				"navigationStyle": "custom",
+				"disableScroll": true
+			}
+		},
 		{
 			"path": "pages/Practice/report",
 			"style": {

src/pages/GameViewV2/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <view class="game-view-v2" >
+    <image @click="backPage" class="back-icon" :src="staticImg.backIcon" />
+    <view class="rockon-by-time" >
+      {{rockonByTimeRef}}s
+    </view>
+    <view class="luojigou-board-v2-container" >
+      <luojigou-board-v2 :process="0" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useScheduler, useStaticImg } from '@/hooks'
+import { useAppBridge } from '@/hooks/app'
+import { onMounted } from 'vue';
+
+const staticImg = useStaticImg()
+
+// 计时
+const rockonByTimeRef = ref(0)
+
+// 答题进度
+const questionProcess = ref(0)
+
+const appBridge = useAppBridge()
+
+const stx = useScheduler(() => {
+  rockonByTimeRef.value++
+}, 1000)
+
+const backPage = () => {
+  appBridge.back()
+}
+
+const readQuestion = () => {
+
+}
+
+const tip = () => {
+
+}
+
+onMounted(() => {
+  stx.start()
+})
+
+</script>
+
+<style scoped lang="less" >
+.game-view-v2 {
+  width: 100vw;
+  height: 100vh;
+  background: url('@/assets/GameViewV2/bg.png');
+  position: relative;
+  .back-icon {
+    position: absolute;
+    width: 45rpx;
+    height: 45rpx;
+    top: 16rpx;
+    left: 32rpx;
+  }
+  .rockon-by-time {
+    padding: 0 10rpx;
+    height: 24rpx;
+    background: rgba(0,0,0,0.26);
+    box-shadow: inset 0px 1px 1px 0px rgba(162,76,0,0.1);
+    border-radius: 20px;
+    position: absolute;
+    top: 34rpx;
+    right: 24rpx;
+    font-size: 14rpx;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .luojigou-board-v2-container {
+    position: absolute;
+    top: 21rpx;
+    left: 140rpx;
+  }
+}
+
+</style>

src/utils/static.ts

@@ -28,6 +28,8 @@ import magnifierOpen from '@/assets/magnifier-open.png'
 import intro from '@/assets/intro.gif'
 import phone from '@/assets/phone.png'
 import rotateArrow from '@/assets/rotateArrow.png'
+import backIcon from '@/assets/GameViewV2/back.png'
+import rightIcon from '@/assets/GameViewV2/right.png'
 
 export interface StaticImg {
   logo: string
@@ -62,7 +64,9 @@ export interface StaticImg {
   magnifierOpen: string
   intro: string
   phone: string
-  rotateArrow: string
+  rotateArrow: string,
+  backIcon: string
+  rightIcon: string
 }
 
 let staticImg: Partial<StaticImg> = {
@@ -100,6 +104,8 @@ let staticImg: Partial<StaticImg> = {
   intro,
   phone,
   rotateArrow,
+  backIcon,
+  rightIcon
 }