feat:更新

src/components/bottomView/balanceView.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="balance-view" :class="modeClass">
+    <div class="balance-view-text">
+      <label>鱼券：</label>
+      <span>{{ value }}</span>
+    </div>
+    <div class="balance-view-btn"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BalanceView",
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    },
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    modeClass() {
+      if (this.mode === "blue") return "balance-view-xy";
+      return "balance-view-hh";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.balance-view {
+  width: 345px;
+  height: 84px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  &-text {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 30px;
+    font-size: 24px;
+    & > label {
+      color: #fff;
+    }
+    & > span {
+      color: #ffe26c;
+    }
+  }
+  &-btn {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin-right: 14px;
+  }
+}
+.balance-view-xy {
+  background-image: url(../../assets/images/yue_bg.png);
+}
+.balance-view-hh {
+  background-image: url(../../assets/images/yue_bg_g.png);
+}
+</style>

src/components/bottomView/index.js

@@ -0,0 +1,7 @@
+import BottomView from "./main";
+
+BottomView.install = function(Vue) {
+  Vue.component(BottomView.name, BottomView);
+};
+
+export default BottomView;

src/components/bottomView/lotteryBtn.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="lottery-btn" :class="modeClass"></div>
+</template>
+
+<script>
+export default {
+  name: "LotteryBtn",
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    }
+  },
+  computed: {
+    modeClass() {
+      if (this.mode === "blue") return "lottery-btn-xy";
+      return "lottery-btn-hh";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.lottery-btn {
+  width: 262px;
+  height: 115px;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.lottery-btn-xy {
+  background-image: url(../../assets/images/cj_btn.png);
+}
+.lottery-btn-hh {
+  background-image: url(../../assets/images/cj_btn_g.png);
+}
+</style>

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>

src/components/bottomView/ticketView.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="ticket-view" :class="modeClass">
+    <div class="ticket-view-main">
+      <label>{{ label }}</label>
+      <p>({{ desc }})</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TicketView",
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    desc: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    modeClass() {
+      let str = "";
+      if (this.mode === "blue") {
+        str = "ticket-view-xy";
+      } else {
+        str = "ticket-view-hh";
+      }
+      if (this.active) str += "-active";
+      return str;
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ticket-view {
+  width: 130px;
+  height: 110px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &-main {
+    // width: 104px;
+    width: 100%;
+    height: 84px;
+    color: #7525b6;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    & > label {
+      font-size: 26px;
+      font-weight: bold;
+      // -webkit-transform: scale(0.5);
+      // transform: scale(0.5);
+    }
+    & > p {
+      font-size: 20px;
+      -webkit-transform: scale(0.7);
+      transform: scale(0.7);
+    }
+  }
+}
+.ticket-view-xy {
+  background-image: url(../../assets/images/tikect_bg_nomal.png);
+}
+.ticket-view-hh {
+  background-image: url(../../assets/images/tikect_bg_nomal_g.png);
+  .ticket-view-main {
+    color: #8b3410;
+  }
+}
+.ticket-view-xy-active {
+  background-image: url(../../assets/images/tikect_bg_active.png);
+}
+.ticket-view-hh-active {
+  background-image: url(../../assets/images/tikect_bg_active_g.png);
+  .ticket-view-main {
+    color: #8b3410;
+  }
+}
+</style>