peisweb/src/views/Home.vue

<template>
  <div style="background: #F4F8FF">
    <div style="position: absolute; top:15px;right:5px; z-index: 1000;">
      <el-tooltip class="item" content="刷新" placement="left">
        <i class="el-icon-refresh" @click="reloadIgnoringCache"
          style="padding-right: 5px;font-size: 22px;cursor:pointer;"></i>
      </el-tooltip>
      <i class="el-icon-minus" @click="windowMin" style="padding-right: 5px;font-size: 22px;cursor:pointer;"></i>
      <i class="el-icon-copy-document" @click="btnMax" style="padding-right: 5px;font-size: 22px;cursor:pointer;"></i>
      <i class="el-icon-close" @click="windowClose" style="padding-right: 5px;font-size: 22px;cursor:pointer;"></i>
    </div>
    <div>
      <el-container>
        <el-header style="height:50px; line-height: 40px" class="principalheader">
          <div class="navs">
            <img src="@/assets/images/logo2.png" alt="" style="width: 24px; height: 24px" />
            <div class="maintitle">{{ lsysConfig.softName }}</div>

            <!--动态生成菜单 add by pengj 'text-align: center;width:' + (window.pageWidth - 280) + 'px;display:flex;'       
          <div :style="'display:flex;justify-content:center;width:' + (window.pageWidth - 300) + 'px;'">
            <div v-for="menu in menuPriv" :key="menu.id"
              :class="className == menu.displayName ? `actived ${menu.displayName}` : menu.displayName">
              <el-dropdown @command="handleCommand" class="">
                <span class="el-dropdown-link" style="margin:0 5px;">{{ menu.displayName }}</span>
                <el-dropdown-menu slot="dropdown" class="project-dropdown">
                  <el-dropdown-item v-for="page in menu.treeChildren" :key="page.id"
                    :command="beforeHandleCommand(menu.displayName, page.routeUrl)" class="dropdownmain">
                    {{ page.displayName }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          -->
            <!--动态生成菜单支持多级 add by pengj -->
            <div :style="`display:flex;justify-content:center;width: ${(window.pageWidth - 450)}px;`">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                style="display: flex">
                <!--1级菜单-->
                <template v-for="menu1 in menuPriv">
                  <el-menu-item :key="menu1.id" v-if="menu1.menuType == '1'" :index="menu1.id">
                    {{ menu1.displayName }}
                  </el-menu-item>
                </template>
                <template v-for="menu1 in menuPriv">
                  <el-submenu :popper-append-to-body="false" :key="menu1.id" v-if="menu1.menuType == '0'"
                    :index="menu1.id">
                    <template slot="title">{{ menu1.displayName }}</template>
                    <!--2级菜单-->
                    <template v-for="menu2 in menu1.treeChildren">
                      <el-menu-item :key="menu2.id" v-if="menu2.menuType == '1'" :index="menu2.id">{{ menu2.displayName
                      }}</el-menu-item>
                    </template>
                    <template v-for="menu2 in menu1.treeChildren">
                      <el-submenu :popper-append-to-body="false" :key="menu2.id" v-if="menu2.menuType == '0'"
                        :index="menu2.id" class="submenutitle">
                        <template slot="title">
                          <div style="padding:0 10px;margin-right: 8px;">{{ menu2.displayName }}</div>
                        </template>
                        <!--3级菜单-->
                        <template v-for="menu3 in menu2.treeChildren">
                          <el-menu-item :key="menu3.id" v-if="menu3.menuType == '1'" :index="menu3.id">{{
                            menu3.displayName }}</el-menu-item>
                        </template>
                        <template v-for="menu3 in menu2.treeChildren">
                          <el-submenu :popper-append-to-body="false" :key="menu3.id" v-if="menu3.menuType == '0'"
                            :index="menu3.id">
                            <template slot="title">
                              <div style="padding:0 10px;margin-right: 8px;">{{ menu3.displayName }}</div>
                            </template>
                            <!--4级菜单-->
                            <template v-for="menu4 in menu3.treeChildren">
                              <el-menu-item :key="menu4.id" v-if="menu4.menuType == '1'" :index="menu4.id">{{
                                menu4.displayName }}</el-menu-item>
                            </template>
                            <template v-for="menu4 in menu3.treeChildren">
                              <el-submenu :popper-append-to-body="false" :key="menu4.id" v-if="menu4.menuType == '0'"
                                :index="menu4.id">
                                <template slot="title">
                                  <div style="padding:0 10px;margin-right: 8px;">{{ menu4.displayName }}</div>
                                </template>
                              </el-submenu>
                            </template>
                          </el-submenu>
                        </template>
                      </el-submenu>
                    </template>
                  </el-submenu>
                </template>
              </el-menu>
            </div>
            <!--  -->
            <div @contextmenu.prevent="onContextmenu">
              <img src="@/assets/images/me.png" alt="" class="currentuser" />
              <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
              <el-dropdown>
                <span class="el-dropdown-link" style="color: #222531; font-weight: 700">
                  <!-- <img
                  src="@/assets/images/frame.png"
                  alt=""
                  style="width: 20px; height: 20px"
                  class="operateimg"
                /> -->
                  {{ user }} <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                  <el-dropdown-item @click.native="editpassword">修改密码</el-dropdown-item>

                  <el-dropdown-item @click.native="localSet">本地设置</el-dropdown-item>
                  <el-dropdown-item v-if="LocalConfig.normal.isDevTool"
                    @click.native="toggleDevTools">调试工具</el-dropdown-item>
                  <el-dropdown-item @click.native="clientConfigShow">客户端参数</el-dropdown-item>
                  <el-dropdown-item @click.native="localDBclear">清除本地缓存</el-dropdown-item>
                  <!--
                  <el-dropdown-item @click.native="windowMax"
                  >最大化</el-dropdown-item
                >
                  <el-dropdown-item @click.native="windowClose"
                  >关闭</el-dropdown-item
                >
                  -->
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <!-- 修改密码弹框 -->
        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
          <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="旧密码" prop="oldPassWord">
              <el-input v-model="form.oldPassWord" autocomplete="new-password" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassWord">
              <el-input v-model="form.newPassWord" autocomplete="new-password" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="newPassWord">
              <el-input v-model="confirmpassword" type="password" autocomplete="new-password" show-password></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="determine">确 定</el-button>
          </span>
        </el-dialog>
        <el-container v-if="LocalConfig.normal.displayTab">
          <common-tab></common-tab>
          <el-main style="margin-top: 84px;">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </el-main>
        </el-container>
        <el-container v-else>
          <el-main style="margin-top: 50px;">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>

    </div>
    <div>
      <!--通用本地参数设置-->
      <el-dialog title="本地参数设置" :visible.sync="dialogWin.LocalConfig" :close-on-click-modal="false"
        :append-to-body="true" width="800px" height="600px">
        <LocalConfig />
      </el-dialog>
    </div>
  </div>
</template>
<script>
///api/app/item/in-filter
import router from "@/router";
import { getapi, postapi } from "@/api/api";
import { mapState } from "vuex";
import { getTreeNode, madeTree } from "../utlis/tree";
import { deepCopy } from "@/utlis/proFunc";
import LocalConfig from "../components/common/LocalConfig.vue";;
import { setDBCom, getDBCom, clearDBCom } from "../utlis/indexedDB";
import CommonTab from '../components/common/CommonTab.vue'

export default {
  components: {
    LocalConfig,
    CommonTab
  },
  data() {
    return {
      activeIndex: "0",
      menuPriv: [], // 菜单权限
      className: "",
      index: 1,
      isCollapse: false,
      user: "",
      dialogVisible: false,
      password: "",
      form: {
        oldPassWord: "",
        newPassWord: "",
      },
      confirmpassword: "",
      rules: {
        oldPassWord: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassWord: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
      },
      LocalConfig: {
        normal: { // 常规参数
          isDevTool: false, // 壳端是否显示打开调试工具的按钮
          displayTab:false// 是否显示标签页
        }
      },
      LocalConfigInit: {},
      lsysConfig: {
        apiurl: "http://10.1.12.140:9529",
        softName: "创业体检管理系统"
      }
    };
  },
  computed: {
    ...mapState(["window", "dialogWin", "sysConfig"]),
  },
  created() {
    let expires_in = parseInt(window.sessionStorage.getItem("expires_in"));
    //console.log("dqtime / expires_in",dqtime,expires_in)
    if (!expires_in) {
      router.push({ path: "/Login" });
      return;
    }

    try {
      this.lsysConfig = JSON.parse(window.sessionStorage.getItem("sysConfig"))
    } catch (error) {
      this.lsysConfig = this.sysConfig
    }

    this.password = this.changepassword;
    // console.log(this.password);
    // console.log(this.$store.state.changepassword, "ssssssssssss");
    this.user = window.sessionStorage.getItem("user");

    this.LocalConfigInit = deepCopy(this.LocalConfig)
    let LocalConfig = window.localStorage.getItem("LocalConfig") || null
    try {
      this.LocalConfig = Object.assign({}, this.LocalConfig, JSON.parse(LocalConfig) || {})
    } catch (error) {
      console.log('window.localStorage.getItem("LocalConfig")', error)
    }
  },

  mounted() {
    //获取当前用户的菜单权限
    this.getUserAllPriv();
    // this.getUserMenuPriv();
  },

  methods: {

    onContextmenu(event) {
      if (!this.$peisAPI) return      
      console.log('this.$peisAPI.contextMenuForPeis()')
      this.$peisAPI.contextMenuForPeis()
        .then(res => {
          console.log('res', res)
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          console.log('finally')
        })
    },
    // 菜单操作
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      // tree: any, childNodeName: any, idName: any, idVal: any
      let node = getTreeNode(this.menuPriv, "treeChildren", "id", key);
      if (node && this.$route.path !== '/' + node.routeUrl){
        this.$store.commit('selectMenu', node)
        this.$router.push({ path: node.routeUrl });
      }
    },
    //获取用户所有权限
    getUserAllPriv() {
      getapi("/api/app/menuinfo/getmymenuinfolist").then((res) => {
        if (res.code > -1) {
          window.sessionStorage.setItem("userPriv", JSON.stringify(res.data));

          let menuPriv = res.data.filter(e => { return e.menuType == '0' || e.menuType == '1' })
          this.menuPriv = madeTree(menuPriv, 'treeChildren', 'parentId', 'id', null)
          this.menuPriv = this.menuFilter(this.menuPriv)

        }
      });
    },

    //获取用户菜单树
    getUserMenuPriv() {
      getapi("/api/app/menuinfo/getmymenuinfotreelist").then((res) => {
        if (res.code > -1) {
          this.menuPriv = res.data;
          this.menuPriv = this.menuFilter(this.menuPriv);
          console.log("this.menuPriv", this.menuPriv);
        }
      });
    },

    // 过滤菜单
    menuFilter(menu) {
      return menu.filter((e) => {
        if (e.menuType == "0" || e.menuType == "1") {
          if (e.treeChildren && e.treeChildren.length > 0) {
            let temp = e.treeChildren.filter((e1) => {
              return e1.menuType == "0" || e1.menuType == "1";
            });
            if (temp.length > 0) {
              e.menuType = "0";
              e.treeChildren = this.menuFilter(e.treeChildren);
            } else {
              e.menuType = "1";
            }
          } else {
            e.menuType = "1";
          }
          return e;
        }
      });
    },

    handleCommand(val) {
      this.className = val.flag;
      if (this.router.path != val.command) {
        this.router.path = val.command;
        this.$router.push({ path: val.command }).catch(() => { });
      }
      // let menuId = arguments[1].$parent.$el.id
      // let menuList = document.getElementById(menuId)
      // console.log(menuList)
    },
    beforeHandleCommand(flag, command) {
      return {
        flag: flag,
        command: command,
      };
    },
    //确定修改密码按钮
    determine() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.form.oldPassWord) {
            this.$message.warning("请输入旧密码");
          } else if (this.confirmpassword != this.form.newPassWord) {
            this.$message.warning("二次输入的密码不一致");
          } else {
            postapi("/api/identity/users/updatepassword", this.form)
              .then(res => {
                if (res.code > -1) {
                  console.log("修改成功");
                  this.dialogVisible = false;
                }
              });
          }
        }
      });
    },
    //修改密码
    editpassword() {
      this.form.oldPassWord = ""
      this.confirmpassword = ""
      this.form.newPassWord = ""
      this.dialogVisible = true;
    },
    //退出登录
    logout() {
      // window.sessionStorage.removeItem("tokentype");
      // window.sessionStorage.removeItem("token");
      // window.sessionStorage.removeItem(['expires_in','tokentype','refresh_token','user','token'])
      window.sessionStorage.clear();
      this.$router.push({ path: "/login" });
    },

    // 本地设置
    localSet() {
      // this.dialogWin.LocalConfig = true

      this.$router.push({ path: "/LocalConfig" });
    },

    localDBclear(){
      clearDBCom()
      .then(() => {
        this.$message.success({showClose:true,message:'操作成功！'})
      })
      .catch(err => {
        console.error(err)
        this.$message.error({showClose:true,message:err.message})
      })
    },

    //打开客户端调试工具
    toggleDevTools() {
      if (!this.$peisAPI) {
        this.$message.info({ showClose: true, message: "此功能，需要在壳客户端才可运行！" });
        return;
      }
      this.$peisAPI.toggleDevTools();
    },

    // 打开客户端设置
    clientConfigShow() {
      if (!this.$peisAPI) {
        this.$message.info({ showClose: true, message: "此功能，需要在壳客户端才可运行！" })
        return
      }
      this.$peisAPI.clientConfigShow();
    },
    // 最小化
    windowMin() {
      if (!this.$peisAPI) {
        this.$message.info({ showClose: true, message: "此功能，需要在壳客户端才可运行！" });
        return;
      }
      this.$peisAPI.windowMin();
    },

    btnMax() {
      if (!this.$peisAPI) {
        this.$message.info("此功能，需要在壳客户端才可运行！")
        return
      }
      this.$peisAPI.windowMax();
    },
    // 刷新
    reloadIgnoringCache() {
      if (!this.$peisAPI) {
        this.$message.info({ showClose: true, message: "此功能，需要在壳客户端才可运行！" });
        return;
      }
      this.$peisAPI.reloadIgnoringCache();
    },
    // 最大化
    windowMax() {
      if (!this.$peisAPI) {
        this.$message.info({ showClose: true, message: "此功能，需要在壳客户端才可运行！" });
        return;
      }
      this.$peisAPI.windowMax();
    },
    windowClose() {
      if (!this.$peisAPI) {
        this.$message.info({ showClose: true, message: "此功能，需要在壳客户端才可运行！" });
        return;
      }
      this.$peisAPI.windowClose();
    },
  },
  // components: { router },
};
</script>
<style scoped>
@import "../assets/css/global_card.css";

