Hawkin
/
nav-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加 页内导航

This commit is contained in:
LyLme 2022-05-02 15:36:19 +08:00
parent b4a78d9909
commit 8fa48ae8fb
4 changed files with 74 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
template/default/css/style.css
View File

@ -1,8 +1,8 @@
a:hover{text-decoration:none !important;font-weight:bold !important} a:hover{text-decoration:none;font-weight:bold}
a.icp{font-size:12px;color:#bbb;text-align:center} a.icp{font-size:12px;color:#bbb;text-align:center}
.navbar .navbar-expand-lg .navbar-light .fixed-top{position:absolute;z-index:10000} .navbar .navbar-expand-lg .navbar-light .fixed-top{position:absolute;z-index:10000}
.bottom-cover{background-image:linear-gradient(rgba(255,255,255,0) 0%,rgb(244 248 251 / 0.6) 50%,rgb(244 248 251) 100%)} .bottom-cover{background-image:linear-gradient(rgba(255,255,255,0) 0%,rgb(244 248 251 / 0.6) 50%,rgb(244 248 251) 100%)}
.navbar-light .navbar-toggler{color:#fff !important} .navbar-light .navbar-toggler{color:#fff}
p.content{text-align:center;padding:5px 30px;border-radius:10px;font-size:12px;color:#fff;font-weight:500} p.content{text-align:center;padding:5px 30px;border-radius:10px;font-size:12px;color:#fff;font-weight:500}
::-webkit-scrollbar{display:none} ::-webkit-scrollbar{display:none}
.back-to{bottom:55px;overflow:hidden;position:fixed;right:10px;width:110px;z-index:999} .back-to{bottom:55px;overflow:hidden;position:fixed;right:10px;width:110px;z-index:999}
@ -14,7 +14,7 @@ body{font-size:14px;background:#f4f8fb;overflow-x:hidden}
a{text-decoration:none} a{text-decoration:none}
a:hover{text-decoration:none} a:hover{text-decoration:none}
svg.icon{width:14px;height:14px;margin:0 5px 0 8px;vertical-align:-0.15em;fill:currentColor;overflow:hidden} svg.icon{width:14px;height:14px;margin:0 5px 0 8px;vertical-align:-0.15em;fill:currentColor;overflow:hidden}
.navbar-light .navbar-nav .nav-link{color:#fff !important;font-size:16px;font-weight:bold;text-shadow:0px 1px 0px #000} .navbar-light .navbar-nav .nav-link{color:#fff;font-size:16px;font-weight:bold;text-shadow:0px 1px 0px #000}
#search{width:100%;margin:0;padding:0 0 10px;position:relative;z-index:2000;border-radius:5px} #search{width:100%;margin:0;padding:0 0 10px;position:relative;z-index:2000;border-radius:5px}
#search form{position:relative;margin-top:15px} #search form{position:relative;margin-top:15px}
#search-text{width:100%;height:50px;line-height:50px;text-indent:10px;font-size:16px;border-radius:10px;background-color:#fff;border:1px solid #c4c7ce;box-shadow:0 0.5rem 0.625rem #d4d4d44d;transition:0.3s all linear;padding-left:20px} #search-text{width:100%;height:50px;line-height:50px;text-indent:10px;font-size:16px;border-radius:10px;background-color:#fff;border:1px solid #c4c7ce;box-shadow:0 0.5rem 0.625rem #d4d4d44d;transition:0.3s all linear;padding-left:20px}
@ -41,7 +41,7 @@ svg.icon{width:14px;height:14px;margin:0 5px 0 8px;vertical-align:-0.15em;fill:c
.search-type{white-space:nowrap;margin:0} .search-type{white-space:nowrap;margin:0}
.search-type label{margin:0} .search-type label{margin:0}
.search-type img {width: 14px;height: 14px;margin: 0 5px 0 8px;vertical-align: -0.15em;fill: currentColor;overflow: hidden;} .search-type img {width: 14px;height: 14px;margin: 0 5px 0 8px;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
.search-type li{margin-bottom:10px;display:inline-block;background:#ffffffAD !important;background:rgba(255,255,255,70%);border-radius:10px} .search-type li{margin-bottom:10px;display:inline-block;background:#ffffffAD;background:rgba(255,255,255,70%);border-radius:10px}
.search-type li label{display:inline-block;padding:0 11px;font-size:14px;border-radius:3px 3px 0 0;cursor:pointer} .search-type li label{display:inline-block;padding:0 11px;font-size:14px;border-radius:3px 3px 0 0;cursor:pointer}
.search-type input:checked+label,.search-type input:hover+label{background-color:#fff;height:50px;border-radius:10px} .search-type input:checked+label,.search-type input:hover+label{background-color:#fff;height:50px;border-radius:10px}
#search-text::-webkit-input-placeholder{color:#bbb} #search-text::-webkit-input-placeholder{color:#bbb}
@ -65,7 +65,7 @@ svg.icon{width:14px;height:14px;margin:0 5px 0 8px;vertical-align:-0.15em;fill:c
.bottom-cover{width:100%;height:50%;position:absolute;bottom:-1px;z-index:10} .bottom-cover{width:100%;height:50%;position:absolute;bottom:-1px;z-index:10}
@media screen and (min-width:1200px){.mylist li.col-3{min-width:132px} @media screen and (min-width:1200px){.mylist li.col-3{min-width:132px}
}@media screen and (min-width:992px) and (max-width:1200px){.mylist li.col-3{min-width:110px} }@media screen and (min-width:992px) and (max-width:1200px){.mylist li.col-3{min-width:110px}
}@media screen and (max-width:992px){#he-plugin-simple{display:none !important} }@media screen and (max-width:992px){#he-plugin-simple{display:none}
.banner-video video{width:1200px} .banner-video video{width:1200px}
.banner-video img{object-fit:cover;width:100%;height:100vh} .banner-video img{object-fit:cover;width:100%;height:100vh}
.search-group{padding-left:0px} .search-group{padding-left:0px}

27
template/default/css/tag.css Normal file
View File

@ -0,0 +1,27 @@
.box{margin:40px 0;position:fixed;z-index:1000}
.change-type{min-width:40px;min-height:160px;position:absolute;z-index:99;left:0;top:0;display:flex}
.change-type .type-left{width:0;background:#fff;height:100%;box-shadow:0 2px 12px 0 rgb(0 0 0 / 50%);border-bottom-right-radius:5px;border-top-right-radius:5px;margin-left:-40px;overflow:hidden;transition:width 0.4s;-moz-transition:width 0.4s;-webkit-transition:width 0.4s;-o-transition:width 0.4s}
.change-type .showListType{width:130px;transition:width 0.4s;-moz-transition:width 0.4s;-webkit-transition:width 0.4s;-o-transition:width 0.4s}
.change-type .type-left ul{margin-bottom:0px}
.change-type .type-left ul li{line-height:40px;height:40px;text-align:left;width:100%;position:relative;cursor:pointer;list-style:none}
.change-type .type-left ul li a{display:block;height:100%;position:absolute;left:0;top:0;z-index:9;padding-left:15px;overflow:hidden;width:calc(100% - 17px);color:#333;font-size:14px;border-left:2px solid #26778d}
.change-type .type-left ul li span{display:block;position:absolute;width:0;height:100%;left:0;top:0;z-index:8;overflow:hidden;transition:width 0.5s;-moz-transition:width 0.5s;-webkit-transition:width 0.5s;-o-transition:width 0.5s}
.change-type .type-left ul li:hover span{transition:width 0.5s;-moz-transition:width 0.5s;-webkit-transition:width 0.5s;-o-transition:width 0.5s}
.type-left ul li:nth-child(1):hover span,.type-left ul li:nth-child(1).active span,.type-left ul li:nth-child(8):hover span,.type-left ul li:nth-child(8).active span{background:#2C73D2;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
.type-left ul li:nth-child(1):hover a,.type-left ul li:nth-child(1).active a,.type-left ul li:nth-child(8):hover a,.type-left ul li:nth-child(8).active a{border-left:2px solid #2C73D2;color:#fff}
.type-left ul li:nth-child(2):hover span,.type-left ul li:nth-child(2).active span,.type-left ul li:nth-child(9):hover span,.type-left ul li:nth-child(9).active span{background:#D65DB1;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
.type-left ul li:nth-child(2):hover a,.type-left ul li:nth-child(2).active a,.type-left ul li:nth-child(9):hover a,.type-left ul li:nth-child(9).active a{border-left:2px solid #D65DB1;color:#fff}
.type-left ul li:nth-child(3):hover span,.type-left ul li:nth-child(3).active span,.type-left ul li:nth-child(10):hover span,.type-left ul li:nth-child(10).active span{background:#00C9A7;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
.type-left ul li:nth-child(3):hover a,.type-left ul li:nth-child(3).active a,.type-left ul li:nth-child(10):hover a,.type-left ul li:nth-child(10).active a{border-left:2px solid #00C9A7;color:#fff}
.type-left ul li:nth-child(4):hover span,.type-left ul li:nth-child(4).active span,.type-left ul li:nth-child(11):hover span,.type-left ul li:nth-child(11).active span{background:#009EFA;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
.type-left ul li:nth-child(4):hover a,.type-left ul li:nth-child(4).active a,.type-left ul li:nth-child(11):hover a,.type-left ul li:nth-child(11).active a{border-left:2px solid #009EFA;color:#fff}
.type-left ul li:nth-child(5):hover span,.type-left ul li:nth-child(5).active span,.type-left ul li:nth-child(12):hover span,.type-left ul li:nth-child(12).active span{background:#FF8066;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
.type-left ul li:nth-child(5):hover a,.type-left ul li:nth-child(5).active a,.type-left ul li:nth-child(12):hover a,.type-left ul li:nth-child(12).active a{border-left:2px solid #FF8066;color:#fff}
.type-left ul li:nth-child(6):hover span,.type-left ul li:nth-child(6).active span,.type-left ul li:nth-child(13):hover span,.type-left ul li:nth-child(13).active span{background:#64b5f6;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
.type-left ul li:nth-child(6):hover a,.type-left ul li:nth-child(6).active a,.type-left ul li:nth-child(13):hover a,.type-left ul li:nth-child(13).active a{border-left:2px solid #64b5f6;color:#fff}
.type-left ul li:nth-child(7):hover span,.type-left ul li:nth-child(7).active span,.type-left ul li:nth-child(14):hover span,.type-left ul li:nth-child(14).active span{background:#388e3c;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
.type-left ul li:nth-child(7):hover a,.type-left ul li:nth-child(7).active a,.type-left ul li:nth-child(14):hover a,.type-left ul li:nth-child(14).active a{border-left:2px solid #388e3c;color:#fff}
ul.navbar-nav.mr-auto{margin-left:60px}
.type-right{position:fixed;top:38px}
.type-right svg{width:28px;height:28px}
@media screen and (max-width:992px){.type-right{position:fixed;top:10px;right:10px}}

42
template/default/index.php
View File

@ -21,7 +21,8 @@
<link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.5.3/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.5.3/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo $cdnpublic ?>/assets/css/fontawesome-free5.13.0.css" type="text/css"> <link rel="stylesheet" href="<?php echo $cdnpublic ?>/assets/css/fontawesome-free5.13.0.css" type="text/css">
<link rel="stylesheet" href="<?php echo $templatepath;?>/css/style.css" type="text/css"> <link rel="stylesheet" href="<?php echo $templatepath;?>/css/style.css" type="text/css">
<link rel="stylesheet" href="<?php echo $templatepath;?>css/font.css" type="text/css"> <link rel="stylesheet" href="<?php echo $templatepath;?>/css/font.css" type="text/css">
<link rel="stylesheet" href="<?php echo $templatepath;?>/css/tag.css" type="text/css">
</head> </head>
<body onload="FocusOnInput()"><div class="banner-video"> <body onload="FocusOnInput()"><div class="banner-video">
<?php if(!empty(background())){ echo '<img src="'.background().'">';}?> <?php if(!empty(background())){ echo '<img src="'.background().'">';}?>
@ -29,6 +30,40 @@
<div class="bottom-cover" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(244 248 251 / 0.6) 50%, rgb(244 248 251) 100%);"> <div class="bottom-cover" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(244 248 251 / 0.6) 50%, rgb(244 248 251) 100%);">
</div> </div>
</div> </div>
<div class="box">
<div class="change-type">
<div class="type-left" :class="showType == true ? 'showListType':''">
<ul>
<li data-lylme="search"><a>搜索</a><span></span></li>
<?php
$groups = $DB->query("SELECT * FROM `lylme_groups` ORDER BY `group_order` ASC"); // 获取分类
while ($group = $DB->fetch($groups)) { //循环所有分组
echo '<li data-lylme="group_'. $group["group_id"] . '"><a>'. $group["group_name"] . '</a><span></span></li>'."\n";
}
?>
</ul>
</div>
</div>
</div>
<script>
$(function(){
$('.type-right').click(function(){
$('.type-left').toggleClass('showListType')
});
$('.type-left ul li').click(function(){
$(this).addClass('active').siblings('li').removeClass('active');
$('.type-left').toggleClass('showListType');
var lylme_tag = '#'+$(this).attr("data-lylme");
$('html,body').animate({scrollTop:$(lylme_tag).offset().top},500);
})
})
</script>
<!--topbar开始--> <!--topbar开始-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="position: absolute; z-index: 10000;"> <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="position: absolute; z-index: 10000;">
<!--<a class="navbar-brand" href="/"><img src="./assets/img/logo.png" height="25" title="六零起始页"></a>--> <!--<a class="navbar-brand" href="/"><img src="./assets/img/logo.png" height="25" title="六零起始页"></a>-->
@ -37,8 +72,13 @@
<svg class="icon" width="200" height="200"><use xlink:href="#icon-menus"></use></svg> <svg class="icon" width="200" height="200"><use xlink:href="#icon-menus"></use></svg>
<span><svg class="bi bi-x" fill="currentColor" id="x"><use xlink:href="#icon-closes"></use></svg><span> <span><svg class="bi bi-x" fill="currentColor" id="x"><use xlink:href="#icon-closes"></use></svg><span>
</button> </button>
<div class="type-right" >
<svg t="1651476001599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6329" width="200" height="200"><path d="M512 491.52l286.72-286.72-522.24 174.08L512 491.52zM137.216 337.92L866.304 96.256c16.384-6.144 34.816 4.096 40.96 20.48 2.048 6.144 2.048 14.336 0 20.48L665.6 866.304c-6.144 16.384-24.576 26.624-40.96 20.48-8.192-2.048-14.336-8.192-18.432-16.384L450.56 552.96 133.12 399.36c-16.384-8.192-22.528-26.624-14.336-43.008 2.048-8.192 10.24-14.336 18.432-18.432z" fill="#304ECE" p-id="6330"></path></svg>
</div>
<div class="collapse navbar-collapse" id="navbarsExample05"> <div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<?php <?php
$tagslists = $DB->query("SELECT * FROM `lylme_tags`"); $tagslists = $DB->query("SELECT * FROM `lylme_tags`");
while ($taglists = $DB->fetch($tagslists)) { while ($taglists = $DB->fetch($tagslists)) {

2
template/default/list.php
View File

@ -18,7 +18,7 @@ while ($group = $DB->fetch($groups)) { //循环所有分组
$sql = "SELECT * FROM `lylme_links` WHERE `group_id` = " . $group['group_id']; $sql = "SELECT * FROM `lylme_links` WHERE `group_id` = " . $group['group_id'];
$group_links = $DB->query($sql); $group_links = $DB->query($sql);
$link_num = $DB->num_rows($group_links); // 获取返回字段条目数量 $link_num = $DB->num_rows($group_links); // 获取返回字段条目数量
echo '<ul class="mylist row"><li class="title">' . $group["group_icon"] . '<sapn>' . $group["group_name"] . '</sapn></li>'; //输出分组图标和标题 echo '<ul class="mylist row"><li id="group_' . $group["group_id"] . '" class="title">' . $group["group_icon"] . '<sapn>' . $group["group_name"] . '</sapn></li>'; //输出分组图标和标题
if ($link_num == 0) { if ($link_num == 0) {
echo '</ul>' . "\n"; echo '</ul>' . "\n";
$i = 0; $i = 0;