post-ui/src/views/message/messageList.vue

<template>
  <div class="right" :style="{ height: height, width: width }">
    <div class="up">
      <div class="up-title">🔍筛选搜索</div>
      <div class="up-input-title">
        消息标题:<el-input v-model="input" class="up-input" placeholder="请输入内容"></el-input>

      </div>
      
      <div class="up-input-title-right">
        <span class="demonstration">发布时间:</span>
        <el-date-picker v-model="value2" type="datetimerange" class="up-input-right" :picker-options="pickerOptions" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker>
      </div>
      <div class="anniu">
        <el-button plain>重置</el-button>
        <el-button type="primary" plain>查询列表</el-button>
      </div>
    </div>




    <div class="down">
      <i class="el-icon-s-order"></i>消息列表</div>
      
      <el-button>默认按钮</el-button>
      

    </div>
</template>

<script>

</script>

<style scoped >
.up {
  width: 96%;
  height: 150px;
  margin-top: 20px;
  margin-left: 27px;
  border: 1px solid #ccc;
}

.up-title {
  margin-left: 20px;
  margin-top: 20px;
}

.up-input {
  width: 250px;
  margin-left: 15px;
}

.up-input-title {
  margin-top: 15px;
  margin-left: 40px;
  float: left;
}
.up-input-right{
  width: 500px;
}
.up-input-title-right {
  margin-left: 450px;
  margin-top: 15px;
  
}
.anniu{ 
  
}

.el-col {
    border-radius: 4px;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

/**
自适应
*/

.right {
  float: none;
  width: 100%;
  height: 100%;
  /* background-color: #9dc3e6; */
}

</style>