<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>扭蛋机</title>
<link rel="stylesheet" href="./vant/vant.css">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<style>
.egg {
position: absolute;
top: 50px;
left: 0;
width: 100%;
font-size: 32px;
font-weight: bold;
text-align: center;
color: #735FD2;
z-index: 200;
}
.phone-frame {
position: relative;
width: 375px; /* 设置手机的宽度 */
height: 667px; /* 设置手机的高度 */
border: 1px solid black; /* 设置手机的边框样式 */
border-radius: 10px; /* 设置手机的边框圆角 */
margin: 0 auto; /* 居中显示手机框架 */
overflow: hidden; /* 隐藏手机框架外的内容 */
}
</style>
</head>
<body>
<div class="phone-frame">
<!-- 在这里添加你的网页内容 -->
<div id="app" v-cloak>
<div class="egg">神奇扭蛋机</div>
<!--抽奖外盒-->
<div class="box" ref="box">
<!--12个小球-->
<div v-for="(img,index) in imgs" :key="img.id" class="ball" :style="{
width:size+'px',
height:size+'px'
}" ref="ball" :class="['ball'+(index+1),isAround?'weiyi_'+(index+1):'']"><img :src="img.url"></div>
</div>
<div :style="{
width:btnSize+'px',
height:btnSize+'px'
}" :class="{'draw':true,'drawnow': isDraw}" @click="luckDraw" ref="draw">
<img src="./images/twist.png" alt="">
</div>
<div class="award" :style="{
width:awardWidth+'px',
height:awardHeight+'px'
}">
<div v-show="isPrize" :class="['prize',{'isprize':isPrize}]" :style="{
width:size+'px',
height:size+'px'
}"><img :src="'./images/1668070153393-i1x2zrshe5.png'" alt="" /></div>
</div>
<!--右侧选项-->
<div class="right">
<!-- <div @click="isrule = true" class="r_list"><img src="./images/guize.png" /></div>
<div @click="jackpot = true;ismine = 1" class="r_list"><img src="./images/danchi.png" /></div> -->
<div @click="jackpot = true;ismine = 2" class="r_list"><img src="./images/danhe.png" /></div>
</div>
<!--购买-->
<div class="buy">
<div class="num">剩余次数<span style="font-size: .26rem;margin-left: .09rem;">{{frequency}}</span></div>
<!-- <div class="buyNow" @click="buy">立即兑换></div> -->
</div>
<!--奖品弹出-->
<van-popup style="background: transparent;" close-on-click-overlay='false' v-model="prizeShow">
<div style="width: 100vw; height: 100vh;padding-top: .8rem;box-sizing: border-box;">
<img class="win" src="./images/win.png" alt="">
<div class="whiteText" style="font-size: .17rem;">恭喜获得<br />
<span style="color: #FFE785;line-height: 30px;">{{message}}</span>
</div>
<!-- <div class="whiteText" style="font-size: .17rem;margin-top: .12rem;"></span></div> -->
<div style="width:.92rem;height: .01rem;background-color: #fff;margin: .16rem auto;"></div>
<!-- <div class="whiteText">产品以实物为主</div> -->
<div class="whiteText" style="margin-top: .1rem;">可在首页“我的蛋盒”中查看</div>
<div class="close_jiang " @click="prizeShow = false"><img src="./images/close.png" alt=""></div>
</div>
</van-popup>
<!--扭蛋池弹出-->
<van-popup round closeable position="bottom" :style="{ height: '70%' }" close-on-click-overlay='false'
v-model="jackpot">
<div class="nav">
<!-- <div class="text " @click="ismine = 1" :class="{'active':ismine == 1}">本机扭蛋池</div> -->
<div style="margin-left: .22rem;" @click="ismine = 2" :class="{'active':ismine == 2}" class="text">我的蛋盒
</div>
</div>
<div class="jackpot_content" v-if="ismine == 1">
<div v-for="item in 10" class="jackpot_l"><img src="./images/banner.png" alt=""></div>
</div>
<div class="jackpot_content" v-else>
<div>
<div v-for="item in myPrizes" class="jackpot_mine_list">
<div style="display: flex;flex-direction: column;justify-content: center;">
<div style="font-size: .15rem; font-weight: 500;color: #EE2A5E;">{{item.message}}</div>
<div style="font-size: 11px;font-weight: 400;color: #727171;margin-top: .14rem;">
获得时间：{{item.date}}</div>
</div>
</div>
</div>
<!-- <div style="width: 100%;margin-top: .8rem; display: flex;justify-content: center;">
<img style="width: 1.63rem ;height: 1.82rem;" src="./images/noHave.png" alt="">
</div> -->
</div>
</van-popup>
<!--产品详情-->
<van-popup style="background: transparent;" close-on-click-overlay='false' v-model="isDetails">
<div class="product_box">
<div class="product_bg">
<div class="product_img"><img src="./images/flower.png" alt=""></div>
<div class="product_title"></div>
<div class="product_dec"></div>
</div>
<div class="close_details" @click="isDetails = false"><img src="./images/close.png" alt=""></div>
</div>
</van-popup>
<!--活动规则-->
<van-popup style="background: transparent;" close-on-click-overlay='false' v-model="isrule">
<div style="display: flex;flex-wrap: wrap;justify-content: center;">
<div class="rule_box">
<img src="./images/rule.png" alt="">
</div>
<div class="close_details" @click="isrule = false"><img src="./images/close.png" alt=""></div>
</div>
</van-popup>
<!--购买弹出-->
<van-popup style="background: transparent;" :close-on-click-overlay='false' v-model="isBuy">
<div style="position: relative;height: 2.83rem;">
<button class="buyBtn"><img src="./images/59.9.png" alt=""></button>
<button class="buyBtn"><img src="./images/99.png" alt=""></button>
<div>
</div>
<div class="close_buy" @click="isBuy = false"><img src="./images/close.png" alt=""></div>
</div>
</van-popup>
</div>
</div>
<script src="./js/jquery-2.0.3.min.js"></script>
<script src="./js/vue.js"></script>
<script src="./vant/vant.min.js"></script>
<script>
const API = "";
let app = new Vue({
el: '#app',
data: {
imgs: [{
id: 1,
url: './images/1668070153393-i1x2zrshe5.png'
},
{
id: 2,
url: './images/1668070153393-i1x2zrshe5.png'
},
{
id: 3,
url: './images/1668070153393-i1x2zrshe5.png'
},
{
id: 4,
url: './images/1668070153393-i1x2zrshe5.png'
},
扭蛋机.zip
需积分: 0 72 浏览量
2023-07-28
17:00:20
上传
评论
收藏 4.51MB ZIP 举报
扭蛋机.zip （110个子文件） 
094e008aa53a60b66b2e5933ee8da749f8a08f 33KB 0a25f53e91bd0a51f248d1695c6a8a9402c780 378KB .1024 55B .1024config 271B .1024feature-file 810B .1024nix 622B 12a000039aaf846e26b10252a3d12624669c9d 87KB 13c08b18e6adeddac1df62d146e5c7e55f2fee 16KB 1a47c81ade889a8670c63b6bc47e92fbd064fe 501KB 21692ba077b662ec74ab9a68b7c9e050d8dda4 3KB 26dfeeb6e641a33dae4961196235bdb965b21b 17B 279e55edd6d8acbae1267c37c994f100023695 5KB 319158184831c7745730e3d8225ea3eaca42b4 5KB 3276a7b923b81a9df764872feba82afdd6e5ed 5KB 32e745188314a3996352562601859d330bf6b1 2KB 33e6418e5044ea493f9e78df76b9394cecf420 228B 38634833f735e46536136eadc1adfe328d47f2 63KB 4904101774896ce3fb6e9664025f506df5507b 83B 4afee2cad1540d08661af6954758def3768b80 15KB 5007c73036b676c3a8261c93a482faa20c82a3 16KB 523c025b6074bb81e51a49fcce22458c9d0e70 30KB 54fe54e9a43dc3ec3305455c7dc0468b042b5e 5KB 56df8f0d1e0655ae906ecf5e2c3a2787b289aa 84B 5969288b0649e56e8474ccb7610156c6c6ec8e 296B 5d128c14766377b7e3657ff56abeb9fca52424 5KB 617355f3637e1e784af6e089c046cbae8c0714 947B 61d52a7176ba39aab905d20dafbe07e3a02c05 77KB 64257c6b07c9abb92f67c8a8f9a7efb6395eed 84KB 64af8ae1770a51cd3810e16a35c9100266a9cb 4KB 6c21cc168a5229975109ca5c11613acd691b2a 4KB 6cc1fab7d61b58dcc31ad11fda54de4cc5385b 45B 762e99a20a122dc7e7ddcc5ddef50ae4608813 12KB 79ea13ed781c7407fa780f858af87210450588 61B 7afe77139198901c649c2539434b3b6a115e0e 116B 7c575d6aa3fbf464d03698764ebf40d1f37bff 145KB 8c2713bd2d0097c6c94eefa691e9290a8abd70 32B 91c5872f56b8bb51fa040247d6b558ee7897bc 458KB 944401f75ea20515a02ddb3fb43d23ecb8c662 611B 9890f350e7d132d6def227127504e24d463a2e 37KB a0a3560aad33e3839937fef352e29c5b8a0414 202B ae32b71ca1f27bf552c7acd2fcfd03c9448351 3KB b24ab46457739bd44ce88bcfa66a810344c08e 3KB b30250cb00d1c3cc4760c161c88023f73f5afb 248B b39457c22552fbaa2fd7185eea6d5334fe01f9 5KB ba018f2261b4a0419da0cbc3c919304be6a713 29KB bb34737c04b3dae814a7338390c366db41f089 5KB .breakpoints 2B c4e43e65497ac1c39f604b3b7dbf306dd839e2 4KB cb87f73be999f59b19daf94fc36872cedfd2f4 161B ceef74acaa54e25cadda5967b274f7781555c9 296B cf2117c31040ba19e08a32bca9a0cce0aa90b6 92B COMMIT_EDITMSG 24B config 78B vant.css 141KB index.css 11KB reset.css 1KB d7f9107d4570ce92047bdee8b453f80ca41e8f 107KB dae48ff0434c0372865150460dca689ac3efcc 160B daf90d6e2da6760b64a6873feea08b5f7927ef 5KB e84c5b0e2902fa4ab54f0408192e905c3bd979 40KB e88012f7a63c8bfb390e54c8abf57d2c7a8def 31KB eab790c6e3f65316c9724a25925e7648641154 66B eb4e585e018da8ce72b559a804fdd413a31215 191B ed53f3a0dfff7e55b0352ba473852571c59be1 7KB ee49c84f07b1fcf54eddd1220300af472e2632 42KB ef448ba7a803a8fb4b73917eb1f3038920ac0a 1KB f77c432f70faa568b3a6121b7e725a38cd1239 21KB f90eb72a8a7717bb30ba935e66a42cac888b4d 3KB .gitignore 57B HEAD 456B HEAD 23B
index.html 15KB index 3KB
1668068324497-fbdm5mila0b.jpg 471KB vant.min.js 266KB vue.js 91KB jquery-2.0.3.min.js 82KB master 456B master 41B
bg.png 502KB light.png 379KB rule.png 171KB flower.png 107KB wutai.png 87KB wupin.png 85KB product_bg.png 65KB banner.png 40KB twist.png 37KB 99.png 33KB 59.9.png 30KB noHave.png 21KB danhe.png 16KB danchi.png 16KB 1668070153393-i1x2zrshe5.png 15KB guize.png 12KB win.png 7KB 9.png 5KB 12.png 5KB 6.png 5KB 2.png 5KB共 110 条
- 1
- 2
资源评论
