新增舞台抽獎畫面、新增泰瑞、修改抽獎畫面、加入年度

app/Http/Controllers/ActivityController.php

@@ -61,6 +61,7 @@ class ActivityController extends Controller
         //
         $activity = new Activity;
         $activity->activity_name = $request->activity_name;
+        $activity->year = $request->year;
         $activity->date = $request->date;
         $activity->place = $request->place;
         $activity->user_id = $request->user_id;
@@ -104,6 +105,7 @@ class ActivityController extends Controller
         //
         Activity::where('id', '=', $request->activity_id)->update([
             'activity_name' => $request->activity_name,
+            'year' => $request->year,
             'date' => $request->date,
             'place' => $request->place,
             'user_id' => $request->user_id,

app/Http/Controllers/DrawController.php

@@ -47,6 +47,11 @@ class DrawController extends Controller
                         'department_name' => $user->alias,
                     ]);
                 }
+                $remote = [
+                    'success' => true,
+                    'drawList' => $output,
+                ];
+                event(new SetPrizeEvent($remote));
                 return $output;
             } else {
                 return "user not enough";
@@ -77,6 +82,7 @@ class DrawController extends Controller
             }
             Recipients::insert($recipientsData);
             event(new StoreDrawEvent("store"));
+            event(new SetPrizeEvent("clearResult"));
             return true;
         }
         return false;
@@ -85,13 +91,13 @@ class DrawController extends Controller
     public function donate(Request $request)
     {
         CheckIn::whereIn('user_id', $request->users)->update(['is_awarded' => true]);
+        event(new SetPrizeEvent("clearResult"));
         return 'success';
     }
 
     public function send(Request $request)
     {
         event(new SetPrizeEvent($request->message));
-        //$foo = new TemplateEvent;
         return $request->message;
     }
 

app/Http/Requests/StoreActivityRequest.php

