先給大家展示下效果圖：

目前創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、椒江網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

HTML代碼：

<template>
 <div class="luckDraw">
  <title-bar :title="title"></title-bar>
  <div class="container">
   <div class="turntable-wrapper">
    <div class="luck-wrapper">
     <p class="integral">我的積分: <span>1000</span></p>
     <ul class="nineGrid">
      <li class="row">
       <div v-for="(n, key) in 3" :key="n" :class="index === key ? `active` : ``">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" >
         <p>8金轉(zhuǎn)</p>
        </div>
        <div class="mask"></div>
       </div>
      </li>
      <li class="row">
       <div :class="index === 7 ? 'active': ''">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" >
         <p>128金轉(zhuǎn)</p>
        </div>
        <div class="mask"></div>
       </div>
       <div class="getLuck" @click="startLottery">
        <p>立即<br>抽獎(jiǎng)</p>
       </div>
        <div :class="index === 3 ? 'active': ''">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" >
         <p>128金轉(zhuǎn)</p>
        </div>
        <div class="mask"></div>
       </div>
      </li>
      <li class="row">
       <div v-for="(n, key) in 3" :key="n" :class="index === 6-key ? `active` : ``">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" >
         <p>256金轉(zhuǎn)</p>
        </div>
        <div class="mask"></div>
       </div>
      </li>
     </ul>
    </div>

    <p class="share">分享領(lǐng)積分 <i class="icon-go"></i></p>

    <div class="rule">
     <p class="rule-title">活動規(guī)則</p>
     <ul class="rule-main">
      <li>1、活動時(shí)間：2017年9月8日起；</li>
      <li>2、活動期間，股事匯用戶每次抽獎(jiǎng)消耗20積分，抽獎(jiǎng)次數(shù)不限</li>
      <li>3、金鉆可用于向投顧提問、送禮、贊賞；</li>
      <li>4、積分賺取：每日簽到、分享文章/問答/直播間、點(diǎn)贊、金鉆充值均可獲得積分哦</li>
      <li>5、活動最終解釋權(quán)歸股事匯所有。</li>
     </ul>
    </div>

    <div></div>
   </div>

   <LuckToast :showToast="showToast" :toastType="toastType" @closeToast="closeToast" @startLottery="startLottery"></LuckToast>
  </div>
 </div>
</template>

文章標(biāo)題：基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://vcdvsql.cn/article22/cscojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、全網(wǎng)營銷推廣、網(wǎng)站制作、軟件開發(fā)、云服務(wù)器、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)