369 lines
7.2 KiB
Vue
369 lines
7.2 KiB
Vue
<template>
|
|
<view class="index-page page-container">
|
|
<!-- 顶部搜索栏 -->
|
|
<view class="search-bar">
|
|
<view class="search-input" @click="goSearch">
|
|
<text class="search-icon">🔍</text>
|
|
<text class="search-placeholder">搜索游戏服务...</text>
|
|
</view>
|
|
<view class="notification-btn" @click="goNotification">
|
|
<text class="notif-icon">🔔</text>
|
|
<view v-if="hasUnread" class="unread-dot"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 赛博朋克标题 -->
|
|
<view class="page-title">
|
|
<view class="title-line"></view>
|
|
<text class="title-text neon-text">GAMING SERVICES</text>
|
|
<view class="title-line"></view>
|
|
</view>
|
|
|
|
<!-- 游戏分类 -->
|
|
<view class="section">
|
|
<view class="section-header">
|
|
<text class="section-title">游戏分类</text>
|
|
<text class="section-more" @click="goAllCategories">全部 ></text>
|
|
</view>
|
|
|
|
<scroll-view class="categories-scroll" scroll-x show-scrollbar="false">
|
|
<view class="categories-container">
|
|
<game-category
|
|
v-for="category in categories"
|
|
:key="category.id"
|
|
:category="category"
|
|
:show-count="true"
|
|
@click="goCategory"
|
|
/>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 服务类型快捷入口 -->
|
|
<view class="service-types">
|
|
<view
|
|
v-for="type in serviceTypes"
|
|
:key="type.id"
|
|
class="type-item cyber-card"
|
|
@click="goServiceType(type)"
|
|
>
|
|
<text class="type-icon">{{ type.icon }}</text>
|
|
<text class="type-name">{{ type.name }}</text>
|
|
<view class="type-arrow">→</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 热门推荐 -->
|
|
<view class="section">
|
|
<view class="section-header">
|
|
<text class="section-title">🔥 热门推荐</text>
|
|
<text class="section-subtitle">TRENDING NOW</text>
|
|
</view>
|
|
|
|
<view class="services-list">
|
|
<service-card
|
|
v-for="service in hotServices"
|
|
:key="service.id"
|
|
:service="service"
|
|
@click="goServiceDetail"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<view v-if="loading" class="loading-container">
|
|
<view class="loading-dot"></view>
|
|
<view class="loading-dot"></view>
|
|
<view class="loading-dot"></view>
|
|
</view>
|
|
|
|
<!-- 底部装饰 -->
|
|
<view class="bottom-decoration">
|
|
<view class="decoration-line"></view>
|
|
<text class="decoration-text">// POWERED BY CYBER TECH //</text>
|
|
<view class="decoration-line"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { gameCategories, serviceTypes, hotServices } from '../../mock'
|
|
|
|
const categories = ref([])
|
|
const services = ref([])
|
|
const loading = ref(false)
|
|
const hasUnread = ref(true)
|
|
|
|
onMounted(() => {
|
|
loadData()
|
|
})
|
|
|
|
const loadData = async () => {
|
|
loading.value = true
|
|
|
|
// 模拟加载
|
|
setTimeout(() => {
|
|
categories.value = gameCategories
|
|
services.value = hotServices
|
|
loading.value = false
|
|
}, 500)
|
|
}
|
|
|
|
const goSearch = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/index/search'
|
|
})
|
|
}
|
|
|
|
const goNotification = () => {
|
|
uni.showToast({
|
|
title: '暂无新消息',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
const goAllCategories = () => {
|
|
uni.showToast({
|
|
title: '全部分类',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
const goCategory = (category) => {
|
|
uni.navigateTo({
|
|
url: `/pages/category/list?categoryId=${category.id}&categoryName=${category.name}`
|
|
})
|
|
}
|
|
|
|
const goServiceType = (type) => {
|
|
uni.navigateTo({
|
|
url: `/pages/category/list?type=${type.id}&typeName=${type.name}`
|
|
})
|
|
}
|
|
|
|
const goServiceDetail = (service) => {
|
|
uni.navigateTo({
|
|
url: `/pages/service/detail?id=${service.id}`
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.index-page {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
padding: 24rpx 32rpx;
|
|
background: linear-gradient(135deg, rgba(20, 25, 50, 0.9) 0%, rgba(10, 14, 39, 0.8) 100%);
|
|
border: 1px solid rgba(0, 255, 255, 0.3);
|
|
border-radius: 50rpx;
|
|
backdrop-filter: blur(10rpx);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
border-color: rgba(0, 255, 255, 0.6);
|
|
box-shadow: 0 0 20rpx rgba(0, 255, 255, 0.3);
|
|
}
|
|
}
|
|
|
|
.search-icon {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.search-placeholder {
|
|
font-size: 28rpx;
|
|
color: #7a7e9d;
|
|
}
|
|
|
|
.notification-btn {
|
|
position: relative;
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, rgba(20, 25, 50, 0.9) 0%, rgba(10, 14, 39, 0.8) 100%);
|
|
border: 1px solid rgba(0, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
border-color: rgba(0, 255, 255, 0.6);
|
|
}
|
|
}
|
|
|
|
.notif-icon {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.unread-dot {
|
|
position: absolute;
|
|
top: 18rpx;
|
|
right: 18rpx;
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
background: #ff3366;
|
|
border-radius: 50%;
|
|
border: 2px solid #0a0e27;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.page-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.title-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(0, 255, 255, 0.5) 50%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
margin-bottom: 28rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 22rpx;
|
|
color: #7a7e9d;
|
|
letter-spacing: 2rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.section-more {
|
|
font-size: 26rpx;
|
|
color: #00ffff;
|
|
&:active {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.categories-scroll {
|
|
white-space: nowrap;
|
|
margin: 0 -24rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.categories-container {
|
|
display: inline-flex;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.service-types {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20rpx;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.type-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
padding: 28rpx 32rpx;
|
|
background: linear-gradient(135deg, rgba(20, 25, 50, 0.9) 0%, rgba(10, 14, 39, 0.8) 100%);
|
|
border: 1px solid rgba(0, 255, 255, 0.2);
|
|
border-radius: 16rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
border-color: rgba(0, 255, 255, 0.5);
|
|
}
|
|
}
|
|
|
|
.type-icon {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.type-name {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.type-arrow {
|
|
font-size: 32rpx;
|
|
color: #00ffff;
|
|
}
|
|
|
|
.services-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.loading-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.bottom-decoration {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
margin-top: 60rpx;
|
|
padding: 40rpx 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.decoration-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(122, 126, 157, 0.3) 50%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.decoration-text {
|
|
font-size: 20rpx;
|
|
color: #7a7e9d;
|
|
letter-spacing: 2rpx;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|