diff --git a/html/src/app.js b/html/src/app.js
index 9aea8ea5..8476fabe 100644
--- a/html/src/app.js
+++ b/html/src/app.js
@@ -7600,6 +7600,45 @@ import gameLogService from './service/gamelog.js'
         });
     };
 
+    $app.methods.onlineFor = function (ctx) {
+        var timeToText = function (sec) {
+            var n = Number(sec);
+            if (isNaN(n)) {
+                return escapeTag(sec);
+            }
+            n = Math.floor(n / 1000);
+            var arr = [];
+            if (n < 0) {
+                n = -n;
+            }
+            if (n >= 86400) {
+                arr.push(`${Math.floor(n / 86400)}d`);
+                n %= 86400;
+            }
+            if (n >= 3600) {
+                arr.push(`${Math.floor(n / 3600)}h`);
+                n %= 3600;
+            }
+            if (n >= 60) {
+                arr.push(`${Math.floor(n / 60)}m`);
+                n %= 60;
+            }
+            if (n ||
+                arr.length === 0) {
+                arr.push(`${n}s`);
+            }
+            return arr.join(' ');
+        };
+
+        if (ctx.ref.state === 'online') {
+            return timeToText(Date.now() - ctx.ref.$online_for)
+        } else if (ctx.ref.$offline_for) {
+            return timeToText(Date.now() - ctx.ref.$offline_for)
+        } else {
+            return '-';
+        }
+    };
+
     $app = new Vue($app);
     window.$app = $app;
 })();
diff --git a/html/src/index.pug b/html/src/index.pug
index c8811acb..7a075c12 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -772,12 +772,9 @@ html
                                         span.extra(v-else style="color:#F56C6C") Deny
                                 .x-friend-item
                                     .detail
-                                        span.name(v-if="userDialog.ref.state != 'offline' && userDialog.ref.state != 'active' && userDialog.ref.state != ''") Online For
+                                        span.name(v-if="userDialog.ref.state === 'online'") Online For
                                         span.name(v-else) Offline For
-                                        span.extra
-                                            timer(v-if="userDialog.ref.state != 'offline' && userDialog.ref.state != 'active' && userDialog.ref.state != ''" :epoch="userDialog.ref.$online_for")
-                                            timer(v-else-if="userDialog.ref.$offline_for" :epoch="userDialog.ref.$offline_for")
-                                            span(v-else) -
+                                        span.extra(v-text="onlineFor(userDialog)")
                                 .x-friend-item
                                     .detail
                                         span.name Last Login