格式化

pages/chat/index.vue

@@ -1,22 +1,42 @@
 <template lang="pug">
 .chat-index
-  .circumscription
-    p Chat 频道列表 {{ chatlist.length }}
-    ul(v-if="chatlist.length")
-      li(v-for="item in chatlist", :key="item._id")
-        p {{ item }}
-          span {{ item.name }}
-          i(v-if="true") (已订阅)
-          i(v-else) (未订阅)
-    button(@click="create") 创建频道
   .ceremony
     .circumscription
-      span chat
-      DialogueList(:data="chatactive")
-      textarea.dialogue(v-model="chat.data", rows="12")
-      button.submit(@click="submit") 发表
+      .flex
+        .index
+          p Chat 频道列表 {{ chatlist.length }}
+          ul(v-if="chatlist.length")
+            li(v-for="item in chatlist", :key="item._id")
+              span {{ item.name }}
+              i(v-if="true") (已订阅)
+              i(v-else) (未订阅)
+          button(@click="create") 创建频道
+        .content
+          DialogueList(:data="chatactive")
+          textarea.dialogue(v-model="chat.data", rows="12")
+          button.submit(@click="submit") 发表
 </template>
 
+
+<style lang="sass">
+.chat-index
+  textarea.dialogue
+    display: block
+    width: 32rem
+    padding: 1rem
+    border: 1px solid #eee
+    border-radius: .5rem
+    box-sizing: border-box
+
+  .flex
+    display: flex
+    .index
+      width: 24rem
+    .content
+      flex: 1
+</style>
+
+
 <script>
 import socket from "@/assets/js/socket.js";
 
@@ -89,14 +109,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass">
-.chat-index
-  textarea.dialogue
-    display: block
-    width: 32rem
-    padding: 1rem
-    border: 1px solid #eee
-    border-radius: .5rem
-    box-sizing: border-box
-</style>

pages/docs.vue

@@ -1,18 +1,20 @@
 <template lang="pug">
 .docs-index
-  .docs.circumscription
-    .outline
-      ul
-        li(v-for="item in list", :key="item._id")
-          NuxtLink(:to="`/docs/${item._id}`") {{ item.name }}
-          i.fas.fa-sort-numeric-up-alt(
-            @click="settop(item, true)",
-            v-if="account.gid"
-          ) {{ item.top || 0 }}
-      .create-doc(v-if="account.gid")
-        button(@click="submit()") Create
-    .content
-      Nuxt
+  .ceremony
+    .circumscription
+      .docs
+        .outline
+          ul
+            li(v-for="item in list", :key="item._id")
+              NuxtLink(:to="`/docs/${item._id}`") {{ item.name }}
+              i.fas.fa-sort-numeric-up-alt(
+                @click="settop(item, true)",
+                v-if="account.gid"
+              ) {{ item.top || 0 }}
+          .create-doc(v-if="account.gid")
+            button(@click="submit()") Create
+        .content
+          Nuxt
 </template>
 
 <script>
@@ -64,18 +66,17 @@ export default {
 
 <style lang="sass">
 .docs-index
-  margin: 8rem 4rem
   .docs
     display: flex
     width: 100%
     .outline
       width: 12rem
       padding: 2rem
-      background: #ccefef
+      //background: #ccefef
     .content
       padding: 2rem
-      background: #ffefef
       flex: 1
+      //background: #ffefef
 
 input.title, textarea.data
   width: 100%

pages/docs/index.vue

@@ -1,4 +1,4 @@
 <template lang="pug">
 .docs-index
   p Hello World!
-</template>
+</template>