pref: UpdateLog page adjust mobile

src/views/update-log/UpdateLog.vue

@@ -6,25 +6,21 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 
 <template>
   <div class="root">
-    <!-- 内容区容器 -->
     <div class="container">
-      <!-- 内容区 -->
       <div class="content">
-        <!-- 下个版本计划更新 -->
+        <!-- Next Version-->
         <div class="next-ver">
-          <!-- 标题 -->
           <div class="title">{{ $tm('update.next') }}</div>
           <Next />
         </div>
-        <!-- 历史版本 -->
+
+        <!-- History Version -->
         <div class="history-ver">
-          <!-- 标题 -->
           <div class="title">{{ $tm('update.history') }}</div>
-          <!-- 历史更新的内容 -->
           <History />
         </div>
       </div>
-      <!-- 版权 -->
+
       <KUNGalgameFooter style="display: block" />
     </div>
   </div>
@@ -32,23 +28,21 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 
 <style lang="scss" scoped>
 .root {
-  height: 100vh;
+  height: calc(100vh - 65px);
   display: flex;
   flex-direction: column;
   min-width: 1000px;
   min-height: 650px;
 }
-/* 内容区容器 */
+
 .container {
-  /* 固定宽高 */
-  height: 500px;
-  width: 900px;
-  /* 相对于版权定位 */
+  height: 60vh;
+  width: 80vw;
+  max-height: 500px;
+  max-width: 900px;
   position: relative;
-  /* 居中 */
   margin: auto;
   background-color: var(--kungalgame-trans-white-5);
-  /* 模糊背景 */
   backdrop-filter: blur(5px);
   border-radius: 7px;
   display: flex;
@@ -59,17 +53,17 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   border: 1px solid var(--kungalgame-blue-1);
   box-shadow: var(--shadow);
 }
-/* 内容区 */
+
 .content {
   width: 100%;
   height: 100%;
   display: flex;
 }
-/* 下个版本计划更新 */
+
 .next-ver {
   width: 50%;
 }
-/* 标题 */
+
 .title {
   height: 40px;
   font-size: 27px;
@@ -78,9 +72,28 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   align-items: center;
   margin-bottom: 20px;
 }
-/* 历史版本 */
+
 .history-ver {
   height: 100%;
   width: 50%;
 }
+
+@media (max-width: 700px) {
+  .root {
+    min-width: 100%;
+    min-height: 100%;
+  }
+  .container {
+    height: 100%;
+    width: 95%;
+    max-height: 100%;
+  }
+  .content {
+    flex-direction: column;
+  }
+  .next-ver,
+  .history-ver {
+    width: 100%;
+  }
+}
 </style>

src/views/update-log/components/History.vue

@@ -14,16 +14,12 @@ onBeforeMount(async () => {
 
 <template>
   <div class="article-history">
-    <!-- 历史更新列表 -->
     <ul class="history-list" v-if="topics.length">
-      <!-- 单个项目 -->
       <li v-for="kun in topics" :key="kun.upid">
-        <!-- 更新内容 -->
-        <!-- <div v-for="yuyu in kun.describe" :key="yuyu.index"> -->
         <div>
           <p>{{ kun.description }}</p>
         </div>
-        <!-- 更新时间和版本 -->
+        <!-- update time and version -->
         <div class="time">
           <span>{{ kun.time }} - Version {{ kun.version }}</span>
         </div>
@@ -33,20 +29,19 @@ onBeforeMount(async () => {
 </template>
 
 <style lang="scss" scoped>
-/* 历史更新的内容 */
 .article-history {
   border-left: 1px solid var(--kungalgame-blue-4);
   height: 75%;
   padding: 10px;
 }
-/* 历史更新列表 */
+
 .history-list {
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
-  /* y 轴溢出滚动 */
   overflow-y: scroll;
+
   &::-webkit-scrollbar {
     display: inline;
     width: 4px;
@@ -56,12 +51,11 @@ onBeforeMount(async () => {
     background: var(--kungalgame-blue-4);
     border-radius: 2px;
   }
-  /* 兼容火狐 */
+
   scrollbar-width: thin;
   scrollbar-color: var(--kungalgame-blue-4) var(--kungalgame-blue-1); /* Firefox 64+ */
 }
 
-/* 单个更新历史 */
 li {
   margin-top: 20px;
   display: flex;
@@ -72,11 +66,11 @@ li {
     margin-top: 10px;
   }
 }
-/* 单条更新内容 */
+
 p {
   margin: 5px 0;
 }
-/* 更新时间和版本 */
+
 .time {
   display: flex;
   justify-content: end;