Skip to content

M
Moecube Store
Commit 7ec097b0 authored by 神楽坂玲奈's avatar 神楽坂玲奈
Browse files
Options

屏幕适配、mycard广告

parent 7eaa6f40
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 54 deletions
src/app/layout/layout.component.css
View file @ 7ec097b0
.my-custom-container { .my-custom-container {
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
...@@ -39,20 +38,95 @@ a:hover { ...@@ -39,20 +38,95 @@ a:hover {
#banner { #banner {
flex: 1; flex: 1;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; /* 将背景图片拉伸以填满元素 */ background-size: cover;
background-position: center; background-position: center center;
background-image: url('src/assets/img/background.jpg'); background-image: url('src/assets/img/background.jpg');
height: calc(100vh - 70px); /* 填满视窗，减去导航栏的高度 */ height: calc(100vh - 70px);
} }
@media (max-width: 820px) { .banner-content {
width: 100%;
padding-top: 10vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.banner-flex {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
margin-top: 1.5em;
}
.title-img {
margin-top: 2em;
height: auto;
display: block;
width: clamp(30vh, 30vw, 75vw);
}
.desc-img {
max-width: 65em;
margin-top: -2.5em;
height: 10vh;
}
.downLoadClass {
width: auto;
max-width: 95vw;
max-height: 35vh;
min-height: 10em;
margin-top: -2em;
}
.ad_ds {
display: block;
width: 100%;
text-align: center;
font-weight: bold;
color: #C5D0E8;
font-size: 1.2em;
margin-top: -0.5em;
}
.ad {
width: auto;
max-width: 95vw;
max-height: 10vh;
min-height: 10em;
}
.scroll-indicator {
position: absolute;
bottom: 0;
left: 50%;
z-index: 0;
color: #fff;
font-size: 1.2em;
}
.scroll-indicator p {
margin-bottom: 1em;
position: relative;
left: -50%;
text-align: center;
}
@media (max-width: 1024px) {
#banner { #banner {
background-size: cover; background-size: cover;
background-position: left top; background-position: left top;
} }
#banner p{
height: 18vh; #banner p {
height: 4em;
} }
svg { svg {
height: 3em; height: 3em;
} }
...@@ -60,6 +134,7 @@ a:hover { ...@@ -60,6 +134,7 @@ a:hover {
.details .plant-grid { .details .plant-grid {
padding: 0.5vw; padding: 0.5vw;
} }
.details .row { .details .row {
padding: 0 0.3vw; padding: 0 0.3vw;
} }
...@@ -67,6 +142,9 @@ a:hover { ...@@ -67,6 +142,9 @@ a:hover {
.details p { .details p {
font-size: 0.7em font-size: 0.7em
} }
title-img{
width: clamp(20vh, 40vw, 75vw);
}
} }
...@@ -74,7 +152,7 @@ a:hover { ...@@ -74,7 +152,7 @@ a:hover {
transform: translateX(30%) translateY(-15%) scale(0.7); transform: translateX(30%) translateY(-15%) scale(0.7);
} }
@media (min-width: 768px) { @media (min-width: 1024px) {
.cards { .cards {
transform: translateX(12%) translateY(-5%) scale(0.8); transform: translateX(12%) translateY(-5%) scale(0.8);
} }
...@@ -371,7 +449,7 @@ a:hover { ...@@ -371,7 +449,7 @@ a:hover {
/* 横屏样式 */ /* 横屏样式 */
@media screen and (orientation: landscape) and (max-width: 915px) { @media screen and (orientation: landscape) and (max-width: 1024px) {
img { img {
max-height: 25vh; max-height: 25vh;
...@@ -382,7 +460,7 @@ a:hover { ...@@ -382,7 +460,7 @@ a:hover {
} }
#banner img { #banner img {
max-height: 15vh; /*max-height: 15vh;*/
margin: 0 auto; margin: 0 auto;
} }
...@@ -400,6 +478,63 @@ a:hover { ...@@ -400,6 +478,63 @@ a:hover {
display: table-cell; display: table-cell;
transform: translate(0, 2%); transform: translate(0, 2%);
} }
.scroll-indicator p {
margin-bottom: -15px;
}
.banner-content {
padding-top: 80px;
}
.banner-img {
}
.title-img {
}
.desc-img {
margin-top: -1.5em !important;
width: auto;
}
.downLoadClass {
margin-top: -2.5em !important;
min-height: 15em;
}
.ad_ds {
margin-top: -3em !important;
font-size: 1em;
}
.ad {
/*margin-top: -2.5em !important;*/
min-height: 5em;
}
.banner-flex {
flex-direction: row;
justify-content: center; /* 保持第一个元素居中 */
align-items: center;
width: 100%;
padding: 0 5vw;
gap: 2em;
position: relative; /* 给绝对定位一个参照 */
}
.banner-flex > :first-child {
flex: none;
margin: 0 auto;
text-align: center;
}
.banner-flex > :nth-child(2) {
position: absolute;
right: 0; /* 靠页面最右 */
flex: none;
}
} }
src/app/layout/layout.component.html
View file @ 7ec097b0
...@@ -24,50 +24,58 @@ ...@@ -24,50 +24,58 @@
</div> </div>
</nav> </nav>
<div id="banner" style="position:relative" class="home-banner text-center my-custom-container"> <div id="banner" style="position:relative" class="home-banner text-center my-custom-container">
<div style="width:100%;position: relative;top:10vh;text-align: center;"> <div class="banner-content">
<div class="container"> <img
<div class="row"> class="banner-img title-img no-select"
<img src="assets/img/font-2.png"
class="no-select col-lg-6 col-sm-10 custom-width" draggable="false"
draggable="false" alt="标题图"/>
style="margin:0 auto;width:480px;position: relative;top:10VH;margin-bottom:0.5em;" <img
src="assets/img/font-2.png" class="banner-img desc-img no-select"
/> src="assets/img/desc.png"
draggable="false"
alt="描述图"/>
<div class="banner-flex">
<div class="left-content">
<a [href]="latest_current">
<img
src="assets/img/button-3_1.png"
class="downLoadClass"
alt="下载按钮"/>
</a>
</div> </div>
</div>
<br/> <div class="right-content">
<div class="container"> <div class="ad_ds">广告赞助</div>
<div class="row"> <a [href]="ad_current">
<img class="no-select col-lg-8 col-sm-9 custom-width" draggable="false" <img
style="width:580px;position: relative;margin:1em auto 2em;" src="assets/img/ad1.png"
src="assets/img/desc.png"/> class="ad"
alt="赞助商链接"/>
</a>
</div> </div>
</div> </div>
<div style="margin:0 auto;position: relative; top:-50px;">
<a [href]="latest_current">
<img
src="assets/img/button-3_1.png"
minwidth="20vw"
style="position: relative;top:80px; border-radius: 3px; border: 1px solid #F2F6FC"
/>
</a>
</div>
</div>
<div class="no-select" style="position:absolute;bottom:0;left:50%;z-index:0;color:#fff;font-size: 1.2em;">
<p style="position:relative;left: -50%;">向下 </div>
<svg id="down" t="1688375022718" class="icon" viewBox="0 0 1024 1024" version="1.1" <div class="scroll-indicator no-select">
width="48" height="48"> <p>
向下
<svg id="down" class="icon" viewBox="0 0 1024 1024" version="1.1" width="48" height="48">
<path <path
d="M533.333333 388.266667L358.4 213.333333 298.666667 277.333333l234.666666 234.666667L768 277.333333 708.266667 213.333333l-174.933334 174.933334z m0 260.266666l-174.933333-174.933333L298.666667 533.333333l234.666666 234.666667 234.666667-234.666667-59.733333-59.733333-174.933334 174.933333z" d="M533.333333 388.266667L358.4 213.333333 298.666667 277.333333l234.666666 234.666667L768 277.333333 708.266667 213.333333l-174.933334 174.933334z m0 260.266666l-174.933333-174.933333L298.666667 533.333333l234.666666 234.666667 234.666667-234.666667-59.733333-59.733333-174.933334 174.933333z"
fill="#ffffff" p-id="2645"></path> fill="#ffffff"
p-id="2645"
></path>
</svg> </svg>
滚动 滚动
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<!-- 游戏王全卡模拟器--> <!-- 游戏王全卡模拟器-->
<div class="priority my-custom-container container-fluid text-center bg-blue-dark "> <div class="priority my-custom-container container-fluid text-center bg-blue-dark ">
<div class="row"> <div class="row">
...@@ -152,8 +160,10 @@ ...@@ -152,8 +160,10 @@
</div> </div>
<div class="col-3 mb-4"> <div class="col-3 mb-4">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<img class="section-third-pic col-12 rounded" <a [href]="ad_current">
src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_1.jpg"/> <img class="section-third-pic col-12 rounded"
src="assets/img/ad1.png"/>
</a>
</div> </div>
</div> </div>
<div class="col-3 mb-4"> <div class="col-3 mb-4">
...@@ -175,8 +185,10 @@ ...@@ -175,8 +185,10 @@
</div> </div>
<div class="col-3 mb-4"> <div class="col-3 mb-4">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<img class="section-third-pic col-12 rounded" <a [href]="ad_current">
src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_2.jpg"/> <img class="section-third-pic col-12 rounded"
src="assets/img/ad2.png"/>
</a>
</div> </div>
</div> </div>
<div class="col-3 mb-4"> <div class="col-3 mb-4">
...@@ -211,8 +223,10 @@ ...@@ -211,8 +223,10 @@
<div class="carousel-item"> <div class="carousel-item">
<div class="row"> <div class="row">
<div class="d-flex justify-content-center mb-4 "> <div class="d-flex justify-content-center mb-4 ">
<img class="section-third-pic col-12 rounded" <a [href]="ad_current">
src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_1.jpg"/> <img class="section-third-pic col-12 rounded"
src="assets/img/ad1.png"/>
</a>
</div> </div>
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
...@@ -237,8 +251,10 @@ ...@@ -237,8 +251,10 @@
<div class="carousel-item"> <div class="carousel-item">
<div class="row"> <div class="row">
<div class="d-flex justify-content-center mb-4"> <div class="d-flex justify-content-center mb-4">
<img class="section-third-pic col-12 rounded" <a [href]="ad_current">
src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_2.jpg"/> <img class="section-third-pic col-12 rounded"
src="assets/img/ad2.png"/>
</a>
</div> </div>
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
...@@ -365,8 +381,8 @@ ...@@ -365,8 +381,8 @@
实时玩家排行 <br/> 实时玩家排行 <br/>
排表、打印实卡比赛卡表等特色功能 <br/> 排表、打印实卡比赛卡表等特色功能 <br/>
</p> </p>
<p style="font-size: 1em;color:#313154;">{{matchCount.year}}年{{matchCount.month}} <p style="font-size: 1em;color:#313154;">{{ matchCount.year }}年{{ matchCount.month }}
月进行了 {{matchCount.count}} 场对战</p> 月进行了 {{ matchCount.count }} 场对战</p>
<button class="btn btn-primary" (click)='navigateToUrl("https://mycard.world/ygopro/arena")'>>>&nbsp;进入决斗数据库 <button class="btn btn-primary" (click)='navigateToUrl("https://mycard.world/ygopro/arena")'>>>&nbsp;进入决斗数据库
</button> </button>
</div> </div>
...@@ -397,7 +413,7 @@ ...@@ -397,7 +413,7 @@
</div> </div>
</div> </div>
</div> </div>
<!--决斗数据库--> <!--决斗数据库-->
<div class="priority d-lg-none my-custom-container container-fluid text-center bg-blue-light"> <div class="priority d-lg-none my-custom-container container-fluid text-center bg-blue-light">
<div class="col-12 mt-0 mb-0 details detailText"> <div class="col-12 mt-0 mb-0 details detailText">
<p style="font-size: 1.6em;color:#313154">决斗数据库</p> <p style="font-size: 1.6em;color:#313154">决斗数据库</p>
...@@ -407,7 +423,8 @@ ...@@ -407,7 +423,8 @@
实时玩家排行 <br/> 实时玩家排行 <br/>
排表、打印实卡比赛卡表等特色功能 <br/> 排表、打印实卡比赛卡表等特色功能 <br/>
</p> </p>
<p style="font-size: 1em;color:#313154;">{{matchCount.year}}年{{matchCount.month}}月进行了 {{matchCount.count}} <p style="font-size: 1em;color:#313154;">{{ matchCount.year }}年{{ matchCount.month }}
月进行了 {{ matchCount.count }}
场对战</p> 场对战</p>
<button class="btn btn-primary" (click)='navigateToUrl("https://mycard.world/ygopro/arena")'>>>&nbsp;进入决斗数据库 <button class="btn btn-primary" (click)='navigateToUrl("https://mycard.world/ygopro/arena")'>>>&nbsp;进入决斗数据库
</button> </button>
...@@ -431,4 +448,6 @@ ...@@ -431,4 +448,6 @@
class="footer container-fluid text-center text-white align-items-center bg-black custom-footer d-flex justify-content-center"> class="footer container-fluid text-center text-white align-items-center bg-black custom-footer d-flex justify-content-center">
<p class="m-3">© MyCard 2021 all rights reserved.</p> <p class="m-3">© MyCard 2021 all rights reserved.</p>
</footer> </footer>
</div> </div>
src/app/layout/layout.component.ts
View file @ 7ec097b0
...@@ -36,7 +36,8 @@ export class LayoutComponent implements OnInit, AfterViewInit { ...@@ -36,7 +36,8 @@ export class LayoutComponent implements OnInit, AfterViewInit {
.get('https://cdn02.moecube.com:444/downloads/latest-mac.yml', {responseType: 'text'}) .get('https://cdn02.moecube.com:444/downloads/latest-mac.yml', {responseType: 'text'})
.pipe(map((rawData) => 'https://cdn02.moecube.com:444/downloads/' + yaml.parse(rawData).path.replace('-mac.zip', '.dmg'))); .pipe(map((rawData) => 'https://cdn02.moecube.com:444/downloads/' + yaml.parse(rawData).path.replace('-mac.zip', '.dmg')));
latest_current = '' latest_current = 'https://ocean-h5.doinggame.com/?v=last'
ad_current = 'https://ocean-h5.doinggame.com/?v=last'
stats_signups = this.http stats_signups = this.http
.get('https://ygobbs2.com/admin/dashboard.json', { .get('https://ygobbs2.com/admin/dashboard.json', {
......
src/assets/img/button-3_1.png
View replaced file @ 7eaa6f40 View file @ 7ec097b0
src/assets/img/button-3_1.png

17.8 KB | W: | H:

src/assets/img/button-3_1.png

2.44 MB | W: | H:

src/assets/img/button-3_1.png
src/assets/img/button-3_1.png
src/assets/img/button-3_1.png
src/assets/img/button-3_1.png
  • 2-up
  • Swipe
  • Onion skin
src/styles.css
View file @ 7ec097b0
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
::-webkit-scrollbar {height: 0;width: 0;color: transparent;} ::-webkit-scrollbar {height: 0;width: 0;color: transparent;}
html {
font-size: clamp(14px, 0.9vw + 0.5rem, 20px);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment