/* 横幅样式 */
.uma-mainpage-banner {
display: flex;
width: 100%;
justify-content: center;
}
.uma-mainpage-banner .uma-title {
display: flex;
flex-direction: column;
justify-content: center;
}
.uma-mainpage-banner .uma-title .uma-title-main {
font-weight: bold;
font-size: 30px;
}
.uma-mainpage-banner .uma-title .uma-quote {
padding-left: 40px;
font-style: oblique;
}
/* 页面总体样式 */
.uma-mainpage {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 720px;
}
.uma-mainpage .uma-info {
width: 33%;
}
/* 各区块高度设置 */
#daily-uma {
height: 300px;
}
#random-page {
height: 400px;
}
#uma-intro {
height: 200px;
}
#unknown1 {
height: 300px;
}
#uma-music {
height: 200px;
}
#uma-news {
height: 400px;
}
#join-us {
height: 300px;
}
/* 正文样式 */
.uma-mainpage .uma-info .uma-content {
border-radius: 0 0 12px 12px;
border: thick solid #B0E13E;
border-top: none;
margin-top: -6px;
height: calc(100% - 60px);
padding: 10px;
}
/* 区块标题样式 */
.uma-mainpage .uma-info h2 {
border: none;
overflow: visible;
background: linear-gradient(#B0E13E, #6BC30F);
border-radius: 12px 12px 0 0;
text-align: center;
}
.uma-mainpage .uma-info h2 .mw-headline {
font-family: "sans-serif";
position: relative;
padding-left: 30px;
color: white;
}
.uma-mainpage .uma-info h2 .mw-headline::before {
content: "";
width: 50px;
height: 50px;
background-image: url("https://img.moegirl.org.cn/common/6/65/%E8%B5%9B%E9%A9%AC%E5%A8%98_%E9%87%91%E8%B9%84%E9%93%81%E5%9B%BE%E6%A0%87.png");
position: absolute;
background-size: 25px;
background-repeat: no-repeat;
left: 3px;
top: 3px;
}
/* 赛马娘信息盒样式 */
.uma-mainpage .uma-info .uma-content .uma-box {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100px;
padding-top: 20px;
}
.uma-mainpage .uma-info .uma-content .uma-box .uma-img-wrapper {
position: relative;
height: 100px;
width: 100px;
overflow: hidden;
border-radius: 50%;
border: thick solid;
box-sizing: border-box;
}
.uma-mainpage .uma-info .uma-content .uma-box .uma-img-wrapper .uma-img {
position: absolute;
}
.uma-mainpage .uma-info .uma-content .uma-box .uma-discription {
width: calc(100% - 120px);
}
.uma-mainpage .uma-info .uma-content .uma-box .uma-discription .uma-name {
text-align: center;
font-size: 30px;
font-weight: bold;
}
/* 音乐盒样式 */
.uma-mainpage .uma-info .uma-content .uma-music-box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
height: 100%
}
.uma-mainpage .uma-info .uma-content .uma-music-box .uma-music-right {
width: calc(100% - 150px);
}
.uma-mainpage .uma-info .uma-content .uma-music-box .uma-cover {
width: 150px;
}
.uma-mainpage .uma-info .uma-content .uma-music-box .uma-music-title {
font-size: 25px;
font-weight: bold;
text-align: center;
}
.uma-mainpage .uma-info .uma-content .uma-music-box .uma-music-discript {
text-align: center;
}
.uma-mainpage .uma-info .uma-content .uma-music-box .uma-music-display {
height: 80px;
}
/* 专题动态样式 */
.uma-mainpage .uma-info .uma-content .uma-news-title {
font-size: larger;
font-weight: bold;
}
.uma-mainpage .uma-info .uma-content .uma-news-title::after {
content: "\A";
white-space: pre;
}
.uma-mainpage .uma-info .uma-content .uma-news-game .uma-news-title::before {
content: "游戏";
color: white;
border-radius: 5px;
background: linear-gradient(#ff8d8d, red);
box-sizing: border-box;
padding: 0 5px 0 5px;
}
.uma-mainpage .uma-info .uma-content .uma-news-goods .uma-news-title::before {
content: "商品";
color: white;
border-radius: 5px;
background: linear-gradient(#e1df93, #bdb800);
box-sizing: border-box;
padding: 0 5px 0 5px;
}
/* 窄屏显示调整 */
@media screen and (max-width: 1200px) {
.uma-mainpage {
height: 1200px;
}
.uma-mainpage .uma-info {
width: 50%;
}
}
/* 手机访问电脑端网页显示调整 */
@media screen and (max-width: 1000px) {
.uma-mainpage {
height: auto;
}
.uma-mainpage .uma-info {
width: 100%;
}
}
/* 移动端显示调整 */
@media screen and (max-width: 600px) {
.uma-mainpage {
height: auto;
}
.uma-mainpage .uma-info {
width: 100%;
}
}