<template>
  <div class="box" ref="box">

    <el-container class="box" ref="box">
      <transition name="el-zoom-in-left">
        <el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left isaside"
                  style="overflow-x:hidden;overflow-y: hidden;">
          <el-header class="aside-logo ">
            <!--        <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>-->
            <div class="logoname">
              <span>藏趣云书签</span>
            </div>
            <div class="logoright ">
              <i class="el-icon-plus mdui-ripple"/>
            </div>

          </el-header>

          <div class="main-right">

            <div class="aside-title" @click="goBookmarkList"><i class="el-icon-s-tools"></i><span>最新书签</span></div>
<!--            <div class="aside-title"><i class="el-icon-help"></i><span>发现</span></div>-->
<!--            <div class="aside-title"><i class="el-icon-s-platform"></i><span>任意门</span></div>-->
            <div class="aside-title"><i class="el-icon-message-solid"></i><span>收件箱</span></div>
            <div class="reminder">我的收藏</div>
            <div class="areaTree">
              <ul id="treeDemo" class="ztree"></ul>
            </div>
            <div class="reminder">工具箱</div>
            <div class="aside-title"><i class="el-icon-s-flag" style="color: red"></i><span>RSS订阅</span></div>
            <div class="aside-title" @click="goUserTagAll"><i class="el-icon-s-management"></i><span>标签管理</span></div>
            <div class="aside-title" @click="gorecycle"><i class="el-icon-delete-solid"></i><span>回收站</span></div>
            <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="NqEdit"><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>


<!--          <div class="tabBar">-->
<!--            <div class=""-->
<!--                 style="width: 100%;height: 30px;background-color: #cacaca;float: left;text-align: center;line-height: 30px">-->
<!--              <i class="el-icon-folder-checked"></i>-->
<!--              <span>新的收藏集</span>-->
<!--            </div>-->

<!--            <div class="tabBarList" >-->
<!--              <div><i class="el-icon-folder-checked"></i></div>-->
<!--              <div><i class="el-icon-folder-checked"></i></div>-->
<!--              <div><i class="el-icon-s-tools"></i></div>-->
<!--            </div>-->

<!--          </div>-->


        </el-aside>


<!--              <el-footer class="aside-navigation">-->
<!--              </el-footer>-->


      </transition>

      <div class="isresize" style="cursor:w-resize">
<!--        <i class="el-icon-caret-top"></i>-->
      </div>
      <!--    <el-drawer-->
      <!--      title="我是标题"-->
      <!--      :visible.sync="drawer"-->
      <!--      :direction="direction"-->
      <!--      :modal-append-to-body="drawerS"-->
      <!--      :append-to-body="isShowZtree"-->
      <!--    >-->
      <!--      <span>我来啦!</span>-->
      <!--    </el-drawer>-->


      <!--    <el-button @click="isShowZtree = !isShowZtree">Click Me</el-button>-->


      <el-container class="mid">

        <el-main class="bookmarkmain">

          <router-view :key="$route.query.t"></router-view>


        </el-main>


      </el-container>
<!--      <el-aside class="mianUrl">-->
<!--        <el-header class="mianUrl-top" style="height: 50px">-->
<!--          <div class="mianUrl-top-left">-->
<!--            <i class="el-icon-folder-delete"></i>-->
<!--            <i class="el-icon-rank"></i>-->
<!--          </div>-->
<!--          <div class="mianUrl-top-right">-->
<!--            <i class="el-icon-edit-outline"></i>-->
<!--            <i class="el-icon-position"></i>-->
<!--          </div>-->
<!--        </el-header>-->
<!--        <div class="mianUrl-botoom">-->
<!--          <iframe class="openurl" :src="gourl"/>-->

<!--        </div>-->
<!--      </el-aside>-->


    </el-container>


    <!--  编辑弹窗-->
    <el-dialog :title="title" :visible.sync="open" width="500px" class="menuedit" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="menuName">
          <div class="labelname">菜单名称</div>
          <el-input class="custom-input" v-model="form.menuName" placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item prop="menuIcon">
          <div class="labelname">菜单图标</div>
          <el-input class="custom-input" v-model="form.menuIcon" placeholder="请输入菜单图标"/>
        </el-form-item>
        <el-form-item prop="parentId">
          <div class="labelname">上级菜单</div>
          <treeselect class="menutreeselect" v-model="form.parentId" :options="menuOptions" :normalizer="normalizer"/>
        </el-form-item>


        <!--      <el-form-item  prop="menuOrder">-->
        <!--        <div class="labelname">排序</div>-->
        <!--        <el-input class="custom-input" v-model="form.menuOrder" placeholder="请输入菜单排序" />-->
        <!--      </el-form-item>-->

        <el-form-item prop="menuOrder">
          <div class="labelname">排序(小到大)</div>
          <br/>
          <el-input-number v-model="form.menuOrder" placeholder="计数器"></el-input-number>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="deleteMmenu(form.menuId)">删除</el-button>
        <el-button type="primary" round @click="submitForm">确定</el-button>
        <el-button round @click="cancel">取消</el-button>

      </div>

    </el-dialog>


<!--    &lt;!&ndash; 添加链接&ndash;&gt;-->
<!--    &lt;!&ndash; 添加或修改书签管理对话框 &ndash;&gt;-->
<!--    <el-dialog title="添加连接" :visible.sync="addopen" width="500px" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="书签地址" prop="url">-->
<!--          <el-input v-model="form.url" placeholder="请输入书签地址"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="书签标题" prop="title">-->
<!--          <el-input v-model="form.title" placeholder="请输入书签标题"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="书签描述" prop="description">-->
<!--          <el-input v-model="form.description" type="textarea" placeholder="请输入书签描述"-->
<!--                    :autosize="{minRows: 3, maxRows:4}" :style="{width: '100%'}"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item prop="parentId">-->
<!--          <div class="labelname">分类菜单</div>-->
<!--          <treeselect class="menutreeselect" v-model="form.menuId" :options="menuOptions" :normalizer="normalizer"/>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="书签标签" prop="label">-->
<!--          <el-tag-->
<!--            class="bookmarktag"-->
<!--            v-for="tag in 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>-->

