vue页面拉动条处理+动态主题样式处理

less

@import 'theme.less';
@ty-border:var(--ty-border);/* 边框颜色 */
@selected-background: var(--selected-background);/* 选中时背景颜色 */
@hover-background:  var(--hover-background);/* 悬浮时背景颜色 */
@tag-color:var(--tag-color);/* 标签字体颜色 */
@ip-content-backgrund:var(--ip-content-backgrund);/* 资产页面背景 */
@ty-color: var(--ty-color);/* 全局框内颜色 */
.aseet-border{
  width: 100%;
  min-width: 1200px;
  height:100vh;
  min-height:800px;
  color: @tag-color;
  .aseet-header{
    height: 33px;
    width: 100%;
    background: @ty-color;
    border-bottom: 1px solid @ty-border;
    position: relative;
    .header-left{
      width: 50%;
      height: 100%;
      position: absolute;
      left: 0;
      img{
        position: absolute;
        width: 20px;
        left: 3px;
        top: 7px;
      }
      span{
        line-height: 33px;
        left: 25px;
        position: absolute;
      }
    }
    .header-right{
      width: 50%;
      height: 100%;
      position: absolute;
      right: 0;
      .action{
        cursor: pointer;
        transition: all 0.3s;
        width: 30px;
        height: 30px;
        line-height: 33px;
        margin-right: 6px;
        display: inline-block;
        float: right;
        text-align: center;
        font-size: 16px;
        &:hover {
          opacity: 0.6;
        }
      }
    }
    
  }
  .aseet-content{
    height: calc(100% - 33px - 30px);
    width: 100%;
    background: @ty-color;
    position: relative;
    .aseet-tag{
      height: 100%;
      width: 22px;
      position: absolute;
      left: 0px;
      .left-toolbar-container{
        padding: 0;
        background: @ty-color;
        border-right: 1px solid @ty-border;
        width: 100%;
        height: 100%;
        li {
          padding-top: 10px;
          font-size: 12px;
          font-family: 'Consolas', '微软雅黑';
          width: 22px;
          height: 100px;
          cursor: pointer;
          letter-spacing: 2px;
          text-align: center;
          &:hover{
            background: @hover-background;
          }
        }
        .selected{
          background: @selected-background;
          &:hover{
            background: @selected-background;
          }
        }
      }
    }
    .aseet-center{
      height: 100%;
      width: calc(100% - 22px);
      border-right:1px solid @ty-border;
      position: absolute;
      right: 0;
      .aseet-top{
        width: 100%;
        position: absolute;
        top: 0;
        .tag-content{
          position: absolute;
          left: 0;
          width: 272px;
          height: 100%;
          border-right:1px solid @ty-border;
        }
        .ip-content{
          position: absolute;
          right: 0;
          width: calc(100% - 272px);
          height: 100%;
          background: @ip-content-backgrund;
        }
      }
      .aseet-bottom{
        width: 100%;
        border-top: 1px solid @ty-border;
        position: absolute;
        bottom: 0;
        .ma-resizer-y {
          position: absolute;
          width: 100%;
          height: 10px;
          margin-top: -5px;
          background: none;
          cursor: n-resize;
        }
        .bottom-content{
          width: 100%;
          .bottom-header{
            height: 25px;
            border-bottom: 1px solid @ty-border;
            .left{
              width: 50%;
              float: left;
              height: 100%;
              line-height: 25px;
              span{
                color: @tag-color;
                margin-left: 10px;
              }
            }
            .icon-min{
              float: right;
              margin-right: 10px;
              line-height:25px;
            }
          }
        }
        .bottom-tag{
          height: 30px;
          width: 100%;
          border-top: 1px solid @ty-border;
          position: relative;
          .ma-toolbar-container{
            padding: 0;
            background: @ty-color;
            border-right: 1px solid @ty-border;
            width: 100%;
            height: 100%;
            li {
              width: 100px;
              height: 29px;
              line-height: 29px;
              list-style: none;
              float: left;
              cursor: pointer;
              letter-spacing: 2px;
              text-align: center;
              &:hover{
                background: @hover-background;
              }
            }
            .selected{
              background: @selected-background;
              &:hover{
                background: @selected-background;
              }
            }
          }
        }
      }
    }
  }
  .aseet-footer{
    border-top: 1px solid @ty-border;
    height: 30px;
    width: 100%;
    background: @ty-color;
    position: absolute;
    bottom: 0;
    .message{
      line-height: 30px;
      margin-left: 20px;
    }
    .theme{
      right: 30px;
      line-height: 30px;
      position: absolute;
      cursor: pointer;
    }
  }
}

动态主题

/* 白色主题 */
.white-theme {
  --ty-color:#f2f2f2;/* 全局框内颜色 */
  --ty-border:#cdcdcd;/* 边框颜色 */
  --selected-background: #bdbdbd;/* 选中时背景颜色 */
  --hover-background: #d9d9d9;/* 悬浮时背景颜色 */
  --tag-color:#000;/* 标签字体颜色 */
  --ip-content-backgrund:#b6b6b6;/* 资产页面背景 */
}

/* 黑色主题 */
.black-theme {
  --ty-color:#3c3f41;/* 全局框内颜色 */
  --ty-border:#323232;/* 边框颜色 */
  --selected-background: #303030;/* 选中时背景颜色 */
  --hover-background: #5c5656;/* 悬浮时背景颜色 */
  --tag-color:#bbbbbb;/* 标签字体颜色 */
  --ip-content-backgrund:#282828;/* 资产页面背景 */
}