forked from zhouruizhe/gmTouringMiniApp
Initial commit: gmTouringMiniApp project
This commit is contained in:
周瑞哲
@@ -0,0 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
import type { PoiCategory } from '@/domain/poi'
|
||||
|
||||
defineProps<{
|
||||
categories: PoiCategory[]
|
||||
activeCategoryCode: string | null
|
||||
resultCount: number
|
||||
coverageLabel: string
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [categoryCode: string | null]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="map-filter-header">
|
||||
<view class="map-filter-header__heading">
|
||||
<view class="map-filter-header__title-block">
|
||||
<text class="map-filter-header__title">光明区文旅资源</text>
|
||||
<text class="map-filter-header__scope">{{ coverageLabel }}</text>
|
||||
</view>
|
||||
<text class="map-filter-header__count">共 {{ resultCount }} 个点位</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="map-filter-header__scroll" scroll-x :show-scrollbar="false">
|
||||
<view class="map-filter-header__chips">
|
||||
<button
|
||||
class="category-chip"
|
||||
:class="{ 'category-chip--active': activeCategoryCode === null }"
|
||||
:disabled="loading"
|
||||
hover-class="category-chip--hover"
|
||||
@click="emit('select', null)"
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
<button
|
||||
v-for="category in categories"
|
||||
:key="category.code"
|
||||
class="category-chip"
|
||||
:class="{ 'category-chip--active': activeCategoryCode === category.code }"
|
||||
:disabled="loading"
|
||||
hover-class="category-chip--hover"
|
||||
@click="emit('select', category.code)"
|
||||
>
|
||||
{{ category.name }}
|
||||
</button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.map-filter-header {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: none;
|
||||
padding: 20rpx 0 16rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 8rpx 28rpx rgb(24 32 29 / 8%);
|
||||
}
|
||||
|
||||
.map-filter-header__heading {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.map-filter-header__title-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.map-filter-header__title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
line-height: 46rpx;
|
||||
color: #18201d;
|
||||
}
|
||||
|
||||
.map-filter-header__scope,
|
||||
.map-filter-header__count {
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #5e6b65;
|
||||
}
|
||||
|
||||
.map-filter-header__count {
|
||||
flex: none;
|
||||
font-weight: 600;
|
||||
color: #167a5b;
|
||||
}
|
||||
|
||||
.map-filter-header__scroll {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
margin-top: 8rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.map-filter-header__chips {
|
||||
display: inline-flex;
|
||||
gap: 16rpx;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.category-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
min-width: 104rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 28rpx;
|
||||
margin: 0;
|
||||
font-size: 26rpx;
|
||||
line-height: 64rpx;
|
||||
color: #425049;
|
||||
white-space: nowrap;
|
||||
background: #f0f4f2;
|
||||
border: 0;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
.category-chip::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.category-chip--active {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: #167a5b;
|
||||
}
|
||||
|
||||
.category-chip--hover {
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.category-chip[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<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>
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as MapFilterHeader } from './MapFilterHeader.vue'
|
||||
export { default as PoiSummaryCard } from './PoiSummaryCard.vue'
|
||||
Reference in New Issue
Block a user