From e84d9eaae622a2494d70aa0db16726066bdec88d Mon Sep 17 00:00:00 2001
From: LeeNux <lc7457@qq.com>
Date: Fri, 10 Mar 2023 15:13:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8A=BD=E5=A5=96=E5=A4=A7?=
 =?UTF-8?q?=E8=BD=AC=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js             | 27 ++++++++++++-
 src/router/index.js     | 17 ++++----
 src/router/menu.js      |  1 +
 src/views/Turntable.vue | 88 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 125 insertions(+), 8 deletions(-)
 create mode 100644 src/views/Turntable.vue

diff --git a/src/main.js b/src/main.js
index 1b06248..bb79f73 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,7 @@ import router from './router'
 import './assets/main.css'
 import 'vant/lib/index.css';
 
-import { Popup } from 'vant';
+import {Popup} from 'vant';
 
 import VConsole from 'vconsole';
 
@@ -18,4 +18,29 @@ app.use(router)
 app.use(Popup)
 app.mount('#app')
 
+// function Person(name) {
+//     this.name = name
+//     this.say = function () {
+//         console.log(this.name + "说: 你好呀!!")
+//     }
+// }
+//
+// var p1 = new Person("老王")
+//
+// p1.say()
 
+class Person {
+    name
+
+    constructor(name) {
+        this.name = name
+    }
+
+    say = function () {
+        console.log(this.name + "说: 你好呀!!")
+    }
+}
+
+let p1 = new Person("老李")
+
+p1.say()
diff --git a/src/router/index.js b/src/router/index.js
index e1ab7d2..8174a8c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,4 +1,4 @@
-import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
+import {createRouter, createWebHashHistory} from 'vue-router'
 import Default from "@/layout/Default.vue";
 import Pure from "@/layout/Pure.vue";
 
@@ -22,12 +22,15 @@ const router = createRouter({
             path: 'watch',
             name: 'watch',
             component: () => import('../views/Watch.vue')
-        },
-            {
-                path: 'computed',
-                name: 'computed',
-                component: () => import('../views/computed.vue')
-            },]
+        }, {
+            path: 'computed',
+            name: 'computed',
+            component: () => import('../views/computed.vue')
+        }, {
+            path: 'turntable',
+            name: 'turntable',
+            component: () => import('../views/Turntable.vue')
+        },]
     }, {
         path: '/pure',
         name: 'pure',
diff --git a/src/router/menu.js b/src/router/menu.js
index a4ca6fc..e82396d 100644
--- a/src/router/menu.js
+++ b/src/router/menu.js
@@ -5,4 +5,5 @@ export default [
     {title: "购物车（改）", path: '/webview/cart_fixed'},
     {title: "侦听器", path: '/watch'},
     {title: "计算属性", path: '/computed'},
+    {title: "抽奖游戏", path: '/turntable'},
 ]
diff --git a/src/views/Turntable.vue b/src/views/Turntable.vue
new file mode 100644
index 0000000..d07793c
--- /dev/null
+++ b/src/views/Turntable.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="turntable">
+    <div class="view">
+      当前积分：{{ score }}
+    </div>
+    <div class="btn" :class="{active:active===0}"><span>{{ awards[0].name }}</span></div>
+    <div class="btn" :class="{active:active===1}"><span>{{ awards[1].name }}</span></div>
+    <div class="btn" :class="{active:active===2}"><span>{{ awards[2].name }}</span></div>
+    <div class="btn" :class="{active:active===7}"><span>{{ awards[7].name }}</span></div>
+    <div class="btn roll" @click="roll"><span>抽奖</span></div>
+    <div class="btn" :class="{active:active===3}"><span>{{ awards[3].name }}</span></div>
+    <div class="btn" :class="{active:active===6}"><span>{{ awards[6].name }}</span></div>
+    <div class="btn" :class="{active:active===5}"><span>{{ awards[5].name }}</span></div>
+    <div class="btn" :class="{active:active===4}"><span>{{ awards[4].name }}</span></div>
+    <div class="award">
+      <ul>
+        <li v-for="item in list">{{ item.name }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import {ref, reactive, computed} from "vue"
+
+export default {}
+</script>
+
+<style scoped>
+.turntable {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.view {
+  width: 100%;
+  height: 100px;
+  font-size: 25px;
+  text-align: center;
+  line-height: 100px;
+}
+
+.btn {
+  position: relative;
+  width: 33.3%;
+  height: 0;
+  /*通过边距形成正方形的Hack*/
+  padding-top: 33.3%;
+  border: 1px solid #2c3e50;
+  box-sizing: border-box;
+  font-size: 25px;
+  text-align: center;
+  cursor: default;
+}
+
+.btn.roll {
+  background-color: yellow;
+  cursor: pointer;
+}
+
+.btn.active {
+  background-color: red;
+  color: #fff;
+}
+
+/*遍历所有子元素*/
+.btn > * {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.award {
+  width: 100%;
+}
+
+.award > li {
+  width: 100%;
+  text-align: center;
+}
+</style>