374 lines
8.4 KiB
Vue
374 lines
8.4 KiB
Vue
<template>
|
|
<div v-show="props.status" class="masks">
|
|
<div class="g-container">
|
|
<div class="result">
|
|
<div class="theme">
|
|
<ShowLottie
|
|
name="text_fail"
|
|
width="100%"
|
|
height="100%"
|
|
@getAnimation="ani => ani.playSegments([50, 180])"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="text">
|
|
<div class="title">{{ props.levelTitle }} 统计结果</div>
|
|
</div>
|
|
<ResultTable
|
|
:list="props.statList"
|
|
:timeStr="props.timeStr"
|
|
:bombCount="props.bombCount"
|
|
:glassCount="props.glassCount"
|
|
:surrenderCount="props.surrenderCount"
|
|
:allRightCount="props.allRightCount"
|
|
:exp="props.exp"
|
|
:rightRate="props.rightRate"
|
|
@viewDetail="handlePopup"
|
|
></ResultTable>
|
|
<div class="light">
|
|
<ShowLottie name="light_fail" width="100%" height="100%"></ShowLottie>
|
|
</div>
|
|
<div class="stars">
|
|
<ShowLottie name="star_burst_fail" width="100%" height="100%" :loop="false"></ShowLottie>
|
|
</div>
|
|
<div class="btn__box">
|
|
<div class="btn btn__exit animate__slideInLeft pointer" @click="exit">
|
|
<div class="btn__icon">
|
|
<img :src="img_close" />
|
|
</div>
|
|
<div class="btn__text">退出</div>
|
|
</div>
|
|
<div class="btn btn__next animate__slideInLeft pointer" @click="again">
|
|
<div class="btn__icon animate__animated animate__infinite animate__breath">
|
|
<img :src="img_again" />
|
|
</div>
|
|
<div class="btn__text">再练一次</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wordDetailPopup">
|
|
<van-popup v-model:show="showPop" position="bottom" @maskClick="handleMaskClick">
|
|
<SearchWordPup
|
|
v-if="showPop"
|
|
:wordId="wordIdRef"
|
|
:wordSpell="spellRef"
|
|
:closed="false"
|
|
@tapDown="tapExpand(false)"
|
|
></SearchWordPup>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import ResultTable from './ResultTable.vue'
|
|
import type { Statistics } from '../interface/index'
|
|
// import useSoundEffect from '@/hooks/useSoundEffect';
|
|
import useCommonAudio from '../../../../../hooks/useCommonAudio.ts'
|
|
|
|
import { $sleep } from '@/utils/tool'
|
|
import { watch } from 'vue'
|
|
import SearchWordPup from '../../../strangeBook/components/SearchWordPup.vue'
|
|
|
|
import useAudio from '../hooks/useAudio.ts'
|
|
const props = defineProps<{
|
|
status: boolean
|
|
levelTitle: string
|
|
levelNum?: string
|
|
timeStr: string
|
|
bombCount: number
|
|
glassCount: number
|
|
surrenderCount: number
|
|
allRightCount: number
|
|
rightRate: number
|
|
statList: Array<Statistics>
|
|
}>()
|
|
|
|
const emit = defineEmits(['exit', 'again'])
|
|
|
|
const OSS_URL = import.meta.env.VITE_OSS_URL
|
|
|
|
const img_close = `${OSS_URL}/english_client/normalMode/close.png`
|
|
const img_again = `${OSS_URL}/english_client/normalMode/again.png`
|
|
const sound = useCommonAudio(true)
|
|
const audio = useAudio()
|
|
const wordIdRef = ref('')
|
|
const spellRef = ref('')
|
|
const showCircle = ref(false)
|
|
const showPop = ref(false)
|
|
|
|
const height = ref()
|
|
const handlePopup = (wordId: string, spell: string) => {
|
|
wordIdRef.value = wordId
|
|
spellRef.value = spell
|
|
showPop.value = true
|
|
}
|
|
|
|
function tapExpand(val: boolean) {
|
|
showPop.value = false
|
|
}
|
|
|
|
function viewVisible(value: any) {
|
|
showCircle.value = value.value
|
|
}
|
|
|
|
function handleStop(event: any) {
|
|
event.stopPropagation() // 阻止事件冒泡
|
|
}
|
|
|
|
// 点击遮罩层触发
|
|
function handleMaskClick() {
|
|
showPop.value = false
|
|
}
|
|
// 窗口高度
|
|
function getHeight() {
|
|
height.value = window.innerHeight - 5
|
|
// uni.getSystemInfo({
|
|
// success: res => {
|
|
// // windowHeightRpx.value = res.windowHeight * (750 / res.windowWidth);
|
|
// height.value = res.windowHeight - 5;
|
|
// },
|
|
// });
|
|
}
|
|
|
|
function exit() {
|
|
sound.play('click.wav')
|
|
emit('exit')
|
|
}
|
|
|
|
function again() {
|
|
sound.play('click.wav')
|
|
emit('again')
|
|
}
|
|
|
|
watch(
|
|
() => props.status,
|
|
async nv => {
|
|
if (nv) {
|
|
audio.play('show_fail.mp3')
|
|
await $sleep(500)
|
|
sound.play('show_nextBtn.mp3')
|
|
await $sleep(500)
|
|
sound.play('show_nextBtn.mp3')
|
|
}
|
|
},
|
|
)
|
|
|
|
onMounted(() => {
|
|
window.onresize = () => {
|
|
getHeight()
|
|
}
|
|
getHeight()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
.masks {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(4px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.g-container {
|
|
position: relative;
|
|
width: 1462px;
|
|
height: 64.33vh;
|
|
padding: 6.5vh 64px 4vh;
|
|
border-radius: 3.33vh;
|
|
background: #fff;
|
|
.result {
|
|
position: absolute;
|
|
left: 0;
|
|
top: -9.33vh;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.theme {
|
|
width: 800px;
|
|
height: 25vh;
|
|
margin-left: -90px;
|
|
}
|
|
}
|
|
.megaphone {
|
|
position: absolute;
|
|
top: -6.17vh;
|
|
left: 323px;
|
|
img {
|
|
width: 16.67vh;
|
|
height: 16.67vh;
|
|
}
|
|
}
|
|
.text {
|
|
text-align: center;
|
|
font-family: $font-special;
|
|
margin-bottom: 2vh;
|
|
.title {
|
|
color: #736d20;
|
|
font-size: 3.33vh;
|
|
}
|
|
}
|
|
.light {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: -33.33vh;
|
|
transform: translateX(-50%);
|
|
z-index: -1;
|
|
width: 1300px;
|
|
height: 83.33vh;
|
|
}
|
|
.stars {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 5%;
|
|
transform: translate(-50%, -50%);
|
|
width: 800px;
|
|
height: 41.67vh;
|
|
}
|
|
.btn__box {
|
|
width: 12.08vh;
|
|
height: 38vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: -1;
|
|
}
|
|
.btn {
|
|
width: 12.08vh;
|
|
padding: 2.67vh 20px;
|
|
border-radius: 0 1.67vh 1.67vh 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.btn__icon img {
|
|
width: 8vh;
|
|
height: 8vh;
|
|
}
|
|
.btn__text {
|
|
color: #d9d163;
|
|
text-align: center;
|
|
font-size: 2vh;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.btn__exit {
|
|
height: 16.33vh;
|
|
border: 0.33vh solid #bf4d45;
|
|
border-left: none;
|
|
background-color: #fff2f2;
|
|
animation-delay: 0s;
|
|
animation-duration: 0.5s;
|
|
animation-fill-mode: both;
|
|
.btn__text {
|
|
color: #bf4d45;
|
|
}
|
|
}
|
|
.btn__next {
|
|
height: 21.67vh;
|
|
border: 0.33vh solid #bacc18;
|
|
border-left: none;
|
|
background-color: #fffbc2;
|
|
animation-delay: 0.5s;
|
|
animation-duration: 0.5s;
|
|
animation-fill-mode: both;
|
|
.btn__text {
|
|
color: #bacc18;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wordDetailPopup {
|
|
:deep(.uni-popup .uni-popup__wrapper) {
|
|
.shangxia_icon {
|
|
position: absolute;
|
|
left: calc(50% - 108px);
|
|
top: 0;
|
|
z-index: 9;
|
|
&::before {
|
|
content: '';
|
|
width: 1841px;
|
|
height: 11.08vh;
|
|
background: linear-gradient(180deg, #fffef5 1.38%, rgba(255, 254, 245, 0) 98.79%);
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.xiala-btn {
|
|
cursor: pointer;
|
|
height: 6.67vh;
|
|
width: 18vh;
|
|
border: 0.33vh solid #d9d163;
|
|
border-radius: 0 0 1.67vh 1.67vh;
|
|
box-sizing: border-box;
|
|
background-color: #fffbc2;
|
|
font-family: $font-text;
|
|
font-size: 2.67vh;
|
|
font-weight: 500;
|
|
color: #ccc018;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 32px;
|
|
filter: drop-shadow(0px 4px 4px rgba(153, 144, 18, 0.2));
|
|
.icon_name {
|
|
width: 4vh;
|
|
height: 4vh;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.text {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shangxia_icon1 {
|
|
z-index: 99;
|
|
}
|
|
|
|
.popup_box {
|
|
border: 0.33vh solid #d9d163;
|
|
background-color: #fffef5;
|
|
border-radius: 3.33vh 3.33vh 0 0;
|
|
overflow-y: scroll;
|
|
width: 100vw;
|
|
|
|
/* 隐藏滚动条 */
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
color: transparent;
|
|
}
|
|
|
|
.show_details {
|
|
// width: 1440px;
|
|
width: 1432px;
|
|
margin: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|