百科全书

src/ui/desc.vue

@@ -1,14 +1,134 @@
 <template>
-    <div id="desc"></div>
+    <div id="desc">
+        <div id="tools">
+            <span class="button-text" @click="exit"
+                ><left-outlined /> 返回游戏</span
+            >
+        </div>
+        <div id="desc-main">
+            <Scroll id="desc-left">
+                <div id="desc-list">
+                    <span
+                        v-for="(data, k) in desc"
+                        class="selectable desc-item"
+                        :selected="selected === k"
+                        @click="selected = k"
+                        >{{ data.text }}</span
+                    >
+                </div>
+            </Scroll>
+            <a-divider
+                id="divider"
+                :type="isMobile ? 'horizontal' : 'vertical'"
+            ></a-divider>
+            <div id="desc-right">
+                <Scroll><span v-html="content"></span></Scroll>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import desc from '../data/desc.json';
+import { LeftOutlined } from '@ant-design/icons-vue';
+import Scroll from '../components/scroll.vue';
+import { has } from '../plugin/utils';
+import { isMobile } from '../plugin/use';
+
+type DescKey = keyof typeof desc;
+
+const selected = ref(Object.keys(desc)[0] as DescKey);
+
+function exit() {
+    core.plugin.descOpened.value = false;
+}
+
+const content = computed(() => {
+    return desc[selected.value].desc
+        .map((v, i, a) => {
+            if (/^\d+\./.test(v)) return `${'&nbsp;'.repeat(4)}${v}`;
+            else if (
+                (has(a[i - 1] && v !== '<br>') && a[i - 1] === '<br>') ||
+                i === 0
+            ) {
+                return `${'&nbsp;'.repeat(8)}${v}`;
+            } else return v;
+        })
+        .join('');
+});
 </script>
 
 <style lang="less" scoped>
 #desc {
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-size: 2.7vh;
+    font-family: 'normal';
+    user-select: none;
+}
+
+#desc-main {
+    width: 80%;
+    height: 80%;
+    display: flex;
+    justify-content: center;
+}
+
+#desc-left {
+    flex-basis: 30%;
+}
+
+#desc-list {
+    display: flex;
+    flex-direction: column;
+}
+
+#desc-right {
+    flex-basis: 70%;
+}
+
+#divider {
+    height: 100%;
+}
+
+.desc-item {
+    padding: 1% 3% 1% 3%;
+}
+
+#tools {
+    width: 100%;
+    font-family: 'normal';
+    font-size: 3.2vh;
+    height: 5vh;
+    position: fixed;
+    left: 10vw;
+    top: 5vh;
+}
+
+@media screen and (max-width: 600px) {
+    #desc-main {
+        flex-direction: column;
+        width: 90%;
+        height: 75%;
+    }
+
+    #divider {
+        height: auto;
+        width: 100%;
+        margin: 5% 0 5% 0;
+    }
+
+    #desc-left {
+        height: 40%;
+    }
+
+    #desc-right {
+        height: 50%;
+    }
 }
 </style>

src/ui/settings.vue

@@ -18,7 +18,10 @@
                     >
                 </div>
             </Scroll>
-            <a-divider id="divider" type="vertical"></a-divider>
+            <a-divider
+                id="divider"
+                :type="isMobile ? 'horizontal' : 'vertical'"
+            ></a-divider>
             <div id="setting-right">
                 <Scroll style="height: 100%">
                     <span
@@ -39,6 +42,7 @@ import settingInfo from '../data/settings.json';
 import { type } from '../plugin/utils';
 import Scroll from '../components/scroll.vue';
 import { LeftOutlined } from '@ant-design/icons-vue';
+import { isMobile } from '../plugin/use';
 
 type Settings = typeof settingInfo;
 
@@ -61,7 +65,7 @@ function exit() {
     justify-content: center;
     align-items: center;
     font-family: 'normal';
-    font-size: 24px;
+    font-size: 2.7vh;
     user-select: none;
 }
 
@@ -84,10 +88,12 @@ function exit() {
 
 #setting-left {
     flex-basis: 40%;
+    height: 100%;
 }
 
 #setting-right {
     flex-basis: 60%;
+    height: 100%;
 }
 
 #divider {
@@ -97,10 +103,32 @@ function exit() {
 #tools {
     width: 100%;
     font-family: 'normal';
-    font-size: 1.7em;
+    font-size: 3.2vh;
     height: 5vh;
     position: fixed;
     left: 10vw;
-    top: 10vh;
+    top: 5vh;
+}
+
+@media screen and (max-width: 600px) {
+    #settings-main {
+        flex-direction: column;
+        width: 90%;
+        height: 75%;
+    }
+
+    #divider {
+        height: auto;
+        width: 100%;
+        margin: 5% 0 5% 0;
+    }
+
+    #setting-left {
+        height: 40%;
+    }
+
+    #setting-right {
+        height: 50%;
+    }
 }
 </style>