143 lines
2.8 KiB
Plaintext
143 lines
2.8 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'>
|
|
</div>
|
|
<style>
|
|
.shelter{
|
|
background-color: #333;
|
|
opacity:0.5;
|
|
cursor: pointer;
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1998;
|
|
}
|
|
.sidebar {
|
|
width: 66%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
bottom: 0;
|
|
background: #fff;
|
|
z-index: 1999;
|
|
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( {
|
|
right: "0"
|
|
}, 500 );
|
|
$( '.shelter' )
|
|
.fadeIn( "slow" )
|
|
} );
|
|
$( '.shelter' )
|
|
.click( function ( e ) {
|
|
$( '.sidebar' )
|
|
.animate( {
|
|
right: "-100%"
|
|
}, 500 );
|
|
$( '.shelter' )
|
|
.fadeOut( "slow" )
|
|
} )
|
|
} )
|
|
|
|
</script>
|