system-clients 1.6.21 → 1.6.22-heat

package/src/components/Main.vue

@@ -1,431 +1,431 @@
-<template>
-  <div>
-    <div class='flex-row' id="box" v-el:box v-if="!isManger">
-      <div class="auto" style="position: fixed;right: 30px;top: 20px;">
-        <span>登录人：</span>
-        <label>{{orgpathnames}}</label>
-      </div>
-      <div class="flex tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top >
-          <h3>{{systemname}}</h3>
-          <div class="span" style="margin-bottom:20px;flex: 1;">
-            <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" v-show="treeOrIcon" :tabs="tabs" v-ref:tree></left-tree>
-            <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>
-          </div>
-
-        <div class="tree-flex-footer">
-            <a @click="changeShow()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">菜单伸缩</span></a>
-            <!-- <a><img src="../../../static/treeset.png" alt="">系统设置</a> -->
-            <dropdown class="auto">
-              <button type="button" data-toggle="dropdown">
-                <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
-              </button>
-              <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
-                <li>系统信息及设置</li>
-                <!-- <li>{{name}}</li> -->
-                <li>{{date}}</li>
-                <li @click="show=true">修改密码</li>
-                <li @click="AddChangeMsgShow=true">系统版本:1.0.0</li>
-              </ul>
-
-            </dropdown>
-            <a href="index.html" onclick="return confirm('您确定要退出系统吗？');">
-              <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">退出系统</span>
-            </a>
-        </div>
-      </div>
-
-      <!-- <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> -->
-
-      <div class="flex right-bg" id="bottom" v-el:bottom>
-        <!-- <operator-badge></operator-badge> -->
-        <div class="span">
-          <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>
-          <dynamic :comps='[]' name='main' :selecttab="selecttab" @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
-        </div>
-      </div>
-    </div>
-    <div v-show="isManger">
-      <route  v-ref:route></route>
-    </div>
-
-     <!-- 变更录入 模态框 -->
-    <add-changemsg :show="AddChangeMsgShow" v-on:toggle = "AddChangeMsgShow = false"></add-changemsg>
-    <!-- 修改密码组件 -->
-    <modify-pw :show.sync="show" v-if="show"><modify-pw>
-    <!-- 修改密码模态框 -->
-  </div>
-</template>
-
-<script>
-import vue from 'vue'
-import co from 'co'
-
-window.onunload = () => {
-  vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
-}
-window.onbeforeunload = () => {
-  vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
-}
-export default {
-  title: '主界面',
-  props: ['functions', 'userid'],
-  data () {
-    return {
-      // 左侧树下部三个小图标
-      imgs: {
-        open: '/images/mainicon/treeopen.png',
-        set: '/images/mainicon/treeset.png',
-        out: '/images/mainicon/treeout.png'
-      },
-      treeOrIcon: false,
-      isManger: false,
-      show: false,
-      orgpathnames: this.$login.f.orgpathnames,
-      systemname: '客服系统',
-      date: this.$login.toStandardDateString(),
-	  tabs:[],       //已初始化页签数组
-      selecttab:''
-
-      // headerHint: true, // 右侧顶部提示信息
-      // value: 25645.26,
-      // AddChangeMsgShow: false,
-      // showsum: false
-    }
-  },
-  ready () {
-    let component = this.$login.getUrlCompileParames('component')
-    if (component) {
-      this.isManger = true
-      this.$refs.route.init(component, {data: this.functions.functions})
-    }
-    if(this.$login.f.password == '1'){
-      this.$showMessage('本地登录系统为此账户的初始密码，请确认修改密码！！！', ['confirm', 'cancel']).then((res) => {
-        if(res == 'confirm')
-          this.show = true
-      })
-    }
-    console.log("系统名称",this.$appdata.getSingleValue("系统名称"))
-    this.systemname = this.$appdata.getSingleValue("系统名称")? this.$appdata.getSingleValue("系统名称"):'客服系统'
-  //   let oBox = this.getElement("box")
-	// 	let	oTop = this.getElement("top")
-	// 	let	oBottom = this.getElement("bottom")
-	// 	let oLine = this.getElement("line")
-  //   let that = this
-	// 			oLine.onmousedown = function(e) {
-	// 				let disX = (e || event).clientX
-	// 				oLine.left = oLine.offsetLeft
-	// 				document.onmousemove = function(e) {
-	// 					let iT = oLine.left + ((e || event).clientX - disX)
-  //           var e = e || window.event
-	// 					let tarnameb = e.target || e.srcElement
-	// 					let maxT = oBox.clientWight - oLine.offsetWidth
-	// 					oLine.style.margin = 0
-	// 					iT < 0 && (iT = 0)
-	// 					iT > maxT && (iT = maxT)
-	// 					oLine.style.left = oTop.style.width = iT + "px"
-	// 					oBottom.style.width = oBox.clientWidth - iT + "px"
-  //           that.$set('treeWidth', iT)
-	// 					return false
-	// 				}
-	// 				document.onmouseup = function() {
-	// 					document.onmousemove = null
-	// 					document.onmouseup = null
-	// 					oLine.releaseCapture && oLine.releaseCapture()
-	// 				}
-	// 				oLine.setCapture && oLine.setCapture()
-	// 				return false
-	// 			}
-    this.changeShow()
-  },
-  methods: {
-      isnodo(val){
-      this.selecttab = val
-    },
-    unfurl () {
-      if(this.showsum){
-        this.showsum = false
-      } else {
-        this.showsum = true
-      }
-    },
-    // getElement(id) {
-    //   return document.getElementById(id)
-    // },
-    changeShow () {
-    //   this.treeOrIcon = !this.treeOrIcon
-    //   let oBox = this.getElement("box")
-  	// 	let	oTop = this.getElement("top")
-  	// 	let	oBottom = this.getElement("bottom")
-  	// 	let oLine = this.getElement("line")
-    //   if (this.treeOrIcon) {
-    //     // oLine.style.left = oTop.style.width = 300 + "px"
-    //     oTop.style.width = 150 + "px"
-    //     oBottom.style.width = oBox.clientWidth - 150 + "px"
-    //   }else {
-    //     oLine.style.left = oTop.style.width = 50 + "px"
-    //     oBottom.style.width = oBox.clientWidth - 50 + "px"
-    //   }
-    // }
-      this.treeOrIcon = !this.treeOrIcon
-      if (this.treeOrIcon) {
-        this.$els.top.style.width = 160 + "px"
-        this.$els.bottom.style.width = this.$els.box.clientWidth - 160 + "px"
-      }else {
-        this.$els.top.style.width = 50 + "px"
-        this.$els.bottom.style.width = this.$els.box.clientWidth - 50 + "px"
-      }
-    },
-    changeMain(userid) {
-      this.$goto('res-main', {userid: this.userid}, 'self')
-    },
-    tabChange (name) {
-      this.$refs.tree.changeSelect(name)
-    },
-	tabcg(val){
-      this.tabs = val
-    }
-  },
-  computed: {
-    nowDate () {
-      return this.$login.getNowDate()
-    }
-  }
-}
-</script>
-<style lang="less">
-  /* 组件内通用样式 */
-  .select-error {
-    button {
-      border-bottom: 1px solid #a94442!important;
-    }
-  }
-  // input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
-  //       -webkit-appearance:textfield;
-  // }
-  /* 表单输入框组 */
-  .form-input-group {
-    display: flex;
-
-    label {
-      width: 100px;
-      text-align: right;
-      + * {
-        flex: 1;
-      }
-    }
-  }
-  // 日期组件在表单中沾满
-  .form-horizontal .datepicker {
-    width: 100%;
-  }
-  // 下拉选择框占据剩余全部空间
-  .select-overspread {
-    .form-group {
-      // margin: 0px 5px 10px 0px;
-      .form-control {
-        margin-right: 0px;
-      }
-    }
-    .btn-group, .btn-group-vertical {
-      width: 100%;
-      // padding-right: 5px;
-      button {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-    }
-    .dropdown-menu {
-      width: 100%
-    }
-  }
-  // 需要特定宽度的的样式
-  .width-60 {
-    width: 60px;
-  }
-  .width-80 {
-    width: 80px;
-  }
-  .width-100 {
-    width: 100px;
-  }
-
-
-
-  /*右侧区域的背景*/
-  .right-bg {
-    width: 100%;
-    flex: 1;
-    padding: 10px 25px;
-    color: #304A66;
-  }
-  .tree-flex {
-    height: 100%;
-    // width: 150px;
-    /*width: 60px;*/
-    background: #4a7cae;
-    color: #fff;
-
-  }
-  .tree-flex-icon {
-    width: 50px;
-    /*transition: 0.5s;*/
-    > .span {
-      overflow-x: visible;
-    }
-  }
-  .tree-flex h3 {
-    text-align: center;
-    line-height: 80px;
-    margin: 0px;
-  }
-
-  .tree-flex-footer {
-    height: 150px;
-    display: flex;
-    flex-direction:column;
-    color: #fff;
-  }
-  .tree-flex-footer a,.tree-flex-footer button{
-    flex: 1;
-    padding: 8px 5px;
-    font-size: 1.2em;
-    border-top: 1px solid #697D93;
-    text-decoration: none;
-    color: #fff;
-    cursor: pointer;
-  }
-  .tree-flex-footer button {
-    height: auto;
-    width: 100%;
-    border-radius: 0px;
-    background-color: rgba(255,255,255,0);
-    border: none;
-    border-top: 1px solid #697D93;
-    text-align: left;
-  }
-  .tree-flex-footer button:hover{
-    outline: none;
-    background-color: rgba(255,255,255,0.2);
-  }
-  .tree-flex-footer button:focus {
-    outline: none;
-    background-color: rgba(255,255,255,0.5);
-  }
-  .tree-flex-footer a:hover {
-    color: #FFF;
-    background-color: rgba(255,255,255,0.2);
-  }
-  .tree-flex  .btn-group {
-    height: 50px!important;
-  }
-
-  .tree-flex .dropdown-menu {
-    /* 控制显示列表的样式 */
-    background: #4C637B;
-    border-radius: 0px;
-    color: #fff;
-    width: auto;
-    margin: 0px;
-    padding: 0px;
-  }
-  .tree-flex .dropdown-menu-up {
-    /* bottom，top控制上下，left和right控制左右*/
-    left: 100%!important;
-    top: auto!important;
-    bottom: 0;
-  }
-  .tree-flex .dropdown-menu-down {
-    /* bottom，top控制上下，left和right控制左右*/
-    left: 100%!important;
-    top: 0!important;
-  }
-  .tree-flex .dropdown-menu li{
-    text-align: center;
-    line-height: 50px;
-    border-bottom: 1px solid #697D93;
-    font-size: 1.2em;
-    width: auto;
-    white-space: nowrap;
-    cursor: default;
-
-  }
-  .tree-flex .dropdown-menu li + li {
-    text-align: left;
-    border: 0;
-    line-height: 40px;
-    padding-left: 15px;
-    padding-right: 15px;
-    font-size: 1em;
-    cursor: pointer;
-  }
-  .tree-flex .dropdown-menu li + li:hover {
-    background-color: rgba(255,255,255,0.2);
-  }
-  .tree-flex .dropdown-menu li a {
-    border: none;
-    color: #fff;
-    height: 40px;
-    line-height: 40px;
-    font-size: 1em;
-    padding: 0px;
-  }
-  .tree-flex .dropdown-menu li a:hover {
-    color: #fff;
-    background-color: rgba(255,255,255,0);
-  }
-  .tree-flex img{
-    height: 30px;
-    margin-right: 15px;
-  }
-  .line {
-    height: 100%;
-    width: 5px;
-    background: #4C637B;
-    cursor: e-resize;
-  }
-  /*为树（tree）组件写的样式*/
-  .tree-img {
-    font-size: 1.2em;
-  }
-
-  /*将较长信息截断显示，鼠标悬停显示全部信息*/
-  .cutout50 {
-    max-width: 50px;
-    overflow:hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* 滚动条样式 */
-  /*---滚动条默认显示样式--*/
-::-webkit-scrollbar-thumb{
-  //  display: none;
-   background-color:rgba(0,0,0,0.2);
-   height:50px;
-   outline-offset:-2px;
-   /*outline:2px solid #fff;*/
-   -webkit-border-radius:4px;
-   /*border: 2px solid #fff;*/
-}
-
-/*---鼠标点击滚动条显示样式--*/
-::-webkit-scrollbar-thumb:hover{
-  //  display: inherit;
-   background-color:rgba(0,0,0,0.4);
-   height:50px;
-   -webkit-border-radius:4px;
-}
-/*---滚动条大小--*/
-::-webkit-scrollbar{
-   width:8px;
-   height:8px;
-}
-/*---滚动框背景样式--*/
-::-webkit-scrollbar-track-piece{
-  /* 全透明，不显示 */
-   background-color:rgba(255,255,255,0);
-   -webkit-border-radius:0;
-}
-</style>
+<template>
+  <div>
+    <div class='flex-row' id="box" v-el:box v-if="!isManger">
+      <div class="auto" style="position: fixed;right: 30px;top: 20px;">
+        <span>登录人：</span>
+        <label>{{orgpathnames}}</label>
+      </div>
+      <div class="flex tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top >
+          <h3>{{systemname}}</h3>
+          <div class="span" style="margin-bottom:20px;flex: 1;">
+            <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" v-show="treeOrIcon" :tabs="tabs" v-ref:tree></left-tree>
+            <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>
+          </div>
+
+        <div class="tree-flex-footer">
+            <a @click="changeShow()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">菜单伸缩</span></a>
+            <!-- <a><img src="../../../static/treeset.png" alt="">系统设置</a> -->
+            <dropdown class="auto">
+              <button type="button" data-toggle="dropdown">
+                <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
+              </button>
+              <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
+                <li>系统信息及设置</li>
+                <!-- <li>{{name}}</li> -->
+                <li>{{date}}</li>
+                <li @click="show=true">修改密码</li>
+                <li @click="AddChangeMsgShow=true">系统版本:1.0.0</li>
+              </ul>
+
+            </dropdown>
+            <a href="index.html" onclick="return confirm('您确定要退出系统吗？');">
+              <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">退出系统</span>
+            </a>
+        </div>
+      </div>
+
+      <!-- <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> -->
+
+      <div class="flex right-bg" id="bottom" v-el:bottom>
+        <!-- <operator-badge></operator-badge> -->
+        <div class="span">
+          <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>
+          <dynamic :comps='[]' name='main' :selecttab="selecttab" @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
+        </div>
+      </div>
+    </div>
+    <div v-show="isManger">
+      <route  v-ref:route></route>
+    </div>
+
+     <!-- 变更录入 模态框 -->
+    <add-changemsg :show="AddChangeMsgShow" v-on:toggle = "AddChangeMsgShow = false"></add-changemsg>
+    <!-- 修改密码组件 -->
+    <modify-pw :show.sync="show" v-if="show"><modify-pw>
+    <!-- 修改密码模态框 -->
+  </div>
+</template>
+
+<script>
+import vue from 'vue'
+import co from 'co'
+
+window.onunload = () => {
+  vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
+}
+window.onbeforeunload = () => {
+  vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
+}
+export default {
+  title: '主界面',
+  props: ['functions', 'userid'],
+  data () {
+    return {
+      // 左侧树下部三个小图标
+      imgs: {
+        open: '/images/mainicon/treeopen.png',
+        set: '/images/mainicon/treeset.png',
+        out: '/images/mainicon/treeout.png'
+      },
+      treeOrIcon: false,
+      isManger: false,
+      show: false,
+      orgpathnames: this.$login.f.orgpathnames,
+      systemname: '客服系统',
+      date: this.$login.toStandardDateString(),
+	  tabs:[],       //已初始化页签数组
+      selecttab:''
+
+      // headerHint: true, // 右侧顶部提示信息
+      // value: 25645.26,
+      // AddChangeMsgShow: false,
+      // showsum: false
+    }
+  },
+  ready () {
+    let component = this.$login.getUrlCompileParames('component')
+    if (component) {
+      this.isManger = true
+      this.$refs.route.init(component, {data: this.functions.functions})
+    }
+    if(this.$login.f.password == '1'){
+      this.$showMessage('本地登录系统为此账户的初始密码，请确认修改密码！！！', ['confirm', 'cancel']).then((res) => {
+        if(res == 'confirm')
+          this.show = true
+      })
+    }
+    console.log("系统名称",this.$appdata.getSingleValue("系统名称"))
+    this.systemname = this.$appdata.getSingleValue("系统名称")? this.$appdata.getSingleValue("系统名称"):'客服系统'
+  //   let oBox = this.getElement("box")
+	// 	let	oTop = this.getElement("top")
+	// 	let	oBottom = this.getElement("bottom")
+	// 	let oLine = this.getElement("line")
+  //   let that = this
+	// 			oLine.onmousedown = function(e) {
+	// 				let disX = (e || event).clientX
+	// 				oLine.left = oLine.offsetLeft
+	// 				document.onmousemove = function(e) {
+	// 					let iT = oLine.left + ((e || event).clientX - disX)
+  //           var e = e || window.event
+	// 					let tarnameb = e.target || e.srcElement
+	// 					let maxT = oBox.clientWight - oLine.offsetWidth
+	// 					oLine.style.margin = 0
+	// 					iT < 0 && (iT = 0)
+	// 					iT > maxT && (iT = maxT)
+	// 					oLine.style.left = oTop.style.width = iT + "px"
+	// 					oBottom.style.width = oBox.clientWidth - iT + "px"
+  //           that.$set('treeWidth', iT)
+	// 					return false
+	// 				}
+	// 				document.onmouseup = function() {
+	// 					document.onmousemove = null
+	// 					document.onmouseup = null
+	// 					oLine.releaseCapture && oLine.releaseCapture()
+	// 				}
+	// 				oLine.setCapture && oLine.setCapture()
+	// 				return false
+	// 			}
+    this.changeShow()
+  },
+  methods: {
+      isnodo(val){
+      this.selecttab = val
+    },
+    unfurl () {
+      if(this.showsum){
+        this.showsum = false
+      } else {
+        this.showsum = true
+      }
+    },
+    // getElement(id) {
+    //   return document.getElementById(id)
+    // },
+    changeShow () {
+    //   this.treeOrIcon = !this.treeOrIcon
+    //   let oBox = this.getElement("box")
+  	// 	let	oTop = this.getElement("top")
+  	// 	let	oBottom = this.getElement("bottom")
+  	// 	let oLine = this.getElement("line")
+    //   if (this.treeOrIcon) {
+    //     // oLine.style.left = oTop.style.width = 300 + "px"
+    //     oTop.style.width = 150 + "px"
+    //     oBottom.style.width = oBox.clientWidth - 150 + "px"
+    //   }else {
+    //     oLine.style.left = oTop.style.width = 50 + "px"
+    //     oBottom.style.width = oBox.clientWidth - 50 + "px"
+    //   }
+    // }
+      this.treeOrIcon = !this.treeOrIcon
+      if (this.treeOrIcon) {
+        this.$els.top.style.width = 160 + "px"
+        this.$els.bottom.style.width = this.$els.box.clientWidth - 160 + "px"
+      }else {
+        this.$els.top.style.width = 50 + "px"
+        this.$els.bottom.style.width = this.$els.box.clientWidth - 50 + "px"
+      }
+    },
+    changeMain(userid) {
+      this.$goto('res-main', {userid: this.userid}, 'self')
+    },
+    tabChange (name) {
+      this.$refs.tree.changeSelect(name)
+    },
+	tabcg(val){
+      this.tabs = val
+    }
+  },
+  computed: {
+    nowDate () {
+      return this.$login.getNowDate()
+    }
+  }
+}
+</script>
+<style lang="less">
+  /* 组件内通用样式 */
+  .select-error {
+    button {
+      border-bottom: 1px solid #a94442!important;
+    }
+  }
+  // input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
+  //       -webkit-appearance:textfield;
+  // }
+  /* 表单输入框组 */
+  .form-input-group {
+    display: flex;
+
+    label {
+      width: 100px;
+      text-align: right;
+      + * {
+        flex: 1;
+      }
+    }
+  }
+  // 日期组件在表单中沾满
+  .form-horizontal .datepicker {
+    width: 100%;
+  }
+  // 下拉选择框占据剩余全部空间
+  .select-overspread {
+    .form-group {
+      // margin: 0px 5px 10px 0px;
+      .form-control {
+        margin-right: 0px;
+      }
+    }
+    .btn-group, .btn-group-vertical {
+      width: 100%;
+      // padding-right: 5px;
+      button {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+    .dropdown-menu {
+      width: 100%
+    }
+  }
+  // 需要特定宽度的的样式
+  .width-60 {
+    width: 60px;
+  }
+  .width-80 {
+    width: 80px;
+  }
+  .width-100 {
+    width: 100px;
+  }
+
+
+
+  /*右侧区域的背景*/
+  .right-bg {
+    width: 100%;
+    flex: 1;
+    padding: 10px 25px;
+    color: #304A66;
+  }
+  .tree-flex {
+    height: 100%;
+    // width: 150px;
+    /*width: 60px;*/
+    background: #4a7cae;
+    color: #fff;
+
+  }
+  .tree-flex-icon {
+    width: 50px;
+    /*transition: 0.5s;*/
+    > .span {
+      overflow-x: visible;
+    }
+  }
+  .tree-flex h3 {
+    text-align: center;
+    line-height: 80px;
+    margin: 0px;
+  }
+
+  .tree-flex-footer {
+    height: 150px;
+    display: flex;
+    flex-direction:column;
+    color: #fff;
+  }
+  .tree-flex-footer a,.tree-flex-footer button{
+    flex: 1;
+    padding: 8px 5px;
+    font-size: 1.2em;
+    border-top: 1px solid #697D93;
+    text-decoration: none;
+    color: #fff;
+    cursor: pointer;
+  }
+  .tree-flex-footer button {
+    height: auto;
+    width: 100%;
+    border-radius: 0px;
+    background-color: rgba(255,255,255,0);
+    border: none;
+    border-top: 1px solid #697D93;
+    text-align: left;
+  }
+  .tree-flex-footer button:hover{
+    outline: none;
+    background-color: rgba(255,255,255,0.2);
+  }
+  .tree-flex-footer button:focus {
+    outline: none;
+    background-color: rgba(255,255,255,0.5);
+  }
+  .tree-flex-footer a:hover {
+    color: #FFF;
+    background-color: rgba(255,255,255,0.2);
+  }
+  .tree-flex  .btn-group {
+    height: 50px!important;
+  }
+
+  .tree-flex .dropdown-menu {
+    /* 控制显示列表的样式 */
+    background: #4C637B;
+    border-radius: 0px;
+    color: #fff;
+    width: auto;
+    margin: 0px;
+    padding: 0px;
+  }
+  .tree-flex .dropdown-menu-up {
+    /* bottom，top控制上下，left和right控制左右*/
+    left: 100%!important;
+    top: auto!important;
+    bottom: 0;
+  }
+  .tree-flex .dropdown-menu-down {
+    /* bottom，top控制上下，left和right控制左右*/
+    left: 100%!important;
+    top: 0!important;
+  }
+  .tree-flex .dropdown-menu li{
+    text-align: center;
+    line-height: 50px;
+    border-bottom: 1px solid #697D93;
+    font-size: 1.2em;
+    width: auto;
+    white-space: nowrap;
+    cursor: default;
+
+  }
+  .tree-flex .dropdown-menu li + li {
+    text-align: left;
+    border: 0;
+    line-height: 40px;
+    padding-left: 15px;
+    padding-right: 15px;
+    font-size: 1em;
+    cursor: pointer;
+  }
+  .tree-flex .dropdown-menu li + li:hover {
+    background-color: rgba(255,255,255,0.2);
+  }
+  .tree-flex .dropdown-menu li a {
+    border: none;
+    color: #fff;
+    height: 40px;
+    line-height: 40px;
+    font-size: 1em;
+    padding: 0px;
+  }
+  .tree-flex .dropdown-menu li a:hover {
+    color: #fff;
+    background-color: rgba(255,255,255,0);
+  }
+  .tree-flex img{
+    height: 30px;
+    margin-right: 15px;
+  }
+  .line {
+    height: 100%;
+    width: 5px;
+    background: #4C637B;
+    cursor: e-resize;
+  }
+  /*为树（tree）组件写的样式*/
+  .tree-img {
+    font-size: 1.2em;
+  }
+
+  /*将较长信息截断显示，鼠标悬停显示全部信息*/
+  .cutout50 {
+    max-width: 50px;
+    overflow:hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 滚动条样式 */
+  /*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb{
+  //  display: none;
+   background-color:rgba(0,0,0,0.2);
+   height:50px;
+   outline-offset:-2px;
+   /*outline:2px solid #fff;*/
+   -webkit-border-radius:4px;
+   /*border: 2px solid #fff;*/
+}
+
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover{
+  //  display: inherit;
+   background-color:rgba(0,0,0,0.4);
+   height:50px;
+   -webkit-border-radius:4px;
+}
+/*---滚动条大小--*/
+::-webkit-scrollbar{
+   width:8px;
+   height:8px;
+}
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece{
+  /* 全透明，不显示 */
+   background-color:rgba(255,255,255,0);
+   -webkit-border-radius:0;
+}
+</style>