docker/relationship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated 页面调整

Browse Source
This commit is contained in:
PASSER-BY 2024-04-24 22:14:11 +08:00
parent 970094a88f
commit cc53b29d05
13 changed files with 145 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/lang/relationship.zh-HK.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/lang/relationship.zh-HK.min.mjs vendored
View File

File diff suppressed because one or more lines are too long

2
dist/relationship.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/relationship.min.mjs vendored
View File

File diff suppressed because one or more lines are too long

60
index.html
View File

@ -390,7 +390,7 @@
</div>
<div class="mod-app">
<div class="inner">
<div class="hd"><span>他们都在用</span></div>
<div class="hd"><span>他们都在使用</span></div>
<div class="bd">
<ul>
<li>
@ -423,55 +423,47 @@
</div>
<div class="mod-foot">
<div class="inner">
<div class="hd"><span>🫣支持我的开源</span></div>
<div class="bd">
<div class="box">
<p><img src="static/image/qrcode.jpg" width="150" alt="亲戚关系微信小程序"/></p>
<p>微信扫一扫，使用小程序</p>
<div class="item">
<img src="static/image/qrcode-wechat.jpg" height="240" alt="微信支付"/>
</div>
<div class="item">
<img src="static/image/qrcode-alipay.jpg" height="240" alt="支付宝支付"/>
</div>
</div>
</div>
<div class="ft">
<p>Copyright &copy; <a href="http://passer-by.com">passer-by.com</a></p>
</div>
</div>
</div>
<div class="mod-fixedbar">
<div class="bd">
<a href="javascript:;"><img src="static/image/gotop.png" width="24" height="24"></a>
<ul>
<li>
<a class="qrcode" href="javascript:;" href="javascript:;">
<img src="static/image/icon-wechat.png" width="24" height="24"/>
<span class="popup">
<img src="static/image/qrcode.jpg" width="150" alt="亲戚关系微信小程序"/>
</span>
</a>
</li>
<li>
<a class="gotop" href="javascript:;" href="javascript:;">
<img src="static/image/icon-gotop.png" width="24" height="24"/>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="dist/relationship.min.js"></script>
<script type="text/javascript" src="dist/relationship-mode.min.js"></script>
<script type="text/javascript" src="static/script/index.js"></script>
<script type="text/javascript">
// 头部滚动
(function(){
let $header = document.querySelector('.header');
document.addEventListener('scroll',function(){
let scrollTop = document.documentElement.scrollTop;
let ratio = Math.min(scrollTop/1000,1);
$header.style.background = 'rgba(255,255,255,'+(ratio*0.8)+')';
$header.style.boxShadow = '1px 1px 6px rgba(0,0,0,'+(ratio*0.1)+')';
});
})();
// 底部滚动
(function(){
let timer = null;
let $gotop = document.querySelector('.mod-fixedbar a');
$gotop.addEventListener('click',function(){
cancelAnimationFrame(timer);
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
let move = scrollTop/18;
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
});
})();
// 获取数量
document.getElementById('count').innerText = relationship.dataCount;

12
src/module/selector.js
View File

@ -217,10 +217,10 @@ export function mergeSelector(param){
to,
sex:my_sex
} = getOptimal({
'from':from,
'to':to,
'sex':my_sex,
'optimal':param.optimal
from,
to,
sex:my_sex,
optimal:param.optimal
}));
}
}
@ -228,8 +228,8 @@ export function mergeSelector(param){
to_rids.forEach(function(to_r){
let selector = (to_r?','+to_r:'')+(from?','+from:'');
result.push({
'selector':selector,
'sex':sex
selector,
sex
});
});
});

0
static/image/gotop.png → static/image/icon-gotop.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 881 B

After

Width:  |  Height:  |  Size: 881 B

BIN
static/image/icon-wechat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/image/qrcode-alipay.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
static/image/qrcode-wechat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

30
static/script/index.js Normal file
View File

@ -0,0 +1,30 @@
// 头部滚动
(function(){
let $header = document.querySelector('.header');
document.addEventListener('scroll',function(){
let scrollTop = document.documentElement.scrollTop;
let ratio = Math.min(scrollTop/1000,1);
$header.style.background = 'rgba(255,255,255,'+(ratio*0.8)+')';
$header.style.boxShadow = '1px 1px 6px rgba(0,0,0,'+(ratio*0.1)+')';
});
})();
// 底部滚动
(function(){
let timer = null;
let $gotop = document.querySelector('.mod-fixedbar .gotop');
$gotop.addEventListener('click',function(){
cancelAnimationFrame(timer);
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
let move = scrollTop/18;
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
});
})();

81
static/style/index.css
View File

