diff --git a/src/components/boboEnterBtn/index.js b/src/components/boboEnterBtn/index.js
new file mode 100644
index 0000000..4e13ee0
--- /dev/null
+++ b/src/components/boboEnterBtn/index.js
@@ -0,0 +1,7 @@
+import BoboEnterBtn from "./main";
+
+BoboEnterBtn.install = function(Vue) {
+  Vue.component(BoboEnterBtn.name, BoboEnterBtn);
+};
+
+export default BoboEnterBtn;
diff --git a/src/components/boboEnterBtn/main.vue b/src/components/boboEnterBtn/main.vue
new file mode 100644
index 0000000..669d066
--- /dev/null
+++ b/src/components/boboEnterBtn/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <button class="bobo-enter-btn" :class="positionClass">
+    <span>
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "BoboEnterBtn",
+  props: {
+    position: {
+      type: String,
+      default: "left"
+    },
+    text: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    positionClass() {
+      return `bobo-enter-btn-${this.position}`;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.bobo-enter-btn {
+  width: 108px;
+  height: 59px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: none;
+  background-color: transparent;
+  &-left {
+    background-image: url(../../assets/images/bobo/but_rk_bg.png);
+  }
+  &-right {
+    background-image: url(../../assets/images/bobo/but_rk_bg2.png);
+  }
+  & > span {
+    color: #ffffff;
+    opacity: 0.8;
+    font-size: 24px;
+  }
+}
+</style>
diff --git a/src/components/boboEnterView/index.js b/src/components/boboEnterView/index.js
new file mode 100644
index 0000000..9d78391
--- /dev/null
+++ b/src/components/boboEnterView/index.js
@@ -0,0 +1,7 @@
+import BoboEnterView from "./main";
+
+BoboEnterView.install = function(Vue) {
+  Vue.component(BoboEnterView.name, BoboEnterView);
+};
+
+export default BoboEnterView;
diff --git a/src/components/boboEnterView/main.vue b/src/components/boboEnterView/main.vue
new file mode 100644
index 0000000..953d5ba
--- /dev/null
+++ b/src/components/boboEnterView/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="bobo-enter-view">
+    <div class="bobo-enter-view-row">
+      <bobo-enter-Btn class="bobo-enter-view-button" position="left"
+        >数据</bobo-enter-Btn
+      >
+      <bobo-enter-Btn class="bobo-enter-view-button" position="right"
+        >记录</bobo-enter-Btn
+      >
+    </div>
+    <div class="bobo-enter-view-row">
+      <bobo-enter-Btn class="bobo-enter-view-button" position="left"
+        >排行榜</bobo-enter-Btn
+      >
+      <bobo-enter-Btn class="bobo-enter-view-button" position="right"
+        >奖品</bobo-enter-Btn
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import BoboEnterBtn from "../boboEnterBtn";
+export default {
+  name: "BoboEnterView",
+  components: {
+    BoboEnterBtn
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.bobo-enter-view {
+  width: 100%;
+  height: 172px;
+  &-row {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 54px;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  &-button {
+  }
+}
+</style>
diff --git a/src/components/boboLottery/boboYqView.vue b/src/components/boboLottery/boboYqView.vue
new file mode 100644
index 0000000..8ccc782
--- /dev/null
+++ b/src/components/boboLottery/boboYqView.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="bobo-yq-view">
+    <div class="bobo-yq-view-text"></div>
+    <div class="bobo-yq-view-btn">
+      <button></button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BoboYqView"
+};
+</script>
+
+<style lang="less" scoped>
+.bobo-yq-view {
+  width: 346px;
+  height: 59px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url(../../assets/images/bobo/gmcx_bg.png);
+  display: flex;
+  &-text {
+    flex: 1;
+  }
+  &-btn {
+    width: 46px;
+    height: 46px;
+    & > button {
+      width: 46px;
+      height: 46px;
+      background-repeat: no-repeat;
+      background-size: cover;
+      border: none;
+      background-color: transparent;
+      background-image: url(../../assets/images/bobo/but_add.png);
+      &:active {
+        background-image: url(../../assets/images/bobo/but_add_press.png);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/boboLottery/index.js b/src/components/boboLottery/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/boboLottery/main.vue b/src/components/boboLottery/main.vue
new file mode 100644
index 0000000..d0976da
--- /dev/null
+++ b/src/components/boboLottery/main.vue
@@ -0,0 +1,11 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: "BoboLottery"
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/bobo.vue b/src/views/bobo.vue
index dc97935..a3cbb01 100644
--- a/src/views/bobo.vue
+++ b/src/views/bobo.vue
@@ -1,23 +1,44 @@
 <template>
-  <div class="bobo"></div>
+  <div class="bobo">
+    <bobo-enter-view class="bobo-enter"></bobo-enter-view>
+
+    <button class="bobo-gz-button"></button>
+  </div>
 </template>
 
 <script>
+import boboEnterView from "@/components/boboEnterView";
 export default {
-  name: "Bobo"
+  name: "Bobo",
+  components: {
+    boboEnterView
+  }
 };
 </script>
 
 <style lang="less" scoped>
 .bobo {
-  padding: 20px 25px;
   height: 100%;
-  box-sizing: border-box;
   position: relative;
 
   background-color: #37179c;
   background-image: url(../assets/images/bobo/bobo_bg.png);
   background-repeat: no-repeat;
   background-size: 100%;
+  &-enter {
+    padding-top: 180px;
+  }
+  &-gz-button {
+    width: 78px;
+    height: 78px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border: none;
+    background-color: transparent;
+    background-image: url(../assets/images/bobo/but_rk_gz.png);
+    position: absolute;
+    top: 29px;
+    left: 25px;
+  }
 }
 </style>