1 changed files with 264 additions and 0 deletions
@ -0,0 +1,264 @@ |
|||
<template> |
|||
<el-dialog |
|||
title="活动详情" |
|||
:visible.sync="visible" |
|||
width="375px" |
|||
class="activity-detail-dialog" |
|||
top="20px" |
|||
append-to-body |
|||
:close-on-click-modal="false" |
|||
@close="handleClose" |
|||
> |
|||
<div class="mini-program-container"> |
|||
<div class="content"> |
|||
<img v-if="activity.coverImage" class="activity-img" :src="`${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${activity.coverImage}`"> |
|||
<div v-else class="activity-img-placeholder" /> |
|||
|
|||
<div class="activity-base"> |
|||
<span class="title">{{ activity.title }}</span> |
|||
<div class="time"> |
|||
<i class="el-icon-time" /> |
|||
<span>{{ activity.startTime }} - {{ activity.endTime }}</span> |
|||
</div> |
|||
<div class="location"> |
|||
<i class="iconfont icon-weizhi-copy" /> |
|||
<span>{{ activity.activityLocation }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="rich-content"> |
|||
<span class="content-title">活动介绍/回顾</span> |
|||
<div class="content-html" v-html="activity.activityContent" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
export default { |
|||
name: 'ActivityDetail', |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
activity: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['baseApi']) |
|||
}, |
|||
methods: { |
|||
handleClose() { |
|||
this.$emit('update:activity', {}) |
|||
this.$emit('update:visible', false) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "~@/assets/styles/quillEditor.css"; |
|||
.activity-detail-dialog { |
|||
::v-deep .el-dialog{ |
|||
padding: 0 !important; |
|||
.el-dialog__header { |
|||
padding: 17px !important; |
|||
} |
|||
.el-dialog__body { |
|||
padding: 0; |
|||
overflow: hidden; |
|||
} |
|||
.el-dialog__footer { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.mini-program-container { |
|||
width: 100%; |
|||
height: 667px; |
|||
background-color: #f5f5f5; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
|
|||
::-webkit-scrollbar { |
|||
width: 4px; |
|||
height: 4px; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background-color: #afb6c4; |
|||
} |
|||
} |
|||
|
|||
// .header { |
|||
// height: 44px; |
|||
// background-color: #ffffff; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: space-between; |
|||
// padding: 0 16px; |
|||
// box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); |
|||
// } |
|||
|
|||
// .header-left { |
|||
// width: 44px; |
|||
// height: 44px; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: center; |
|||
// cursor: pointer; |
|||
// font-size: 20px; |
|||
// color: #333; |
|||
// } |
|||
|
|||
// .header-title { |
|||
// font-size: 17px; |
|||
// font-weight: 600; |
|||
// color: #333; |
|||
// } |
|||
|
|||
// .header-right { |
|||
// width: 60px; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: space-between; |
|||
// font-size: 20px; |
|||
// color: #333; |
|||
// } |
|||
|
|||
.content { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.activity-img { |
|||
display: block; |
|||
width: 100%; |
|||
// height: 180px; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.activity-img-placeholder { |
|||
width: 100%; |
|||
height: 180px; |
|||
background-color: #eee; |
|||
} |
|||
|
|||
.activity-base { |
|||
background: #fff; |
|||
padding: 15px; |
|||
margin-bottom: 10px; |
|||
.title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
padding-bottom: 10px; |
|||
color: #333; |
|||
} |
|||
.time, |
|||
.location { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
color: #999; |
|||
padding-top: 10px; |
|||
i { |
|||
padding-right: 4px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
.location { |
|||
i { |
|||
padding-right: 2px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.rich-content { |
|||
background: #fff; |
|||
.content-title { |
|||
position: relative; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
padding: 12px 0 10px 12px; |
|||
display: block; |
|||
&::before { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
margin-top: -9px; |
|||
content: ""; |
|||
width: 4px; |
|||
height: 18px; |
|||
background-color: #01a4fe; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content-html { |
|||
padding: 10px; |
|||
::v-deep img { |
|||
width: 100%; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
// .detail-bottom { |
|||
// position: absolute; |
|||
// bottom: 0; |
|||
// left: 0; |
|||
// right: 0; |
|||
// height: 50px; |
|||
// background: #fff; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: space-between; |
|||
// padding: 0 15px; |
|||
// box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05); |
|||
// } |
|||
|
|||
// .detail-left { |
|||
// display: flex; |
|||
// gap: 10px; |
|||
// } |
|||
|
|||
// .handle-btn { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// gap: 4px; |
|||
// background: #f5f5f5; |
|||
// border-radius: 30px; |
|||
// padding: 0 12px; |
|||
// height: 36px; |
|||
// font-size: 14px; |
|||
// color: #666; |
|||
// border: none; |
|||
// cursor: pointer; |
|||
// i { |
|||
// font-size: 16px; |
|||
// } |
|||
// } |
|||
|
|||
// .join-btn { |
|||
// background: #01a4fe; |
|||
// color: #fff; |
|||
// border-radius: 30px; |
|||
// padding: 0 20px; |
|||
// height: 36px; |
|||
// font-size: 14px; |
|||
// border: none; |
|||
// cursor: pointer; |
|||
// } |
|||
|
|||
// .disabled-btn { |
|||
// background: #ccc !important; |
|||
// cursor: not-allowed; |
|||
// } |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue