Browse Source

feat: 8、活动详情,打开以后能够点击空白处关闭,加个关闭按钮

v1.0.1
jiannibang 3 years ago
parent
commit
81218f6952
  1. 17
      src/components/ActivitiesList/ActivitiesList.vue

17
src/components/ActivitiesList/ActivitiesList.vue

@ -1,13 +1,21 @@
<template> <template>
<ScrollView class="scroll" :list="list" :scrollX="isH" :scrollbar="!isH">
<ScrollView class="scroll" :list="list" :scrollX="isH" :scrollbar="!isH" @click="handleActivity(null)">
<TransitionGroup name="zoom" tag="div" class="scroll-content"> <TransitionGroup name="zoom" tag="div" class="scroll-content">
<div :class="['content-item', item === activity ? 'd' : '']" v-for="item of list" :key="item.activityId"> <div :class="['content-item', item === activity ? 'd' : '']" v-for="item of list" :key="item.activityId">
<div class="front">
<div
class="front"
@click="
e => {
e.stopPropagation()
handleActivity(item)
}
"
>
<img :src="config.sourceUrl + item.fileUrl" alt="" /> <img :src="config.sourceUrl + item.fileUrl" alt="" />
<div class="tr">{{ item.startDate }} - {{ item.endDate }}</div> <div class="tr">{{ item.startDate }} - {{ item.endDate }}</div>
<div class="bottom"> <div class="bottom">
<div class="left">{{ switchLanguage(item, 'activityName') }}</div> <div class="left">{{ switchLanguage(item, 'activityName') }}</div>
<div class="right" @click="handleActivity(item)">查看详情</div>
<div class="right">查看详情</div>
</div> </div>
</div> </div>
<div class="back"> <div class="back">
@ -42,11 +50,10 @@ defineProps({
default: () => [] default: () => []
} }
}) })
const showDetail = ref(false)
const activity = ref(null) const activity = ref(null)
function handleActivity(item) { function handleActivity(item) {
activity.value = item activity.value = item
showDetail.value = true
} }
const store = useStore() const store = useStore()
const { config } = storeToRefs(store) const { config } = storeToRefs(store)

Loading…
Cancel
Save