/* 横幅样式 */ .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%; } }