@@ -26,6 +26,7 @@ class StoreActivityRequest extends FormRequest
         return [
             //
             'activity_name' => 'required',
+            'year' => 'required',
             'date' => 'required',
             'place' => 'required',
             'user_id' => 'required',

app/Http/Requests/UpdateActivityRequest.php

@@ -26,6 +26,7 @@ class UpdateActivityRequest extends FormRequest
         return [
             //
             'activity_name' => 'required',
+            'year' => 'required',
             'date' => 'required',
             'place' => 'required',
             'user_id' => 'required',

app/Models/Activity.php

@@ -14,6 +14,7 @@ class Activity extends Model
 
     protected $fillable = [
         'activity_name',
+        'year',
         'date',
         'place',
         'user_id',

database/factories/ActivityFactory.php

@@ -19,6 +19,7 @@ class ActivityFactory extends Factory
         return [
             //
             // 'activity_name' => $this->faker->sentence($nbWords = 10, $variableNbWords = true),
+            // 'year' => '2023',
             // 'date' => $this->faker->date($format = 'Y-m-d')." ".$this->faker->time($format = 'H:i:s'),
             // 'place' => $this->faker->address(),
             // 'user_id' => '3444',

database/migrations/2023_02_08_065236_create_activities_table.php

@@ -16,6 +16,7 @@ return new class extends Migration
         Schema::create('activities', function (Blueprint $table) {
             $table->id();
             $table->string('activity_name');
+            $table->string('year');
             $table->date('date');
             $table->string('place');
             $table->string('user_id');

database/seeders/CheckInSeeder.php

@@ -39,7 +39,7 @@ class CheckInSeeder extends Seeder
                     'name' => $value->name,
                     'department_id' => $value->department_id,
                     'region' => $region,
-                    'is_checked_in' => false,
+                    'is_checked_in' => false, 
                     'children_count' => $children_count,
                     'is_awarded' => false,
                     'activity_id' => 1,

resources/js/src/router/config.js

@@ -160,10 +160,10 @@ export const settings = {
         {
             path: '/drawButton/:activity_id?',
             name: 'drawButton',
-            component: () => import('@/views/lottery/drawButton.vue'),
+            component: () => import('@/views/lottery/StageSlot.vue'),
             meta: {
                 layout: 'full',
-                pageTitle: '中獎清單',
+                pageTitle: '舞台抽獎',
                 requiresAuth: true,
             },
         },

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

@@ -44,6 +44,7 @@
                 <b-card no-body border-variant="info" class="text-center">
                     <b-card-body>
                         <b-button variant="success"
+                            target="_blank"
                             :to="{ name: 'drawButton', params: { 'activity_id': this.$route.params.activity_id } }">舞台抽獎按鈕</b-button>
                     </b-card-body>
                 </b-card>

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

@@ -12,6 +12,11 @@
                                     <b-form-input v-model="activity_name" id="activity-name" placeholder="活動名稱" />
                                 </b-form-group>
                             </b-col>
+                            <b-col cols="12">
+                                <b-form-group label="活動年度" label-for="year" label-cols-md="4">
+                                    <b-form-input v-model="year" id="year" placeholder="活動年度" />
+                                </b-form-group>
+                            </b-col>
                             <b-col cols="12">
                                 <b-form-group label="活動時間" label-for="date" label-cols-md="4">
                                     <b-form-input v-model="date" id="date" type="date" placeholder="活動時間" />
@@ -132,6 +137,7 @@ export default {
         return {
             userData: getUserData(),
             activity_name: '',
+            year: '',
             date: '',
             place: '',
             deadline: '',
@@ -145,6 +151,7 @@ export default {
                 {
                     'activity_id': this.$route.params.activity_id,
                     'activity_name': this.activity_name,
+                    'year': this.year,
                     'date': this.date,
                     'place': this.place,
                     'user_id': this.userData.user_id,

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

@@ -12,6 +12,11 @@
                                 <b-form-input v-model="activity_name" id="activity-name" placeholder="活動名稱" />
                             </b-form-group>
                         </b-col>
+                            <b-col cols="12">
+                                <b-form-group label="活動年度" label-for="year" label-cols-md="4">
+                                    <b-form-input v-model="year" id="year" placeholder="活動年度" />
+                                </b-form-group>
+                            </b-col>
                         <b-col cols="12">
                             <b-form-group label="活動時間" label-for="date" label-cols-md="4">
                                 <b-form-input v-model="date" id="date" type="date" placeholder="活動時間" />
@@ -129,6 +134,7 @@ export default {
         return {
             userData: getUserData(),
             activity_name: '',
+            year: '',
             date: '',
             place: '',
             deadline: '',
@@ -139,6 +145,7 @@ export default {
     created() {
         useJwt.postData('/api/activity/show', { 'activity_id': this.$route.params.activity_id }).then(response => {
             this.activity_name = response.data.activity_name;
+            this.year = response.data.year;
             this.date = response.data.date;
             this.place = response.data.place;
             this.deadline = response.data.deadline.split(' ')[1];
@@ -152,6 +159,7 @@ export default {
                 {
                     'activity_id': this.$route.params.activity_id,
                     'activity_name': this.activity_name,
+                    'year': this.year,
                     'date': this.date,
                     'place': this.place,
                     'user_id': this.userData.user_id,

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

@@ -146,13 +146,13 @@ export default {
 
       prizeTableFields: ['name', 'provider', 'count'],
       recipientsTableFields: ['prize_name', 'user_id', 'user_name', 'created_at'],
-      regionOption: ['北區', '中區', '南區', '來賓'],
+      regionOption: ['北區', '中區', '南區', '泰瑞', '來賓'],
 
       drawOption: {
         activity_id: this.$route.params.activity_id,
         prize_id: '0',
         prize_name: '',
-        region: ['北區', '中區', '南區', '來賓'],
+        region: ['北區', '中區', '南區', '泰瑞', '來賓'],
         draw_one: true,
       },
       addPrizeOption: {

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

@@ -138,7 +138,7 @@ export default {
 			useJwt.postData('/api/randomTest/draw', {
 				activity_id: this.activityId,
 				prize_id: this.prizeList[2].id,
-				region: ['北區', '中區', '南區', '來賓'],
+				region: ['北區', '中區', '南區', '泰瑞', '來賓'],
 				number: 100
 			}).then(res => {
 				this.drawList = res.data;

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

@@ -27,6 +27,11 @@
 				{{ activityName }}
 			</span>
 		</div>
+        <div class="year">
+			<span class="year-text">
+				{{ year }}
+			</span>
+		</div>
 		<div>
 			<button class="menu" @click="showDrawMenu()"></button>
 		</div>
@@ -146,6 +151,7 @@ export default {
 	data() {
 		return {
 			activityName: "亞新春酒聯歡餐會",
+            year: "2023",
 
 			activityId: this.$route.params.activity_id,
 			activity: {},
@@ -153,8 +159,8 @@ export default {
 			departmentList: [],
 
 			fields: ['獎項', '數量'],
-			regionOption: ['北區', '中區', '南區', '來賓'],
-			region: ['北區', '中區', '南區', '來賓'],
+			regionOption: ['北區', '中區', '南區', '泰瑞', '來賓'],
+			region: ['北區', '中區', '南區', '泰瑞', '來賓'],
 			drawMax: 1,
 			drawOne: true,
 
@@ -170,55 +176,18 @@ export default {
 			notDrawnCount: 0,
 			isDrawn: false,
 
-			// departmentList: [
-			// 	"行管部庶務科",
-			// 	"人力資源科",
-			// 	"行管部文書科",
-			// 	"南區辦事處",
-			// 	"中區辦事處",
-			// 	"工程管理一部",
-			// 	"工程管理二部",
-			// 	"發展與企畫部",
-			// 	"工程製圖科",
-			// 	"工務部",
-			// 	"大地工程部",
-			// 	"財務部",
-			// 	"運輸土木部",
-			// 	"城鄉發展部",
-			// 	"軌道工程部",
-			// 	"董事長室",
-			// 	"總經理室",
-			// 	"企業發展中心",
-			// 	"成本中心",
-			// 	"資訊中心",
-			// 	"環境水務部",
-			// 	"環境永續部",
-			// 	"機電工程部",
-			// 	"結構工程部",
-			// 	"工程設計群",
-			// 	"工程監理群",
-			// 	"總管理處",
-			// 	"建築及設施群",
-			// 	"數位發展部",
-			// 	"淡海輕軌專案",
-			// 	"安坑輕軌專案",
-			// 	"先進技術中心",
-			// 	"塭仔圳專案",
-			// 	"萬大市場專案",
-			// 	"來賓"
-			// ],
 			messages: [],
 			prizeList: [],
 
 			prizeTableFields: ['name', 'provider', 'count'],
 			recipientsTableFields: ['prize_name', 'user_id', 'user_name', 'created_at'],
-			regionOption: ['北區', '中區', '南區', '來賓'],
+			regionOption: ['北區', '中區', '南區', '泰瑞', '來賓'],
 
 			drawOption: {
 				activity_id: this.$route.params.activity_id,
 				prize_id: '0',
 				prize_name: '',
-				region: ['北區', '中區', '南區', '來賓'],
+				region: ['北區', '中區', '南區', '泰瑞', '來賓'],
 				draw_one: true,
 			},
 			addPrizeOption: {
@@ -259,6 +228,7 @@ export default {
 		useJwt.postData('/api/activity/show', { activity_id: this.activityId }).then(res => {
 			this.activity = res.data;
 			this.activityName = res.data.activity_name
+			this.year = res.data.year
 			if (this.activityName.includes("年度")) {
 				this.activityName = '亞新' + this.activityName.split('年度')[1];
 			}
@@ -285,18 +255,6 @@ export default {
 		document.body.addEventListener('keyup', this.bodyListener, false)
 	},
 	methods: {
-		dateFormat(date) {
-			var d = new Date(date);
-			return d.getFullYear()
-				+ '/' + (d.getMonth() + 1).toString().padStart(2, '0')
-				+ '/' + d.getDay().toString().padStart(2, '0')
-				+ '/' + d.getHours().toString().padStart(2, '0')
-				+ ':' + d.getMinutes().toString().padStart(2, '0')
-				+ ':' + d.getSeconds().toString().padStart(2, '0');
-		},
-		counterId(id) {
-			return "counter_" + id;
-		},
 		showDraw() {
 			this.$refs['draw-modal'].show();
 		},
@@ -341,10 +299,8 @@ export default {
 							this.department_name = this.drawList[0].department_name;
 							this.user_id = this.drawList[0].user_id;
 							this.user_name = this.drawList[0].user_name;
+                            this.animate();
 						}
-						setTimeout(() => {
-							this.animate();
-						}, 500);
 					} else {
 						this.showDrawError();
 						console.log("draw error: " + res.data);
@@ -611,6 +567,24 @@ body::-webkit-scrollbar {
 	// 	1px 1px 0 #222222;
 }
 
+.year {
+	position: absolute;
+	left: 1745px;
+	top: 174px;
+	width: 30px;
+	height: 780px;
+}
+
+.year-text {
+	font-family: '全真海報體';
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	-webkit-text-stroke: 2px #F4C951;
+	color: #000;
+	font-size: 43px;
+}
+
 .menu {
 	width: 191px;
 	height: 179px;

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

@@ -120,13 +120,13 @@ export default {
 
 			prizeTableFields: ['name', 'provider', 'count'],
 			recipientsTableFields: ['prize_name', 'user_id', 'user_name', 'created_at'],
-			regionOption: ['北區', '中區', '南區', '來賓'],
+			regionOption: ['北區', '中區', '南區', '泰瑞', '來賓'],
 
 			drawOption: {
 				activity_id: this.$route.params.activity_id,
 				prize_id: '0',
 				prize_name: '',
-				region: ['北區', '中區', '南區', '來賓'],
+				region: ['北區', '中區', '南區', '泰瑞', '來賓'],
 				draw_one: true,
 			},
 			addPrizeOption: {

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

@@ -0,0 +1,543 @@
+<template>
+    <div ref="body">
+        <div class="prize">
+            <span class="prize-text">{{ drawOption.prize_name }}</span>
+        </div>
+        <div class="slot counter_0">
+            <b-row>
+                <div>
+                    <i class="slot-text-dep">部門</i>
+                </div>
+                <div>
+                    <span class="slot-text">
+                        <i>0</i>
+                        <i>0</i>
+                        <i>0</i>
+                        <i>0</i>
+                    </span>
+                </div>
+                <div>
+                    <span class="slot-text"></span>
+                </div>
+            </b-row>
+        </div>
+        <div class="activity" :style="activitySpacing(activityName.length)">
+            <span class="activity-text">
+                {{ activityName }}
+            </span>
+        </div>
+        <div class="year">
+			<span class="year-text">
+				{{ year }}
+			</span>
+		</div>
+
+        <div class="counter">
+            <div class="top">
+                <span class="counter-text">已抽:{{ drawnCount }}</span>
+            </div>
+            <div class="bottom">
+                <span class="counter-text">未抽:{{ notDrawnCount }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+    BRow,
+    BCol,
+    BCard,
+    BCardText,
+    BLink,
+    BTable,
+    BModal,
+    BFormInput,
+    BFormSpinbutton,
+    BButton,
+    BFormCheckbox,
+    BFormRadio,
+    BImg,
+} from "bootstrap-vue";
+import Ripple from "vue-ripple-directive";
+import useJwt from "@/auth/jwt/useJwt";
+import vSelect from "vue-select";
+import { VueGoodTable } from "vue-good-table";
+import "vue-select/dist/vue-select.css";
+
+import Pusher from "pusher-js";
+
+export default {
+    components: {
+        BRow,
+        BCol,
+        BCard,
+        BCardText,
+        BLink,
+        BTable,
+        BModal,
+        BFormInput,
+        BFormSpinbutton,
+        BButton,
+        BFormCheckbox,
+        BFormRadio,
+        BImg,
+        VueGoodTable,
+        vSelect,
+    },
+    directives: {
+        Ripple,
+    },
+    data() {
+        return {
+            activityName: "亞新春酒聯歡餐會",
+            year:'2023',
+
+            activityId: this.$route.params.activity_id,
+            activity: {},
+            userList: [],
+            departmentList: [],
+
+
+            prizeId: "",
+            drawList: [],
+            department_name: "",
+            user_id: "",
+            user_name: "",
+
+            drawnCount: 0,
+            notDrawnCount: 0,
+            isDrawn: false,
+            prizeList: [],
+
+            drawOption: {
+                activity_id: this.$route.params.activity_id,
+                prize_id: "0",
+                prize_name: "",
+                region: ['北區', '中區', '南區', '泰瑞', '來賓'],
+                draw_one: true,
+            },
+        };
+    },
+    created() {
+        // Pusher.logToConsole = true;
+
+        var pusher = new Pusher("9fb7f6f0141efc7e1293", {
+            cluster: "ap3",
+        });
+
+        var channel = pusher.subscribe("my-channel");
+        channel.bind("set-event", (data) => {
+            let message = data.message;
+            console.log(message);
+
+            if (message == "updateData") {
+                this.updateDataset();
+            } else if (message && message.prize_id) {
+                this.clearResult();
+                this.drawOption = message;
+                this.drawList = [];
+                this.count();
+            } else if (message && message.success) {
+                this.drawList = message.drawList;
+                if (message.drawList.length == 1) {
+                    this.department_name = message.drawList[0].department_name;
+                    this.user_id = message.drawList[0].user_id;
+                    this.user_name = message.drawList[0].user_name;
+                    this.animate();
+                }
+            }else if (message == "clearResult") {
+                this.clearResult();
+                this.drawList = [];
+                this.count();
+            }
+        });
+
+        useJwt
+            .postData("/api/activity/show", { activity_id: this.activityId })
+            .then((res) => {
+                this.activity = res.data;
+                this.activityName = res.data.activity_name;
+                this.year = res.data.year;
+                if (this.activityName.includes("年度")) {
+                    this.activityName =
+                        "亞新" + this.activityName.split("年度")[1];
+                }
+            });
+
+        useJwt
+            .postData("/api/check_in/index_by_activity", {
+                activity_id: this.activityId,
+            })
+            .then((res) => {
+                this.userList = res.data;
+            });
+
+        useJwt
+            .postData("/api/prize/index_by_activity", {
+                activity_id: this.$route.params.activity_id,
+            })
+            .then((res) => {
+                this.prizeList = res.data;
+            });
+
+        useJwt.postData("/api/department/index").then((res) => {
+            this.departmentList = Object.values(res.data);
+        });
+
+        this.bodyListener = (e) => {
+            if (
+                (e.keyCode === 13 || e.keyCode === 32) &&
+                e.target === document.body
+            ) {
+                console.log("enter");
+                this.draw();
+            }
+        };
+        document.body.addEventListener("keyup", this.bodyListener, false);
+    },
+    methods: {
+        updateDataset() {
+            useJwt
+                .postData("/api/prize/index_by_activity", {
+                    activity_id: this.$route.params.activity_id,
+                })
+                .then((res) => {
+                    this.prizeList = res.data;
+                });
+        },
+        draw() {
+            console.log("fun draw in");
+            useJwt
+                .postData("/api/drawManager", {
+                    message: "draw",
+                })
+                .then((res) => {
+                    console.log(res);
+                });
+        },
+
+        animate() {
+            var departmentList = this.departmentList;
+            var numbers = "0123456789";
+            var string = numbers;
+
+            this.drawList.forEach((element, index) => {
+                var departmentName = element.department_name;
+                var deps = document.querySelectorAll(
+                    "div.slot.counter_" +
+                        index +
+                        " > div > div:nth-child(1) > i"
+                );
+                var allCounters = document.querySelectorAll(
+                    "div.slot.counter_" +
+                        index +
+                        " > div > div:nth-child(2) > span > i"
+                );
+
+                deps.forEach((el) => {
+                    var duration = 1000;
+                    var interval = setInterval(() => {
+                        el.innerText =
+                            departmentList[
+                                Math.floor(
+                                    Math.random() * departmentList.length
+                                )
+                            ];
+                        duration = duration - 50;
+                        if (duration <= 0) {
+                            clearInterval(interval);
+                            el.innerText = departmentName;
+                            this.department_name = departmentName;
+                        }
+                    }, 50);
+                });
+                allCounters.forEach((el, i) => {
+                    var duration = 500 + i * 1000;
+                    var interval = setInterval((e) => {
+                        el.innerText = string.charAt(
+                            Math.random() * string.length
+                        );
+                        duration = duration - 50;
+                        if (duration <= 0) {
+                            clearInterval(interval);
+                            el.innerText = element.user_id[i];
+                            if (i == 3) {
+                                document.querySelector(
+                                    "div.slot.counter_" +
+                                        index +
+                                        " > div > div:nth-child(3) > span"
+                                ).innerText = element.user_name;
+                                this.user_id = element.user_id;
+                                this.isAnimated = true;
+                            }
+                        }
+                    }, 50);
+                });
+            });
+        },
+        clearResult() {
+            document.querySelector(
+                "div.slot.counter_0 > div > div:nth-child(1) > i"
+            ).innerText = "部門";
+            document.querySelectorAll(
+                "div.slot.counter_0 > div > div:nth-child(2) > span > i"
+            )[0].innerText = "0";
+            document.querySelectorAll(
+                "div.slot.counter_0 > div > div:nth-child(2) > span > i"
+            )[1].innerText = "0";
+            document.querySelectorAll(
+                "div.slot.counter_0 > div > div:nth-child(2) > span > i"
+            )[2].innerText = "0";
+            document.querySelectorAll(
+                "div.slot.counter_0 > div > div:nth-child(2) > span > i"
+            )[3].innerText = "0";
+            document.querySelector(
+                "div.slot.counter_0 > div > div:nth-child(3) > span"
+            ).innerText = "";
+            this.isDrawn = false;
+            this.isAnimated = false;
+        },
+        count() {
+            useJwt
+                .postData("/api/prize/count_by_prize", {
+                    prize_id: this.drawOption.prize_id,
+                })
+                .then((res) => {
+                    this.drawnCount = res.data.drawnCount;
+                    this.notDrawnCount = res.data.notDrawnCount;
+                });
+        },
+        activitySpacing(length) {
+            return (
+                "letter-spacing: " + (725 - length * 75) / (length - 1) + "px;"
+            );
+        },
+    },
+    watch: {
+        prizeId: function (newValue) {
+            this.count();
+        },
+    },
+};
+</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);
+}
+
+@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%;
+}
+
+body {
+    background-color: white;
+    background-image: url("/MAA03.jpg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: left top;
+    font-family: "Open Sans", Verdana, Geneva, "新微軟正黑體",
+        "Microsoft JhengHei", "微軟正黑體", sans-serif, "全真海報體";
+}
+
+.arrow-right {
+    right: 0;
+    position: absolute;
+    cursor: pointer;
+}
+
+.arrow-left {
+    left: 0;
+    position: absolute;
+    cursor: pointer;
+}
+
+body::-webkit-scrollbar {
+    display: none;
+}
+
+.slot {
+    width: 970px;
+    height: 250px;
+    position: absolute;
+    top: 425px;
+    color: black;
+    left: 380px;
+}
+
+.slot-text-dep {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 260px;
+    width: 330px;
+    font-size: 46px;
+    -webkit-text-stroke: 1px white;
+    font-weight: bold;
+}
+
+.slot-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 260px;
+    width: 330px;
+    font-size: 80px;
+    -webkit-text-stroke: 1px white;
+    font-weight: bold;
+}
+
+.prize {
+    position: absolute;
+    left: 390px;
+    top: 280px;
+    width: 950px;
+}
+
+.prize-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 120px;
+    -webkit-text-stroke: 2px white;
+    font-weight: bold;
+    color: #966a13;
+    font-size: 73px;
+    text-shadow: 5px 5px 0 #222222, -1px -1px 0 #222222, 1px -1px 0 #222222,
+        -1px 1px 0 #222222, 1px 1px 0 #222222;
+    letter-spacing: -2px;
+}
+
+.activity {
+    position: absolute;
+    left: 1702px;
+    top: 255px;
+    width: 30px;
+    height: 780px;
+}
+
+.activity-text {
+    font-family: "全真海報體";
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    -webkit-text-stroke: 2px #f4c951;
+    -webkit-writing-mode: vertical-lr;
+    writing-mode: vertical-lr;
+    color: #000;
+    font-size: 75px;
+}
+
+.year {
+	position: absolute;
+	left: 1745px;
+	top: 174px;
+	width: 30px;
+	height: 780px;
+}
+
+.year-text {
+	font-family: '全真海報體';
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	-webkit-text-stroke: 2px #F4C951;
+	color: #000;
+	font-size: 43px;
+}
+
+.menu {
+    width: 191px;
+    height: 179px;
+    background-color: rgba(0, 0, 0, 0);
+    position: absolute;
+    right: 67px;
+    top: 12px;
+    border: 0px;
+}
+
+.draw {
+    width: 123px;
+    height: 123px;
+    background-color: rgba(0, 0, 0, 0);
+    position: absolute;
+    right: 330px;
+    top: 288px;
+    border: 0px;
+}
+
+.func-group {
+    position: absolute;
+    bottom: 95px;
+    left: 460px;
+    width: 800px;
+}
+
+.func-btn {
+    background-color: #0000 !important;
+    border-color: #0000 !important;
+}
+
+.func-img {
+    width: 250px;
+}
+
+.counter {
+    position: absolute;
+    top: 75px;
+    left: 100px;
+}
+
+.counter-text {
+    font-size: 56px;
+    color: #000;
+    font-weight: bold;
+    -webkit-text-stroke: 1px white;
+}
+
+.draw-img {
+    width: 159px;
+    position: absolute;
+    top: 256px;
+    left: 260px;
+}
+
+.top {
+    float: top;
+}
+
+.bottom {
+    float: bottom;
+}
+
+.right {
+    float: right;
+}
+
+.left {
+    float: left;
+}
+</style>