:art: 百科 分为两栏

app/term/term.js

@@ -164,7 +164,6 @@ function term_get_word_to_div(strWord, div, callback) {
       format: "json",
     },
     function (data, status) {
-      let html = "";
       if (status == "success") {
         try {
           let result = JSON.parse(data);
@@ -172,15 +171,15 @@ function term_get_word_to_div(strWord, div, callback) {
           if (result.length > 0) {
             let type = new Array();
             let authors = new Array();
-            for (x in result) {
-              if (result[x].tag == "") {
-                result[x].tag = "_null_";
+            for (const iterator of result) {
+              if (iterator.tag == "") {
+                iterator.tag = "_null_";
               }
-              if (type[result[x].tag] == null) {
-                type[result[x].tag] = new Array();
+              if (type[iterator.tag] == null) {
+                type[iterator.tag] = new Array();
               }
-              type[result[x].tag].push(result[x].meaning);
-              authors[result[x].owner] = 1;
+              type[iterator.tag].push(iterator.meaning);
+              authors[iterator.owner] = 1;
             }
 
             html += "<div class='term_word_head'>";
@@ -205,6 +204,8 @@ function term_get_word_to_div(strWord, div, callback) {
             html += "</div>";
             html += "</div>";
 
+            html += "<div id='term_list_div' style='display:flex;'>";
+            html += "<div id='term_list'>";
             for (x in result) {
               html += "<div class='term_block'>";
               html += "<div class='term_block_bar'>";
@@ -250,6 +251,26 @@ function term_get_word_to_div(strWord, div, callback) {
               '<div ><input type="input" value="" placeholder="language"/></div>';
             html += "<div ><textarea></textarea></div>";
           }
+
+          html += "</div>";
+          html += "<div id='term_list_right' >";
+
+          html += '<div class="fun_frame">';
+          html += '<div class="title">Language</div>';
+          html += '<div class="content" style="max-height:10em;">';
+          html += '<div><a href="">All</a></div>';
+          html += "</div>";
+          html += "</div>";
+
+          html += '<div class="fun_frame">';
+          html += '<div class="title">Translation</div>';
+          html += '<div class="content" style="max-height:10em;">';
+          html += '<div><a href="">All</a></div>';
+          html += "</div>";
+          html += "</div>";
+
+          html += "</div>";
+          html += "</div>";
           $("#" + div).html(html);
 
           note_refresh_new();

app/wiki/wiki.php

@@ -103,9 +103,10 @@ echo "wiki_load_word('{$_get_word}')";
 	}
 	note{
 		background-color: #80808014;
-    padding: 0.5em 0.8em;
-    margin-bottom: 0.4em;
-    border-radius: 5px;
+		padding: 0.5em 0.8em;
+		margin-bottom: 0.4em;
+		border-radius: 5px;
+		display:block;
 	}
 	note>.tran{
 		color: #5c5c5c;
@@ -159,6 +160,38 @@ echo "wiki_load_word('{$_get_word}')";
 	.term_link {
     cursor: pointer;
 	}
+	#wiki_contents{
+		padding: 0 1em;
+    max-width: 1280px;
+    margin-left: auto;
+    margin-right: auto;
+	}
+#term_list_right{
+	width: 25em;
+}
+#term_list{
+	width: 100%;
+    padding: 0.5em;
+}
+#term_list_div{
+	display: flex;
+    justify-content: space-between;
+}
+	.fun_frame {
+		border: 1px solid gray;
+		margin-right: 10px;
+		margin-bottom: 10px;
+		border-radius: 5px;
+	}
+	.fun_frame>.title{
+		border-bottom: 1px solid gray;
+		padding:6px;
+	}
+	.fun_frame>.content{
+		padding:6px;
+		max-height:6em;
+		overflow-y: scroll;
+	}
 }
 
 	</style>