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

v1.4 & fix cdn & fix ico

Browse Source
This commit is contained in:
底层用户 2022-01-13 14:48:37 +08:00
parent 42723f01a0
commit f8a88ad4ce
14 changed files with 227 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
css/font.css
View File

@ -1,10 +1,3 @@
@font-face {
font-family: "iconfont";
src: url('../font/font_2831425_80aedhvquju.woff2') format('woff2'),
url('../font/font_2831425_80aedhvquju.woff') format('woff'),
url('../font/font_2831425_80aedhvquju.ttf') format('truetype');
}
@font-face { @font-face {
font-family: "Pacifico-Regular"; font-family: "Pacifico-Regular";
src: url('../font/Pacifico-Regular.ttf'); src: url('../font/Pacifico-Regular.ttf');
@ -15,6 +8,19 @@
src: url('../font/UnidreamLED.ttf'); src: url('../font/UnidreamLED.ttf');
} }
@font-face {
font-family: "PingFangSC";
src: url('../font/PingFangSC.woff2');
}
@font-face {
font-family: "iconfont";
/* Project id 2831425 */
src: url('../font/font_2831425_ekwvaabvo8l.woff2') format('woff2'),
url('../font/font_2831425_ekwvaabvo8l.woff') format('woff'),
url('../font/font_2831425_ekwvaabvo8l.ttf') format('truetype');
}
.iconfont { .iconfont {
font-family: "iconfont" !important; font-family: "iconfont" !important;
font-size: 16px; font-size: 16px;
@ -23,6 +29,70 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-undo:before {
content: "\e875";
}
.icon-wrench-fill:before {
content: "\e86e";
}
.icon-plus:before {
content: "\e653";
}
.icon-right:before {
content: "\e613";
}
.icon-right-copy:before {
content: "\ebd4";
}
.icon-times:before {
content: "\e857";
}
.icon-bars:before {
content: "\e61f";
}
.icon-link:before {
content: "\e603";
}
.icon-close:before {
content: "\e656";
}
.icon-photo:before {
content: "\ebd3";
}
.icon-navigation1:before {
content: "\e637";
}
.icon-cloud:before {
content: "\e624";
}
.icon-lab:before {
content: "\e88d";
}
.icon-blog-solid:before {
content: "\e631";
}
.icon-comment-alt-lines:before {
content: "\e679";
}
.icon-music-list:before {
content: "\e699";
}
.icon-youxiang:before { .icon-youxiang:before {
content: "\e605"; content: "\e605";
} }

6
css/lantern.css
View File

@ -220,4 +220,10 @@
width: 8px; width: 8px;
height: 16px height: 16px
} }
}
@media screen and (max-width:720px) {
.lantern__warpper {
display: none;
}
} }

31
css/mobile.css
View File

