更新手机导航页面

layout/_widget/sidebar.ejs

@@ -1,10 +1,21 @@
 <div class="sidebar">
-    <img src="<%= theme.logo  %>" alt="">
+    <div class="topo">
+        <h2><%= theme.author %></h2>
+    </div>
     <ul>
         <% for(const menu in theme.menus) { %>
-        <li><a href="<%= theme.menus[menu] %>"><%= theme.menus_title[menu] %></a><span class="dot"></span></li>
+        <li>
+            <a href="<%= theme.menus[menu] %>"><%= theme.menus_title[menu] %></a>
+        </li>
         <% } %>
     </ul>
+    <div class="my_foot">
+        <% theme.bottomIcon.forEach(item =>{%>
+        <a href="<%= item.toUrl %>">
+            <img src="<%= item.iconLink %>" alt="Quiet主题">
+        </a>
+        <% }) %>
+    </div>
 </div>
 <div class='shelter'
     style='cursor: pointer;display: none; position: fixed;left: 0;top: 0; right: 0;bottom: 0;background-color: <%= theme.picture.colour %>;opacity:<%= theme.picture.opacity %>;z-index: 108;'>
@@ -17,34 +28,81 @@
         top: 0;
         right: 0;
         bottom: 0;
-        background: rgb(255, 255, 255);
+        background: #fff;
         z-index: 999;
         text-align: center;
+        box-shadow: -6px 0 20px rgba(98, 94, 94, .815)
     }
 
-    .sidebar img {
+    .topo {
-        width: 5rem;
+        width: 100%;
-        height: 5rem;
+        height: 200px;
-        margin-top: 50px;
+        background: url(https://api.ixiaowai.cn/gqapi/gqapi.php) no-repeat;
-        margin-bottom: 50px;
+        background-size: 100% 100%;
+        position: relative;
+        display: flex;
+        align-items: flex-end
+    }
+
+    .topo h2 {
+        color: #fff;
+        z-index: 1;
+        position: relative;
+        margin: 0 0 10px 10px;
+        font-size: 1.2em;
+        box-sizing: border-box
+    }
+
+    .topo:before {
+        content: '';
+        background-image: url(../image/pattern.png);
+        background-repeat: repeat;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 1
     }
 
     .sidebar ul {
         width: 100%;
-
+        margin-top: 50px
     }
 
     .sidebar ul li {
+        height: 50px;
         list-style: none;
         font-size: 1.2em;
-        padding: 15px 0;
+        text-align: right;
+        margin-right: 10px
     }
 
     .sidebar ul li a {
         display: grid;
-        color: #898FA0;
+        color: #5d606a;
+        text-overflow: ellipsis;
         width: 100%;
+        text-decoration: none
+    }
+
+    .my_foot {
+        width: 100%;
+        padding: 10px;
+        margin-bottom: 10px;
+        position: absolute;
+        bottom: 0
+    }
+
+    .my_foot a {
         text-decoration: none;
+        margin-right: 10px;
+        display: inline-block
+    }
+
+    .my_foot a img {
+        width: 30px;
+        height: 30px
     }
 </style>
 

source/css/food.css

@@ -1 +1 @@
-.footer{height:80px;display:flex;padding:0 calc((100% - 1160px)/ 2)}.footer .Copyright{display:flex;flex-basis:0;justify-content:flex-start;align-items:center;flex-grow:1;color:#898fa0;font-size:14px;margin-left:18px}.footer .contact{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1}.footer .contact a{display:flex;width:36px;height:36px;margin-left:7px;justify-content:center;align-items:center;color:#898fa0;margin-right:18px}.footer .contact a img{width:100%;height:100%}@media screen and (max-width:600px){.footer{padding:2em;flex-direction:column-reverse}.footer .Copyright{margin:auto}.footer .contact{margin:auto}}
+.footer{display:flex;padding:0 calc((100% - 1160px)/ 2);height:80px}.footer .Copyright{display:flex;margin-left:18px;color:#898fa0;font-size:14px;flex-basis:0;justify-content:flex-start;align-items:center;flex-grow:1}.footer .contact{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1}.footer .contact a{display:flex;margin-left:10px;margin-right:10px;width:30px;height:30px;color:#898fa0;justify-content:center;align-items:center}.footer .contact a img{width:100%;height:100%}@media screen and (max-width:600px){.footer{padding:2em;flex-direction:column-reverse}.footer .Copyright{margin:auto}.footer .contact{margin:auto;flex-wrap:wrap}.footer .contact a{margin-bottom:10px}}