gmTouringMiniApp/src/components/map/PoiSummaryCard.vue

<script setup lang="ts">
import type { PoiSummary } from '@/domain/poi'
import PoiImage from '@/components/poi/PoiImage.vue'
import PoiTagList from '@/components/poi/PoiTagList.vue'
import { formatRecommendationLabel } from '@/domain/poi'

defineProps<{
  poi: PoiSummary
}>()

const emit = defineEmits<{
  close: []
  detail: [poiId: string]
}>()
</script>

<template>
  <view class="poi-summary">
    <PoiImage
      class="poi-summary__image"
      :src="poi.coverImage.url"
      :alt="poi.coverImage.alt"
      width="192rpx"
      height="192rpx"
      radius="16rpx"
    />

    <view class="poi-summary__content">
      <view class="poi-summary__heading">
        <view class="poi-summary__heading-copy">
          <text class="poi-summary__name">{{ poi.name }}</text>
          <text class="poi-summary__category">{{ poi.categoryName }}</text>
        </view>
        <button class="poi-summary__close" aria-label="关闭点位摘要" @click="emit('close')">
          ×
        </button>
      </view>

      <text class="poi-summary__description">{{ poi.summary }}</text>
      <view class="poi-summary__recommendation">
        {{ formatRecommendationLabel(poi.recommendationSource, poi.recommendationIndex) }}
      </view>
      <PoiTagList :tags="poi.tags" :limit="2" compact />

      <button class="poi-summary__detail" hover-class="poi-summary__detail--hover" @click="emit('detail', poi.id)">
        查看详情
      </button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.poi-summary {
  display: flex;
  gap: 24rpx;
  min-height: 264rpx;
  padding: 24rpx;
  margin: 24rpx;
  background: #fff;
  border: 1rpx solid #dde5e1;
  border-radius: 24rpx;
  box-shadow: 0 16rpx 48rpx rgb(24 32 29 / 10%);
}

.poi-summary__image {
  flex: none;
}

.poi-summary__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.poi-summary__heading {
  display: flex;
  gap: 12rpx;
  align-items: flex-start;
  justify-content: space-between;
}

.poi-summary__heading-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.poi-summary__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 44rpx;
  color: #18201d;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.poi-summary__category {
  margin-top: 2rpx;
  font-size: 22rpx;
  line-height: 32rpx;
  color: #167a5b;
}

.poi-summary__close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 72rpx;
  height: 72rpx;
  padding: 0;
  margin: -18rpx -18rpx 0 0;
  font-size: 44rpx;
  line-height: 72rpx;
  color: #8a9690;
  background: transparent;
  border: 0;
}

.poi-summary__close::after {
  border: 0;
}

.poi-summary__description {
  display: -webkit-box;
  margin: 8rpx 0;
  overflow: hidden;
  font-size: 26rpx;
  line-height: 38rpx;
  color: #5e6b65;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.poi-summary__recommendation {
  align-self: flex-start;
  padding: 5rpx 12rpx;
  margin-bottom: 10rpx;
  font-size: 22rpx;
  font-weight: 600;
  line-height: 32rpx;
  color: #934b00;
  background: #fff3e0;
  border-radius: 8rpx;
}

.poi-summary__detail {
  width: 100%;
  height: 64rpx;
  padding: 0 24rpx;
  margin: auto 0 0;
  font-size: 26rpx;
  font-weight: 600;
  line-height: 64rpx;
  color: #fff;
  background: #167a5b;
  border: 0;
  border-radius: 32rpx;
}

.poi-summary__detail::after {
  border: 0;
}

.poi-summary__detail--hover {
  background: #0e6247;
}
</style>