格式化

pages/chat/index.vue

@@ -1,22 +1,42 @@
 <template lang="pug">
 .chat-index
+  .ceremony
     .circumscription
+      .flex
+        .index
           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
+        .content
-    .circumscription
-      span chat
           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,6 +1,8 @@
 <template lang="pug">
 .docs-index
-  .docs.circumscription
+  .ceremony
+    .circumscription
+      .docs
         .outline
           ul
             li(v-for="item in list", :key="item._id")
@@ -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%