Browse Source

游戏第一版

tanxue 6 months ago
parent
commit
d748733f38

+ 5 - 2
common/styles/global/components.scss

@@ -103,7 +103,10 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 		background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
 		background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
 	}
 	}
 }
 }
-
+// 仅一个返回按钮
+.ezy-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height);
+		background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
+	}
 /***** 试题---题干 *****/
 /***** 试题---题干 *****/
 .ezy-shiti-question{
 .ezy-shiti-question{
 	margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx;box-sizing: border-box;
 	margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx;box-sizing: border-box;
@@ -163,7 +166,7 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 .ezy-tiankong-box{
 .ezy-tiankong-box{
 	.tiankongn-title{
 	.tiankongn-title{
 		width: 231rpx;height: 63rpx;
 		width: 231rpx;height: 63rpx;
-		background-image: url("@/static/images/exam/panduan-title.png");@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/exam/tiankong-title.png");@include ezy-no-repeat-cover;
 	}
 	}
 	.tiankong-input {width: 50px;height: 32rpx;border: 1px solid #999;}
 	.tiankong-input {width: 50px;height: 32rpx;border: 1px solid #999;}
 	.tk-input-box{display: inline-block;position: relative;font-size: 0;}
 	.tk-input-box{display: inline-block;position: relative;font-size: 0;}

+ 41 - 5
common/styles/global/pages.scss

@@ -2,10 +2,6 @@
 // 登录页  padding-bottom: env(safe-area-inset-bottom); box-sizing: unset;
 // 登录页  padding-bottom: env(safe-area-inset-bottom); box-sizing: unset;
 .ezy-login-page {
 .ezy-login-page {
 	width:100%;height:100vh; background-color: #80dfff;position: relative;
 	width:100%;height:100vh; background-color: #80dfff;position: relative;
-	.login-nav-bar-icon{
-		width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height);
-		background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
-	}
 	.ezy-login-wrap{width:100%;height: 1623.08rpx;background-image: url("@/static/images/login/login-bj.jpg");@include ezy-no-repeat-cover(top);}
 	.ezy-login-wrap{width:100%;height: 1623.08rpx;background-image: url("@/static/images/login/login-bj.jpg");@include ezy-no-repeat-cover(top);}
 	.login-body-box{
 	.login-body-box{
 		display: flex;flex-direction: column;display: flex;box-sizing: border-box;
 		display: flex;flex-direction: column;display: flex;box-sizing: border-box;
@@ -745,7 +741,7 @@
 		.head-content-box{font-size: 30rpx;}
 		.head-content-box{font-size: 30rpx;}
 		.jf-box{
 		.jf-box{
 			width: 142rpx;height: 46rpx;display: flex;align-items: center;line-height: 1.2;font-size: 26rpx;
 			width: 142rpx;height: 46rpx;display: flex;align-items: center;line-height: 1.2;font-size: 26rpx;
-			@include ezy-no-repeat-cover;background-image: url("@/static/images/my/jf-bj.png");margin-top: 20rpx;
+			@include ezy-no-repeat-cover;background-image: url("@/static/images/common/jf-bj.png");margin-top: 20rpx;
 		}
 		}
 		.jf-icon{width: 35rpx;height: 35rpx;margin:0 4rpx 0 10rpx;flex-shrink: 0;
 		.jf-icon{width: 35rpx;height: 35rpx;margin:0 4rpx 0 10rpx;flex-shrink: 0;
 		@include ezy-no-repeat-cover;background-image: url("@/static/images/my/jf-qb.png");}
 		@include ezy-no-repeat-cover;background-image: url("@/static/images/my/jf-qb.png");}
@@ -1050,3 +1046,43 @@
 	}
 	}
 }
 }
 
 
+// 游戏
+.ezy-game-page{
+	width: 100%;height: 100vh;background-color: #23befb;position: relative;
+	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
+	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/game/game-bj.png");
+	.game-jf-box{
+		width: 142rpx;height: 46rpx;display: flex;align-items: center;line-height: 1.2;
+		position: absolute;right: 24rpx;top: var(--status-bar-height);color: #fff;font-size: 26rpx;
+		background-image: url("@/static/images/common/jf-bj.png");@include ezy-no-repeat-cover;
+	}
+	.game-jf-box::before{
+		content: '';width: 35rpx;height: 35rpx;display: block;margin:0 4rpx 0 10rpx;flex-shrink: 0;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/my/jf-qb.png");}
+	
+	// goose
+	.game-goose-box{
+		position: absolute;bottom: 300rpx;right: 80rpx;
+		.game-progress-box{
+			width: 138rpx;height: 25rpx;position: absolute;bottom: 300rpx;left: 48rpx;
+			.u-line-progress__background{
+				width: 138rpx;height: 25rpx!important;
+				@include ezy-no-repeat-cover;background-image: url("@/static/images/game/jf-bj.png");
+			}
+		}
+		.goose-img-box{width: 231rpx;height: 442rpx;@include ezy-no-repeat-cover;}
+	}
+	.food-btn-box{
+		width: 106rpx;height: 121rpx;position: absolute;bottom: 50rpx;left: 50rpx;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/game/food-common-img.png");
+	}
+	.food-img-box{width: 80rpx;height: 75rpx;position: absolute;}
+	.food-img25{bottom: 368rpx;left: 274rpx;}
+	.food-img50{bottom: 360rpx;left: 270rpx;}
+	.food-img100{bottom: 360rpx;left: 272rpx;}
+	.yxsm-btn{
+		width: 125rpx;height: 125rpx;position: absolute;bottom: 50rpx;right: 50rpx;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/game/yxsm-btn-img.png");
+	}
+	
+}

+ 7 - 7
pages/game/components/constantConfig.js

@@ -1,17 +1,17 @@
 // 食物种类列表
 // 食物种类列表
 export const foodSpeciesList = [{
 export const foodSpeciesList = [{
 		id: 25,
 		id: 25,
-		imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+		imgUrl: '/static/images/game/food-img3.png',
 		credit: 100
 		credit: 100
 	},
 	},
 	{
 	{
 		id: 50,
 		id: 50,
-		imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+		imgUrl: '/static/images/game/food-img2.png',
 		credit: 200
 		credit: 200
 	},
 	},
 	{
 	{
 		id: 100,
 		id: 100,
-		imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+		imgUrl: '/static/images/game/food-img3.png',
 		credit: 300
 		credit: 300
 	}
 	}
 ]
 ]
@@ -19,18 +19,18 @@ export const foodSpeciesList = [{
 // 大鹅成长阶段
 // 大鹅成长阶段
 export const gooseGrowthTypeList = [{
 export const gooseGrowthTypeList = [{
 		id: 0,
 		id: 0,
-		imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+		imgUrl: '/static/images/game/game-img1.gif',
 	},
 	},
 	{
 	{
 		id: 1,
 		id: 1,
-		imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+		imgUrl: '/static/images/game/game-img2.gif',
 	},
 	},
 	{
 	{
 		id: 2,
 		id: 2,
-		imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+		imgUrl: '/static/images/game/game-img3.gif',
 	},
 	},
 	{
 	{
 		id: 3,
 		id: 3,
-		imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+		imgUrl: '/static/images/game/game-img4.gif',
 	}
 	}
 ]
 ]

+ 1 - 3
pages/game/components/food.vue

@@ -1,7 +1,5 @@
 <template>
 <template>
-	<view>
-		<image v-if="imgUrl" :src="imgUrl"></image>
-	</view>
+	<image v-if="imgUrl" :src="imgUrl" class="food-img-box" :class="'food-img'+shiwuId"></image>
 </template>
 </template>
 
 
 <script setup>
 <script setup>

+ 1 - 1
pages/game/components/foodSelect.vue

@@ -1,6 +1,6 @@
 <template>
 <template>
 	<!-- 食物图标按钮 -->
 	<!-- 食物图标按钮 -->
-	<view @click="handleOpen">选择</view>
+	<view @click="handleOpen" class="food-btn-box"></view>
 	<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
 	<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
 		<view style="height: 300px;display: flex;justify-content: space-between;">
 		<view style="height: 300px;display: flex;justify-content: space-between;">
 			<view v-for="item in foodSpeciesList" :key="item.id" @click="handleSelectFood(item)">
 			<view v-for="item in foodSpeciesList" :key="item.id" @click="handleSelectFood(item)">

+ 3 - 3
pages/game/components/goose.vue

@@ -1,7 +1,7 @@
 <template>
 <template>
-	<view>
-		<up-line-progress :percentage="progress" activeColor="#ff0000"></up-line-progress>
-		<image :src="imgUrl"></image>
+	<view class="game-goose-box">
+		<up-line-progress :percentage="progress" activeColor="#54e1fe" class="game-progress-box"></up-line-progress>
+		<image :src="imgUrl" class="goose-img-box"></image>
 	</view>
 	</view>
 </template>
 </template>
 
 

+ 14 - 8
pages/game/index.vue

@@ -1,13 +1,19 @@
 <!-- 游戏页面 -->
 <!-- 游戏页面 -->
 <template>
 <template>
-	<!-- 积分 -->
-	<view>{{credit}}</view>
-	<!-- 桌面食物 -->
-	<foodVue :shiwuId="shiwuId"></foodVue>
-	<!-- 大鹅 4阶段 -->
-	<gooseVue :growth="growth" :growthType="growthType" :progress="progress"></gooseVue>
-	<!-- 食物选择 -->
-	<foodSelectVue ref="foodSelectRef" :shiwuId="shiwuId" @weishi="onWeiShi"></foodSelectVue>
+	<view class="ezy-game-page">
+		<!-- 返回按钮 -->
+		<view class="ezy-nav-bar-icon"></view>
+		<!-- 积分 -->
+		<view class="game-jf-box">{{credit}}</view>
+		<!-- 桌面食物 -->
+		<foodVue :shiwuId="shiwuId"></foodVue>
+		<!-- 大鹅 4阶段 -->
+		<gooseVue :growth="growth" :growthType="growthType" :progress="progress"></gooseVue>
+		<!-- 食物选择 -->
+		<foodSelectVue ref="foodSelectRef" :shiwuId="shiwuId" @weishi="onWeiShi"></foodSelectVue>
+		<!-- 游戏说明 -->
+		<view class="yxsm-btn"></view>
+	</view>
 </template>
 </template>
 
 
 <script setup>
 <script setup>

+ 1 - 1
pages/login/login.vue

@@ -1,6 +1,6 @@
 <template>
 <template>
 	<view class="ezy-login-page">
 	<view class="ezy-login-page">
-		<view @click="goIndex" class="login-nav-bar-icon"></view>
+		<view @click="goIndex" class="ezy-nav-bar-icon"></view>
 		<view class="ezy-login-wrap">
 		<view class="ezy-login-wrap">
 			<view class="login-body-box">
 			<view class="login-body-box">
 				<view class="login-title-img"></view>
 				<view class="login-title-img"></view>

+ 0 - 0
static/images/my/jf-bj.png → static/images/common/jf-bj.png


BIN
static/images/game/food-img1.png


BIN
static/images/game/food-img2.png


BIN
static/images/game/yxsm-btn-img.png