saas_pc/src/pages/person-center/my-message/index.vue

<template>
  <div class="my-message">
    <div class="my-message__header">
      <el-tabs :value="formData.systemStatusList" @tab-click="tabChange">
        <el-tab-pane
          :label="item.label"
          :name="item.systemStatus"
          v-for="(item, index) in tabList"
          :key="index"
        ></el-tab-pane>
      </el-tabs>
    </div>

    <div class="my-message__body">
      <div class="content">
        <div class="content__header">
          <div class="text">
            未读共
            <span class="note">{{ receiptNum }}</span>
            条
          </div>

          <el-button
            type="danger"
            @click="clearMsg"
            round
            plain
            class="btn btn--red"
            >清空</el-button
          >
          <el-button
            type="primary"
            round
            plain
            class="btn"
            @click="uploadMsgStatus"
            >全部标为已读</el-button
          >
        </div>
        <div class="content__body">
          <div class="no-data" v-if="list.length == 0">暂无消息</div>
          <template v-else>
            <div class="message-list" v-if="listListStatus">
              <div
                class="message-list__item"
                v-for="(item, index) in list"
                :key="index"
              >
                <div
                  class="icon"
                  :class="{ 'icon--blue': item.systemStatus === 1 ? '' : true }"
                >
                  <i
                    v-if="item.systemStatus === 1"
                    class="el-icon-message-solid"
                  ></i>

                  <i v-else class="el-icon-s-custom"></i>
                </div>
                <div class="text">
                  <div class="desc">
                    {{ $tools.timestampToTime(item.sendTime, false) }}
                  </div>
                  <div
                    class="title"
                    :style="item.receiptStatus == 1 ? 'color:#999' : ''"
                  >
                    {{
                      item.systemStatus === 2
                        ? item.informVo.informName
                        : item.systemStatus === 1
                        ? item.text
                        : "接口异常"
                    }}
                  </div>
                </div>
                <el-button type="primary" class="btn" @click="showDetail(item)"
                  >查看详情</el-button
                >
              </div>
            </div>

            <div class="pagination">
              <el-pagination
                @current-change="currentChange"
                background
                layout="prev, pager, next"
                :total="total"
                :pager-count="5"
                :page-size="formData.pageSize"
              >
              </el-pagination>
            </div>
          </template>
        </div>
      </div>
    </div>

    <el-dialog
      width="600px"
      class="my-message-modal"
      :visible.sync="showDetailModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="my-message-modal__content">
        <div class="my-message-modal__close" @click="showDetailModal = false">
          X
        </div>
        <div class="my-message-modal__header">通知详情</div>
        <div class="my-message-modal__body">
          <div class="content">
            <div class="content__body">
              <div class="title">
                {{
                  listData.systemStatus === 2
                    ? listData.informVo.informName
                    : listData.systemStatus === 1
                    ? listData.remind
                    : ""
                }}
              </div>
              <div class="desc">
                {{ $tools.timestampToTime(listData.sendTime, false) }}
              </div>

              <div
                class="content"
                v-if="listData.systemStatus === 2"
                v-html="listData.informVo.affiche"
              ></div>
              <div class="content" v-if="listData.systemStatus === 1">
                {{ listData.text }}
              </div>

              <div class="list" v-if="listData.informVo">
                <div
                  class="item"
                  v-for="(item, index) in listData.informVo.informCourseVo"
                  :key="'informVo' + index"
                >
                  <div class="item__title">{{ item.goodsName }}</div>
                  <div class="item__desc">
                    {{ item.courseName
                    }}{{ item.moduleName ? "/" + item.moduleName : ""
                    }}{{ item.chapterName ? "/" + item.chapterName : ""
                    }}{{ item.sectionName }}
                  </div>
                  <div v-if="false" class="item__content" @click="jumpSection(item)">
                    {{
                      $tools.secondToTime(item.topicNum, false)
                    }}（点击可直接跳转）
                  </div>
                </div>
                <div
                  class="item"
                  v-for="(item, index) in listData.informVo.informExamVo"
                  :key="'informExamVo' + index"
                >
                  <div class="item__title">{{ item.goodsName }}</div>
                  <div class="item__desc">
                    {{ item.moduleName ? "/" + item.moduleName : ""
                    }}{{ item.chapterName ? "/" + item.chapterName : ""
                    }}{{ item.examName }}
                  </div>
                  <div v-if="false" class="item__content" @click="jumpExam(item)">
                    第{{ item.topicNum }}道题（点击可直接跳转）
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="my-message-modal__footer"
          v-if="
            (statusGO &&
              listData.systemStatus === 1 &&
              getNames(listData.remindId) !== '') ||
              (listData.systemStatus === 2 && listData.receiptStatus === 0)
          "
        >
          <el-button
            type="primary"
            class="confirm"
            @click="isOk"
            v-if="listData.systemStatus === 2 && listData.receiptStatus === 0"
          >
            我已阅读
          </el-button>
          <el-button
            type="primary"
            class="confirm"
            @click="jumpFuns(goodsData, listData.remindId)"
            v-if="
              statusGO &&
                listData.systemStatus === 1 &&
                getNames(listData.remindId) !== ''
            "
          >
            {{ getNames(listData.remindId) }}
          </el-button>
        </div>
      </div>
    </el-dialog>

    <RebuildModal
      ref="rebuildModal"
      @rebuildSubmit="rebuildSubmit($event)"
    ></RebuildModal>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import RebuildModal from "@/components/rebuildModal";
