system-clients 3.0.14-akyh-1 → 3.0.14-akyh-3

package/src/components/Main.vue

@@ -9,6 +9,7 @@
             <span>{{orgpathnames}}</span>
           </div>
           <!--<div class="system-logo-chi-img1" style="float: right" @mouseenter="mouseenteruser()"  @mouseleave="mouseleaveuser()"></div>-->
+          <a class="system-logo-chi-span-1" style=" cursor: pointer;float: right; padding-top: 2px" @click="openUrl()"> 售后服务</a>
           <span  style="float: right; padding-top: 2px"  @mouseenter="mouseenteruser()"  @mouseleave="mouseleaveuser()"  class="system-logo-chi-span-1">{{$login.f.name}}</span>
           <span style="border-left: 1px solid;float: right;padding-top: 2px" class="system-logo-chi-span-1"> <img src="../../static/newStyle/login-f.png" height="20" width="20"> </span>
           <a href="index.html" onclick="return confirm('您确定要退出系统吗？');" style="float: right;padding-top: 2px">
@@ -21,7 +22,7 @@
                         <img :src="srcsetting" alt=""><span>系统设置</span>
                       </span>
               <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up dropstyle-chi" >
-<!--                <li>系统信息及设置</li>-->
+                <!--                <li>系统信息及设置</li>-->
                 <li style="color: #ffffff;white-space: nowrap"  @click="show=true">修改密码</li>
                 <li style="color: #ffffff;white-space: nowrap"  @click="AddChangeMsgShow=true">系统版本</li>
               </ul>
@@ -34,7 +35,7 @@
         <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}"  >
           <div class="span system-left-tree" >
             <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" :treeOrIcon="treeOrIcon"  :tabs="tabs" v-ref:tree></left-tree>
-<!--            <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>-->
+            <!--            <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>-->
           </div>
         </div>
         <div class="system-foot-stretch" >
@@ -49,68 +50,68 @@
           <dynamic :comps='[]' :showup="true" :showhide="false" name='main' :selecttab="selecttab" @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
         </div>
       </div>
-<!--      <div class="system-foot"  v-el:bottom>-->
-<!--        -->
-<!--        <div class="system-foot-box">-->
+      <!--      <div class="system-foot"  v-el:bottom>-->
+      <!--        -->
+      <!--        <div class="system-foot-box">-->
 
-<!--        </div>-->
-<!--      </div>-->
+      <!--        </div>-->
+      <!--      </div>-->
     </div>
 
-<!--    <div class='flex-row aaa' id="box" v-el:box v-if="!isManger">-->
-<!--      <div class="auto" style="position: fixed;right: 30px;top: 20px;color: #333">-->
-<!--        <span>-->
-<!--           <img-->
-<!--             src="../assets/people.png" height="15" width="15">-->
-<!--          登录人：</span>-->
-<!--        <label>{{$login.f.name}}</label>-->
-<!--        <img-->
-<!--          src="../assets/arrow.png" height="6" width="10"-->
-<!--          @mouseenter="mouseenteruser()"  @mouseleave="mouseleaveuser()"-->
-<!--        >-->
-<!--      </div>-->
-<!--      <div  v-if="userpane" class="auto userpanel">-->
-<!--        <span>{{orgpathnames}}</span>-->
-<!--      </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:10px;padding-bottom:5px;padding-top:5px;flex: 1;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;">-->
-<!--          <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='flex-row aaa' id="box" v-el:box v-if="!isManger">-->
+    <!--      <div class="auto" style="position: fixed;right: 30px;top: 20px;color: #333">-->
+    <!--        <span>-->
+    <!--           <img-->
+    <!--             src="../assets/people.png" height="15" width="15">-->
+    <!--          登录人：</span>-->
+    <!--        <label>{{$login.f.name}}</label>-->
+    <!--        <img-->
+    <!--          src="../assets/arrow.png" height="6" width="10"-->
+    <!--          @mouseenter="mouseenteruser()"  @mouseleave="mouseleaveuser()"-->
+    <!--        >-->
+    <!--      </div>-->
+    <!--      <div  v-if="userpane" class="auto userpanel">-->
+    <!--        <span>{{orgpathnames}}</span>-->
+    <!--      </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:10px;padding-bottom:5px;padding-top:5px;flex: 1;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;">-->
+    <!--          <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>-->
-<!--          &lt;!&ndash; <a><img src="../../../static/treeset.png" alt="">系统设置</a> &ndash;&gt;-->
-<!--          <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>-->
-<!--              &lt;!&ndash; <li>{{name}}</li> &ndash;&gt;-->
-<!--              <li>{{date}}</li>-->
-<!--              <li @click="show=true">修改密码</li>-->
-<!--              <li @click="AddChangeMsgShow=true">系统版本:1.0.0</li>-->
-<!--            </ul>-->
+    <!--        <div class="tree-flex-footer">-->
+    <!--          <a @click="changeShow()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">菜单伸缩</span></a>-->
+    <!--          &lt;!&ndash; <a><img src="../../../static/treeset.png" alt="">系统设置</a> &ndash;&gt;-->
+    <!--          <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>-->
+    <!--              &lt;!&ndash; <li>{{name}}</li> &ndash;&gt;-->
+    <!--              <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>-->
+    <!--          </dropdown>-->
+    <!--          <a href="index.html" onclick="return confirm('您确定要退出系统吗？');">-->
+    <!--            <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">退出系统</span>-->
+    <!--          </a>-->
+    <!--        </div>-->
+    <!--      </div>-->
 
