-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: update download progress text effect and replace homepage banner…
… component
- Loading branch information
1 parent
8b9dd15
commit 92dc0de
Showing
6 changed files
with
339 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,215 @@ | ||
| <template> | ||
| <div class="banner-background justify-start items-center"> | ||
| <q-carousel | ||
| class="banner-carousel" | ||
| animated | ||
| v-model="slide" | ||
| :autoplay="10000" | ||
| swipeable | ||
| infinite | ||
| keep-alive | ||
| transition-prev="slide-right" | ||
| transition-next="slide-left" | ||
| <div class="banner-root"> | ||
| <!-- @autoplayTimeLeft="onAutoplayTimeLeft"--> | ||
| <swiper | ||
| :spaceBetween="30" | ||
| :centeredSlides="true" | ||
| :autoplay="{ | ||
| delay: 2500, | ||
| disableOnInteraction: false | ||
| }" | ||
| :style="{ width: swiperSize + 'px' }" | ||
| :navigation="false" | ||
| :modules="modules" | ||
| class="banner-swiper" | ||
| @swiper="setSwiperRef" | ||
| @slideChange="onSlideChange" | ||
| > | ||
| <template v-for="item in size" :key="item"> | ||
| <q-carousel-slide style="padding: 0" :name="item"> | ||
| <slot name="slide" :index="item" /> | ||
| </q-carousel-slide> | ||
| </template> | ||
| </q-carousel> | ||
|
|
||
| <div | ||
| v-if="size > 1" | ||
| class="cursor-pointer banner-navigation row justify-start items-center" | ||
| > | ||
| <template v-for="item in size" :key="item"> | ||
| <div | ||
| :class="item === slide ? 'navigation-active' : 'navigation-normal'" | ||
| @click="changeActive(item)" | ||
| /> | ||
| </template> | ||
| </div> | ||
| <swiper-slide | ||
| class="banner-swiper-slide" | ||
| v-for="(item, index) in size" | ||
| :key="index" | ||
| > | ||
| <slot name="swiper" :index="index" /> | ||
| </swiper-slide> | ||
| <div | ||
| v-if="size > 1" | ||
| class="cursor-pointer banner-navigation row justify-start items-center" | ||
| > | ||
| <template v-for="item in size" :key="item"> | ||
| <div | ||
| :class=" | ||
| item - 1 === currentSlide | ||
| ? 'navigation-active' | ||
| : 'navigation-normal' | ||
| " | ||
| @click="changeActive(item)" | ||
| /> | ||
| </template> | ||
| </div> | ||
| <!-- <template #container-end>--> | ||
|
|
||
| <!-- <template v-for="(item, index) in size" :key="item">--> | ||
| <!-- --> | ||
| <!-- </template>--> | ||
|
|
||
| <!-- <div class="autoplay-progress">--> | ||
| <!-- <svg viewBox="0 0 48 48" ref="progressCircle">--> | ||
| <!-- <circle cx="24" cy="24" r="20" />--> | ||
| <!-- </svg>--> | ||
| <!-- <span ref="progressContent"></span>--> | ||
| <!-- </div>--> | ||
| <!-- </template>--> | ||
| </swiper> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { ref } from 'vue'; | ||
| import { onBeforeUnmount, onMounted, ref } from 'vue'; | ||
| // Import Swiper Vue.js components | ||
| import { Swiper, SwiperSlide } from 'swiper/vue'; | ||
| // Import Swiper styles | ||
| import 'swiper/css'; | ||
| import 'swiper/css/navigation'; | ||
| import 'swiper/css/autoplay'; | ||
| import { Navigation, Autoplay } from 'swiper/modules'; | ||
| import { useQuasar } from 'quasar'; | ||
| const props = defineProps({ | ||
| defineProps({ | ||
| size: { | ||
| type: Number, | ||
| require: true | ||
| }, | ||
| start: { | ||
| type: Number, | ||
| default: 1 | ||
| } | ||
| }); | ||
| // import required modules | ||
| const modules = [Navigation, Autoplay]; | ||
| const $q = useQuasar(); | ||
| // const progressCircle = ref<string | null>(null); | ||
| // const progressContent = ref<string | null>(null); | ||
| const swiperSize = ref(); | ||
| let swiperRef: any = null; | ||
| let resizeTimer: NodeJS.Timeout | null = null; | ||
| const currentSlide = ref(0); | ||
| // const onAutoplayTimeLeft = (s, time, progress) => { | ||
| // progressCircle.value.style.setProperty('--progress', 1 - progress); | ||
| // progressContent.value.textContent = `${Math.ceil(time / 1000)}s`; | ||
| // }; | ||
| const slide = ref(props.start); | ||
| const setSwiperRef = (swiper: any) => { | ||
| swiperRef = swiper; | ||
| }; | ||
| const changeActive = (index: number) => { | ||
| slide.value = index; | ||
| swiperRef.slideTo(index); | ||
| }; | ||
| function onSlideChange(swiper) { | ||
| currentSlide.value = swiper.activeIndex; | ||
| } | ||
| const resize = () => { | ||
| if (resizeTimer) { | ||
| clearTimeout(resizeTimer); | ||
| } | ||
| resizeTimer = setTimeout(function () { | ||
| updateSwiper(); | ||
| }, 200); | ||
| }; | ||
| const updateSwiper = () => { | ||
| if ($q.screen.width < 864) { | ||
| swiperSize.value = 800; | ||
| } else if ($q.screen.width < 1024) { | ||
| swiperSize.value = $q.screen.width - 88; | ||
| } else { | ||
| swiperSize.value = $q.screen.width - 208 - 88; | ||
| } | ||
| }; | ||
| onMounted(async () => { | ||
| updateSwiper(); | ||
| window.addEventListener('resize', resize); | ||
| }); | ||
| onBeforeUnmount(() => { | ||
| window.removeEventListener('resize', resize); | ||
| }); | ||
| </script> | ||
|
|
||
| <style scoped lang="scss"> | ||
| .banner-background { | ||
| <style lang="scss" scoped> | ||
| .banner-root { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: relative; | ||
| max-width: 100%; | ||
| height: auto; | ||
| .banner-carousel { | ||
| width: 100%; | ||
| .banner-swiper { | ||
| position: relative; | ||
| max-width: 100%; | ||
| height: 100%; | ||
| } | ||
| .banner-navigation { | ||
| width: auto; | ||
| height: 20px; | ||
| right: 64px; | ||
| bottom: 32px; | ||
| position: absolute; | ||
| .navigation-base { | ||
| height: 8px; | ||
| border-radius: 20px; | ||
| margin-right: 8px; | ||
| .banner-swiper-slide { | ||
| max-width: 100%; | ||
| text-align: center; | ||
| font-size: 18px; | ||
| background: #fff; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| .navigation-active { | ||
| @extend .navigation-base; | ||
| width: 32px; | ||
| background-color: #ffffff; | ||
| .banner-swiper-slide img { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
| .navigation-normal { | ||
| @extend .navigation-base; | ||
| width: 8px; | ||
| background: rgba(255, 255, 255, 0.4); | ||
| .banner-navigation { | ||
| width: auto; | ||
| height: 20px; | ||
| right: 44px; | ||
| bottom: 32px; | ||
| position: absolute; | ||
| z-index: 1000; | ||
| .navigation-base { | ||
| height: 8px; | ||
| border-radius: 20px; | ||
| margin-right: 8px; | ||
| } | ||
| .navigation-active { | ||
| @extend .navigation-base; | ||
| width: 32px; | ||
| background-color: #ffffff; | ||
| } | ||
| .navigation-normal { | ||
| @extend .navigation-base; | ||
| width: 8px; | ||
| background: rgba(255, 255, 255, 0.4); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| //.autoplay-progress { | ||
| // position: absolute; | ||
| // right: 16px; | ||
| // bottom: 16px; | ||
| // z-index: 10; | ||
| // width: 48px; | ||
| // height: 48px; | ||
| // display: flex; | ||
| // align-items: center; | ||
| // justify-content: center; | ||
| // font-weight: bold; | ||
| // color: var(--swiper-theme-color); | ||
| //} | ||
| // | ||
| //.autoplay-progress svg { | ||
| // --progress: 0; | ||
| // position: absolute; | ||
| // left: 0; | ||
| // top: 0px; | ||
| // z-index: 10; | ||
| // width: 100%; | ||
| // height: 100%; | ||
| // stroke-width: 4px; | ||
| // stroke: var(--swiper-theme-color); | ||
| // fill: none; | ||
| // stroke-dashoffset: calc(125.6px * (1 - var(--progress))); | ||
| // stroke-dasharray: 125.6; | ||
| // transform: rotate(-90deg); | ||
| //} | ||
| </style> |
Oops, something went wrong.