wangyifang
/
h5-service-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

武汉大学抽奖

Browse Source
master
xy 1 year ago
parent d62b541e20
commit 4383ffaf27
1 changed files with 38 additions and 31 deletions
Show Stats Download Patch File Download Diff File

69
src/views/page/xhxcelshDraw.vue
Unescape View File

@ -35,47 +35,51 @@
</div> </div>
<div class="start-container" v-show="!start && !isResult"> <transition name="fade">
<div class="mask"></div> <div class="start-container" v-show="!start && !isResult">
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;"> <div class="mask"></div>
<div class="start-container__title"> <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
三等奖{{ product.total }}名 <div class="start-container__title">
</div> {{ product.price_item }}{{ product.total }}名
</div>
<img class="start-container__shop" :src="product.image_file ? product.image_file.url : ''" alt=""> <img class="start-container__shop" :src="product.image_file ? product.image_file.url : ''" alt="">
<div class="start-container__name"> <div class="start-container__name">
奖品：{{ product.name }} 奖品：{{ product.name }}
</div> </div>
<div class="start-container__support"> <div class="start-container__support">
赞助商 : {{ product.apply }} 赞助商 : {{ product.apply }}
</div> </div>
<img class="start-container__start" src="~@/assets/xhxcelsh/btn-start.png" alt="" @click="startDraw"> <img class="start-container__start" src="~@/assets/xhxcelsh/btn-start.png" alt="" @click="startDraw">
</div>
</div> </div>
</div> </transition>
<div class="end-container" v-show="!start && isResult"> <transition name="fade">
<div class="mask"></div> <div class="end-container" v-show="!start && isResult">
<div class="mask"></div>
<div class="body"> <div class="body">
<div class="close"> <div class="close">
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
<div class="title"> <div class="title">
三等奖{{ product.total }}名 {{ product.price_item }}{{ product.total }}名
</div> </div>
<div class="result-users"> <div class="result-users">
<div class="result-users-item" v-for="i in 10"> <div class="result-users-item" v-for="i in 10">
<img class="result-users-item__avatar" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIIMRcKFGZTZCqa5TZlKYogFOHrDQUe1iacWUJYcS3fjrwib2K5lG52Cd1y93UUd7Ynnvvw1tTYR2lw/132" alt=""> <img class="result-users-item__avatar" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIIMRcKFGZTZCqa5TZlKYogFOHrDQUe1iacWUJYcS3fjrwib2K5lG52Cd1y93UUd7Ynnvvw1tTYR2lw/132" alt="">
<div class="result-users-item__name">abc</div> <div class="result-users-item__name">abc</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </transition>
</div> </div>
</div> </div>
</template> </template>
@ -149,6 +153,7 @@ export default {
this.avatars.forEach(item => { this.avatars.forEach(item => {
gsap.to(this.$refs[`column${item.key}`],{ gsap.to(this.$refs[`column${item.key}`],{
translateX: (this.columnIndex >= 19 && item.key < 19) ? ((19 - (this.columnIndex - 19) - 1) * 100 + '%') : ((this.columnIndex + 1) * -100 + '%'), translateX: (this.columnIndex >= 19 && item.key < 19) ? ((19 - (this.columnIndex - 19) - 1) * 100 + '%') : ((this.columnIndex + 1) * -100 + '%'),
duration: 0.2,
// rotateY: -9 + ((item.key)+1) + 'deg', // rotateY: -9 + ((item.key)+1) + 'deg',
// scale: item.key < 11 ? (0.82 + (item.key-1) * 0.02) : (1 - ((item.key-1) - 10) * 0.02) // scale: item.key < 11 ? (0.82 + (item.key-1) * 0.02) : (1 - ((item.key-1) - 10) * 0.02)
onComplete: () => { onComplete: () => {
@ -174,7 +179,8 @@ export default {
for(let i = 1;i <= 20;i++) { for(let i = 1;i <= 20;i++) {
gsap.to(this.$refs[`column${(this.columnIndex+i)%(19*2)}`],{ gsap.to(this.$refs[`column${(this.columnIndex+i)%(19*2)}`],{
rotateY: -9 + ((i)+1) + 'deg', rotateY: -9 + ((i)+1) + 'deg',
scale: i < 10 ? (0.82 + i * 0.02) : (1 - (i - 10) * 0.02) scale: i < 10 ? (0.82 + i * 0.02) : (1 - (i - 10) * 0.02),
duration: 0.2,
}) })
} }
this.columnIndex = (this.columnIndex+1) % (19*2) this.columnIndex = (this.columnIndex+1) % (19*2)
@ -200,7 +206,7 @@ export default {
setTimer() { setTimer() {
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.animate() this.animate()
},600) },400)
} }
}, },
computed: {}, computed: {},
@ -260,6 +266,7 @@ export default {
.box { .box {
display: flex; display: flex;
perspective: 1200px;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
height: 100%; height: 100%;

Write Preview
Loading…
Cancel
Save