<!--        &lt;!&ndash;        <el-form-item label="所属目录" prop="menuId">&ndash;&gt;-->
<!--        &lt;!&ndash;          <el-input v-model="form.menuId" placeholder="请选择上级目录" />&ndash;&gt;-->
<!--        &lt;!&ndash;        </el-form-item>&ndash;&gt;-->


<!--        &lt;!&ndash;        0公开显示 1隐藏显示 2好友显示&ndash;&gt;-->
<!--        <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 type="primary" @click="addbookmark">确 定</el-button>-->
<!--        <el-button @click="bookmarkcancel">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
    <!--背景特效-->
    <canvas id="evanyou"></canvas>

  </div>


</template>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style scoped src="../ztree/demo.css"/>
<script>
  // 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
  import {addBookmark} from "@/api/bookmark/bookmark";

  import {listMenu, getMenu, delMenu, addMenu, updateMenu, exportMenu} from "@/api/bookmark/menu";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  // import "../ztree/jquery-1.4.4.min.js"
  import "../ztree/jquery.ztree.core.js"
  // import "../ztree/demo.css"
  import "../ztree/zTreeStyle.css"
  import "../ztree/jquery.ztree.exedit.js"
  import {listMenuByUserId} from "@/api/bookmark/menu";

  export default {
    name: 'areaTree',
    components: {
      Treeselect
    },

    data: function () {
      return {
        queryParams: {
          userId: undefined,
          menuName: undefined,
          menuUrl: undefined,
          menuIcon: undefined,
          parentId: undefined,
          menuOrder: undefined,
        },
        bookmarkParams: {
          pageNum: 1,
          pageSize: 15,
          userid: undefined,
          title: undefined,
          url: undefined,
          urls: undefined,
          description: undefined,
          image: undefined,
          label: undefined,
          menuId: undefined,
          zcount: undefined,
          idelete: undefined,
          start: undefined,
          sqTags: []
        },
        // 书签菜单树选项
        menuOptions: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层 编辑添加
        open: false,
        //添加连接
        addopen: false,
        //书签URL
        bookamkrurl: '',
        //添加url
        addurlopen: true,
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        drawerS: false,
        drawer: false,
        direction: 'ltr',
        swictxuanran: true,
        sousuo: '',//搜索书签
        enterable: false,
        isShowZtree: true,//ztree树显示
        expandAll: false,//是否展开ztree树
        curMenu: null,
        zTree_Menu: null,
        setting: {
          view: {
            showLine: false,
            showIcon: true,
            selectedMulti: false,
            dblClickExpand: false,
            addHoverDom: this.addHoverDom,
            removeHoverDom: this.removeHoverDom,
            addDiyDom: this.addDiyDom,
          },
          check: {
            enable: true,
            nocheckInherit: false,
            chkboxType: {"Y": "p", "N": "s"}
          },
          data: {
            simpleData: {
              enable: true
            }
          },
          callback: {
            beforeClick: this.beforeClick,
            onClick: this.OnClickzTree,
            // onCheck: this.zTreeOnCheck,

          }
        },
        zNodes: [],
        bookmark: [],
        inputVisible: false, //标签
        inputValue: '', //标签
        tagcount: 0, //标签虚拟ID
        sqTags: [],
        bookmarkstatus: [{
          "name": "公开",
          "value": 1
        }, {
          "name": "私密",
          "value": 2
        }],
        bookmarktype: [{
          "name": "已阅读",
          "value": 1
        }, {
          "name": "稍后读",
          "value": 2
        }, {
          "name": "待续读",
          "value": 3
        }],
        asideHeight: {
          height: "",
          width: "",
        },

      }
    },
    mounted() {
      window['editBookmark'] = (e) => {
        this.editBookmark(e)
      },
        //div拖动
        this.dragControllerDivs();
      /**背景彩带**/
      // this.backgroundcss();

      /**ebabyou 背景特效**/
      // this.evanyoucss();

      /**粒子球特效**/
      // this.backgroundparticle();
    },
    created() {
      var that = this;
      //书签菜单
      that.getList();
      window.addEventListener('resize', this.getHeight);
      this.getHeight()
    },

    methods: {
      /**粒子球背景特效**/
      backgroundparticle: function () {
        !function () {
          //封装方法，压缩之后减少文件大小
          function get_attribute(node, attr, default_value) {
            return node.getAttribute(attr) || default_value;
          }

          //封装方法，压缩之后减少文件大小
          function get_by_tagname(name) {
            return document.getElementsByTagName(name);
          }

          //获取配置参数
          function get_config_option() {
            var scripts = get_by_tagname("script"),
              script_len = scripts.length,
              script = scripts[script_len - 1]; //当前加载的script
            return {
              l: script_len, //长度，用于生成id用
              z: get_attribute(script, "zIndex", -1), //z-index
              o: get_attribute(script, "opacity", 0.8), //opacity
              c: get_attribute(script, "color", "255,255,255"), //color
              n: get_attribute(script, "count", 50) //count数量
            };
          }

          //设置canvas的高宽
          function set_canvas_size() {
            canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
              canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
          }

          //绘制过程
          function draw_canvas() {
            context.clearRect(0, 0, canvas_width, canvas_height);
            //随机的线条和当前位置联合数组
            var e, i, d, x_dist, y_dist, dist; //临时节点
            //遍历处理每一个点
            random_points.forEach(function (r, idx) {
              r.x += r.xa,
                r.y += r.ya, //移动
                r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
                r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
                context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
              //从下一个点开始
              for (i = idx + 1; i < all_array.length; i++) {
                e = all_array[i];
                // 当前点存在
                if (null !== e.x && null !== e.y) {
                  x_dist = r.x - e.x; //x轴距离 l
                  y_dist = r.y - e.y; //y轴距离 n
                  dist = x_dist * x_dist + y_dist * y_dist; //总距离, m

                  dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
                    d = (e.max - dist) / e.max,
                    context.beginPath(),
                    context.lineWidth = d / 2,
                    context.strokeStyle = "#000000",
                    context.moveTo(r.x, r.y),
                    context.lineTo(e.x, e.y),
                    context.stroke());
                }
              }
            }), frame_func(draw_canvas);
          }

          //创建画布，并添加到body中
          var the_canvas = document.createElement("canvas"), //画布
            config = get_config_option(), //配置
            canvas_id = "c_n" + config.l, //canvas id
            context = the_canvas.getContext("2d"), canvas_width, canvas_height,
            frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
              window.setTimeout(func, 1000 / 40);
            }, random = Math.random,
            current_point = {
              x: null, //当前鼠标x
              y: null, //当前鼠标y
              max: 20000 // 圈半径的平方
            },
            all_array;
          the_canvas.id = canvas_id;
          the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
          get_by_tagname("body")[0].appendChild(the_canvas);

          //初始化画布大小
          set_canvas_size();
          window.onresize = set_canvas_size;
          //当时鼠标位置存储，离开的时候，释放当前位置信息
          window.onmousemove = function (e) {
            e = e || window.event;
            current_point.x = e.clientX;
            current_point.y = e.clientY;
          }, window.onmouseout = function () {
            current_point.x = null;
            current_point.y = null;
          };
          //随机生成config.n条线位置信息
          for (var random_points = [], i = 0; config.n > i; i++) {
            var x = random() * canvas_width, //随机位置
              y = random() * canvas_height,
              xa = 2 * random() - 1, //随机运动方向
              ya = 2 * random() - 1;
            // 随机点
            random_points.push({
              x: x,
              y: y,
              xa: xa,
              ya: ya,
              max: 6000 //沾附距离
            });
          }
          all_array = random_points.concat([current_point]);
          //0.1秒后绘制
          setTimeout(function () {
            draw_canvas();
          }, 100);
        }();
      },

      /**evanyou 背景特效**/
      evanyoucss: function () {
        var c = document.getElementById('evanyou'),
          x = c.getContext('2d'),
          pr = window.devicePixelRatio || 1,
          w = window.innerWidth,
          h = window.innerHeight,
          f = 90,
          q,
          m = Math,
          r = 0,
          u = m.PI * 2,
          v = m.cos,
          z = m.random;
        c.width = w * pr;
        c.height = h * pr;
        x.scale(pr, pr);
        x.globalAlpha = 0.6;

        function evanyou() {
          x.clearRect(0, 0, w, h)
          q = [{x: 0, y: h * .7 + f}, {x: 0, y: h * .7 - f}]
          while (q[1].x < w + f) d(q[0], q[1])
        }

        function d(i, j) {
          x.beginPath()
          x.moveTo(i.x, i.y)
          x.lineTo(j.x, j.y)
          var k = j.x + (z() * 2 - 0.25) * f,
            n = y(j.y)
          x.lineTo(k, n)
          x.closePath()
          r -= u / -50
          x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
          x.fill()
          q[0] = q[1]
          q[1] = {x: k, y: n}
        }

        function y(p) {
          var t = p + (z() * 2 - 1.1) * f
          return (t > h || t < 0) ? y(p) : t
        }

        document.onclick = evanyou
        document.ontouchstart = evanyou
        evanyou();
      },
      /**div拖拽宽度**/
      dragControllerDivs: function () {
        console.log("开始拖拽")
        var resize = document.getElementsByClassName('isresize');
        var left = document.getElementsByClassName('main-right');
        var mid = document.getElementsByClassName('el-container mid is-vertical');
        var box = document.getElementsByClassName('box');
        var transition = document.getElementsByClassName('transition-box');

        for (let i = 0; i < resize.length; i++) {
          // 鼠标按下事件
          resize[i].onmousedown = function (e) {
            //颜色改变提醒
            resize[i].style.background = 'transparent';
            var startX = e.clientX;
            console.log("鼠标按下后：" + e.clientX)
            resize[i].left = resize[i].offsetLeft;
            console.log("鼠标按下后：" + resize[i].left)
            console.log("鼠标按下后：" + resize[i].offsetLeft)
            // 鼠标拖动事件
            document.onmousemove = function (e) {
              var endX = e.clientX;
              var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
              var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

              if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
              if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

              resize[i].style.left = moveLen; // 设置左侧区域的宽度

              for (let j = 0; j < left.length; j++) {
                left[j].style.width = moveLen + 'px';
                // this.asideHeight.width = moveLen + 'px';
                mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
              }
            };
            // 鼠标松开事件
            document.onmouseup = function (evt) {
              //颜色恢复
              resize[i].style.background = 'transparent';
              document.onmousemove = null;
              document.onmouseup = null;
              resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
            };
            resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
            return false;
          };
        }
      },
      /**背景特效彩带**/
      backgroundcss: function () {
        (function (name, factory) {
          if (typeof window === "object") {
            window[name] = factory();
          }
        })("Ribbons", function () {
          var _w = window, _b = document.body, _d = document.documentElement;
          var random = function () {
            if (arguments.length === 1) {
              if (Array.isArray(arguments[0])) {
                var index = Math.round(random(0, arguments[0].length - 1));
                return arguments[0][index];
              }
              return random(0, arguments[0]);
            } else if (arguments.length === 2) {
              return Math.random() * (arguments[1] - arguments[0]) + arguments[0];
            }
            return 0;
          };
          var screenInfo = function (e) {
            var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
              height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
              scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
              scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
            return {
              width: width,
              height: height,
              ratio: width / height,
              centerx: width / 2,
              centery: height / 2,
              scrollx: scrollx,
              scrolly: scrolly
            };
          };
          var mouseInfo = function (e) {
            var screen = screenInfo(e), mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
              mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
            return {
              mousex: mousex,
              mousey: mousey,
              centerx: mousex - screen.width / 2,
              centery: mousey - screen.height / 2
            };
          };
          var Point = function (x, y) {
            this.x = 0;
            this.y = 0;
            this.set(x, y);
          };
          Point.prototype = {
            constructor: Point, set: function (x, y) {
              this.x = x || 0;
              this.y = y || 0;
            }, copy: function (point) {
              this.x = point.x || 0;
              this.y = point.y || 0;
              return this;
            }, multiply: function (x, y) {
              this.x *= x || 1;
              this.y *= y || 1;
              return this;
            }, divide: function (x, y) {
              this.x /= x || 1;
              this.y /= y || 1;
              return this;
            }, add: function (x, y) {
              this.x += x || 0;
              this.y += y || 0;
              return this;
            }, subtract: function (x, y) {
              this.x -= x || 0;
              this.y -= y || 0;
              return this;
            }, clampX: function (min, max) {
              this.x = Math.max(min, Math.min(this.x, max));
              return this;
            }, clampY: function (min, max) {
              this.y = Math.max(min, Math.min(this.y, max));
              return this;
            }, flipX: function () {
              this.x *= -1;
              return this;
            }, flipY: function () {
              this.y *= -1;
              return this;
            }
          };
          var Factory = function (options) {
            this._canvas = null;
            this._context = null;
            this._sto = null;
            this._width = 0;
            this._height = 0;
            this._scroll = 0;
            this._ribbons = [];
            this._options = {
              colorSaturation: "80%",
              colorBrightness: "60%",
              colorAlpha: 0.65,
              colorCycleSpeed: 6,
              verticalPosition: "center",
              horizontalSpeed: 200,
              ribbonCount: 4,
              strokeSize: 0,
              parallaxAmount: -0.5,
              animateSections: true
            };
            this._onDraw = this._onDraw.bind(this);
            this._onResize = this._onResize.bind(this);
            this._onScroll = this._onScroll.bind(this);
            this.setOptions(options);
            this.init();
          };
          Factory.prototype = {
            constructor: Factory, setOptions: function (options) {
              if (typeof options === "object") {
                for (var key in options) {
                  if (options.hasOwnProperty(key)) {
                    this._options[key] = options[key];
                  }
                }
              }
            }, init: function () {
              try {
                this._canvas = document.createElement("canvas");
                this._canvas.style["display"] = "block";
                this._canvas.style["position"] = "fixed";
                this._canvas.style["margin"] = "0";
                this._canvas.style["padding"] = "0";
                this._canvas.style["border"] = "0";
                this._canvas.style["outline"] = "0";
                this._canvas.style["left"] = "0";
                this._canvas.style["top"] = "0";
                this._canvas.style["width"] = "100%";
                this._canvas.style["height"] = "100%";
                this._canvas.style["z-index"] = "-1";
                this._canvas.style["background-color"] = "#ffffff";
                this._canvas.id = "bgCanvas";
                this._onResize();
                this._context = this._canvas.getContext("2d");
                this._context.clearRect(0, 0, this._width, this._height);
                this._context.globalAlpha = this._options.colorAlpha;
                // 这里可以设置是否随着窗口的滚动而滚动
                window.addEventListener("resize", this._onResize);
                window.addEventListener("scroll", this._onScroll);
                // 这里设置添加的位置
                var body_ = document.getElementsByTagName('body')[0];
                body_.appendChild(this._canvas);
              } catch (e) {
                console.warn("Canvas Context Error: " + e.toString());
                return;
              }
              this._onDraw();
            }, addRibbon: function () {
              var dir = Math.round(random(1, 9)) > 5 ? "right" : "left", stop = 1000, hide = 200, min = 0 - hide,
                max = this._width + hide, movex = 0, movey = 0, startx = dir === "right" ? min : max,
                starty = Math.round(random(0, this._height));
              if (/^(top|min)$/i.test(this._options.verticalPosition)) {
                starty = 0 + hide;
              } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
                starty = this._height / 2;
              } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
                starty = this._height - hide;
              }
              var ribbon = [], point1 = new Point(startx, starty), point2 = new Point(startx, starty), point3 = null,
                color = Math.round(random(0, 360)), delay = 0;
              while (true) {
                if (stop <= 0) break;
                stop--;
                movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
                movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
                point3 = new Point();
                point3.copy(point2);
                if (dir === "right") {
                  point3.add(movex, movey);
                  if (point2.x >= max) break;
                } else if (dir === "left") {
                  point3.subtract(movex, movey);
                  if (point2.x <= min) break;
                }
                ribbon.push({
                  point1: new Point(point1.x, point1.y),
                  point2: new Point(point2.x, point2.y),
                  point3: point3,
                  color: color,
                  delay: delay,
                  dir: dir,
                  alpha: 0,
                  phase: 0
                });
                point1.copy(point2);
                point2.copy(point3);
                delay += 4;
                color += this._options.colorCycleSpeed;
              }
              this._ribbons.push(ribbon);
            }, _drawRibbonSection: function (section) {
              if (section) {
                if (section.phase >= 1 && section.alpha <= 0) {
                  return true;
                }
                if (section.delay <= 0) {
                  section.phase += 0.02;
                  section.alpha = Math.sin(section.phase) * 1;
                  section.alpha = section.alpha <= 0 ? 0 : section.alpha;
                  section.alpha = section.alpha >= 1 ? 1 : section.alpha;
                  if (this._options.animateSections) {
                    var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
                    if (section.dir === "right") {
                      section.point1.add(mod, 0);
                      section.point2.add(mod, 0);
                      section.point3.add(mod, 0);
                    } else {
                      section.point1.subtract(mod, 0);
                      section.point2.subtract(mod, 0);
                      section.point3.subtract(mod, 0);
                    }
                    section.point1.add(0, mod);
                    section.point2.add(0, mod);
                    section.point3.add(0, mod);
                  }
                } else {
                  section.delay -= 0.5;
                }
                var s = this._options.colorSaturation, l = this._options.colorBrightness,
                  c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
                this._context.save();
                if (this._options.parallaxAmount !== 0) {
                  this._context.translate(0, this._scroll * this._options.parallaxAmount);
                }
                this._context.beginPath();
                this._context.moveTo(section.point1.x, section.point1.y);
                this._context.lineTo(section.point2.x, section.point2.y);
                this._context.lineTo(section.point3.x, section.point3.y);
                this._context.fillStyle = c;
                this._context.fill();
                if (this._options.strokeSize > 0) {
                  this._context.lineWidth = this._options.strokeSize;
                  this._context.strokeStyle = c;
                  this._context.lineCap = "round";
                  this._context.stroke();
                }
                this._context.restore();
              }
              return false;
            }, _onDraw: function () {
              for (var i = 0, t = this._ribbons.length; i < t; ++i) {
                if (!this._ribbons[i]) {
                  this._ribbons.splice(i, 1);
                }
              }
              this._context.clearRect(0, 0, this._width, this._height);
              for (var a = 0; a < this._ribbons.length; ++a) {
                var ribbon = this._ribbons[a], numSections = ribbon.length, numDone = 0;
                for (var b = 0; b < numSections; ++b) {
                  if (this._drawRibbonSection(ribbon[b])) {
                    numDone++;
                  }
                }
                if (numDone >= numSections) {
                  this._ribbons[a] = null;
                }
              }
              if (this._ribbons.length < this._options.ribbonCount) {
                this.addRibbon();
              }
              requestAnimationFrame(this._onDraw);
            }, _onResize: function (e) {
              var screen = screenInfo(e);
              this._width = screen.width;
              this._height = screen.height;
              if (this._canvas) {
                this._canvas.width = this._width;
                this._canvas.height = this._height;
                if (this._context) {
                  this._context.globalAlpha = this._options.colorAlpha;
                }
              }
            }, _onScroll: function (e) {
              var screen = screenInfo(e);
              this._scroll = screen.scrolly;
            }
          };
          return Factory;
        });
        new Ribbons();
      },


      /**自动获取高度**/
      getHeight() {
        // if (window.innerHeight<=750) {
        //    this.asideHeight.height=='750px';
        //   return;
        // }
        this.asideHeight.height = window.innerHeight + 'px';

      },


      /**书签编辑设置的 标签开始**/
      taghandleClose(tag) {
//1. 首先我们要得到这个对象
        var tina = this.sqTags.filter((p) => {
          return p.tagId == tag;
        });
//2. 其次得到这个对象在数组中对应的索引
        var index = this.sqTags.indexOf(tina[0]);
//3. 如果存在则将其删除，index > -1 代表存在
        index > -1 && this.sqTags.splice(index, 1);

        console.log(this.sqTags);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.tagcount = this.tagcount - 1;
          var updatetag = {name: inputValue, bookmarkId: "bookmarkId", tagId: this.tagcount};
          this.sqTags.push(updatetag);
        }
        this.inputVisible = false;
        this.inputValue = '';
        console.log(this.sqTags);
      },


      /**书签编辑设置的 标签结束**/



      /** 提交按钮 修改和新增 */
      addbookmark: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.sqTags = this.sqTags;
            addBookmark(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.addopen = false;
                this.getList();
              }
            });
          }

        });
      },
      // 表单重置
      bookmarkreset() {
        this.form = {
          bookmarkId: undefined,
          userid: undefined,
          title: undefined,
          url: undefined,
          urls: undefined,
          description: undefined,
          image: undefined,
          label: undefined,
          menuId: undefined,
          zcount: undefined,
          idelete: undefined,
          start: undefined,
          createTime: undefined
        };
        this.resetForm("form");
      },
      // 取消按钮
      bookmarkcancel() {
        this.addopen = false;
        this.bookmarkreset();
      },


      /** 转换书签菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.menuId,
          label: node.menuName,
          children: node.children
        };
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        if (this.zNodes != null && this.zNodes.length != 0) {
          this.menuOptions = [];
          const data = {menuId: 0, menuName: '顶级菜单', children: []};
          data.children = this.handleTree(this.zNodes, "menuId", "parentId");
          this.menuOptions.push(data);
          return;
        }

        listMenuByUserId().then(response => {
          this.menuOptions = [];
          const data = {menuId: 0, menuName: '顶级菜单', children: []};
          data.children = this.handleTree(response.data, "menuId", "parentId");
          this.menuOptions.push(data);
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 查询用户的书签菜单Menu */
      getList() {
        listMenuByUserId().then(response => {
          this.zNodes = response.data;
          //加载Ztree树
          $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(this.expandAll);
        });

      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.menuId != undefined) {
              if (this.form.menuId == this.form.parentId) {
                this.msgError("不能将上级菜单设置为本身");
                return;
              }


              updateMenu(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addMenu(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.getTreeselect();
        this.open = true;
        this.title = "添加书签菜单";
      },
      // /** 修改按钮操作 */
      // handleUpdate(row) {
      //   this.reset();
      //   this.getTreeselect(); //树
      //   if (row != undefined) {
      //     this.form.parentId = row.menuId;
      //   }
      //   getMenu(row.menuId).then(response => {
      //     this.form = response.data;
      //     this.open = true;
      //     this.title = "修改书签菜单";
      //   });
      // },
      // 表单重置
      reset() {
        this.sqTags = [],
          this.sousuo = '',
          this.form = {
            menuId: undefined,
            userId: undefined,
            menuName: undefined,
            menuUrl: undefined,
            menuIcon: undefined,
            parentId: undefined,
            menuOrder: undefined,
            createTime: undefined
          };
        this.resetForm("form");
      },

      addDiyDom: function (treeId, treeNode) {
        // console.log("自定义ztree:"+treeId.tId+"___treeNode："+treeNode.tId)
        var spaceWidth = 20;
        var switchObj = $("#" + treeNode.tId + "_switch"),
          icoObj = $("#" + treeNode.tId + "_ico");
        switchObj.remove();
        icoObj.before(switchObj);

        if (treeNode.level > -1) {
          var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
          switchObj.before(spaceStr);
          var switchObjspan = $("#" + treeNode.tId + "_span");


          // console.log("进入addHoverDom:统计"+treeNode.bookmarkCount+"_sz 的数量:"+confCount);
          // console.log("addDiyDom:统计2"+$.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes()[0].bookmarkCount);
          //console.log("addDiyDom:统计2"+$.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes()[0]);


          var editStr = "<span class=" + treeNode.tId + "_count style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:8px' onfocus='this.blur();'>" + treeNode.bookmarkCount + "</span>";
          switchObjspan.after(editStr);
        }
      },

      addHoverDom: function (treeId, treeNode) {
        var confCount = $("." + treeNode.tId + "_sz").length;
        // console.log("进入addHoverDom:统计"+treeNode.tId+"_sz 的数量:"+confCount);
        // console.log("进入addHoverDom:treeId"+treeNode.tId+"_sz 的数量:"+confCount);
        // console.log("进入addHoverDom:统计"+treeNode.tId+"_sz 的数量:"+confCount);
        // console.log("进入addHoverDom:统计"+treeNode.bookmarkCount+"_sz 的数量:"+confCount);
        if (confCount > 0) return;
        //if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
        var switchObjspan = $("#" + treeNode.tId + "_span");
        var editStr = "<span class=" + treeNode.tId + "_sz data-parentId=" + treeNode.parentId + " data-menuId=" + treeNode.menuId + " onclick='editBookmark(this)' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:8px' onfocus='this.blur();'><i class='el-icon-edit'></i></span>";
        switchObjspan.after(editStr);

        $("." + treeNode.tId + "_count").unbind().remove();


        //绑定编辑
        // document.getElementsByClassName(treeNode.tId + "_sz").onclick=function(){alert(this.value)};
        //document.getElementsByClassName(treeNode.tId + "_sz").addEventListener('click', editBookmark);
        // $("." + treeNode.tId + "_sz").addEventListener('click', editBookmark);
      },

      removeHoverDom: function (treeId, treeNode) {
        //console.log("进入removeHoverDom:"+"." + treeNode.tId + "_sz")
        //if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;

        $("." + treeNode.tId + "_sz").unbind().remove();
        var switchObjspan = $("#" + treeNode.tId + "_span");
        var editStr = "<span class=" + treeNode.tId + "_count onclick='alert(1111111);return false;' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:8px' onfocus='this.blur();'>" + treeNode.bookmarkCount + "</span>";
        switchObjspan.after(editStr);

      },
      //点击展开
      beforeClick: function (treeId, treeNode) {

        //if (treeNode.level != 19990 ) {
        //    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //    zTree.expandNode(treeNode);

        //  return false;
        // }
        //return true;
      },
      /** 点击跳转**/
      //节点点击
      OnClickzTree: function (event, treeId, treeNode) {
        var that = this;
        that.$router.push({
          path: "/content",
          query: {
            menuId: treeNode.menuId,
            t:Date.now(),
          }
        })


        // $("." + treeNode.tId + "_sz").unbind().remove();
        // var switchObjspan = $("#" + treeNode.tId + "_span");
        //
        // var confCount = $("#" + treeNode.tId + "_count").length;
        // if (confCount>0) return;
        // var editStr = "<span class="+treeNode.tId+"_count onclick='alert(1111111);return false;' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:8px' onfocus='this.blur();'>12</span>";
        // switchObjspan.after(editStr);
        // return false;
      },
      //显示隐藏 ztree菜单
      zreaZtree: function () {
        var that = this;
        that.isShowZtree = !that.isShowZtree;

      },
      /**跳转导入页面**/
      importHtml: function () {
        this.$router.push({
          path: "/importHtml",
        })

      }, /**跳转测试页面**/
      ceshi: function () {
        this.$router.push({
          path: "/ceshi",
        })

      },
      /**跳转NqQuillEdit测试页面**/
      NqEdit: function () {
        this.$router.push({
          path: "/NqEdit",
        })

      },


      editBookmark: function (e) {
        this.reset();
        this.getTreeselect();
        if (e.getAttribute("data-menuId") != null && e.getAttribute("data-parentId") != null) {
          this.form.parentId = e.getAttribute("data-parentId");
        }
        getMenu(e.getAttribute("data-menuId")).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改书签菜单";
        });


        //阻止冒泡事件
        if (e && e.stopPropagation)
        //因此它支持W3C的stopPropagation()方法
          e.stopPropagation();
        else
        //否则，我们需要使用IE的方式来取消事件冒泡
          window.event.cancelBubble = true;
        return false;
      },

      //删除书签目录
      deleteMmenu(menuId) {

        this.$confirm('是否删除此目录菜单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delMenu(menuId).then(response => {
            // if(){}
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            this.open = false;
            this.getList();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      // 全部书签
      goBookmarkList() {
        var that = this;
        that.$router.push({
          path: "/content",
          query: {
            menuId: 'BOOKMARK'
          }
        })

      },

      /** 回收站**/
      gorecycle() {
        var that = this;
        that.$router.push({
          path: "/content",
          query: {
            menuId: 'RECYCLE'
          }
        })
      },
      /** 用户书签**/
      goUserTagAll() {
        var that = this;
        that.$router.push({
          path: "/UserTagAll",
        })
      },



    },

    destroyed() {
      window.removeEventListener('resize', this.getHeight)
    },
    handleCommand(command) {
      this.$message('click on item ' + command);
    },


  }
