You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
1.8 KiB
89 lines
1.8 KiB
<script setup>
|
|
import { list as buttonList } from './list'
|
|
defineProps(['mapIdx'])
|
|
const emit = defineEmits(['handleMapIcon'])
|
|
</script>
|
|
<template>
|
|
<Teleport to="body">
|
|
<div class="control-area">
|
|
<div class="map-control-wrapper animate__fast animate__animated animate__fadeInUp">
|
|
<div class="map-item" @click="emit('handleMapIcon', item, index)" v-for="(item, index) of buttonList" :key="item.name">
|
|
<img :src="mapIdx === index ? item.iconActive : item.icon" alt="" class="map-icon" />
|
|
<span class="map-name">{{ switchLanguage(item, 'name') }}</span>
|
|
</div>
|
|
</div>
|
|
<img src="../../assets/images/map/hands.svg" alt="" class="hands" />
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.control-area {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
height: 104px;
|
|
left: 68px;
|
|
top: 952px;
|
|
z-index: 51;
|
|
|
|
.hands {
|
|
position: fixed;
|
|
top: 408px;
|
|
left: 68px;
|
|
width: 246px;
|
|
height: 80px;
|
|
z-index: 51;
|
|
}
|
|
}
|
|
.map-control-wrapper {
|
|
display: flex;
|
|
}
|
|
.map-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 12px;
|
|
}
|
|
.map-icon {
|
|
margin-bottom: 8px;
|
|
width: 52px;
|
|
}
|
|
.map-name {
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
@media (min-aspect-ratio: 1/1) {
|
|
.shop-list-wrapper {
|
|
width: 510px;
|
|
height: calc(100vh - 280px);
|
|
right: 0px;
|
|
bottom: 0;
|
|
left: auto;
|
|
top: auto;
|
|
.switch {
|
|
top: 24px;
|
|
}
|
|
.shop-scroll {
|
|
height: 100%;
|
|
margin-left: 54px;
|
|
}
|
|
}
|
|
.control-area {
|
|
left: 68px;
|
|
bottom: 40px;
|
|
right: auto;
|
|
top: auto;
|
|
height: auto;
|
|
.hands {
|
|
top: 280px;
|
|
left: 68px;
|
|
right: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|