Skip to content

Commit

Permalink
updated 页面调整
Browse files Browse the repository at this point in the history
  • Loading branch information
@mumuy
mumuy committed Apr 24, 2024
1 parent 970094a commit cc53b29
Show file tree
Hide file tree
Showing 13 changed files with 143 additions and 104 deletions.
2 changes: 1 addition & 1 deletion dist/lang/relationship.zh-HK.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/lang/relationship.zh-HK.min.mjs
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/relationship.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/relationship.min.mjs
View file

Large diffs are not rendered by default.

60 changes: 26 additions & 34 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@ <h3>应用场景</h3>
</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>
Expand Down Expand Up @@ -423,55 +423,47 @@ <h3>应用场景</h3>
</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;

Expand Down
12 changes: 6 additions & 6 deletions src/module/selector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,19 +217,19 @@ 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
}));
}
}
let to_rids = to?reverseId(to,my_sex):[''];
to_rids.forEach(function(to_r){
let selector = (to_r?','+to_r:'')+(from?','+from:'');
result.push({
'selector':selector,
'sex':sex
selector,
sex
});
});
});
Expand Down
0 static/image/gotop.png → static/image/icon-gotop.png
View file
File renamed without changes
Binary file added static/image/icon-wechat.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/image/qrcode-alipay.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/image/qrcode-wechat.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions static/script/index.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}
});
});
})();
77 changes: 51 additions & 26 deletions static/style/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 .ft p{
margin-bottom: 10px;
line-height: 30px;
text-align: center;
}
.mod-foot .bd p a,.mod-foot .bd p span{
.mod-foot .ft p a,.mod-foot .bd p span{
vertical-align: middle;
}
.mod-foot .bd p.buttons{
.mod-foot .ft 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{
margin-bottom: 10px;
line-height: 30px;
}

.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{
Expand Down
60 changes: 26 additions & 34 deletions zh-HK.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@ <h3>應用場景</h3>
</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>
Expand Down Expand Up @@ -423,55 +423,47 @@ <h3>應用場景</h3>
</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;

Expand Down

0 comments on commit cc53b29

Please sign in to comment.