+
-
-
-
-
-
-
- ![Prize]()
-
-
-
-
- {{
- temporaryPrize.name }}
-
-
-
- {{ temporaryPrize.isUsedCount }}/{{
- temporaryPrize.count }}
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
- ![Prize]()
-
-
-
-
- {{ item.name }}
-
-
-
- {{ item.isUsedCount }}/{{
- item.count }}
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
+
diff --git a/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.scss b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.scss
new file mode 100644
index 0000000..833331c
--- /dev/null
+++ b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.scss
@@ -0,0 +1,140 @@
+.scroll-button::before,
+.scroll-button::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ transform: translate(12px 12px);
+}
+
+.scroll-button::before {
+ transform: translate(0, -6px);
+ opacity: 0.6;
+}
+
+.scroll-button::after {
+ transform: translate(0, 6px);
+ opacity: 0.4;
+}
+
+/* 添加动画效果 */
+.scroll-button-down {
+ animation: bounce-down 2s infinite;
+}
+
+/* 添加动画效果 */
+.scroll-button-up {
+ animation: bounce-up 2s infinite;
+}
+
+.scroll-container {
+ &::before {
+ content: '';
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ border-radius: 12px;
+ }
+}
+
+.scroll-container-end {
+ height: 100%;
+
+ &::before {
+ content: '';
+ position: absolute;
+ height: 90%;
+ width: 100%;
+ border-radius: 12px;
+ }
+}
+
+.no-scroll {}
+
+@keyframes bounce-down {
+
+ 0%,
+ 20%,
+ 50%,
+ 80%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 40% {
+ transform: translateY(-5px);
+ }
+
+ 60% {
+ transform: translateY(-2px);
+ }
+}
+
+@keyframes bounce-up {
+
+ 0%,
+ 20%,
+ 50%,
+ 80%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 40% {
+ transform: translateY(5px);
+ }
+
+ 60% {
+ transform: translateY(2px);
+ }
+}
+
+.scroll-button:hover {
+ transform: translateY(-3px);
+}
+
+.current-prize {
+ position: relative;
+ display: block;
+ overflow: clip;
+ isolation: isolate;
+
+ border-radius: 20px;
+ padding: 3px;
+}
+
+.current-prize::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 400%;
+ height: 100%;
+ background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
+ background-size: 25% 100%;
+ animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
+ // animation-play-state: paused;
+ translate: -5% 0%;
+ transition: translate 0.25s ease-out;
+ animation-play-state: running;
+ transition-duration: 0.75s;
+ translate: 0% 0%;
+}
+
+.current-prize::after {
+ content: "";
+ position: absolute;
+ inset: 4px;
+ border-top-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+ z-index: -1;
+}
+
+@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
+ to {
+ transform: translateX(-25%);
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue
new file mode 100644
index 0000000..5288d14
--- /dev/null
+++ b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/views/Home/components/PrizeList/parts/OfficialPrizeList/useGsap.ts b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/useGsap.ts
new file mode 100644
index 0000000..e9667fd
--- /dev/null
+++ b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/useGsap.ts
@@ -0,0 +1,93 @@
+import type { Ref } from 'vue'
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { onBeforeUnmount, onUnmounted, ref, watch } from 'vue'
+
+export function useGsap(scrollContainerRef: any, liRefs: any, isScroll: Ref
, prizeShow: any, temporaryPrizeShow: boolean) {
+ gsap.registerPlugin(ScrollTrigger)
+
+ const ctx = ref()
+ const showUpButton = ref(false)
+ const showDownButton = ref(true)
+ function initGsapAnimation() {
+ ctx.value = gsap.context(() => {
+ liRefs.value.forEach((box: any) => {
+ gsap.fromTo(box, { rotationX: -90, rotateZ: -20, opacity: 0 }, {
+ rotationX: 0,
+ rotateZ: 0,
+ opacity: 1,
+ scrollTrigger: {
+ trigger: box,
+ scroller: scrollContainerRef.value, // <- Specify the scroller!
+ start: 'bottom 100%',
+ end: 'top 70%',
+ scrub: true,
+ },
+ })
+ })
+ }, scrollContainerRef.value) // <- Scope!
+ }
+
+ function disposeGsapAnimation() {
+ if (!ctx.value) {
+ return
+ }
+ ctx.value.revert() // <- Easy Cleanup!
+ }
+ function scrollHandler() {
+ const scrollHeight = scrollContainerRef.value.scrollHeight
+ const scrollTop = scrollContainerRef.value.scrollTop
+ const containerHeight = scrollContainerRef.value.clientHeight
+ // 滚动滑到底部
+ if (scrollTop + containerHeight >= scrollHeight - 10) {
+ showDownButton.value = false
+ showUpButton.value = true
+ }
+ // 在中间
+ else if (scrollTop && scrollTop + containerHeight < scrollHeight) {
+ showDownButton.value = true
+ showUpButton.value = true
+ }
+ // 滚动滑到顶部
+ else {
+ showDownButton.value = true
+ showUpButton.value = false
+ }
+ }
+ function listenScrollContainer() {
+ scrollContainerRef.value.addEventListener('scroll', scrollHandler)
+ }
+ function removeScrollContainer() {
+ if (scrollContainerRef.value) {
+ scrollContainerRef.value.removeEventListener('scroll', scrollHandler)
+ }
+ }
+
+ function handleScroll(h: number) {
+ scrollContainerRef.value.scrollTop += h
+ }
+ watch([isScroll, prizeShow, temporaryPrizeShow], ([val1, val2, val3]) => {
+ if (val1 && val2 && !val3) {
+ setTimeout(() => {
+ initGsapAnimation()
+ listenScrollContainer()
+ }, 0)
+ }
+ })
+ onBeforeUnmount(() => {
+ if (!isScroll.value)
+ return
+ removeScrollContainer()
+ })
+ onUnmounted(() => {
+ if (!isScroll.value)
+ return
+ disposeGsapAnimation()
+ })
+
+ return {
+ showUpButton,
+ showDownButton,
+ handleScroll,
+ }
+}
diff --git a/src/views/Home/components/PrizeList/parts/OperationButton.vue b/src/views/Home/components/PrizeList/parts/OperationButton.vue
new file mode 100644
index 0000000..46cfe09
--- /dev/null
+++ b/src/views/Home/components/PrizeList/parts/OperationButton.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/views/Home/components/PrizeList/parts/TemporaryDialog.vue b/src/views/Home/components/PrizeList/parts/TemporaryDialog.vue
new file mode 100644
index 0000000..04139d1
--- /dev/null
+++ b/src/views/Home/components/PrizeList/parts/TemporaryDialog.vue
@@ -0,0 +1,127 @@
+
+
+
+
+
+
+
diff --git a/src/views/Home/components/PrizeList/parts/TemporaryList.vue b/src/views/Home/components/PrizeList/parts/TemporaryList.vue
new file mode 100644
index 0000000..4c168cd
--- /dev/null
+++ b/src/views/Home/components/PrizeList/parts/TemporaryList.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+ ![Prize]()
+
+
+
+
+ {{ temporaryPrize.name }}
+
+
+
+ {{ temporaryPrize.isUsedCount }}/{{ temporaryPrize.count }}
+
+
+
+
+
+
+