diff --git a/package-lock.json b/package-lock.json
index 9e22669..52eac26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8020,6 +8020,11 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
+      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
diff --git a/package.json b/package.json
index d000cd3..5b19ec9 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "moment": "^2.22.2",
     "semantic-ui-css": "github:otakukaze/Semantic-UI-CSS#master",
     "semantic-ui-vue": "^0.2.11",
     "vue": "^2.5.17",
diff --git a/src/components/common/donate-bar.vue b/src/components/common/donate-bar.vue
index a749ec0..d408f6e 100644
--- a/src/components/common/donate-bar.vue
+++ b/src/components/common/donate-bar.vue
@@ -18,6 +18,8 @@
 <style lang="less" scoped>
 .main {
   width: 100%;
+  font-size: 1em;
+  font-weight: 900;
 
   .title {
     text-align: center;
@@ -80,6 +82,7 @@
 
 <script>
 import {toInt} from '@/tools'
+import moment from 'moment'
 export default {
   name: 'Donatebar',
   props: {
@@ -91,13 +94,22 @@ export default {
   data () {
     return {}
   },
+  methods: {
+    getDay: function (ts) {
+
+    }
+  },
   computed: {
     percent: function () {
       let p = Math.floor((this.now / this.max) * 100)
       return p >= 100 ? 100 : p
     },
     time: function () {
-      return new Date(toInt(this.timestamp, 0, 0)).toString()
+      let ts = toInt(this.timestamp, 0, 0)
+      let target = moment(ts)
+      let now = moment()
+      let str = now.to(target)
+      return str
     }
   }
 }
diff --git a/src/components/showDonateBar/index.vue b/src/components/showDonateBar/index.vue
new file mode 100644
index 0000000..0fbd45e
--- /dev/null
+++ b/src/components/showDonateBar/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="show-donate">
+    <DonateBar :title="title" :max="targetAmount" :timestamp="endDate" :now="total" />
+  </div>
+</template>
+
+<style lang="less">
+html,body,#app {
+  background-color: inherit;
+}
+</style>
+
+<style lang="less" scoped>
+.show-donate {
+  padding: 5px 10px;
+}
+</style>
+
+
+
+<script>
+import DonateBar from '@/components/common/donate-bar'
+import axios from 'axios'
+import {apiUrl, toInt} from '@/tools'
+export default {
+  name: 'PublicDonateBar',
+  components: {
+    DonateBar
+  },
+  data () {
+    return {
+      title: '',
+      targetAmount: 0,
+      endDate: 0,
+      total: 0
+    }
+  },
+  mounted () {
+    this.client = axios.create({
+      baseURL: apiUrl
+    })
+    this.getDonateInfo()
+    this.timer = setInterval(this.getDonateInfo.bind(this), 5000)
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  methods: {
+    getDonateInfo: function () {
+      this.client({
+        method: 'get',
+        url: `/api/twitch/channel/${this.$route.params.chid || ''}/opay/bar`
+      }).then(res => {
+        if ('data' in res && 'setting' in res.data && typeof res.data.setting === 'object') {
+          let tmp = res.data.setting
+          this.title = tmp.title || ''
+          this.targetAmount = tmp.target_amount || 0
+          let ets = 'end_date' in tmp ? new Date(tmp.end_date).getTime() : 0
+          this.endDate = ets
+          this.total = toInt(tmp.total, 0, 0) || 0
+        }
+      }).catch(err => {})
+    }
+  }
+}
+</script>
diff --git a/src/router.js b/src/router.js
index 4ae8478..a0ffcc1 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,8 @@ import ChannelList from '@/components/ControlPanel/channelList'
 import Channel from '@/components/ControlPanel/channel'
 import ChannelOpay from '@/components/ControlPanel/channel/opay'
 
+import PublicOpayBar from '@/components/showDonateBar'
+
 Vue.use(Router)
 
 export default new Router({
@@ -57,6 +59,11 @@ export default new Router({
           redirect: 'channels'
         }
       ]
+    },
+    {
+      path: '/donatebar/:chid/opay',
+      name: 'PublicOpayBar',
+      component: PublicOpayBar
     }
   ]
 })