<template>
  <div class="add">
    <div class="top">
      <div class="zhuti">
        <span> 主题：</span>
        <el-input v-model="input" placeholder="请输入内容" class="zt">
        </el-input>
      </div>
      <div class="text">
        <span> 内容：</span>
        <el-input
          type="textarea"
          :rows="20"
          placeholder="请输入内容"
          v-model="textarea"
          :maxlength="maxlength"
          show-word-limit
          class="nr"
        >
        </el-input>
      </div>
    </div>
    <div class="bot">
      <el-button> <i class="el-icon-close"></i> 取消 </el-button>
      <el-button type="primary"> <i class="el-icon-check"></i> 确认 </el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 主题
      input: "",
      // 内容
      textarea: "",
      //最大输入的字数
      maxlength:1000
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.add {
  .top {
    width: 100%;
    height: 35.625rem;
    padding-left: 1.875rem;
    padding-top: 1.875rem;
    .zhuti {
      width: 100%;
      height: 6.25rem;
      span {
        width: 3.125rem;
      }
      .zt {
        width: 80%;
      }
    }
    .text {
      display: flex;
      span {
        width: 3.125rem;
      }
      .nr {
        width: 80%;
        height: 25rem;
        resize: none;
      }
    }
  }
  .bot {
    width: 100%;
    height: 6.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>