feat: adjust UI components for better portrait view

3 files changed, 21 insertions, 15 deletions

diff --git a/site/src/views/index/Notepad/index.vue b/site/src/views/index/Notepad/index.vue
index c4c82aa..fde6e90 100644
--- a/site/src/views/index/Notepad/index.vue
+++ b/site/src/views/index/Notepad/index.vue
@@ -40,6 +40,14 @@ h3 {
 
 .details {
   flex: 1;
-  width: 30dvw;
+  width: 60dvw;
+  float: right;
+}
+
+@media screen and (orientation:landscape) {
+  .details {
+    flex: 1;
+    width: 30dvw;
+  }
 }
 </style>
diff --git a/site/src/views/index/Right.vue b/site/src/views/index/Right.vue
index f87d167..d76397e 100644
--- a/site/src/views/index/Right.vue
+++ b/site/src/views/index/Right.vue
@@ -2,7 +2,7 @@
 import Notepad from './Notepad/index.vue'
 import DocumentationIcon from '@/components/icons/IconDocumentation.vue'
 import { getChangeLog } from './Notepad/changelog'
-import { computed } from 'vue'
+
 
 export default {
   data() {
@@ -47,17 +47,13 @@ export default {
     }
   },
   beforeCreate() {
-    changeLogMessage.value.then((res) => {
+    getChangeLog().then(res => {
       this.changeLogMessage = res;
       this.change_page(this.mainPage);
-    });
+    })
   },
 }
 
-const changeLogMessage = computed(() => {
-    return getChangeLog();
-})
-
 </script>
 
 <template>
@@ -81,7 +77,7 @@ const changeLogMessage = computed(() => {
 
 .messageBar {
   display: flex;
-  height: 600px;
+  height: 500px;
   margin-top: 2rem;
   position: relative;
   flex-direction: row;
@@ -113,8 +109,8 @@ i {
   justify-content: center;
   font-size: 1.2rem;
   color: var(--color-text);
-  width: 32px;
-  height: 32px;
+  width: 50px;
+  height: 50px;
   border-radius: 8px;
 }
 
@@ -125,11 +121,11 @@ i {
   }
 
   i {
-    left: -26px;
+    left: -21px;
     position: absolute;
     border-radius: 8px;
-    width: 50px;
-    height: 50px;
+    width: 40px;
+    height: 40px;
   }
 
   // 黑线
diff --git a/site/src/views/index/index.vue b/site/src/views/index/index.vue
index 14759b8..003f752 100644
--- a/site/src/views/index/index.vue
+++ b/site/src/views/index/index.vue
@@ -26,7 +26,7 @@ export default {
       width="125" height="125" />
 
     <div class="wrapper">
-      <Left msg="饼在画了！" />
+      <Left msg="饼在画了!" />
     </div>
   </header>
 
@@ -41,6 +41,7 @@ export default {
 <style scoped>
 header {
   display: flex;
+  flex-flow: column;
   line-height: 1.5;
 }
 
@@ -52,6 +53,7 @@ header {
 @media screen and (orientation:landscape) {
   header {
     place-items: center;
+    flex-flow: row;
     padding-right: calc(var(--section-gap) / 2);
   }