You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.2 KiB
140 lines
3.2 KiB
<template>
|
|
<ScrollView :list="list" class="search-result-scroll" :scrollbar="true">
|
|
<div class="scroll-result">
|
|
<h1 class="title">
|
|
搜索结果 <span class="meta">/ {{ list.length }}</span>
|
|
</h1>
|
|
<TransitionGroup name="zoom" tag="div" class="list">
|
|
<SearchResultItem :config="config" @click="handleShop" :shop="item" v-for="item of list" :key="item.shopId" />
|
|
</TransitionGroup>
|
|
</div>
|
|
</ScrollView>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ScrollView from '@/base/ScrollView/ScrollView.vue'
|
|
import SearchResultItem from '@/components/SearchResultItem/SearchResultItem.vue'
|
|
defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
config: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
const emits = defineEmits(['handle-shop'])
|
|
|
|
function handleShop(item) {
|
|
emits('handle-shop', item)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-result-scroll {
|
|
position: relative;
|
|
height: 842px;
|
|
overflow: hidden;
|
|
margin-left: 68px;
|
|
margin-right: 7px;
|
|
.scroll-result {
|
|
padding-bottom: 200px;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 44px;
|
|
}
|
|
.activity {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.pl-24 {
|
|
padding-left: 24px;
|
|
}
|
|
.activity-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 8px;
|
|
|
|
width: 457px;
|
|
height: 84px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 12px;
|
|
margin-right: 6px;
|
|
margin-bottom: 8px;
|
|
.activity-name {
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
font-family: 'font_bold';
|
|
padding-bottom: 16px;
|
|
}
|
|
.intro {
|
|
color: rgba(0, 0, 0, 0.6);
|
|
font-size: 14px;
|
|
}
|
|
.img-wrapper {
|
|
width: 120px;
|
|
height: 68px;
|
|
margin-right: 24px;
|
|
border-radius: 8px;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.title {
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-size: 24px;
|
|
line-height: 28px;
|
|
color: var(--search-resultTitleColor, rgba(0, 0, 0, 0.8));
|
|
.meta {
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
line-height: 23px;
|
|
color: var(--search-resultMetaColor, rgba(0, 0, 0, 0.6));
|
|
}
|
|
}
|
|
:deep(.bscroll-vertical-scrollbar) {
|
|
width: 48px !important;
|
|
background: center / 6px 250px no-repeat url(@/assets/images/scrollBar.png);
|
|
border-radius: 6px;
|
|
opacity: 1 !important;
|
|
height: 250px !important;
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
top: 120px;
|
|
margin: auto;
|
|
width: 48px;
|
|
height: 61px;
|
|
background: center / cover no-repeat url(@/assets/images/scrollHand.png);
|
|
animation: slideNhide 3s ease-in-out forwards;
|
|
}
|
|
.bscroll-indicator {
|
|
height: 95px !important;
|
|
width: 6px !important;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
background: #ffffff !important;
|
|
border-radius: 6px !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|