:deep .el-dropdown-menu__item {
  color: #52555f;
  font-size: 14px;
  font-weight: 400;
  font-family: "NotoSansSC-Regular";
}

.dropdownmain:hover,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: rgba(20, 96, 243, 0.1);
  color: #396ffa;
  /* color: #2BCA84; */
  font-weight: 700;
  font-size: 14px;
  font-family: "NotoSansSC-Bold";
}

.titleimg :hover {
  width: 30px;
  background-color: rgb(34, 149, 98);
  z-index: 99;
}

.el-dropdown-link:hover {
  /* background-color: rgb(202, 249, 203); */
  color: #396ffa;
  font-weight: 700;
  /* background-color: ; */
  /* border-top-left-radius: 5px;
  border-top-right-radius: 5px; */
  font-family: "NotoSansSC-Bold";
}

.dropdowncolor {
  font-size: 12px;
}

.el-dropdown {
  color: rgb(140, 135, 134);
  font-size: 12px;
}

.currentuser {
  width: 32px;
  height: 32px;
  position: relative;
  right: 2%;
  top: 10px;
  color: #000;
  font-size: 18px;
  z-index: 99;
}

.registrationimgimges {
  width: 20px;
  height: 20px;
  position: absolute;
  left: -15px;
  top: 15px;
}

