新增主持人用中獎清單

resources/js/src/router/config.js

@@ -112,12 +112,34 @@ export const settings = {
                 requiresAuth: true,
             },
         },
+        {
+            path: '/playPrizeList/:activity_id?',
+            name: 'playPrizeList',
+            component: () => import('@/views/lottery/PlayPrizeList.vue'),
+            meta: {
+                layout: 'full',
+                pageTitle: '中獎清單',
+                breadcrumb: [{
+                        text: '活動列表',
+                        to: '/activityList'
+                    },
+                    {
+                        text: '活動功能頁面',
+                        to: '/activityPage'
+                    },
+                    {
+                        text: '中獎清單',
+                        active: true,
+                    },
+                ],
+                requiresAuth: false,
+            },
+        },
         {
             path: '/prizeList/:activity_id?',
             name: 'prizeList',
             component: () => import('@/views/lottery/PrizeList.vue'),
             meta: {
-                layout: 'full',
                 pageTitle: '中獎清單',
                 breadcrumb: [{
                         text: '活動列表',

resources/js/src/views/lottery/Activities/ActivityPage.vue

@@ -40,15 +40,16 @@
                     <b-card-body>
                         <b-button variant="success"
                             target="_blank"
-                            :to="{ name: 'prizeList', params: { 'activity_id': this.$route.params.activity_id } }">中獎名單</b-button>
+                            :to="{ name: 'playPrizeList', params: { 'activity_id': this.$route.params.activity_id } }">中獎輪播名單</b-button>
                     </b-card-body>
                 </b-card>
             </b-col>
-            <b-col v-if="drawPage.includes(role)" md="6" :lg="lg">
+            <b-col v-if="checkinPage.includes(role)" md="6" :lg="lg">
                 <b-card no-body border-variant="info" class="text-center">
                     <b-card-body>
                         <b-button variant="success"
-                            :to="{ name: 'activityUpdate', params: { 'activity_id': this.$route.params.activity_id } }">編輯活動</b-button>
+                            target="_blank"
+                            :to="{ name: 'prizeList', params: { 'activity_id': this.$route.params.activity_id } }">主持人中獎名單</b-button>
                     </b-card-body>
                 </b-card>
             </b-col>
@@ -99,6 +100,14 @@
                     </b-card-body>
                 </b-card>
             </b-col>
+            <b-col v-if="drawPage.includes(role)" md="6" :lg="lg">
+                <b-card no-body border-variant="info" class="text-center">
+                    <b-card-body>
+                        <b-button variant="success"
+                            :to="{ name: 'activityUpdate', params: { 'activity_id': this.$route.params.activity_id } }">編輯活動</b-button>
+                    </b-card-body>
+                </b-card>
+            </b-col>
         </b-row>
     </div>
 </template>

resources/js/src/views/lottery/PrizeList.vue

@@ -1,58 +1,34 @@
 <template>
-  <b-card ref="graph-1" class="card-bc"
+  <b-card
     no-body>
-    <div class="title text-center"><feather-icon class="arrow-left"
-        icon="ChevronsLeftIcon"
-        size="60"
-        @click="shiftPrize(1)" />{{ prizeName }}<feather-icon class="pause"
-        :icon="PauseIcon"
-        size="60"
-        @click="pauseSwitch()" /><feather-icon class="arrow-right"
-        icon="ChevronsRightIcon"
-        size="60"
-        @click="shiftPrize(-1)" /></div>
-    <b-progress
-      :key="variant"
-      animated
-      :value="value"
-      :variant="variant"
-      :class="'progress-bar-' + variant" />
-    <div style="background-image: url(../flower-r.png);" class="back">
-      <b-row v-if="prizeList1.length > 0">
-        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
-          <div class="prize-list" :key="index" v-for="(item, index) in prizeList1">
-            <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
-              item.name.padEnd(4, "　") }}</b-badge>
-          </div>
-        </b-col>
-        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
-          <div class="prize-list" :key="index" v-for="(item, index) in prizeList2">
-            <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
-              item.name.padEnd(4, "　") }}</b-badge>
-          </div>
-        </b-col>
-        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
-          <div class="prize-list" :key="index" v-for="(item, index) in prizeList3">
-            <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
-              item.name.padEnd(4, "　") }}</b-badge>
-          </div>
-
-        </b-col>
-      </b-row>
-      <b-col v-else>
-        <div class="prize-list">
-          <b-badge pill variant="danger">尚未抽出</b-badge>
-        </div>
+    <b-card-header>
+      <div>
+        <b-card-title class="mb-1">
+          獎項<br>
+          {{ prizeName }}
+        </b-card-title>
+      </div>
+      <div class="d-flex align-items-center">
+        <b-dropdown
+          id="dropdown-6"
+          text="選擇獎項"
+          variant="info">
+          <b-dropdown-item :key="index" v-for="(item,index) in prizes" @click="getPrizeList(item.id)">{{item.name}}</b-dropdown-item>
+        </b-dropdown>
+      </div>
+    </b-card-header>
+    <b-row>
+      <b-col cols="12" class="prize-list" :key="index" v-for="(item, index) in prizeList">
+        <b-badge pill variant="light">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
+          item.name.padEnd(4, "　") }}</b-badge>
       </b-col>
