118 lines
3.3 KiB
Smarty
Executable File
118 lines
3.3 KiB
Smarty
Executable File
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>居中显示的表格</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color:#2D2D2D;
|
|
color:#FFFFFF;
|
|
text-align: center; /* 使内容居中 */
|
|
}
|
|
table {
|
|
margin: 0 auto; /* 表格居中 */
|
|
border-collapse: collapse; /* 合并边框 */
|
|
width: 80%; /* 设置表格宽度 */
|
|
border-radius: 5px; /* 添加圆角 */
|
|
overflow: hidden; /* 确保圆角效果 */
|
|
border: 0px;
|
|
}
|
|
th, td {
|
|
border: 0px solid #ddd; /* 边框样式 */
|
|
padding: 8px; /* 内边距 */
|
|
text-align: left;
|
|
}
|
|
th {
|
|
background-color: #47344A; /* 表头背景色 */
|
|
color: white; /* 表头文字颜色 */
|
|
}
|
|
tr:nth-child(even) {
|
|
background-color: #f2f2f2; /* 偶数行背景色 */
|
|
}
|
|
|
|
td:first-child, th:first-child {
|
|
padding-left:30px;
|
|
}
|
|
|
|
.action-button {
|
|
background-color: #D2B48C15; /* 按钮背景色 */
|
|
color: #ddd; /* 按钮文字颜色 */
|
|
//border: none; /* 去掉边框 */
|
|
border-color: #D2B48C;
|
|
padding: 7px 15px; /* 内边距 */
|
|
text-align: center; /* 文字居中 */
|
|
text-decoration: none; /* 去掉下划线 */
|
|
display: inline-block; /* 使按钮在行内显示 */
|
|
margin: 4px 2px; /* 按钮间距 */
|
|
cursor: pointer; /* 鼠标悬停时显示手型 */
|
|
border-radius: 10px; /* 按钮圆角 */
|
|
font-size:12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script src="/assets/js/jquery-3.7.1.js"></script>
|
|
|
|
<table id='draw_list'>
|
|
<thead>
|
|
<tr>
|
|
<th>id</th>
|
|
<th>用户id</th>
|
|
<th>用户邮箱</th>
|
|
<th>地址</th>
|
|
<th>金额</th>
|
|
<th>创建时间</th>
|
|
<th>网站</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{foreach $data as $dataRow}
|
|
<tr>
|
|
<td>{$dataRow->id}</td>
|
|
<td>{$dataRow->user_id}</td>
|
|
<td>{$dataRow->user_mail}</td>
|
|
<td>{$dataRow->addr}</td>
|
|
<td>{$dataRow->amount}</td>
|
|
<td>{$dataRow->create_at}</td>
|
|
<td>{$dataRow->site}</td>
|
|
<td>
|
|
<button id="done" class="action-button">完成</button>
|
|
<button id="back" class="action-button">驳回</button>
|
|
<button id="mark" class="action-button">标记</button>
|
|
</td>
|
|
</tr>
|
|
{/foreach}
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
|
|
new Vue({
|
|
el: '#draw_list',
|
|
data: {
|
|
newTodo: '',
|
|
todos: []
|
|
},
|
|
methods: {
|
|
fetchTodos() {
|
|
fetch('exec.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.todos = data;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|