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