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,9 +1,9 @@
 <template>
   <div class="home">
+    <div class="lucky-box">
       <LuckyGrid
+        class="lucky-grid"
         ref="LuckDraw"
-      width="400px"
-      height="200px"
         rows="2"
         cols="4"
         :prizes="prizes"
@@ -14,6 +14,7 @@
         @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>