完成导航网

2021-11-14 17:33:59 +08:00 · 2021-11-14 17:33:59 +08:00 · 26dae529c1
commit 26dae529c1
parent 4e19e86f4f
19 changed files with 1361 additions and 479 deletions
--- a/ruoyi-ui/src/assets/icons/svg/ax.svg
+++ b/ruoyi-ui/src/assets/icons/svg/ax.svg
--- a/ruoyi-ui/src/assets/icons/svg/axRed.svg
+++ b/ruoyi-ui/src/assets/icons/svg/axRed.svg
--- a/ruoyi-ui/src/assets/theme/fonts/element-icons.ttf
+++ b/ruoyi-ui/src/assets/theme/fonts/element-icons.ttf
--- a/ruoyi-ui/src/assets/theme/fonts/element-icons.woff
+++ b/ruoyi-ui/src/assets/theme/fonts/element-icons.woff
--- a/ruoyi-ui/src/assets/theme/index.css
+++ b/ruoyi-ui/src/assets/theme/index.css
--- a/ruoyi-ui/src/components/BookmarkList/index.vue
+++ b/ruoyi-ui/src/components/BookmarkList/index.vue
@ -1,24 +1,36 @@
 <template>
  <div>
-<!--    STYLE="position: relative"-->
+
    <div v-for="bm in bookmarkList"  class="bookmark"    @click="winurl(bm.noteId,bm.tiymceUeditor,bm.bookmarkId,bm.url)" @mouseover="enter(bm.bookmarkId)" @mouseleave="leave()" >
+
+       <el-checkbox v-model="checked" v-show="seen&&bm.bookmarkId==current" :key="bm.bookmarkId" @click.stop.native="" class="check-bookmark"></el-checkbox>
+
      <div class="bookmark-item" >
-         <span class="bookmark-title" v-if="highlighted" v-html="highLight(bm.title,sousuo)"/>
+        <div class="" style="margin-right: 10px;line-height: 32px" v-show="noteTime">
+          <img style="width: 20px;height: 20px" :ng-src="'https://favicon.lucq.fun/?url=http://'+bm.urls"
+               :src="'https://favicon.lucq.fun/?url=http://'+bm.urls"
+               onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAmVJREFUSMftlG1IU2EUx8+5jRHzg+5OiD64WTBBjSY5ZybUJMaMiIUICUKFIGmoIIogYWKFBmtDxN1tBKIWvlS6SR+iLFDBXqSMgmzbvQ7fkAjcINmQ5u7pQwyCiOvWx/p/fPj9/5znnPM8AP+VolRTjjHhTlmZipzEk9GYao4sVaMYxXp62NgIdpLBCuLP05mZZHOYZA3p5KgMjBcUwCmw4PfVVYiBGmbW1zMzOU4QCgtTvdAeRESEyNZyJbx+dDTjVv/9YFSjSScnfabsbPYMF+AbxsYS3F5TfwPZAacpMNfUBEAljK24mMJwlLIUClTAdfwok9FXWBTtc3Phzqv7c/RWa8KnrHZM8VltbRjC92AxGkEPRpSJInjJQPpIBJoZC6nn50M19dM5J/v6/lhRxgXXDX9Qp1POcmHh2sTEQbfbvVmrUCTbr4RPaeMe8Q0eTyI36VkrW50mftjrPWCyDn9oSUuTdj4Y/1Qpl7NdzkNC98iIqsIxHdQVFaU8eWW1U1guLy1lr3Acr3O7pXi227EhDLpcCZ8UL/kK8LIYjxtDIRhEP8xGIlI8bcAKvY3FGB/zYvf81pYUL/0PvGTKoTUvjzbgCx5ZWlJq3a5lQa1Ge3yTWnp64ASYqVcUoXn3Jtja2/EpRtHj89FF8Tb25ufDOwCo8/lSL0BF/eDPzcVXeA7WDAa6J9rES1VVdJqx41JHBwCE8BgA3JU9B+3AACziMwjv7MAaPQb/wgIAnP2rDpCWtpkncjm+Ro34bWgo3FkX0O6bnARARCT6hSR6YzazXa7DfLyigo7TNtObxNb/s/oB7V8JFvW/8IQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMDJUMTg6MTE6NTgrMDg6MDCoc6tpAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTAyVDE4OjExOjU4KzA4OjAw2S4T1QAAAGd0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fNWhyOG55Nmo1bWMvamluZ2RpYW5hbmxpX2tvbmd3dWppYW94aW5nX3Nob3VjYW5nLnN2Z4/vilwAAAAASUVORK5CYII='"
+               alt="" ng-show="bm.urls">
+        </div>
+       <span class="bookmark-title" v-if="highlighted" v-html="highLight(bm.title,sousuo)"/>

        <span class="bookmark-title" v-if="!highlighted">{{bm.title}}</span>
-        <div class="bookmark-time" v-if="noteTime">{{bm.createTime|changeTime}}</div>
+
+
+        <div class="title-url main-font-color"  v-show="noteTime  && !(seen&&bm.bookmarkId==current)">{{bm.urls}}</div>
+        <div class="bookmark-time main-font-color" v-show="noteTime && !(seen&&bm.bookmarkId==current)">{{bm.createTime|changeTime}}</div>
      </div>



-      <div class="bookmark-description" v-if="isdescription" >
+      <div class="bookmark-description" v-show="isdescription" >
        <span v-if="highlighted" v-html="highLight(bm.description,sousuo)"></span>
        <span v-if="!highlighted">{{bm.description}}</span>
      </div>



-      <div class="info-wrap" v-if="isBookmarkIcon">
+      <div class="info-wrap" v-show="isBookmarkIcon">
        <div class="info" >
          <div class="bookmark-icon bookmark-list-tag-top">
            <img :ng-src="'https://favicon.lucq.fun/?url=http://'+bm.urls"
@ -29,11 +41,10 @@
          <div class="bookmark-official bookmark-list-tag-top">{{bm.urls}}&nbsp;·&nbsp;</div>
          <div class="bookmark-time bookmark-list-tag-top">{{bm.createTime|changeTime}}</div>
          <div class="bookmark-time bookmark-list-tag-top" v-if="bm.bookmarkStar == 1">
-            <svg-icon slot="prefix" icon-class="str" style="font-size: 18px;"/>
-<!--            <i class="el-icon-star-on" style="color: #569cd5;font-size: 18px;margin-top: 4px"></i>-->
+            <svg-icon slot="prefix" icon-class="str" style="font-size: 20px;margin-top: 1px"/>
          </div>

-
+        <!--标签-->
          <div class="bookmark-time" v-if="bm.tagNameAll!=null&&bm.tagNameAll!=''"  >
            <el-tag  v-for="item in JSON.parse(bm.tagNameAll)"  class="bookmark-list-tag bookmark-list-tag-top" style="float: left"  type="info"  data-tagid="item.tagId"  size="mini">
              #{{item.name}}
@ -42,14 +53,19 @@
        </div>
      </div>

+
+
+
+
      <!--编辑  -->
      <div class="editAllBookMark"  v-show="seen&&bm.bookmarkId==current">
-          <el-button slot="reference" @click.stop="updateStarById(bm.bookmarkId,bm.bookmarkStar)"   v-bind:class="{ activeClass: bm.bookmarkStar ==1  }"   plain size="mini" icon="el-icon-star-off"></el-button>
-          <el-button style="color: #000000;" plain size="mini" icon="el-icon-share" ></el-button>
-          <el-button style="color: #000000" plain size="mini" icon="el-icon-edit" @click.stop="handleUpdate(bm.bookmarkId)"></el-button>
-          <el-button style="color: #000000" plain size="mini" icon="el-icon-delete" @click.stop="handleDelete(bm.bookmarkId)"></el-button>
+          <el-button style="" slot="reference" @click.stop="updateStarById(bm.bookmarkId,bm.bookmarkStar)"   v-bind:class="{ activeClass: bm.bookmarkStar ==1  }"   plain size="mini" >  <i class="el-icon-star-off book-eidt-All" />  </el-button>
+          <el-button style="color: #000000" plain size="mini"  @click.stop="handleUpdate(bm.bookmarkId)"> <i class="el-icon-edit book-eidt-All"></i></el-button>
+          <el-button style="color: #000000" plain size="mini"  @click.stop="handleDelete(bm.bookmarkId)"> <i class="el-icon-delete book-eidt-All"></i></el-button>
          <div style="width: 10px"></div>
      </div>
+
+
    </div>

  </div>
@ -65,6 +81,7 @@
      property: null,
      highlighted: null,//搜索是否高亮
      sousuo:null,
