add: 关于页面
This commit is contained in:
parent
e033aac662
commit
b07bc95a16
10
YaeBlog.Core/Models/AboutInfo.cs
Normal file
10
YaeBlog.Core/Models/AboutInfo.cs
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
namespace YaeBlog.Core.Models;
|
||||||
|
|
||||||
|
public class AboutInfo
|
||||||
|
{
|
||||||
|
public required string Introduction { get; set; }
|
||||||
|
|
||||||
|
public required string Description { get; set; }
|
||||||
|
|
||||||
|
public required string AvatarImage { get; set; }
|
||||||
|
}
|
|
@ -38,4 +38,6 @@ public class BlogOptions
|
||||||
/// 博客底部是否显示ICP备案信息
|
/// 博客底部是否显示ICP备案信息
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string? RegisterInformation { get; set; }
|
public string? RegisterInformation { get; set; }
|
||||||
|
|
||||||
|
public required AboutInfo About { get; set; }
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
<link href="@($"{BlogOptionsInstance.ProjectName}.styles.css")" rel="stylesheet"/>
|
<link href="@($"{BlogOptionsInstance.ProjectName}.styles.css")" rel="stylesheet"/>
|
||||||
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
|
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
|
||||||
<link href="_content/YaeBlog.Theme.FluentUI/globals.css" rel="stylesheet"/>
|
<link href="_content/YaeBlog.Theme.FluentUI/globals.css" rel="stylesheet"/>
|
||||||
|
<link href="favicon.ico" rel="icon"/>
|
||||||
<HeadOutlet/>
|
<HeadOutlet/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
42
YaeBlog.Theme.FluentUI/Pages/About.razor
Normal file
42
YaeBlog.Theme.FluentUI/Pages/About.razor
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
@page "/about"
|
||||||
|
@using YaeBlog.Core.Models
|
||||||
|
|
||||||
|
@inject BlogOptions BlogOptionsInstance
|
||||||
|
|
||||||
|
<PageTitle>
|
||||||
|
关于 - @(BlogOptionsInstance.Author)
|
||||||
|
</PageTitle>
|
||||||
|
|
||||||
|
<div style="height: 100%">
|
||||||
|
<div class="about-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
|
||||||
|
<div class="about-content">
|
||||||
|
<FluentCard>
|
||||||
|
<FluentStack Orientation="@Orientation.Vertical"
|
||||||
|
HorizontalAlignment="@HorizontalAlignment.Center">
|
||||||
|
<div class="about-avatar">
|
||||||
|
<img src="@(BlogOptionsInstance.About.AvatarImage)" alt="author-avatar"
|
||||||
|
class="about-avatar-img">
|
||||||
|
</div>
|
||||||
|
<FluentLabel Typo="@Typography.H2">
|
||||||
|
@(BlogOptionsInstance.Author)
|
||||||
|
</FluentLabel>
|
||||||
|
|
||||||
|
<FluentLabel Typo="@Typography.Body">
|
||||||
|
@(BlogOptionsInstance.About.Introduction)
|
||||||
|
</FluentLabel>
|
||||||
|
</FluentStack>
|
||||||
|
|
||||||
|
<div style="height: 2rem"></div>
|
||||||
|
<FluentLabel Typo="@Typography.Body">
|
||||||
|
@(BlogOptionsInstance.About.Description)
|
||||||
|
</FluentLabel>
|
||||||
|
</FluentCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BlogFooter/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
|
||||||
|
}
|
45
YaeBlog.Theme.FluentUI/Pages/About.razor.css
Normal file
45
YaeBlog.Theme.FluentUI/Pages/About.razor.css
Normal file
|
@ -0,0 +1,45 @@
|
||||||
|
.about-background {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content {
|
||||||
|
top: 33%;
|
||||||
|
position: absolute;
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-avatar {
|
||||||
|
position: relative;
|
||||||
|
width: 10rem;
|
||||||
|
height: 10rem;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-avatar-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: transparent;
|
||||||
|
object-fit: cover;
|
||||||
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
|
||||||
|
0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-avatar-img:hover {
|
||||||
|
animation: rotate-animation 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-animation {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user