website/src/view/m_views/index/index.vue

<template>
    <div id="index">
        <!-- 顶部搜索栏 -->
        <div class="top_nav df aic jcsb">
            <div class="left_title df aic">
                <img v-if="VITEPLA === 'QingQue'" src="http://gm.nkfzs.com/favicon.ico" />
                <span v-if="VITEPLA === 'QingQue'">朱雀游戏中心</span>
                <span v-else>游戏中心</span>
            </div>
            <van-search shape='round' @click="router.push({ path: 'm_search' })" />
        </div>

        <div class="df aic jcc" style="color: #ed8c0f;margin: 10px auto; font-size: 14px;">客服qq：386501046</div>

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
            <van-swipe-item v-for="item in listSwiper" :key="item.game_id" class="psr">
                <img :src="prefix + item.screenshot">
                <div class="game_card psa df fdc aic">
                    <img :src="prefix + item.logopic">
                    <p class="title elli">{{ item.screen_name }}</p>
                    <van-button :disabled="item.download_url === '' ? true : false" round color="#ed8c0f"
                        @click="downGame(item.download_url)">下载</van-button>
                </div>
            </van-swipe-item>
        </van-swipe>



        <!-- 菜单栏 -->
        <div class="menu_cate df aic jcsa">
            <div v-for="(item, index) in cateList" :key="index" class="cate_card df fdc aic jcc"
                @click="toPath(item.pathUrl)">
                <van-icon :name="item.icon" size="20" class="icon"></van-icon>
                <span class="title">{{ item.title }}</span>
            </div>
        </div>

        <!-- 游戏列表 -->
        <div class="games">
            <h3>热门游戏</h3>
            <MobList :gameLis="list" :prefix="prefix"></MobList>
            <h3 style="margin-top: 30px;">推荐游戏</h3>
            <MobList :gameLis="listRecommand" :prefix="prefix"></MobList>
        </div>

    </div>
    <van-back-top style="background-color: #ed8c0f;" />
    <!-- <m_footer></m_footer> -->
</template>

<script setup lang="ts">
import { getIndexGameHot, getIndexGameRecommand } from '@/api/index';
import MobList from '@/components/MobList.vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import Message from '@/utils/Message'

const router = useRouter()
const list: any = ref([])
const listRecommand: any = ref([])
const listSwiper: any = ref([])
const prefix = ref<string>('')
const VITEPLA:'QingQue'|'KuPai' = import.meta.env.VITE_LOGO_VISIBLE

interface ICate {
    title: string,
    icon: string,
    pathUrl: string
}
const cateList = ref<Array<ICate>>([
    // { title: '排行', icon: 'medal-o', pathUrl: 'm_rank' },
    { title: '分类', icon: 'description', pathUrl: 'm_categroy' },
    { title: '我的游戏', icon: 'user-o', pathUrl: 'm_mine' }
])

onMounted(async () => {
    // 热门游戏
    await getIndexGameHot().then(res => {
        if (res.data.code === 200 && res.data.data) {
            list.value = res.data.data.lists
            prefix.value = res.data.data.prefix
        }
    }).catch(err => {
        Message.error(err.data)
    })

    // 推荐游戏
    await getIndexGameRecommand().then(res => {
        if (res.data.code === 200 && res.data.data) {
            listRecommand.value = res.data.data.lists
            prefix.value = res.data.data.prefix
        }
    }).catch(err => {
        Message.error(err.data)
    })

    // 轮播图数据
    await getIndexGameHot().then(res => {
        // console.log(res);
        if (res.data.code === 200 && res.data.data) {
            prefix.value = res.data.data.prefix
            listSwiper.value = res.data.data.lists.splice(0, 5)
            // console.log('listSwiper.value', listSwiper.value);
        }
    }).catch(err => {
        Message.error(err.data)
    })
})

const toPath = (url: string) => {
    router.push({ path: url })
}

const downGame = (url: string) => {
    // 下载游戏
    window.open(url)
    // window.location.href = url;
}
</script>

<style lang="scss" scoped>
#index {
    box-sizing: border-box;
    padding: 15px;
    // background: radial-gradient(circle at 0 -10%,#dcf4f7,rgba(220,244,247,0) 50%),radial-gradient(circle at 100% 10%,#e8ebfc,rgba(232,235,252,0) 50%);
    background: radial-gradient(circle at 0 -20%, #ed8c0f, rgba(255, 255, 255, .6) 25%), radial-gradient(circle at 100% 10%, #eabf85, rgba(255, 255, 255, .6) 50%);

    .top_nav {
        margin-bottom: 10px;

        .left_title {
            font-size: 22px;
        }
    }

    .game_card {
        bottom: 10px;
        right: 10px;
        width: 80px;
        box-sizing: border-box;

        img {
            width: 35px;
            height: 35px;
            border-radius: 10px;
        }

        .title {
            font-size: 12px;
            color: #323332;
            line-height: 14px;
            margin: 5px 0;
            width: 95%;
        }

        .van-button {
            width: 60px;
            height: 25px;
            font-size: 12px;
        }
    }

    .menu_cate {
        margin-top: 10px;

        .cate_card {
            height: 80px;

            .icon {
                margin-bottom: 10px;
            }

            .title {
                font-size: 16px;
            }
        }
    }

    .games {
        margin-top: 10px;
        box-sizing: border-box;

        h3 {
            font-size: 20px;
            font-weight: normal;
            margin-bottom: 8px;
        }
    }
}

:deep(.van-search) {
    width: 50%;
    background-color: transparent;
    border-color: #b1d5ec;
}

.my-swipe {
    border-radius: 20px;
}

.van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: rgba(237, 140, 15, .3);
    width: 100%;
    height: 180px;

    img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        // background-size: cover;
        // background-position: center;
        // background-repeat: no-repeat;
    }
}
</style>