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 {
padding-left: 5%;
padding-right: 5%;
......@@ -39,20 +38,95 @@ a:hover {
#banner {
flex: 1;
background-repeat: no-repeat;
background-size: 100% 100%; /* 将背景图片拉伸以填满元素 */
background-position: center;
background-size: cover;
background-position: center center;
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 {
background-size: cover;
background-position: left top;
}
#banner p{
height: 18vh;
#banner p {
height: 4em;
}
svg {
height: 3em;
}
......@@ -60,6 +134,7 @@ a:hover {
.details .plant-grid {
padding: 0.5vw;
}
.details .row {
padding: 0 0.3vw;
}
......@@ -67,6 +142,9 @@ a:hover {
.details p {
font-size: 0.7em
}
title-img{
width: clamp(20vh, 40vw, 75vw);
}
}
......@@ -74,7 +152,7 @@ a:hover {
transform: translateX(30%) translateY(-15%) scale(0.7);
}
@media (min-width: 768px) {
@media (min-width: 1024px) {
.cards {
transform: translateX(12%) translateY(-5%) scale(0.8);
}
......@@ -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 {
max-height: 25vh;
......@@ -382,7 +460,7 @@ a:hover {
}
#banner img {
max-height: 15vh;
/*max-height: 15vh;*/
margin: 0 auto;
}
......@@ -400,6 +478,63 @@ a:hover {
display: table-cell;
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 @@
</div>
</nav>
<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="container">
<div class="row">
<img
class="no-select col-lg-6 col-sm-10 custom-width"
draggable="false"
style="margin:0 auto;width:480px;position: relative;top:10VH;margin-bottom:0.5em;"
src="assets/img/font-2.png"
/>
<div class="banner-content">
<img
class="banner-img title-img no-select"
src="assets/img/font-2.png"
draggable="false"
alt="标题图"/>
<img
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>
<br/>
<div class="container">
<div class="row">
<img class="no-select col-lg-8 col-sm-9 custom-width" draggable="false"
style="width:580px;position: relative;margin:1em auto 2em;"
src="assets/img/desc.png"/>
<div class="right-content">
<div class="ad_ds">广告赞助</div>
<a [href]="ad_current">
<img
src="assets/img/ad1.png"
class="ad"
alt="赞助商链接"/>
</a>
</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%;">向下
<svg id="down" t="1688375022718" class="icon" viewBox="0 0 1024 1024" version="1.1"
width="48" height="48">
</div>
<div class="scroll-indicator no-select">
<p>
向下
<svg id="down" class="icon" viewBox="0 0 1024 1024" version="1.1" width="48" height="48">
<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"
fill="#ffffff" p-id="2645"></path>
fill="#ffffff"
p-id="2645"
></path>
</svg>
滚动
</p>
</div>
</div>
</div>
<!-- 游戏王全卡模拟器-->
<div class="priority my-custom-container container-fluid text-center bg-blue-dark ">
<div class="row">
......@@ -152,8 +160,10 @@
</div>
<div class="col-3 mb-4">
<div class="d-flex justify-content-center">
<img class="section-third-pic col-12 rounded"
src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_1.jpg"/>
<a [href]="ad_current">
<img class="section-third-pic col-12 rounded"
src="assets/img/ad1.png"/>
</a>
</div>
</div>
<div class="col-3 mb-4">
......@@ -175,8 +185,10 @@
</div>
<div class="col-3 mb-4">
<div class="d-flex justify-content-center">
<img class="section-third-pic col-12 rounded"
src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_2.jpg"/>
<a [href]="ad_current">
<img class="section-third-pic col-12 rounded"
src="assets/img/ad2.png"/>
</a>
</div>
</div>
<div class="col-3 mb-4">
......@@ -211,8 +223,10 @@
<div class="carousel-item">
<div class="row">
<div class="d-flex justify-content-center mb-4 ">
<img class="section-third-pic col-12 rounded"
src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_1.jpg"/>
<a [href]="ad_current">
<img class="section-third-pic col-12 rounded"
src="assets/img/ad1.png"/>
</a>
</div>
<div class="d-flex justify-content-center">
......@@ -237,8 +251,10 @@
<div class="carousel-item">
<div class="row">
<div class="d-flex justify-content-center mb-4">
<img class="section-third-pic col-12 rounded"
src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_2.jpg"/>
<a [href]="ad_current">
<img class="section-third-pic col-12 rounded"
src="assets/img/ad2.png"/>
</a>
</div>
<div class="d-flex justify-content-center">
......@@ -365,8 +381,8 @@
实时玩家排行 <br/>
排表、打印实卡比赛卡表等特色功能 <br/>
</p>
<p style="font-size: 1em;color:#313154;">{{matchCount.year}}年{{matchCount.month}}
月进行了 {{matchCount.count}} 场对战</p>
<p style="font-size: 1em;color:#313154;">{{ matchCount.year }}年{{ matchCount.month }}
月进行了 {{ matchCount.count }} 场对战</p>
<button class="btn btn-primary" (click)='navigateToUrl("https://mycard.world/ygopro/arena")'>>>&nbsp;进入决斗数据库
</button>
</div>
......@@ -397,7 +413,7 @@
</div>
</div>
</div>
<!--决斗数据库-->
<!--决斗数据库-->
<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">
<p style="font-size: 1.6em;color:#313154">决斗数据库</p>
......@@ -407,7 +423,8 @@
实时玩家排行 <br/>
排表、打印实卡比赛卡表等特色功能 <br/>
</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>
<button class="btn btn-primary" (click)='navigateToUrl("https://mycard.world/ygopro/arena")'>>>&nbsp;进入决斗数据库
</button>
......@@ -431,4 +448,6 @@
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>
</footer>
</div>
src/app/layout/layout.component.ts
View file @ 7ec097b0
......@@ -36,7 +36,8 @@ export class LayoutComponent implements OnInit, AfterViewInit {
.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')));
latest_current = ''
latest_current = 'https://ocean-h5.doinggame.com/?v=last'
ad_current = 'https://ocean-h5.doinggame.com/?v=last'
stats_signups = this.http
.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 */
::-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