i

src/pages/game/gamedetail/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+    navigationBarTitleText: "游戏详情",
+    navigationStyle: "custom",
+});

src/pages/game/gamedetail/index.vue

@@ -0,0 +1,117 @@
+<template>
+    <view>
+        <view class="head-wrapper" :style="'top:' + statusHeight + 'px'">
+            <view class="head-menu">
+                <Left class="iconfont" @click="returns" />
+                <Home class="iconfont" @click="goHome" />
+            </view>
+        </view>
+        <!-- <swiper class="swiper" :autoplay="true" :circular="true">
+            <swiper-item v-for="(item, index) in swiperList" :key="index">
+                <image style="width: 100%" :src="item"></image>
+            </swiper-item>
+        </swiper> -->
+        <view class="box">
+            <view class="line"></view>
+            <view class="game-title"></view>
+            <view class="game-title"></view>
+            <view class="game-title"></view>
+            <view class="game-btn" @click="toGame()">开始游戏</view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+    useLoad,
+    getSystemInfoSync,
+    navigateBack,
+    switchTab,
+    navigateTo,
+} from "@tarojs/taro";
+import { Left, Home } from "@nutui/icons-vue-taro";
+var statusBarHeight = (getSystemInfoSync().statusBarHeight as number) - 7;
+
+const statusHeight = ref<number>(statusBarHeight);
+
+const swiperList = ref([]);
+
+useLoad(() => {});
+
+const returns = () => {
+    navigateBack();
+};
+
+const goHome = () => {
+    switchTab({
+        url: "/pages/index/index",
+    });
+};
+
+const toGame = () => {
+    navigateTo({
+        url: "/pages/game/gamehome/index",
+    });
+};
+</script>
+
+<style lang="scss">
+.head-wrapper {
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    position: fixed;
+    left: 30px;
+    top: 0;
+    height: 100px;
+}
+.head-menu {
+    display: flex;
+    align-items: center;
+    height: 54px;
+    width: 140px;
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 27px;
+    .iconfont {
+        flex: 1;
+        text-align: center;
+        color: #fff;
+        box-sizing: border-box;
+        &.icon-xiangzuo {
+            border-right: 1px solid #fff;
+        }
+    }
+}
+
+.box {
+    width: 100%;
+    height: 90vh;
+    background-color: #fff;
+    z-index: 1;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    box-sizing: border-box;
+    position: absolute;
+    padding: 20px;
+    top: 400px;
+
+    .line {
+        width: 90px;
+        height: 10px;
+        border-radius: 4px;
+        background-color: rgba(202, 202, 202, 1);
+        margin: auto;
+    }
+    .game-btn {
+        width: 300px;
+        height: 75px;
+        margin: 50px auto;
+        color: #fff;
+        background-color: rgba(85, 77, 132, 1);
+        border-radius: 50px;
+        text-align: center;
+        line-height: 75px;
+    }
+}
+</style>

src/pages/game/gamehome/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: "活动游戏",
+});

src/pages/game/gamehome/index.vue

@@ -0,0 +1,67 @@
+<template>
+    <view>
+        <view
+            v-for="item in listVal"
+            :key="item.id"
+            class="list-box"
+            :class="{ listBoxAnim: item.status }"
+            @click="toDetails(item.id)"
+        >
+            <view>摇骰子</view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useLoad, navigateTo } from "@tarojs/taro";
+
+const listVal = ref<any>([]);
+
+useLoad(() => {
+    getList();
+});
+
+const getList = () => {
+    for (let i = 0; i < 1; i++) {
+        setTimeout(() => {
+            listVal.value.push({
+                id: i,
+                status: true,
+            });
+        }, 50 * i);
+    }
+};
+
+const toDetails = (id: string) => {
+    navigateTo({
+        url: "/pages/game/gamedetail/index?id=" + id,
+    });
+};
+</script>
+
+<style lang="scss">
+.list-box {
+    background-color: #fff;
+    border-radius: 15rpx;
+    width: 630rpx;
+    height: 200rpx;
+    margin: 20rpx auto;
+    padding: 30rpx;
+    font-size: 45rpx;
+}
+
+.listBoxAnim {
+    animation: 0.5s leftAnim;
+}
+
+@keyframes leftAnim {
+    from {
+        transform: translateX(110%);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+</style>