@ -528,11 +528,9 @@ a:hover{
margin-bottom: 75px;
}
.mod-app .hd{
margin: 0 5px 5px;
line-height: 30px;
margin-bottom: 5px;
line-height: 32px;
text-align: center;
}
.mod-app .hd span{
font-size: 18px;
font-weight: bold;
color: #646464;
@ -588,10 +586,8 @@ a:hover{
border-top-color: rgb(233 236 240);
}
.mod-copy .hd{
margin: 0 5px 5px;
line-height: 30px;
}
.mod-copy .hd span{
margin-bottom: 5px;
line-height: 32px;
font-size: 18px;
font-weight: bold;
color: #646464;
@ -626,45 +622,74 @@ a:hover{
word-break: break-word;
}
.mod-foot .hd{
margin-bottom: 5px;
line-height: 32px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #646464;
}
.mod-foot .bd .box{
width: 360px;
margin: 0 auto 25px;
text-align: center;
overflow: hidden;
}
.mod-foot .bd .box .item{
display: inline-block;
margin: 0 5px;
border: 1px solid #f0f0f0;
filter: grayscale(0.6);
}
.mod-foot .bd{
padding: 10px 0;
margin-bottom: 15px;
text-align: center;
}
.mod-foot .bd p{
line-height: 22px;
}
.mod-foot .bd p a,.mod-foot .bd p span{
vertical-align: middle;
}
.mod-foot .bd p.buttons{
margin: 10px 0 5px;
}
.mod-foot .box{
width: 200px;
margin: 0 auto 20px;
line-height: 30px;
text-align: center;
overflow: hidden;
}
.mod-foot p{
.mod-foot .ft p{
margin-bottom: 10px;
line-height: 30px;
text-align: center;
}
.mod-foot .ft p a,.mod-foot .bd p span{
vertical-align: middle;
}
.mod-foot .ft p.buttons{
margin: 10px 0 5px;
}
.mod-fixedbar .bd a{
.mod-fixedbar .bd {
position: fixed;
right: 20px;
bottom: 20px;
}
.mod-fixedbar .bd a{
position: relative;
display: block;
width: 48px;
height: 48px;
margin-bottom: 2px;
background: rgba(255,255,255,0.8);
box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
border: 1px solid #f0f0f0;
line-height: 48px;
text-align: center;
}
.mod-fixedbar .bd .popup{
display: none;
position: absolute;
right: 50px;
bottom: 0;
z-index: 99;
border: 1px solid #f0f0f0;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.05);
}
.mod-fixedbar .bd a:hover{
background: rgba(255,255,255,0.9);
}
.mod-fixedbar .bd a:hover .popup{
display: block;
}
@media screen and (max-width: 1020px) {
.header{

60
zh-HK.html
View File

@ -390,7 +390,7 @@
</div>
<div class="mod-app">
<div class="inner">
<div class="hd"><span>他們都在用</span></div>
<div class="hd"><span>他們都在使用</span></div>
<div class="bd">
<ul>
<li>
@ -423,55 +423,47 @@
</div>
<div class="mod-foot">
<div class="inner">
<div class="hd"><span>🫣支持我的開源</span></div>
<div class="bd">
<div class="box">
<p><img src="static/image/qrcode.jpg" width="150" alt="親戚關系微信小程序"/></p>
<p>微信掃一掃，使用小程序</p>
<div class="item">
<img src="static/image/qrcode-wechat.jpg" height="240" alt="微信支付"/>
</div>
<div class="item">
<img src="static/image/qrcode-alipay.jpg" height="240" alt="支付寶支付"/>
</div>
</div>
</div>
<div class="ft">
<p>Copyright &copy; <a href="http://passer-by.com">passer-by.com</a></p>
</div>
</div>
</div>
<div class="mod-fixedbar">
<div class="bd">
<a href="javascript:;"><img src="static/image/gotop.png" width="24" height="24"></a>
<ul>
<li>
<a class="qrcode" href="javascript:;" href="javascript:;">
<img src="static/image/icon-wechat.png" width="24" height="24"/>
<span class="popup">
<img src="static/image/qrcode.jpg" width="150" alt="親戚關係微信小程序"/>
</span>
</a>
</li>
<li>
<a class="gotop" href="javascript:;" href="javascript:;">
<img src="static/image/icon-gotop.png" width="24" height="24"/>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="dist/lang/relationship.zh-HK.min.js"></script>
<script type="text/javascript" src="dist/lang/relationship-mode.zh-HK.min.js"></script>
<script type="text/javascript" src="static/script/index.js"></script>
<script type="text/javascript">
// 頭部滾動
(function(){
let $header = document.querySelector('.header');
document.addEventListener('scroll',function(){
let scrollTop = document.documentElement.scrollTop;
let ratio = Math.min(scrollTop/1000,1);
$header.style.background = 'rgba(255,255,255,'+(ratio*0.8)+')';
$header.style.boxShadow = '1px 1px 6px rgba(0,0,0,'+(ratio*0.1)+')';
});
})();
// 底部滾動
(function(){
let timer = null;
let $gotop = document.querySelector('.mod-fixedbar a');
$gotop.addEventListener('click',function(){
cancelAnimationFrame(timer);
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
let move = scrollTop/18;
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
});
})();
// 獲取數量
document.getElementById('count').innerText = relationship.dataCount;