feat：更新

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",

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

src/views/Home.vue

@@ -1,19 +1,20 @@
 <template>
   <div class="home">
-    <LuckyGrid
+    <div class="lucky-box">
-      ref="LuckDraw"
+      <LuckyGrid
-      width="400px"
+        class="lucky-grid"
-      height="200px"
+        ref="LuckDraw"
-      rows="2"
+        rows="2"
-      cols="4"
+        cols="4"
-      :prizes="prizes"
+        :prizes="prizes"
-      :blocks="blocks"
+        :blocks="blocks"
-      :default-config="defaultConfig"
+        :default-config="defaultConfig"
-      :default-style="defaultStyle"
+        :default-style="defaultStyle"
-      :active-style="activeStyle"
+        :active-style="activeStyle"
-      @start="startCallBack"
+        @start="startCallBack"
-      @end="endCallBack"
+        @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>