</script>
<style >


  body {
    /*font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;*/
    font-family: "Merriweather", "Open Sans", "Microsoft Jhenghei", "Microsoft Yahei", sans-serif;
  }


  .ztree li ul {
    margin: 0;
    padding: 0
  }

  .ztree li {
    line-height: 32px
  }

  .ztree li a {
    width: 200px;
    height: 32px;
    padding-top: 0px;
    font-size: 14px;
    width: 100%
  }

  .ztree li a:hover {
    text-decoration: none;
    background-color: #E5E5E5;
  }

  .ztree li a span.button.switch {
    vertical-align: middle
  }

  .ztree.showIcon li a span.button.switch {
    visibility: visible
  }

  .ztree li a.curSelectedNode {
    background-color: #E5E5E5;
    border: 0;
    height: 32px;
  }

  .ztree li span {
    line-height: 32px;
  }

  .ztree li span.button {
    margin-top: 0px;
    margin-left: 2px;
    width: 20px;
    height: 20px;
  }

  .ztree li span.button.switch {
    width: 20px;
    height: 20px;
  }

  /*.ztree li a.level0 span {font-size: 100%;font-weight: bold}*/
  .ztree li span.button {
    background-image: url("../ztree/bottom.png");
  }

  .ztree li span.button.switch.level0 {
    width: 20px;
    height: 20px
  }

  .ztree li span.button.switch.level1 {
    width: 20px;
    height: 20px
  }

  .ztree li span.button.noline_open {
    background-position: 0 0;
  }

  .ztree li span.button.noline_close {
    background-position: 0 0;
    background-image: url("../ztree/right.png");
  }

  /*.ztree li span.button.noline_open.level0 {background-position: 0 0;}*/
  /*.ztree li span.button.noline_close.level0 {background-position:-18px 0;}*/


  .ztree li span.button.ico_close {
    vertical-align: middle
  }

  .ztree li span.button.ico_open {
    vertical-align: middle
  }

  .ztree li span.button.ico_docu {
    vertical-align: middle
  }


  .ztr {
    /*//background{ width:100%;height:100%;position:absolute;top:0px;opacity: 0.6;background-image: url(https://s1.ax1x.com/2020/07/27/akFjER.jpg);background-size: 500px 100px;}*/
    /*background:red;*/
  }

  /*.areaTree{*/

  /*  height: 400px;*/
  /*  overflow:scroll;*/
  /*  font-weight: 400;*/
  /*overflow:auto;*/
  /*  background-color: #F6F6F6;*/
  /*  background:url('https://ftp.bmp.ovh/imgs/2020/08/4ac1d6b4f41049ef.jpg') no-repeat;*/
  /*  background-size: 100% 100%;*/

  /*}*/

  #app {
    overflow-y: hidden;

  }

  .isaside {
    padding: 0;
    margin-bottom: 0;
    /*background:url('https://ftp.bmp.ovh/imgs/2020/08/4ac1d6b4f41049ef.jpg') no-repeat;*/
    background-color: #F6F5F4;
    /*background: url("https://s1.ax1x.com/2020/08/16/dEcqVU.jpg") no-repeat;*/


    /*background: url("https://s1.ax1x.com/2020/10/03/03WM4K.md.jpg") no-repeat;*/
    /*background: url("https://s1.ax1x.com/2020/10/03/03fri6.png") no-repeat;*/


    /*background: url("https://s1.ax1x.com/2020/10/03/03RCSe.jpg") no-repeat;*/
    /*background-color: #2E90AE;*/
    /*background: -webkit-linear-gradient(to right, #000C40, #F0F2F0);  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*background: linear-gradient(to right, #000C40, #F0F2F0); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/

    /*opacity:0.9;*/
    /*filter:alpha(opacity=90);*/


    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;


    /*background: url("https://s1.ax1x.com/2020/10/03/03sAeK.md.jpg") no-repeat, linear-gradient(90deg, rgb(107, 165, 255) 40%, rgb(197, 197, 197) 100%) ;*/
    /*background-repeat: no-repeat;*/
    /*filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";*/
    /*-moz-background-size:100% 100%;*/
    /*background-size:400px 100%;*/

    /*background-color: #2E90AE;*/
    /*background: -webkit-linear-gradient(to right, #000C40, #F0F2F0);  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*!*background: linear-gradient(to right, #000C40, #F0F2F0); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*!*/


    /*background-size: cover;*/
    /*z-index: -1;!*-1 可以当背景*!*/
    /*-webkit-filter: blur(3px);*/
    /*filter: blur(3px);*/
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);

  }
  /*光标拖拽*/
  /*.isaside{*/
  /*  cursor:w-resize*/
  /*}*/

  .aside-title {
    height: 32px;
  }

  .aside-title:hover {
    background-color: #c5c5c5;
  }

  .aside-title i {
    margin-left: 26px;
    font-size: 20px;
    margin-right: 11px;
    vertical-align: middle;
  }

  .aside-title span {
    font-size: 14px;
    margin-right: 11px;
  }

  .aside-logo {
    display: flex;
    align-items: center;
  }

  .aside-logo div {
    width: 50%;
  }

  .logoname span {
    margin-left: 8px;
    font-family: "PingFang SC";
    font-size: 20px;
    font-weight: 400;
  }

  .logoright i {
    float: right;
    display: block;
    width: 30px;
    height: 28px;
    background-color: #E6E4E1;
    color: #5C5C5C;
    text-align: center;
    line-height: 28px;
    border-radius: 2px;
  }




  .reminder {
    color: #878787;
    opacity: 0.7;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-left: 27px !important;

  }

  .aside-navigation {
    width: 100%;
    height: 30px;
    background-color: #a0c4ff;

  }

  .filter {
    display: flex;
    flex-wrap: wrap;
  }

  .filter-sort {
    color: #7e868d;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 -1px 0 rgba(0, 0, 0, .04);
    margin-right: 4px;
    border-radius: 2px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    float: left;
    padding: 0 8px;

  }

  .filter-sort:hover {
    color: #6f8eee;
    background-color: #e6e6e6;

  }


  .bookmarkmain {
    padding: 0px !important;
  }

  .separator {
    float: left;
  }

  .filter-sort i {
    margin-left: -4px;
    margin-right: -1px;
  }

  .filter div {
    margin-bottom: 3px;
  }


  .main-label span i {
    margin-left: 5px;
  }

  .main-label span {
    line-height: 22px;
  }

  .main-label :nth-child(1) {
    margin-right: -1px;
  }

  .main-label :nth-child(2) {
    margin-right: 5px;
  }

  .labelname {
    font-weight: 800;
    color: rgb(0, 0, 0);
    float: left;
    margin-bottom: -10px;
    margin-right: 5px;
  }

  .el-form-item__content {
    margin-left: 0px !important;
  }

  .el-dialog__body {
    padding-top: 0px !important;
  }

  .custom-input input {
    border: 0px;
    border-radius: 0px;
    border-bottom: 1px solid #C0C4CC;
  }

  .custom-input input:focus {
    border: 0px;
    border-radius: 0px;
    border-bottom: 1px solid #695fff;
  }

  /*添加bookmarkurl*/
  .addbookmarkurl input {
    border: 0px;
    border-radius: 0px;
    border-bottom: 1px solid #409EFF;
  }

  .addbookmarkurl input:focus {
    border-bottom: 1px solid #409EFF;
  }

  .addbookmarkurl input:hover {

    border-bottom: 1px solid #409EFF;
  }


  .addbookmarkurl .el-dialog {
    top: 40%;
  }


  .addbookmarkurl .el-dialog__body {
    padding-right: 10px;
    height: 60px !important;
  }

  .addbookmarkurl-input {
    width: 82% !important;
    float: left;
    font-size: 13px;
  }

  .addbookmarkurl-button {
    float: left;
    margin-left: 5px;
    border: 1px solid #409EFF !important;
  }

  .addbookmarkurl-button:hover {
    background-color: #409EFF !important;
    color: #FFFFFF !important;
  }

  .el-dialog {
    border-radius: 10px !important;
  }

  /*编辑目录 选择目录菜单样式调整*/
  .vue-treeselect__control {
    padding-top: 6px !important;
  }

  .isaside {
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  }



  .main-right {
    width: 300px;
    height: 95%;
    min-height: 40%;
    overflow: auto;
    z-index: 1;
  }

  .main-right::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 12px !important;

  }

  /*定义滑块 样式*/
  .main-right::-webkit-scrollbar-thumb {
    border-radius: 3px;
    /*height: 10px!important;    !* 滚动条滑块长度 *!*/
    background-color: #6ba5ff;


  }

  /*定义滚动条轨道 内阴影+圆角 透明效果*/
  ::-webkit-scrollbar-track {
    background-color: transparent;

  }


  .tabBarList{
    display: flex;
    float: left;
    width: 100%;
    height: 50px;
    background-color: #e6e6e6;
    text-align: center;
    align-content: center;
    align-items: center;
  }
  .tabBarList div{
    display: flex;
    width: 33.33%;
    height: 50px;
    align-content: center;
    align-items: center;
    text-align: center;
  }

  .tabBarList div i{
    margin: 0 auto;
    font-size: 25px;

  }

  .popover-suosou {
    /*width: 85% ;*/
    top: 40px;
    /*left: 72px;*/
  }

  /* 拖拽相关样式 */
  /*包围div样式*/

  /*拖拽区div样式*/
  .isresize {
    width: 7px;
    font-size: 25px;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: transparent;
    z-index: 1;
    margin-left: -4px!important;
  }

  /*拖拽区鼠标悬停样式*/
  /*.isresize:hover {*/
  /*  color: #a4a4a4;*/
  /*}*/

  /*.isresize i {*/
  /*  margin-left: 2px;*/
  /*  transform: rotate(90deg);*/
  /*  width: 10px;*/
  /*  !*color: transparent;*!*/
  /*  !*background-color: black;*!*/
  /*}*/

  .main-right {
    min-width: 250px;
  }

  /*不可复制*/
  .isaside {
    -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属性 */
  }

  /* 拖拽相关样式 结束 */
  #evanyou {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
  }





  /*.mid{*/
  /*  min-width: 400px!important;*/
  /*  max-width: 400px;*/
  /*}*/


</style>

