diff --git a/src/App.vue b/src/App.vue
index 19c49b7..734c5fd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <router-view class="dark"></router-view>
+  <router-view class="container"></router-view>
   <div class="menu-wrapper">
     <span class="iconfont icon-settings" :class="{active: menuShow}" @click="menuShow = !menuShow"></span>
     <div class="menu-list" :style="{width: menuShow ? '180px' : '10px'}">
@@ -46,13 +46,18 @@ export default {
 <style lang="less">
 @import url('./assets/css/reset.less');
 @import url('./assets/css/iconfont.less');
-html, body, #app {
+html, body, #app, .container {
   height: 100%;
 }
 body {
+  font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
+}
+.dark {
   background-color: #000;
   color: #FFF;
-  font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
+}
+.light {
+  background-color: #f0eff4;
 }
 .btn-wrapper {
   text-align: center;
@@ -93,6 +98,7 @@ body {
     font-size: 50px;
     display: inline-block;
     background-color: #000;
+    color: #FFF;
     border-radius: 25px;
     transition: transform 0.6s;
     transition-timing-function: ease-out;
@@ -114,6 +120,7 @@ body {
     padding-top: 4px;
     background-color: #FFF;
     color: #000;
+    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 60%);
     z-index: 1;
     width: 180px;
     font-size: 12px;
diff --git a/src/views/Guide.vue b/src/views/Guide.vue
index 26f99e0..4fd69fd 100644
--- a/src/views/Guide.vue
+++ b/src/views/Guide.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="dark">
   <div class="text-wrapper center" :class="{hide: hideText}">
     <div class="text" v-for="(item,index) in guideText[guideIndex]" :key="index" v-text="item"></div>
   </div>
diff --git a/src/views/History.vue b/src/views/History.vue
index 6e22211..a8510af 100644
--- a/src/views/History.vue
+++ b/src/views/History.vue
@@ -1,13 +1,50 @@
 <template>
-  <div>这是历史记录页面</div>
+<div class="light">
+  <div class="title">
+    <div class="line"></div>
+    <div class="text">视迹</div>
+  </div>
+</div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      historyCardList: [],
+      dateList: []
+    }
+  },
+  async created() {
+    const history = JSON.parse(localStorage.getItem('card_history') || '[]')
+    if(history.length) {
+      this.historyCardList = await this.$http.post('/api/rainbow_card/card/list', history.map(item => item.num))
+      this.dateList = history.map(item => item.date)
+    }
+  }
 }
 </script>
 
-<style>
-
+<style lang="less" scoped>
+.title {
+  position: relative;
+  height: 60px;
+  margin: 0 40px;
+  > .line {
+    background-color: #b5b5b5;
+    height: 2px;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+  }
+  > .text {
+    position: absolute;
+    background: #FFF;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 13px 25px;
+    font-size: 18px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Introduce.vue b/src/views/Introduce.vue
index 357d21f..5fae9ef 100644
--- a/src/views/Introduce.vue
+++ b/src/views/Introduce.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="container">
+<div class="dark">
   <template v-if="isShowCard">
     <div class="card-show" :style="{backgroundColor: currentCard.rgb}">
       <div class="card-content">{{ currentCard.content }}</div>