From 38c39dca338bb76ed3c363b3d579bc08f6a0e646 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Fri, 4 Aug 2023 15:43:48 +0800
Subject: [PATCH] feat: non-moe page time and username

---
 src/views/non-moe/components/Log.vue | 54 +++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/views/non-moe/components/Log.vue b/src/views/non-moe/components/Log.vue
index 3eec7fd5..c00eecda 100644
--- a/src/views/non-moe/components/Log.vue
+++ b/src/views/non-moe/components/Log.vue
@@ -1,14 +1,26 @@
 <script setup lang="ts">
 import { log } from './log'
+import { Icon } from '@iconify/vue'
 </script>
 
 <template>
   <!-- 单个记录 -->
   <div class="log" v-for="kun in log" :key="kun.index">
+    <!-- 用户 -->
+    <div class="kungalgamer">@ <span>啊这可海星</span></div>
     <!-- 原因 -->
     <div class="reason">{{ kun.reason }}</div>
     <!-- 后果 -->
-    <div class="result">{{ $t('nonMoe.moemoepoint') }} - {{ kun.result }}</div>
+    <div class="footer">
+      <div class="time">
+        <Icon class="hourglass" icon="eos-icons:hourglass" />
+        <span>2019 / 10 / 7</span>
+      </div>
+      <div class="result">
+        <Icon class="warning" icon="line-md:alert" />
+        <span>{{ $t('nonMoe.moemoepoint') }} - {{ kun.result }}</span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -18,18 +30,52 @@ import { log } from './log'
   margin: 20px 40px;
   border-bottom: 1px solid var(--kungalgame-blue-4);
 }
+
+.kungalgamer {
+  margin-bottom: 10px;
+  font-weight: bold;
+  span {
+    cursor: pointer;
+    color: var(--kungalgame-blue-5);
+    border-bottom: 2px solid var(--kungalgame-trans-white-9);
+    &:hover {
+      border-bottom: 2px solid var(--kungalgame-blue-5);
+    }
+  }
+}
+
 /* 原因 */
 .reason {
-  width: 80%;
+  width: 100%;
   padding-left: 5px;
   border-left: 2px solid var(--kungalgame-blue-4);
 }
+.footer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 17px;
+}
+
 /* 后果 */
+.time {
+  display: flex;
+  align-items: center;
+  .hourglass {
+    margin-right: 7px;
+    font-size: 17px;
+    color: var(--kungalgame-purple-4);
+  }
+}
 .result {
   border-right: 4px solid var(--kungalgame-red-4);
   padding-right: 5px;
-  margin-top: 10px;
   display: flex;
-  justify-content: end;
+  align-items: center;
+  .warning {
+    margin-right: 7px;
+    font-size: 17px;
+    color: var(--kungalgame-red-3);
+  }
 }
 </style>