Browse Source

优化,修改,增加音乐

master
wen 2 years ago
parent
commit
dd16343204
  1. 19
      themes/beauty/views/layout/main.php
  2. 44
      themes/beauty/views/site/index.php
  3. 18
      www/css/beauty.css
  4. 2
      www/img/beauty/contactUs.svg
  5. 2
      www/img/beauty/music.svg
  6. 25
      www/js/beauty.js
  7. 4
      www/js/jquery-3.1.1.min.js

19
themes/beauty/views/layout/main.php

@ -2,8 +2,10 @@ @@ -2,8 +2,10 @@
//常用方法
require_once __DIR__ . '/../../../../plugins/Html.php';
?><!DocType html>
?>
<!DocType html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $pageTitle; ?></title>
@ -12,11 +14,12 @@ require_once __DIR__ . '/../../../../plugins/Html.php'; @@ -12,11 +14,12 @@ require_once __DIR__ . '/../../../../plugins/Html.php';
<link rel="icon" type="image/x-icon" href="/favicon.ico?v1.0">
<link href="/css/main.css?v.1.1" rel="stylesheet">
<!--for theme beauty-->
<link href="/css/github-markdown-light.css" rel="stylesheet" id="markdowncss">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/fubox.min.css" rel="stylesheet">
<link href="/css/beauty.css?v<?= Html::getStaticFileVersion('beauty.css', 'css') ?>" rel="stylesheet">
<link href="/css/github-markdown-light.css" rel="stylesheet" id="markdowncss">
</head>
<body>
<div id="image_site" class="main_style">
@ -67,18 +70,26 @@ eof; @@ -67,18 +70,26 @@ eof;
<li class="scroll_top scroll_topJS">
<img class="icon svg" src="/img/beauty/huojian.svg" alt="回到顶部" title="点击回到顶部" />
</li>
<li class="music_switch musicJS">
<img class="icon svg verMiddle" src="/img/beauty/music.svg" alt="音乐" title="开启关闭音乐" />
</li>
<li class="connectmeJS">
<img class="icon svg verMiddle" src="/img/beauty/scrolltop.svg" alt="联系我们" title="联系我们" />
<img class="icon3 svg verMiddle" src="/img/beauty/contactUs.svg" alt="联系我们" title="联系我们" />
</li>
</ul>
</div>
<!-- 音乐 -->
<audio class="music_main musicMJS" id="music_main" src="/girls/Unchained_Melody.mp3?ver=1667213175" preload autoplay controls loop>
你的浏览器不支持<code>audio</code>标签
</audio>
</div>
<!--for theme googleimage-->
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/lazyload.js"></script>
<script src="/js/fubox.min.js"></script>
<script src="/js/beauty.js?v<?= Html::getStaticFileVersion('beauty.js', 'js') ?>"></script>
</body>
</html>

44
themes/beauty/views/site/index.php

