首页美化+公告显示
This commit is contained in:
parent
475cd97946
commit
24cb0cbf9b
GPG Key ID:
D7A9EC07024C3021
@ -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
|
|
||||||
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/doc/">Yii
|
|
||||||
Documentation
|
|
||||||
»</a></p>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 mb-3">
|
|
||||||
<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/forum/">Yii Forum
|
|
||||||
»</a>
|
|
||||||
</p>
|
|
||||||
</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
|
|
||||||
»</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<p>你已经登录，欢迎回来</p>
|
<?php foreach ($latestAnnouncements as $announcement): ?>
|
||||||
|
<div class="col-lg-4 mb-3 rounded shadow-sm"
|
||||||
|
style="height:fit-content;backdrop-filter: blur(3px);">
|
||||||
|
<h4><?= mb_strimwidth($announcement->title, 0, 30, "...", "UTF-8") ?></h4>
|
||||||
|
<p><?= mb_strimwidth($announcement->content, 0, 240, "...", "UTF-8") ?></p>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-outline-secondary" href=""
|
||||||
|
data-aid="<?= $announcement->id ?>">查看详情 »</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal fade" id="announcementModal" tabindex="-1" aria-labelledby="announcementModalLabel"
|
||||||
|
aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="announcementModalLabel">公告详情</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||||
|
aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="spinner-border text-primary" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<!-- 这里将显示公告的内容 -->
|
||||||
|
<h4 id="announcementTitle"></h4>
|
||||||
|
<p id="announcementTime"></p>
|
||||||
|
<p id="announcementContent"></p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">已读</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<?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;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user