+      showPattern:null,//页面展示模式
    },
    data: function () {
      return {
@ -77,10 +94,14 @@
      }
    },
    mounted(){
-      this.showView(this.property);
+       this.showView(this.property);
+       this.showlistView(this.showPattern);
+      // console.log("property222:"+this.property);
+      // console.log("showPattern222:"+this.showPattern);
    },
    updated(){
-      // this.showView(this.property);
+       // this.showView(this.property);
+      //this.showlistView(this.showPattern);
     },
    created() {
      // var that=this;
@ -153,22 +174,52 @@
      showView(e) {
        var that=this;
        switch (e) {
-          case 0:
+          case '0':
            //网页模式
            that.isdescription = true;
            that.noteTime = false;
            that.isBookmarkIcon = true;
            break;
-          case 1:
+          case '1':
            //便签模式
            that.isdescription = false;
            that.noteTime = true;
            that.isBookmarkIcon = false;
            break;
          default:
-
+            that.isdescription = true;
+            that.noteTime = false;
+            that.isBookmarkIcon = true;
+        }
+      },
+      /**渲染模式**/
+      showlistView(e) {
+        var that=this;
+        console.log("showlistView"+e)
+        switch (e) {
+          case '0':
+            //默认模式
+            that.isdescription = true;
+            that.noteTime = false;
+            that.isBookmarkIcon = true;
+            console.log("默认模式")
+            break;
+          case '1':
+            //简洁模式
+            that.isdescription = false;
+            that.noteTime = true;
+            that.isBookmarkIcon = false;
+            console.log("简洁模式")
+            break;
+          case '2':
+            //简洁模式
+            that.isdescription = false;
+            that.noteTime = false;
+            that.isBookmarkIcon = true;
+            console.log("简洁模式2")
+            break;
+          default:
        }
-
      },

      /**搜索高亮 开始**/
@ -293,8 +344,8 @@
    -webkit-text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
-    font-size: 1.05rem;
-    font-weight: 500;
+    font-size: 0.93rem;
+    font-weight: 400;
  }

  .bookmark-time {
@ -346,5 +397,23 @@
    justify-content:flex-end;
    align-items:center;
  }
+  .book-eidt-All{
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .title-url{
+    width:150px;overflow:hidden;text-overflow:ellipsis;margin-right: 10px
+  }
+
+  .main-font-color{
+    color: #b1b1b1;
+    font-size: 14px;
+  }
+  .check-bookmark{
+    position: absolute;
+    top: 0px;
+    left: 3px;
+    zoom: 120%;
+  }

 </style>
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@ -27,6 +27,9 @@ import 'element-ui/lib/theme-chalk/index.css'
 //媒体查詢
 import '@/assets/styles/base.css'

+//elemntUI 自定义的主题目录
+import './assets/theme/index.css'
+
 // 引入
 import draggable from "vuedraggable";

--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@ -8,7 +8,7 @@ import Layout from '@/layout'


 // 导航首页
-import bookmarkmenu from '@/views/bookmark/menu';
+// import bookmarkmenu from '@/views/bookmark/menu';

 import index3 from '@/views/bookmark/index';
 // import content from '../views/bookmark/content/index';
@ -125,7 +125,7 @@ export const constantRoutes = [
  }
  ,{
    path: '/daohang',
-    component: resolve => require(['../views/bookmark/menu/index.vue'], resolve),
+    component: resolve => require(['../views/daohang/index/index.vue'], resolve),
    hidden: true,
  },{
    path: '/draggable',
--- a/ruoyi-ui/src/views/bookmark/bkuser/index.vue
+++ b/ruoyi-ui/src/views/bookmark/bkuser/index.vue
@ -2,39 +2,131 @@
  <div>


-    <div class="head-top">
-      <div class="goIndex">
-        <el-page-header @back="goRouter(9)" content="">
-        </el-page-header>
-      </div>
-      <div style="position: absolute;left: 47.5%;margin-top:-20px">
-        设置  ·  王先生
-      </div>
-
-    </div>



-    <div class="head-tag">
-      <div class="mdui-btn-group head-tag-button">
-<!--        <div  :class="['classification',property=='0'?' classification-click':'']" @click="showopen(0)"><span>网页</span></div>-->
-        <button @click="goRouter(1)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='1'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">个人中心</button>
-<!--        <button @click="goRouter(7)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='7'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">外观设置</button>-->
-        <button @click="goRouter(2)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='2'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">系统设置</button>
-        <button @click="goRouter(3)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='3'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">导入书签</button>
-        <button @click="goRouter(4)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='4'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">备份导出</button>
-        <button @click="goRouter(5)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='5'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">更新日志</button>
-        <button @click="goRouter(6)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='6'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">关于我们</button>
+<!--    <div class="head-tag">-->
+<!--      <div class="mdui-btn-group head-tag-button">-->
+<!--&lt;!&ndash;        <div  :class="['classification',property=='0'?' classification-click':'']" @click="showopen(0)"><span>网页</span></div>&ndash;&gt;-->
+<!--        <button @click="goRouter(1)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='1'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">个人中心</button>-->
+<!--&lt;!&ndash;        <button @click="goRouter(7)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='7'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">外观设置</button>&ndash;&gt;-->
+<!--        <button @click="goRouter(2)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='2'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">系统设置</button>-->
+<!--        <button @click="goRouter(3)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='3'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">导入书签</button>-->
+<!--        <button @click="goRouter(4)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='4'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">备份导出</button>-->
+<!--        <button @click="goRouter(5)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='5'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">更新日志</button>-->
+<!--        <button @click="goRouter(6)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='6'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">关于我们</button>-->


-      </div>
-    </div>
+<!--      </div>-->
+<!--    </div>-->



 <!--        <bkindex></bkindex>-->

-    <router-view ></router-view>
+
+
+
+
+
+
+
+
+
+
+    <el-container Style="background-color: #f7f7f7">
+      <el-aside  class="aside-left">
+
+        <div class="goIndex">
+          <el-page-header @back="goRouter(9)" content="">
+          </el-page-header>
+        </div>
+
+
+        <div  class="main-top user">
+          <div style="width: 70px">
+            <el-avatar :size="45" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
+          </div>
+          <div class="user-name-account">
+            <span class="userName">王先生</span>
+            <span class="userAccount">43278047</span>
+          </div>
+      </div>
+
+        <div class="titleAll">
+
+          <div class="title-top">
+            <span>设置</span>
+          </div>
+
+          <div class="title" @click="goRouter(itme.id)" :class="[property==itme.id ? ' getClass':'']" v-for="itme in list">
+
+            <span v-show="property==itme.id" style="width: 3px;height: 19px;background-color: #0072c9;margin-left: 3px"></span>
+            <span v-show="property!=itme.id" style="width: 3px;height: 19px;margin-left: 3px"></span>
+
+           <i :class="itme.icon"></i>
+            <span>{{itme.name}}</span>
+          </div>
+
+<!--          <div class="title"  @click="goRouter(3)" :class="[property=='3' ? ' getClass':'']">-->
+<!--            <span v-show="property=='3'" style="width: 3px;height: 19px;background-color: #0072c9;margin-left: 3px"></span>-->
+<!--            <span v-show="property!='3'" style="width: 3px;height: 19px;margin-left: 3px"></span>-->
+<!--            <i class="el-icon-setting"></i>-->
+<!--            <span>隐私、搜索和服务 </span>-->
+<!--          </div>-->
+
+<!--          <div class="title"  @click="goRouter(4)" :class="[property=='4' ? ' getClass':'']">-->
+<!--            <span v-show="property=='4'" style="width: 3px;height: 19px;background-color: #0072c9;margin-left: 3px"></span>-->
+<!--            <span v-show="property!='4'" style="width: 3px;height: 19px;margin-left: 3px"></span>-->
+
+<!--            <i class="el-icon-setting"></i>-->
+<!--            <span>外观 </span>-->
+<!--          </div>-->
+
+<!--          <div class="title"  @click="goRouter(5)" :class="[property=='5' ? ' getClass':'']">-->
+<!--            <span v-show="property=='5'" style="width: 3px;height: 19px;background-color: #0072c9;margin-left: 3px"></span>-->
+<!--            <span v-show="property!='5'" style="width: 3px;height: 19px;margin-left: 3px"></span>-->
+
+<!--            <i class="el-icon-setting"></i>-->
+<!--            <span>开始、主页和新建标签页 </span>-->
+<!--          </div>-->
+
+<!--          <div class="title"  @click="goRouter(6)" :class="[property=='6' ? ' getClass':'']">-->
+<!--            <span v-show="property=='6'" style="width: 3px;height: 19px;background-color: #0072c9;margin-left: 3px"></span>-->
+<!--            <span v-show="property!='6'" style="width: 3px;height: 19px;margin-left: 3px"></span>-->
+
+<!--            <i class="el-icon-setting"></i>-->
+<!--            <span>共享、复制和粘贴 </span>-->
+<!--          </div>-->
+
+<!--          <div class="title"  @click="goRouter(7)" :class="[property=='7' ? ' getClass':'']">-->
+<!--            <span v-show="property=='7'" style="width: 3px;height: 19px;background-color: #0072c9;margin-left: 3px"></span>-->
+<!--            <span v-show="property!='7'" style="width: 3px;height: 19px;margin-left: 3px"></span>-->
+
+<!--            <i class="el-icon-setting"></i>-->
+<!--            <span>Cookie 和网站权限 </span>-->
+<!--          </div>-->
+        </div>
+
+
+      </el-aside>
+      <el-main>  <router-view ></router-view></el-main>
+    </el-container>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+



@ -53,8 +145,49 @@
    data: function () {
      return {
        property:1,
+        list:[
+          {
+            "id":1,
+            "name":"个人中心",
+            "path":"/bkindex",
+            "icon":"el-icon-user"
+          },{
+            "id":2,
+            "name":"系统设置",
+            "path":"/userSettings",
+            "icon":"el-icon-setting"
+          }
+          ,{
+            "id":3,
+            "name":"导入书签",
+            "path":"/importHtml",
+            "icon":"el-icon-upload2"
+          }
+          ,{
+            "id":4,
+            "name":"备份导出",
+            "path":"/exportHtml",
+            "icon":"el-icon-download"
+          }
+          ,{
+            "id":5,
+            "name":"更新日志",
+            "path":"/issueLog",
+            "icon":"el-icon-setting"
+          }
+          ,{
+            "id":6,
+            "name":"关于我们",
+            "path":"/aboutUs",
+            "icon":"el-icon-tickets"
+          }
+         ]
      }
    },
+    mounted(){
+      this.property=2;
+      // document.querySelector('body').setAttribute('style', 'background-color:#f6f5f4')
+    },
    methods: {

      goRouter(e){
@ -119,11 +252,9 @@

      }
    },
-    mounted() {
-      document.querySelector('body').setAttribute('style', 'background-color:#f6f5f4')
-    },
+
    beforeDestroy() {
-      document.querySelector('body').removeAttribute('style')
+      // document.querySelector('body').removeAttribute('style')
    }
  }
 </script>
@ -132,10 +263,86 @@

 </style>
 <style scoped>
+  .user-name-account{
+    width: 250px;margin-top: -10px
+  }

+  .aside-left{
+    width: 340px;
+    height: 800px;
+    border-right: 1px solid #b6b6b6;
+    background-color: #f7f7f7
+  }
+  .main-top{
+    width: 250px;
+    height:60px;
+    margin-top: 20px;
+    margin-left: 10px;
+  }
+
+  .userName {
+    width: 100%;
+    float: left;
+    font-size: 15px;
+    font-weight: 600;
+    height: 20px;
+  }
+
+  .userAccount {
+    width: 100%;
+    float: left;
+    font-size: 12px;
+    color: #9b9b9a;
+    height: 20px;
+  }
+
+.user{
+  display: flex;
+  align-items: center;
+}
+  .title{
+    width: 100%;
+    height: 32px;
+    line-height: 35px;
+    display: flex;
+    flex-direction:row;
+    align-items:center;
+    border-radius-: 2px;
+  }
+  .title-top{
+    width: 100%;
+    height: 25px;
+    line-height: 30px;
+    align-items:center;
+    margin-left: 13px;
+    font-size: 14px;
+    color: #808080;
+    margin-bottom: 3px;
+  }
+
+  .title span{
+    font-size: 15px;
+    color: #262626;
+
+  }
+  .title i{
+    margin-left: 7px;
+    margin-right: 7px;
+  }
+  .title:hover{
+    background-color: #e5e5e5;
+  }
+  .titleAll{
+  }
+
+  .getClass{
+    /*border-left: 3px solid #0072C9;*/
+    background-color: #e5e5e5;
+  }

  .goIndex{
-    padding-left: 18px;padding-top: 18px;
+    padding-top: 10px;
+    padding-left: 8px;
  }
  .head-tag {
    width: 100%;
@ -158,12 +365,10 @@
    line-height: 30px;
  }

-
  .head-top {
    width: 100%;
    height: 48px;
    background-color: #ffffff;
-
  }

  .main {
@ -176,7 +381,6 @@
  .mian-content {
    width: 50%;
    height: 500px;
-
    margin: 0 auto
  }

--- a/ruoyi-ui/src/views/bookmark/bkuser/tool/ImportHtml.vue
+++ b/ruoyi-ui/src/views/bookmark/bkuser/tool/ImportHtml.vue
@ -1,10 +1,13 @@
 <template>
-  <div >
+  <div class="app-container">


+    <div class="label-title">
+      <span>导入书签</span>
+    </div>

+    <div style="width:360px;height:260px;;">

-    <div style="width:360px;height:260px;margin: 0 auto;margin-top: 40px">
      <el-upload
        ref="upload"
        :limit="1"
@ -42,8 +45,6 @@



-    <el-row  >
-      <el-col :xs="{span: 22, push: 1}" :sm="{span: 16, push: 4}" :md="{span: 16, push: 4}"  :xl="{span: 12, push: 6}"  >
    <div class="text">
      <ul>
        <li>注意事项</li>
@ -57,8 +58,6 @@
        <li>4、支持浏览器的目录结构,本站目录支持无限级别分类</li>
      </ul>
    </div>
-      </el-col>
-    </el-row>


  </div>
@ -126,8 +125,9 @@
  .text{
    border: #cecece 1px solid;
    border-radius: 10px;
-    background-color: #fafcff;
    margin-top:  40px;
+    width: 800px;
+    font-size: 15px;
  }

  .structure {
@ -158,4 +158,18 @@
  margin-top: 10px;

  }
+  .app-container{
+    width: 700px;
+    margin-left: 50px;
+  }
+  .label-title{
+    margin-bottom: 25px;
+    font-weight: 900;
+    font-size: 22px;
+    min-width: 100px;
+  }
+
+  .label-title-two{
+    margin-top: 20px;
+  }
 </style>
--- a/ruoyi-ui/src/views/bookmark/bkuser/tool/aboutUs.vue
+++ b/ruoyi-ui/src/views/bookmark/bkuser/tool/aboutUs.vue
@ -1,19 +1,12 @@
 <template>
  <div class="app-container ">
-    <el-row  >
-      <el-col :xs="24" :sm="{span: 18, push: 3}" :md="{span: 18, push: 3}"  :xl="{span: 18, push: 3}"  >
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>关于我们</span>
-          </div>
-          <p class="text item" v-html = 'hello'>
+    <div class="label-title">
+        <span>关于我们</span>
+    </div>

-             </p>
+        <el-card class="box-card" >
+          <p class="text item" v-html = 'hello'> </p>
        </el-card>
-
-      </el-col>
-
-    </el-row>
  </div>


@ -38,6 +31,9 @@
  }
 </script>
 <style scoped>
+  .box-card{
+    min-width: 700px;
+  }
  .text {
    font-size: 14px;
  }
@ -55,5 +51,14 @@
    clear: both
  }

