+ {{ props.title }} +
+ + +
+
+
- ![]()
-
-
-
-
-
-
diff --git a/src/layout/index.vue b/src/layout/index.vue
index acd521c..10cc77e 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,12 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/Config/Person/PersonAll/useViewModel.ts b/src/views/Config/Person/PersonAll/useViewModel.ts
new file mode 100644
index 0000000..9464db9
--- /dev/null
+++ b/src/views/Config/Person/PersonAll/useViewModel.ts
@@ -0,0 +1,167 @@
+import type { Ref } from 'vue'
+import type { IPersonConfig } from '@/types/storeType'
+import { storeToRefs } from 'pinia'
+import { inject } from 'vue'
+import * as XLSX from 'xlsx'
+import { loadingKey } from '@/components/Loading'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import { readFileBinary } from '@/utils/file'
+import ImportExcelWorker from './importExcel.worker?worker'
+
+export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref
+
+
+
+
+
+
+
+
+
+
+ {{ t('table.luckyPeopleNumber') }}:
+ {{ alreadyPersonList.length }}
+ /
+ {{ allPersonList.length }}
+
+
+
+
+
+
diff --git a/src/views/Home/components/OptionsButton/index.scss b/src/views/Home/components/OptionsButton/index.scss
new file mode 100644
index 0000000..96d3f8f
--- /dev/null
+++ b/src/views/Home/components/OptionsButton/index.scss
@@ -0,0 +1,335 @@
+#menu {
+ position: absolute;
+ z-index: 100;
+ width: 100%;
+ bottom: 50px;
+ text-align: center;
+ margin: 0 auto;
+ font-size: 32px;
+
+ .start {
+ // 居中
+ display: flex;
+ justify-content: center;
+ }
+
+ .btn-stars {
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 13rem;
+ overflow: hidden;
+ height: 3rem;
+ background-size: 300% 300%;
+ backdrop-filter: blur(1rem);
+ border-radius: 5rem;
+ transition: 0.5s;
+ animation: gradient_301 5s ease infinite;
+ border: double 4px transparent;
+ background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
+ background-origin: border-box;
+ background-clip: content-box, border-box;
+ -webkit-animation: pulsate-fwd 1.2s ease-in-out infinite both;
+ animation: pulsate-fwd 1.2s ease-in-out infinite both;
+
+ &:hover #container-stars {
+ z-index: 1;
+ background-color: #212121;
+ }
+
+ &:hover {
+ transform: scale(1.1)
+ }
+
+ &:active {
+ border: double 4px #FE53BB;
+ background-origin: border-box;
+ background-clip: content-box, border-box;
+ animation: none;
+ }
+
+ &:active .circle {
+ background: #FE53BB;
+ }
+
+ strong {
+ z-index: 2;
+ font-family: 'Avalors Personal Use';
+ font-size: 12px;
+ letter-spacing: 5px;
+ color: #FFFFFF;
+ text-shadow: 0 0 4px white;
+ }
+
+ #container-stars {
+ position: absolute;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ transition: 0.5s;
+ backdrop-filter: blur(1rem);
+ border-radius: 5rem;
+
+ #stars {
+ position: relative;
+ background: transparent;
+ width: 200rem;
+ height: 200rem;
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: -10rem;
+ left: -100rem;
+ width: 100%;
+ height: 100%;
+ animation: animStarRotate 90s linear infinite;
+ }
+
+ &::after {
+ background-image: radial-gradient(#ffffff 1px, transparent 1%);
+ background-size: 50px 50px;
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -50%;
+ width: 170%;
+ height: 500%;
+ animation: animStar 60s linear infinite;
+ }
+
+ &::before {
+ background-image: radial-gradient(#ffffff 1px, transparent 1%);
+ background-size: 50px 50px;
+ opacity: 0.5;
+ }
+ }
+
+
+ }
+
+ #glow {
+ position: absolute;
+ display: flex;
+ width: 12rem;
+
+ .circle {
+ width: 100%;
+ height: 30px;
+ filter: blur(2rem);
+ animation: pulse_3011 4s infinite;
+ z-index: -1;
+
+ &:nth-of-type(1) {
+ background: rgba(254, 83, 186, 0.636);
+ }
+
+ &:nth-of-type(2) {
+ background: rgba(142, 81, 234, 0.704);
+ }
+ }
+ }
+ }
+
+ .btn-neon {
+ --glow-color: rgb(217, 176, 255);
+ --glow-spread-color: rgba(191, 123, 255, 0.781);
+ --enhanced-glow-color: rgb(231, 206, 255);
+ --btn-color: rgb(100, 61, 136);
+ -webkit-animation: pulsate-fwd 0.9s ease-in-out infinite both;
+ animation: pulsate-fwd 0.9s ease-in-out infinite both;
+ cursor: pointer;
+ border: .25em solid var(--glow-color);
+ padding: 1em 3em;
+ color: var(--glow-color);
+ font-size: 15px;
+ font-weight: bold;
+ background-color: var(--btn-color);
+ border-radius: 1em;
+ outline: none;
+ box-shadow: 0 0 1em .25em var(--glow-color),
+ 0 0 4em 1em var(--glow-spread-color),
+ inset 0 0 .75em .25em var(--glow-color);
+ text-shadow: 0 0 .5em var(--glow-color);
+ position: relative;
+ transition: all 0.3s;
+ -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+ animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+
+ &::after {
+ pointer-events: none;
+ content: "";
+ position: absolute;
+ top: 120%;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: var(--glow-spread-color);
+ filter: blur(2em);
+ opacity: .7;
+ transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
+ }
+
+ &:hover {
+ color: var(--btn-color);
+ background-color: var(--glow-color);
+ box-shadow: 0 0 1em .25em var(--glow-color),
+ 0 0 4em 2em var(--glow-spread-color),
+ inset 0 0 .75em .25em var(--glow-color);
+ }
+
+ &:active {
+ box-shadow: 0 0 0.6em .25em var(--glow-color),
+ 0 0 2.5em 2em var(--glow-spread-color),
+ inset 0 0 .5em .25em var(--glow-color);
+ }
+ }
+
+ .btn-cancel {
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 13rem;
+ overflow: hidden;
+ height: 3rem;
+ background-size: 300% 300%;
+ backdrop-filter: blur(1rem);
+ border-radius: 5rem;
+ transition: 0.5s;
+ animation: gradient_301 5s ease infinite;
+ border: double 4px transparent;
+ background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
+ background-origin: border-box;
+ background-clip: content-box, border-box;
+ }
+}
+
+@keyframes animStar {
+ from {
+ transform: translateY(0);
+ }
+
+ to {
+ transform: translateY(-135rem);
+ }
+}
+
+@keyframes animStarRotate {
+ from {
+ transform: rotate(360deg);
+ }
+
+ to {
+ transform: rotate(0);
+ }
+}
+
+@keyframes gradient_301 {
+ 0% {
+ background-position: 0% 50%;
+ }
+
+ 50% {
+ background-position: 100% 50%;
+ }
+
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+@keyframes pulse_3011 {
+ 0% {
+ transform: scale(0.75);
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+ }
+
+ 70% {
+ transform: scale(1);
+ box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+ }
+
+ 100% {
+ transform: scale(0.75);
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+ }
+}
+
+// 按钮动画
+@-webkit-keyframes pulsate-fwd {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+
+ 50% {
+ -webkit-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+@keyframes pulsate-fwd {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+
+ 50% {
+ -webkit-transform: scale(1.2);
+ transform: scale(1.2);
+ }
+
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+@-webkit-keyframes tracking-in-expand-fwd {
+ 0% {
+ letter-spacing: -0.5em;
+ -webkit-transform: translateZ(-700px);
+ transform: translateZ(-700px);
+ opacity: 0;
+ }
+
+ 40% {
+ opacity: 0.6;
+ }
+
+ 100% {
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ opacity: 1;
+ }
+}
+
+@keyframes tracking-in-expand-fwd {
+ 0% {
+ letter-spacing: -0.5em;
+ -webkit-transform: translateZ(-700px);
+ transform: translateZ(-700px);
+ opacity: 0;
+ }
+
+ 40% {
+ opacity: 0.6;
+ }
+
+ 100% {
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/components/OptionsButton/index.vue b/src/views/Home/components/OptionsButton/index.vue
new file mode 100644
index 0000000..a220239
--- /dev/null
+++ b/src/views/Home/components/OptionsButton/index.vue
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
diff --git a/src/views/Home/components/PrizeList/index.scss b/src/views/Home/components/PrizeList/index.scss
new file mode 100644
index 0000000..1d63d31
--- /dev/null
+++ b/src/views/Home/components/PrizeList/index.scss
@@ -0,0 +1,138 @@
+.label {
+ width: 120px;
+}
+
+.prize-list-enter-active {
+ -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+ animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.prize-list-leave-active {
+ -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+ animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.prize-operate-enter-active {
+ // 延时显示
+ animation: show-operate 0.6s;
+ -webkit-animation: show-operate 0.6s;
+}
+
+.current-prize {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ 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%);
+ }
+}
+
+@-webkit-keyframes slide-right {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ -webkit-transform: translateX(30px);
+ transform: translateX(30px);
+ }
+}
+
+@keyframes slide-right {
+ 0% {
+ -webkit-transform: translateX(-200px);
+ transform: translateX(-200px);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@-webkit-keyframes slide-left {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ -webkit-transform: translateX(-100px);
+ transform: translateX(-100px);
+ }
+}
+
+@keyframes slide-left {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ -webkit-transform: translateX(-400px);
+ transform: translateX(-400px);
+ }
+}
+
+@-webkit-keyframes show-operate {
+ 0% {
+ opacity: 0;
+ }
+
+ 99% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes show-operate {
+ 0% {
+ opacity: 0;
+ }
+
+ 99% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/PrizeList.vue b/src/views/Home/components/PrizeList/index.vue
similarity index 80%
rename from src/views/Home/PrizeList.vue
rename to src/views/Home/components/PrizeList/index.vue
index ea9cfcd..6a15b1b 100644
--- a/src/views/Home/PrizeList.vue
+++ b/src/views/Home/components/PrizeList/index.vue
@@ -1,17 +1,17 @@
+
+
+ + {{ topTitle }} +
+
+
+
+
+
+ ![]()
+
+
+
+
+
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 9351c44..70f295d 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -1,1127 +1,42 @@
-
-
+ - {{ topTitle }} -
-
-
-
-
-
-
-
-
+
${tableData.value[i].identity}` + if (isShowAvatar.value) + detail.style.display = 'none' + element.appendChild(detail) + + const avatar = document.createElement('img') + avatar.className = 'card-avatar' + avatar.src = tableData.value[i].avatar + avatar.alt = 'avatar' + avatar.style.width = '140px' + avatar.style.height = '140px' + if (!isShowAvatar.value) + avatar.style.display = 'none' + element.appendChild(avatar) + + element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value) + const object = new CSS3DObject(element) + object.position.x = Math.random() * 4000 - 2000 + object.position.y = Math.random() * 4000 - 2000 + object.position.z = Math.random() * 4000 - 2000 + scene.value.add(object) + + objects.value.push(object) + } + // 创建横铺的界面 + const tableVertices = createTableVertices({ tableData: tableData.value, rowCount: rowCount.value, cardSize: cardSize.value }) + targets.table = tableVertices + // 创建球体 + const sphereVertices = createSphereVertices({ objectsLength: objects.value.length }) + targets.sphere = sphereVertices + window.addEventListener('resize', onWindowResize, false) + transform(targets.table, 1000) + render() + } + function render() { + if (renderer.value) { + renderer.value.render(scene.value, camera.value) + } + } + /** + * @description: 位置变换 + * @param targets 目标位置 + * @param duration 持续时间 + */ + function transform(targets: any[], duration: number) { + TWEEN.removeAll() + if (intervalTimer.value) { + clearInterval(intervalTimer.value) + intervalTimer.value = null + randomBallData('sphere') + } + + return new Promise((resolve) => { + const objLength = objects.value.length + for (let i = 0; i < objLength; ++i) { + const object = objects.value[i] + const target = targets[i] + // console.log('target', i, target, targets) + new TWEEN.Tween(object.position) + .to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration) + .easing(TWEEN.Easing.Exponential.InOut) + .start() + + new TWEEN.Tween(object.rotation) + .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration) + .easing(TWEEN.Easing.Exponential.InOut) + .start() + .onComplete(() => { + if (luckyCardList.value.length) { + luckyCardList.value.forEach((cardIndex: any) => { + const item = objects.value[cardIndex] + useElementStyle(item.element, {} as any, i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value, 'sphere') + }) + } + luckyTargets.value = [] + luckyCardList.value = [] + canOperate.value = true + }) + } + + // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera + new TWEEN.Tween({}) + .to({}, duration * 2) + .onUpdate(render) + .start() + .onComplete(() => { + canOperate.value = true + resolve('') + }) + }) + } + /** + * @description: 窗口大小改变时重新设置渲染器的大小 + */ + function onWindowResize() { + camera.value.aspect = window.innerWidth / window.innerHeight + camera.value.updateProjectionMatrix() + + renderer.value.setSize(window.innerWidth, window.innerHeight) + render() + } + + /** + * [animation update all tween && controls] + */ + function animation() { + TWEEN.update() + if (controls.value) { + controls.value.update() + } + // 设置自动旋转 + // 设置相机位置 + requestAnimationFrame(animation) + } + /** + * @description: 旋转的动画 + * @param rotateY 绕y轴旋转圈数 + * @param duration 持续时间，单位秒 + */ + function rollBall(rotateY: number, duration: number) { + TWEEN.removeAll() + + return new Promise((resolve) => { + scene.value.rotation.y = 0 + ballRotationY.value = Math.PI * rotateY * 1000 + const rotateObj = new TWEEN.Tween(scene.value.rotation) + rotateObj + .to( + { + // x: Math.PI * rotateX * 1000, + x: 0, + y: ballRotationY.value, + // z: Math.PI * rotateZ * 1000 + z: 0, + }, + duration * 1000, + ) + .onUpdate(render) + .start() + .onStop(() => { + resolve('') + }) + .onComplete(() => { + resolve('') + }) + }) + } + /** + * @description: 视野转回正面 + */ + function resetCamera() { + new TWEEN.Tween(camera.value.position) + .to( + { + x: 0, + y: 0, + z: 3000, + }, + 1000, + ) + .onUpdate(render) + .start() + .onComplete(() => { + new TWEEN.Tween(camera.value.rotation) + .to( + { + x: 0, + y: 0, + z: 0, + }, + 1000, + ) + .onUpdate(render) + .start() + .onComplete(() => { + canOperate.value = true + // camera.value.lookAt(scene.value.position) + camera.value.position.y = 0 + camera.value.position.x = 0 + camera.value.position.z = 3000 + camera.value.rotation.x = 0 + camera.value.rotation.y = 0 + camera.value.rotation.z = -0 + controls.value.reset() + }) + }) + } + + /** + * @description: 开始抽奖，由横铺变换为球体（或其他图形） + * @returns 随机抽取球数据 + */ + ///