TEAMModelOS/TEAMModelOS.TeachZone/ClientApp/components/notice.vue

<template>
  <div class="main fr">
    <h4><a href="/">首页</a> > 班级通知</h4>
    <div class="content ov bgf ">
      <dl class="notice" style="width: 100%;">
        <dt>班级通知 <!--<a href="" class="fr">更多+</a>--></dt>
        <div class="oper">
          <Button type="info" @click="modal1 = true">发布通知</Button>
          <Modal
            v-model="modal1" class-name="vertical-center-modal" footer-hide="true"
            title="发布通知"
            @on-ok="ok"
            @on-cancel="cancel">
              <Form :model="formItem" :label-width="80">
                <FormItem label="通知标题">
                  <Input v-model="formItem.input" placeholder="请输入通知标题"></Input>
                </FormItem>

                <FormItem label="通知内容">
                  <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入通知内容"></Input>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="yes">发布</Button>
                  <Button style="margin-left: 8px" @click="cancel">取消</Button>
                </FormItem>
              </Form>
          </Modal>
        </div>
        <dd><a href="/noticeDetail">5月10日上午8点举行奥运知识抢答赛，请班级成员准时参加。<span>2019-05-09</span></a></dd>
        <dd><a href="">师退生进 让学生站在教室中央<span>2019-05-09</span></a></dd>
        <dd><a href="">2019.4.9 核心素养深入研究，开拓视野精彩纷呈。<span>2019-05-09</span></a></dd>
        <dd><a href="">18.11.27区数学高段“问题解决”专题 暨“老带青”教研活动通讯。<span>2019-05-09</span></a></dd>
        <dd><a href="">2019年2月28日四年级教研活动通讯<span>2019-05-09</span></a></dd>
        <dd><a href="">5月10日上午8点举行奥运知识抢答赛，请班级成员准时参加。<span>2019-05-09</span></a></dd>
        <dd><a href="">师退生进 让学生站在教室中央<span>2019-05-09</span></a></dd>
        <dd><a href="">2019.4.9 核心素养深入研究，开拓视野精彩纷呈。<span>2019-05-09</span></a></dd>
        <dd><a href="">18.11.27区数学高段“问题解决”专题 暨“老带青”教研活动通讯。<span>2019-05-09</span></a></dd>
        <dd><a href="">2019年2月28日四年级教研活动通讯<span>2019-05-09</span></a></dd>
      </dl>
      <Page :total="100"  size="small" show-total class="fr" />
    </div>
  </div>

</template>

<script>
  export default {
    data () {
      return {
        modal1: false,
        formItem: {
          input: '',
          textarea: ''
        }
      }
    },
    methods: {
      ok () {
        this.$Message.info('发布成功');
      },
      // cancel () {
      //   this.$Message.info('');
      // }
      yes () {
          this.modal1 = false;
          this.$Message.success('发布成功');
      },
      cancel () {
        this.modal1 = false;
      }
    }
  }

</script>

<style lang="less">
  .vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal{
      top: 0;
    }
  }
  .ivu-modal .ivu-btn-primary{background: #2db7f5;border-color:#2db7f5}
</style>