99 lines
4.3 KiB
Vue
99 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<slot />
|
|
<div class="progress-wrap">
|
|
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
|
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
useHead({
|
|
title: 'Blog details Sidebar Right || Avigo Multipurpose Theme',
|
|
meta: [
|
|
{ charset: 'utf-8' },
|
|
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
|
|
],
|
|
link: [
|
|
{ rel: 'stylesheet', href: '/assets/css/bootstrap.min.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/font-awesome-pro.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/magnific-popup.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/owl.carousel.min.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/slick-slider.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/meanmenu.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/typography.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/preloader.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/mobile-menu.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/header.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/footer.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/aos.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/fonts.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/blog-page.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/nice-select.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/modal-video.min.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/responsive.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/comon.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/avigo-unit.css' },
|
|
{ rel: 'stylesheet', href: '/assets/css/avigo-core.css' },
|
|
{ rel: 'stylesheet', href: '/style.css' }
|
|
],
|
|
script: [
|
|
{ src: '/assets/js/jquery-3-6-0.min.js', defer: true },
|
|
{ src: '/assets/js/bootstrap.min.js', defer: true },
|
|
{ src: '/assets/js/fontawesome.js', defer: true },
|
|
{ src: '/assets/js/owl.carousel.min.js', defer: true },
|
|
{ src: 'https://unpkg.com/aos@next/dist/aos.js', defer: true, crossorigin: 'anonymous' },
|
|
{ src: '/assets/js/jquery.magnific-popup.min.js', defer: true },
|
|
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js', defer: true, crossorigin: 'anonymous' },
|
|
{ src: 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js', defer: true, integrity: 'sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3', crossorigin: 'anonymous' },
|
|
{ src: '/assets/js/slick-slider.js', defer: true },
|
|
{ src: '/assets/js/mobile-menu.js', defer: true },
|
|
{ src: '/assets/js/tilt.jquery.js', defer: true },
|
|
{ src: '/assets/js/jquery.lineProgressbar.js', defer: true },
|
|
{ src: '/assets/js/jquery.nice-select.js', defer: true },
|
|
{ src: '/assets/js/mobile-meanmenu.js', defer: true },
|
|
{ src: '/assets/js/modal-video.min.js', defer: true },
|
|
{ src: '/assets/js/main.js', defer: true },
|
|
]
|
|
})
|
|
|
|
onMounted(() => {
|
|
// page-progress
|
|
var progressPath = document.querySelector(".progress-wrap path");
|
|
if (progressPath) {
|
|
var pathLength = progressPath.getTotalLength();
|
|
progressPath.style.transition = progressPath.style.WebkitTransition =
|
|
"none";
|
|
progressPath.style.strokeDasharray = pathLength + " " + pathLength;
|
|
progressPath.style.strokeDashoffset = pathLength;
|
|
progressPath.getBoundingClientRect();
|
|
progressPath.style.transition = progressPath.style.WebkitTransition =
|
|
"stroke-dashoffset 10ms linear";
|
|
var updateProgress = function () {
|
|
var scroll = $(window).scrollTop();
|
|
var height = $(document).height() - $(window).height();
|
|
var progress = pathLength - (scroll * pathLength) / height;
|
|
progressPath.style.strokeDashoffset = progress;
|
|
};
|
|
updateProgress();
|
|
$(window).scroll(updateProgress);
|
|
var offset = 50;
|
|
var duration = 550;
|
|
jQuery(window).on("scroll", function () {
|
|
if (jQuery(this).scrollTop() > offset) {
|
|
jQuery(".progress-wrap").addClass("active-progress");
|
|
} else {
|
|
jQuery(".progress-wrap").removeClass("active-progress");
|
|
}
|
|
});
|
|
jQuery(".progress-wrap").on("click", function (event) {
|
|
event.preventDefault();
|
|
jQuery("html, body").animate({ scrollTop: 0 }, duration);
|
|
return false;
|
|
});
|
|
}
|
|
})
|
|
</script>
|