@ -50,12 +50,22 @@
span.img-text { span.img-text {
font-size: 1.75rem; font-size: 1.75rem;
} }
/*链接卡片文字*/
span.link-name {
display: none !important;
}
.link-card i {
margin-left: 10px !important;
margin-right: 10px !important;
}
} }
/*小于840px时*/ /*小于840px时*/
@media (max-width: 840px) { @media (max-width: 840px) {
/*社交链接*/ /*社交链接*/
.social { .social {
max-width: 100%; max-width: 100%;
@ -123,6 +133,17 @@
} }
*/ */
/*链接卡片*/
.link-card {
align-items: center !important;
flex-direction: column !important;
justify-content: center !important;
}
span.link-name {
display: block !important;
}
/*菜单栏按钮*/ /*菜单栏按钮*/
.menu { .menu {
display: flex; display: flex;
@ -169,6 +190,7 @@
/* 大于992px时 */ /* 大于992px时 */
@media (min-width: 992px) { @media (min-width: 992px) {
/*时钟显示*/ /*时钟显示*/
span#win_text, span#win_text,
span#win_speed { span#win_speed {
@ -178,6 +200,7 @@
/* 大于1400px时 */ /* 大于1400px时 */
@media (min-width: 1400px) { @media (min-width: 1400px) {
/*时钟显示*/ /*时钟显示*/
span#win_text, span#win_text,
span#win_speed { span#win_speed {
@ -222,10 +245,14 @@
text-align: center; text-align: center;
position: fixed; position: fixed;
top: 8%; top: 8%;
font-family: 'Pacifico-Regular';
font-size: 1.75rem; font-size: 1.75rem;
} }
/*第二屏logo*/
.logo-text {
font-family: 'Pacifico-Regular' !important;
}
/*切换动画*/ /*切换动画*/
/* /*
.hitokoto, .hitokoto,

81
css/style.css
View File

@ -16,6 +16,7 @@ p {
transition: 0.3s; transition: 0.3s;
color: #efefef; color: #efefef;
user-select: none; user-select: none;
font-family: 'PingFangSC';
} }
a:hover { a:hover {
@ -96,19 +97,24 @@ main {
width: 120px; width: 120px;
} }
.main-img img:hover {
transform: rotate(360deg);
}
.img-title { .img-title {
width: 100%; width: 100%;
margin-left: 12px; margin-left: 12px;
font-family: Pacifico-Regular;
transform: translateY(-8%); transform: translateY(-8%);
} }
span.img-title { span.img-title {
font-size: 5rem; font-size: 5rem;
font-family: 'Pacifico-Regular' !important;
} }
span.img-text { span.img-text {
font-size: 2rem; font-size: 2rem;
font-family: 'Pacifico-Regular' !important;
} }
/*简介*/ /*简介*/
@ -131,7 +137,11 @@ span.img-text {
p.des-title { p.des-title {
margin: 1rem 1rem; margin: 1rem 1rem;
line-height: 2rem; line-height: 2rem;
font-family: Pacifico-Regular; font-size: 1.10rem;
}
span#change {
font-family: 'Pacifico-Regular' !important;
} }
i.iconfont.icon-yinhao-copy { i.iconfont.icon-yinhao-copy {
@ -151,6 +161,10 @@ i.iconfont.icon-yinhao-copy {
margin: 0px 10px; margin: 0px 10px;
} }
.social .link i:hover {
color: #707070;
}
#link-text { #link-text {
display: none; display: none;
flex: 1; flex: 1;
@ -165,6 +179,10 @@ i.iconfont.icon-yinhao-copy {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
padding: 20px; padding: 20px;
border-radius: 6px; border-radius: 6px;
height: 165px;
display: flex;
justify-content: center;
flex-direction: column;
} }
.hitokoto-all { .hitokoto-all {
@ -173,10 +191,15 @@ i.iconfont.icon-yinhao-copy {
flex-direction: column; flex-direction: column;
} }
.hitokoto-text {
font-size: 1.2rem;
}
.hitokoto-from { .hitokoto-from {
margin-top: 10px; margin-top: 10px;
font-weight: bold; font-weight: bold;
align-self: flex-end; align-self: flex-end;
font-size: 1.10rem;
} }
/*时间卡片*/ /*时间卡片*/
@ -189,21 +212,35 @@ i.iconfont.icon-yinhao-copy {
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 165px;
font-size: 1.10rem;
} }
span.time-text { span.time-text {
font-size: 3.25rem; font-size: 3.25rem;
letter-spacing: 2px; letter-spacing: 2px;
font-family: UnidreamLED; font-family: 'UnidreamLED' !important;
} }
/*链接卡片*/ /*分割线*/
.line { .line {
margin: 1rem 0.25rem; margin: 1rem 0.25rem;
margin-top: 2rem; margin-top: 2rem;
font-size: 1.10rem; font-size: 1.2rem;
display: flex;
align-items: center;
} }
span.line-text {
font-size: 1.35rem;
margin: 0px 6px;
}
i.iconfont.icon-link {
font-size: 1.4rem;
}
/*链接卡片*/
.link-card { .link-card {
height: 100px; height: 100px;
width: 100%; width: 100%;
@ -212,8 +249,13 @@ span.time-text {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: row;
justify-content: space-evenly; justify-content: center;
}
.link-card i {
margin-left: 0px;
font-size: 2.2rem;
} }
.link-card:hover { .link-card:hover {
@ -221,6 +263,14 @@ span.time-text {
transition: 0.5s; transition: 0.5s;
} }
span.link-name {
font-size: 1.2rem;
}
.link-card:hover span.link-name {
font-size: 1.25rem;
}
/*更多页面*/ /*更多页面*/
.more { .more {
display: none !important; display: none !important;
@ -276,7 +326,7 @@ span.time-text {
} }
.progress-bar { .progress-bar {
font-family: 'UnidreamLED'; font-family: 'UnidreamLED' !important;
background-color: #efefef !important; background-color: #efefef !important;
color: rgb(86 77 89) !important; color: rgb(86 77 89) !important;
font-size: 0.95rem; font-size: 0.95rem;
@ -341,15 +391,24 @@ span.time-text {
.closebox { .closebox {
left: auto; left: auto;
top: 4px; top: 10px;
right: 8px; right: 16px;
font-size: 1.45rem;
} }
.closebox:hover { .closebox:hover {
transform: scale(1.2); transform: scale(1.2);
} }
i.iconfont.icon-close {
font-size: 1.45rem;
}
/*移动端页面切换按钮*/
i.iconfont.icon-bars,
i.iconfont.icon-times {
font-size: 1.25rem;
}
/*页脚样式*/ /*页脚样式*/
footer { footer {
text-align: center; text-align: center;

BIN
font/Pacifico-Regular.ttf
View File

Binary file not shown.

BIN
font/PingFangSC.woff2 Normal file
View File

Binary file not shown.

BIN
font/font_2831425_80aedhvquju.ttf
View File

Binary file not shown.

BIN
font/font_2831425_80aedhvquju.woff
View File

Binary file not shown.

BIN
font/font_2831425_80aedhvquju.woff2
View File

Binary file not shown.

BIN
font/font_2831425_ekwvaabvo8l.ttf Normal file
View File

Binary file not shown.

BIN
font/font_2831425_ekwvaabvo8l.woff Normal file
View File

Binary file not shown.

BIN
font/font_2831425_ekwvaabvo8l.woff2 Normal file
View File

Binary file not shown.

67
index.html
View File

@ -27,10 +27,8 @@
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png"> <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
<!-- 引入 Izitoast --> <!-- 引入 Izitoast -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js">
<!-- 引入 Fontawesome --> </script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
media="all">
<!--引入 Vue <!--引入 Vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>-->
<!-- 引入 jQuery --> <!-- 引入 jQuery -->
@ -116,7 +114,7 @@
</div> </div>
<!--第二屏 Logo--> <!--第二屏 Logo-->
<div class="logo cards" style="display: none" id="changemore"> <div class="logo cards" style="display: none" id="changemore">
<a>imsyy.top</a> <a class="logo-text">imsyy.top</a>
</div> </div>
<div class="col right"> <div class="col right">
<div class="main-right"> <div class="main-right">
@ -125,7 +123,7 @@
<div class="col hitokotos"> <div class="col hitokotos">
<!--一言--> <!--一言-->
<div class="hitokoto cards" id="hitokoto"> <div class="hitokoto cards" id="hitokoto">
<div class="hitokoto-ico"><i class="fad fa-comment-alt-lines"></i>&nbsp;一言</div> <!--<div class="hitokoto-ico"><i class="iconfont icon-comment-alt-lines"></i>&nbsp;&nbsp;一言</div>-->
<div class="hitokoto-all"> <div class="hitokoto-all">
<div class="hitokoto-text"><span id="hitokoto_text">每一个人都应该明确自己的方向和位置</span> <div class="hitokoto-text"><span id="hitokoto_text">每一个人都应该明确自己的方向和位置</span>
</div> </div>
@ -149,7 +147,7 @@
</div> </div>
<!--分隔线--> <!--分隔线-->
<div class="line"> <div class="line">
<i class="fad fa-grip-lines-vertical"></i> <i class="iconfont icon-link"></i>
<span class="line-text">网站列表</span> <span class="line-text">网站列表</span>
</div> </div>
<!--网站链接--> <!--网站链接-->
@ -159,23 +157,23 @@
<div class="col"> <div class="col">
<a href="https://blog.imsyy.top/" target="_blank"> <a href="https://blog.imsyy.top/" target="_blank">
<div class="link-card cards"> <div class="link-card cards">
<i class="fad fa-blog"></i> <i class="iconfont icon-blog-solid"></i>
<span class="link-name">博客</span> <span class="link-name">博客</span>
</div> </div>
</a> </a>
</div> </div>
<div class="col 2"> <div class="col 2">
<a href="https://web.imsyy.top/" target="_blank"> <a href="https://drive.imsyy.top/" target="_blank">
<div class="link-card cards"> <div class="link-card cards">
<i class="fad fa-spider-web"></i> <i class="iconfont icon-cloud"></i>
<span class="link-name">网址导航</span> <span class="link-name">网盘</span>
</div> </div>
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a href="https://music.imsyy.top/" target="_blank"> <a href="https://music.imsyy.top/" target="_blank">
<div class="link-card cards"> <div class="link-card cards">
<i class="fad fa-list-music"></i> <i class="iconfont icon-music-list"></i>
<span class="link-name">音乐</span> <span class="link-name">音乐</span>
</div> </div>
</a> </a>
@ -186,23 +184,23 @@
<div class="col"> <div class="col">
<a href="https://lab.imsyy.top/" target="_blank"> <a href="https://lab.imsyy.top/" target="_blank">
<div class="link-card cards"> <div class="link-card cards">
<i class="fad fa-flask"></i> <i class="iconfont icon-lab"></i>
<span class="link-name">实验室</span> <span class="link-name">实验室</span>
</div> </div>
</a> </a>
</div> </div>
<div class="col 2"> <div class="col 2">
<a href="https://drive.imsyy.top/" target="_blank"> <a href="https://web.imsyy.top/" target="_blank">
<div class="link-card cards"> <div class="link-card cards">
<i class="fad fa-cloud-download"></i> <i class="iconfont icon-navigation1"></i>
<span class="link-name">网盘</span> <span class="link-name">网址导航</span>
</div> </div>
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a href="https://photo.imsyy.top/" target="_blank"> <a href="https://photo.imsyy.top/" target="_blank">
<div class="link-card cards"> <div class="link-card cards">
<i class="fad fa-image"></i> <i class="iconfont icon-photo"></i>
<span class="link-name">相册</span> <span class="link-name">相册</span>
</div> </div>
</a> </a>
@ -214,18 +212,18 @@
</div> </div>
<!--展开菜单按钮--> <!--展开菜单按钮-->
<div class="menu" id="switchmenu"> <div class="menu" id="switchmenu">
<a class="munu-button cards" id="menu"><i class="fad fa-bars"></i></a> <a class="munu-button cards" id="menu"><i class="iconfont icon-bars"></i></a>
</div> </div>
<!--更多内容--> <!--更多内容-->
<div class="more cards" id="more"> <div class="more" id="more">
<!--关闭按钮--> <!--关闭按钮-->
<div class="close fixed-top" id="close"> <div class="close fixed-top" id="close">
<i class="fad fa-times-circle"></i> <i class="iconfont icon-close"></i>
</div> </div>
<div class="line" style="margin-top: 1rem;"> <div class="line" style="margin-top: 1rem;">
<i class="fad fa-grip-lines-vertical"></i> <i class="iconfont icon-right-copy"></i>
<span class="line-text">时间胶囊</span> <span class="line-text">时间胶囊</span>
<i class="fad fa-grip-lines-vertical"></i> <i class="iconfont icon-right"></i>
</div> </div>
<div class="date" id="date"> <div class="date" id="date">
<div class="item" id="dayProgress"> <div class="item" id="dayProgress">
@ -254,9 +252,9 @@
</div> </div>
</div> </div>
<div class="line"> <div class="line">
<i class="fad fa-grip-lines-vertical"></i> <i class="iconfont icon-right-copy"></i>
<span class="line-text">杂七杂八</span> <span class="line-text">杂七杂八</span>
<i class="fad fa-grip-lines-vertical"></i> <i class="iconfont icon-right"></i>
</div> </div>
<!--网站链接--> <!--网站链接-->
<div class="row"> <div class="row">
@ -277,7 +275,7 @@
<div class="col"> <div class="col">
<a href="https://write.imsyy.top/" target="_blank"> <a href="https://write.imsyy.top/" target="_blank">
<div class="link-card cards"> <div class="link-card cards">
<span class="link-name">Markdown</span> <span class="link-name">编辑器</span>
</div> </div>
</a> </a>
</div> </div>
@ -311,22 +309,23 @@
<div class="box-wrapper"> <div class="box-wrapper">
<!--关闭按钮--> <!--关闭按钮-->
<div class="closebox fixed-top" id="closemore"> <div class="closebox fixed-top" id="closemore">
<i class="fad fa-times-circle"></i> <i class="iconfont icon-close"></i>
</div> </div>
<!--更新日志--> <!--更新日志-->
<div class="img-title"> <div class="img-title">
<span class="img-title">imsyy</span> <span class="img-title">imsyy</span>
<span class="img-text">.top</span> <span class="img-text">.top</span>
<span class="img-text">&nbsp;&nbsp;v&nbsp;1.3</span> <span class="img-text">&nbsp;&nbsp;v&nbsp;1.4</span>
</div> </div>
<div class="upnote"> <div class="upnote">
<span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;点击左侧简介可弹出更多页面</span> <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;点击左侧简介可弹出更多页面</span>
<span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;修复时间胶囊（ 时光进度条 ）</span> <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;修复时间胶囊（ 时光进度条 ）</span>
<span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;隐藏页面新增全屏弹窗</span> <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;隐藏页面新增全屏弹窗</span>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;星期进度条显示错误</span> <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;新增动态跟随鼠标样式</span>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;移动端动画及细节</span> <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;Js&nbsp;文件优化</span> <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span>
<span class="uptext"><i class="fad fa-undo-alt"></i>&nbsp;<a href="./old/" <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标由 Fontawesome 改为 Iconfont</span>
<span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a href="./old/"
style="color:#efefef">返回旧版站点</a></span> style="color:#efefef">返回旧版站点</a></span>
</div> </div>
</div> </div>

23
js/main.js
View File

@ -40,15 +40,16 @@ color: rgb(30,152,255);
var title1 = '無名の主页' var title1 = '無名の主页'
var title2 = 'imsyy.top' var title2 = 'imsyy.top'
var content = ` var content = `
版 本 号：1.3.0 版 本 号：1.4.0
更新日期：2021-10-02 14:26:31 更新日期：2022-01-12 14:38:34
更新说明： 更新说明：
1. 新增 点击左侧简介弹出更多页面 1. 新增 部分页面样式调整
2. 修复 时间胶囊（ 时光进度条 ） 2. 新增 动态跟随鼠标样式
3. 优化 移动端动画及细节 3. 修复 部分控件无法点击
4. 优化 Js 文件优化 4. 优化 移动端动画及细节
5. 修复 星期进度条显示错误 5. 优化 页面加载缓慢
6. 修复 时光胶囊显示错误
主页: https://imsyy.top 主页: https://imsyy.top
Github: https://github.com/imsyy/home Github: https://github.com/imsyy/home
@ -57,7 +58,7 @@ console.log(`%c${title1} %c${title2}
%c${content}`, styleTitle1, styleTitle2, styleContent) %c${content}`, styleTitle1, styleTitle2, styleContent)
//获取一言 //获取一言
fetch('https://v1.hitokoto.cn') fetch('https://v1.hitokoto.cn?max_length=24')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const hitokoto = document.getElementById('hitokoto_text') const hitokoto = document.getElementById('hitokoto_text')
@ -237,10 +238,10 @@ $('#switchmenu').on('click', function () {
switchmenu = !switchmenu; switchmenu = !switchmenu;
if (switchmenu) { if (switchmenu) {
$('#row').attr('class', 'row menus'); $('#row').attr('class', 'row menus');
$("#menu").html("<i class='fad fa-times'></i>"); $("#menu").html("<i class='iconfont icon-times'></i>");
} else { } else {
$('#row').attr('class', 'row'); $('#row').attr('class', 'row');
$("#menu").html("<i class='fad fa-bars'></i>"); $("#menu").html("<i class='iconfont icon-bars'>");
} }
}); });
@ -262,7 +263,7 @@ window.addEventListener('load', function () {
//关闭移动端样式 //关闭移动端样式
if (window.innerWidth >= 600) { if (window.innerWidth >= 600) {
$('#row').attr('class', 'row'); $('#row').attr('class', 'row');
$("#menu").html("<i class='fad fa-bars'></i>"); $("#menu").html("<i class='iconfont icon-bars'>");
//移除移动端切换功能区 //移除移动端切换功能区
$('#rightone').attr('class', 'row rightone'); $('#rightone').attr('class', 'row rightone');
} }