github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-15 21:32:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix：修复移动端cookie弹框样式以及下载页面点击问题

Browse Source
This commit is contained in:
spylecym 2023-08-15 12:05:46 +08:00
parent e9e090fdf6
commit a229c12baf
5 changed files with 196 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/site/css/common.css vendored
View File

@ -1222,22 +1222,17 @@ footer {
} }
.footer_beian { .footer_beian {
float: left;
height: 20px;
line-height: 20px; line-height: 20px;
margin: 0px 0px 0px 5px; margin-left: 5px;
color: #939393; color: #939393;
} }
.footer_beian_a { .footer_beian_a {
height: 20px;
line-height: 20px; line-height: 20px;
margin: 0px 0px 0px 5px; margin-left: 5px;
color: #939393; color: #939393;
text-decoration: underline; text-decoration: underline;
display: inline-block; display: inline-block;
height: 20px;
line-height: 20px;
} }
.footer_copyright { .footer_copyright {

16
public/site/css/download.css vendored
View File

@ -151,3 +151,19 @@
display: block; display: block;
padding: 10px 16px; padding: 10px 16px;
} }
/* 弹框样式 */
.BulletBox{
position: fixed;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 8px;
background-color: var(--txt-theme-color);
line-height: 20px;
text-align: center;
z-index: 9999;
border: 1px solid transparent;
border-radius: 8px;
color: #fff;
}

16
public/site/css/rem.css vendored
View File

@ -215,8 +215,15 @@
.card-ul-item.active{ .card-ul-item.active{
max-height: 307px !important; max-height: 307px !important;
} }
.footer_copyright{
flex-direction: column;
}
}
@media screen and (max-width: 768px) and (min-width: 768px){
.download-ul-item:nth-of-type(2){
margin-right: 24px;
}
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
img{ img{
max-width: 100% !important; max-width: 100% !important;
@ -399,6 +406,7 @@
} }
.collaboration{ .collaboration{
margin-bottom: 56px !important; margin-bottom: 56px !important;
max-height: inherit !important;
} }
.footer-layut{ .footer-layut{
border-bottom: none !important; border-bottom: none !important;
@ -791,4 +799,10 @@
.footer_copyright{ .footer_copyright{
flex-direction: column; flex-direction: column;
} }
#cookieConsent{
width: 90% !important;
right: 0 !important;
left: 0;
margin: 0 auto;
}
} }

80
public/site/en/download.html
View File

