Skip to content

Commit

Permalink
新增 更多页面
Browse files Browse the repository at this point in the history
  • Loading branch information
底层用户 committed Sep 26, 2021
1 parent 4d636b7 commit 0a83639
Show file tree
Hide file tree
Showing 6 changed files with 188 additions and 297 deletions.
2 changes: 1 addition & 1 deletion css/mobile.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@
.time,
.link-card,
.message {
animation: fade-in 0.5;
animation: fade-in;
-webkit-animation: fade-in 0.5s;
-moz-animation: fade-in 0.5s;
-o-animation: fade-in 0.5s;
Expand Down
48 changes: 42 additions & 6 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,12 +223,12 @@ span.time-text {
backdrop-filter: blur(10px);
top: 7%;
border-radius: 6px;
padding: 20px;
padding: 30px;
}

.mores .more {
display: flex;
justify-content: center;
justify-content: space-evenly;
flex-direction: column;
align-items: center;
animation: fade;
Expand All @@ -238,14 +238,50 @@ span.time-text {
-ms-animation: fade 0.3s;
}

i.fad.fa-comment-alt-dots {
font-size: 2.75rem;
}

.mores .col.right {
display: none;
}

.close {
left: auto;
top: 4px;
right: 8px;
font-size: 1.45rem;
}

/*进度条*/
.progress {
width: 100%;
height: 20px;
align-items: center;
background: rgb(255 255 255 / 25%) !important;
backdrop-filter: blur(5px);
}

.progress-bar {
font-family: 'UnidreamLED';
background-color: #efefef !important;
color: rgb(86 77 89) !important;
font-size: 0.95rem;
height: 20px;
}

/*时间胶囊*/

.date {
width: 100%;
}

.date-text {
margin: 1rem 0rem 0.5rem 0rem;
}

/*更多页面链接*/

.mores .link-card {
height: 48px !important;
}

/*页脚样式*/
footer {
text-align: center;
Expand Down
77 changes: 71 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,8 @@
<!-- 引入 Fontawesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
media="all">
<!--引入Aplayer-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>-->
<!--引入 Vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- 引入 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 百度统计 -->
Expand Down Expand Up @@ -218,8 +216,74 @@
</div>
<!--更多内容-->
<div class="more cards">
<i class="fad fa-comment-alt-dots"></i>
<p class="text" style="margin-top: 1.5rem;">还没想好要写些啥</p>
<div class="close fixed-top" onclick="switchMore()"><i class="fad fa-times-circle"></i></div>
<div class="line" style="margin-top: 1rem;">
<i class="fad fa-grip-lines-vertical"></i>
<span class="line-text">时间胶囊</span>
<i class="fad fa-grip-lines-vertical"></i>
</div>
<div class="date" id="date">
<p class="date-text" style="margin-top: 0rem;">今日已经度过了大约&nbsp;{{hour}}&nbsp;小时</p>
<div v-html="jinduT()" class="marginbottom"></div>
<p class="date-text">本周已经度过了&nbsp;{{week}}&nbsp;天，今天是第&nbsp;{{curweek}}&nbsp;天</p>
<div v-html="jinduZ()" class="marginbottom"></div>
<p class="date-text">本月已经度过了&nbsp;{{day}}&nbsp;天，今天是第&nbsp;{{curday}}&nbsp;天</p>
<div v-html="jinduD()" class="marginbottom"></div>
<p class="date-text">{{year}}&nbsp;年已经度过了&nbsp;{{month}}&nbsp;个月，度过了&nbsp;{{outday}}&nbsp;天</p>
<div v-html="jinduY()" class="marginbottom"></div>
</div>
<div class="line">
<i class="fad fa-grip-lines-vertical"></i>
<span class="line-text">杂七杂八</span>
<i class="fad fa-grip-lines-vertical"></i>
</div>
<!--网站链接-->
<div class="row">
<div class="col">
<a href="https://status.imsyy.top/" target="_blank">
<div class="link-card cards">
<span class="link-name">站点监测</span>
</div>
</a>
</div>
<div class="col 2">
<a href="https://player.imsyy.top/" target="_blank">
<div class="link-card cards">
<span class="link-name">播放器</span>
</div>
</a>
</div>
<div class="col">
<a href="https://write.imsyy.top/" target="_blank">
<div class="link-card cards">
<span class="link-name">Markdown</span>
</div>
</a>
</div>
</div>
<div class="row" style="margin-top: 1.5rem;">
<div class="col">
<a href="https://img.imsyy.top/" target="_blank">
<div class="link-card cards">
<span class="link-name">图片站</span>
</div>
</a>
</div>
<div class="col 2">
<a href="https://file.imsyy.top/" target="_blank">
<div class="link-card cards">
<span class="link-name">文件站</span>
</div>
</a>
</div>
<div class="col">
<a>
<div class="link-card cards">
<span class="link-name">还没搞</span>
</div>
</a>
</div>
</div>
</div>
</div>
</main>
Expand All @@ -233,6 +297,7 @@
</section>
<!-- JS -->
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/time.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

Expand Down
2 changes: 1 addition & 1 deletion js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ window.addEventListener('load', function () {
document.getElementById("container").classList.remove('menus');
}
//移动端隐藏更多页面
if (window.innerWidth <= 660) {
if (window.innerWidth <= 990) {
document.getElementById("container").classList.remove('mores');
document.getElementById("change").innerHTML = "Hello&nbsp;World&nbsp;!";
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站，存活于互联网的边缘";
Expand Down
Loading

0 comments on commit 0a83639

Please sign in to comment.