新增客服qq

src/components/MobileCom.vue

@@ -1,96 +1,99 @@
-<template>
-    <div class="common df aic">
-        <div class="left_title df jcsb aic">
-            <h1 class="df aic" @click="router.push({ path: 'm_index' })">
-                <img src="http://gm.nkfzs.com/favicon.ico" />
-                <span>朱雀游戏中心</span>
-            </h1>
-            <p><van-icon name="search" size="26" @click="router.push({
-                path
-                    : 'm_search'
-            })" /></p>
-        </div>
-        <div class="right_menu df aic jcc psr">
-            <van-icon name="bars" size="26" />
-            <!-- <van-icon name="apps-o" size="26" /> -->
-            <van-dropdown-menu class="psa" style="left: 30px;">
-                <van-dropdown-item ref="item">
-                    <van-cell class="menu_title" v-for="item in menuPath" :key="item" :title="item.text"
-                        @click="toPath(item.url)"></van-cell>
-                    <van-cell v-if="hasToken" title="退出登录" @click="logOut"></van-cell>
-                </van-dropdown-item>
-            </van-dropdown-menu>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-const router = useRouter()
-const hasToken = ref(localStorage.getItem('token'))
-const item:any = ref(null)
-
-const menuPath: any = ref([
-    { text: '首页', value: 1, url: 'm_index' },
-    // { text: '排行', value: 2, url: 'm_rank' },
-    { text: '分类', value: 3, url: 'm_categroy' },
-    { text: '我的游戏', value: 4, url: 'm_mine' },
-])
-
-const toPath = (url: any) => {
-    router.push({ path: url })
-    item.value.toggle()
-}
-const logOut = () => {
-    localStorage.removeItem('token')
-    router.push({ path: 'm_login' })
-}
-</script>
-
-<style lang="scss" scoped>
-.common {
-    box-sizing: border-box;
-    height: 70px;
-    min-height: 50px;
-    background-color: #fff;
-    padding: 0 15px;
-    border-bottom: 1px solid transparent;
-
-    .left_title {
-        box-sizing: border-box;
-        width: 80%;
-        padding-right: 15px;
-        border-right: 1px dashed #999;
-
-        h1 {
-            font-size: 20px;
-            font-weight: normal;
-        }
-    }
-
-    .right_menu {
-        // padding: 0 20px;
-        padding-left: 25px;
-
-        .menu_title {
-            color: #666;
-            font-size: 16px;
-        }
-    }
-}
-
-:deep(.van-dropdown-menu__bar) {
-    box-shadow: none;
-    background-color: #fff;
-    opacity: -1;
-    width: 0;
-}
-
-@media screen and (max-width: 767px) {
-    .common {
-        border-bottom: 1px solid rgba(0, 0, 0, .1);
-    }
-}
+<template>
+    <div class="common df aic">
+        <div class="left_title df jcsb aic psr">
+            <h1 class="df aic" @click="router.push({ path: 'm_index' })">
+                <img src="http://gm.nkfzs.com/favicon.ico" />
+                <span>朱雀游戏中心</span>
+            </h1>
+            <p><van-icon name="search" size="26" @click="router.push({
+                path
+                    : 'm_search'
+            })" /></p>
+
+            <div class="psa" style="bottom: 0;left: 0; z-index: 999;color: #ed8c0f;">客服qq：2881771586</div>
+        </div>
+        <div class="right_menu df aic jcc psr">
+            <van-icon name="bars" size="26" />
+            <!-- <van-icon name="apps-o" size="26" /> -->
+            <van-dropdown-menu class="psa" style="left: 30px;">
+                <van-dropdown-item ref="item">
+                    <van-cell class="menu_title" v-for="item in menuPath" :key="item" :title="item.text"
+                        @click="toPath(item.url)"></van-cell>
+                    <van-cell v-if="hasToken" title="退出登录" @click="logOut"></van-cell>
+                </van-dropdown-item>
+            </van-dropdown-menu>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+const hasToken = ref(localStorage.getItem('token'))
+const item:any = ref(null)
+
+const menuPath: any = ref([
+    { text: '首页', value: 1, url: 'm_index' },
+    // { text: '排行', value: 2, url: 'm_rank' },
+    { text: '分类', value: 3, url: 'm_categroy' },
+    { text: '我的游戏', value: 4, url: 'm_mine' },
+])
+
+const toPath = (url: any) => {
+    router.push({ path: url })
+    item.value.toggle()
+}
+const logOut = () => {
+    localStorage.removeItem('token')
+    router.push({ path: 'm_login' })
+}
+</script>
+
+<style lang="scss" scoped>
+.common {
+    box-sizing: border-box;
+    height: 70px;
+    min-height: 50px;
+    background-color: #fff;
+    padding: 0 15px;
+    border-bottom: 1px solid transparent;
+
+    .left_title {
+        box-sizing: border-box;
+        width: 80%;
+        height: 100%;
+        padding-right: 15px;
+        border-right: 1px dashed #999;
+
+        h1 {
+            font-size: 20px;
+            font-weight: normal;
+        }
+    }
+
+    .right_menu {
+        // padding: 0 20px;
+        padding-left: 25px;
+
+        .menu_title {
+            color: #666;
+            font-size: 16px;
+        }
+    }
+}
+
+:deep(.van-dropdown-menu__bar) {
+    box-shadow: none;
+    background-color: #fff;
+    opacity: -1;
+    width: 0;
+}
+
+@media screen and (max-width: 767px) {
+    .common {
+        border-bottom: 1px solid rgba(0, 0, 0, .1);
+    }
+}
 </style>

