v 1.2

imsyy · Sep 27, 2021 · 46ddf45 · 46ddf45
1 parent e1151a3
commit 46ddf45
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 13 deletions.
diff --git a/css/mobile.css b/css/mobile.css
@@ -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;

diff --git a/css/style.css b/css/style.css
@@ -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;

diff --git a/index.html b/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">&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">

diff --git a/js/main.js b/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;
+}