updated 页面调整
This commit is contained in:
PASSER-BY
parent
970094a88f
commit
cc53b29d05
2
dist/lang/relationship.zh-HK.min.js
vendored
2
dist/lang/relationship.zh-HK.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/lang/relationship.zh-HK.min.mjs
vendored
2
dist/lang/relationship.zh-HK.min.mjs
vendored
File diff suppressed because one or more lines are too long
2
dist/relationship.min.js
vendored
2
dist/relationship.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/relationship.min.mjs
vendored
2
dist/relationship.min.mjs
vendored
File diff suppressed because one or more lines are too long
60
index.html
60
index.html
@ -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 © <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;
|
||||
|
||||
|
||||
@ -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
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
Before Width: | Height: | Size: 881 B After Width: | Height: | Size: 881 B |
BIN
static/image/icon-wechat.png
Normal file
BIN
static/image/icon-wechat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/image/qrcode-alipay.jpg
Normal file
BIN
static/image/qrcode-alipay.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
static/image/qrcode-wechat.jpg
Normal file
BIN
static/image/qrcode-wechat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
30
static/script/index.js
Normal file
30
static/script/index.js
Normal 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
@ -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
60
zh-HK.html
@ -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 © <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;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user