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">
                    {{
                      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="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 class="item__content" @click="jumpSection(item)">
                    {{ $tools.secondToTime(item.topicNum) }}（点击可直接跳转）
                  </div>
                </div>
                <div
                  class="item"
                  v-for="(item, index) in listData.informVo.informExamVo"
                  :key="index"
                >
                  <div class="item__title">{{ item.goodsName }}</div>
                  <div class="item__desc">
                    {{ item.moduleName ? "/" + item.moduleName : ""
                    }}{{ item.chapterName ? "/" + item.chapterName : ""
                    }}{{ item.examName }}
                  </div>
                  <div 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>

    <el-dialog
      width="800px"
      class="rebuild"
      :visible.sync="showRebuildDetailModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="rebuild__content">
        <div class="rebuild__close" @click="showRebuildDetailModal = false">
          X
        </div>
        <div class="rebuild__header">审核详情</div>
        <div class="rebuild__body">
          <div class="content">
            <div class="content__header">
              <div class="title">重要提示：</div>
              <div class="desc">
                如对审核结果有异议，请勿点击确认重学。致电020-87085982咨询
              </div>
            </div>

            <div class="content__body">
              <div class="list">
                <div
                  class="list__item"
                  v-for="(item, index) in rebuildItems"
                  :key="index"
                >
                  <div class="title">
                    <span class="note" v-if="item.type == 0"> 测试 </span>
                    <span class="note note--yellow" v-if="item.type == 1"
                      >录播</span
                    >
                    <span class="note note--yellow" v-if="item.type == 2"
                      >直播</span
                    >
                    <span class="note note--yellow" v-if="item.type == 3"
                      >回放</span
                    >
                    {{ index + 1 }}、{{ item.name }}
                  </div>
                  <div class="desc">
                    <div class="imgs">
                      <div
                        class="img"
                        v-for="(items, indexs) in item.userStudyRecordPhoto"
                        :key="indexs"
                      >
                        <img :src="$tools.splitImgHost(items.photo)" />
                        <div class="note">
                          {{ $tools.timestampToTime(items.createTime, false) }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="desc">
                    原因：
                    <span class="note">拍照异常/时间异常</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rebuild__footer">
          <el-button class="confirm" @click="rebuildSubmit" type="primary"
            >确认重学</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MyMessage",
  data() {
    return {
      showRebuildDetailModal: false,
      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: {},
      listListStatus: true,
      receiptNum: 0, //未读数量
    };
  },
  mounted() {
    this.getappinformUserlist();
  },
  methods: {
    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.$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();
        })
        .finally(() => {
          this.listListStatus = true;
        });
    },

    /**
     * 清空消息
     */
    clearMsg() {
      this.$confirm("清空消息吗？")
        .then((_) => {
          this.$request.appInformUserRemoveAll().then((res) => {
            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:
          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:
          //课程
          if (item.goodsType == 1) {
            let currentTime = this.$tools.timest();
            console.log(currentTime);
            console.log(item);
            console.log(item.studyStartTime);
            console.log(item.studyEndTime);
            console.log(
              currentTime < item.studyStartTime ||
                currentTime > item.studyEndTime
            );
            if (
              currentTime < item.studyStartTime ||
              currentTime > item.studyEndTime
            ) {
              this.$message({
                type: "warning",
                message: "不在学习有效期，不可以学习了哦",
              });
              return;
            }

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

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

            if (item.classStatus == 0) {
              this.$message({
                type: "warning",
                message: "尚未开班，不能进入学习",
              });
              return;
            }

            if (
              item.learningStatus == 3 &&
              currentTime < item.learningTimeStart
            ) {
              this.$message({
                type: "warning",
                message: "不在开放学习时间,不能进入学习",
              });
              return;
            }

            if (
              item.gradeStatus == 1 &&
              item.status == 1 &&
              item.studyEndTime > currentTime &&
              item.classEndTime &&
              item.classEndTime < currentTime &&
              (item.periodStatus == 0 || item.periodStatus == -1) &&
              item.studyCount > 0
            ) {
              this.$confirm("班级已过期，需要重新选班", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                distinguishCancelAndClose: false,
                showClose: false,
              })
                .then((_) => {
                  this.$router.push({
                    path: "/person-center/my-course",
                  });
                })
                .catch((_) => {});
            }

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

            if (rebuildStatus == 0) {
              this.rebuildItem = item;
              this.$request
                .getcourseperiodcheat({
                  goodsId: item.goodsId,
                  gradeId: item.gradeId,
                })
                .then((res) => {
                  this.rebuildItems = res.rows;
                });
              this.showRebuildDetailModal = true;
              return;
            }

            if (item.courseNum == 1) {
              this.$request
                .courseCourseList({
                  pageNum: 1,
                  pageSize: 1,
                  goodsId: item.goodsId,
                  gradeId: item.gradeId,
                })
                .then((res) => {
                  this.$router.push({
                    path: "/my-course-detail/" + item.goodsId,
                    query: {
                      id: res.rows[0].courseId,
                    },
                  });
                });
              return;
            }

            this.$router.push({
              path: "/person-center/my-course",
            });
            // arsty = '立刻学习';

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

          break;
        case 2:
        case 4:
          this.$navTo.togo("/pages2/verify/input", {
            id: item.goodsId,
          });
          break;
        case 24:
          this.$navTo.togo("/pages2/verify/input2", {
            id: item.goodsId,
          });
          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-classhour/appointment",
                query: {
                  goodsId: item.goodsId,
                  gradeId: item.gradeId,
                },
              });
            })
            .catch((err) => {
              this.$message({
                type: "warning",
                message: err.msg,
              });
            });
          break;
        case 20:
          this.$router.push({
            path: "/my-course-detail/" + item.goodsId,
            query: {
              gradeId: item.gradeId,
            },
          });
          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() {
      this.$confirm(
        "如对审核结果有异议，请勿点击确认重学。致电020-87085982咨询",
        "注意",
        {
          confirmButtonText: "确认重学",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          closeOnPressEscape: false,
          distinguishCancelAndClose: false,
          showClose: false,
        }
      )
        .then((_) => {
          this.$request
            .courseperiodrebuild({
              goodsId: this.rebuildItem.goodsId,
              gradeId: this.rebuildItem.gradeId,
            })
            .then((res) => {
              this.showRebuildDetailModal = false;
              this.$router.push({
                path: `/my-course-detail/${this.rebuildItem.goodsId}`,
                query: {
                  gradeId: this.rebuildItem.gradeId,
                  orderGoodsId: this.rebuildItem.orderGoodsId,
                },
              });
            });
        })
        .catch((_) => {});
    },

    showDetail(item) {
      this.sysTime = this.$tools.timest();
      this.messageId = item.id;
      this.getMessage();
      this.showDetailModal = true;
    },
    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;
              }
            });
        }
        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;
        if (res.data.goodsId) {
          if (res.data.gradeId) {
            this.$request.goodsDetail(res.data.goodsId).then((rs) => {
              this.goodsData = rs.data;
              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.$request.commonGoodsDetail(res.data.goodsId).then((rs) => {
              this.goodsData = rs.data;
              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;
              }
            });
          }
        }
      });
    },

    //跳转节视频
    jumpSection(item) {
      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);
      uni.navigateTo({
        url:
          "/pages2/bank/questionBank?current=" +
          (item.topicNum - 1) +
          "&id=" +
          item.examId +
          "&goodsid=" +
          item.goodsId +
          "&chapterId=" +
          item.moduleId +
          "&moduleId=" +
          item.moduleId,
      });
    },
  },
};
</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>