This commit is contained in:
底层用户 2021-10-03 17:03:31 +08:00
parent 2a6eabac95
commit cfae7cc61b
5 changed files with 169 additions and 152 deletions

View File

@ -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';

View File

@ -60,6 +60,7 @@ main {
.row {
align-items: center;
justify-content: center;
width: 100%;
}

View File

@ -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&nbsp;World&nbsp;!</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">&nbsp;&nbsp;v&nbsp;1.2</span>
<span class="img-text">&nbsp;&nbsp;v&nbsp;1.3</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-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>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;Js&nbsp;文件优化</span>
</div>
</div>
</div>

View File

@ -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&nbsp;!";
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&nbsp;!");
$("#change1").html("哎呀,这都被你发现了( 再点击一次可关闭 ");
} else {
document.getElementById("container").classList.remove('mores');
document.getElementById("change").innerHTML = "Hello&nbsp;World&nbsp;!";
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站,存活于互联网的边缘";
document.cookie = "more=0;path=/";
$('#container').attr('class', 'container');
$("#change").html("Hello&nbsp;World&nbsp;!");
$("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
}
}
});
//更多页面关闭按钮
$('#close').on('click', function () {
$('#container').attr('class', 'container');
$("#change").html("Hello&nbsp;World&nbsp;!");
$("#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&nbsp;World&nbsp;!";
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站,存活于互联网的边缘";
//移动端隐藏更多页面
$('#container').attr('class', 'container');
$("#change").html("Hello&nbsp;World&nbsp;!");
$("#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");
})
//屏蔽右键

View File

@ -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;
},