健身记录管理系统 - 添加、查询你的训练数据 - 常规

<p>&quot;<head>\n\t<title>健身记录管理系统 - 添加、查询你的训练数据</title>\n\n\t<style>\n\tbody {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tbackground-image: url(&quot;<?php echo $imageUrl; ?>&quot;);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: contain;\n\t\tbackground-position: center;\n\t\tbackground-color: #333333;\n\t}\n\t</style>\n\t\n\t<style>\n\t\t.centered-image {\n\t\t\tdisplay: flex;\n\t\t\t/*justify-content: center; 水平居中 <em>/\n\t\t\talign-items: center;;/</em> 垂直居中 */\n\t\t\theight: 100vh;\n\t\t}\n\t</style>\n\t\n</head>\n<body>\n\t<div class="centered-image">\n\t\t<h1>健身记录管理</h1>\n\n\t\t<h2>添加健身记录</h2>\n\t\t<form method="POST" action="">\n\t\t\t<input type="hidden" name="action" value="add">\n\t\t\t<label for="time">时间：</label>\n\t\t\t<input type="date" name="time" id="time" required><br>\n\t\t\t<label for="projectName">项目名称：</label>\n\t\t\t<input type="text" name="projectName" id="projectName" required><br>\n\t\t\t<label for="quantity">数量：</label>\n\t\t\t<input type="number" name="quantity" id="quantity" required><br>\n\t\t\t<label for="remark">备注：</label>\n\t\t\t<input type="text" name="remark" id="remark"><br>\n\t\t\t<input type="submit" value="添加记录">\n\t\t</form>\n\n\t\t<h2>查询健身记录</h2>\n\t\t<form method="POST" action="">\n\t\t\t<input type="hidden" name="action" value="query">\n\t\t\t<label for="queryProjectName">项目名称：</label>\n\t\t\t<select name="projectName" id="queryProjectName">\n\t\t\t\t<option value="">全部</option>\n\t\t\t\t<?php\n\t\t\t\t$projectNames = getProjectNames();\n\t\t\t\tforeach ($projectNames as $name) {\n\t\t\t\t\techo '<option value="' . $name . '">' . $name . '</option>';\n\t\t\t\t}\n\t\t\t\t?>\n\t\t\t</select><br>\n\t\t\t<label for="queryTime">时间：</label>\n\t\t\t<input type="date" name="time" id="queryTime"><br>\n\t\t\t<input type="submit" value="查询记录">\n\t\t</form>\n\n\t\t<?php\n\t\tif (isset($records)) {\n\t\t\techo '<h2>查询结果</h2>';\n\t\t\tif (count($records) > 0) {\n\t\t\t\techo '<table>';\n\t\t\t\techo '<tr><th>时间</th><th>项目名称</th><th>数量</th><th>备注</th></tr>';\n\t\t\t\tforeach ($records as $record) {\n\t\t\t\t\techo '<tr>';\n\t\t\t\t\techo '<td>' . $record['time'] . '</td>';\n\t\t\t\t\techo '<td>' . $record['projectName'] . '</td>';\n\t\t\t\t\techo '<td>' . $record['quantity'] . '</td>';\n\t\t\t\t\techo '<td>' . $record['remark'] . '</td>';\n\t\t\t\t\techo '</tr>';\n\t\t\t\t}\n\t\t\t\techo '</table>';\n\t\t\t\techo '<p>总数：' . $total . '</p>';\n\t\t\t\techo '<p>目标总数：' . $tagTotal . '</p>';\n\t\t\t\techo '<p>差异：' . $difference . '</p>';\n\t\t\t} else {\n\t\t\t\techo '<p>没有找到符合条件的记录。</p>';\n\t\t\t}\n\t\t}\n\t\t?>\n\t</div>\n</body>\n删除<div class="left">会导致表单变成横向排列，是因为该元素使用了flex布局，并且设置了align-items: center;属性，这会使得表单元素在垂直方向上居中对齐。如果想要保持竖向排列，可以删除<div class="left">元素，或者将其样式改为display: block;。</p>