|
@@ -116,7 +116,14 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="shoes-use" v-else>
|
|
|
- <li class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer">
|
|
|
+ <li
|
|
|
+ class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer"
|
|
|
+ @click="
|
|
|
+ open(
|
|
|
+ 'http://static.ouj.com/video/bcc4eb41-7475-3296-845f-1ef35a2d01d8.mp4'
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class=" df ai-c">
|
|
|
<img
|
|
|
class="icon"
|
|
@@ -131,7 +138,7 @@
|
|
|
class="item df jc-sb ai-c pl16 pr16 pt16 pb16 pointer mt16"
|
|
|
v-for="item in gameLinks"
|
|
|
:key="item.image"
|
|
|
- @click="videoVisible = true"
|
|
|
+ @click="open(item.video)"
|
|
|
>
|
|
|
<div class=" df ai-c">
|
|
|
<img class="image" :src="item.image" :alt="item.alt" />
|
|
@@ -141,7 +148,7 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <VideoDialog v-model:visible="videoVisible" />
|
|
|
+ <VideoDialog v-model:visible="videoVisible" :url="cVideo" />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
@@ -157,60 +164,54 @@ export default defineComponent({
|
|
|
{
|
|
|
image:
|
|
|
"https://static.ouj.com/shoes/game/2f1f2a47a3954468bd780ef5e8717d09.jpg?x-oss-process=image/resize,w_240",
|
|
|
+ video:
|
|
|
+ "http://static.ouj.com/video/d84b945b-0bf4-3a17-8a37-2a9e77ed3a67.mp4",
|
|
|
alt: "跑酷",
|
|
|
title: "跑酷 操作教程"
|
|
|
},
|
|
|
{
|
|
|
image:
|
|
|
"https://static.ouj.com/shoes/game/972a3abdaf064763b82b78f8840fbb81.jpg?x-oss-process=image/resize,w_240",
|
|
|
+ video:
|
|
|
+ "http://static.ouj.com/video/8b0c5908-254f-3179-b274-5077e4855190.mp4",
|
|
|
alt: "跳舞",
|
|
|
title: "跳舞 操作教程"
|
|
|
},
|
|
|
{
|
|
|
image:
|
|
|
- "http://static.ouj.com/shoes/test/game/045b95e16c6c451db2fc641e85433d40.png?x-oss-process=image/resize,w_240",
|
|
|
- alt: "三轮车",
|
|
|
- title: "三轮车 操作教程"
|
|
|
- },
|
|
|
- {
|
|
|
- image:
|
|
|
"https://static.ouj.com/shoes/game/a597ea4e7f3744b0ac7f41d23933f65b.jpg?x-oss-process=image/resize,w_240",
|
|
|
+ video:
|
|
|
+ "http://static.ouj.com/video/b45d2fab-6829-3615-9a21-b62aa474084d.mp4",
|
|
|
alt: "硬币奔跑",
|
|
|
title: "硬币奔跑 操作教程"
|
|
|
},
|
|
|
{
|
|
|
image:
|
|
|
"https://static.ouj.com/shoes/game/524449d2533f4ddf85eba2f7750ae8c0.jpg?x-oss-process=image/resize,w_240",
|
|
|
+ video:
|
|
|
+ "http://static.ouj.com/video/04d3c34a-7c29-34de-8e6f-fc33e7268274.mp4",
|
|
|
alt: "功夫小羊",
|
|
|
title: "功夫小羊 操作教程"
|
|
|
},
|
|
|
{
|
|
|
image:
|
|
|
"https://static.ouj.com/shoes/game/6e73083316d745c6af62970cfd5a4458.png?x-oss-process=image/resize,w_240",
|
|
|
+ video:
|
|
|
+ "http://static.ouj.com/video/f4991d52-238b-38c6-99da-6851bbb01368.mp4",
|
|
|
alt: "剪刀石头布",
|
|
|
title: "剪刀石头布 操作教程"
|
|
|
},
|
|
|
{
|
|
|
image:
|
|
|
"https://static.ouj.com/shoes/game/5279be54588a498785cc628ab1e3732e.jpg?x-oss-process=image/resize,w_240",
|
|
|
+ video:
|
|
|
+ "http://static.ouj.com/video/95c523ad-8315-3155-8d5e-e8e24d3fafe1.mp4",
|
|
|
alt: "踢馆大师",
|
|
|
title: "踢馆大师 操作教程"
|
|
|
- },
|
|
|
- {
|
|
|
- image:
|
|
|
- "https://static.ouj.com/shoes/game/25f7f7f3388e4ca185aa8f784b066ca6.jpg?x-oss-process=image/resize,w_240",
|
|
|
- alt: "切蛋糕",
|
|
|
- title: "切蛋糕 操作教程"
|
|
|
- },
|
|
|
- {
|
|
|
- image:
|
|
|
- "https://static.ouj.com/shoes/game/d6d373a83be748109a2bc22d4687b191.jpg?x-oss-process=image/resize,w_240",
|
|
|
- alt: "盖房子",
|
|
|
- title: "盖房子 操作教程"
|
|
|
}
|
|
|
]);
|
|
|
const videoVisible = ref(false);
|
|
|
-
|
|
|
+ const cVideo = ref("");
|
|
|
const $_change = (index: number) => {
|
|
|
active.value = index;
|
|
|
};
|
|
@@ -219,12 +220,19 @@ export default defineComponent({
|
|
|
router.push(path);
|
|
|
};
|
|
|
|
|
|
+ const $_open = (url: string) => {
|
|
|
+ cVideo.value = url;
|
|
|
+ videoVisible.value = true;
|
|
|
+ };
|
|
|
+
|
|
|
return {
|
|
|
active,
|
|
|
change: $_change,
|
|
|
gameLinks,
|
|
|
navigate: $_navigate,
|
|
|
- videoVisible
|
|
|
+ videoVisible,
|
|
|
+ cVideo,
|
|
|
+ open: $_open
|
|
|
};
|
|
|
}
|
|
|
});
|