1
This commit is contained in:
210
scoring/pages/index/index.vue
Normal file
210
scoring/pages/index/index.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="notice">
|
||||
<view class="icon">
|
||||
<uni-icons type="sound" size="20"></uni-icons>
|
||||
</view>
|
||||
<view class="text">
|
||||
您还有未结束的对局,
|
||||
<text class="underline">点击前往</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="function-list">
|
||||
<view class="function-item">
|
||||
<view class="function-icon">
|
||||
<image src="https://t14.baidu.com/it/u=3165460156,649373630&fm=224&app=112&f=JPEG?w=500&h=500"></image>
|
||||
</view>
|
||||
<view class="function-introduce">
|
||||
<view class="function-name">
|
||||
多人模式
|
||||
</view>
|
||||
<view class="function-desc">
|
||||
所有玩家自己计分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="function-item" :class="{ 'active': isSinglePlayActive }" @click="handleSinglePlay" hover-class="function-item-hover">
|
||||
<view class="function-icon">
|
||||
<image src="https://pic.rmb.bdstatic.com/bjh/down/1742bc3845cbbcf0c78c01eb59bb1c1a.jpeg"></image>
|
||||
</view>
|
||||
<view class="function-introduce">
|
||||
<view class="function-name">
|
||||
单人模式
|
||||
</view>
|
||||
<view class="function-desc">
|
||||
房主给所有玩家计分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
// 响应式数据
|
||||
const isSinglePlayActive = ref(false)
|
||||
let debounceTimer = null
|
||||
|
||||
// 防抖函数 - 防止重复点击
|
||||
const debounce = (func, wait = 300) => {
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(debounceTimer)
|
||||
func(...args)
|
||||
}
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(later, wait)
|
||||
}
|
||||
}
|
||||
|
||||
// 优化后的单人模式处理函数
|
||||
const handleSinglePlay = debounce(() => {
|
||||
// 设置激活状态，提供视觉反馈
|
||||
isSinglePlayActive.value = true
|
||||
console.log('进入单人模式')
|
||||
|
||||
// 页面跳转，增加错误处理
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/singleplay/singleplay',
|
||||
success: () => {
|
||||
console.log('单人模式页面跳转成功')
|
||||
// 跳转成功后重置状态
|
||||
setTimeout(() => {
|
||||
isSinglePlayActive.value = false
|
||||
}, 200)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('单人模式页面跳转失败:', err)
|
||||
// 跳转失败也需要重置状态
|
||||
isSinglePlayActive.value = false
|
||||
// 显示错误提示
|
||||
uni.showToast({
|
||||
title: '页面跳转失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
console.log('首页加载完成')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.index {
|
||||
width: 750rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.notice {
|
||||
width: 80%;
|
||||
margin: 20rpx auto;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
border-radius: 20rpx;
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: #fa5d5d;
|
||||
}
|
||||
.text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
}
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
color: #fa5d5d;
|
||||
}
|
||||
}
|
||||
.function-list {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.function-item {
|
||||
--content-height: 100rpx;
|
||||
width: 70%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
margin: 40rpx auto;
|
||||
box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
gap: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
transition: all 0.2s ease;
|
||||
/* 微信小程序特有样式：条件编译用多行注释包裹 */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
user-select: none; /* 防止文本选中 */
|
||||
/* #endif */
|
||||
|
||||
.function-icon {
|
||||
width: var(--content-height);
|
||||
height: var(--content-height);
|
||||
border-radius: 10%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* 新增：防止图片拉伸变形 */
|
||||
}
|
||||
}
|
||||
|
||||
.function-introduce {
|
||||
flex: 1;
|
||||
height: var(--content-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
.function-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
/* 微信小程序特有样式：条件编译修复 */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
pointer-events: none; /* 确保整个区域都可点击 */
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.function-desc {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #a8a8a8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 点击时的视觉反馈效果
|
||||
.function-item-hover {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
// 激活状态的样式
|
||||
.function-item.active {
|
||||
background-color: #f0f8ff;
|
||||
box-shadow: 3rpx 3rpx 8rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user