mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-02 03:59:14 +08:00
!2720 doc(#I5546N): add introduction on web site
* feat: 增加关闭弹窗 * doc: 更新 Logo 图 * doc: 更新组件介绍文字 * doc: 更新介绍文档 * wip: 临时提交
This commit is contained in:
Argo
parent
b4869a5ea7
commit
c95fd0e90f
@ -55,6 +55,24 @@
|
||||
|
||||
<component type="typeof(ReconnectorOutlet)" render-mode="ServerPrerendered" />
|
||||
|
||||
<div class="blazor-intro">
|
||||
<h5><b>Bootstrap Blazor</b> 组件库</h5>
|
||||
<div class="d-flex">
|
||||
<div class="blazor-intro-body">
|
||||
<p>首先感谢您对本套组件的关注，本目前本套组件已经拥有超过 120 个组件，本组件是基于 <b>Bootstrap</b> 风格的 <b>Blazor</b> 企业级组件库，提供如布局、导航、表单、数据、通知、图标、语音等几大类通用组件，每一个组件都经过静心设计，具有模块化、响应式和优秀的性能。从更多实际场景出发，满足多种场景的需求，极大的减少开发者时间成本，大大缩短开发周期，大幅提高开发效率，并提供了一套 <a href="https://admin.blazor.zone" target="_blank"><b>通用权限管理系统</b></a> 示例工程。<b>Bootstrap Blazor</b> 产品是由一支专业的全职技术团队进行维护，高效的响应速度，多元化的解决方案，长期提供支持，并提供企业级支持。目前已在多家知名国企内部使用，项目最高在线 <b>1200</b> 人稳定运行。右侧为国内人数最多的中文 Blazor QQ 社区二维码，欢迎扫描加群。</p>
|
||||
<p>如果组件给您带来了方便，请您帮忙给项目点亮 <b>Star</b>
|
||||
<a class="px-2" href="https://github.com/ArgoZhang/BootstrapBlazor" target="_blank"><img src="_content/BootstrapBlazor.Shared/images/git.svg" alt="github" /></a>
|
||||
<a href="https://gitee.com/LongbowEnterprise/BootstrapBlazor" target="_blank"><img src="_content/BootstrapBlazor.Shared/images/gitee.svg" alt="gitee" /></a></p>
|
||||
</div>
|
||||
<div class="blazor-intro-barcode">
|
||||
<img src="_content/BootstrapBlazor.Shared/images/QQ-BA1.png" alt="QQGroup" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="blazor-intro-close">
|
||||
<div class="blazor-intro-btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>
|
||||
<script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js" asp-append-version="true"></script>
|
||||
<script src="_content/BootstrapBlazor.TableExport/js/export.min.js" asp-append-version="true"></script>
|
||||
|
||||
@ -83,7 +83,7 @@ public partial class BaseLayout
|
||||
|
||||
if (firstRender)
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("$.bb_tooltip_site", MsLearnElement);
|
||||
await JSRuntime.InvokeVoidAsync("$.bb_site_load", MsLearnElement);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
header {
|
||||
background-color: #4a3275;
|
||||
background-color: #7952b3;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
font-size: 1rem;
|
||||
transition: transform .3s ease;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
color: rgba(255,255,255,.85);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
header.hide {
|
||||
transform: translate3d(0,calc(-100% - 2px),0);
|
||||
@ -32,7 +36,7 @@ header .nav-link img {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
border-radius: var(--bs-border-radius);
|
||||
border: solid 1px rgba(255, 255, 255, 0.5);
|
||||
border: solid 1px #fff;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
@ -1248,7 +1252,7 @@ section {
|
||||
|
||||
.culture-selector label {
|
||||
margin: 0;
|
||||
color: rgba(255,255,255,.5);
|
||||
color: rgba(255,255,255,.85);
|
||||
}
|
||||
|
||||
.culture-selector .select {
|
||||
@ -1769,7 +1773,6 @@ section {
|
||||
|
||||
header .bb-fs {
|
||||
margin-top: 2px;
|
||||
color: #fff !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1886,4 +1889,61 @@ header .bb-fs {
|
||||
.connection-body img {
|
||||
height: 114px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blazor-intro {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2000;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(54.4deg,#771f89 -28.5%,#834cef 30.36%,#636cea 99.19%);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.blazor-intro .blazor-intro-body {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.blazor-intro .blazor-intro-body a {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.blazor-intro .blazor-intro-body img {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.blazor-intro .blazor-intro-barcode {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blazor-intro .blazor-intro-barcode img {
|
||||
margin: 0 1rem 0 2rem;
|
||||
width: 120px;
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.blazor-intro .blazor-intro-close {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
padding: 1rem;
|
||||
left: calc(50% + 26px);
|
||||
background-color: #7239ea;
|
||||
transition: background-color .3s linear;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.blazor-intro .blazor-intro-close:hover {
|
||||
background-color: #5c2bc4;
|
||||
}
|
||||
|
||||
.blazor-intro .blazor-intro-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 34 KiB |
@ -195,8 +195,25 @@
|
||||
}).trigger('click');
|
||||
}
|
||||
},
|
||||
bb_tooltip_site: function (el) {
|
||||
bb_site_load: function (el) {
|
||||
$(el).tooltip();
|
||||
|
||||
// Intro 弹窗
|
||||
var $intro = $('.blazor-intro');
|
||||
$('.blazor-intro-close').on('click', function () {
|
||||
if (handler != null) {
|
||||
window.clearInterval(handler);
|
||||
$intro.slideToggle('fade');
|
||||
}
|
||||
});
|
||||
var count = 0;
|
||||
var handler = window.setInterval(function () {
|
||||
count++;
|
||||
$intro.slideToggle('fade');
|
||||
if (count >= 2) {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, 5000);
|
||||
},
|
||||
bb_block: function (el) {
|
||||
var $el = $(el);
|
||||
@ -275,18 +292,18 @@
|
||||
});
|
||||
});
|
||||
|
||||
// $(function () {
|
||||
// new MutationObserver((mutations, observer) => {
|
||||
// if (document.querySelector('#components-reconnect-modal h5 a')) {
|
||||
// function attemptReload() {
|
||||
// fetch('').then(() => {
|
||||
// location.reload();
|
||||
// });
|
||||
// }
|
||||
// observer.disconnect();
|
||||
// attemptReload();
|
||||
// setInterval(attemptReload, 10000);
|
||||
// }
|
||||
// }).observe(document.body, { childList: true, subtree: true });
|
||||
// });
|
||||
// $(function () {
|
||||
// new MutationObserver((mutations, observer) => {
|
||||
// if (document.querySelector('#components-reconnect-modal h5 a')) {
|
||||
// function attemptReload() {
|
||||
// fetch('').then(() => {
|
||||
// location.reload();
|
||||
// });
|
||||
// }
|
||||
// observer.disconnect();
|
||||
// attemptReload();
|
||||
// setInterval(attemptReload, 10000);
|
||||
// }
|
||||
// }).observe(document.body, { childList: true, subtree: true });
|
||||
// });
|
||||
})(jQuery);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user