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备案信息
|
||||
/// </summary>
|
||||
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="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
|
||||
<link href="_content/YaeBlog.Theme.FluentUI/globals.css" rel="stylesheet"/>
|
||||
<link href="favicon.ico" rel="icon"/>
|
||||
<HeadOutlet/>
|
||||
</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