.commonsettingimg {
  width: 20px;
  height: 20px;
  position: absolute;
  left: -15px;
  top: 15px;
}

.chargeimg {
  position: absolute;
  left: -15px;
  top: 15px;
}

.basicimg {
  position: absolute;
  left: -17px;
  top: 15px;
}

.iconimg {
  position: absolute;
  left: 0px;
  top: 10px;
}

.el-dropdown-link {
  font-size: 14px;
  margin: 0;
  font-weight: 400;
  color: #52555f;
  font-family: "NotoSansSC-Regular";
}

.principalheader {
  background-color: #fff;
  opacity: 1;
  /* opacity: 0.8;
  opacity: 0.8; */
  color: #ccc;
  border: 1px solid #ccc;
}

.el-dropdown-item {
  text-align: center;
}

/* 
.el-dropdown-menu {
  text-align: center;
  overflow: scroll;
  max-height: 500px;
  width: 150px;
  overflow-x: hidden;
  margin-left: 5%; 
}
*/

.el-header {
  position: fixed;
  padding: 0 10px;
  /* top:0;
  left: 0; */
  width: 100%;
  overflow: hidden;
  overflow: auto;
  z-index: 999;
}

.el-container {
  /* position: fixed; */
  width: 100%;
  flex-direction: column;
}

