chore: initialize frontend miniapp repository
This commit is contained in:
107
src/components/content/ExhibitCard.vue
Normal file
107
src/components/content/ExhibitCard.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<view class="exhibit-card" @tap="handleClick">
|
||||
<image v-if="exhibit.image" class="exhibit-image" :src="exhibit.image" mode="aspectFill" />
|
||||
<view class="exhibit-content">
|
||||
<text class="exhibit-name">{{ exhibit.name }}</text>
|
||||
<text v-if="exhibit.artist" class="exhibit-artist">{{ exhibit.artist }}</text>
|
||||
<view v-if="exhibit.hall" class="exhibit-meta">
|
||||
<text class="meta-text">📍 {{ exhibit.hall }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="exhibit.hasAudio" class="audio-badge">
|
||||
<text class="audio-icon">🎧</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Exhibit {
|
||||
id: string
|
||||
name: string
|
||||
artist?: string
|
||||
hall?: string
|
||||
image?: string
|
||||
hasAudio?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
exhibit: Exhibit
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: [exhibit: Exhibit]
|
||||
}>()
|
||||
|
||||
const handleClick = () => {
|
||||
emit('click', props.exhibit)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.exhibit-card {
|
||||
position: relative;
|
||||
background-color: var(--museum-bg-surface);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.exhibit-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.exhibit-image {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
background-color: var(--museum-bg-light);
|
||||
}
|
||||
|
||||
.exhibit-content {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.exhibit-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--museum-text-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.exhibit-artist {
|
||||
font-size: 13px;
|
||||
color: var(--museum-text-secondary);
|
||||
margin-bottom: var(--space-sm);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.exhibit-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
font-size: 12px;
|
||||
color: var(--museum-text-disabled);
|
||||
}
|
||||
|
||||
.audio-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: var(--museum-accent);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.audio-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
105
src/components/content/FacilityCard.vue
Normal file
105
src/components/content/FacilityCard.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<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>
|
||||
106
src/components/content/HallCard.vue
Normal file
106
src/components/content/HallCard.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="hall-card" @tap="handleClick">
|
||||
<image v-if="hall.image" class="hall-image" :src="hall.image" mode="aspectFill" />
|
||||
<view class="hall-content">
|
||||
<view class="hall-header">
|
||||
<text class="hall-name">{{ hall.name }}</text>
|
||||
<text v-if="hall.floor" class="hall-floor">{{ hall.floor }}</text>
|
||||
</view>
|
||||
<text v-if="hall.description" class="hall-description">{{ hall.description }}</text>
|
||||
<view v-if="hall.exhibitCount" class="hall-meta">
|
||||
<text class="meta-text">{{ hall.exhibitCount }} 件展品</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Hall {
|
||||
id: string
|
||||
name: string
|
||||
floor?: string
|
||||
description?: string
|
||||
image?: string
|
||||
exhibitCount?: number
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
hall: Hall
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: [hall: Hall]
|
||||
}>()
|
||||
|
||||
const handleClick = () => {
|
||||
emit('click', props.hall)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.hall-card {
|
||||
background-color: var(--museum-bg-surface);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.hall-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.hall-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background-color: var(--museum-bg-light);
|
||||
}
|
||||
|
||||
.hall-content {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.hall-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.hall-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--museum-text-primary);
|
||||
}
|
||||
|
||||
.hall-floor {
|
||||
font-size: 12px;
|
||||
color: var(--museum-text-disabled);
|
||||
background-color: var(--museum-bg-light);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.hall-description {
|
||||
font-size: 14px;
|
||||
color: var(--museum-text-secondary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-sm);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hall-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
font-size: 12px;
|
||||
color: var(--museum-text-disabled);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user