<template>
  <div class="notify">
    <div class="no_title">
      <div v-if="$store.state.human == 1" class="notify_titile">课程通知</div>
      <div v-else class="notify_titile">营地通知</div>
    </div>

    <div class="content">
      <div class="msg" @click="toMsgDetail">
        <el-badge is-dot class="item title">通知栏标题 邀请您的参与</el-badge>
        <div class="time">2022-8-1</div>
        <div class="msg_content">
          近日，营地工作组收到部分中学师生反映有机构及个人以高出营地费用的价格出售营地活动名额。
          对此，营地工作组严正声明如下：营地工作组从未授权任何单位、媒体、机构或个人举办营利性商业讲座、培训班、训练营或其他形式的营地招生活动。工作组对有违规操作行为的机构或个人保留追究法律责任的权利。
        </div>
      </div>
    </div>

    <el-dialog
      class="info"
      center
      style="font-size: 26px"
      title="营地声明"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div class="time">2022-8-1</div>
      <div class="info_content">
        &emsp;&emsp;近日，营地工作组收到部分中学师生反映有机构及个人以高出营地费用的价格出售营地活动名额。
        对此，营地工作组严正声明如下：营地工作组从未授权任何单位、媒体、机构或个人举办营利性商业讲座、培训班、训练营或其他形式的营地招生活动。工作组对有违规操作行为的机构或个人保留追究法律责任的权利。
      </div>
      <div class="btn">
        <el-button @click="toBackList">返回</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>
<script>
/* eslint-disable */
export default {
  name: "notify",
  data() {
    return {
      dialogVisible: false,
    };
  },

  methods: {
    toMsgDetail() {
      console.log(1111);
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "a/scss/lastBtn";
.notify {
  .no_title {
    padding: 50px 50px 0 50px;
    .notify_titile {
      font-size: 24px;
      font-weight: 500;
      color: #1b1419;
      line-height: 24px;
      margin-bottom: 40px;
      text-align: center;
    }
  }

  .content {
    padding: 0 30px 80px 30px;
    .msg {
      background-color: #f2f2f2;
      padding: 10px 15px;

      .title {
        width: 100%;
        font-size: 17px;
        font-weight: 600;
      }
      .time {
        font-size: 15px;
        color: #a9a9a9;
      }
      .msg_content {
        width: 500px;
        font-size: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  // 营地通知声明
  .info {
    .el-dialog__header {
      margin: 30px 20px 0 20px;
      .el-dialog__title {
        font-size: 24px;
      }
    }
    .el-dialog__body {
      padding: 0 25px 25px 30px;
    }
    // div {
    //   font-size: 17px;
    //   line-height: 30px;
    // }
    .time {
      text-align: center;
      font-size: 15px;
      color: #a9a9a9;
    }
    .info_content {
      font-size: 16px !important;
    }
  }
}
</style>