.el-menu {
  border-right: none;
}

.navs {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  flex-flow: 1;
}

::v-deep .el-card__body {
  /* height: 90vh; */
  height: 100%;
  overflow-y: auto;
}

.maintitle {
  width: 180px;
  font-size: 20px;
  font-weight: 600;
  color: #232748;
  margin-left: 10px;
  font-family: "NotoSansSC-Bold";
}

::v-deep .el-dropdown-menu item:not(.is-disabled) {
  color: #fff;
}

.el-header {
  height: 40px;
}

::v-deep .el-select-dropdown {
  background: #ccc;
}

.operateimg {
  position: relative;
  left: 0;
  top: 5px;
}

.el-aside {
  /* height: calc(100vh, -70px); */
  height: calc(100vh - 0px);
  /* height: 100%; */
  height: 91.5vh;
  /* height: 100%; */
  /* height: calc(100vh, -0px); */
}

.el-main {
  height: calc(100vh,-200px);
}

.el-menu-vertical-demo .el-menu {
  /* min-height: 100vh; */
  height: calc(100vh, -70px);
}

.btn {
  width: 120px;
  color: #000;
  font-weight: 700;
  /* margin-left: 60%; */
  /* position: relative;
  right: -70%; */
  margin-left: auto;
}

.collapseandunfoled {
  text-align: center;
  line-height: 40px;
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

/* .actived {
  color: #396FFA!important;
  border-bottom: 4px solid #396FFA;
  font-weight: 700;
} */
.actived .el-dropdown-link {
  color: #396ffa !important;
  font-weight: 700;
  font-family: "NotoSansSC-Bold";
}

.actived .el-dropdown-link:after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: #396ffa;
  position: absolute;
  bottom: 4px;
  left: 0;
}

