Skip to content

X
xzf_uniapp-wechat-web
Commit 25621ee2 authored by 袁玲利's avatar 袁玲利
Browse files
Options

游戏排行榜

parent b87d946f
Show whitespace changes
Inline Side-by-side
Showing with 500 additions and 0 deletions
src/pages.json
View file @ 25621ee2
...@@ -605,6 +605,22 @@ ...@@ -605,6 +605,22 @@
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, {
"path": "pages/CampusFundingGuardian/CampusFundingGuardian",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "校园垫资守护",
"enablePullDownRefresh": false
}
}, {
"path": "pages/gameOrder/gameOrder",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "游戏排行榜",
"enablePullDownRefresh": false
}
} }
], ],
"globalStyle": { "globalStyle": {
......
src/pages/CampusFundingGuardian/CampusFundingGuardian.vue 0 → 100644
View file @ 25621ee2
<template>
<view class="CampusFundingGuardian">
<view class="accountWrapper">
<view class="line1">
<view>账户状态</view>
<view class="status normal">已冻结</view>
</view>
<view class="line2">
<view class="left">
<view>待付订单</view>
<view class="unit">（元）</view>
</view>
<view class="right red">
<view>10.00</view>
<view class="arrow"></view>
</view>
</view>
<view class="line2 bd0">
<view class="left">
<view>垫资订单</view>
</view>
<view class="right">
<view class="grey">去查询</view>
<view class="arrow"></view>
</view>
</view>
</view>
<view class="remind">
<view class="title">垫资守护提醒<view class="bb"></view></view>
<view class="text">
【安小智】11月7日(星期四) 在校消费时，因可用余额不足导致扣款失败，<span
class="red"
>为确保孩子优先吃饭，平台已为您先行垫付。</span
>请家长及时处理垫资/待支付订单，避免影响孩子在校吃饭。
</view>
<view class="about">
<view class="amount">
<view class="pro">金额：</view>
<view class="value">12元</view>
</view>
<view class="item">
<view class="pro">地点：</view>
<view class="value">高中食堂米粉</view>
</view>
<view class="item">
<view class="pro">时间：</view>
<view class="value">2024-11-07 12:20:43</view>
</view>
<view class="item">
<view class="pro">备注：</view>
<view class="value">可用余额不足，平台已先行垫付</view>
</view>
<!-- <view class="tip">
<view class="warn"></view>
<view>您尚未开通垫资守护，本次限免垫资已用完~</view>
</view> -->
<view class="tip normal">
<view class="safe"></view>
<view>垫资守护服务，限时免费体验中~</view>
</view>
</view>
</view>
<view class="img"></view>
<view class="open">
<view class="finger"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
faceType: "",
fromPage: "",
};
},
onLoad: function (options) {},
onShow() {},
};
</script>
<style scoped lang="scss">
.CampusFundingGuardian {
width: 100%;
height: 100%;
min-height: 100vh;
background: #f0f1f1;
display: flex;
flex-direction: column;
.accountWrapper {
margin: 24rpx auto 0;
width: 686rpx;
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16rpx;
.line1,
.line2 {
width: calc(100% - 48rpx);
height: 100rpx;
line-height: 100rpx;
display: inline-flex;
justify-content: space-between;
font-size: 30rpx;
color: #333333;
margin: 0 24rpx;
border-bottom: 1rpx solid #eeeeee;
.status {
align-self: center;
width: 120rpx;
height: 48rpx;
line-height: 48rpx;
background: #ff411c;
border-radius: 10rpx;
text-align: center;
font-size: 28rpx;
color: #ffffff;
}
.normal {
background: #04b871;
}
}
.left {
display: inline-flex;
.unit {
font-size: 26rpx;
color: #999999;
}
}
.right {
display: inline-flex;
font-size: 38rpx;
color: rgba(0, 0, 0, 0.85);
.grey {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
}
.arrow {
align-self: center;
margin-left: 16rpx;
width: 15rpx;
height: 24rpx;
background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/rightArrow.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}
.red {
color: #ff411c;
}
.bd0 {
border-bottom: 0;
}
}
.remind {
margin: 24rpx auto 0;
width: 686rpx;
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16rpx;
.title {
padding: 0 27rpx;
margin-top: 26rpx;
width: calc(100% - 54rpx);
text-align: center;
font-size: 34rpx;
color: rgba(0, 0, 0, 0.85);
height: 48rpx;
line-height: 48rpx;
position: relative;
.bb {
position: absolute;
width: 212rpx;
height: 20rpx;
background: rgba(4, 184, 113, 0.1);
border-radius: 11rpx;
bottom: 0;
left: 50%;
margin-left: -106rpx;
}
}
.text {
padding: 0 27rpx;
margin-top: 26rpx;
width: calc(100% - 54rpx);
text-align: left;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.85);
line-height: 40rpx;
text-indent: 56rpx;
.red {
color: #e02020;
font-weight: bold;
}
}
.about {
margin: 0 auto;
margin-top: 10rpx;
width: 574rpx;
padding: 0 24rpx 20rpx 24rpx;
margin-bottom: 24rpx;
background: #fcf5f5;
border-radius: 12rpx;
display: flex;
flex-direction: column;
.amount,
.item {
margin-top: 16rpx;
height: 40rpx;
width: 100%;
line-height: 40rpx;
display: inline-flex;
.pro {
font-size: 26rpx;
color: rgba(0, 0, 0, 0.5);
}
.value {
font-size: 26rpx;
color: rgba(0, 0, 0, 0.85);
}
}
.item {
margin-top: 0;
}
.tip {
width: 526rpx;
height: 48rpx;
margin: 0 auto;
padding: 0 24rpx;
margin-top: 10rpx;
background: rgba(254, 111, 70, 0.2);
border-radius: 24rpx;
display: inline-flex;
font-weight: 400;
font-size: 24rpx;
color: #e02020;
line-height: 48rpx;
.warn {
align-self: center;
width: 22rpx;
height: 22rpx;
margin-right: 15rpx;
background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/warn.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.safe {
align-self: center;
width: 33rpx;
height: 33rpx;
margin-right: 4rpx;
background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/safe.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}
.normal {
background: rgba(254, 221, 160, 0.5);
border-radius: 24rpx;
color: #935100;
}
}
}
.img {
width: 686rpx;
height: 270rpx;
margin: 0 auto;
margin-top: 24rpx;
background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/dzshImg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.open {
width: 742rpx;
height: 154rpx;
margin-top: 36rpx;
background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/opendzsh.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
.finger {
position: absolute;
top: 51rpx;
right: 28rpx;
width: 70rpx;
height: 110rpx;
background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/finger.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}
}
</style>
\ No newline at end of file
src/pages/gameOrder/gameOrder.vue 0 → 100644
View file @ 25621ee2
<template>
<div class="rankings">
<div v-for="(game, index) in games" :key="index" class="ranking-item">
<!-- 图标 -->
<img :src="game.icon" alt="Game Icon" class="game-icon" />
<!-- 游戏信息 -->
<div class="game-info">
<div class="game-name">{{ game.name }}</div>
<div class="game-score">{{ game.score }}</div>
<div class="game-description">{{ game.description }}</div>
</div>
<!-- 启动按钮 -->
<button @click="launchGame(game)" class="launch-btn">启动</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ImgUrl: this.$ImgUrl,
games: [
{
icon: this.$ImgUrl + "gameOrder/game2.jpg",
name: "抓大鹅",
score: "休闲",
description: "亲子互动消除解压小游戏",
appId: "wxb98ac240fd74b0e3"
},
{
icon: this.$ImgUrl + "gameOrder/game3.jpg",
name: "疯狂来解压",
score: "休闲",
description: "趣味消除、无限解压",
appId: "wx770a673256c31705"
},
{
icon: this.$ImgUrl + "gameOrder/game4.jpg",
name: "密室消除2",
score: "休闲",
description: "拯救国外的石头小游戏，你能过第一关嘛？",
appId: "wxafec673b78d986f9"
},
{
icon: this.$ImgUrl + "gameOrder/game5.jpg",
name: "火锅大冒险",
score: "休闲",
description: "你的省份排第几？",
appId: "wx9a0ef2cb66dddd50"
},
{
icon: this.$ImgUrl + "gameOrder/game6.jpg",
name: "无敌螺丝王",
score: "休闲",
description: "3D打螺丝，无限解压",
appId: "wxdfa24cfef28c57cf"
},
{
icon: this.$ImgUrl + "gameOrder/game7.jpg",
name: "中华生僻字",
score: "休闲",
description: "田园风格模拟经营，学习中华博大文化",
appId: "wxcf1730aea6500563"
},
{
icon: this.$ImgUrl + "gameOrder/game8.jpg",
name: "文字乐翻天",
score: "答题",
description: "超烧脑的文字小游戏，你能到第几关？",
appId: "wx5336ae5c763a6d83"
},
{
icon: this.$ImgUrl + "gameOrder/game9.jpg",
name: "文字消除",
score: "答题",
description: "谁能过第二关，我就服谁",
appId: "wx276928b49e0d36e2"
},
{
icon: this.$ImgUrl + "gameOrder/game10.jpg",
name: "诗词趣消消",
score: "答题",
description: "中华古典诗词|最有意境的诗词|句句封神|",
appId: "wxc6b14dede0a6275e"
},
{
icon: this.$ImgUrl + "gameOrder/game11.jpg",
name: "文字大闯关",
score: "答题",
description: "传承中华文脉，探求文字奥秘",
appId: "wxe70c92771b735f1b"
},
{
icon: this.$ImgUrl + "gameOrder/game12.jpg",
name: "七彩拼图",
score: "拼图",
description: "奇思妙想的拼图世界",
appId: "wxb5612f7e17786c46"
},
],
};
},
mounted() {
this.games.sort(() => 0.5 - Math.random());
},
methods: {
launchGame(game) {
uni.navigateToMiniProgram({
appId: game.appId,
});
// 这里可以添加游戏启动逻辑，比如跳转到游戏页面，或打开游戏等
},
},
};
</script>
<style scoped>
.rankings {
display: flex;
flex-direction: column;
padding: 20rpx;
}
.ranking-item {
display: flex;
align-items: center;
margin-bottom: 30rpx;
padding: 20rpx;
border: 1rpx solid #ddd;
border-radius: 16rpx;
background-color: #f9f9f9;
}
.game-icon {
width: 100rpx;
height: 100rpx;
margin-right: 30rpx;
}
.game-info {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.game-name {
font-size: 32rpx;
font-weight: bold;
line-height: 40rpx;
}
.game-score {
color: #888;
margin-top: 10rpx;
line-height: 40rpx;
font-size: 26rpx;
}
.game-description {
color: #777;
font-size: 28rpx;
margin-top: 10rpx;
line-height: 40rpx;
}
.launch-btn {
padding: 16rpx 32rpx;
margin-left: 30rpx;
font-size: 26rpx;
line-height: 40rpx;
background-color: #4caf50;
color: white;
border: none;
border-radius: 10rpx;
white-space: nowrap;
}
.launch-btn:hover {
background-color: #45a049;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment