feat: 新增右侧底部导航

public/site/css/side_nav.css

@@ -0,0 +1,142 @@
+@font-face {
+  font-family: "official.iconfont";
+  src: url("../../css/fonts/side_nav_font.woff");
+  font-weight: normal;
+  font-style: normal
+}
+
+.side_nav{
+  position: fixed;
+  right: 20px;
+  bottom: 135px;
+  z-index: 100;
+}
+.side_nav .side_toolbars{
+  width: 48px;
+  padding: 4px;
+  box-sizing: border-box;
+  border-radius: 60px;
+  background-color: var(--pop-bg-color);
+  color: var(--text-color);
+  box-shadow: var(--pop-box-shadow);
+}
+.side_nav .side_toolbars .side_toolbar_item{
+  display: flex;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+}
+.side_nav .side_toolbars .side_toolbar_item .toolbar_font{
+  font-size: 24px;
+  height: 24px;
+  color: var(--text-color);
+}
+.side_nav .side_toolbars .side_toolbar_item .toolbar_font::after{
+  display: inline-block;
+  font-family: "official.iconfont";
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}
+.side_nav .side_toolbars .side_toolbar_item .font_phone::after{
+  content: "\EA25";
+}
+.side_nav .side_toolbars .side_toolbar_item .font_qrcode::after{
+  content: "\EA28";
+}
+.side_nav .side_toolbars .side_toolbar_item .toolbar_tooltip{
+  position: absolute;
+  right: 40px;
+  top: 2px;
+  transform-origin: right center;
+  white-space: nowrap;
+  width: fit-content;
+  display: none;
+  background-color: var(--code-bg-color);
+  color: #fff;
+  margin-right: 12px;
+  border-radius: 4px;
+  padding: 10px;
+  z-index: 2000;
+  font-size: 12px;
+  line-height: 1.2;
+  min-width: 10px;
+  word-wrap: break-word;
+  text-align: center;
+}
+.side_nav .side_toolbars .side_toolbar_item .toolbar_tooltip .toolbar_whtasapp{
+  width: 120px;
+  height: 120px;
+  background-image: url('../img/side_nav_whatsapp.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+} 
+.side_nav .side_toolbars .side_toolbar_item .toolbar_tooltip .toolbar_qrcode{
+  width: 120px;
+  height: 120px;
+  background-image: url('../img/side_nav_wechat.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+} 
+.side_nav .side_toolbars .side_toolbar_item .toolbar_tooltip .tooltip_arrow{
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  right: -5px;
+  top: 11px;
+  border-width: 6px;
+  border-right-width: 0;
+  border-left-color: var(--code-bg-color);
+}
+.side_nav .side_to_top{
+  width: 48px;
+  height: 48px;
+  background: #fff;
+  margin-top: 16px;
+  border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+  display: none;
+  background-color: var(--pop-bg-color);
+  color: var(--text-color);
+  box-shadow: var(--pop-box-shadow);
+}
+.side_nav .side_to_top .side_to_top_wrapper{
+  height: 40px;
+  width: 40px;
+  padding: 4px;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.side_nav .side_to_top .side_to_top_wrapper svg{
+  transform: rotate(180deg);
+  fill: var(--text-color);
+  height: 24px;
+  width: 24px;
+}
+.font_whatsapp svg{
+  fill: var(--text-color);
+}
+.side_nav .side_toolbars .side_toolbar_item:hover,.side_nav .side_to_top .side_to_top_wrapper:hover{
+  background-color: var(--bg-hover-color);
+}
+.side_nav .side_toolbars .side_toolbar_item_whtasapp:hover .toolbar_tooltip_qq,
+.side_nav .side_toolbars .side_toolbar_item_phone:hover .toolbar_tooltip_phone,
+.side_nav .side_toolbars .side_toolbar_item_qrcode:hover .toolbar_tooltip_qrcode{
+  display: block;
+}

public/site/en/about.html

@@ -389,6 +389,8 @@ <h6 class="footer-t-contact-h6">[email protected]</h6>
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="//cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
@@ -517,5 +519,31 @@ <h6 class="footer-t-contact-h6">[email protected]</h6>
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>

public/site/en/download.html

@@ -340,6 +340,8 @@ <h5 class="txt-4001624 more">More Logs</h5>
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -483,5 +485,31 @@ <h5 class="txt-4001624 update-h5">DooTask ${item} update</h5>
 }else{
   updates.innerHTML = logsItem;
 }
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>

public/site/en/help.html

@@ -2370,6 +2370,8 @@ <h6 class="txt-4001624 help-h6">
               </div>
         </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
 </div>
 </body>
 <script src="../js/common.js"></script>
@@ -2476,5 +2478,31 @@ <h6 class="txt-4001624 help-h6">
             }
         }
     }
+    document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>

public/site/en/index.html

@@ -532,6 +532,8 @@ <h1 class="collaboration-txt txt-5002835 mb-32">Turn on your DooTask team collab
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -745,5 +747,31 @@ <h1 class="collaboration-txt txt-5002835 mb-32">Turn on your DooTask team collab
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>

public/site/en/log.html

@@ -289,6 +289,8 @@ <h1 class="txt-6003645 logs-h1 mb-36">DooTask Update Log </h1>
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -527,5 +529,31 @@ <h1 class="txt-6003645 logs-h1 mb-36">DooTask Update Log </h1>
         }
     }
 }
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>

public/site/en/price.html

@@ -1271,6 +1271,8 @@ <h2 class="txt-6002430 price-card-h2">Consult</h2>
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js">
@@ -1308,5 +1310,31 @@ <h2 class="txt-6002430 price-card-h2">Consult</h2>
     const box = document.querySelector('.BulletBox1')
     box.style.display = 'none'
   })
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>