forked from zhouruizhe/gmTouringMiniApp
172 lines
3.4 KiB
Vue
172 lines
3.4 KiB
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>
|