You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.5 KiB
109 lines
2.5 KiB
<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>
|
|
|