2020-06-08

king

2020-06-08 46fa548514ba2a438908586e2b54ed742777e9b0

 src/views/mobile/index.scss

@@ -16,19 +16,48 @@
      width: 40px;
      background: #262626;
      box-shadow: 2px 0px 2px #000;
      .mob-tool-item {
        color: #ffffff;
      .mob-tool-content {
        width: 100%;
        display: flex;
        align-items: center;
        writing-mode: tb-rl;
        padding: 16px 0;
        border-bottom: 1px solid #000;
        cursor: pointer;
        i {
          margin-bottom: 5px;
          margin-left: 2px;
        .plus-content {
          position: relative;
          color: #ffffff;
          width: 100%;
          display: flex;
          align-items: center;
          writing-mode: tb-rl;
          padding: 16px 0;
          border-bottom: 1px solid #000;
          cursor: pointer;
          z-index: 10;
          background: #262626;
          i {
            margin-bottom: 5px;
            margin-left: 2px;
          }
        }

        .useable-component {
          position: absolute;
          width: 300px;
          top: 0;
          bottom: 0;
          left: -340px;
          background: #fff;
          opacity: 0;
          transition: left 0.3s, opacity 0.3s;
        }
      }
      .mob-tool-content:hover {
        .useable-component {
          opacity: 1;
          left: 40px;
        }
      }
      .mob-tool-other {
        position: relative;
        z-index: 10;
        height: 1000px;
        background: #262626;
      }
    }