Skip to content

F
fc-minigame
Commit 2ce3787b authored by 董政锦's avatar 董政锦
Browse files
Options

fix: 图片格式；

parent fedc7c9b
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 137 deletions
frontend-h5/src/pages/game4/Game4.vue
View file @ 2ce3787b
......@@ -25,8 +25,8 @@ const imageUrls = {
title: cssAssetUrl("game4/h5-game4-title1.webp"),
title2: cssAssetUrl("game4/h5-game4-title2.webp"),
// avatarBg: cssAssetUrl('game4/h5-game4-join.svg'),
userBg: cssAssetUrl("game4/user-bg.webp"),
startBg: cssAssetUrl("game4/start-bg.webp"),
userBg: cssAssetUrl("game4/user-bg.svg"),
startBg: cssAssetUrl("game4/start-bg.svg"),
gift: cssAssetUrl("game4/h5-game4-gift.webp"),
avatar: cssAssetUrl("game1/avatar.png"),
gu: cssAssetUrl("game4/h5-game4-horse.webp"),
......
frontend-h5/src/pages/game4/views/LoadingView.vue
View file @ 2ce3787b
<script setup lang="ts">
import { $getWechat } from '@/commons/utils.ts'
import { onMounted, ref } from 'vue';
import { $getWechat } from "@/commons/utils.ts";
import { onMounted, ref } from "vue";
defineProps<{
imageUrls: Record<string, string>
userJoinStatus: boolean
}>()
imageUrls: Record<string, string>;
userJoinStatus: boolean;
}>();
defineEmits<{
touchGameRule: []
}>()
touchGameRule: [];
}>();
const nickname = ref('');
const avatar = ref('');
const nickname = ref("");
const avatar = ref("");
onMounted(() => {
const wechat = $getWechat();
nickname.value = wechat.nickname;
avatar.value = wechat.avatar;
const wechat = $getWechat();
nickname.value = wechat.nickname;
avatar.value = wechat.avatar;
});
</script>
<template>
<div class="h5-page game-stage">
<div class="game-desc" @click="$emit('touchGameRule')">游戏规则</div>
<div class="img-logo"></div>
<div class="img-title"></div>
<div class="img-title2"></div>
<div class="img-gift"></div>
<div class="img-user-bg"></div>
<div class="img-avatar" :style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"></div>
<div class="txt-nickname">{{ nickname }}</div>
<div class="txt-loading">
<label v-if="userJoinStatus">您已成功加入游戏等待主持人开始</label>
<label v-else>正在加入游戏...</label>
</div>
<div class="img-start-bg"></div>
<div class="h5-page game-stage">
<div class="game-desc" @click="$emit('touchGameRule')">游戏规则</div>
<div class="img-logo"></div>
<div class="img-title"></div>
<div class="img-title2"></div>
<div class="img-gift"></div>
<div class="img-user-bg"></div>
<div
class="img-avatar"
:style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"
></div>
<div class="txt-nickname">{{ nickname }}</div>
<div class="txt-loading">
<label v-if="userJoinStatus">您已成功加入游戏等待主持人开始</label>
<label v-else>正在加入游戏...</label>
</div>
<div class="img-start-bg"></div>
</div>
</template>
<style scoped>
.game-stage {
position: absolute;
width: 750px;
height: 1624px;
padding: 0;
position: absolute;
width: 750px;
height: 1624px;
padding: 0;
}
.game-desc {
position: absolute;
top: 40%;
left: var(--stage-viewport-left, 0);
display: flex;
width: 58px;
height: 158px;
padding-top: 10px;
align-items: center;
justify-content: center;
border-radius: 0 12px 12px 0;
background: rgba(40, 12, 8, 0.52);
color: rgba(255, 255, 255, 0.9);
font-size: 25px;
letter-spacing: 10px;
line-height: 1.25;
text-align: center;
text-orientation: upright;
transform: translateY(-50%);
writing-mode: vertical-rl;
position: absolute;
top: 40%;
left: var(--stage-viewport-left, 0);
display: flex;
width: 58px;
height: 158px;
padding-top: 10px;
align-items: center;
justify-content: center;
border-radius: 0 12px 12px 0;
background: rgba(40, 12, 8, 0.52);
color: rgba(255, 255, 255, 0.9);
font-size: 25px;
letter-spacing: 10px;
line-height: 1.25;
text-align: center;
text-orientation: upright;
transform: translateY(-50%);
writing-mode: vertical-rl;
}
.bg-bottom {
position: absolute;
bottom: 0;
left: var(--stage-viewport-left, 0);
width: var(--stage-viewport-width, 750px);
height: 479px;
background: v-bind('imageUrls.bg2') center/cover;
opacity: 0.6;
position: absolute;
bottom: 0;
left: var(--stage-viewport-left, 0);
width: var(--stage-viewport-width, 750px);
height: 479px;
background: v-bind("imageUrls.bg2") center/cover;
opacity: 0.6;
}
.img-logo {
position: absolute;
top: 66px;
left: 50%;
width: 428px;
height: 77px;
background: v-bind('imageUrls.logo') center/cover;
transform: translateX(-50%);
position: absolute;
top: 66px;
left: 50%;
width: 428px;
height: 77px;
background: v-bind("imageUrls.logo") center/cover;
transform: translateX(-50%);
}
.img-title {
position: absolute;
top: 200px;
left: 50%;
width: 609px;
height: 87.04px;
background: v-bind('imageUrls.title') center/cover;
transform: translateX(-50%);
position: absolute;
top: 200px;
left: 50%;
width: 609px;
height: 87.04px;
background: v-bind("imageUrls.title") center/cover;
transform: translateX(-50%);
}
.img-title2 {
position: absolute;
top: 290px;
left: 50%;
width: 491.77px;
height: 200px;
background: v-bind('imageUrls.title2') center/cover;
transform: translateX(-50%);
position: absolute;
top: 290px;
left: 50%;
width: 491.77px;
height: 200px;
background: v-bind("imageUrls.title2") center/cover;
transform: translateX(-50%);
}
.img-gift {
position: absolute;
top: 421px;
right: -10px;
right: -10%;
width: 234.1px;
height: 142.21px;
background: v-bind('imageUrls.gift') center/cover;
position: absolute;
top: 421px;
right: -10px;
right: -10%;
width: 234.1px;
height: 142.21px;
background: v-bind("imageUrls.gift") center/cover;
}
.img-user-bg {
position: absolute;
top: 634px;
left: 50%;
width: 447px;
height: 287.5px;
background: v-bind('imageUrls.userBg') center/cover no-repeat;
transform: translateX(-50%);
position: absolute;
top: 600px;
left: 50%;
width: 447px;
height: 287.5px;
background: v-bind("imageUrls.userBg") center/cover no-repeat;
transform: translateX(-50%);
}
.img-avatar {
position: absolute;
top: 524px;
left: 50%;
transform: translateX(-50%);
position: absolute;
top: 524px;
left: 50%;
transform: translateX(-50%);
}
.txt-nickname {
position: absolute;
top: 668px;
left: 50%;
color: #E00000;
font-size: 25pt;
font-weight: bold;
transform: translateX(-50%);
position: absolute;
top: 668px;
left: 50%;
color: #e00000;
font-size: 25pt;
font-weight: bold;
transform: translateX(-50%);
}
.txt-loading {
position: absolute;
top: 743px;
left: 50%;
width: 288px;
color: #E00000;
font-size: 25pt;
font-weight: bold;
text-align: center;
transform: translateX(-50%);
position: absolute;
top: 743px;
left: 50%;
width: 288px;
color: #e00000;
font-size: 25pt;
font-weight: bold;
text-align: center;
transform: translateX(-50%);
}
.img-start-bg {
position: absolute;
bottom: 291px;
left: 50%;
width: 500px;
height: 90px;
background: v-bind('imageUrls.startBg') center/cover no-repeat;
transform: translateX(-50%);
position: absolute;
bottom: 291px;
left: 50%;
width: 500px;
height: 90px;
background: v-bind("imageUrls.startBg") center/cover no-repeat;
transform: translateX(-50%);
}
.txt-loading label {
display: inline-block;
transform-origin: center;
animation: loading-text-scale 1.2s ease-in-out infinite;
display: inline-block;
transform-origin: center;
animation: loading-text-scale 1.2s ease-in-out infinite;
}
@keyframes loading-text-scale {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
.loading-gu {
position: absolute;
bottom: 100px;
left: 50%;
width: 600px;
height: 534px;
background: v-bind('imageUrls.gu') center/cover;
transform: translateX(-50%);
position: absolute;
bottom: 100px;
left: 50%;
width: 600px;
height: 534px;
background: v-bind("imageUrls.gu") center/cover;
transform: translateX(-50%);
}
</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