src/layout/Layout.vue

@@ -1,54 +1,54 @@
-<template>
-    <div class="gameIndex df fdc psr">
-        <!-- 头部 -->
-        <header-vue class="header psf"></header-vue>
-        <!-- 内容 -->
-        <section-vue class="main"></section-vue>
-        <!-- 尾部 -->
-        <!-- <footer-vue class="footer"></footer-vue> -->
-        <el-backtop :bottom="100">
-            <div class="df aic jcc" style="
-        height: 100%;
-        width: 100%;
-        background-color: var(--el-bg-color-overlay);
-        box-shadow: var(--el-box-shadow-lighter);
-        color: #ed8c0f;
-        border-radius: 50%;
-      ">
-                <!-- <el-icon><Top /></el-icon> -->
-                UP
-            </div>
-        </el-backtop>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { Top } from '@element-plus/icons-vue';
-import footerVue from './footer.vue';
-import headerVue from './header.vue';
-import sectionVue from './section.vue';
-
-</script>
-
-<style scoped lang="scss">
-.gameIndex {
-    background-color: #f7f7f7;
-
-    .header {
-        width: 100%;
-        height: 80px;
-        top: 0;
-        left: 0;
-        background-color: #fff;
-    }
-
-    .main {
-        margin-top: 80px;
-    }
-
-    .footer {
-        height: 100px;
-        background-color: #e7e7e7;
-    }
-}
+<template>
+    <div class="gameIndex df fdc psr">
+        <!-- 头部 -->
+        <header-vue class="header psf"></header-vue>
+        <!-- 内容 -->
+        <section-vue class="main"></section-vue>
+        <!-- 尾部 -->
+        <!-- <footer-vue class="footer"></footer-vue> -->
+        <el-backtop :bottom="100">
+            <div class="df aic jcc" style="
+        height: 100%;
+        width: 100%;
+        background-color: var(--el-bg-color-overlay);
+        box-shadow: var(--el-box-shadow-lighter);
+        color: #ed8c0f;
+        border-radius: 50%;
+      ">
+                <!-- <el-icon><Top /></el-icon> -->
+                UP
+            </div>
+        </el-backtop>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Top } from '@element-plus/icons-vue';
+import footerVue from './footer.vue';
+import headerVue from './header.vue';
+import sectionVue from './section.vue';
+
+</script>
+
+<style scoped lang="scss">
+.gameIndex {
+    background-color: #f7f7f7;
+
+    .header {
+        width: 100%;
+        height: 80px;
+        top: 0;
+        left: 0;
+        background-color: #fff;
+    }
+
+    .main {
+        margin-top: 120px;
+    }
+
+    .footer {
+        height: 100px;
+        background-color: #e7e7e7;
+    }
+}
 </style>

src/layout/header.vue

@@ -33,6 +33,7 @@
         </el-dropdown>
       </router-link>
     </nav>
