feat:更新

src/components/topButton/index.js

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

src/components/topButton/large.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="top-button-large" :class="buttonClass">
+    <div class="top-button-large-touch"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LargeTopButton",
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    }
+  },
+  computed: {
+    buttonClass() {
+      if (this.mode === "blue") return "top-button-xy";
+      return "top-button-hh";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.top-button-large {
+  width: 276px;
+  height: 107px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  &-touch {
+    width: 100%;
+    height: 96px;
+    cursor: pointer;
+  }
+}
+.top-button-hh {
+  background-image: url(../../assets/images/hh_btn_g.png);
+}
+.top-button-xy {
+  background-image: url(../../assets/images/xy_btn.png);
+}
+</style>

src/components/topButton/main.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="top-button">
+    <large-top-button :mode="mode"></large-top-button>
+
+    <small-top-button :mode="mode"></small-top-button>
+  </div>
+</template>
+
+<script>
+import largeTopButton from "./large.vue";
+import smallTopButton from "./small.vue";
+export default {
+  name: "TopButton",
+  components: {
+    largeTopButton,
+    smallTopButton
+  },
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    }
+  },
+  computed: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.top-button {
+  display: flex;
+  width: 560px;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin: 0 auto;
+}
+</style>

src/components/topButton/small.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="top-button-small" :class="buttonClass">
+    <div class="top-button-small-touch"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SmallTopButton",
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    }
+  },
+  computed: {
+    buttonClass() {
+      if (this.mode === "blue") return "top-button-hh";
+      return "top-button-xy";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.top-button-small {
+  width: 244px;
+  height: 78px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  &-touch {
+    width: 100%;
+    height: 68px;
+    cursor: pointer;
+  }
+}
+.top-button-hh {
+  background-image: url(../../assets/images/hh_btn.png);
+}
+.top-button-xy {
+  background-image: url(../../assets/images/xy_btn_g.png);
+}
+</style>