移动端新增小部件切换

css/mobile.css

@@ -230,3 +230,14 @@
     -o-animation: fade 0.5s;
     -ms-animation: fade 0.5s;
 }
+
+/*
+移动端功能区切换
+*/
+.mobile .col.hitokotos {
+    display: none;
+}
+
+.mobile .col.times {
+    display: block;
+}

index.html

@@ -115,7 +115,7 @@
                     <div class="col right">
                         <div class="main-right">
                             <!--功能区-->
-                            <div class="row rightone">
+                            <div class="row rightone" id="rightone">
                                 <div class="col hitokotos">
                                     <!--一言-->
                                     <div class="hitokoto cards" id="hitokoto">
@@ -211,7 +211,7 @@
                     <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 cards" style="display: none" onclick="changeMore()">
                     <a>imsyy.top</a>
                 </div>
                 <!--更多内容-->

js/main.js

@@ -252,12 +252,13 @@ function closeBox() {
 
 //监听网页宽度
 window.addEventListener('load', function () {
-    //console.log(window.innerWidth);
     window.addEventListener('resize', function () {
-        //console.log(window.innerWidth);
         //关闭移动端样式
         if (window.innerWidth >= 600) {
             document.getElementById("container").classList.remove('menus');
+            document.getElementById("menu").innerHTML = "<i class='fad fa-bars'></i>";
+            //移除移动端切换功能区
+            document.getElementById("rightone").classList.remove('mobile');
         }
         //移动端隐藏更多页面
         if (window.innerWidth <= 990) {
@@ -266,9 +267,20 @@ window.addEventListener('load', function () {
             document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站，存活于互联网的边缘";
         }
     })
-
 })
 
+//移动端切换功能区
+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=/";
+    } else {
+        document.getElementById("rightone").classList.remove('mobile');
+        document.cookie = "more=0;path=/";
+    }
+}
+
 //更多页面显示关闭按钮
 $("#more").hover(function () {
     document.getElementById("close").style.cssText = "display: block";