+    <div class="w1000 df aic jcc" style="margin-top: 8px;padding: 10px 0; background-color: #fff;font-size: 16px;color: #ed8c0f;">客服qq：2881771586</div>
   </div>
 </template>
 
@@ -174,9 +175,9 @@ watch(currentIndex, (iold, inew) => { }, { deep: true, immediate: true })
 <style scoped lang="scss">
 .header_nav{
   margin: auto;
+  height: 100%;
 }
 nav {
-  height: 100%;
 
   .game_logo {
     height: 100%;

src/view/m_views/index/index.vue

@@ -1,215 +1,219 @@
-<template>
-    <div id="index">
-        <!-- 顶部搜索栏 -->
-        <div class="top_nav df aic jcsb">
-            <div class="left_title df aic">
-                <img src="http://gm.nkfzs.com/favicon.ico" />
-                <span>朱雀游戏中心</span>
-            </div>
-            <van-search shape='round' @click="router.push({ path: 'm_search' })" />
-        </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>('')
-
-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;
-    }
-}
+<template>
+    <div id="index">
+        <!-- 顶部搜索栏 -->
+        <div class="top_nav df aic jcsb">
+            <div class="left_title df aic">
+                <img src="http://gm.nkfzs.com/favicon.ico" />
+                <span>朱雀游戏中心</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：2881771586</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>('')
+
+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>

src/view/p_views/categroy/index.vue

