feat:更新

src/components/ballContent/main.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="ball-content" :class="modeClass">
+    <div class="ball-content-main">
+      <div class="ball-content-main-grid">
+        <lucky-grid-view :mode="mode"></lucky-grid-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import luckyGridView from "@/components/luckyGridView";
+export default {
+  name: "BallContent",
+  components: {
+    luckyGridView
+  },
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    }
+  },
+  computed: {
+    modeClass() {
+      if (this.mode === "blue") return "ball-xy";
+      return "ball-hh";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ball-content {
+  width: 676px;
+  height: 430px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding-top: 57px;
+  margin: 0 auto;
+  &-main {
+    height: 414px;
+    padding: 8px;
+    &-grid {
+      padding-top: 78px;
+    }
+  }
+}
+.ball-xy {
+  background-image: url(../../assets/images/giftbox.png);
+}
+.ball-hh {
+  background-image: url(../../assets/images/giftbox_g.png);
+}
+</style>