v 1.2
This commit is contained in:
parent
e1151a35e6
commit
46ddf457a7
@ -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;
|
||||
|
@ -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
36
index.html
@ -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"> v 1.2</span>
|
||||
</div>
|
||||
<div class="upnote">
|
||||
<span class="uptext"><i class="fad fa-plus-circle"></i> 点击左侧简介可弹出隐藏页面</span>
|
||||
<span class="uptext"><i class="fad fa-plus-circle"></i> 新增时间胶囊( 时光进度条 )</span>
|
||||
<span class="uptext"><i class="fad fa-plus-circle"></i> 隐藏页面新增更多页面弹窗</span>
|
||||
<span class="uptext"><i class="fad fa-wrench"></i> 星期进度条显示错误</span>
|
||||
<span class="uptext"><i class="fad fa-wrench"></i> 移动端动画及细节</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer id="footer" class="fixed-bottom footer">
|
||||
|
31
js/main.js
31
js/main.js
@ -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);
|
||||
@ -261,4 +274,14 @@ $("#more").hover(function(){
|
||||
document.getElementById("close").style.cssText = "display: block";
|
||||
},function(){
|
||||
document.getElementById("close").style.cssText = "display: none";
|
||||
})
|
||||
})
|
||||
|
||||
//屏蔽右键
|
||||
document.oncontextmenu = function(){
|
||||
iziToast.info({
|
||||
icon: 'fad fa-do-not-enter',
|
||||
title: '温馨提醒',
|
||||
message: '为了浏览体验,本站禁用右键'
|
||||
});
|
||||
return false;
|
||||
}
|
Loading…
Reference in New Issue
Block a user