@ -5,8 +5,8 @@ @@ -5,8 +5,8 @@
<div class="navbar-header">
<div class="navbar-toggle">
<img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
<button type="button" class="collapsed mr_button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<img class="icon1 svg connectmeJS svgimg iconr2 verMiddle" src="/img/beauty/contactUs.svg" alt="联系我们" title="联系我们" />
<button type="button" class="collapsed mr_button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<img class="svg icon1 svgimg verMiddle" src="/img/beauty/navshow.svg" alt="展开列表" title="展开列表">
</button>
@ -43,7 +43,7 @@ eof; @@ -43,7 +43,7 @@ eof;
*/ ?>
<div class="nb_right nav navbar-nav navbar-right">
<img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
<img class="icon1 svg connectmeJS svgimg svgimg2 iconr2 verMiddle" src="/img/beauty/scrolltop.svg" alt="联系我们" title="联系我们">
<img class="icon1 svg connectmeJS svgimg iconr2 verMiddle" src="/img/beauty/contactUs.svg" alt="联系我们" title="联系我们" />
</div>
</div><!-- /.navbar-collapse -->
@ -82,19 +82,19 @@ eof; @@ -82,19 +82,19 @@ eof;
$imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
$category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : [];
//当前目录的描述介绍
if (!empty($category['description'])) {
echo <<<eof
<p class="modal-body">{$category['description']}</p>
eof;
}
// //当前目录的描述介绍
// if (!empty($category['description'])) {
// echo <<<eof
// <p class="modal-body">{$category['description']}</p>
// eof;
// }
//当前目录的readme详细介绍
if (!empty($viewData['htmlCateReadme'])) {
echo <<<eof
<div class="modal-body markdown-body">{$viewData['htmlCateReadme']}</div>
eof;
}
// //当前目录的readme详细介绍
// if (!empty($viewData['htmlCateReadme'])) {
// echo <<<eof
// <div class="modal-body markdown-body">{$viewData['htmlCateReadme']}</div>
// eof;
// }
if (!empty($category['directories'])) { //两级目录支持
$index = 0;
@ -107,7 +107,7 @@ eof; @@ -107,7 +107,7 @@ eof;
if (!empty($dir['snapshot'])) {
if ($index > 0) {
echo <<<eof
<img data-original="{$dir['snapshot']}" class="bor_radius im_img lazy" alt="{$dir['directory']}">
<img src="/img/beauty/lazy.svg" data-original="{$dir['snapshot']}" class="bor_radius im_img lazy" alt="{$dir['directory']}">
eof;
} else {
echo <<<eof
@ -128,11 +128,11 @@ eof; @@ -128,11 +128,11 @@ eof;
if (in_array($first_img['extension'], $imgExts)) {
if ($index > 0) {
echo <<<eof
<img data-original="{$first_img['path']}" class="bor_radius im_img lazy" alt="{$first_img['filename']}">
<img src="/img/beauty/lazy.svg" data-original="{$first_img['path']}" class="bor_radius im_img lazy" alt="{$first_img['filename']}">
eof;
} else {
echo <<<eof
<img src="{$first_img['path']}" class="bor_radius im_img" alt="{$first_img['filename']}">
<img src="/img/beauty/lazy.svg" data-original="{$first_img['path']}" class="bor_radius im_img lazy" alt="{$first_img['filename']}">
eof;
}
} else {
@ -157,7 +157,9 @@ eof; @@ -157,7 +157,9 @@ eof;
if (!empty($category['files'])) { //一级目录支持
$index = 0;
foreach ($category['files'] as $file) {
if (!in_array($file['extension'], $imgExts)) {continue;}
if (!in_array($file['extension'], $imgExts)) {
continue;
}
$title = !empty($file['title']) ? $file['title'] : $file['filename'];
@ -165,7 +167,7 @@ eof; @@ -165,7 +167,7 @@ eof;
echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="图片{$title}">
<img src="img/beauty/lazy.svg" data-original="{$file['path']}" class="bor_radius im_img lazy" alt="{$file['filename']}">
<img src="/img/beauty/lazy.svg" data-original="{$file['path']}" class="bor_radius im_img lazy" alt="{$file['filename']}">
</a>
</div>
eof;
@ -173,7 +175,7 @@ eof; @@ -173,7 +175,7 @@ eof;
echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="图片{$title}">
<img src="{$file['path']}" class="bor_radius im_img" alt="{$file['filename']}">
<img src="/img/beauty/lazy.svg" class="bor_radius im_img lazy" alt="{$file['filename']}">
</a>
</div>
eof;

18
www/css/beauty.css

@ -67,11 +67,15 @@ a:link{text-decoration:none;} @@ -67,11 +67,15 @@ a:link{text-decoration:none;}
.web_info a{text-decoration: underline;color:#808080;}
.web_info a:hover{color:#000;}
.btrt_side{position:fixed;bottom:46px;right:16px;transition:all 0.5s ease;}
.btrt_side{position:fixed;bottom:48px;right:16px;transition:all 0.5s ease;}
.btrt_side_ul li{margin-top:4px;color:#878686;cursor:pointer;width:38px;height: 38px;line-height:38px;border-radius:50%;text-align:center;background-color:#f5f5f5;}
.btrt_side_ul li:hover{background:rgba(209, 209, 209, 1);color:#3e3d3d;}
.scroll_top{display:none;}
.btrt_side_ul li .svg{width:18px;cursor:pointer;}
.btrt_side_ul .svg{width:18px;cursor:pointer;}
.btrt_side_ul .icon3{width:26px;}
/* 音乐相关 */
.music_put{animation:musicTurn 3s linear infinite;}
.blank_cover{transition: all 0.5s ease;position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0, 0, 0, .7);opacity:0;z-index: 1099}
.right_sidebox{padding:15px 10px 15px 18px;opacity:0;transform:translateX(101%);background-color:#FFF;position:fixed;right:0;top:0;bottom:0;color:#333;width:396px;overflow-y:auto;max-width:100%;z-index:1100;}
@ -85,13 +89,13 @@ a:link{text-decoration:none;} @@ -85,13 +89,13 @@ a:link{text-decoration:none;}
.page_meta{padding:10px 0 0 0;}
.page_meta .breadcrumb{background:none;display: inline-block;padding:8px 0 8px 0;margin:0;}
.breadcrumbs{padding-left:1.5em;padding-bottom:10px}
/* 主题切换 */
.lampshow .web_info{border-color:#363636;}
.lampshow .btrt_side_ul li{background-color:#181818;}
.lampshow .right_sidebox{background-color:#222;color:#FFF;}
.lampshow .right_sidebox>h5{border-color: #363636;}
.lampshow .text_dark{color:#808080;}
@media screen and (max-width: 1199px) {
.im_item {
@ -111,7 +115,15 @@ a:link{text-decoration:none;} @@ -111,7 +115,15 @@ a:link{text-decoration:none;}
}
}
@keyframes musicTurn {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes bounceInRight {
0%,
60%,

2
www/img/beauty/contactUs.svg

@ -0,0 +1,2 @@ @@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg class="icon verMiddle" style="color:#6c6c6c;width:2em;height:2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3661"><path d="M364.5 488.8m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#27A27D" p-id="3662"></path><path d="M512 488.8m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#27A27D" p-id="3663"></path><path d="M659.5 488.8m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#27A27D" p-id="3664"></path><path d="M897.8 488.8C897.8 276.1 724.7 103 512 103S126.2 276.1 126.2 488.8c0 83.4 26.2 162.7 75.7 229.5 7.4 10 21.5 12.1 31.5 4.7s12.1-21.5 4.7-31.5c-43.7-59-66.8-129.1-66.8-202.7C171.2 300.9 324.1 148 512 148s340.8 152.9 340.8 340.8c0 182-143.5 330.7-323.2 339.9-9.9-25-34.2-42.7-62.6-42.7-37.2 0-67.5 30.3-67.5 67.5S429.8 921 467 921c30.2 0 55.5-20 64.1-47.4 203.8-10 366.7-178.5 366.7-384.8zM467 876c-12.4 0-22.5-10.1-22.5-22.5S454.6 831 467 831s22.5 10.1 22.5 22.5S479.4 876 467 876z" p-id="3665"></path></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

2
www/img/beauty/music.svg

@ -0,0 +1,2 @@ @@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg class="icon1" style="color:#6c6c6c;width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2212"><path d="M875.52 433.152q-7.168-1.024-12.8-10.24t-8.704-33.792q-5.12-39.936-26.112-58.88t-65.024-27.136q-46.08-9.216-81.408-37.376t-58.88-52.736q-22.528-21.504-34.816-15.36t-12.288 22.528l0 44.032 0 96.256q0 57.344-0.512 123.904t-0.512 125.952l0 104.448 0 58.368q1.024 24.576-7.68 54.784t-32.768 56.832-64 45.568-99.328 22.016q-60.416 3.072-109.056-21.504t-75.264-61.952-26.112-81.92 38.4-83.456 81.92-54.272 84.992-16.896 73.216 5.632 47.616 13.312l0-289.792q0-120.832 1.024-272.384 0-29.696 15.36-48.64t40.96-22.016q21.504-3.072 35.328 8.704t28.16 32.768 35.328 47.616 56.832 52.224q30.72 23.552 53.76 33.792t43.008 18.944 39.424 20.992 43.008 39.936q23.552 26.624 28.672 55.296t0.512 52.224-14.848 38.4-17.408 13.824z" p-id="2213"></path></svg>

After

Width:  |  Height:  |  Size: 995 B

25
www/js/beauty.js

@ -63,12 +63,10 @@ if ($('#image_site').get(0)) { @@ -63,12 +63,10 @@ if ($('#image_site').get(0)) {
var lanpnum = 0;
$('#image_site .lampJS').click(function () {
if (lanpnum == 0) {
$('#markdowncss').attr('href', '/css/github-markdown-dark.css');
$(document.body).addClass('lampshow');
$('#image_site .navbarJS').removeClass('navbar-default').addClass('navbar-inverse'); // 导航栏用bootstrap主题切换
lanpnum = 1;
} else if (lanpnum == 1) {
$('#markdowncss').attr('href', '/css/github-markdown-light.css');
$(document.body).removeClass('lampshow');
$('#image_site .navbarJS').addClass('navbar-default').removeClass('navbar-inverse');
lanpnum = 0;
@ -76,4 +74,27 @@ if ($('#image_site').get(0)) { @@ -76,4 +74,27 @@ if ($('#image_site').get(0)) {
return;
});
// 音乐播放
var musicState = 0;
$('#music_main').get(0).volume = 0.5; // 控制音量
$('.musicJS').click(function () {
if (musicState == 0) {
$('#music_main').get(0).play();
$('.musicJS').addClass('music_put');
musicState = 1;
} else {
$('#music_main').get(0).pause();
$('.musicJS').removeClass('music_put');
musicState = 0;
}
return;
})
$(document).one('touchstart mousedown', function () {
$('#music_main').get(0).play();
$('.musicJS').addClass('music_put');
musicState = 1;
});
}

4
www/js/jquery-3.1.1.min.js vendored

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save