书签列表显示样式

ruoyi-ui/src/router/index.js

@@ -185,6 +185,14 @@ export const constantRoutes = [
           title: '测试页面',icon:'user',
           requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
         },
+      },{
+        path: '/NqQuillEdit',
+        name: 'NqQuillEdit',
+        component: resolve => require(['../views/bookmark/common/NqQuillEdit.vue'], resolve),
+        meta:{
+          title: 'Quill编辑器',icon:'user',
+          requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
+        },
       }
     ],
 

ruoyi-ui/src/views/bookmark/bookmark/index.vue

@@ -788,6 +788,8 @@
 
   .info {
     font-size: 12px;
+    display: flex;
+    align-items: center;
   }
 
   .bookmark-icon {
@@ -797,9 +799,9 @@
   }
 
   .bookmark-icon img {
-    width: 14px;
+    width: 15px;
-    height: 14px;
+    height: 15px;
-    vertical-align: middle;
+
   }
 
   .filter-tbar {
@@ -890,7 +892,8 @@
   .listhint {
     width: 100%;
     text-align: center;
-    background: #dcdfe682;
+    color: #808080;
+    /*background: #dcdfe682;*/
     font-weight: 600;
   }
 
@@ -921,7 +924,7 @@
     /*超出部分隐藏*/
     font-size: 17px;
     font-weight: 600;
-    margin-top: 2px;
+    margin-top: 10px;
     margin-bottom: 2px;
   }
 
@@ -1004,4 +1007,13 @@
 
   }
 
+
+  .bookmark {
+    height: 70px;
+    /*border-bottom: 1px solid #D9D9D9;*/
+  }
+
+
+
+
 </style>

ruoyi-ui/src/views/bookmark/common/NqQuillEdit.vue

@@ -0,0 +1,53 @@
+
+<template>
+  <div class="edit_container">
+    <quill-editor
+      v-model="content"
+      ref="myQuillEditor"
+      :options="editorOption"
+      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
+      @change="onEditorChange($event)">
+    </quill-editor>
+
+
+
+    <svg-icon name="logo" class="menu-icon" color="#fff" width="16" height="16"></svg-icon>
+<!--    <IconSelect></IconSelect>-->
+  </div>
+</template>
+
+
+
+<script>
+
+
+  import quillEditor from "../../../components/Editor";
+  import SvgIcon from "../../../components/SvgIcon";
+  import IconSelect from "../../../components/IconSelect";
+
+
+  export default {
+    components: {
+      quillEditor,SvgIcon,IconSelect
+    },
+    data() {
+      return {
+        content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
+        editorOption: {}
+      }
+    },
+    methods: {
+      onEditorReady(quillEditor) { // 准备编辑器
+
+      },
+      onEditorBlur(){}, // 失去焦点事件
+      onEditorFocus(){}, // 获得焦点事件
+      onEditorChange(){}, // 内容改变事件
+    },
+    computed: {
+      editor() {
+        return this.$refs.myQuillEditor.quill;
+      },
+    }
+  }
+</script>

ruoyi-ui/src/views/bookmark/index/index.vue

@@ -33,6 +33,7 @@
             <div class="aside-title" @click="importHtml"><i class="el-icon-s-platform"></i><span>导入书签</span></div>
             <div class="aside-title"><i class="el-icon-s-comment"></i><span>意见反馈</span></div>
             <div class="aside-title" @click="ceshi"><i class="el-icon-s-comment"></i><span>测试页面</span></div>
+            <div class="aside-title" @click="NqQuillEdit"><i class="el-icon-s-comment"></i><span>NqQuillEdit编辑器</span></div>
             <div class="aside-title " style="margin-bottom: 100px"><i class="el-icon-s-grid"></i><span>其他设置</span></div>
 
           </div>
@@ -1285,6 +1286,13 @@
         })
 
       },
+      /**跳转NqQuillEdit测试页面**/
+      NqQuillEdit: function () {
+        this.$router.push({
+          path: "/NqQuillEdit",
+        })
+
+      },
 
 
       editBookmark: function (e) {
@@ -1752,9 +1760,7 @@
   }
 
 
-  .bookmark {
+
-    height: 65px;
-  }
 
 
   .sousouleft-switch {