|
@@ -19,10 +19,10 @@
|
|
|
<div class="back-icon" >
|
|
|
<img :src="staticImg.backIcon" alt="" @click="backAppPage" >
|
|
|
</div>
|
|
|
- <div class="opra-container" >
|
|
|
- <div id="rive-ani" >
|
|
|
- <canvas width="200" height="200" id="rive-canvas" style="scale: 1;" ></canvas>
|
|
|
+ <div id="rive-ani" >
|
|
|
+ <canvas width="200" height="200" id="rive-canvas"></canvas>
|
|
|
</div>
|
|
|
+ <div class="opra-container" >
|
|
|
<div class="countdown-container" >
|
|
|
<div class="countdown" >{{countDown}}s</div>
|
|
|
<div class="desc" >即将进入下一个环节</div>
|
|
@@ -43,6 +43,7 @@ import { useDeviceDire, useScheduler, useSchedulerOnce } from '@/hook/index'
|
|
|
import { onMounted } from 'vue';
|
|
|
import { useRoute } from "vue-router"
|
|
|
import { Rive } from "@rive-app/canvas"
|
|
|
+// console.log(HOOK.);
|
|
|
|
|
|
const staticImg = {
|
|
|
backIcon: require('@LP/assets/back-icon.png'),
|
|
@@ -90,7 +91,6 @@ console.log(document.getElementById('rive-canvas'));
|
|
|
|
|
|
const canvas = document.getElementById('rive-canvas')
|
|
|
|
|
|
-
|
|
|
const a = new Rive({
|
|
|
src: "https://res-game.luojigou.vip/qiqiu3.riv",
|
|
|
canvas: canvas,
|
|
@@ -98,8 +98,6 @@ const a = new Rive({
|
|
|
// stateMachines: "bumpy",
|
|
|
artboard:'reqiqiu-dog',
|
|
|
onLoad: () => {
|
|
|
- console.log(a);
|
|
|
-
|
|
|
a.play('idle')
|
|
|
a.resizeToCanvas()
|
|
|
},
|
|
@@ -199,8 +197,7 @@ onMounted(() => {
|
|
|
|
|
|
#rive-ani {
|
|
|
width: 100vw;
|
|
|
- // height: 300px;
|
|
|
- position: absolute;
|
|
|
+ position: fixed;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
top: 2%;
|
|
@@ -247,11 +244,7 @@ onMounted(() => {
|
|
|
position: absolute;
|
|
|
height: 1px;
|
|
|
width: 100%;
|
|
|
-
|
|
|
- }
|
|
|
- #rive-ani {
|
|
|
- position: absolute;
|
|
|
- top: -200px;
|
|
|
+ scale: 0.7;
|
|
|
}
|
|
|
.countdown-container {
|
|
|
position: absolute;
|