caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v 1.2

Browse Source
This commit is contained in:
底层用户 2021-09-27 21:07:24 +08:00
parent e1151a35e6
commit 46ddf457a7
4 changed files with 121 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/mobile.css
View File

@ -222,7 +222,8 @@
.line,
.main-img,
.social,
.close {
.close,
#link-text {
animation: fade 0.5;
-webkit-animation: fade 0.5s;
-moz-animation: fade 0.5s;

64
css/style.css
View File

@ -1,4 +1,5 @@
@charset"utf-8";
/*全局样式*/
html,
body {
@ -66,6 +67,7 @@ main {
/*transform: translateY(240px);*/
transform: translateY(40px);
}
/*
.main-right {
transform: translateY(38%);
@ -111,6 +113,7 @@ span.img-text {
border-radius: 6px;
margin-top: 3.5rem;
max-width: 460px;
cursor:pointer;
}
.des {
@ -213,7 +216,7 @@ span.time-text {
/*更多页面*/
.more {
display: none;
display: none !important;
width: 46%;
z-index: 999;
position: fixed;
@ -227,7 +230,7 @@ span.time-text {
}
.mores .more {
display: flex;
display: flex !important;
justify-content: space-evenly;
flex-direction: column;
align-items: center;
@ -252,6 +255,10 @@ span.time-text {
font-size: 1.45rem;
}
.close:hover {
transform: scale(1.2);
}
/*进度条*/
.progress {
width: 100%;
@ -285,6 +292,59 @@ span.time-text {
height: 48px !important;
}
/*box*/
.box {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1996;
background-color: rgba(0, 0, 0, .5);
backdrop-filter: blur(20px);
animation: fade 0.3s;
}
.box-wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1997;
width: 80%;
height: 80%;
background: rgb(255 255 255 / 40%);
border-radius: 6px;
-webkit-animation: fade .3s;
animation: fade .3s;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.upnote {
margin-top: 2rem;
margin-left: 2rem;
display: flex;
flex-direction: column;
line-height: 40px;
font-size: 1.25rem;
}
.closebox {
left: auto;
top: 4px;
right: 8px;
font-size: 1.45rem;
}
.closebox:hover {
transform: scale(1.2);
}
/*页脚样式*/
footer {
text-align: center;

36
index.html
View File

@ -70,7 +70,7 @@
<section id="section" class="section">
<main id="main" class="main">
<div class="container" id="container">
<div class="row">
<div class="row" id="row">
<div class="col left">
<!--基本信息-->
<div class="main-left">
@ -211,12 +211,14 @@
<a class="munu-button cards" id="menu" onclick="switchMenu()"><i class="fad fa-bars"></i></a>
</div>
<!--第二屏 Logo-->
<div class="logo" style="display: none;">
<div class="logo" style="display: none">
<a>imsyy.top</a>
</div>
<!--更多内容-->
<div class="more cards" id="more">
<div class="close fixed-top" onclick="switchMore()" id="close"><i class="fad fa-times-circle"></i></div>
<!--关闭按钮-->
<div class="close fixed-top" onclick="switchMore()" id="close"><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>
@ -272,19 +274,41 @@
<div class="col 2">
<a href="https://file.imsyy.top/" target="_blank">
<div class="link-card cards">
<span class="link-name">文件站</span>
<span class="link-name">文件库</span>
</div>
</a>
</div>
<div class="col">
<a>
<a onclick="openBox()">
<div class="link-card cards">
<span class="link-name">还没搞</span>
<span class="link-name">更多</span>
</div>
</a>
</div>
</div>
</div>
<!--更多页面-->
<div class="box" id="box" style="display: none">
<div class="box-wrapper">
<!--关闭按钮-->
<div class="closebox fixed-top" onclick="closeBox()">
<i class="fad fa-times-circle"></i>
</div>
<!--更新日志-->
<div class="img-title">
<span class="img-title">imsyy</span>
<span class="img-text">.top</span>
<span class="img-text">&nbsp;&nbsp;v&nbsp;1.2</span>
</div>
<div class="upnote">
<span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;点击左侧简介可弹出隐藏页面</span>
<span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;新增时间胶囊（ 时光进度条 ）</span>
<span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;隐藏页面新增更多页面弹窗</span>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;星期进度条显示错误</span>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;移动端动画及细节</span>
</div>
</div>
</div>
</div>
</main>
<footer id="footer" class="fixed-bottom footer">

29
js/main.js
View File

@ -6,7 +6,7 @@ iziToast.settings({
position: 'topLeft',
transitionIn: 'bounceInRight',
transitionOut: 'fadeOutLeft',
displayMode: '2',
displayMode: 'replace',
layout: '2',
titleColor: '#efefef',
messageColor: '#efefef',
@ -46,8 +46,8 @@ color: rgb(30,152,255);
var title1 = '無名の主页'
var title2 = 'imsyy.top'
var content = `
版 本 号：1.1.0
更新日期：2021-09-26 19:39:21
版 本 号：1.2.0
更新日期：2021-09-27 19:39:21
更新说明：
1. 新增 点击左侧简介弹出更多页面
@ -237,6 +237,19 @@ function switchMore() {
}
}
//更多弹窗页面
function openBox() {
document.getElementById("box").style.cssText = "display: block";
document.getElementById("row").style.cssText = "display: none";
document.getElementById("more").style.cssText = "display: none!important";
}
function closeBox() {
document.getElementById("box").style.cssText = "display: none";
document.getElementById("row").style.cssText = "display: flex";
document.getElementById("more").style.cssText = "display: flex";
}
//监听网页宽度
window.addEventListener('load', function () {
//console.log(window.innerWidth);
@ -262,3 +275,13 @@ $("#more").hover(function(){
},function(){
document.getElementById("close").style.cssText = "display: none";
})
//屏蔽右键
document.oncontextmenu = function(){
iziToast.info({
icon: 'fad fa-do-not-enter',
title: '温馨提醒',
message: '为了浏览体验，本站禁用右键'
});
return false;
}