-<!--      &lt;!&ndash; <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> &ndash;&gt;-->
+    <!--      &lt;!&ndash; <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> &ndash;&gt;-->
 
-<!--      <div class="flex right-bg" id="bottom" v-el:bottom>-->
-<!--        &lt;!&ndash; <operator-badge></operator-badge> &ndash;&gt;-->
-<!--        <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 class="flex right-bg" id="bottom" v-el:bottom>-->
+    <!--        &lt;!&ndash; <operator-badge></operator-badge> &ndash;&gt;-->
+    <!--        <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>
@@ -119,429 +120,457 @@
     <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'
+import vue from 'vue'
+import co from 'co'
+import {HttpResetClass} from 'vue-client'
 
-  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/lefticon/菜单伸缩.png',
-          set: '/images/lefticon/系统设置.png',
-          out: '/images/lefticon/退出系统.png',
-          img1: '/images/newStyle/login-user.png',
-          logoimg: '/static/newStyle/fife.png'
-          // img2: '/images/lefticon/退出系统.png',
-        },
-        treeOrIcon: false,
-        userpane: false,
-        isManger: false,
-        show: false,
-        orgpathnames: this.$login.f.orgpathnames,
-        systemname: '客服系统',
-        date: this.$login.toStandardDateString(),
-        tabs:[],       //已初始化页签数组
-        selecttab:'',
-        setting:true,
-          srcsetting:'../../static/newStyle/setting.png'
+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/lefticon/菜单伸缩.png',
+        set: '/images/lefticon/系统设置.png',
+        out: '/images/lefticon/退出系统.png',
+        img1: '/images/newStyle/login-user.png',
+        logoimg: '/static/newStyle/fife.png'
+        // img2: '/images/lefticon/退出系统.png',
+      },
+      treeOrIcon: false,
+      userpane: false,
+      isManger: false,
+      show: false,
+      orgpathnames: this.$login.f.orgpathnames,
+      systemname: '客服系统',
+      date: this.$login.toStandardDateString(),
+      tabs:[],       //已初始化页签数组
+      selecttab:'',
+      setting:true,
+      srcsetting:'../../static/newStyle/setting.png'
 