+  .label-title{
+    margin-bottom: 25px;
+    font-weight: 900;
+    font-size: 22px;
+    min-width: 100px;
+  }
+  .label-title-two{
+    margin-top: 20px;
+  }

 </style>
--- a/ruoyi-ui/src/views/bookmark/bkuser/tool/bkindex.vue
+++ b/ruoyi-ui/src/views/bookmark/bkuser/tool/bkindex.vue
@ -1,11 +1,10 @@
 <template>
-  <div class="app-container ">
-    <el-row :gutter="20" >
-      <el-col :xs="24" :sm="{span: 16, push: 4}" :md="{span: 14, push: 5}"  :xl="{span: 10, push: 7}"  >
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>个人信息</span>
-          </div>
+  <div class="app-container " style="width: 870px;margin-left: 50px">
+        <div class="label-title">
+            <span>用户配置</span>
+        </div>
+
+        <el-card class="box-card" style="background-color: #ffffff">
          <div>
            <div class="text-center">
              <userAvatar :user="user" />
@ -47,6 +46,9 @@
          </div>
        </el-card>

+    <div class="label-title label-title-two">
+      <span>用户配置</span>
+    </div>
        <el-card style="margin-top: 8px">
          <div slot="header" class="clearfix">
            <span>基本资料</span>
@ -60,9 +62,7 @@
            </el-tab-pane>
          </el-tabs>
        </el-card>
-      </el-col>

-    </el-row>
  </div>
 </template>

@ -97,5 +97,18 @@
    }
  };
 </script>
+<style scoped>
+  .pull-right{

+  }
+  .label-title{
+    margin-bottom: 25px;
+    font-weight: 900;
+    font-size: 22px;
+  }
+  .label-title-two{
+    margin-top: 20px;
+  }
+
+</style>

--- a/ruoyi-ui/src/views/bookmark/bkuser/tool/exportHtml.vue
+++ b/ruoyi-ui/src/views/bookmark/bkuser/tool/exportHtml.vue
@ -1,11 +1,10 @@
 <template>
  <div class="app-container ">
-    <el-row :gutter="20" >
-      <el-col :xs="24" :sm="{span: 16, push: 4}" :md="{span: 14, push: 5}"  :xl="{span: 10, push: 7}"  >
+    <div class="label-title">
+      <span>备份/导出</span>
+    </div>
        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>备份/导出</span>
-          </div>
+
          <div class="exportList">
            <div class="exportList-main">
              <div class="exportList-main-text">
@ -43,9 +42,10 @@

          </div>
        </el-card>
-      </el-col>

-    </el-row>
+
+
+
  </div>
 </template>
 <script>
@ -105,7 +105,7 @@
        }
    }
 </script>
-<style>
+<style scoped>

  .exportList{
    display:flex;flex-direction:column;
@ -124,4 +124,18 @@
    flex-direction:column-reverse;
  }

+  .app-container{
+    width: 700px;
+    margin-left: 50px;
+  }
+
+  .label-title{
+    margin-bottom: 25px;
+    font-weight: 900;
+    font-size: 22px;
+    min-width: 100px;
+  }
+  .label-title-two{
+    margin-top: 20px;
+  }
 </style>
--- a/ruoyi-ui/src/views/bookmark/bookmark/index.vue
+++ b/ruoyi-ui/src/views/bookmark/bookmark/index.vue
@ -55,10 +55,13 @@

          <div class="filter-tbar">
            <div class="filter-classification">