@ -13,6 +13,7 @@
<link rel="stylesheet" href="../css/download.css"> <link rel="stylesheet" href="../css/download.css">
</head> </head>
<body> <body>
<div class="BulletBox"></div>
<div id="layout"> <div id="layout">
<!-- 页头区域 --> <!-- 页头区域 -->
<header class="head dow"> <header class="head dow">
@ -100,7 +101,7 @@
<h4 class="txt-4001830 topics-h4 mb-64 topics-h4-en">Also supports iOS, Android, macOS, Windows versions</h4> <h4 class="txt-4001830 topics-h4 mb-64 topics-h4-en">Also supports iOS, Android, macOS, Windows versions</h4>
<ul class="download-ul"> <ul class="download-ul">
<li class="download-ul-item dow-animate-box" style="--delay: 0s;" onmouseover='handleMouseover(0)' onmouseout='handleMouseout(0)'> <li class="download-ul-item dow-animate-box" style="--delay: 0s;" onmouseover='handleMouseover(0)' onmouseout='handleMouseout(0)'>
<a class="normal" href="https://apps.apple.com/cn/app/dootask/id1624855111" target="_blank"> <a class="normal" href="https://apps.apple.com/cn/app/dootask/id1624855111" target="_blank" id="ios">
<img class="icon mb-8" src="../img/dow_ios.svg" alt="ios"> <img class="icon mb-8" src="../img/dow_ios.svg" alt="ios">
<i class="txt-4001624 txt">ios</i> <i class="txt-4001624 txt">ios</i>
</a> </a>
@ -110,7 +111,7 @@
</div> </div>
</li> </li>
<li class="download-ul-item dow-animate-box" style="--delay: 0.1s;" onmouseover='handleMouseover(1)' onmouseout='handleMouseout(1)'> <li class="download-ul-item dow-animate-box" style="--delay: 0.1s;" onmouseover='handleMouseover(1)' onmouseout='handleMouseout(1)'>
<a class="normal" href="https://www.dootask.com/desktop/publish/latest?platform=android" target="_blank"> <a class="normal" href="https://www.dootask.com/desktop/publish/latest?platform=android" target="_blank" id="Android">
<img class="icon mb-8" src="../img/dow_android.svg" alt="Android"> <img class="icon mb-8" src="../img/dow_android.svg" alt="Android">
<i class="txt-4001624 txt">Android</i> <i class="txt-4001624 txt">Android</i>
</a> </a>
@ -343,17 +344,91 @@
<script src="//cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script> <script src="//cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
<script src="../js/common.js"></script> <script src="../js/common.js"></script>
<script> <script>
const isMobile = 'ontouchstart' in window
const androidDOM = document.getElementById("Android")
const iosDOM = document.getElementById("ios")
// 判断是否为ios
const isIos = /iPad|iPhone|iPod/.test(window.navigator.userAgent);
// 判断是否为安卓
const isAndroid = /Android/.test(window.navigator.userAgent);
// 判断是否为windows
const isWindows = /Win64/.test(window.navigator.userAgent);
/* 下载应用的hover处理函数 */ /* 下载应用的hover处理函数 */
const download = document.querySelector('.download-ul'); const download = document.querySelector('.download-ul');
const downloadItems = download.querySelectorAll('.download-ul-item'); const downloadItems = download.querySelectorAll('.download-ul-item');
const handleMouseover = (val)=>{ const handleMouseover = (val)=>{
if(isIos||isAndroid){
return;
}else{
downloadItems[val].children[0].style.display = 'none' downloadItems[val].children[0].style.display = 'none'
downloadItems[val].children[1].style.display = 'flex' downloadItems[val].children[1].style.display = 'flex'
} }
}
const handleMouseout = (val)=>{ const handleMouseout = (val)=>{
if(isIos||isAndroid){
return;
}else{
downloadItems[val].children[0].style.display = 'flex' downloadItems[val].children[0].style.display = 'flex'
downloadItems[val].children[1].style.display = 'none' downloadItems[val].children[1].style.display = 'none'
} }
}
/* 对于ios与Android pc端点击时a链接直接跳转 移动端点击时需要阻止a链接直接跳转 */
androidDOM.addEventListener('click',function(e){
if(isMobile){
e.preventDefault()
}
})
iosDOM.addEventListener('click',function(e){
if(isMobile){
e.preventDefault()
}
})
// 对于不同类型的移动端进行处理
function movieHandle(flag=true){
if(flag){
downloadItems.forEach((item,index)=>{
item.addEventListener('touchstart',function(){
if(index==2||index==3){
return showBox("Not supported on current device")
}
if(index==0){
if(isIos){
// Safari
if (navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1 && navigator.userAgent.indexOf('Edge') === -1) {
return (window.open(item.children[0].href,"_blank"));
}
return window.open(item.children[0].href,"_blank")
}
return showBox("Not supported on current device")
}
if(index==1){
if(isAndroid){
return window.open(item.children[0].href,"_blank")
}
return showBox("Not supported on current device")
}
})
})
}
}
// 移动端
/* 显示/隐藏提示弹框 */
function showBox(text){
const box = document.querySelector('.BulletBox')
box.style.display = 'block'
box.innerHTML = text
setTimeout(()=>{
box.style.display = 'none'
},1000)
}
// 是否是移动端
if(isMobile){
if(isAndroid||isIos){
movieHandle()
}else if(isWindows){
movieHandle(false)
}
}
const localStorageHandle = (val)=>{ const localStorageHandle = (val)=>{
localStorage.setItem('update_log_num',val) localStorage.setItem('update_log_num',val)
window.location.href = '../en/log.html' window.location.href = '../en/log.html'
@ -405,7 +480,6 @@ if(!logsItem) {
localStorage.setItem('logs_dowmload_en', JSON.stringify(record)) localStorage.setItem('logs_dowmload_en', JSON.stringify(record))
updates.innerHTML = releases; updates.innerHTML = releases;
}).catch(err=>{ }).catch(err=>{
console.log(err,"err");
}) })
}else{ }else{
updates.innerHTML = logsItem; updates.innerHTML = logsItem;

80
public/site/zh/download.html
View File

@ -13,6 +13,7 @@
<link rel="stylesheet" href="../css/download.css"> <link rel="stylesheet" href="../css/download.css">
</head> </head>
<body> <body>
<div class="BulletBox"></div>
<div id="layout"> <div id="layout">
<!-- 页头区域 --> <!-- 页头区域 -->
<header class="head dow"> <header class="head dow">
@ -100,7 +101,7 @@
<h4 class="txt-4001830 topics-h4 mb-64">同时支持iOS、Android、macOS、Windows版本</h4> <h4 class="txt-4001830 topics-h4 mb-64">同时支持iOS、Android、macOS、Windows版本</h4>
<ul class="download-ul"> <ul class="download-ul">
<li class="download-ul-item dow-animate-box" style="--delay: 0s;" onmouseover='handleMouseover(0)' onmouseout='handleMouseout(0)'> <li class="download-ul-item dow-animate-box" style="--delay: 0s;" onmouseover='handleMouseover(0)' onmouseout='handleMouseout(0)'>
<a class="normal" href="https://apps.apple.com/cn/app/dootask/id1624855111" target="_blank"> <a class="normal" href="https://apps.apple.com/cn/app/dootask/id1624855111" target="_blank" id="ios">
<img class="icon mb-8" src="../img/dow_ios.svg" alt="ios"> <img class="icon mb-8" src="../img/dow_ios.svg" alt="ios">
<i class="txt-4001624 txt">ios</i> <i class="txt-4001624 txt">ios</i>
</a> </a>
@ -110,7 +111,7 @@
</div> </div>
</li> </li>
<li class="download-ul-item dow-animate-box" style="--delay: 0.1s;" onmouseover='handleMouseover(1)' onmouseout='handleMouseout(1)'> <li class="download-ul-item dow-animate-box" style="--delay: 0.1s;" onmouseover='handleMouseover(1)' onmouseout='handleMouseout(1)'>
<a class="normal" href="https://www.dootask.com/desktop/publish/latest?platform=android" target="_blank"> <a class="normal" href="https://www.dootask.com/desktop/publish/latest?platform=android" target="_blank" id="Android">
<img class="icon mb-8" src="../img/dow_android.svg" alt="Android"> <img class="icon mb-8" src="../img/dow_android.svg" alt="Android">
<i class="txt-4001624 txt">Android</i> <i class="txt-4001624 txt">Android</i>
</a> </a>
@ -341,17 +342,91 @@
<script src="//cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script> <script src="//cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
<script src="../js/common.js"></script> <script src="../js/common.js"></script>
<script> <script>
const isMobile = 'ontouchstart' in window
const androidDOM = document.getElementById("Android")
const iosDOM = document.getElementById("ios")
// 判断是否为ios
const isIos = /iPad|iPhone|iPod/.test(window.navigator.userAgent);
// 判断是否为安卓
const isAndroid = /Android/.test(window.navigator.userAgent);
// 判断是否为windows
const isWindows = /Win64/.test(window.navigator.userAgent);
/* 下载应用的hover处理函数 */ /* 下载应用的hover处理函数 */
const download = document.querySelector('.download-ul'); const download = document.querySelector('.download-ul');
const downloadItems = download.querySelectorAll('.download-ul-item'); const downloadItems = download.querySelectorAll('.download-ul-item');
const handleMouseover = (val)=>{ const handleMouseover = (val)=>{
if(isIos||isAndroid){
return;
}else{
downloadItems[val].children[0].style.display = 'none' downloadItems[val].children[0].style.display = 'none'
downloadItems[val].children[1].style.display = 'flex' downloadItems[val].children[1].style.display = 'flex'
} }
}
const handleMouseout = (val)=>{ const handleMouseout = (val)=>{
if(isIos||isAndroid){
return;
}else{
downloadItems[val].children[0].style.display = 'flex' downloadItems[val].children[0].style.display = 'flex'
downloadItems[val].children[1].style.display = 'none' downloadItems[val].children[1].style.display = 'none'
} }
}
/* 对于ios与Android pc端点击时a链接直接跳转 移动端点击时需要阻止a链接直接跳转 */
androidDOM.addEventListener('click',function(e){
if(isMobile){
e.preventDefault()
}
})
iosDOM.addEventListener('click',function(e){
if(isMobile){
e.preventDefault()
}
})
// 对于不同类型的移动端进行处理
function movieHandle(flag=true){
if(flag){
downloadItems.forEach((item,index)=>{
item.addEventListener('touchstart',function(){
if(index==2||index==3){
return showBox("当前终端不支持")
}
if(index==0){
if(isIos){
// Safari
if (navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1 && navigator.userAgent.indexOf('Edge') === -1) {
return (window.open(item.children[0].href,"_blank"));
}
return window.open(item.children[0].href,"_blank")
}
return showBox("当前终端不支持")
}
if(index==1){
if(isAndroid){
return window.open(item.children[0].href,"_blank")
}
return showBox("当前终端不支持")
}
})
})
}
}
// 移动端
/* 显示/隐藏提示弹框 */
function showBox(text){
const box = document.querySelector('.BulletBox')
box.style.display = 'block'
box.innerHTML = text
setTimeout(()=>{
box.style.display = 'none'
},1000)
}
// 是否是移动端
if(isMobile){
if(isAndroid||isIos){
movieHandle()
}else if(isWindows){
movieHandle(false)
}
}
const localStorageHandle = (val)=>{ const localStorageHandle = (val)=>{
localStorage.setItem('update_log_num',val) localStorage.setItem('update_log_num',val)
window.location.href = '../zh/log.html' window.location.href = '../zh/log.html'
@ -403,7 +478,6 @@ if(!logsItem) {
localStorage.setItem('logs_dowmload_zh', JSON.stringify(record)) localStorage.setItem('logs_dowmload_zh', JSON.stringify(record))
updates.innerHTML = releases; updates.innerHTML = releases;
}).catch(err=>{ }).catch(err=>{
console.log(err,"err");
}) })
}else{ }else{
updates.innerHTML = logsItem; updates.innerHTML = logsItem;