v1.3
This commit is contained in:
parent
2a6eabac95
commit
cfae7cc61b
@ -1,14 +1,7 @@
|
||||
@charset"utf-8";
|
||||
|
||||
/*小于1400px时*/
|
||||
@media (max-width: 1400px) {
|
||||
|
||||
/*时钟显示*/
|
||||
span#win_text,
|
||||
span#win_speed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1400px) {}
|
||||
|
||||
/*小于1200px时*/
|
||||
@media (max-width: 1200px) {
|
||||
@ -21,11 +14,6 @@
|
||||
max-width: 1100px !important;
|
||||
}
|
||||
|
||||
/*天气模块*/
|
||||
.weather {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.weekday {
|
||||
display: none;
|
||||
}
|
||||
@ -34,10 +22,11 @@
|
||||
/*小于992px时*/
|
||||
@media (max-width: 992px) {
|
||||
|
||||
/*简介不可点击*/
|
||||
/*简介不可点击
|
||||
.message {
|
||||
pointer-events: none;
|
||||
}
|
||||
*/
|
||||
|
||||
/*一言*/
|
||||
.col.hitokotos {
|
||||
@ -63,6 +52,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*小于840px时*/
|
||||
@media (max-width: 840px) {
|
||||
|
||||
|
||||
/*社交链接*/
|
||||
.social {
|
||||
max-width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#link-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.link i {
|
||||
margin: 0px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于789px时*/
|
||||
@media (max-width: 789px) {
|
||||
|
||||
@ -115,20 +123,6 @@
|
||||
}
|
||||
*/
|
||||
|
||||
/*社交链接*/
|
||||
.social {
|
||||
max-width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#link-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.link i {
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
/*菜单栏按钮*/
|
||||
.menu {
|
||||
display: flex;
|
||||
@ -144,6 +138,11 @@
|
||||
border-radius: 6px;
|
||||
font-size: 1.25rem;
|
||||
transition: 0.5s;
|
||||
width: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/*页脚文字*/
|
||||
@ -157,6 +156,12 @@
|
||||
.menu {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*时钟显示*/
|
||||
span#win_text,
|
||||
span#win_speed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于390px时*/
|
||||
@ -200,6 +205,7 @@
|
||||
|
||||
.menus .logo {
|
||||
display: inline !important;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
top: 8%;
|
||||
font-family: 'Pacifico-Regular';
|
||||
|
@ -60,6 +60,7 @@ main {
|
||||
|
||||
.row {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
36
index.html
36
index.html
@ -83,7 +83,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--介绍信息-->
|
||||
<div class="message cards" onclick="switchMore()">
|
||||
<div class="message cards" id="switchmore">
|
||||
<div class="des" id="des"><i class="iconfont icon-yinhao-copy-copy"></i>
|
||||
<p class="des-title"><span id="change">Hello World !</span><br /><span
|
||||
id="change1">一个建立于 21 世纪的小站,存活于互联网的边缘</span></p>
|
||||
@ -112,6 +112,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--第二屏 Logo-->
|
||||
<div class="logo cards" style="display: none" id="changemore">
|
||||
<a>imsyy.top</a>
|
||||
</div>
|
||||
<div class="col right">
|
||||
<div class="main-right">
|
||||
<!--功能区-->
|
||||
@ -194,10 +198,10 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a href="https://blog.imsyy.top/about/" target="_blank">
|
||||
<a href="https://photo.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<i class="fad fa-info-circle"></i>
|
||||
<span class="link-name">关于</span>
|
||||
<i class="fad fa-image"></i>
|
||||
<span class="link-name">相册</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@ -207,17 +211,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--展开菜单按钮-->
|
||||
<div class="menu">
|
||||
<a class="munu-button cards" id="menu" onclick="switchMenu()"><i class="fad fa-bars"></i></a>
|
||||
</div>
|
||||
<!--第二屏 Logo-->
|
||||
<div class="logo cards" style="display: none" onclick="changeMore()">
|
||||
<a>imsyy.top</a>
|
||||
<div class="menu" id="switchmenu">
|
||||
<a class="munu-button cards" id="menu"><i class="fad fa-bars"></i></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 class="close fixed-top" 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>
|
||||
@ -279,7 +280,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a onclick="openBox()">
|
||||
<a id="openmore">
|
||||
<div class="link-card cards">
|
||||
<span class="link-name">更多</span>
|
||||
</div>
|
||||
@ -291,21 +292,22 @@
|
||||
<div class="box" id="box" style="display: none">
|
||||
<div class="box-wrapper">
|
||||
<!--关闭按钮-->
|
||||
<div class="closebox fixed-top" onclick="closeBox()">
|
||||
<div class="closebox fixed-top" id="closemore">
|
||||
<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>
|
||||
<span class="img-text"> v 1.3</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-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>
|
||||
<span class="uptext"><i class="fad fa-wrench"></i> Js 文件优化</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
216
js/main.js
216
js/main.js
@ -46,14 +46,15 @@ color: rgb(30,152,255);
|
||||
var title1 = '無名の主页'
|
||||
var title2 = 'imsyy.top'
|
||||
var content = `
|
||||
版 本 号:1.2.0
|
||||
更新日期:2021-09-27 19:39:21
|
||||
版 本 号:1.3.0
|
||||
更新日期:2021-10-02 14:26:31
|
||||
|
||||
更新说明:
|
||||
1. 新增 点击左侧简介弹出更多页面
|
||||
2. 新增 时间胶囊 ( 时光进度条 )
|
||||
2. 修复 时间胶囊( 时光进度条 )
|
||||
3. 优化 移动端动画及细节
|
||||
4. 修复 星期进度条显示错误
|
||||
4. 优化 Js 文件优化
|
||||
5. 修复 星期进度条显示错误
|
||||
|
||||
主页: https://imsyy.top
|
||||
Github: https://github.com/imsyy/home
|
||||
@ -159,133 +160,140 @@ window.addEventListener('load', function () {
|
||||
}, false)
|
||||
|
||||
//链接提示文字
|
||||
window.onload = function () {
|
||||
var link = document.getElementById("social");
|
||||
link.onmouseover = function () {
|
||||
document.getElementById("social").style.cssText = "background: rgb(0 0 0 / 25%);backdrop-filter: blur(5px);border-radius: 6px;transition: all 0.5s";
|
||||
document.getElementById("link-text").style.cssText = "display: block;transition: all 0.5s";
|
||||
};
|
||||
link.onmouseout = function () {
|
||||
document.getElementById("social").style.cssText = "background: none;backdrop-filter: none;border-radius: 6px;transition: all 0.5s";
|
||||
document.getElementById("link-text").style.cssText = "display: none;transition: all 0.5s";
|
||||
}
|
||||
$("#social").mouseover(function () {
|
||||
$("#social").css({
|
||||
"background": "rgb(0 0 0 / 25%)",
|
||||
'border-radius': '6px',
|
||||
"backdrop-filter": "blur(5px)"
|
||||
});
|
||||
$("#link-text").css({
|
||||
"display": "block",
|
||||
});
|
||||
}).mouseout(function () {
|
||||
$("#social").css({
|
||||
"background": "none",
|
||||
"border-radius": "6px",
|
||||
"backdrop-filter": "none"
|
||||
});
|
||||
$("#link-text").css({
|
||||
"display": "none"
|
||||
});
|
||||
});
|
||||
|
||||
var link = document.getElementById("github");
|
||||
link.onmouseover = function () {
|
||||
document.getElementById("link-text").innerHTML = "去 Github 看看";
|
||||
};
|
||||
link.onmouseout = function () {
|
||||
document.getElementById("link-text").innerHTML = "通过这里联系我";
|
||||
}
|
||||
var link1 = document.getElementById("qq");
|
||||
link1.onmouseover = function () {
|
||||
document.getElementById("link-text").innerHTML = "有什么事吗";
|
||||
};
|
||||
link1.onmouseout = function () {
|
||||
document.getElementById("link-text").innerHTML = "通过这里联系我";
|
||||
}
|
||||
var link2 = document.getElementById("email");
|
||||
link2.onmouseover = function () {
|
||||
document.getElementById("link-text").innerHTML = "来封 Email";
|
||||
};
|
||||
link2.onmouseout = function () {
|
||||
document.getElementById("link-text").innerHTML = "通过这里联系我";
|
||||
}
|
||||
var link3 = document.getElementById("telegram");
|
||||
link3.onmouseover = function () {
|
||||
document.getElementById("link-text").innerHTML = "你懂的 ~";
|
||||
};
|
||||
link3.onmouseout = function () {
|
||||
document.getElementById("link-text").innerHTML = "通过这里联系我";
|
||||
}
|
||||
var link4 = document.getElementById("twitter");
|
||||
link4.onmouseover = function () {
|
||||
document.getElementById("link-text").innerHTML = "你懂的 ~";
|
||||
};
|
||||
link4.onmouseout = function () {
|
||||
document.getElementById("link-text").innerHTML = "通过这里联系我";
|
||||
}
|
||||
};
|
||||
|
||||
//菜单栏切换
|
||||
function switchMenu() {
|
||||
var menu = document.cookie.replace(/(?:(?:^|.*;\s*)menu\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
|
||||
if (menu == '0') {
|
||||
document.getElementById("container").classList.add('menus');
|
||||
document.getElementById("menu").innerHTML = "<i class='fad fa-times'></i>";
|
||||
document.cookie = "menu=1;path=/";
|
||||
} else {
|
||||
document.getElementById("container").classList.remove('menus');
|
||||
document.getElementById("menu").innerHTML = "<i class='fad fa-bars'></i>";
|
||||
document.cookie = "menu=0;path=/";
|
||||
}
|
||||
}
|
||||
$("#github").mouseover(function () {
|
||||
$("#link-text").html("去 Github 看看");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
$("#qq").mouseover(function () {
|
||||
$("#link-text").html("有什么事吗");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
$("#email").mouseover(function () {
|
||||
$("#link-text").html("来封 Email");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
$("#telegram").mouseover(function () {
|
||||
$("#link-text").html("你懂的 ~");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
$("#twitter").mouseover(function () {
|
||||
$("#link-text").html("你懂的 ~");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
|
||||
//更多页面切换
|
||||
function switchMore() {
|
||||
var more = document.cookie.replace(/(?:(?:^|.*;\s*)more\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
|
||||
if (more == '0') {
|
||||
document.getElementById("container").classList.add('mores');
|
||||
document.getElementById("change").innerHTML = "Oops !";
|
||||
document.getElementById("change1").innerHTML = "哎呀,这都被你发现了( 再点击一次可关闭 )";
|
||||
document.cookie = "more=1;path=/";
|
||||
var shoemore = false;
|
||||
$('#switchmore').on('click', function () {
|
||||
shoemore = !shoemore;
|
||||
if (shoemore && $(document).width() >= 990) {
|
||||
$('#container').attr('class', 'container mores');
|
||||
$("#change").html("Oops !");
|
||||
$("#change1").html("哎呀,这都被你发现了( 再点击一次可关闭 )");
|
||||
} else {
|
||||
document.getElementById("container").classList.remove('mores');
|
||||
document.getElementById("change").innerHTML = "Hello World !";
|
||||
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站,存活于互联网的边缘";
|
||||
document.cookie = "more=0;path=/";
|
||||
$('#container').attr('class', 'container');
|
||||
$("#change").html("Hello World !");
|
||||
$("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//更多页面关闭按钮
|
||||
$('#close').on('click', function () {
|
||||
$('#container').attr('class', 'container');
|
||||
$("#change").html("Hello World !");
|
||||
$("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
|
||||
});
|
||||
|
||||
//菜单栏切换
|
||||
var switchmenu = false;
|
||||
$('#switchmenu').on('click', function () {
|
||||
switchmenu = !switchmenu;
|
||||
if (switchmenu) {
|
||||
$('#row').attr('class', 'row menus');
|
||||
$("#menu").html("<i class='fad fa-times'></i>");
|
||||
} else {
|
||||
$('#row').attr('class', 'row');
|
||||
$("#menu").html("<i class='fad fa-bars'></i>");
|
||||
}
|
||||
});
|
||||
|
||||
//更多弹窗页面
|
||||
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";
|
||||
}
|
||||
$('#openmore').on('click', function () {
|
||||
$('#box').css("display", "block");
|
||||
$('#row').css("display", "none");
|
||||
$('#more').css("cssText", "display:none !important");
|
||||
});
|
||||
$('#closemore').on('click', function () {
|
||||
$('#box').css("display", "none");
|
||||
$('#row').css("display", "flex");
|
||||
$('#more').css("display", "flex");
|
||||
});
|
||||
|
||||
//监听网页宽度
|
||||
window.addEventListener('load', function () {
|
||||
window.addEventListener('resize', function () {
|
||||
//关闭移动端样式
|
||||
if (window.innerWidth >= 600) {
|
||||
document.getElementById("container").classList.remove('menus');
|
||||
document.getElementById("menu").innerHTML = "<i class='fad fa-bars'></i>";
|
||||
$('#row').attr('class', 'row');
|
||||
$("#menu").html("<i class='fad fa-bars'></i>");
|
||||
//移除移动端切换功能区
|
||||
document.getElementById("rightone").classList.remove('mobile');
|
||||
$('#rightone').attr('class', 'row rightone');
|
||||
}
|
||||
//移动端隐藏更多页面
|
||||
|
||||
if (window.innerWidth <= 990) {
|
||||
document.getElementById("container").classList.remove('mores');
|
||||
document.getElementById("change").innerHTML = "Hello World !";
|
||||
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站,存活于互联网的边缘";
|
||||
//移动端隐藏更多页面
|
||||
$('#container').attr('class', 'container');
|
||||
$("#change").html("Hello World !");
|
||||
$("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
|
||||
|
||||
//移动端隐藏弹窗页面
|
||||
$('#box').css("display", "none");
|
||||
$('#row').css("display", "flex");
|
||||
$('#more').css("display", "flex");
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
//移动端切换功能区
|
||||
function changeMore() {
|
||||
var more = document.cookie.replace(/(?:(?:^|.*;\s*)more\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
|
||||
if (more == '0') {
|
||||
document.getElementById("rightone").classList.add('mobile');
|
||||
document.cookie = "more=1;path=/";
|
||||
var changemore = false;
|
||||
$('#changemore').on('click', function () {
|
||||
changemore = !changemore;
|
||||
if (changemore) {
|
||||
$('#rightone').attr('class', 'row menus mobile');
|
||||
} else {
|
||||
document.getElementById("rightone").classList.remove('mobile');
|
||||
document.cookie = "more=0;path=/";
|
||||
$('#rightone').attr('class', 'row menus');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//更多页面显示关闭按钮
|
||||
$("#more").hover(function () {
|
||||
document.getElementById("close").style.cssText = "display: block";
|
||||
$('#close').css("display", "block");
|
||||
}, function () {
|
||||
document.getElementById("close").style.cssText = "display: none";
|
||||
$('#close').css("display", "none");
|
||||
})
|
||||
|
||||
//屏蔽右键
|
||||
|
@ -22,15 +22,15 @@ var vm = new Vue({
|
||||
var myHours = myDate.getHours(); // 获取当前小时(0-23)
|
||||
var myMinu = myDate.getMinutes(); // 获取当前分钟(0-59)
|
||||
var mySec = myDate.getSeconds(); // 获取当前秒数(0-59)
|
||||
var myWeek = myDate.getDay() - 1; //获取当前星期几(0-6)
|
||||
var myWeek = myDate.getDay(); //获取当前星期几(0-6)
|
||||
|
||||
this.hour = myHours;
|
||||
this.year = myYear;
|
||||
this.month = myMonth - 1;
|
||||
this.day = myDay - 1;
|
||||
this.curday = myDay;
|
||||
this.week = myWeek;
|
||||
this.curweek = myWeek +1;
|
||||
this.week = myWeek + 6;
|
||||
this.curweek = myWeek + 7;
|
||||
this.minute = myMinu;
|
||||
this.age = myYear - this.yearForYour;
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user