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