localization-management-system/src/views/weChatMiniProgram/module/activityDetail.vue

<template>
  <el-dialog
    title="活动详情"
    :visible="dialogVisible"
    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="`${imgHttpsUrl}/files/${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: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  computed: {
    ...mapGetters(['baseApi']),
    imgHttpsUrl() {
      if (process.env.NODE_ENV === 'production') {
        return (window.g && window.g.ApiUrl) || ''
      } else {
        return process.env.VUE_APP_WECHAT_URL
      }
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      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;
  }
  ::v-deep p{
    line-height: 1.5;
    margin: 15px 0;
  }

  ::v-deep blockquote {
    background-color: var(--w-e-textarea-slight-bg-color);
    border-left: 8px solid var(--w-e-textarea-selected-border-color);
    display: block;
    font-size: 100%;
    line-height: 1.5;
    margin: 10px 0;
    padding: 10px;
  }
  ::v-deep .table-container {
    border: 1px dashed #dcdfe6;
    border-radius: 5px;
    margin-top: 10px;
    overflow-x: auto;
    padding: 10px;
    width: 100%;
  }
  ::v-deep table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 10px 0;
  }
  ::v-deep table tr:nth-child(even) {
    background-color: #fafafa;
  }
  ::v-deep table td, ::v-deep table th {
    border: 1px solid #dcdfe6;
    padding: 8px 12px;
    text-align: center;
    font-size: 14px;
  }
}

// .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>