19 changed files with 372 additions and 122 deletions
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 709 KiB |
|
After Width: | Height: | Size: 61 KiB |
@ -0,0 +1,127 @@
@@ -0,0 +1,127 @@
|
||||
<template> |
||||
<div class="tips" v-if="dungeon"> |
||||
<img :src="close_icon" class="close" @click="emit('close')"></img> |
||||
<div class="title"> |
||||
{{ t('dungeonTips.0') }}: |
||||
<span v-if="show_lv_df.includes(dungeon.difficulty)">lv_{{ dungeon.lv }}</span> |
||||
{{ t('difficulty.' + dungeon.difficulty) }} |
||||
<span v-if="dungeon.difficulty == 'dami'">({{ layer }}{{ t('layer') }})</span> |
||||
</div> |
||||
<div class="tip"> |
||||
<p>- {{ t('dungeonTips.2') }}</p> |
||||
<p>- {{ t('dungeonTips.3') }}</p> |
||||
<p>- {{ t('dungeonTips.4') }}</p> |
||||
<p>- {{ t('dungeonTips.5') }}</p> |
||||
<p>- {{ t('dungeonTips.6') }}</p> |
||||
<p>- {{ t('dungeonTips.7') }}</p> |
||||
</div> |
||||
<div class="rates"> |
||||
{{ t('dungeonTips.1') }}: |
||||
<p :class="qualitys[4]">- {{ t('quality.' + qualitys[4]) }}:{{ rate4 }}</p> |
||||
<p v-if="!show_lv_df.includes(dungeon.difficulty)" :class="qualitys[5]"> |
||||
- {{ t('quality.' + qualitys[5]) }}:{{ rate5 }} |
||||
</p> |
||||
</div> |
||||
<div class="actions"> |
||||
<input type="checkbox" v-model="battle.repeat" id="repeat"> |
||||
<label for="repeat">{{ t('dungeonAction.0') }}</label> |
||||
<span v-if="dungeon.difficulty == 'dami'"> |
||||
<input type="checkbox" v-model="battle.upward" id="upward"> |
||||
<label for="upward">{{ t('dungeonAction.1') }}</label> |
||||
</span> |
||||
<button class="button" @click="emit('battle')">{{ t('dungeonAction.2') }}</button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { useStore } from "vuex"; |
||||
import { reactive, onMounted, ref, computed } from "vue"; |
||||
import { useI18n } from "vue3-i18n"; |
||||
import { close_icon, qualitys, show_lv_df } from "@/config"; |
||||
|
||||
const { t } = useI18n(); |
||||
const { state, commit, dispatch } = useStore(); |
||||
const emit = defineEmits(['close', 'battle']) |
||||
const rate4 = computed(() => { |
||||
if (!props.dungeon) { |
||||
return ''; |
||||
} |
||||
const boss = props.dungeon.monsters[4]; |
||||
return boss.extraRate[0] * 100 + '%'; |
||||
}) |
||||
const rate5 = computed(() => { |
||||
if (!props.dungeon) { |
||||
return ''; |
||||
} |
||||
const boss = props.dungeon.monsters[4]; |
||||
return boss.extraRate[1] * 100 + '%'; |
||||
}) |
||||
const battle = computed(() => { |
||||
return state.battle; |
||||
}) |
||||
const layer = computed(() => { |
||||
return state.playerAttribute.layer; |
||||
}) |
||||
|
||||
const props = defineProps({ |
||||
dungeon: { |
||||
type: Object, |
||||
default: null |
||||
}, |
||||
}) |
||||
|
||||
onMounted(() => { }); |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.tips { |
||||
background: rgba(0, 0, 0, 0.6); |
||||
position: absolute; |
||||
left: calc(50% - 10rem); |
||||
top: calc(50% - 8rem); |
||||
width: 20rem; |
||||
text-align: left; |
||||
padding: 0.4rem; |
||||
|
||||
.close { |
||||
cursor: pointer; |
||||
width: 2rem; |
||||
height: 2rem; |
||||
float: right; |
||||
} |
||||
|
||||
.title { |
||||
height: 3rem; |
||||
line-height: 3rem; |
||||
font-size: 1.2rem; |
||||
} |
||||
|
||||
.tip { |
||||
padding-left: 0.4rem; |
||||
|
||||
p { |
||||
color: #999; |
||||
font-size: 0.8rem; |
||||
margin: 0rem; |
||||
} |
||||
} |
||||
|
||||
.rates { |
||||
margin-top: 0.5rem; |
||||
|
||||
p { |
||||
padding-left: 0.4rem; |
||||
} |
||||
} |
||||
|
||||
.actions { |
||||
position: relative; |
||||
bottom: 0; |
||||
margin-top: 0.5rem; |
||||
|
||||
button { |
||||
float: right; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue