增加抽奖大转盘

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()

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',
-                path: 'computed',
+            name: 'computed',
-                name: 'computed',
+            component: () => import('../views/computed.vue')
-                component: () => import('../views/computed.vue')
+        }, {
-            },]
+            path: 'turntable',
+            name: 'turntable',
+            component: () => import('../views/Turntable.vue')
+        },]
     }, {
         path: '/pure',
         name: 'pure',

src/router/menu.js

@@ -5,4 +5,5 @@ export default [
     {title: "购物车（改）", path: '/webview/cart_fixed'},
     {title: "侦听器", path: '/watch'},
     {title: "计算属性", path: '/computed'},
+    {title: "抽奖游戏", path: '/turntable'},
 ]

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>