-        // headerHint: true, // 右侧顶部提示信息
-        // value: 25645.26,
-        // AddChangeMsgShow: false,
-        // showsum: false
+      // 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("系统名称"):'客服系统'
+    this.imgs.logoimg = '/static/newStyle/' + this.systemname + '.png'
+    //   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()
+    this.applyinfo()
+  },
+  methods: {
+    openUrl() {
+      var url = `http://123.60.214.109:8406/submitTicket?contact=${this.$login.f.name}&orgName=${this.$login.f.orgs}&phone=${this.$login.f.f_user_telephone}`
+      window.open(url, '_blank')
+    },
+    hindsetting(){
+
+      this.setting=!this.setting
+      if(this.setting){
+        this.srcsetting='../../static/newStyle/setting.png'
+      }else {
+        this.srcsetting='../../static/newStyle/setting1.png'
       }
+
     },
-    ready () {
-      let component = this.$login.getUrlCompileParames('component')
-      if (component) {
-        this.isManger = true
-        this.$refs.route.init(component, {data: this.functions.functions})
+    hindsetting1(){
+
+      if(!this.setting){
+        this.srcsetting='../../static/newStyle/setting.png'
+        this.setting=true
       }
-      if(this.$login.f.password == '1'){
-        this.$showMessage('本地登录系统为此账户的初始密码，请确认修改密码！！！', ['confirm', 'cancel']).then((res) => {
-          if(res == 'confirm')
-            this.show = true
-        })
+
+    },
+    isnodo(val){
+      console.log(val,'ss')
+      this.selecttab = val
+    },
+    mouseenteruser(){
+      this.userpane=true
+    },
+    mouseleaveuser(){
+      this.userpane=false
+    },
+    unfurl () {
+      if(this.showsum){
+        this.showsum = false
+      } else {
+        this.showsum = true
       }
-      console.log("系统名称",this.$appdata.getSingleValue("系统名称"))
-      this.systemname = this.$appdata.getSingleValue("系统名称")? this.$appdata.getSingleValue("系统名称"):'客服系统'
-      this.imgs.logoimg = '/static/newStyle/' + this.systemname + '.png'
+    },
+    // 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")
-      //   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()
+      //   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 = 14 + "%"
+      //   this.$els.bottom.style.width = this.$els.box.clientWidth - 14 + "%"
+      // }else {
+      //   this.$els.top.style.width = 8 + "%"
+      //   this.$els.bottom.style.width = this.$els.box.clientWidth - 8 + "%"
+      // }
     },
-    methods: {
-        hindsetting(){
-
-          this.setting=!this.setting
-            if(this.setting){
-                this.srcsetting='../../static/newStyle/setting.png'
-            }else {
-                this.srcsetting='../../static/newStyle/setting1.png'
-            }
-
-        },
-        hindsetting1(){
-
-            if(!this.setting){
-                this.srcsetting='../../static/newStyle/setting.png'
-                this.setting=true
-            }
-
-        },
-      isnodo(val){
-          console.log(val,'ss')
-        this.selecttab = val
-      },
-      mouseenteruser(){
-        this.userpane=true
-      },
-      mouseleaveuser(){
-        this.userpane=false
-      },
-      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 = 14 + "%"
-        //   this.$els.bottom.style.width = this.$els.box.clientWidth - 14 + "%"
-        // }else {
-        //   this.$els.top.style.width = 8 + "%"
-        //   this.$els.bottom.style.width = this.$els.box.clientWidth - 8 + "%"
-        // }
-      },
-      changeMain(userid) {
-        this.$goto('res-main', {userid: this.userid}, 'self')
-      },
-      tabChange (name) {
-          console.log(name,'tabchanage')
-        this.$refs.tree.changeSelect(name)
-      },
-      tabcg(val){
-          console.log(val)
-        this.tabs = val
-      }
+    changeMain(userid) {
+      this.$goto('res-main', {userid: this.userid}, 'self')
+    },
+    tabChange (name) {
+      console.log(name,'tabchanage')
+      this.$refs.tree.changeSelect(name)
+    },
+    tabcg(val){
+      console.log(val)
+      this.tabs = val
     },
-    computed: {
-      nowDate () {
-        return this.$login.getNowDate()
+    applyinfo() {
+      //如果当前登陆人有报建待办业务
+      let http = new HttpResetClass()
+      let data = {
+        condition: '1 = 1',
+        data: {
+          id: this.$login.f.id,
+          org: this.$login.f.orgs
+        }
       }
+      http.load('POST', 'rs/sql/checkuser', {data: data}, {
+        resolveMsg: null,
+        rejectMsg: null
+      }).then((res) => {
+        // console.log("报建待办数据：" + JSON.stringify(res.data))
+        // console.log("报建待办数据条数：" + JSON.stringify(res.data.length))
+        if (res.data.length > 0) {
+          this.$showMessage("您有需要处理的报建待办业务！")
+        }
+      })
+
+    }
+  },
+  computed: {
+    nowDate () {
+      return this.$login.getNowDate()
     }
   }
+}
 </script>
 <style lang="less">
-  /* 组件内通用样式 */
-  .select-error {
-    button {
-      border-bottom: 1px solid #a94442!important;
+/* 组件内通用样式 */
+.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;
     }
   }
-  // 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;
     }
   }
-  // 日期组件在表单中沾满
-  .form-horizontal .datepicker {
+  .btn-group, .btn-group-vertical {
     width: 100%;
-  }
-  // 下拉选择框占据剩余全部空间
-  .select-overspread {
-    .form-group {
-      // margin: 0px 5px 10px 0px;
-      .form-control {
-        margin-right: 0px;
-      }
-    }
-    .btn-group, .btn-group-vertical {
+    // padding-right: 5px;
+    button {
       width: 100%;
-      // padding-right: 5px;
-      button {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-    }
-    .dropdown-menu {
-      width: 100%
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
   }
-  // 需要特定宽度的的样式
-  .width-60 {
-    width: 60px;
-  }
-  .userpanel {
-    font-weight: 300;
-    color: #333;
-    position: fixed;
-    right: 30px;
-    top: 45px;
-    background-color: white;
-    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
-    padding: 4px 10px 4px 10px;
-    border-radius:2px;
-  }
-  .width-80 {
-    width: 80px;
-  }
-  .width-100 {
-    width: 100px;
-  }
+  .dropdown-menu {
+    width: 100%
+  }
+}
+// 需要特定宽度的的样式
+.width-60 {
+  width: 60px;
+}
+.userpanel {
+  font-weight: 300;
+  color: #333;
+  position: fixed;
+  right: 30px;
+  top: 45px;
+  background-color: white;
+  box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
+  padding: 4px 10px 4px 10px;
+  border-radius:2px;
+}
+.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;
+/*右侧区域的背景*/
+.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;
-    margin: 1em 0;
-  }
+}
+.tree-flex-icon {
+  width: 50px;
+  /*transition: 0.5s;*/
+  > .span {
+    overflow-x: visible;
+  }
+}
+.tree-flex h3 {
+  text-align: center;
+  margin: 1em 0;
+}
 
-  .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;
-    border-top: 1px solid #4a7cae;
-    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 #4a7cae;
-    // 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-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;
+  border-top: 1px solid #4a7cae;
+  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 #4a7cae;
+  // 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 {
+  /* 控制显示列表的样式 */
+  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: 1.2em;
-    width: 1.2em;
-    margin-right: 15px;
-    margin-left: 5px;
-  }
-  .line {
-    height: 100%;
-    width: 5px;
-    background: #4C637B;
-    cursor: e-resize;
-  }
-  /*为树（tree）组件写的样式*/
-  .tree-img {
-    font-size: 1.2em;
-  }
+}
+.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: 1.2em;
+  width: 1.2em;
+  margin-right: 15px;
+  margin-left: 5px;
+}
+.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;
-  }
+/*将较长信息截断显示，鼠标悬停显示全部信息*/
+.cutout50 {
+  max-width: 50px;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  /* 滚动条样式 */
-  /*---滚动条默认显示样式--*/
-  ::-webkit-scrollbar-thumb{
-    //  display: none;
-    background-color:rgba(0,0,0,0.4);
-    /*background-color:red;*/
-    height:50px;
-    outline-offset:-2px;
-    /*outline:2px solid #fff;*/
-    -webkit-border-radius:4px;
-    /*border: 2px solid #fff;*/
-  }
+/* 滚动条样式 */
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb{
+  //  display: none;
+  background-color:rgba(0,0,0,0.4);
+  /*background-color:red;*/
+  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;
-  }
+/*---鼠标点击滚动条显示样式--*/
+::-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>