fix: 富文本样式修改

src/App.vue

@@ -54,3 +54,26 @@ export default Vue.extend({
   },
 })
 </script>
+<style lang="less">
+
+.vhtml{
+  h1 {
+   font-size: 1.4rem !important;
+   font-weight: 300 !important;
+   line-height: 1.5rem !important;
+   letter-spacing: -0.01562em !important;
+ }
+ h2 {
+   font-size: 1.2rem !important;
+   font-weight: 300 !important;
+   line-height: 1.5rem !important;
+   letter-spacing: -0.01562em !important;
+ }
+ h3 {
+   font-size: 1rem !important;
+   font-weight: 300 !important;
+   line-height: 1.5rem !important;
+   letter-spacing: -0.01562em !important;
+ }
+}
+</style>
\ No newline at end of file

src/assets/sass/editor.scss

+
+
 .editor {
   .ProseMirror{
     min-height: 400px;
@@ -6,8 +8,6 @@
     outline: 3px solid #68cef8;
   }
   position: relative;
-  max-width: 70%;
-  margin: 0 auto 5rem auto;
 
   &__content {
     overflow-wrap: break-word;

src/components/Editor/index.vue

 <template>
   <div class="border border-gray-300 p-3 rounded" >
     <EditorMenuBar :editor="editor" />
-    <editor-content :editor="editor" class="editor__content" />
+    <editor-content :editor="editor" class="editor__content vhtml" />
   </div>
 </template>
 

src/views/Root/Activity/detail.vue

@@ -4,7 +4,7 @@
     {{ $route.query.id }}
     <p class="text-gray-400">新增时间：{{ time | formatDate }}</p>
     <img v-if="imageUrl" :src="imageUrl" class="mx-auto my-5" />
-    <p class="text-left p-5" v-html="content">{{ content }}</p>
+    <div class="text-left p-5 vhtml" v-html="content">{{ content }}</div>
   </div>
 </template>
 

src/views/Root/News/detail.vue

@@ -2,8 +2,7 @@
   <div>
     <p class=" text-2xl font-bold mb-5 ">{{ title }}</p>
     <p class=" text-gray-400">新增时间：{{ time | format }} <span class=" ml-2">作者：{{ name }}</span></p>
-    <div class="text-left p-5" v-html="content"></div>
-    <!-- <p class="text-left p-5">{{content}}</p> -->
+    <div class="text-left p-5 vhtml" v-html="content"></div>
   </div>
 </template>