Akatsuki-Misaki/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改首页布局

Browse Source
This commit is contained in:
hanasaki-misaki
2023-03-19 22:52:50 +08:00
parent 7eeb87455f
commit 9c7cdff1bf
2 changed files with 232 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
Static/mdui-v1.0.1/css/ui.css
View File

@@ -179,10 +179,9 @@ body {
flex: 1;
}
.div-height {
height: 50px;
background-color: rgba(99, 162, 255, 0.664);
height: 80px;
background-color:#4d6077;
backdrop-filter: blur(5px);
}
@@ -236,146 +235,46 @@ body {
justify-content: space-between
}
.zhe {
.backdrop-filter-5{
backdrop-filter: blur(5px);
}
.mdui-toolbarm,
.mdui-toolbarb {
backdrop-filter: blur(5px);
}
.mdui-grid-tile {
border-radius: 15px;
float: left;
width: 25em;
margin-left: 15px;
position: relative;
}
.mdui-grid-tile img{
aspect-ratio: 16/9;
aspect-ratio: 4/3;
}
@media (max-width: 983px) {
@media (max-width: 997px) {
.mdui-hidden-lok-down {
display: none !important;
}
}
@media (min-width: 982px) {
@media (min-width: 996px) {
.mdui-hidden-xm-pe {
display: none !important;
}
}
.center-ui{
text-align: center;
}
.banner {
max-width: 1200px;
margin-bottom: 15px;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
padding-right: 8px;
padding-left: 8px;
}
@media (min-width: 1383px){
.c-scl{
margin: 0 auto;
margin-top: 60px;
max-width: 1408px;
padding: 0px;
}
}
@media (max-width: 1384px){
.c-scl{
display: none;
}
}
@media (max-width: 1384px){
.c-inner{
display: none;
}
}
@media (min-width: 835px){
.c-secttl{
font-size: 3.75rem!important;
padding-bottom: calc(20px - 0.1em);
}
}
.c-secttl{
margin-left: 15px;
color: #fffef5;
font-size: 10.4vw;
font-weight: 700;
line-height: 1;
padding-bottom: 12px;
}
@media (min-width: 1383px){
.slow{
text-align: center;
margin: 0 auto;
margin-top: 61px;
margin-left: 15px;
max-width: 1408px;
border: 2px solid #585858;
border-radius: 15px;
backdrop-filter: blur(5px);
}
}
@media (max-width: 1384px){
.slow{
display: none;
}
}
@media (min-width: 1383px){
.slow-two{
text-align: center;
margin: 0 auto;
margin-top: 300px;
margin-left: 15px;
max-width: 1408px;
border: 2px solid #585858;
border-radius: 15px;
backdrop-filter: blur(5px);
}
}
@media (max-width: 1384px){
.slow{
display: none;
}
}
@media (min-width: 1383px){
.slow-tree{
text-align: center;
margin: 0 auto;
margin-top: 490px;
margin-left: 15px;
margin-bottom: 45px;
max-width: 1408px;
border: 2px solid #585858;
border-radius: 15px;
backdrop-filter: blur(5px);
}
}
@media (max-width: 1384px){
.slow-tree{
display: none;
}
}
.slow h2{
padding: 35px 0px 35px 0px;
}
.slow-two h2{
padding: 35px 0px 35px 0px;
}
.slow-tree h2{
padding: 35px 0px 35px 0px;
}
.dnone{
display: none;
}
@@ -395,24 +294,102 @@ body {
.border-radius-15{
border-radius: 15px;
}
@media (max-width: 1384px){
#player-card{
display: none;
}
}
/* 选中第1个#player-card */
#player-card:first-child{
margin-right: 0px;
}
#player-card{
float:right;
margin-right: 32px;
margin: 0px;
}
/* 选中最后一个#player-card */
.card__item{
max-width: 100%;
border-radius: 15px;
}
.flex-mx-le-ri{
justify-content: space-around;
}
.test{
border-radius: 15px;
max-width: 30%;
}
.mdui-grid-tile-actions{
border-radius: 15px;
}
.c-secttl{
overflow: hidden;
text-align: center;
position: relative;
animation: color-fff alternate 1s;
color: #fff;
font-size: 6vw;
font-weight: 700;
line-height: 1;
margin-bottom: 50px;
margin-top: 20px;
}
.c-secttl:hover{
animation:color-block alternate 1s;
color: #247bfd;
}
#player-card:last-child{
@keyframes color-block {
from {
color: #fff;
}
to {
color: #247bfd;
}
}
@keyframes color-fff {
from {
color: #247bfd;
}
to {
color: #fff;
}
}
.c-secttl::after {
content: "";
z-index: 20;
width: 90px;
height: 3px;
background-color: black;
position: absolute;
left: 50%;
bottom: -40%;
transform: translate(-50%);
box-shadow: 5px 5px 10px 1px #ccc;
}
@media screen and (max-width: 1515px) {
.player .test:nth-child(2){
display: none;
}
}
@media screen and (max-width: 1165px) {
.player .test:nth-child(3){
display: none;
}
}
@media screen and (max-width: 940px) {
.player .test:nth-child(4){
display: none;
}
}
.xox{
text-align: center;
padding-top: 8px;
margin-top: 50px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 45px;
max-width: 1408px;
border: 2px solid #585858;
border-radius: 15px;
backdrop-filter: blur(5px);
}

221
index.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Akatsuki - Word</title>
<link rel="icon" type="image/png" sizes="32x32" href="https://lolicon.team/img/images/32.ico">
<link rel="stylesheet" href="Static\mdui-v1.0.1\css\mdui.min.css">
@@ -29,7 +29,7 @@
<div>
<!--PC toolbar-->
<div class="mdui-hidden-lok-down">
<div class="mdui-toolbar mdui-toolbarb">
<div class="mdui-toolbar mdui-toolbarb nav-pc">
<a href="/index.html">
<div class="wow mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="150px">
@@ -95,16 +95,17 @@
<!--pc text-->
<div class="mdui-hidden-xs-down zhe " style="height:260vh">
<div class="mdui-container">
<!--Pc text Start-->
<!-- Carousel Start -->
<div class="mdui-hidden-xs-down backdrop-filter-5" style="height:200vh ">
<div id="carouselExampleCaptions" class="wow carousel slide banner animate__animated animate__fadeInRight" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" style="border-radius: 15px;">
<div class="carousel-inner banner-x">
<div class="carousel-item active">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/17/1x641476241d7cc.webp/all70" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
@@ -136,118 +137,141 @@
<span class="sr-only">Next</span>
</button>
</div>
<div class="wow animate__animated animate__bounceIn slow mdui-shadow-24 mdui-ripple mdui-ripple-white">
<h2>The adventure doesn't stop there</h2>
<!-- Carousel End -->
<!-- Our Features Start -->
<div class="wow animate__animated animate__fadeInLeft" data-wow-delay="200ms">
<h2 class="c-secttl">Our Features</h2>
</div>
<!-- Our Features -->
<div class="wow animate__animated animate__fadeInUp c-scl" data-wow-delay="200ms">
<h2 class="c-secttl">Our Features</h2>
</div>
<div class="c-inner">
<div class="mdui-ripple mdui-grid-tile wow animate__animated animate__fadeInLeft" data-wow-delay="300ms" >
<img class="mdui-img-fluid" src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f04bc30c81d915d5737be92d51b698f0.jpg/wp70" />
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">No Pay</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>永远不会收取费用
<div class="d-flex justify-content-around">
<div class="test">
<div class="mdui-ripple wow animate__animated animate__fadeInRight " data-wow-delay="300ms">
<img class="card__item" src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f04bc30c81d915d5737be92d51b698f0.jpg/wp70">
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">No Pay</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>永远不会收取费用
</div>
</div>
</div>
</div>
</div>
<div class="mdui-ripple mdui-grid-tile wow animate__animated animate__fadeInDown" data-wow-delay="500ms" >
<img class="mdui-img-fluid" src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/7deacef6bf53fd727bc92cc75d7edf4e.jpg/wp70" />
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Server</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>灌水服务器长期运行
<div class="test">
<div class="mdui-ripple wow animate__animated animate__fadeInRight " data-wow-delay="400ms">
<img class="card__item" src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/7deacef6bf53fd727bc92cc75d7edf4e.jpg/wp70">
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Low Server</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>灌水服务器长期运行
</div>
</div>
</div>
</div>
</div>
<div class="mdui-ripple mdui-grid-tile wow animate__animated animate__fadeInRight" data-wow-delay="700ms" >
<img class="mdui-img-fluid" src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f9ade14f4e96052c8fee02b61b3d55ba.jpg/wp70" />
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Happy house</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>学生上班族的快乐屋
<div class="test">
<div class="mdui-ripple wow animate__animated animate__fadeInRight " data-wow-delay="500ms" >
<img class="card__item" src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f9ade14f4e96052c8fee02b61b3d55ba.jpg/wp70">
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Happy house</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>学生上班族的快乐屋
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Our Features End -->
<div class="wow animate__animated animate__bounceIn slow-two mdui-shadow-24 mdui-ripple mdui-ripple-white c-scl ">
<h2>Multiple version iterations</h2>
<p>多个版本迭代，从1.16至1.19版本，我们不会停下脚步继续更新</p>
</div>
<div class="wow animate__animated animate__fadeInUp c-scl" data-wow-delay="200ms">
<h2 class="c-secttl" style="text-align: right;">Player</h2>
</div>
<div class="xbox">
<div id="player-card" class="card wow animate__animated animate__fadeInLeft" style="width: 18rem;" data-wow-delay="300ms">
<img src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100" class="card-img-top" alt="...">
<div class="card-body">
<h3>数据为空</h3>
<p class="card-text">暂无内容</p>
</div>
</div>
<div id="player-card" class="card wow animate__animated animate__fadeInLeft" style="width: 18rem;" data-wow-delay="400ms">
<img src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100" class="card-img-top" alt="...">
<div class="card-body">
<h3>数据为空</h3>
<p class="card-text">暂无内容</p>
</div>
</div>
<div id="player-card" class="card wow animate__animated animate__fadeInLeft" style="width: 18rem;" data-wow-delay="500ms">
<img src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100" class="card-img-top" alt="...">
<div class="card-body">
<h3>数据为空</h3>
<p class="card-text">暂无内容</p>
</div>
</div>
<div id="player-card" class="card wow animate__animated animate__fadeInLeft" style="width: 18rem;" data-wow-delay="600ms">
<img src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100" class="card-img-top" alt="...">
<div class="card-body">
<h3>数据为空</h3>
<p class="card-text">暂无内容</p>
</div>
</div>
</div>
<br>
<div class="slow-tree wow animate__animated animate__bounceIn mdui-shadow-24 mdui-ripple mdui-ripple-white c-scl ">
<div class="wow animate__animated animate__fadeInLeft" data-wow-delay="300ms">
<h2 class="c-secttl">Player</h2>
</div>
<div id="player-card-flex" class="player d-flex justify-content-around">
<div class="test">
<div id="player-card" class="card wow animate__animated animate__fadeInLeft" style="width: 18rem;" data-wow-delay="300ms">
<img src="https://q1.qlogo.cn/g?b=qq&amp;nk=3280751036&amp;s=100" class="card-img-top" alt="...">
<div class="card-body">
<h3>数据为空</h3>
<p class="card-text">暂无内容</p>
</div>
</div>
</div>
<div class="test">
<div id="player-card" class="card wow animate__animated animate__fadeInLeft" style="width: 18rem;" data-wow-delay="500ms">
<img src="https://q1.qlogo.cn/g?b=qq&amp;nk=3280751036&amp;s=100" class="card-img-top" alt="...">
<div class="card-body">
<h3>数据为空</h3>
<p class="card-text">暂无内容</p>
</div>
</div>
</div>
<div class="test">
<div id="player-card" class="card wow animate__animated animate__fadeInLeft" style="width: 18rem; " data-wow-delay="700ms">
<img src="https://q1.qlogo.cn/g?b=qq&amp;nk=3280751036&amp;s=100" class="card-img-top" alt="...">
<div class="card-body">
<h3>数据为空</h3>
<p class="card-text">暂无内容</p>
</div>
</div>
</div>
<div class="test">
<div id="player-card" class="card wow animate__animated animate__fadeInLeft" style="width: 18rem; " data-wow-delay="900ms">
<img src="https://q1.qlogo.cn/g?b=qq&amp;nk=3280751036&amp;s=100" class="card-img-top" alt="...">
<div class="card-body">
<h3>数据为空</h3>
<p class="card-text">暂无内容</p>
</div>
</div>
</div>
<div class="test">
<div id="player-card" class="card wow animate__animated animate__fadeInLeft" style="width: 18rem; " data-wow-delay="900ms">
<img src="https://q1.qlogo.cn/g?b=qq&amp;nk=3280751036&amp;s=100" class="card-img-top" alt="...">
<div class="card-body">
<h3>数据为空</h3>
<p class="card-text">暂无内容</p>
</div>
</div>
</div>
</div>
<div class="xox wow animate__animated animate__bounceIn mdui-shadow-24 mdui-ripple mdui-ripple-white">
<h2>加入我们</h2>
<p>Join our family</p>
</div>
<!--Pc text End-->
</div>
</div>
<!--mobile text-->
<div class="mdui-hidden-sm-up zhe " style="height:100%;width: 100%;">
<div style="width: 90%;height:100vh" class="mdui-center">
<div class="mdui-container">
<div class="mdui-typo">
<blockquote style="margin-bottom: 15px;">
<p class="s24" style="font-size: 24px;">"人类从来没有资格评定好坏"</p>
<p class="s24" style="font-size: 24px;">"所谓对错会随着时间所变动"</p>
<p class="s16 mdui-text-right" style="font-size: 16px;">——Akatsuki World</p>
</blockquote>
</div>
</div>
<div class="mdui-typo mdui-valign" style="height:50vh">
<div class="mdui-center mdui-text-center">
<p class="s17" style="font-size: 17px;">
AyasakiMoe Studio是AyasakiMoe社区管理组旗下的开发组织。<br>
<!-- Mobile Text Start -->
欢迎您的加入!<br>
AyasakiMoe:Akatsuki World <br>
</p>
</div>
</div>
</div>
</div>
<div class="mdui-hidden-sm-up zhe " style="height:100%;width: 100%;">
<div style="width: 90%;height:100vh" class="mdui-center">
<div class="mdui-container">
<div class="mdui-typo">
<blockquote style="margin-bottom: 15px;">
<p class="s24" style="font-size: 24px;">"人类从来没有资格评定好坏"</p>
<p class="s24" style="font-size: 24px;">"所谓对错会随着时间所变动"</p>
<p class="s16 mdui-text-right" style="font-size: 16px;">——Akatsuki World</p>
</blockquote>
</div>
</div>
<div class="mdui-typo mdui-valign" style="height:50vh">
<div class="mdui-center mdui-text-center">
<p class="s17" style="font-size: 17px;">
AyasakiMoe Studio是AyasakiMoe社区管理组旗下的开发组织。<br>
欢迎您的加入!<br>
AyasakiMoe:Akatsuki World <br>
</p>
</div>
</div>
</div>
</div>
<!-- Mobile Text End -->
@@ -262,7 +286,8 @@
</div>
</footer>
<script src="https://npm.akass.cn/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" type="text/javascript"></script>
<script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
<script src="Static\mdui-v1.0.1\js\mdui.min.js" type="text/javascript"></script>
<script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
@@ -275,7 +300,7 @@
$(window).on('load', function (callback) {
setTimeout(function () {
$('body').css({overflow: 'auto'});
$('#loading').fadeOut(1000);
$('#loading').fadeOut(500);
new WOW().init();
callback && callback();
clearTimeout(loadTimer);