caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增 个性化设置

Browse Source
This commit is contained in:
底层用户 2022-04-12 22:42:42 +08:00
parent 1ac1c05022
commit dbdf84c352
5 changed files with 189 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/mobile.css
View File

@ -177,7 +177,7 @@
span.link-name {
display: block !important;
font-size: 0.95rem;
font-size: 0.85rem;
}
span.line-text,

128
css/style.css
View File

@ -546,13 +546,13 @@ i.iconfont.icon-z_shangpinheji {
margin: 1rem 0rem 0.5rem 0rem;
}
/*更多页面链接*/
/*其他链接*/
.mores .link-card {
height: 48px !important;
}
/*box*/
/*更多页面*/
.box-left {
flex: 0 44%;
min-width: 400px;
@ -589,17 +589,55 @@ i.iconfont.icon-z_shangpinheji {
justify-content: space-between;
}
.upnote {
margin-top: 1rem;
margin-left: 2rem;
display: flex;
flex-direction: column;
line-height: 40px;
font-size: 1.10rem;
#accordion {
min-width: 360px;
margin-right: 40px;
margin-top: 20px;
margin-left: 14px;
border-radius: 8px;
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 7%), 0 1px 5px 0 rgb(0 0 0 / 10%);
}
.uptext i {
font-size: 1.25rem;
.accordion-item {
background-color: transparent !important;
border: none !important;
}
.accordion-item:first-of-type .accordion-button {
border-radius: 8px;
}
.accordion-button {
color: white !important;
background-color: transparent;
transition: 0.3s;
}
.accordion-button:focus {
border-color: #ffffff26 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 8px;
transition: 0.3s;
}
.accordion-button:not(.collapsed) {
background-color: #ffffff26;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
font-weight: bold;
transition: 0.3s;
}
.accordion-button::after {
border-radius: 8px;
background-image: none !important;
}
.accordion-body {
padding: 1rem 0rem !important;
background-color: #ffffff10;
}
.closebox {
@ -617,6 +655,58 @@ i.iconfont.icon-github1 {
font-size: 1.45rem;
}
/*个性设置*/
.set {
display: flex;
flex-direction: column;
padding: 0rem 1.5rem;
}
.set-text {
text-align: center;
}
.btn-group,
.btn-group-vertical {
margin-top: 10px;
}
.btn-outline-primary {
color: #eeeeee !important;
border-color: #ffffff26 !important;
}
.btn-outline-primary:hover {
background-color: #ffffff26 !important;
border-color: #eeeeee !important;
}
.btn-check:focus+.btn, .btn:focus {
box-shadow: none !important;
}
.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
background-color: #ffffff26 !important;
border-color: #eeeeee !important;
}
/*更新日志*/
.upnote {
display: flex;
flex-direction: column;
padding: 0rem 1.5rem;
height: 156px;
overflow-y: auto;
}
.uptext {
line-height: 32px;
}
/*Aplayer*/
.box-right {
flex: 0 54%;
@ -652,6 +742,10 @@ i.iconfont.icon-github1 {
}
/*音乐列表*/
.aplayer.aplayer-withlist .aplayer-list {
margin-top: 6px;
}
.aplayer .aplayer-list ol li.aplayer-list-light {
background: #ffffff26 !important;
border-radius: 6px !important;
@ -783,4 +877,16 @@ footer {
.iziToast>.iziToast-close {
background: url(https://cdn.jsdelivr.net/gh/imsyy/file/pic/close.png) no-repeat 50% 50% !important;
background-size: 8px !important;
}
/*滚动条样式*/
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #eeeeee;
}

78
index.html
View File

@ -343,26 +343,82 @@
<div class="closebox fixed-top" id="closemore">
<i class="iconfont icon-close"></i>
</div>
<!--更新日志-->
<!--左侧内容-->
<div class="box-left">
<div class="img-title">
<span class="img-title">imsyy</span>
<span class="img-text">.top</span><br />
<span class="img-text">&nbsp;&nbsp;v&nbsp;1.6</span>
<span class="img-text">&nbsp;&nbsp;v&nbsp;2.2</span>
<a href="https://github.com/imsyy/home" target="_blank"><i
class="iconfont icon-github1"></i></a>
</div>
<div class="upnote">
<span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;音乐播放器支持音量控制</span>
<span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;新增动态跟随鼠标样式</span>
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;修复 CDN 加载缓慢</span>
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span>
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span>
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标改为 Iconfont</span>
<span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a href="./old/"
style="color:#efefef">点击此处返回旧版站点</a></span>
<!--更多内容-->
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
个性设置 - 尚未实现
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="set">
<div class="set-text">壁纸个性化</div>
<div class="btn-group" role="group"
aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1"
autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">默认壁纸</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2"
autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">每日一图</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3"
autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">随机动漫</label>
</div>
</div>
</div>
</div>
</div>
<!--更新日志-->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
更新日志
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="upnote">
<span class="uptext"><i
class="iconfont icon-plus"></i>&nbsp;音乐播放器支持音量控制</span>
<span class="uptext"><i
class="iconfont icon-plus"></i>&nbsp;新增动态跟随鼠标样式</span>
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;修复
CDN 加载缓慢</span>
<span class="uptext"><i
class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span>
<span class="uptext"><i
class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span>
<span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标改为
Iconfont</span>
<span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a
href="./old/" style="color:#efefef">点击此处返回旧版站点</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Aplayer-->
<div class="box-right">
<div id="aplayer"></div>
</div>

4
js/main.js
View File

@ -323,8 +323,8 @@ var title2 = `
|_____|_| |_|_____/ |_| |_|
`
var content = `
版 本 号：1.6
更新日期：2022-01-30
版 本 号：2.2
更新日期：2022-04-12
更新说明：
1. 新增 音乐播放器支持音量控制

4
js/music.js
View File

@ -306,9 +306,9 @@ const ap = new APlayer({
{
name: "有何不可",
artist: "许嵩",
url: "https://drive.imsyy.top/api?path=/%E9%9F%B3%E4%B9%90/%E6%96%87%E4%BB%B6%E5%BC%95%E7%94%A8/%E8%AE%B8%E5%B5%A9-%E6%9C%89%E4%BD%95%E4%B8%8D%E5%8F%AF.mp3&raw=true",
url: "https://drive.imsyy.top/api/raw/?path=/音乐/华语音乐/许嵩/许嵩%20-%20有何不可%20-%20独白版.mp3",
cover: "https://y.qq.com/music/photo_new/T002R300x300M000002KSDg90IaScI_1.jpg?max_age=2592000",
lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E8%AE%B8%E5%B5%A9-%E6%9C%89%E4%BD%95%E4%B8%8D%E5%8F%AF.lrc",
lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E8%AE%B8%E5%B5%A9%20-%20%E6%9C%89%E4%BD%95%E4%B8%8D%E5%8F%AF%20-%20%E7%8B%AC%E7%99%BD%E7%89%88.lrc",
theme: "#edbe76"
},
{