export default {
  name: "MyMessage",
  components: {
    RebuildModal
  },
  data() {
    return {
      showDetailModal: false,
      tabList: [
        {
          label: "系统消息",
          systemStatus: "1"
        },
        {
          label: "教务消息",
          systemStatus: "2"
        }
      ],
      formData: {
        systemStatusList: "1", //1系统消息2教务消息
        pageNum: 1,
        pageSize: 10
      },
      goodsData: {},
      list: [],
      listData: {},
      messageId: 0,
      sysTime: 0,
      statusGO: true,
      total: 0,
      rebuildItems: {},
      rebuildItem: [],
      listListStatus: true,
      receiptNum: 0, //未读数量
      orderGoodsId: 0
    };
  },
  mounted() {
    this.getappinformUserlist();
  },
  methods: {
    ...mapMutations(["getMsgCount"]),
    getreceiptStatus() {
      this.$request
        .getappinformUserlist({
          systemStatusList: this.formData.systemStatusList,
          receiptStatus: 0
        })
        .then(res => {
          this.receiptNum = res.total;
        });
    },
    /**
     * 全部已读
     */
    uploadMsgStatus() {
      this.$confirm("确定全部标记为已读？")
        .then(_ => {
          this.$request
            .courseappinformUserupdateAllRead({
              systemStatus: this.formData.systemStatusList
            })
            .then(res => {
              this.getMsgCount();
              this.$message.success("成功");
              this.getappinformUserlist();
            });
        })
        .catch(_ => {});
    },
    currentChange(e) {
      this.formData.pageNum = e;
      this.getappinformUserlist();
    },
    tabChange(e) {
      if (this.formData.systemStatusList == e.name) return;
      this.formData.systemStatusList = e.name;
      this.formData.pageNum = 1;
      this.getappinformUserlist();
    },
    getappinformUserlist() {
      this.listListStatus = false;
      this.$request
        .getappinformUserlist(this.formData)
        .then(res => {
          this.list = res.rows;
          this.total = res.total;
          this.getreceiptStatus();
          this.getMsgCount();
        })
        .finally(() => {
          this.listListStatus = true;
        });
    },

    /**
     * 清空消息
     */
    clearMsg() {
      this.$confirm("清空消息吗？")
        .then(_ => {
          this.$request.appInformUserRemoveAll().then(res => {
            this.getMsgCount();
            this.formData.pageNum = 1;
            this.getappinformUserlist();
          });
        })
        .catch(_ => {});
    },

    getNames(int) {
      var arsty = "";
      switch (int) {
        case 1:
        case 3:
        case 5:
        case 6:
        case 7:
        case 19:
        case 21:
        case 22:
        case 23:
        case 28:
        case 29:
        case 31:
        case 32:
          arsty = "立刻学习";
          break;
        case 2:
        case 4:
        case 24:
          arsty = "马上填写";
          break;
        case 10:
        case 12:
        case 18:
          arsty = "立即重学";
          break;
        case 11:
          arsty = "立即预约";
          break;
        case 13:
          arsty = "预约考试";
          break;
        case 20:
          arsty = "重新购买";
          break;
        default:
          break;
      }
      return arsty;
    },

    //跳转页面
    async jumpFuns(item, remindId) {
      switch (remindId) {
        case 1:
        case 3:
        case 5:
        case 6:
        case 7:
        case 19:
        case 21:
        case 22:
        case 23:
        case 10:
        case 12:
        case 18:
        case 28:
        case 29:
        case 31:
        case 32:
          //课程

          if (item.goodsType == 1 || item.goodsType == 6) {
            item.orderGoodsId = this.orderGoodsId;
            this.canJump(item).then(res => {
              this.$router.push({
                path: `/my-course-detail/${item.goodsId}`,
                query: {
                  gradeId: item.gradeId,
                  orderGoodsId: item.orderGoodsId,
                  courseId: res.rows[0].courseId || ""
                }
              });
            });

            // arsty = '立刻学习';

            //题库
          } else if (item.goodsType == 2) {
            this.$router.push({
              path: "/person-center/my-bank/bank-detail/" + item.goodsId,
              query: {
                orderGoodsId: item.orderGoodsId
              }
            });
          }

          break;
        case 2:
        case 4:
        case 24:
          console.log(item, "item");
          item.orderGoodsId = this.orderGoodsId;
          this.canJump(item).then(res => {
            this.$router.push({
              path: `/my-course-detail/${item.goodsId}`,
              query: {
                gradeId: item.gradeId,
                orderGoodsId: item.orderGoodsId,
                courseId: res.rows[0].courseId || ""
              }
            });
          });
          break;
        case 11:
        case 13:
          var data = {
            goodsId: item.goodsId,
            gradeId: item.gradeId
          };
          this.$request
            .getApplysubscribe(data)
            .then(res => {
              this.$router.push({
                path: "/person-center/my-examination/appointment",
                query: {
                  goodsId: item.goodsId,
                  gradeId: item.gradeId
                }
              });
            })
            .catch(err => {
              this.$message({
                type: "warning",
                message: err.msg
              });
            });
          break;
        case 20:
          item.orderGoodsId = this.orderGoodsId;
          this.canJump(item).then(res => {
            this.$router.push({
              path: `/my-course-detail/${item.goodsId}`,
              query: {
                gradeId: item.gradeId,
                orderGoodsId: item.orderGoodsId,
                courseId: res.rows[0].courseId || ""
              }
            });
          });
          break;
        default:
          break;
      }
    },

    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise(resolve => {
        this.$request
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId
          })
          .then(res => {
            resolve(res.data);
          });
      });
    },

    rebuildSubmit(item) {
      this.$router.push({
        path: `/my-course-detail/${item.goodsId}`,
        query: {
          gradeId: item.gradeId,
          orderGoodsId: item.orderGoodsId,
          rebuild: 1
        }
      });
    },

    showDetail(item) {
      this.sysTime = this.$tools.timest();
      this.messageId = item.id;
      this.orderGoodsId = item.orderGoodsId;
      this.getMessage();
    },
    isOk() {
      this.$request
        .courseappinformUser({ id: this.listData.id, receiptStatus: 1 })
        .then(res => {
          this.getappinformUserlist();
        });

      this.showDetailModal = false;
    },
    getMessage() {
      this.$request.getappinformUserId(this.messageId).then(res => {
        if (
          res.data.receiptStatus === 1 &&
          (res.data.remindId === 2 ||
            res.data.remindId === 4 ||
            res.data.remindId === 24)
        ) {
          this.$request
            .getbaseprofiletpgetInfo({ goodsId: res.data.goodsId })
            .then(k => {
              if (
                (k.data.status === 3 && k.data.changeStatus === 2) ||
                k.data.status === 2 ||
                k.data.status === 1
              ) {
                this.statusGO = false;
              } else {
                this.statusGO = true;
              }
            });
        }
        if (!res.data.receiptStatus) {
          this.$request
            .courseappinformUser({ id: res.data.id, receiptStatus: 1 })
            .then(res => {});
        }
        if (res.data.informVo && res.data.informVo.affiche) {
          res.data.informVo.affiche = res.data.informVo.affiche.replace(
            /<img/gi,
            '<img style="max-width:100%;"'
          );
        }
        this.listData = res.data;
        console.log(this.listData, "listData");
        if (res.data.goodsId) {
          if (res.data.gradeId) {
            this.$request.goodsDetail(res.data.goodsId).then(rs => {
              this.goodsData = rs.data;
              this.showDetailModal = true;
              if (
                rs.data.goodsType === 3 &&
                (res.data.remindId === 1 ||
                  res.data.remindId === 3 ||
                  res.data.remindId === 5 ||
                  res.data.remindId === 6 ||
                  res.data.remindId === 7 ||
                  res.data.remindId === 19 ||
                  res.data.remindId === 21 ||
                  res.data.remindId === 22)
              ) {
                this.statusGO = false;
              } else {
                this.statusGO = true;
              }
            });
          } else {
            this.$request.commonGoodsDetail(res.data.goodsId).then(rs => {
              this.goodsData = rs.data;
              this.showDetailModal = true;
              if (
                rs.data.goodsType === 3 &&
                (res.data.remindId === 1 ||
                  res.data.remindId === 3 ||
                  res.data.remindId === 5 ||
                  res.data.remindId === 6 ||
                  res.data.remindId === 7 ||
                  res.data.remindId === 19 ||
                  res.data.remindId === 21 ||
                  res.data.remindId === 22)
              ) {
                this.statusGO = false;
              } else {
                this.statusGO = true;
              }
            });
          }
        } else {
          this.showDetailModal = true;
        }
        this.getappinformUserlist();
      });
    },

    canJump(item) {
      return new Promise(resolve => {
        this.$request
          .orderInfo({
            orderGoodsId: item.orderGoodsId
          })
          .then(async res => {
            let items = res.data;
            let currentTime = this.$tools.timest();
            console.log(currentTime);
            console.log(items);
            console.log(items.serviceStartTime);
            console.log(items.serviceEndTime);
            console.log(
              currentTime < items.serviceStartTime ||
                currentTime > items.serviceEndTime
            );
            if (items.interfaceAccountId > 0) {
              //学习账号已开通

              if (items.learnStatus == 1) {
                //跳转第三方h5

                const confirmText = [
                  "您的学习账号已经开通，请按照步骤操作，进行学习。",
                  "1.点击【跳转学习网址】按钮",
                  "2.打开学习网址后，选择【个人用户】进行登录",
                  "(1)账号：您个人的身份证号码",
                  "(2)密码：身份证号码，再加111111"
                ];
                const newDatas = [];
                const h = this.$createElement;
                for (const i in confirmText) {
                  newDatas.push(h("p", null, confirmText[i]));
                }
                this.$confirm(h("div", null, newDatas), "温馨提示", {
                  confirmButtonText: "跳转学习网址",
                  cancelButtonText: "关闭",
                  closeOnClickModal: false,
                  closeOnPressEscape: false,
                  distinguishCancelAndClose: false,
                  showClose: false
                })
                  .then(_ => {
                    window.open("http://admin.zhujianpeixun.com/", "_blank");
                  })
                  .catch(_ => {});

                return;
              } else {
                this.$message({
                  type: "warning",
                  message:
                    "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！"
                });
                return;
              }
            }
            // //内部系统
            // if (items.interfacePushId > 0 && items.officialStatus != 1) {
            //   this.$message({
            //     type: "warning",
            //     message:
            //       "机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！",
            //   });
            //   return;
            // }
            if (items.goodsType !== 6) {
              if (
                this.sysTime <= items.serviceStartTime ||
                this.sysTime >= items.serviceEndTime
              ) {
                this.$message({
                  type: "warning",
                  message: "不在学习服务期，不能进入学习"
                });
                return;
              }

              if (
                (items.classStartTime &&
                  this.sysTime <= items.classStartTime) ||
                (items.classEndTime && this.sysTime >= items.classEndTime)
              ) {
                this.$message({
                  type: "warning",
                  message: "不在班级有效期，不能进入学习"
                });
                return;
              }

              if (items.learningStatus == 2) {
                this.$message({
                  type: "warning",
                  message: "开放学习时间待定，不能进入学习"
                });
                return;
              }

              if (items.classStatus == 0) {
                this.$message({
                  type: "warning",
                  message: "尚未开班，不能进入学习"
                });
                return;
              }
              if (
                items.learningStatus == 3 &&
                this.sysTime < items.learningTimeStart
              ) {
                this.$message({
                  type: "warning",
                  message: "不在开放学习时间,不能进入学习"
                });
                return;
              }

              let rebuildStatus = await this.courseGoodsRebuildStatus(
                items.goodsId,
                items.gradeId
              );

              if (rebuildStatus == 0) {
                this.$refs.rebuildModal.showModal(items);
                return;
              }
            }
            // if (item.educationName == "继续教育") {
            this.$request
              .lockLockStatus({
                action: "jxjy"
              })
              .then(res => {
                //有其他端在操作，不能学习
                this.$confirm("有其他端在操作，是否将该用户踢下线？", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                })
                  .then(() => {
                    this.$request.appuseroffline().then(r => {
                      //可以学习
                this.$request
                  .courseCourseList({
                    pageNum: 1,
                    pageSize: 1,
                    goodsId: items.goodsId,
                    gradeId: items.gradeId
                  })
                  .then(res => {
                    if (res.rows.length) {
                      resolve(res);
                    } else {
                      this.$message({
                        type: "warning",
                        message: "课程内暂无可以学习的科目"
                      });
                    }
                  });
                    });
                  })
                  .catch(() => {});
              })
              .catch(err => {
                //可以学习
                this.$request
                  .courseCourseList({
                    pageNum: 1,
                    pageSize: 1,
                    goodsId: items.goodsId,
                    gradeId: items.gradeId
                  })
                  .then(res => {
                    if (res.rows.length) {
                      resolve(res);
                    } else {
                      this.$message({
                        type: "warning",
                        message: "课程内暂无可以学习的科目"
                      });
                    }
                  });
              });
            // } else {
            //   this.$request
            //     .courseCourseList({
            //       pageNum: 1,
            //       pageSize: 1,
            //       goodsId: items.goodsId,
            //       gradeId: items.gradeId,
            //     })
            //     .then((res) => {
            //       if (res.rows.length) {
            //         resolve(res);
            //       } else {
            //         this.$message({
            //           type: "warning",
            //           message: "课程内暂无可以学习的科目",
            //         });
            //       }
            //     });
            // }
          });
      });
    },

    //跳转节视频
    async jumpSection(item) {
      // item.orderGoodsId = this.orderGoodsId;
      // this.canJump(item).then((res) => {
      item.noteSecond = Number(item.topicNum) * 60; //转秒数\
      this.$router.push({
        path: "/my-course-detail/" + item.goodsId,
        query: {
          courseId: item.courseId,
          sectionId: item.sectionId,
          moduleId: item.moduleId || 0,
          chapterId: item.chapterId || 0,
          recordingUrl: item.recordingUrl,
          noteSecond: item.noteSecond
        }
      });
      // });
    },
    //跳转题库题目
    jumpExam(item) {
      this.$router.push({
        path: "/bank-exam/" + item.goodsId,
        query: {
          current: item.topicNum - 1,
          examId: item.examId,
          moduleId: item.moduleId || 0,
          chapterId: item.chapterId || 0
        }
      });
      console.log(item);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.my-message {
  &__header {
    /deep/ .el-tabs__header {
      margin-bottom: 0;
    }
  }
  &__body {
    .content {
      &__header {
        height: 64px;
        display: flex;
        align-items: center;

        .text {
          flex: 1;
          padding-left: 28px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
          .note {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #3f8dfd;
          }
        }

        .btn {
          cursor: pointer;
          margin: 0 14px;
          width: 122px;
          height: 32px;
          border-radius: 16px;
          padding: 0;
          text-align: center;
          line-height: 30px;
          font-size: 16px;
          &--red {
            border-color: #ff3b30;
          }
        }
      }

      &__body {
        .message-list {
          &__item {
            margin-bottom: 24px;
            display: flex;
            border: 1px solid #eee;
            padding: 30px 24px;
            align-items: center;
            border-radius: 8px;

            .icon {
              width: 40px;
              height: 40px;
              background: rgba(255, 209, 0, 1);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              center &--blue {
                background: rgba(0, 122, 255, 1);
              }

              i {
                font-size: 24px;
                color: #fff;
              }
            }

            .text {
              flex: 1;
              padding-left: 16px;
              .title {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                margin-top: 10px;
              }

              .desc {
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;
              }

              .content {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #666;
              }
            }

            .btn {
              cursor: pointer;
              width: 122px;
              height: 32px;
              padding: 0;
              border-radius: 16px;
              text-align: center;
              line-height: 32px;
              font-size: 16px;
            }
          }
        }

        .no-data {
          text-align: center;
          padding: 50px 0;
          color: #666;
          font-size: 16px;
        }

        .pagination {
          padding: 30px 0;
          text-align: center;
        }
      }
    }
  }

  .rebuild {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: -28px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #eee;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__header {
      height: 40px;
      border-bottom: 1px solid #eee;
      line-height: 40px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      padding-left: 24px;
    }

    &__body {
      height: 400px;
      padding: 0 24px;

      .content {
        height: 100%;
        overflow-y: auto;

        &__header {
          padding: 16px 0;
          border-bottom: 1px solid #eee;

          .title {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #ff3b30;
            line-height: 24px;
          }

          .desc {
            margin-top: 10px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ff3b30;
            line-height: 24px;
          }
        }

        &__body {
          .list {
            &__item {
              padding: 16px 0;
              border-bottom: 1px solid #eee;

              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;

                .note {
                  width: 32px;
                  height: 20px;
                  border: 1px solid #3f8dfd;
                  border-radius: 4px;
                  color: #3f8dfd;
                  font-size: 12px;

                  &--yellow {
                    border: 1px solid #ff9500;
                    color: #ff9500;
                  }
                }
              }

              .desc {
                margin-top: 10px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;

                .note {
                  color: #ff3b30;
                  line-height: 20px;
                }

                .img {
                  width: 100px;
                  height: 100px;
                  display: inline-block;
                  text-align: center;

                  img {
                    max-width: 100%;
                    max-height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }

    &__footer {
      height: 90px;
      border-top: 1px solid #eee;
      text-align: center;
      .confirm {
        width: 200px;
        height: 40px;
        padding: 0;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        margin: 24px auto;
      }
    }
  }

  .my-message-modal {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: -24px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #fff;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__header {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      padding-left: 24px;
      border-bottom: 1px solid #eee;
    }

    &__body {
      height: auto;
      padding: 0 24px 24px;

      .content {
        &__body {
          .title {
            margin-top: 10px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 24px;
          }

          .desc {
            margin-top: 8px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
          }

          .list {
            .item {
              margin-top: 18px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              line-height: 28px;

              &__title {
                color: #333;
                font-size: 16px;
              }

              &__desc {
                color: #666;
                font-size: 16px;
              }

              &__content {
                font-size: 14px;
                cursor: pointer;
                color: #3f8dfd;
              }
            }
          }
        }
      }
    }

    &__footer {
      height: 90px;
      overflow: hidden;
      border-top: 1px solid #eee;
      .confirm {
        display: block;
        margin: 25px auto 0;
        width: 200px;
        height: 40px;
        padding: 0;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
      }
    }
  }
}
</style>