118 lines
2.5 KiB
Vue
118 lines
2.5 KiB
Vue
<template>
|
|
<view
|
|
:id="'cabin-' + cabin.key"
|
|
class="cabin-wrapper"
|
|
:class="{
|
|
'cabin-nickname-mine': cabin.isMine || cabin.nickname === currentUserNickname,
|
|
'cabin-slots-zero': cabin.sharedBoothSlotsRemaining === 0
|
|
}"
|
|
:style="{ left: cabin.x + 'px', top: cabin.y + 'px', width: cabin.w + 'px' }"
|
|
@click="handleClick"
|
|
>
|
|
<image
|
|
class="cabin-icon"
|
|
:src="cabin.src"
|
|
:style="{ width: cabin.w + 'px', height: cabin.h + 'px' }"
|
|
mode="aspectFit"
|
|
/>
|
|
|
|
<text v-if="cabin.showNickname && cabin.nickname" class="cabin-nickname">
|
|
{{ cabin.nickname === currentUserNickname ? '我的小屋' : cabin.nickname }}
|
|
</text>
|
|
<text v-else class="cabin-nickname cabin-nickname--empty">小屋暂无人居住</text>
|
|
|
|
<view v-if="cabin.showDialog" class="cabin-slots-dialog">
|
|
<text class="cabin-slots-text text-white">
|
|
剩余 <text class="text-orange">{{ cabin.sharedBoothSlotsRemaining }}</text> 个展位
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
cabin: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
currentUserNickname: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['click'])
|
|
|
|
const handleClick = () => {
|
|
emit('click', props.cabin)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cabin-wrapper {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.cabin-icon {
|
|
display: block;
|
|
}
|
|
|
|
.cabin-slots-zero .cabin-icon {
|
|
filter: grayscale(100%);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.cabin-nickname {
|
|
font-size: 20rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.6);
|
|
margin-top: 4rpx;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cabin-nickname--empty {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-style: italic;
|
|
}
|
|
|
|
.cabin-slots-dialog {
|
|
position: absolute;
|
|
top: -50rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-image: url('/static/icon/tips-bg.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
padding: 8rpx 24rpx 18rpx;
|
|
width: max-content;
|
|
z-index: 10;
|
|
}
|
|
|
|
.cabin-slots-text {
|
|
font-size: 18rpx;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.text-white {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.text-orange {
|
|
color: #FFB800;
|
|
font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
|
|
text-shadow:
|
|
0 0 10rpx rgba(255, 184, 0, 0.8),
|
|
0 2rpx 4rpx rgba(0, 0, 0, 0.5);
|
|
}
|
|
</style>
|