-<!--              <div  :class="['classification',property=='0'?' classification-click':'']" @click="showopen(0)"><span>网页</span></div>-->
-<!--              <div :class="['classification',property=='1'?' classification-click':'']" @click="showopen(1)"><span>文本</span></div>-->
-<!--              <div :class="['classification',property=='2'?' classification-click':'']" @click="showopen(2)"><span>其他</span></div>-->
+              <div  :class="['classification',property=='0'?' classification-click':'']" @click="showopen(0)"><span>全部</span></div>
+              <div  :class="['classification',property=='4'?' classification-click':'']" @click="showopen(4)"><span>书签</span></div>
+              <div :class="['classification',property=='1'?' classification-click':'']" @click="showopen(1)"><span>文本</span></div>
+              <div :class="['classification',property=='2'?' classification-click':'']" @click="showopen(2)"><span>图片</span></div>
+<!--              <div :class="['classification',property=='3'?' classification-click':'']" @click="showopen(3)"><span>其他</span></div>-->
            </div>
+
            <div class="setUpThe">
              <div class="filter-content">
                <el-dropdown trigger="hover" size="small" @command="handleCommand">
@ -79,21 +82,19 @@
                </el-dropdown>

              </div>
-<!--              <div class="filter-content">-->
-<!--                <el-dropdown trigger="hover" size="small">-->
-<!--                  <div class="el-dropdown-link dropdownList">-->
-<!--                    <el-button icon="el-icon-tickets" style="border:0px;font-size: 18px;" size="mini"></el-button>-->
-<!--                  </div>-->
-<!--                  <el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">-->
-<!--                    <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>-->
-<!--                    <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>-->
-<!--                    <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>-->
-<!--                    <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>-->
-<!--                    <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>-->
-<!--                  </el-dropdown-menu>-->
-<!--                </el-dropdown>-->
+              <div class="filter-content">
+                <el-dropdown trigger="hover" size="small" @command="showPatternState">
+                  <div class="el-dropdown-link dropdownList">
+                    <el-button icon="el-icon-tickets" style="border:0px;font-size: 18px;" size="mini"></el-button>
+                  </div>
+                  <el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
+                    <el-dropdown-item class="filter-item" command="0"><i class="el-icon-bottom"></i>默认模式</el-dropdown-item>
+                    <el-dropdown-item class="filter-item" command="1"><i class="el-icon-bottom"></i>简洁模式</el-dropdown-item>
+                    <el-dropdown-item class="filter-item" command="2" ><i class="el-icon-bottom"></i>卡片模式</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>

-<!--              </div>-->
+              </div>


            </div>
@ -118,7 +119,7 @@
        <div class="bookmarklist" :style="datalist"  infinite-scroll-distance="10" v-loading="loading" v-if="!showimg"
             v-infinite-scroll="load"
             infinite-scroll-disabled="disabled" style="overflow:auto;" infinite-scroll-immediate="false">
-    <BookmarkOne @on-windowurl="windowurl" @on-handleUpdate="handleUpdate" @on-handleDelete="handleDelete" :key="property" :property="property"  :highlighted="highlighted" :sousuo="sousuo"  :listloading="listloading" :loading="loading" :bookmarkList="bookmarkList"></BookmarkOne>
+    <BookmarkOne @on-windowurl="windowurl" @on-handleUpdate="handleUpdate" @on-handleDelete="handleDelete" :key="property +'-'+ showPattern" :property="property" :showPattern="showPattern"  :highlighted="highlighted" :sousuo="sousuo"  :listloading="listloading" :loading="loading" :bookmarkList="bookmarkList"></BookmarkOne>

          <p v-if="listloading" class="listhint"><i class="el-icon-loading"></i>加载中...</p>
          <p v-if="listnoMore&&!showimg" class="listhint">没有更多了</p>
@ -192,10 +193,88 @@

            </el-form>
            <div slot="footer" class="dialog-footer">
-              <el-button type="primary" @click="submitForm">确 定</el-button>
-              <el-button @click="cancel">取 消</el-button>
+
+              <el-button class="butWidth" size="small" type="primary" @click="submitForm">确 定</el-button>
+              <el-button class="butWidth" style="margin-left: 0px"  size="small" @click="cancel">取 消</el-button>
+
            </div>
          </el-dialog>
+
+
+
+        <!-- 添加或修改书签管理对话框 -->
+        <el-dialog :title="title"  :visible.sync="addBookMakrUrlOpen" width="600px" append-to-body>
+          <el-form ref="form" :model="form" :rules="rules" >
+            <el-input v-model="form.url" placeholder="请输入书签地址" class="addUrl-input"/>
+            <el-input v-model="form.title" placeholder="请输入书签标题" class="addUrl-input"/>
+            <el-form-item label="书签标签:" prop="label">
+              <el-tag
+                class="bookmarktag"
+                v-for="tag in form.sqTags"
+                :key="tag.tagId"
+                closable
+                type="success"
+                :disable-transitions="false"
+                @close="taghandleClose(tag.tagId)"
+                v-if="tag.name!='TAGDELETE'"
+              >
+                {{tag.name}}
+              </el-tag>
+              <el-input
+                class="input-new-tag"
+                v-if="inputVisible"
+                v-model="inputValue"
+                ref="saveTagInput"
+                size="small"
+                @keyup.enter.native="handleInputConfirm"
+                @blur="handleInputConfirm"
+              >
+              </el-input>
+              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增标签</el-button>
+
+            </el-form-item>
+
+            <!--        0公开显示 1隐藏显示 2好友显示-->
+<!--            <el-form-item label="选择状态" prop="start">-->
+<!--              <el-radio-group v-model="form.start" size="medium">-->
+<!--                <el-radio v-for="(item, index) in bookmarkstatus" :key="index" :label="item.value"-->
+<!--                          :disabled="item.disabled">{{item.name}}-->
+<!--                </el-radio>-->
+<!--              </el-radio-group>-->
+<!--            </el-form-item>-->
+<!--            &lt;!&ndash;           1.未读稍后再看 2 已读 2.續看&ndash;&gt;-->
+<!--            <el-form-item label="选择类型" prop="type">-->
+<!--              <el-radio-group v-model="form.type" size="medium">-->
+<!--                <el-radio v-for="(item, index) in bookmarktype" :key="index" :label="item.value"-->
+<!--                          :disabled="item.disabled">{{item.name}}-->
+<!--                </el-radio>-->
+<!--              </el-radio-group>-->
+<!--            </el-form-item>-->
+
+
+          </el-form>
+<!--          <div slot="footer" class="dialog-footer">-->
+
+            <el-button class="butWidth" size="small" type="primary" @click="submitForm">确 定</el-button>
+            <el-button class="butWidth" style="margin-left: 0px"  size="small" @click="cancel">取 消</el-button>
+
+<!--          </div>-->
+        </el-dialog>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
        </el-aside>

        <el-main class="isBookmarkMain" v-if="isMain">
@ -261,6 +340,8 @@
      return {
        //网页0 文本1 其他1
        property:0,
+        //列表展示的模式
+        showPattern:0,
        sousuo: '',
        drawer: false,
        // 遮罩层
@ -269,6 +350,8 @@
        title: "",
        // 是否显示弹出层
        open: false,
+        //是否弹窗收藏书签
+        addBookMakrUrlOpen:false,
        busy: false,
        showimg: false,
        loading: false,
@ -526,6 +609,15 @@

        this.getBypropertyList(e);

+      },
+      /**切换显示 全部 网页 文本 其他**/
+      showPatternState(e) {
+        var that=this;
+        that.showPattern=e;
+        console.log("showPattern =" +e)
+        // //缓存状态
+        // that.$store.state.showPattern=e;
+
      },
      /** 转换书签菜单数据结构 */
      normalizer(node) {
@ -655,7 +747,7 @@
      },
      // 取消按钮
      cancel() {
-        this.open = false;
+        this.addBookMakrUrlOpen = false;
        this.reset();
      },
      // 统一的表单重置
@ -975,8 +1067,8 @@
      /** 新增书签Url操作 */
      addbookmarkurl: function () {
        this.reset();
-        this.getTreeselect();
-        this.open = true;
+        // this.getTreeselect();
+        this.addBookMakrUrlOpen = true;

        // getMenu(e.getAttribute("data-menuId")).then(response => {
        //   this.form = response.data;
@ -986,7 +1078,9 @@
      },
      //关闭弹窗
      closePopup: function() {
+        if (document.getElementById("popupDiv")){
        document.getElementById("popupDiv").style.display = 'none';
+        }
      }

    },
@ -1006,9 +1100,9 @@
 /*}*/

  .button-new-tag {
-    margin-left: 10px;
-    height: 32px;
-    line-height: 30px;
+    margin-left: 5px;
+    height: 30px;
+    line-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
  }
