标签显示

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

@@ -97,7 +97,7 @@
                   </div>
                   <div class="bookmark-official">{{bm.urls}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.createTime|changeTime}}</div>
                   <div class="bookmark-time" v-for="t in bm.sqTags">
-                    <el-tag class="bookmark-list-tag" style="background-color: #7a6df0;color: #ffffff" data-bookmarkId="t.bookmarkId" data-tagId="t.tagId}" size="mini">{{t.name}}</el-tag>
+                    <el-tag class="bookmark-list-tag" data-bookmarkId="t.bookmarkId" data-tagId="t.tagId}" size="mini">{{t.name}}</el-tag>
 
                   </div>
 
@@ -661,6 +661,8 @@ margin-right: 4px;
   }
   .bookmark-list-tag{
     margin-left: 4px;
+    color: #5094d5;
+    background-color: #fff;
   }
 
 </style>

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

@@ -80,10 +80,25 @@
       </div>
 
         <div class="sousou-input">
+          <el-popover
+            placement="bottom"
+            width="400"
+            trigger="click"
+            :visible-arrow="false"
+            popper-class="popover-suosou"
+          >
 
-        <el-input placeholder="请输入书签名字" v-model="sousou" size="small">
+              <div v-for="o in 4" :key="o">
+                {{'列表内容 ' + o }}
+              </div>
+
+        <el-input slot="reference" placeholder="请输入书签名字" v-model="sousou" size="small">
         <i slot="prefix" class="el-input__icon el-icon-search"></i>
       </el-input>
+
+
+          </el-popover>
+
         </div>
 
         <div class="sousouright-icon"><el-badge :value="5" :max="99" class="item" ><i class="el-icon-message-solid" style="font-size: 17px;"></i></el-badge></div>
@@ -789,6 +804,7 @@
         })
 
       },
+      
 
     },
     mounted(){
@@ -1296,6 +1312,14 @@
     position: fixed;
     bottom: 0;
   }
+  .popover-suosou{
+    width: 70%!important;
+    top: 40px;
+    left: 72px;
+  }
+
+
+
 
 
 </style>