feat: 添加Font Awesome字体图标及相关样式文件
新增Font Awesome的字体文件、SVG图标及LESS/SCSS样式文件,包括基础样式、图标定义和响应式布局支持。添加了多种常用图标如播放、停止、加减乘除等,并支持列表布局和屏幕阅读器优化。
This commit is contained in:
123
app.php
123
app.php
@@ -217,62 +217,63 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['rating'])) {
|
||||
const ctx = document.getElementById('ratingChart').getContext('2d');
|
||||
new Chart(ctx).Bar({
|
||||
labels: ['5星', '4星', '3星', '2星', '1星'],
|
||||
datasets: [{
|
||||
label: '评分数量',
|
||||
fillColor: 'rgba(75, 192, 192, 0.6)',
|
||||
strokeColor: 'rgba(75, 192, 192, 1)',
|
||||
highlightFill: 'rgba(75, 192, 192, 0.8)',
|
||||
highlightStroke: 'rgba(75, 192, 192, 1)',
|
||||
data: [
|
||||
<?php echo $ratingDistribution[5] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[4] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[3] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[2] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[1] ?? 0; ?>
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '评分数量',
|
||||
fillColor: 'rgba(153, 102, 255, 0.6)',
|
||||
strokeColor: 'rgba(153, 102, 255, 1)',
|
||||
highlightFill: 'rgba(153, 102, 255, 0.8)',
|
||||
highlightStroke: 'rgba(153, 102, 255, 1)',
|
||||
data: [
|
||||
<?php echo $ratingDistribution[5] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[4] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[3] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[2] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[1] ?? 0; ?>
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '评分数量',
|
||||
fillColor: 'rgba(255, 206, 86, 0.6)',
|
||||
strokeColor: 'rgba(255, 206, 86, 1)',
|
||||
highlightFill: 'rgba(255, 206, 86, 0.8)',
|
||||
highlightStroke: 'rgba(255, 206, 86, 1)',
|
||||
data: [
|
||||
<?php echo $ratingDistribution[5] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[4] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[3] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[2] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[1] ?? 0; ?>
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '评分数量',
|
||||
fillColor: 'rgba(255, 99, 132, 0.6)',
|
||||
strokeColor: 'rgba(255, 99, 132, 1)',
|
||||
highlightFill: 'rgba(255, 99, 132, 0.8)',
|
||||
highlightStroke: 'rgba(255, 99, 132, 1)',
|
||||
data: [
|
||||
<?php echo $ratingDistribution[5] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[4] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[3] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[2] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[1] ?? 0; ?>
|
||||
]
|
||||
},
|
||||
datasets: [
|
||||
// {
|
||||
// label: '评分数量',
|
||||
// fillColor: 'rgba(75, 192, 192, 0.6)',
|
||||
// strokeColor: 'rgba(75, 192, 192, 1)',
|
||||
// highlightFill: 'rgba(75, 192, 192, 0.8)',
|
||||
// highlightStroke: 'rgba(75, 192, 192, 1)',
|
||||
// data: [
|
||||
// <?php echo $ratingDistribution[5] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[4] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[3] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[2] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[1] ?? 0; ?>
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// label: '评分数量',
|
||||
// fillColor: 'rgba(153, 102, 255, 0.6)',
|
||||
// strokeColor: 'rgba(153, 102, 255, 1)',
|
||||
// highlightFill: 'rgba(153, 102, 255, 0.8)',
|
||||
// highlightStroke: 'rgba(153, 102, 255, 1)',
|
||||
// data: [
|
||||
// <?php echo $ratingDistribution[5] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[4] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[3] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[2] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[1] ?? 0; ?>
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// label: '评分数量',
|
||||
// fillColor: 'rgba(255, 206, 86, 0.6)',
|
||||
// strokeColor: 'rgba(255, 206, 86, 1)',
|
||||
// highlightFill: 'rgba(255, 206, 86, 0.8)',
|
||||
// highlightStroke: 'rgba(255, 206, 86, 1)',
|
||||
// data: [
|
||||
// <?php echo $ratingDistribution[5] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[4] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[3] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[2] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[1] ?? 0; ?>
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// label: '评分数量',
|
||||
// fillColor: 'rgba(255, 99, 132, 0.6)',
|
||||
// strokeColor: 'rgba(255, 99, 132, 1)',
|
||||
// highlightFill: 'rgba(255, 99, 132, 0.8)',
|
||||
// highlightStroke: 'rgba(255, 99, 132, 1)',
|
||||
// data: [
|
||||
// <?php echo $ratingDistribution[5] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[4] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[3] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[2] ?? 0; ?>,
|
||||
// <?php echo $ratingDistribution[1] ?? 0; ?>
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
label: '评分数量',
|
||||
fillColor: 'rgba(54, 162, 235, 0.6)',
|
||||
@@ -286,9 +287,15 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['rating'])) {
|
||||
<?php echo $ratingDistribution[2] ?? 0; ?>,
|
||||
<?php echo $ratingDistribution[1] ?? 0; ?>
|
||||
]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}, {
|
||||
scaleBeginAtZero: true
|
||||
scaleBeginAtZero: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user