@ -1197,11 +1291,12 @@

  .classification-click {
    border-radius: 19px;
-    background: #606c88; /* fallback for old browsers */
-    background: -webkit-linear-gradient(to right, #3f4c6b, #606c88); /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to right, #3f4c6b, #606c88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-    color: #FFFFFF;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4)
+    /*background: #606c88; !* fallback for old browsers *!*/
+    /*background: -webkit-linear-gradient(to right, #3f4c6b, #606c88); !* Chrome 10-25, Safari 5.1-6 *!*/
+    /*background: linear-gradient(to right, #3f4c6b, #606c88); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
+    background-color: #ffffff;
+    color: #a4a4a4;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4)
  }

  .bookmark-list-tag {
@ -1542,6 +1637,13 @@
    color: #565656;
    text-indent: 15px;
  }
+.butWidth{
+  width: 100%;
+  margin-top: 10px;
+}
+  .addUrl-input{
+    margin-bottom: 13px;
+  }


 </style>
--- a/ruoyi-ui/src/views/bookmark/ceshi/index.vue
+++ b/ruoyi-ui/src/views/bookmark/ceshi/index.vue
@ -1,21 +1,33 @@

 <template>
-  <div class="box" ref="box">
-    <div class="left">
-      <!--左侧div内容-->
-    </div>
-    <div class="resize" title="收缩侧边栏">
-      ⋮
-    </div>
-    <div class="mid">
-      <!--右侧div内容-->
-      <svg-icon icon-class="gd" />
-      <br/>
-      <svg-icon icon-class="notebook_1" />
-      <br/>
-      <svg-icon icon-class="tool" style="width: 50px;height: 50px" />
+  <div class="background" style="background-color: #1f2d3d ">
+<!--    <div class="left">-->
+<!--      &lt;!&ndash;左侧div内容&ndash;&gt;-->
+<!--    </div>-->
+<!--    <div class="resize" title="收缩侧边栏">-->
+<!--      ⋮-->
+<!--    </div>-->
+<!--    <div class="mid">-->
+<!--      &lt;!&ndash;右侧div内容&ndash;&gt;-->
+<!--      <svg-icon icon-class="gd" />-->
+<!--      <br/>-->
+<!--      <svg-icon icon-class="notebook_1" />-->
+<!--      <br/>-->
+<!--      <svg-icon icon-class="tool" style="width: 50px;height: 50px" />-->
+<!--    </div>-->
+
+
+    <div class="background">
+      <img :src="imgSrc" width="100px" height="100px" alt="" />
    </div>

+    <div class="content">
+      <h2>标题</h2>
+      <p>其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。</p>
+      <p>其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。</p>
+      <p>其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。</p>
+      <p>其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。</p>
+    </div>

  </div>
 </template>
@ -24,8 +36,18 @@

  export default {
    name: 'Dashboard',
+    data() {
+      return {
+        note: {
+          backgroundImage : "url('http://www.jq22.com/img/cs/500x300-9.png')",
+          backgroundRepeat:'no-repeat',
+          backgroundSize:'100% 100%',
+        },
+        imgSrc:'http://img.netbian.com/file/2020/0904/de2f77ed1090735b441ba5e4c2b460ca.jpg',
+      }
+      },
    mounted () {
-      this.dragControllerDiv();
+      // this.dragControllerDiv();


    },
@ -132,4 +154,46 @@



+
+  .background {
+    position: fixed;
+  }
+
+
+  .content {
+    width:800px;
+    position:relative;
+    margin:2rem auto;
+    padding:1em;
+    background:hsla(0,0%,100%,.25) border-box;
+    overflow:hidden;
+    border-radius:8px;
+    box-shadow:0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0,0,0,0.6);
+    text-shadow:0 1px 1px hsla(0,0%,100%,.3);
+    color: #ffffff;
+  }
+  .content::before {
+    content:'';
+    position:absolute;
+    top:0;
+    right:0;
+    bottom:0;
+    left:0;
+    margin:-30px;
+    z-index:-1;
+    -webkit-filter:blur(10px);
+    filter:blur(10px);
+  }
+
+
+
+  .note {
+    background: url("http://www.jq22.com/img/cs/500x300-9.png") no-repeat;
+    background-position: center;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    position: fixed;
+  }
+
 </style>
--- a/ruoyi-ui/src/views/bookmark/index/index.vue
+++ b/ruoyi-ui/src/views/bookmark/index/index.vue
@ -871,7 +871,7 @@
          property=0;
        }
        //如果当前的节点已经展开了 收缩的时候就不请求了
-        if (!treeNode.open){
+        // if (!treeNode.open){
        that.$router.push({
          path: "/content",
          query: {
@ -880,15 +880,15 @@
            t:Date.now(),
          }
        })
-        }
+        // }

        $("." + treeNode.tId + "_sz").unbind().remove();
        var switchObjspan = $("#" + treeNode.tId + "_span");
        var editStr = "<span class=" + treeNode.tId + "_count  style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:0.8rem' onfocus='this.blur();'>" + treeNode.bookmarkCount + "</span>";
        switchObjspan.after(editStr);
        //展开当前菜单
-        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
-        zTree.expandNode(treeNode);
+        // var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+        // zTree.expandNode(treeNode);

        // console.log("当前节点已经展开:"+treeNode.open)

--- a/ruoyi-ui/src/views/bookmark/menu/index.vue
+++ b/ruoyi-ui/src/views/bookmark/menu/index.vue
@ -1,339 +0,0 @@
-<template >
-  <div class="main">
-
-<!--    <div class="index-top"></div>-->
-
-<!--    &lt;!&ndash;github&ndash;&gt;-->
-<!--    <a @click="zreaZtree" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub">-->
-<!--      <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#008000; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">-->
-<!--        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>-->
-<!--        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>-->
-<!--      </svg>-->
-<!--    </a>-->
-
-    <div class="sousou">
-<!--      //搜索-->
-      <div style="width: 700px;">
-<!--        <div >-->
-<!--          <div class="choice-top notcopy" v-for="iconlist in iconlist">-->
-<!--            <el-tooltip  :visible-arrow="visiblearro" :enterable="enterable" class="item"  effect="dark" :content="iconlist.title" placement="top" >-->
-<!--            <div @click="sendEventDataTop($event)" :data-icon="iconlist.icon"><img  :ng-src="'https://favicon.lucq.fun/?url='+iconlist.icon" err-src="./images/default.ico"  ng-click="detailBookmark(bookmark);$event.stopPropagation()" :src="'https://favicon.lucq.fun/?url='+iconlist.icon"  ></div>-->
-<!--            </el-tooltip>-->
-<!--          </div>-->
-
-<!--        </div>-->
-
-        <div style="margin-top: 15px;">
-          <el-input placeholder="百度一下" v-model="sousou" class="sousoucss notcopy" ref="sousouref">
-            <img @click="IsCord()"  slot="prefix"  :src="sousouicon" style="width: 20px;height: 20px;position: absolute;top: 50%;margin-top: -10px;">
-             <el-button  type="primary" slot="append" icon="el-icon-search" style="width: 80px"  @click="getUrl"></el-button>
-          </el-input>
-        </div>
-
-
-
-
-
-
-
-
-
-
-
-        <transition name="el-zoom-in-top">
-            <el-card class="box-card notcopy" v-show="isSousouCard" style="width: 100%;opacity: 0.7;margin-top: 10px;height:250px;overflow:auto">
-
-              <div class="choice" v-for="iconlist in iconlist" >
-            <div  @click="sendEventData($event)" :data-icon="iconlist.icon"><img err-src="https://favicon.lucq.fun/?url=https://www.5118.com/"  class="sousouicon"  :ng-src="'https://favicon.lucq.fun/?url='+iconlist.icon"  :src="'https://favicon.lucq.fun/?url='+iconlist.icon"  ><span>{{iconlist.title}}</span></div>
-              </div>
-            </el-card>
-
-        </transition>
-
-
-
-      </div>
-
-
-    </div>
-
-
-
-
-  </div>
-</template>
-
-
-<script>
-
-  export default {
-
-    components:{
-
-    },
-
-    data:function(){
-      return{
-        enterable:false,
-        visiblearro:false,//提示箭头
-        curMenu:null,
-        sousou:'百度一下',//搜索文字
-        zTree_Menu:null,
-        isSousouCard:false,//切换搜索源
-        iconurl:'https://favicon.lucq.fun/?url=',
-        sousouicon:'https://favicon.lucq.fun/?url=https://www.baidu.com/',//默认搜索图片
-        sousou:'',
-        sousouVlaue:'百度一下',
-        iconlist:[
-         {iconID:"1",icon:"https://www.baidu.com",title:"百度"},
-         {iconID:"2",icon:"https://www.google.com/",title:"谷歌搜索引擎"},
-         {iconID:"3",icon:"https://www.so.com/",title:"搜索"},
-         {iconID:"4",icon:"https://www.sogou.com/",title:"搜狗"},
-         {iconID:"5",icon:"https://cn.bing.com/",title:"必应"},
-         {iconID:"6",icon:"https://yz.m.sm.cn/",title:"神马搜索"},
-          {iconID:"7",icon:"https://www.jd.com/",title:"京东"},
-          {iconID:"8",icon:"https://taobao.com/",title:"淘宝"},
-          {iconID:"7",icon:"https://y.qq.com",title:"QQ音乐"},
-          {iconID:"7",icon:"https://weibo.com/",title:"微博"},
-          {iconID:"7",icon:"http://www.dianping.com/",title:"大众点评"},
-          {iconID:"7",icon:"https://mail.sina.com.cn/",title:"新浪邮箱"},
-          {iconID:"7",icon:"http://caiyunapp.com",title:"彩云天气"},
-          {iconID:"7",icon:"https://www.yhd.com/",title:"一号店"},
-          {iconID:"7",icon:"https://www.mi.com/",title:"小米"},
-          {iconID:"7",icon:"https://www.tianyancha.com/",title:"天眼查"},
-          {iconID:"7",icon:"https://translate.google.com/",title:"谷歌翻译"},
-          {iconID:"7",icon:"https://open.163.com/",title:"网易公开课"},
-          {iconID:"7",icon:"http://mooc.org/",title:"MOCC"},
-          {iconID:"7",icon:"https://www.w3school.com.cn/",title:"w3school"},
-          {iconID:"7",icon:"https://segmentfault.com/",title:"segmentfault"},
-          {iconID:"7",icon:"https://www.y-english.org/",title:"云英语"},
-          {iconID:"7",icon:"https://www.tutorialspoint.com/",title:"Tutorials Point"},
-          {iconID:"7",icon:"https://github.com/",title:"GitHub"},
-          {iconID:"7",icon:"https://mail.sina.com.cn/",title:"新浪邮箱"},
-          {iconID:"7",icon:"https://movie.douban.com/",title:"豆瓣电影"},
-
-        ]
-      }
-    },
-    methods:{
-      //显示隐藏 数据源
-      IsCord:function(){
-        var that=this;
-        that.isSousouCard=!that.isSousouCard;
-      },
-      //切换搜索源
-      sendEventData:function(ev){
-      var that=this;
-        var node = ev.currentTarget;
-        that.sousouicon=that.iconurl+node.dataset.icon;
-        that.isSousouCard=!that.isSousouCard;
-        that.$refs.sousouref.focus()
-      },
-      sendEventDataTop:function(ev){
-        var that=this;
-        var node = ev.currentTarget;
-        that.sousouicon=that.iconurl+node.dataset.icon;
-        that.$refs.sousouref.focus()
-
-      },
-
-
-      //新打开新窗口
-      getUrl:function () {
-      var that=this;
-      if (that.sousou!=null&&that.sousou!=undefined&&that.sousou!='') {
-        var url=that.sousouicon+that.sousou;
-        window.open(url);
-        //window.location.href=url;
-        }else {
-        // that.$notify({
-        //   title:'提示',
-        //   type: 'success',
-        //   message: '搜了个寂寞,内容不能为空!',
-        // });
-        that.$refs.sousouref.focus()
-        }
-
-      }
-    },
-    mounted(){
-      var that=this;
-      //光标自动选中
-      that.$refs.sousouref.focus()
-
-
-    },
-
-  }
-</script>
-<style scoped>
-
-
-
-
-  .main{
-    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-    display: flex;
-    justify-content: center;
-    /*align-items: center;*/
-    padding-top: 20%;
-    height: 100%;
-    background-color: #f7f7f7;
-    background-image: url("https://s1.ax1x.com/2020/08/11/aOHstP.jpg");
-    background-size: cover;
-  }
-
-  /*.sousou{*/
-  /*  display: flex;*/
-  /*  flex-direction: row;  !* 子元素横向排列 *!*/
-  /*  justify-content: center; !* 相对父元素水平居中 *!*/
-  /*  align-items: center; !*  子元素相对父元素垂直居中 *!*/
-  /*}*/
-
-  .sousoucss{
-    opacity: 0.6;
-  }
-  .sousoucss input{
-    border:0;
-  }
-
-  .sousoucss button:hover{
-    color: #1c84c6;
-  }
-  .el-input-group__append{
-    background-color: #1f2d3d!important;
-    opacity: 0.7;
-  }
-
-
-  .choice {
-    margin: 5px 5px 5px 5px;
-    background-color: #FFFFFF;
-
-  }
-  .choice div{
-    float:left;
-    height: 30px;
-    line-height: 30px;
-    border-radius: 5px;
-    text-align: center;
-    margin: 5px 5px 5px 5px;
-    /*box-shadow:0 0 1px #000 ;*/
-    background: none #fff;
-    border: 1px solid rgba(34,36,38,.15);
-    color: rgba(0,0,0,.87);
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    font-size: 14px;
-    font-weight: 700;
-    /*font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;*/
-    align-items: center;
-    vertical-align:middle;
-    width:fit-content;
-    /*width:-webkit-fit-content;*/
-    width:-moz-fit-content;
-    padding-left:12px;
-    padding-right:12px;
-  }
-  .choice div i{
-    margin-right: 1px;
-  }
-  .choice div:hover{
-    color: #1f1f1f;
-
-  }
-/**顶部*/
-  .index-top{
-    width: 100%;
-    height: 50px;
-    background-color: #3c5d5b;
-    position: absolute;
-    top: 0;
-    opacity: 0.2;
-
-  }
-
-  /*搜索 */
-  .sousouicon{
-    width:16px;
-    height:16px;
-    vertical-align:middle;
-    margin-right: 3px;
-    margin-bottom: 3px;
-
-  }
-/*搜索top 上面的*/
-  .choice-top img{
-    width:16px;
-    height:16px;
-    vertical-align:middle;
-    margin-bottom: 3px;
-  }
-  .choice-top div{
-    float:left;
-    height: 30px;
-    line-height: 30px;
-    border-radius: 5px;
-    text-align: center;
-    margin: 5px 5px 5px 5px;
-    background-color: #3c5d5b;
-    border: 1px solid rgba(34,36,38,.15);
-    padding-left:12px;
-    padding-right:12px;
-    opacity: 0.8;
-
-  }
-
-
-  /**滚动条美化*/
-
-  /*滚动条的宽度*/
-
-  ::-webkit-scrollbar {
-    width:5px;
-    height:3px;
-    /*background-color: red;*/
-  }
-
-  /*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
-
-  ::-webkit-scrollbar-track {
-    width: 6px;
-    background-color:#fff;
-    -webkit-border-radius: 2em;
-    -moz-border-radius: 2em;
-    border-radius:2em;
-  }
-
-  /*滚动条的设置*/
-
-  ::-webkit-scrollbar-thumb {
-    background-color:#606d71;
-    background-clip:padding-box;
-    min-height:28px;
-    -webkit-border-radius: 2em;
-    -moz-border-radius: 2em;
-    border-radius:2em;
-
-  }
-  /*滚动条移上去的背景*/
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: #7c6fff;
-  }
-/*滚动条美化结束*/
-
-
-
-/*禁止复制*/
-  .notcopy {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-</style>
-
--- a/ruoyi-ui/src/views/bookmark/tag/usertag.vue
+++ b/ruoyi-ui/src/views/bookmark/tag/usertag.vue
@ -52,7 +52,7 @@
         <el-tag type="info" size="mini">{{item.name}}</el-tag>
 -->
         # {{item.name}}
-
+          <div v-show="!(seen&&item.id == current)" class="menuCount-icount">{{item.icount}}</div>


          <el-popconfirm
@ -428,6 +428,13 @@
   margin-right: 18px;
    color: #9e9e9e;
  }
