<template>
  <el-row class="page">
    <el-row class="block-view">

        <el-col><h3 class="title">用户反馈与建议</h3></el-col>
      
      <el-row class="feedback-list">
        <el-table :data="feedbacks" :stripe="true" :border="true" style="width: 100%">
          <el-table-column prop="username" label="用户" class-name="column-username" />
          <el-table-column prop="feedback" label="反馈内容" class-name="column-feedback" />
          <el-table-column prop="timestamp" label="提交时间" class-name="column-timestamp" />
        </el-table>
      </el-row>
    </el-row>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';

// 存储反馈内容，您可以根据需要进行填充或者通过 API 获取数据
const feedbacks = ref([
  {
    username: "张三",
    feedback: "非常好用的系统！",
    timestamp: new Date().toLocaleString(), // 显示提交时间
  },
  {
    username: "李四",
    feedback: "希望增加更多功能。",
    timestamp: new Date().toLocaleString(),
  },
  {
    username: "王五",
    feedback: "界面设计很友好，使用简单。",
    timestamp: new Date().toLocaleString(),
  }
]);
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #f9f9f9; /* 设置浅灰色背景 */
  padding: 20px;
  border-radius: 8px; /* 增加圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
}

.block-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 20px;
  border-radius: 5px; /* 块的圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.top {

  padding-bottom: 15px; /* 下方间距 */
  background-color: #cdd1d3;
  
}

.title {
  font-size: 20px; /* 标题字体大小 */
  font-weight: bold; /* 加粗 */
  color: #333; /* 调整标题颜色 */
  background-color: #cdd1d3;
  text-align: center;
}

.feedback-list {
  margin-top: 20px; /* 章节之间的间距 */
}

.el-table {
  width: 100%;
  background-color: #fff; /* 表格背景颜色 */
}

.column-username, .column-feedback, .column-timestamp {
  color: #555; /* 列文字颜色 */
}

.el-table th {
  background-color: #f0f0f0; /* 表头背景颜色 */
  color: #333; /* 表头文字颜色 */
  font-weight: bold; /* 加粗 */
}

.el-table td {
  padding: 12px; /* 增加单元格内边距 */
}

.el-table tr:hover {
  background-color: #f9f9f9; /* 鼠标悬停行颜色 */
}

.el-table tr:nth-child(odd) {
  background-color: #f7f7f7; /* 添加交替行颜色 */
}
</style>

