106 lines
2.0 KiB
Vue
106 lines
2.0 KiB
Vue
<template>
|
||
<view class="facility-card" @tap="handleClick">
|
||
<view class="facility-icon">
|
||
<text class="icon-text">{{ getIcon(facility.type) }}</text>
|
||
</view>
|
||
<view class="facility-content">
|
||
<text class="facility-name">{{ facility.name }}</text>
|
||
<text v-if="facility.floor" class="facility-floor">{{ facility.floor }}</text>
|
||
</view>
|
||
<view class="facility-arrow">
|
||
<text class="arrow-icon">›</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
interface Facility {
|
||
id: string
|
||
name: string
|
||
type: 'restroom' | 'cafe' | 'shop' | 'exit' | 'elevator' | 'info'
|
||
floor?: string
|
||
}
|
||
|
||
const props = defineProps<{
|
||
facility: Facility
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
click: [facility: Facility]
|
||
}>()
|
||
|
||
const getIcon = (type: string): string => {
|
||
const icons: Record<string, string> = {
|
||
restroom: '🚻',
|
||
cafe: '☕',
|
||
shop: '🛍️',
|
||
exit: '🚪',
|
||
elevator: '🛗',
|
||
info: 'ℹ️'
|
||
}
|
||
return icons[type] || '📍'
|
||
}
|
||
|
||
const handleClick = () => {
|
||
emit('click', props.facility)
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.facility-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-md);
|
||
background-color: var(--museum-bg-surface);
|
||
border-radius: var(--radius-button);
|
||
padding: var(--space-md);
|
||
box-shadow: var(--shadow-sm);
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.facility-card:active {
|
||
background-color: var(--museum-bg-light);
|
||
}
|
||
|
||
.facility-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: var(--museum-bg-light);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.icon-text {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.facility-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.facility-name {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: var(--museum-text-primary);
|
||
}
|
||
|
||
.facility-floor {
|
||
font-size: 12px;
|
||
color: var(--museum-text-disabled);
|
||
}
|
||
|
||
.facility-arrow {
|
||
color: var(--museum-text-disabled);
|
||
}
|
||
|
||
.arrow-icon {
|
||
font-size: 20px;
|
||
}
|
||
</style>
|