新建项目
This commit is contained in:
49
pages/home/home.js
Normal file
49
pages/home/home.js
Normal file
@@ -0,0 +1,49 @@
|
||||
const service = require("../../services/game-service");
|
||||
const { GAME_MODES } = require("../../utils/constants");
|
||||
|
||||
Page({
|
||||
data: {
|
||||
currentRoom: null,
|
||||
modeName: ""
|
||||
},
|
||||
|
||||
onShow() {
|
||||
let currentRoom = service.getCurrentRoom();
|
||||
if (currentRoom && currentRoom.status === "cancelled") {
|
||||
service.clearCurrentRoom();
|
||||
currentRoom = null;
|
||||
}
|
||||
this.setData({
|
||||
currentRoom,
|
||||
modeName: currentRoom
|
||||
? GAME_MODES[currentRoom.settings.mode].name
|
||||
: ""
|
||||
});
|
||||
},
|
||||
|
||||
createGame() {
|
||||
wx.navigateTo({ url: "/pages/create/create" });
|
||||
},
|
||||
|
||||
joinGame() {
|
||||
wx.navigateTo({ url: "/pages/join/join" });
|
||||
},
|
||||
|
||||
openRules() {
|
||||
wx.navigateTo({ url: "/pages/rules/rules" });
|
||||
},
|
||||
|
||||
continueGame() {
|
||||
const room = this.data.currentRoom;
|
||||
if (!room) return;
|
||||
const page =
|
||||
room.status === "finished"
|
||||
? "result"
|
||||
: room.status === "waiting"
|
||||
? "lobby"
|
||||
: "game";
|
||||
wx.navigateTo({
|
||||
url: `/pages/${page}/${page}?code=${room.code}`
|
||||
});
|
||||
}
|
||||
});
|
||||
3
pages/home/home.json
Normal file
3
pages/home/home.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "藏猫猫计划"
|
||||
}
|
||||
63
pages/home/home.wxml
Normal file
63
pages/home/home.wxml
Normal file
@@ -0,0 +1,63 @@
|
||||
<view class="page home-page">
|
||||
<view class="hero">
|
||||
<view class="hero-orbit orbit-one"></view>
|
||||
<view class="hero-orbit orbit-two"></view>
|
||||
<view class="eyebrow">OUTDOOR SOCIAL GAME</view>
|
||||
<view class="hero-title">把城市一角，<br />变成游戏地图。</view>
|
||||
<view class="hero-copy">
|
||||
邀请好友、自动分队、接收线索，在真实世界里完成一场紧张又安全的追逃。
|
||||
</view>
|
||||
<view class="hero-players">
|
||||
<view class="avatar avatar-a">藏</view>
|
||||
<view class="avatar avatar-b">找</view>
|
||||
<view class="avatar avatar-c">跑</view>
|
||||
<text>建议 6～12 人 · 30 分钟</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="button-stack actions">
|
||||
<button class="primary-button" bindtap="createGame">创建一场游戏</button>
|
||||
<button class="secondary-button" bindtap="joinGame">输入房间码加入</button>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{currentRoom}}" class="card continue-card" bindtap="continueGame">
|
||||
<view class="row between">
|
||||
<view>
|
||||
<view class="continue-label">继续上一场</view>
|
||||
<view class="card-title">{{currentRoom.name}}</view>
|
||||
</view>
|
||||
<view class="arrow">→</view>
|
||||
</view>
|
||||
<view class="room-meta">{{modeName}} · 房间 {{currentRoom.code}}</view>
|
||||
</view>
|
||||
|
||||
<view class="section-label">怎么玩</view>
|
||||
<view class="steps">
|
||||
<view class="step">
|
||||
<view class="step-number">01</view>
|
||||
<view>
|
||||
<view class="step-title">圈定安全场地</view>
|
||||
<view class="step-copy">选择公园、校园或营地，设置活动范围。</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step">
|
||||
<view class="step-number">02</view>
|
||||
<view>
|
||||
<view class="step-title">分享给好友</view>
|
||||
<view class="step-copy">系统自动分配寻找者和躲藏者身份。</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step">
|
||||
<view class="step-number">03</view>
|
||||
<view>
|
||||
<view class="step-title">开始真实追逃</view>
|
||||
<view class="step-copy">利用模糊线索和技能，在倒计时内完成挑战。</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="safety-link" bindtap="openRules">
|
||||
<text>户外游戏安全规则</text>
|
||||
<text>查看 →</text>
|
||||
</view>
|
||||
</view>
|
||||
165
pages/home/home.wxss
Normal file
165
pages/home/home.wxss
Normal file
@@ -0,0 +1,165 @@
|
||||
.home-page {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 52rpx 38rpx 42rpx;
|
||||
background: #183f31;
|
||||
border-radius: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero .eyebrow {
|
||||
position: relative;
|
||||
color: #d9ef72;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
position: relative;
|
||||
margin-top: 22rpx;
|
||||
font-size: 62rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1.18;
|
||||
letter-spacing: -2rpx;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
width: 88%;
|
||||
margin-top: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
font-size: 27rpx;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-players {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 38rpx;
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
margin-right: -12rpx;
|
||||
border: 4rpx solid #183f31;
|
||||
border-radius: 50%;
|
||||
color: #17231d;
|
||||
font-size: 20rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.avatar-c {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.avatar-a {
|
||||
background: #d9ef72;
|
||||
}
|
||||
|
||||
.avatar-b {
|
||||
background: #ef8f4a;
|
||||
}
|
||||
|
||||
.avatar-c {
|
||||
background: #f9e6c4;
|
||||
}
|
||||
|
||||
.hero-orbit {
|
||||
position: absolute;
|
||||
border: 2rpx solid rgba(217, 239, 114, 0.23);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.orbit-one {
|
||||
top: -120rpx;
|
||||
right: -100rpx;
|
||||
width: 420rpx;
|
||||
height: 420rpx;
|
||||
}
|
||||
|
||||
.orbit-two {
|
||||
top: -32rpx;
|
||||
right: -20rpx;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.continue-card {
|
||||
border-left: 10rpx solid #ef8f4a;
|
||||
}
|
||||
|
||||
.continue-label {
|
||||
margin-bottom: 10rpx;
|
||||
color: #9c531e;
|
||||
font-size: 22rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.room-meta {
|
||||
margin-top: 14rpx;
|
||||
color: #68726c;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.steps {
|
||||
overflow: hidden;
|
||||
background: #fffdf7;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
padding: 26rpx 28rpx;
|
||||
border-bottom: 2rpx solid rgba(23, 35, 29, 0.07);
|
||||
}
|
||||
|
||||
.step:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
color: #1d6b4f;
|
||||
font-size: 22rpx;
|
||||
font-weight: 900;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.step-copy {
|
||||
margin-top: 8rpx;
|
||||
color: #68726c;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.safety-link {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 34rpx;
|
||||
padding: 24rpx 4rpx;
|
||||
color: #1d6b4f;
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
Reference in New Issue
Block a user