111 lines
2.6 KiB
Plaintext
111 lines
2.6 KiB
Plaintext
<div class="sidebar">
|
|
<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>
|
|
</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;'>
|
|
</div>
|
|
<style>
|
|
.sidebar {
|
|
width: 0;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #fff;
|
|
z-index: 999;
|
|
text-align: center;
|
|
box-shadow: -6px 0 20px rgba(98, 94, 94, .815)
|
|
}
|
|
|
|
.topo {
|
|
width: 100%;
|
|
height: 200px;
|
|
background: url(https://api.ixiaowai.cn/gqapi/gqapi.php) no-repeat;
|
|
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;
|
|
text-align: right;
|
|
margin-right: 10px
|
|
}
|
|
|
|
.sidebar ul li a {
|
|
display: grid;
|
|
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>
|
|
|
|
<script>
|
|
$(function () { $('.h-right-close>svg').click(function () { $('.sidebar').animate({ width: "66%" }, 500); $('.shelter').fadeIn("slow") }); $('.shelter').click(function (e) { $('.sidebar').animate({ width: "0" }, 500); $('.shelter').fadeOut("slow") }) })
|
|
</script> |