首页美化+公告显示

This commit is contained in:
Chenx221 2024-04-21 16:43:27 +08:00
parent 475cd97946
commit 24cb0cbf9b
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021

View File

@ -2,11 +2,14 @@
/** @var yii\web\View $this */ /** @var yii\web\View $this */
/** @var array $latestAnnouncements */
use app\assets\TSParticlesAsset; use app\assets\TSParticlesAsset;
use yii\helpers\Url; use yii\helpers\Url;
$this->title = '首页'; $this->title = '首页';
TSParticlesAsset::register($this); TSParticlesAsset::register($this);
//$latestAnnouncements = []; emulating empty data
?> ?>
<div id="tsparticles" style="position: absolute;z-index: -1"></div> <div id="tsparticles" style="position: absolute;z-index: -1"></div>
<div class="site-index"> <div class="site-index">
@ -16,86 +19,99 @@ TSParticlesAsset::register($this);
<p>你需要登录或注册账户才能访问更多内容</p> <p>你需要登录或注册账户才能访问更多内容</p>
<p><a class="btn btn-lg btn-primary" href="<?= Url::to(['/user/register']) ?>">注册账户</a></p> <p><a class="btn btn-lg btn-primary" href="<?= Url::to(['/user/register']) ?>">注册账户</a></p>
<p><a class="btn btn-lg btn-success" href="<?= Url::to(['/user/login']) ?>">登录账户</a></p> <p><a class="btn btn-lg btn-success" href="<?= Url::to(['/user/login']) ?>">登录账户</a></p>
<?php elseif (Yii::$app->user->can('user')): ?> <?php elseif (Yii::$app->user->can('user') || Yii::$app->user->can('admin')): ?>
<p>系统公告</p> <h1>系统公告</h1>
<br>
<div class="body-content"> <div class="body-content">
<div class="row"> <div class="row">
<div class="col-lg-4 mb-3"> <?php if (empty($latestAnnouncements)): ?>
<h2>Heading</h2> <div class="rounded shadow-sm" style="height:fit-content;backdrop-filter: blur(3px);">
<h4>暂无公告</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </div>
incididunt ut <?php else: ?>
labore <?php foreach ($latestAnnouncements as $announcement): ?>
et <div class="col-lg-4 mb-3 rounded shadow-sm"
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris style="height:fit-content;backdrop-filter: blur(3px);">
nisi <h4><?= mb_strimwidth($announcement->title, 0, 30, "...", "UTF-8") ?></h4>
ut <p><?= mb_strimwidth($announcement->content, 0, 240, "...", "UTF-8") ?></p>
aliquip <p>
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <a class="btn btn-outline-secondary" href=""
cillum data-aid="<?= $announcement->id ?>">查看详情 &raquo;</a>
dolore eu </p>
fugiat nulla pariatur.</p> </div>
<?php endforeach; ?>
<p><a class="btn btn-outline-secondary" href="https://www.yiiframework.com/doc/">Yii <?php endif; ?>
Documentation </div>
&raquo;</a></p> </div>
</div> <div class="modal fade" id="announcementModal" tabindex="-1" aria-labelledby="announcementModalLabel"
<div class="col-lg-4 mb-3"> aria-hidden="true">
<h2>Heading</h2> <div class="modal-dialog">
<div class="modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <div class="modal-header">
incididunt ut <h5 class="modal-title" id="announcementModalLabel">公告详情</h5>
labore <button type="button" class="btn-close" data-bs-dismiss="modal"
et aria-label="Close"></button>
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </div>
nisi <div class="modal-body">
ut <div class="spinner-border text-primary" role="status">
aliquip <span class="visually-hidden">Loading...</span>
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </div>
cillum <!-- 这里将显示公告的内容 -->
dolore eu <h4 id="announcementTitle"></h4>
fugiat nulla pariatur.</p> <p id="announcementTime"></p>
<p id="announcementContent"></p>
<p><a class="btn btn-outline-secondary" href="https://www.yiiframework.com/forum/">Yii Forum </div>
&raquo;</a> <div class="modal-footer">
</p> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">已读</button>
</div> </div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut
labore
et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi
ut
aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu
fugiat nulla pariatur.</p>
<p><a class="btn btn-outline-secondary" href="https://www.yiiframework.com/extensions/">Yii
Extensions
&raquo;</a></p>
</div> </div>
</div> </div>
</div> </div>
<?php else: ?>
<p>你已经登录,欢迎回来</p>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </div>
<?php <?php
$js = <<<JS $js = <<<JS
$(document).ready(function() {
$('.btn-outline-secondary').click(function(e) {
e.preventDefault();
$('#announcementModal').modal('show');
// 显示加载指示器
$('.spinner-border').show();
// 获取公告的 ID
var announcementId = $(this).data('aid');
// 发送 AJAX 请求
$.ajax({
url: 'index.php?r=site/get-announcement&id=' + announcementId,
type: 'GET',
success: function(data) {
// 隐藏加载指示器
$('.spinner-border').hide();
// 使用返回的数据填充模态框
$('#announcementTitle').text(data.title);
$('#announcementTime').text("最近修改时间: "+data.updated_at);
$('#announcementContent').text(data.content);
},
error: function() {
// 隐藏加载指示器
$('.spinner-border').hide();
// 显示错误消息
alert('无法加载公告详情');
}
});
});
});
async function loadParticles(options) { async function loadParticles(options) {
await tsParticles.load({ id: "tsparticles", options }); await tsParticles.load({ id: "tsparticles", options });
} }
const configs = { const configs = {
fpsLimit: 144, fpsLimit: 60,
particles: { particles: {
number: { number: {
value: 100, value: 100,
@ -125,7 +141,7 @@ const configs = {
}, },
move: { move: {
enable: true, enable: true,
speed: 3, speed: 1,
outModes: { outModes: {
default: "out" default: "out"
} }
@ -144,7 +160,7 @@ const configs = {
}, },
modes: { modes: {
grab: { grab: {
distance: 280, distance: 230,
links: { links: {
opacity: 1, opacity: 1,
color: "#808080" color: "#808080"
@ -157,7 +173,7 @@ const configs = {
} }
}; };
loadParticles(configs); loadParticles(configs).then(r => console.log("Particles loaded"));
JS; JS;