-      <!-- <table-custom-render /> -->
-    </div>
-
+    </b-row>
   </b-card>
 </template>
 
 <script>
 import BCardCode from '@core/components/b-card-code/BCardCode.vue'
-import { BCard, BCardTitle, BRow, BCol, BBadge, BButton, BProgress } from 'bootstrap-vue'
+import { BCard, BCardTitle, BCardHeader, BRow, BCol, BBadge, BButton, BProgress, BDropdown, BDropdownItem } from 'bootstrap-vue'
 
 import useJwt from '@/auth/jwt/useJwt'
 
@@ -60,60 +36,33 @@ export default {
   components: {
     BCard,
     BCardTitle,
+    BCardHeader,
     BCardCode,
     BRow,
     BCol,
     BBadge,
     BButton,
     BProgress,
+    BDropdown,
+    BDropdownItem,
   },
   data() {
     return {
       prizeName: "",
       prizeList: [],
-      prizeList1: [],
-      prizeList2: [],
-      prizeList3: [],
       prizes: [],
-      pageMax: 1,
-      page: 1,
       index: 0,
-      tempPrizeName: "",
       variant: 'danger',
-      value: 0,
-      timer: null,
-      isPause: false,
-      delayTimer: 150,
     }
   },
   created() {
     this.getPrize(this.$route.params.activity_id)
-    this.bodyListener = (e) => {
-      if (e.keyCode === 37 && e.target === document.body) {
-        this.shiftPrize(-1)
-      }
-      if (e.keyCode === 39 && e.target === document.body) {
-        this.shiftPrize(1)
-      }
-
-    }
-    document.body.addEventListener('keyup', this.bodyListener, false)
-
   },
   mounted() {
-    this.timer = setInterval(() => {
-      if (!this.isPause) {
-        this.value += 1;
-        if (this.value >= 105) {
-          this.shiftPrize(1);
-        }
-      }
 
-    }, this.delayTimer)
   },
   beforeDestroy() {
-    clearInterval(this.timer)
-    this.timer = null
+
   },
   methods: {
     getPrize(activity_id) {
@@ -122,116 +71,23 @@ export default {
         this.prizes = response.data;
         this.index = this.prizes.length - 1;
         let prize_id = this.prizes[this.index].id;
-        this.getPrizeList(prize_id,1);
+        this.getPrizeList(prize_id);
       }).catch(error => {
         console.log("error: " + error);
       });
     },
-    getPrizeList(prize_id,direction) {
+    getPrizeList(prize_id) {
       useJwt.postData('/api/recipient/indexByPrize', { prize_id: prize_id }).then(response => {
         this.prizeList = response.data.list;
-        this.pageMax = Math.ceil(this.prizeList.length / 33);
-        this.page = direction == 1 ? 1 : this.pageMax;
-        this.prizeList1 = []
-        this.prizeList2 = []
-        this.prizeList3 = []
-        if (this.prizeList.length > 0) {
-          for (let i = 33 * (this.page - 1); i < 11 + 33 * (this.page - 1); i++) {
-            if (this.prizeList[i]) {
-              this.prizeList1.push(this.prizeList[i])
-            }
-            if (this.prizeList[i + 11]) {
-              this.prizeList2.push(this.prizeList[i + 11])
-            }
-            if (this.prizeList[i + 22]) {
-              this.prizeList3.push(this.prizeList[i + 22])
-            }
-          }
-        }
-        //( 3 / 4 )
-        if (this.pageMax > 1) {
-          this.tempPrizeName = response.data.prize[0].name;
-          this.prizeName = response.data.prize[0].name + ' ( ' + this.page + ' / ' + this.pageMax + ' )';
-        } else {
-          this.prizeName = response.data.prize[0].name;
-        }
+        this.prizeName = response.data.prize[0].name;
 
       }).catch(error => {
         console.log("error: " + error);
       });
     },
-    shiftPrize(index) {
-      this.value = 0
-      this.page += index;
-      if (this.page <= this.pageMax && this.page >= 1) {
-        this.prizeName = this.tempPrizeName + ' ( ' + this.page + ' / ' + this.pageMax + ' )';
-        this.prizeList1 = []
-        this.prizeList2 = []
-        this.prizeList3 = []
-        for (let i = 33 * (this.page - 1); i < 11 + 33 * (this.page - 1); i++) {
-          if (this.prizeList[i]) {
-            this.prizeList1.push(this.prizeList[i])
-          }
-          if (this.prizeList[i + 11]) {
-            this.prizeList2.push(this.prizeList[i + 11])
-          }
-          if (this.prizeList[i + 22]) {
-            this.prizeList3.push(this.prizeList[i + 22])
-          }
-        }
-      } else {
-        this.index = (this.index + this.prizes.length - index) % this.prizes.length;
-        this.getPrizeList(this.prizes[this.index].id,index)
-      }
-    },
-    isClaim(status) {
-      return status == 1 ? 'success' : 'danger';
-    },
-    toggleFullscreen(ref) {
-      const elem = this.$refs[ref];
-      const isFullscreen = document.fullscreenElement !== null;
-
-      if (isFullscreen) {
-        this.closeFullscreen();
-      } else {
-        this.openFullscreen(elem);
-      }
-    },
-    openFullscreen(elem) {
-      if (elem.requestFullscreen) {
-        elem.requestFullscreen();
-      } else if (elem.mozRequestFullScreen) {
-        /* Firefox */
-        elem.mozRequestFullScreen();
-      } else if (elem.webkitRequestFullscreen) {
-        /* Chrome, Safari and Opera */
-        elem.webkitRequestFullscreen();
-      } else if (elem.msRequestFullscreen) {
-        /* IE/Edge */
-        elem.msRequestFullscreen();
-      }
-    },
-    closeFullscreen() {
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        /* Firefox */
-        document.mozCancelFullScreen();
-      } else if (document.webkitExitFullscreen) {
-        /* Chrome, Safari and Opera */
-        document.webkitExitFullscreen();
-      } else if (document.msExitFullscreen) {
-        /* IE/Edge */
-        document.msExitFullscreen();
-      }
-    }, padEnd(string) {
+    padEnd(string) {
       string.padEnd(6, "　");
     },
-    pauseSwitch() {
-      this.isPause = !this.isPause;
-    }
-
-
   },
   computed: {
     PauseIcon() {
@@ -262,66 +118,16 @@ export default {
 
 body {
   font-family: 'Open Sans', Verdana, Geneva, "新微軟正黑體", 'Microsoft JhengHei', "微軟正黑體", sans-serif;
-  background-color: #c72c2cee !important;
-}
-
-.prize-list {
-  font-size: 45px;
-  text-align: center;
-  margin-top: 24px;
-  margin-bottom: 8px;
-}
-
-.card-bc {
-  background-color: #CA0000;
 }
 
 .badge-pill {
   width: 98%;
-  // background-color: #df1a1a85;
-  height: 60px;
+  height: 45px;
   padding-top: 10px;
-}
-
-.badge-danger {
-  background-color: #df1a1a85;
-}
-
-.title {
-  background-color: #CA0000;
-  width: 100%;
-  font-size: 45px;
-  color: white;
-  font-weight: bold;
-}
-
-.back {
-  background-color: #c72c2cee;
-  background-repeat: no-repeat;
-  background-size: 600px 600px;
-  background-attachment: fixed;
-  background-position: -5% 120%;
-}
-
-.pause {
-  right: 100px;
-  position: absolute;
-  cursor: pointer;
-}
-
-.arrow-right {
-  right: 0;
-  position: absolute;
-  cursor: pointer;
-}
-
-.arrow-left {
-  left: 0;
-  position: absolute;
-  cursor: pointer;
-}
-
-body::-webkit-scrollbar {
-  display: none;
+  font-size: 25px;
+  text-align: center;
+  margin-top: 10px;
+  // background-color: white;
+  color: black !important;
 }
 </style>

resources/js/src/views/lottery/Slot.vue

@@ -170,43 +170,43 @@ export default {
 			notDrawnCount: 0,
 			isDrawn: false,
 
-			departments: [
-				"行管部庶務科",
-				"人力資源科",
-				"行管部文書科",
-				"南區辦事處",
-				"中區辦事處",
-				"工程管理一部",
-				"工程管理二部",
-				"發展與企畫部",
-				"工程製圖科",
-				"工務部",
-				"大地工程部",
-				"財務部",
-				"運輸土木部",
-				"城鄉發展部",
-				"軌道工程部",
-				"董事長室",
-				"總經理室",
-				"企業發展中心",
-				"成本中心",
-				"資訊中心",
-				"環境水務部",
-				"環境永續部",
-				"機電工程部",
-				"結構工程部",
-				"工程設計群",
-				"工程監理群",
-				"總管理處",
-				"建築及設施群",
-				"數位發展部",
-				"淡海輕軌專案",
-				"安坑輕軌專案",
-				"先進技術中心",
-				"塭仔圳專案",
-				"萬大市場專案",
-				"來賓"
-			],
+			// departmentList: [
+			// 	"行管部庶務科",
+			// 	"人力資源科",
+			// 	"行管部文書科",
+			// 	"南區辦事處",
+			// 	"中區辦事處",
+			// 	"工程管理一部",
+			// 	"工程管理二部",
+			// 	"發展與企畫部",
+			// 	"工程製圖科",
+			// 	"工務部",
+			// 	"大地工程部",
+			// 	"財務部",
+			// 	"運輸土木部",
+			// 	"城鄉發展部",
+			// 	"軌道工程部",
+			// 	"董事長室",
+			// 	"總經理室",
+			// 	"企業發展中心",
+			// 	"成本中心",
+			// 	"資訊中心",
+			// 	"環境水務部",
+			// 	"環境永續部",
+			// 	"機電工程部",
+			// 	"結構工程部",
+			// 	"工程設計群",
+			// 	"工程監理群",
+			// 	"總管理處",
+			// 	"建築及設施群",
+			// 	"數位發展部",
+			// 	"淡海輕軌專案",
+			// 	"安坑輕軌專案",
+			// 	"先進技術中心",
+			// 	"塭仔圳專案",
+			// 	"萬大市場專案",
+			// 	"來賓"
+			// ],
 			messages: [],
 			prizeList: [],
 
@@ -270,7 +270,7 @@ export default {
 		});
 
 		useJwt.postData('/api/department/index').then(res => {
-			this.departmentList = res.data;
+			this.departmentList = Object.values(res.data);
 		});
 
 		this.bodyListener = (e) => {
@@ -399,7 +399,7 @@ export default {
 			});
 		},
 		animate() {
-			var departments = this.departments;
+			var departmentList = this.departmentList;
 			var numbers = "0123456789"
 			var string = numbers;
 
@@ -412,7 +412,7 @@ export default {
 					var duration = 1000;
 					var interval = setInterval(() => {
 
-						el.innerText = departments[Math.floor(Math.random() * departments.length)];
+						el.innerText = departmentList[Math.floor(Math.random() * departmentList.length)];
 						duration = duration - 50;
 						if (duration <= 0) {
 							clearInterval(interval);
@@ -486,6 +486,14 @@ export default {
 	src: local(微軟正黑體), local(Microsoft JhengHei);
 }
 
+
+@font-face {
+	font-family: '全真海報體';
+	src: url('/fonts/AVPOPV.woff') format("woff"),
+		url('/fonts/AVPOPV.ttf') format("truetype"),
+		url('/fonts/AVPOPV.eot') format("embedded-opentype");
+}
+
 html,
 body {
 	width: 100%;
@@ -497,7 +505,7 @@ body {
 	background-size: 100%;
 	background-repeat: no-repeat;
 	background-position: left top;
-	font-family: 'Open Sans', Verdana, Geneva, "新微軟正黑體", 'Microsoft JhengHei', "微軟正黑體", sans-serif;
+	font-family: 'Open Sans', Verdana, Geneva, "新微軟正黑體", 'Microsoft JhengHei', "微軟正黑體", sans-serif,'全真海報體';
 }
 
 
@@ -582,21 +590,22 @@ body::-webkit-scrollbar {
 }
 
 .activity-text {
+	font-family: '全真海報體';
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	-webkit-text-stroke: 2px white;
+	-webkit-text-stroke: 2px #F4C951;
 	-webkit-writing-mode: vertical-lr;
 	writing-mode: vertical-lr;
-	font-weight: bold;
-	color: #966A13;
+	// font-weight: bold;
+	color: #000;
 	font-size: 75px;
-	text-shadow:
-		5px 5px 0 #222222,
-		-1px -1px 0 #222222,
-		1px -1px 0 #222222,
-		-1px 1px 0 #222222,
-		1px 1px 0 #222222;
+	// text-shadow:
+	// 	5px 5px 0 #222222,
+	// 	-1px -1px 0 #222222,
+	// 	1px -1px 0 #222222,
+	// 	-1px 1px 0 #222222,
+	// 	1px 1px 0 #222222;
 }
 
 .menu {

resources/js/src/views/lottery/playPrizeList.vue

@@ -0,0 +1,327 @@
+<template>
+  <b-card ref="graph-1" class="card-bc"
+    no-body>
+    <div class="title text-center"><feather-icon class="arrow-left"
+        icon="ChevronsLeftIcon"
+        size="60"
+        @click="shiftPrize(1)" />{{ prizeName }}<feather-icon class="pause"
+        :icon="PauseIcon"
+        size="60"
+        @click="pauseSwitch()" /><feather-icon class="arrow-right"
+        icon="ChevronsRightIcon"
+        size="60"
+        @click="shiftPrize(-1)" /></div>
+    <b-progress
+      :key="variant"
+      animated
+      :value="value"
+      :variant="variant"
+      :class="'progress-bar-' + variant" />
+    <div style="background-image: url(../flower-r.png);" class="back">
+      <b-row v-if="prizeList1.length > 0">
+        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
+          <div class="prize-list" :key="index" v-for="(item, index) in prizeList1">
+            <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
+              item.name.padEnd(4, "　") }}</b-badge>
+          </div>
+        </b-col>
+        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
+          <div class="prize-list" :key="index" v-for="(item, index) in prizeList2">
+            <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
+              item.name.padEnd(4, "　") }}</b-badge>
+          </div>
+        </b-col>
+        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
+          <div class="prize-list" :key="index" v-for="(item, index) in prizeList3">
+            <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
+              item.name.padEnd(4, "　") }}</b-badge>
+          </div>
+
+        </b-col>
+      </b-row>
+      <b-col v-else>
+        <div class="prize-list">
+          <b-badge pill variant="danger">尚未抽出</b-badge>
+        </div>
+      </b-col>
+      <!-- <table-custom-render /> -->
+    </div>
+
+  </b-card>
+</template>
+
+<script>
+import BCardCode from '@core/components/b-card-code/BCardCode.vue'
+import { BCard, BCardTitle, BRow, BCol, BBadge, BButton, BProgress } from 'bootstrap-vue'
+
+import useJwt from '@/auth/jwt/useJwt'
+
+export default {
+  components: {
+    BCard,
+    BCardTitle,
+    BCardCode,
+    BRow,
+    BCol,
+    BBadge,
+    BButton,
+    BProgress,
+  },
+  data() {
+    return {
+      prizeName: "",
+      prizeList: [],
+      prizeList1: [],
+      prizeList2: [],
+      prizeList3: [],
+      prizes: [],
+      pageMax: 1,
+      page: 1,
+      index: 0,
+      tempPrizeName: "",
+      variant: 'danger',
+      value: 0,
+      timer: null,
+      isPause: false,
+      delayTimer: 150,
+    }
+  },
+  created() {
+    this.getPrize(this.$route.params.activity_id)
+    this.bodyListener = (e) => {
+      if (e.keyCode === 37 && e.target === document.body) {
+        this.shiftPrize(-1)
+      }
+      if (e.keyCode === 39 && e.target === document.body) {
+        this.shiftPrize(1)
+      }
+
+    }
+    document.body.addEventListener('keyup', this.bodyListener, false)
+
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      if (!this.isPause) {
+        this.value += 1;
+        if (this.value >= 105) {
+          this.shiftPrize(1);
+        }
+      }
+
+    }, this.delayTimer)
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    getPrize(activity_id) {
+      useJwt.postData('/api/prize/index_by_activity', { activity_id: activity_id }).then(response => {
+        console.log(response.data);
+        this.prizes = response.data;
+        this.index = this.prizes.length - 1;
+        let prize_id = this.prizes[this.index].id;
+        this.getPrizeList(prize_id,1);
+      }).catch(error => {
+        console.log("error: " + error);
+      });
+    },
+    getPrizeList(prize_id,direction) {
+      useJwt.postData('/api/recipient/indexByPrize', { prize_id: prize_id }).then(response => {
+        this.prizeList = response.data.list;
+        this.pageMax = Math.ceil(this.prizeList.length / 33);
+        this.page = direction == 1 ? 1 : this.pageMax;
+        this.prizeList1 = []
+        this.prizeList2 = []
+        this.prizeList3 = []
+        if (this.prizeList.length > 0) {
+          for (let i = 33 * (this.page - 1); i < 11 + 33 * (this.page - 1); i++) {
+            if (this.prizeList[i]) {
+              this.prizeList1.push(this.prizeList[i])
+            }
+            if (this.prizeList[i + 11]) {
+              this.prizeList2.push(this.prizeList[i + 11])
+            }
+            if (this.prizeList[i + 22]) {
+              this.prizeList3.push(this.prizeList[i + 22])
+            }
+          }
+        }
+        //( 3 / 4 )
+        if (this.pageMax > 1) {
+          this.tempPrizeName = response.data.prize[0].name;
+          this.prizeName = response.data.prize[0].name + ' ( ' + this.page + ' / ' + this.pageMax + ' )';
+        } else {
+          this.prizeName = response.data.prize[0].name;
+        }
+
+      }).catch(error => {
+        console.log("error: " + error);
+      });
+    },
+    shiftPrize(index) {
+      this.value = 0
+      this.page += index;
+      if (this.page <= this.pageMax && this.page >= 1) {
+        this.prizeName = this.tempPrizeName + ' ( ' + this.page + ' / ' + this.pageMax + ' )';
+        this.prizeList1 = []
+        this.prizeList2 = []
+        this.prizeList3 = []
+        for (let i = 33 * (this.page - 1); i < 11 + 33 * (this.page - 1); i++) {
+          if (this.prizeList[i]) {
+            this.prizeList1.push(this.prizeList[i])
+          }
+          if (this.prizeList[i + 11]) {
+            this.prizeList2.push(this.prizeList[i + 11])
+          }
+          if (this.prizeList[i + 22]) {
+            this.prizeList3.push(this.prizeList[i + 22])
+          }
+        }
+      } else {
+        this.index = (this.index + this.prizes.length - index) % this.prizes.length;
+        this.getPrizeList(this.prizes[this.index].id,index)
+      }
+    },
+    isClaim(status) {
+      return status == 1 ? 'success' : 'danger';
+    },
+    toggleFullscreen(ref) {
+      const elem = this.$refs[ref];
+      const isFullscreen = document.fullscreenElement !== null;
+
+      if (isFullscreen) {
+        this.closeFullscreen();
+      } else {
+        this.openFullscreen(elem);
+      }
+    },
+    openFullscreen(elem) {
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        /* Firefox */
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        /* Chrome, Safari and Opera */
+        elem.webkitRequestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        /* IE/Edge */
+        elem.msRequestFullscreen();
+      }
+    },
+    closeFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        /* Firefox */
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        /* Chrome, Safari and Opera */
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        /* IE/Edge */
+        document.msExitFullscreen();
+      }
+    }, padEnd(string) {
+      string.padEnd(6, "　");
+    },
+    pauseSwitch() {
+      this.isPause = !this.isPause;
+    }
+
+
+  },
+  computed: {
+    PauseIcon() {
+      return this.isPause ? 'PlayIcon' : 'PauseIcon';
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@import '~@resources/scss/vue/libs/vue-select.scss';
+
+@font-face {
+  font-family: '新微軟正黑體';
+  unicode-range: U+7db0, U+78A7, U+7B75;
+  font-style: normal;
+  font-weight: bold;
+  src: local(MS Gothic), local(Yu Gothic);
+}
+
+@font-face {
+  font-family: '新微軟正黑體';
+  unicode-range: U+7db0, U+78A7, U+7B75;
+  font-style: normal;
+  font-weight: normal;
+  src: local(微軟正黑體), local(Microsoft JhengHei);
+}
+
+body {
+  font-family: 'Open Sans', Verdana, Geneva, "新微軟正黑體", 'Microsoft JhengHei', "微軟正黑體", sans-serif;
+  background-color: #c72c2cee !important;
+}
+
+.prize-list {
+  font-size: 45px;
+  text-align: center;
+  margin-top: 24px;
+  margin-bottom: 8px;
+}
+
+.card-bc {
+  background-color: #CA0000;
+}
+
+.badge-pill {
+  width: 98%;
+  // background-color: #df1a1a85;
+  height: 60px;
+  padding-top: 10px;
+}
+
+.badge-danger {
+  background-color: #df1a1a85;
+}
+
+.title {
+  background-color: #CA0000;
+  width: 100%;
+  font-size: 45px;
+  color: white;
+  font-weight: bold;
+}
+
+.back {
+  background-color: #c72c2cee;
+  background-repeat: no-repeat;
+  background-size: 600px 600px;
+  background-attachment: fixed;
+  background-position: -5% 120%;
+}
+
+.pause {
+  right: 100px;
+  position: absolute;
+  cursor: pointer;
+}
+
+.arrow-right {
+  right: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+.arrow-left {
+  left: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+body::-webkit-scrollbar {
+  display: none;
+}
+</style>