<?php
/**
* 账单页面模板
*
* 模板名称: 账单
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账单页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 20px auto;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background-color: #108ee9;
color: #fff;
padding: 20px;
text-align: center;
font-size: 24px;
}
.bill-item {
display: flex;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #f0f0f0;
}
.bill-item:last-child {
border-bottom: none;
}
.bill-item .merchant {
font-size: 16px;
color: #333;
}
.bill-item .type {
font-size: 14px;
color: #999;
}
.bill-item .amount {
font-size: 16px;
color: #f56c6c;
}
</style>
</head>
<body>
<div class="container">
<div class="header">账单</div>
<div id="bill-list">
<!-- JavaScript 生成的账单列表 -->
</div>
</div>
<script>
// 假设从 Typecho 获取的内容
const content = `
某某商家-支出-10元
某某超市-支出-50元
某某餐厅-支出-30元
`;
// 分割内容为行
const lines = content.trim().split('\n');
// 获取账单列表容器
const billList = document.getElementById('bill-list');
// 解析每行并生成 HTML
lines.forEach(line => {
const parts = line.split('-');
if (parts.length === 3) {
const merchant = parts[0].trim();
const type = parts[1].trim();
const amount = parts[2].trim();
// 创建账单项
const billItem = document.createElement('div');
billItem.className = 'bill-item';
billItem.innerHTML = `
<div>
<div class="merchant">${merchant}</div>
<div class="type">${type}</div>
</div>
<div class="amount">${amount}</div>
`;
// 添加到账单列表
billList.appendChild(billItem);
}
});
</script>
</body>
</html>
Article
♾️ php 代码:
现在已有 18 次阅读，0 条评论，0 人点赞