+  .menuCount-icount{
+    margin-right: 18px;
+    color: #9e9e9e;
+    float: right;
+  }
+
+



--- a/ruoyi-ui/src/views/daohang/index/index.vue
+++ b/ruoyi-ui/src/views/daohang/index/index.vue
@ -0,0 +1,721 @@
+<template>
+<!--  <div :style="imageStr">-->
+  <div :style="imageStr">
+<!--    <div :style="imageStr"></div>-->
+
+    <!--    <div class="index-top"></div>-->
+
+    <!--    &lt;!&ndash;github&ndash;&gt;-->
+    <!--    <a @click="zreaZtree" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub">-->
+    <!--      <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#008000; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">-->
+    <!--        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>-->
+    <!--        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>-->
+    <!--      </svg>-->
+    <!--    </a>-->
+    <!--    <div class="sousou">-->
+    <!--&lt;!&ndash;      //搜索&ndash;&gt;-->
+    <!--      <div style="width: 700px;">-->
+    <!--&lt;!&ndash;        <div >&ndash;&gt;-->
+    <!--&lt;!&ndash;          <div class="choice-top notcopy" v-for="iconlist in iconlist">&ndash;&gt;-->
+    <!--&lt;!&ndash;            <el-tooltip  :visible-arrow="visiblearro" :enterable="enterable" class="item"  effect="dark" :content="iconlist.title" placement="top" >&ndash;&gt;-->
+    <!--&lt;!&ndash;            <div @click="sendEventDataTop($event)" :data-icon="iconlist.icon"><img  :ng-src="'https://favicon.lucq.fun/?url='+iconlist.icon" err-src="./images/default.ico"  ng-click="detailBookmark(bookmark);$event.stopPropagation()" :src="'https://favicon.lucq.fun/?url='+iconlist.icon"  ></div>&ndash;&gt;-->
+    <!--&lt;!&ndash;            </el-tooltip>&ndash;&gt;-->
+    <!--&lt;!&ndash;          </div>&ndash;&gt;-->
+
+    <!--&lt;!&ndash;        </div>&ndash;&gt;-->
+
+    <!--        <div style="margin-top: 15px;">-->
+    <!--          <el-input placeholder="百度一下" v-model="sousou" class="sousoucss notcopy" ref="sousouref">-->
+    <!--            <img @click="IsCord()"  slot="prefix"  :src="sousouicon" style="width: 20px;height: 20px;position: absolute;top: 50%;margin-top: -10px;">-->
+    <!--             <el-button  type="primary" slot="append" icon="el-icon-search" style="width: 80px"  @click="getUrl"></el-button>-->
+    <!--          </el-input>-->
+    <!--        </div>-->
+
+    <!--        <transition name="el-zoom-in-top">-->
+    <!--            <el-card class="box-card notcopy" v-show="isSousouCard" style="width: 100%;opacity: 0.7;margin-top: 10px;height:250px;overflow:auto">-->
+
+    <!--              <div class="choice" v-for="iconlist in iconlist" >-->
+    <!--            <div  @click="sendEventData($event)" :data-icon="iconlist.icon"><img err-src="https://favicon.lucq.fun/?url=https://www.5118.com/"  class="sousouicon"  :ng-src="'https://favicon.lucq.fun/?url='+iconlist.icon"  :src="'https://favicon.lucq.fun/?url='+iconlist.icon"  ><span>{{iconlist.title}}</span></div>-->
+    <!--              </div>-->
+    <!--            </el-card>-->
+
+    <!--        </transition>-->
+    <!--      </div>-->
+    <!--    </div>-->
+
+
+    <el-container style="" class="notCopyText">
+      <el-header height="55px" class="header-top">
+        <div class="top-icon-list">
+          <i class="el-icon-setting"></i>
+          <i class="el-icon-sunrise-1"></i>
+          <i class="el-icon-moon-night"></i>
+        </div>
+
+      </el-header>
+      <el-header height="200px" class="header-below">
+
+
+        <!--        <el-input v-model="input" placeholder="请输入内容"></el-input>-->
+        <div style="min-width: 500px;margin-top: 80px">
+          <el-input placeholder="百度一下" v-model="sousou" class="sousoucss notcopy " ref="sousouref">
+            <img @click="IsCord()" slot="prefix" :src="sousouicon"
+                 style="width: 20px;height: 20px;position: absolute;top: 50%;margin-top: -10px;">
+            <!--            <el-button  type="primary" slot="append" icon="el-icon-search" style="width: 80px"  @click="getUrl"></el-button>-->
+          </el-input>
+        </div>
+
+      </el-header>
+      <el-container style=" padding-top: 15px"  >
+
+        <!-- 左侧-->
+        <el-aside class="mains-left mbl" width="400px" >
+          <div class="label-title">
+            <div class="title">
+              <el-dropdown trigger="click">
+      <span class="el-dropdown-link menu-list" >
+        最新书签<i class="el-icon-caret-bottom el-icon--right"></i>
+      </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+
+            <div class="status">
+              <span>最新</span>
+              <el-divider direction="vertical"></el-divider>
+              <span>热度</span>
+            </div>
+          </div>
+          <el-divider class="mians-hr"></el-divider>
+          <div class="contenList" v-infinite-scroll="load" style="overflow:auto">
+            <div v-for="o in count" :key="o" class="bookmarContext item">
+
+              <div class="bookmar-title text-lenght">
+                {{'阿达瓦发我的发我法师法师法师法师法挖的挖的挖的挖的挖的挖的挖列表内容 ' + o }}
+              </div>
+              <div class="bookmark-tag-Time">
+                <div class="b-left text-lenght">#java #php 我是个簡介</div>
+                <div class="b-center">22小时前</div>
+                <div class="b-right">
+                  <i class="el-icon-view">22</i>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+        </el-aside>
+
+
+
+      <!-- 中间-->
+        <el-main class="mains mbl" width="500px" >
+          <div class="mains-title">
+            <div class="title">
+              常用导航
+            </div>
+            <div class="status">
+              <span>旧故</span>
+              <el-divider direction="vertical"></el-divider>
+              <span>草木</span>
+            </div>
+          </div>
+          <el-divider class="mians-hr"></el-divider>
+          <div class="contenList" v-infinite-scroll="load" style="overflow:auto;">
+            <el-row :gutter="10">
+              <draggable
+                class="dragArea list-group"
+                :list="list1"
+                :group="people"
+                @change="log"
+              >
+
+              <el-col  :xs="12" :sm="4" v-for="item in iconlist" :key="item.id" class="bookmarkUrl urlWd " @click.native="urlOpen(item.icon)">
+                <div class="bookmarkImg">
+                <img err-src="https://favicon.lucq.fun/?url=https://www.5118.com/" class="sousouicon"
+                     :ng-src="'https://favicon.lucq.fun/?url='+item.icon"
+                     :src="'https://favicon.lucq.fun/?url='+item.icon" />
+                </div>
+                <div class="bookmarkTitle">
+
+                  <div class="titles">{{item.title }}</div>
+                  <div class="desc text-lenght">我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介</div>
+
+
+
+                </div>
+
+              </el-col>
+
+              </draggable>
+            </el-row>
+          </div>
+        </el-main>
+
+
+        <!-- 右侧-->
+        <el-aside class="mains-right mbl" width="400px">
+<!--          <div :style="imageStr"></div>-->
+        </el-aside>
+
+      </el-container>
+    </el-container>
+
+  </div>
+</template>
+
+
+<script>
+  import draggable from "vuedraggable";
+  export default {
+    components: {draggable},
+    data: function () {
+      return {
+        count: 15,
+        enterable: false,
+        visiblearro: false,//提示箭头
+        curMenu: null,
+        sousou: '百度一下',//搜索文字
+        zTree_Menu: null,
+        isSousouCard: false,//切换搜索源
+        iconurl: 'https://favicon.lucq.fun/?url=',
+        sousouicon: 'https://favicon.lucq.fun/?url=https://www.baidu.com/',//默认搜索图片
+        sousou: '',
+        sousouVlaue: '百度一下',
+        imgSrc: 'http://img.netbian.com/file/2020/0904/de2f77ed1090735b441ba5e4c2b460ca.jpg',
+        iconlist: [
+          {iconID: "1", icon: "https://www.baidu.com", title: "百度"},
+          {iconID: "2", icon: "https://www.google.com/", title: "谷歌搜索引擎"},
+          {iconID: "3", icon: "https://www.so.com/", title: "搜索"},
+          {iconID: "4", icon: "https://www.sogou.com/", title: "搜狗"},
+          {iconID: "5", icon: "https://cn.bing.com/", title: "必应"},
+          {iconID: "6", icon: "https://yz.m.sm.cn/", title: "神马搜索"},
+          {iconID: "7", icon: "https://www.jd.com/", title: "京东"},
+          {iconID: "8", icon: "https://taobao.com/", title: "淘宝"},
+          {iconID: "7", icon: "https://y.qq.com", title: "QQ音乐"},
+          {iconID: "7", icon: "https://weibo.com/", title: "微博"},
+          {iconID: "7", icon: "http://www.dianping.com/", title: "大众点评"},
+          {iconID: "7", icon: "https://mail.sina.com.cn/", title: "新浪邮箱"},
+          {iconID: "7", icon: "http://caiyunapp.com", title: "彩云天气"},
+          {iconID: "7", icon: "https://www.yhd.com/", title: "一号店"},
+          {iconID: "7", icon: "https://www.mi.com/", title: "小米"},
+          {iconID: "7", icon: "https://www.tianyancha.com/", title: "天眼查"},
+          {iconID: "7", icon: "https://translate.google.com/", title: "谷歌翻译"},
+          {iconID: "7", icon: "https://open.163.com/", title: "网易公开课"},
+          {iconID: "7", icon: "http://mooc.org/", title: "MOCC"},
+          {iconID: "7", icon: "https://www.w3school.com.cn/", title: "w3school"},
+          {iconID: "7", icon: "https://segmentfault.com/", title: "segmentfault"},
+          {iconID: "7", icon: "https://www.y-english.org/", title: "云英语"},
+          {iconID: "7", icon: "https://www.tutorialspoint.com/", title: "Tutorials Point"},
+          {iconID: "7", icon: "https://github.com/", title: "GitHub"},
+          {iconID: "7", icon: "https://mail.sina.com.cn/", title: "新浪邮箱"},
+          {iconID: "7", icon: "https://movie.douban.com/", title: "豆瓣电影"},
+        ],
+        imageStr: {
+          backgroundImage: 'url(https://images.unsplash.com/photo-1574001412367-cf5f9756bb32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMTQ5NzR8MHwxfGFsbHwzfHx8fHx8MXx8MTYzNjczODIwMw)',
+          width: '100%',
+          height: '100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '100% 100%'
+        }
+      }
+    },
+    methods: {
+      urlOpen(url){
+        console.log(url)
+        window.open(url);
+      },
+      load() {
+        if(this.count >=40){
+          return;
+        }
+        this.count += 5
+      },
+      //显示隐藏 数据源
+      IsCord: function () {
+        var that = this;
+        that.isSousouCard = !that.isSousouCard;
+      },
+      //切换搜索源
+      sendEventData: function (ev) {
+        var that = this;
+        var node = ev.currentTarget;
+        that.sousouicon = that.iconurl + node.dataset.icon;
+        that.isSousouCard = !that.isSousouCard;
+        that.$refs.sousouref.focus()
+      },
+      sendEventDataTop: function (ev) {
+        var that = this;
+        var node = ev.currentTarget;
+        that.sousouicon = that.iconurl + node.dataset.icon;
+        that.$refs.sousouref.focus()
+
+      },
+
+
+      //新打开新窗口
+      getUrl: function () {
+        var that = this;
+        if (that.sousou != null && that.sousou != undefined && that.sousou != '') {
+          var url = that.sousouicon + that.sousou;
+          window.open(url);
+          //window.location.href=url;
+        } else {
+          // that.$notify({
+          //   title:'提示',
+          //   type: 'success',
+          //   message: '搜了个寂寞,内容不能为空!',
+          // });
+          that.$refs.sousouref.focus()
+        }
+
+      }
+    },
+    mounted() {
+      var that = this;
+      //光标自动选中
+      that.$refs.sousouref.focus()
+
+
+    },
+
+  }
+</script>
+<style scoped>
+  .bookmarkUrl {
+    margin-bottom: 10px;
+    margin-left: 11px;
+    height: 70px;
+    border-radius: 4px;
+    line-height: 50px;
+    border: 1px solid rgba(255,255,255,0.2);
+    display: flex;
+    padding-top: 10px;
+  }
+  .bookmarkImg{
+    width: 40px;
+    height: 40px;
+    /*border: 1px solid red;*/
+    line-height: 30px;
+    float: left;
+    border-radius: 50%;
+    background:rgba(255,255,255,0.2);
+    margin-right: 3px;
+    margin-top: 4px;
+  }
+  .bookmarkImg img{
+    margin-left: 10px;
+    margin-top: 10px;
+    width: 20px;
+    height: 20px;
+
+  }
+  .bookmarkTitle{
+    width: 70%;
+  }
+  .bookmarkTitle .titles{
+
+    font-size: 12px;
+    height: 25px;
+    line-height: 25px;
+
+  }
+  .bookmarkTitle .desc{
+    height: 25px;
+    line-height: 25px;
+  }
+
+
+  .bookmarkUrl:hover{
+    background:rgba(255,255,255,0.2);
+  }
+  .bookmarContext{
+    border-radius: 2px;
+    padding: 7px;
+  }
+  .bookmarContext:hover{
+    background:rgba(255,255,255,0.4);
+}
+
+
+
+
+
+
+
+
+
+  .mains-left {
+    margin-left: 10px;
+    padding: 7px 7px;
+    /*background-color:transparent;*/
+
+  }
+
+  .mains-right {
+    margin-right: 10px;
+    padding: 7px 7px;
+  }
+
+  .header-top {
+    /*background-color: #1e80ff;*/
+  }
+
+  .header-below {
+    min-width: 800px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    /*background-color: #1e80ff;*/
+  }
+
+  .label-title {
+    display: flex;
+    flex-direction: row;
+    height: 35px;
+    font-size: 14px;
+    align-items: center;
+  }
+
+  .mains-title .status {
+
+  }
+
+  .mains {
+    padding: 7px 7px;
+    margin-left: 10px;
+    margin-right: 10px;
+    /*background-color: #ffffff;*/
+
+  }
+
+  .mains-title {
+    font-size: 14px;
+    display: flex;
+    flex-direction: row;
+    height: 35px;
+    font-size: 14px;
+    align-items: center;
+  }
+
+  .title {
+    width: 400px;
+    float: left;
+  }
+  .menu-list{
+    width: 100px;
+    display: block;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    /*background-color: #E8F3FF;*/
+    background:rgba(255,255,255,0.2);
+    color: #5289FF;
+  }
+
+  .label-title .status {
+    width: 120px;
+    float: right;
+  }
+
+  .contenList {
+    font-size: 14px;
+    height: 580px;
+    padding-bottom: 150px;
+  }
+
+  .mians-hr {
+    margin-top: 2px;
+    margin-bottom: 8px;
+  }
+  .top-icon-list{
+    color: #ffffff;
+    float: right;
+    width: 140px;
+    font-size: 30px;
+    line-height: 55px;
+    opacity: 0.7;
+  }
+  .top-icon-list i{
+    margin-left: 10px;
+  }
+
+  .bookmar-title{
+    width: 100%;
+    height: 30px;
+  }
+
+
+  .bookmark-tag-Time{
+    width: 100%;
+    display: flex;
+    height: 30px;
+    color: #909AA5;
+  }
+  .bookmark-tag-Time .b-right{
+
+  }
+
+  .bookmar-title{
+    font-size: 15px;
+    font-weight: 500;
+  }
+
+  .b-left{
+
+  }
+
+
+
+</style>
+<style>
+  /*文本超长变成点*/
+  .text-lenght{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  /*禁止复制*/
+  .notCopyText{
+    -moz-user-select: none; /* Firefox私有属性 */
+    -webkit-user-select: none; /* WebKit内核私有属性 */
+    -ms-user-select: none; /* IE私有属性(IE10及以后) */
+    -khtml-user-select: none; /* KHTML内核私有属性 */
+    -o-user-select: none; /* Opera私有属性 */
+    user-select: none; /* CSS3属性 */
+  }
+  /*毛玻璃*/
+  .maoboli {
+    background: hsla(0, 0%, 100%, 0.11) border-box;
+    overflow: hidden;
+    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.10) inset, 0 .3em .3em rgba(0, 0, 0, 0.15);
+    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
+  }
+
+  .maoboli::before {
+    content: '';
+    z-index: -1;
+    -webkit-filter: blur(6.4px);
+    filter: blur(10px);
+  }
+  .mbl{
+    background:rgba(255,255,255,0.2);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+  }
+</style>
+<style scoped>
+
+
+  @media (min-width: 1800px) {
+    .urlWd {
+      width: 14.8% !important;
+    }
+  }
+
+  @media screen and (min-width: 1500px) and (max-width: 1800px) {
+    .urlWd {
+      width: 23% !important;
+    }
+  }
+
+  @media screen and (min-width: 1400px) and (max-width: 1499px) {
+    .urlWd {
+      width: 30% !important;
+    }
+  }
+  @media screen and (min-width: 1200px) and (max-width: 1399px) {
+    .urlWd {
+      width: 30% !important;
+    }
+  }
+
+
+  @media (max-width: 1200px) {
+    .urlWd {
+      width: 95% !important;
+    }
+  }
+</style>
+<style scoped>
+
+
+  .main {
+    /*font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;*/
+    /*display: flex;*/
+    /*justify-content: center;*/
+    /*!*align-items: center;*!*/
+    /*padding-top: 20%;*/
+    /*height: 100%;*/
+    /*background-color: #f7f7f7;*/
+    /*background-image: url("https://s1.ax1x.com/2020/08/11/aOHstP.jpg");*/
+    /*background-size: cover;*/
+  }
+
+  /*.sousou{*/
+  /*  display: flex;*/
+  /*  flex-direction: row;  !* 子元素横向排列 *!*/
+  /*  justify-content: center; !* 相对父元素水平居中 *!*/
+  /*  align-items: center; !*  子元素相对父元素垂直居中 *!*/
+  /*}*/
+
+  /*.sousoucss{*/
+  /*  opacity: 0.6;*/
+  /*}*/
+  /*.sousoucss input{*/
+  /*  border:0;*/
+  /*}*/
+
+  /*.sousoucss button:hover{*/
+  /*  color: #1c84c6;*/
+  /*}*/
+  /*.el-input-group__append{*/
+  /*  background-color: #1f2d3d!important;*/
+  /*  opacity: 0.7;*/
+  /*}*/
+
+
+  .choice {
+    margin: 5px 5px 5px 5px;
+    background-color: #FFFFFF;
+
+  }
+
+  .choice div {
+    float: left;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 5px;
+    text-align: center;
+    margin: 5px 5px 5px 5px;
+    /*box-shadow:0 0 1px #000 ;*/
+    background: none #fff;
+    border: 1px solid rgba(34, 36, 38, .15);
+    color: rgba(0, 0, 0, .87);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    font-size: 14px;
+    font-weight: 700;
+    /*font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;*/
+    align-items: center;
+    vertical-align: middle;
+    width: fit-content;
+    /*width:-webkit-fit-content;*/
+    width: -moz-fit-content;
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .choice div i {
+    margin-right: 1px;
+  }
+
+  .choice div:hover {
+    color: #1f1f1f;
+
+  }
+
+  /**顶部*/
+  .index-top {
+    width: 100%;
+    height: 50px;
+    background-color: #3c5d5b;
+    position: absolute;
+    top: 0;
+    opacity: 0.2;
+
+  }
+
+  /*搜索 */
+  .sousouicon {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    margin-right: 3px;
+    margin-bottom: 3px;
+
+  }
+
+  /*搜索top 上面的*/
+  .choice-top img {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    margin-bottom: 3px;
+  }
+
+  .choice-top div {
+    float: left;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 5px;
+    text-align: center;
+    margin: 5px 5px 5px 5px;
+    background-color: #3c5d5b;
+    border: 1px solid rgba(34, 36, 38, .15);
+    padding-left: 12px;
+    padding-right: 12px;
+    opacity: 0.8;
+
+  }
+
+
+  /**滚动条美化*/
+
+  /*滚动条的宽度*/
+
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 3px;
+    /*background-color: red;*/
+  }
+
+  /*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
+
+  ::-webkit-scrollbar-track {
+    width: 6px;
+    background-color: #fff;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+
+  /*滚动条的设置*/
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #606d71;
+    background-clip: padding-box;
+    min-height: 28px;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+
+  }
+
+  /*滚动条移上去的背景*/
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #7c6fff;
+  }
+
+  /*滚动条美化结束*/
+
+
+  /*禁止复制*/
+  .notcopy {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+</style>
+