::v-deep .el-submenu__title {
  color: #FF0000;
}

::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title {
  font-size: 14px;
  height: 47px;
  line-height: 47px;
  font-weight: 700;
  font-family: "NotoSansSC-Bold";
  color: #52555f;
  border-bottom: 3px solid #396ffa;
}

/* ::v-deep .submenutitle.is-active .el-submenu__title{
  border-bottom:none
} */
::v-deep .submenutitle .el-submenu__title {
  height: 36px !important;
  line-height: 36px !important;
}

::v-deep .el-menu--horizontal>.el-menu-item {
  height: 40px;
  line-height: 40px;
}

::v-deep .el-submenu__title {
  padding: 0 5px 0 5px !important;
}

::v-deep .el-menu--popup {
  min-width: auto !important;
  /* padding: 5px 10px !important; */
}

::v-deep .el-submenu .el-menu-item {
  min-width: auto !important;
}

::v-deep .el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  font-size: 14px;
  font-weight: 400;
  font-family: "NotoSansSC-Regular";
  color: #52555f;
}

:v-deep .el-menu-item .is-active {
  background-color: #247bb4 !important;
}

::v-deep .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: rgba(20, 96, 243, 0.1);
  font-size: 14px;
  font-weight: 700;
  font-family: "NotoSansSC-Bold";
  color: #396ffa;
}

/* ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  display: none;
} */
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
  vertical-align: middle;
  margin-left: 8px;
  margin-top: -3px;
  position: absolute;
  top: 14px;
  right: 4px;
}

::v-deep .submenutitle .el-submenu__title {
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: "NotoSansSC-Regular" !important;
  color: #52555f !important;
}

::v-deep .submenutitle .el-submenu__title:hover {
  background-color: rgba(20, 96, 243, 0.1) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: "NotoSansSC-Bold" !important;
  color: #396ffa !important;
}

::v-deep .submenutitle .el-submenu__title {
  height: 36px !important;
  line-height: 36px !important;
}

::v-deep .submenutitle .el-submenu__title .el-submenu__icon-arrow {
  font-size: 14px !important;
}

::v-deep .el-menu--horizontal .el-menu .el-menu-item.is-active {
  background-color: rgba(20, 96, 243, 0.1) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: "NotoSansSC-Bold" !important;
  color: #396ffa !important;
}

/* ::v-deep .el-menu--horizontal .el-menu .el-submenu.is-active .el-submenu__title{
  background-color: rgba(20, 96, 243, 0.1) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: "NotoSansSC-Bold" !important;
  color: #396ffa !important;
} */
::v-deep .el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  padding: 0 15px !important;
}

::v-deep .el-menu.el-menu--horizontal {
  border-bottom: none;
}

/* ::v-deep .el-menu--popup-right-start{
      margin-left: 15px !important;
} */
::v-deep .el-dropdown-menu__item,
.el-menu-item {
  font-size: 14px;
  padding: 0 5px;
}

::v-deep .el-menu-demo .el-icon-arrow-down:before {
  content: "";
}

/* .project-dropdown{
  max-height:300px;
  overflow: auto;
}
.project-dropdown::-webkit-scrollbar
{
    width: 5px;
    height: 5px;
    background-color: #F5F5F5;
}
.project-dropdown::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
} */
</style>