@@ -1,203 +1,203 @@
-<template>
-    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
-    <div v-else class="w1000 category">
-        <div class="header_list">
-            <div class="top_type">
-                <div class="type df aic">
-                    <div class="left_title">类型</div>
-                    <div class="right_type f1 df fw">
-                        <span v-for="item in typeArr" :key="item.id" class="cont"
-                            :class="{ active: typeIndex === item.id }" @click="selectType('type', item.id)">
-                            {{ item.name }}
-                        </span>
-                    </div>
-                </div>
-                <div class="size df aic">
-                    <div class="left_title">标签</div>
-                    <div class="right_type f1 df fw">
-                        <span v-for="item in tagArr" :key="item.id" class="cont"
-                            :class="{ active: tag_idIndex === item.id }" @click="selectType('tag_id', item.id)">
-                            {{ item.name }}
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <!-- 按最xxx排序 -->
-            <!-- <el-button :plain="true" round v-for="(item, index) in categoryList" :key="index"
-                @click="selectType('order', index)">
-                <span :class="{ active: orderIndex === index }">{{ item.title }}</span>
-            </el-button> -->
-        </div>
-        <!-- 游戏列表 -->
-        <div v-if="(gameLis.length > 0)">
-            <RankList :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr" />
-            <div class="more df aic jcc" v-if="params.page * params.pagesize <= gameLis.length">
-                <el-button class="df aic jcc" @click="loadMore">更多</el-button>
-            </div>
-            <div v-else>
-                <div class="df aic jcc" style="color: #999;height: 200px;font-size: 18px;">----- 没有更多数据了 -----</div>
-            </div>
-        </div>
-        <el-empty v-else></el-empty>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import { getGameType, getGameTag, getGameList } from '@/api/index'
-import RankList from '@/components/RankList.vue';
-import Message from '@/utils/Message'
-
-const typeIndex = ref<number>(0)
-const tag_idIndex = ref<number>(0)
-const gameLis: any = ref([])
-const typeArr: any = ref([])
-const tagArr: any = ref([])
-const prefix = ref<string>('')
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-const total = ref<number>(0)
-interface Params {
-    type: number,
-    tag_id: number,
-    page: number,
-    pagesize: number
-}
-const params = reactive<Params>({
-    type: 0,
-    tag_id: 0,
-    page: 1,
-    pagesize: 15
-})
-
-onMounted(async () => {
-    await getGameType().then(res => {
-        // console.log('类型', res);
-        typeArr.value = res.data.data
-        typeArr.value.unshift({ id: 0, name: '全部' })
-    })
-    await getGameTag().then(res => {
-        // console.log('标签', res);
-        tagArr.value = res.data.data
-        tagArr.value.unshift({ id: 0, name: '全部' })
-    })
-    getGameLists(params)
-})
-
-// 初始化列表数据
-const getGameLists = async (params) => {
-    // console.log('参数', params);
-
-    await getGameList(params).then(res => {
-        // console.log('数据', res);
-        if (res.data.code === 200 && res.data.data) {
-            gameLis.value = gameLis.value.concat(res.data.data.lists)
-            total.value = res.data.data.total
-            prefix.value = res.data.data.prefix
-            isLoading.value = false
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
-}
-
-// 点击类型、标签、排序
-const selectType = (type: any, index: any) => {
-    gameLis.value = []
-    params.page = 1
-
-    if (type === 'type') {
-        typeIndex.value = index
-        params.type = index
-    }
-    if (type === 'tag_id') {
-        tag_idIndex.value = index
-        params.tag_id = index
-    }
-    // 如果都为 全部  则发起请求 页面显示15条数据
-    if (params.type === 0 && params.tag_id === 0) {
-        params.pagesize = 15
-        getGameLists(params)
-    } else {
-        allData()
-    }
-
-}
-// 全部数据
-const allData = async () => {
-    params.pagesize = total.value
-    // console.log('params', params);
-    await getGameList(params).then(resp => {
-        // console.log('resp===>', resp);
-        if (resp.data.code === 200 && resp.data.data) {
-            gameLis.value = resp.data.data.lists.filter(item => {
-                // 如果标签为全部  类型不为全部 返回匹配的类型数据
-                if (params.tag_id === 0) {
-                    return item.type === params.type
-                }
-                // 如果类型为全部  标签不为全部 返回匹配的标签数据
-                else if (params.type === 0) {
-                    return item.tags.includes(params.tag_id)
-                }
-                // 否则返回匹配的标签和类型数据
-                else return item.type === params.type && item.tags.includes(params.tag_id)
-            })
-        }
-    }).catch(err => {
-        Message.error(err.data.msg)
-    })
-}
-
-// 加载更多
-const loadMore = () => {
-    params.page += 1
-    getGameLists(params)
-}
-
-</script>
-
-<style scoped lang="scss">
-.header_list {
-    .top_type {
-        margin: 10px 0;
-        background-color: #fff;
-        padding: 20px 50px 20px 20px;
-        box-sizing: border-box;
-
-        .left_title {
-            width: 50px;
-            font-size: 14px;
-            color: #666;
-        }
-
-        .right_type {
-
-            // background-color: #ed8c0f;
-            .cont {
-                margin-right: 20px;
-                padding: 3px 5px;
-                cursor: pointer;
-
-                &:hover {
-                    color: #ed8c0f;
-                }
-            }
-        }
-
-        .type {
-            margin-bottom: 20px;
-        }
-    }
-
-    .el-button {
-        margin: 5px 20px 15px 0;
-        padding: 0 20px;
-        border: 0;
-        color: #999;
-    }
-}
-
-.active {
-    color: #ed8c0f
-}
+<template>
+    <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
+    <div v-else class="w1000 category">
+        <div class="header_list">
+            <div class="top_type">
+                <div class="type df aic">
+                    <div class="left_title">类型</div>
+                    <div class="right_type f1 df fw">
+                        <span v-for="item in typeArr" :key="item.id" class="cont"
+                            :class="{ active: typeIndex === item.id }" @click="selectType('type', item.id)">
+                            {{ item.name }}
+                        </span>
+                    </div>
+                </div>
+                <div class="size df aic">
+                    <div class="left_title">标签</div>
+                    <div class="right_type f1 df fw">
+                        <span v-for="item in tagArr" :key="item.id" class="cont"
+                            :class="{ active: tag_idIndex === item.id }" @click="selectType('tag_id', item.id)">
+                            {{ item.name }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <!-- 按最xxx排序 -->
+            <!-- <el-button :plain="true" round v-for="(item, index) in categoryList" :key="index"
+                @click="selectType('order', index)">
+                <span :class="{ active: orderIndex === index }">{{ item.title }}</span>
+            </el-button> -->
+        </div>
+        <!-- 游戏列表 -->
+        <div v-if="(gameLis.length > 0)">
+            <RankList :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr" />
+            <div class="more df aic jcc" v-if="params.page * params.pagesize <= gameLis.length">
+                <el-button class="df aic jcc" @click="loadMore">更多</el-button>
+            </div>
+            <div v-else>
+                <div class="df aic jcc" style="color: #999;height: 200px;font-size: 18px;">----- 没有更多数据了 -----</div>
+            </div>
+        </div>
+        <el-empty v-else></el-empty>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { getGameType, getGameTag, getGameList } from '@/api/index'
+import RankList from '@/components/RankList.vue';
+import Message from '@/utils/Message'
+
+const typeIndex = ref<number>(0)
+const tag_idIndex = ref<number>(0)
+const gameLis: any = ref([])
+const typeArr: any = ref([])
+const tagArr: any = ref([])
+const prefix = ref<string>('')
+const isLoading = ref<boolean>(true)
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
+const total = ref<number>(0)
+interface Params {
+    type: number,
+    tag_id: number,
+    page: number,
+    pagesize: number
+}
+const params = reactive<Params>({
+    type: 0,
+    tag_id: 0,
+    page: 1,
+    pagesize: 15
+})
+
+onMounted(async () => {
+    await getGameType().then(res => {
+        // console.log('类型', res);
+        typeArr.value = res.data.data
+        typeArr.value.unshift({ id: 0, name: '全部' })
+    })
+    await getGameTag().then(res => {
+        // console.log('标签', res);
+        tagArr.value = res.data.data
+        tagArr.value.unshift({ id: 0, name: '全部' })
+    })
+    getGameLists(params)
+})
+
+// 初始化列表数据
+const getGameLists = async (params) => {
+    // console.log('参数', params);
+
+    await getGameList(params).then(res => {
+        // console.log('数据', res);
+        if (res.data.code === 200 && res.data.data) {
+            gameLis.value = gameLis.value.concat(res.data.data.lists)
+            total.value = res.data.data.total
+            prefix.value = res.data.data.prefix
+            isLoading.value = false
+        }
+    }).catch(err => {
+        Message.error(err.data.msg)
+    })
+}
+
+// 点击类型、标签、排序
+const selectType = (type: any, index: any) => {
+    gameLis.value = []
+    params.page = 1
+
+    if (type === 'type') {
+        typeIndex.value = index
+        params.type = index
+    }
+    if (type === 'tag_id') {
+        tag_idIndex.value = index
+        params.tag_id = index
+    }
+    // 如果都为 全部  则发起请求 页面显示15条数据
+    if (params.type === 0 && params.tag_id === 0) {
+        params.pagesize = 15
+        getGameLists(params)
+    } else {
+        allData()
+    }
+
+}
+// 全部数据
+const allData = async () => {
+    params.pagesize = total.value
+    // console.log('params', params);
+    await getGameList(params).then(resp => {
+        // console.log('resp===>', resp);
+        if (resp.data.code === 200 && resp.data.data) {
+            gameLis.value = resp.data.data.lists.filter(item => {
+                // 如果标签为全部  类型不为全部 返回匹配的类型数据
+                if (params.tag_id === 0) {
+                    return item.type === params.type
+                }
+                // 如果类型为全部  标签不为全部 返回匹配的标签数据
+                else if (params.type === 0) {
+                    return item.tags.includes(params.tag_id)
+                }
+                // 否则返回匹配的标签和类型数据
+                else return item.type === params.type && item.tags.includes(params.tag_id)
+            })
+        }
+    }).catch(err => {
+        Message.error(err.data.msg)
+    })
+}
+
+// 加载更多
+const loadMore = () => {
+    params.page += 1
+    getGameLists(params)
+}
+
+</script>
+
+<style scoped lang="scss">
+.header_list {
+    .top_type {
+        margin: 15px 0 10px;
+        background-color: #fff;
+        padding: 20px 50px 20px 20px;
+        box-sizing: border-box;
+
+        .left_title {
+            width: 50px;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .right_type {
+
+            // background-color: #ed8c0f;
+            .cont {
+                margin-right: 20px;
+                padding: 3px 5px;
+                cursor: pointer;
+
+                &:hover {
+                    color: #ed8c0f;
+                }
+            }
+        }
+
+        .type {
+            margin-bottom: 20px;
+        }
+    }
+
+    .el-button {
+        margin: 5px 20px 15px 0;
+        padding: 0 20px;
+        border: 0;
+        color: #999;
+    }
+}
+
+.active {
+    color: #ed8c0f
+}
 </style>