complete none-moe page i18n

src/language/en.ts

@@ -64,4 +64,11 @@ export default {
     surplusStatus: 'Surplus',
     surplusAmount: 'Surplus Amount',
   },
+  nonMoe: {
+    log: 'Non-moe Record',
+    title: 'All the non-moe behavior were recorded here, please do not do that',
+    reason: 'reason',
+    consequence: 'consequence',
+    moemoepoint: 'moemoepoint'
+  },
 }

src/language/zh.ts

@@ -64,4 +64,11 @@ export default {
     surplusStatus: '盈余',
     surplusAmount: '盈余金额',
   },
+  nonMoe: {
+    log: '不萌记录',
+    title: '这里记录了迄今为止所有被处罚的记录，希望大家不要这样做',
+    reason: '原因',
+    consequence: '后果',
+    moemoepoint: '萌萌点'
+  },
 }

src/views/non-moe/NonMoe.vue

@@ -12,27 +12,20 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
     <!-- 内容区容器 -->
     <div class="container">
       <!-- 页面标题 -->
-      <div class="title">不萌记录</div>
+      <div class="title">{{ $t('nonMoe.log') }}</div>
       <!-- 文章部分 -->
       <div class="article">
         <!-- 文章标题 -->
         <div class="article-title">
-          这里记录了迄今为止所有被处罚的记录，希望大家不要这样做
+          {{ $t('nonMoe.title') }}
         </div>
         <!-- 内容区容器 -->
         <div class="content">
-          <!-- 原因、处理方式 -->
-          <div class="log-title">
-            <span>原因</span>
-            <span>后果</span>
-          </div>
-          <div>
           <!-- 所有的记录 -->
           <Log />
         </div>
       </div>
     </div>
-    </div>
     <!-- 版权 -->
     <KUNGalgameFooter style="margin: 20px auto" />
   </div>
@@ -72,7 +65,9 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   /* 字体竖直方向分布 */
   font-size: 30px;
   padding: 30px;
-  width: 30px;
+  width: 100px;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -81,7 +76,8 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 }
 /* 文章部分 */
 .article {
-  width: 90%;
+  width: 600px;
+  flex-shrink: 0;
   background-color: $kungalgame-trans-white-3;
   border-left: 1px solid $kungalgame-red-4;
   display: flex;
@@ -102,30 +98,16 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   overflow-y: scroll;
   padding: 0 10px;
   box-sizing: border-box;
-}
-/* 滚动条的样式 */
-.content::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     display: inline;
     width: 4px;
     height: 0;
     background-color: $kungalgame-red-2;
     border-radius: 2px;
   }
-.content::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     background: $kungalgame-blue-4;
     border-radius: 2px;
   }
-/* 原因、处理方式 */
-.log-title {
-  top: 0;
-  padding-top: 20px;
-  height: 40px;
-  /* 相对于标题粘滞定位 */
-  position: sticky;
-  display: flex;
-  justify-content: space-between;
-}
-.copyright {
-  margin: 10px auto;
 }
 </style>

src/views/non-moe/components/Log.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { log } from '../log'
+import { log } from './log'
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import { log } from '../log'
     <!-- 原因 -->
     <div class="reason">{{ kun.reason }}</div>
     <!-- 后果 -->
-    <div class="result">萌萌点 - {{ kun.result }}</div>
+    <div class="result">{{ $t('nonMoe.moemoepoint') }} - {{ kun.result }}</div>
   </div>
 </template>