feat:更新

src/components/ballContent/main.vue

@@ -43,6 +43,8 @@ export default {
     padding: 8px;
     &-grid {
       padding-top: 78px;
+      width: 92%;
+      margin: 0 auto;
     }
   }
 }

src/components/luckyGridView/main.vue

@@ -56,6 +56,14 @@ export default {
         [2, 1],
         [1, 1],
         [0, 1]
+      ],
+      blueImages: [
+        require("@/assets/images/ball_02.png"),
+        require("@/assets/images/ball_01.png")
+      ],
+      goldImages: [
+        require("@/assets/images/ball_02_g.png"),
+        require("@/assets/images/ball_01_g.png")
       ]
     };
   },
@@ -63,6 +71,10 @@ export default {
     drawType() {
       if (this.mode === "blue") return "turntable1";
       return "turntable2";
+    },
+    prizesImages() {
+      if (this.mode === "blue") return this.blueImages;
+      return this.goldImages;
     }
   },
   mounted() {
@@ -78,60 +90,9 @@ export default {
       });
     },
     configPrizes(prizeInfo) {
-      const data = [
-        {
-          img: [
-            require("@/assets/images/ball_02.png"),
-            require("@/assets/images/ball_01.png")
-          ]
-        },
-        {
-          img: [
-            require("@/assets/images/ball_02.png"),
-            require("@/assets/images/ball_01.png")
-          ]
-        },
-        {
-          img: [
-            require("@/assets/images/ball_02.png"),
-            require("@/assets/images/ball_01.png")
-          ]
-        },
-        {
-          img: [
-            require("@/assets/images/ball_02.png"),
-            require("@/assets/images/ball_01.png")
-          ]
-        },
-        {
-          img: [
-            require("@/assets/images/ball_02.png"),
-            require("@/assets/images/ball_01.png")
-          ]
-        },
-        {
-          img: [
-            require("@/assets/images/ball_02.png"),
-            require("@/assets/images/ball_01.png")
-          ]
-        },
-        {
-          img: [
-            require("@/assets/images/ball_02.png"),
-            require("@/assets/images/ball_01.png")
-          ]
-        },
-        {
-          img: [
-            require("@/assets/images/ball_02.png"),
-            require("@/assets/images/ball_01.png")
-          ]
-        }
-      ];
       const prizes = [];
       this.luckyNum = 1;
       for (let i = 0; i < 8; i++) {
-        let item = data[i];
         let prizeItem = prizeInfo[i];
         prizes.push({
           index: i,
@@ -139,9 +100,9 @@ export default {
           y: this.axis[i][1],
           // fonts: [{ text: item.name, top: "70%" }],
           imgs: [
-            { src: item.img[0], width: "80%", top: "10%" },
+            { src: this.prizesImages[0], width: "86%", top: "6%" },
             { src: prizeItem.prizeImgUrl, width: "50%", top: "30%" },
-            { src: item.img[1], width: "80%", top: "10%" }
+            { src: this.prizesImages[1], width: "86%", top: "6%" }
           ]
         });
       }
@@ -173,7 +134,7 @@ export default {
 
 <style lang="scss" scoped>
 .lucky-grid-view {
-  width: 660px;
+  width: 100%;
   height: 330px;
   margin: 0 auto;
   .lucky-grid {

src/views/Home.vue

@@ -33,7 +33,7 @@ export default {
   },
   data() {
     return {
-      mode: "blue" // blue  gold
+      mode: "gold" // blue  gold
     };
   },
   computed: {},