feat:更新

src/components/bottomView/main.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="bottom-view" :class="modeClass">
+    <div class="bottom-view-top">
+      <balance-view :mode="mode"></balance-view>
+      <lottery-btn :mode="mode"></lottery-btn>
+    </div>
+    <div class="bottom-view-bottom">
+      <ticket-view
+        v-for="(item, key) in list"
+        :key="`ticket_view_${key}`"
+        :label="item.label"
+        :desc="item.desc"
+        :active="active === key"
+        :mode="mode"
+      ></ticket-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import balanceView from "./balanceView.vue";
+import lotteryBtn from "./lotteryBtn.vue";
+import ticketView from "./ticketView.vue";
+export default {
+  name: "BottomView",
+  components: {
+    balanceView,
+    lotteryBtn,
+    ticketView
+  },
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    }
+  },
+  computed: {
+    modeClass() {
+      if (this.mode === "blue") return "bottom-view-xy";
+      return "bottom-view-hh";
+    }
+  },
+  data() {
+    return {
+      active: 0,
+      list: [
+        {
+          label: "1次",
+          desc: "1张鱼券",
+          value: 1
+        },
+        {
+          label: "10次",
+          desc: "10张鱼券",
+          value: 1
+        },
+        {
+          label: "100次",
+          desc: "100张鱼券",
+          value: 1
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.bottom-view {
+  width: 694px;
+  height: 300px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0 auto;
+  &-top {
+    display: flex;
+    width: 635px;
+    height: 115px;
+    margin: 0 auto;
+    padding-top: 18px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  &-bottom {
+    padding-top: 20px;
+    padding-left: 242px;
+    padding-right: 34px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.bottom-view-xy {
+  background-image: url(../../assets/images/bottom_bg.png);
+}
+.bottom-view-hh {
+  background-image: url(../../assets/images/bottom_bg_g.png);
+}
+</style>