From 03c799e6a5f17bf95c12b111da9588018d4484db Mon Sep 17 00:00:00 2001
From: dengtongyu <dengtongyu123@163.com>
Date: Sat, 28 Aug 2021 14:00:39 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json       |  1 +
 postcss.config.js  |  2 +-
 src/views/Home.vue | 52 +++++++++++++++++++++++++++++++++-------------
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index a013ce8..d156c13 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "vant": "^2.12.26",
     "vue": "^2.6.11",
     "vue-luck-draw": "^3.4.6",
     "vue-router": "^3.1.6",
diff --git a/postcss.config.js b/postcss.config.js
index 59b442a..2c1dd98 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -12,7 +12,7 @@ module.exports = {
     "postcss-design-convert": {
       multiple: 2,
       units: ["vw"],
-      selector: /^\.yzy-/
+      selector: /^\.van-/
     },
     "postcss-write-svg": {
       utf8: false
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d889839..6cdc4d6 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,19 +1,20 @@
 <template>
   <div class="home">
-    <LuckyGrid
-      ref="LuckDraw"
-      width="400px"
-      height="200px"
-      rows="2"
-      cols="4"
-      :prizes="prizes"
-      :blocks="blocks"
-      :default-config="defaultConfig"
-      :default-style="defaultStyle"
-      :active-style="activeStyle"
-      @start="startCallBack"
-      @end="endCallBack"
-    />
+    <div class="lucky-box">
+      <LuckyGrid
+        class="lucky-grid"
+        ref="LuckDraw"
+        rows="2"
+        cols="4"
+        :prizes="prizes"
+        :blocks="blocks"
+        :default-config="defaultConfig"
+        :default-style="defaultStyle"
+        :active-style="activeStyle"
+        @start="startCallBack"
+        @end="endCallBack"
+      />
+    </div>
 
     <button @click="clickHander">抽奖</button>
   </div>
@@ -146,6 +147,12 @@ export default {
         this.prizes = prizes;
       }, 0);
     },
+    unitFunc(num, unit) {
+      console.log(num, unit);
+      if (unit === "vw") {
+        return (window.innerWidth / 100) * num;
+      }
+    },
     startCallBack() {
       if (!this.luckyNum) return alert("还剩0次抽奖机会");
       this.$refs.LuckDraw.play();
@@ -163,3 +170,20 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.home {
+  padding: 30px;
+  height: 100%;
+  box-sizing: border-box;
+  .lucky-box {
+    width: 600px;
+    height: 300px;
+    margin: 0 auto;
+    .lucky-grid {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>