img css

src/assets/css/BZcss.min.css.css

+.body-container .line{background-image:url(line.png?2);top:-1px;left:-3px}.body-container .btn-box .btn-start{background-image:url(btn_bg.png);color:#ffff72;text-shadow:#ff7a4d 1px 1px 10px,#ff7a4d 0 1px 10px,#ff7a4d 1px 0 10px,#ff7a4d 1px 1px 10px}.body-container{background-image:url(bg.png?v=4)}
\ No newline at end of file

src/assets/css/LuckDraw.css

+.bg_video_box video{
+    object-fit: fill;
+    width: 1813px;
+    height: 1020px;
+}
+.LuckDraw{
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 10009;
+}
+.container{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: rgba(48, 48, 48, 0.2);
+}
+.container .jinbian{
+    width: 100%;
+    height: 200px;
+    background: url(/static/image/draw/line.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: relative;
+    left: 1px;
+    top: 10px;
+}
+.container .box{
+    width: 40%;
+    height: 72%;
+    background: url(/static/image/draw/bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+.container .box .title {
+    background: linear-gradient(to bottom,#ffd364,#ff9,#ff8000);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: bold;
+    -webkit-text-stroke: 2px #661a00;color: #e2e4e4;
+    width: 300px;
+    text-align: center;
+    position: absolute;
+    left: 50%;
+    margin-left: -150px;
+    top: 38px;
+    font-size: 3.4rem;
+}
+.jiangpin-box{
+    width: 100%;
+    margin-top: -4rem;
+}
+.jiangpin-box p {
+    text-align: center;
+    font-size: 3rem;
+    color: #ffff72;
+    text-shadow: #ff7a4d 1px 1px 20px, #ff7a4d 0 1px 20px, #ff7a4d 1px 0 20px, #ff7a4d 1px 1px 20px;
+}
+.jiangpin-box .img-box{
+    width: 230px;
+    height: 358.1px;
+    background: url(/static/image/draw/award_box.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+}
+.jiangpin-box .img-box img{
+    width: 180px;
+    height: 290.1px;
+    border-radius: 50%;
+}
+.join-total-box{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #f6d955;
+    font-size: 2rem;
+    padding: 0 2rem;
+    box-sizing: border-box;
+    position: absolute;
+    top: 70px;
+}
+.join-total-box span{
+    color: #eaa30a;
+}
+.choujiang-btn{
+    width: 100%;
+}
+.choujiang-btn div{
+    height: 100px;
+    width: 184px;
+    background: url(/static/image/draw/btn_bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin: 24px auto 0 auto;
+    color: #ffff72;
+    text-shadow: #ff7a4d 1px 1px 10px, #ff7a4d 0 1px 10px, #ff7a4d 1px 0 10px, #ff7a4d 1px 1px 10px;
+    font-size: 3rem;
+    text-align: center;
+    line-height: 100px;
+    cursor: pointer;
+    position: relative;
+}
+.choujiang-btn .btn-light{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: url(/static/image/draw/2.png);
+    display: block;
+    -webkit-animation: lightMove .5s 4s infinite ease;
+	animation: lightMove .2s 4s infinite ease;
+}
+@keyframes lightMove {
+	12.5% {
+        background: url(/static/image/draw/2.png);
+    }
+    25% {
+        background: url(/static/image/draw/3.png);
+    }
+    37.5% {
+        background: url(/static/image/draw/4.png);
+    }
+    50% {
+        background: url(/static/image/draw/5.png);
+    }
+    62.5% {
+        background: url(/static/image/draw/6.png);
+    }
+    75% {
+        background: url(/static/image/draw/7.png);
+    }
+    87.5% {
+        background: url(/static/image/draw/8.png);
+    }
+    100% {
+        background: url(/static/image/draw/9.png);
+    }
+}
\ No newline at end of file

src/components/playGame/LuckDraw.vue

@@ -8,6 +8,27 @@
         <div class="box">
           <div class="jinbian"></div>
           <p class="title">幸运抽奖</p>
+          <div class="join-total-box">
+            <div>
+              <span>中奖人数：</span>{{awardData[awardIndex].nameList.length}}
+            </div>
+            <div>
+              <span>参与人数：</span>{{awardData[awardIndex].nameList.length}}
+            </div>
+          </div>
+          <div class="jiangpin-box" v-if="awardData[awardIndex].nameList.length === 0">
+            <p>{{awardData[awardIndex].name}}</p>
+            <div class="img-box">
+              <img :src="awardData[awardIndex].img" alt="">
+            </div>
+            <p>{{awardData[awardIndex].proName}}</p>
+          </div>
+          <div v-else>
+
+          </div>
+          <div class="choujiang-btn">
+            <div><span class="btn-light"></span>开始抽奖</div>
+          </div>
         </div>
       </div>
     </div>
@@ -30,7 +51,34 @@ export default {
         offsetY: 0,
         transformScale1: 0,
         transformScale2: 0
-      }
+      },
+      awardIndex: 0,
+      awardData: [
+        {
+          name: '一等奖',
+          maxNum: 1,
+          proName: '电话1',
+          id: 1,
+          img: 'https://paimgcdn.baidu.com/6A033253EF5FBFE0?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F2018218531.jpg&rz=bxt_2_968_600&v=0',
+          nameList: []
+        },
+        {
+          name: '二等奖',
+          maxNum: 10,
+          proName: '电话2',
+          id: 2,
+          img: 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=2834960552,2586725046&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=a34f2bae0cfaecb2150ca2d8d67442e2',
+          nameList: []
+        },
+        {
+          name: '三等奖',
+          maxNum: 20,
+          proName: '耳机',
+          id: 3,
+          img: 'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1939050805.jpg',
+          nameList: []
+        }
+      ]
     }
   },
   created () {