.out-dialog {
  position: fixed;
  right: 496px;
  width: 500px;
  height: 100%;
  z-index: 99;
  top: 0;
  bottom: 0;
  margin: auto;
  box-sizing: border-box;
  color: rgb(255, 83, 0);
  background: black;
  display: flex;
  padding: 25px;
  flex-direction: column;
  transition: all ease 0.5s;
  .content {
    overflow-y: scroll;
    .div-operation {
      display: inline-block;
      width: 3px;
      height: 13px;
      opacity: 1;
      border-radius: 1px;
      background: rgba(67, 136, 251, 1);
    }
    .text-operation {
      display: inline-block;
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
      font-weight: 700;
      margin-left: 5px;
    }
    .j-box {
      background-color: #000;
      opacity: 1;
      z-index: 99999;
      overflow-y: scroll;
      .journal {
        padding: 1% 3%;
        width: 100%;
        height: 150px;
        background-color: rgba(0, 0, 0);
        border-radius: 12px;
        border: 2px solid transparent;
        border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
      }
      .imgText {
        display: flex;
        align-items: center;
        justify-content: space-between;
    
        .ztzm {
          display: flex;
          align-items: center;
        }
    
        .cxbtn {
          color: rgba(255, 255, 255, 1);
          border: none;
          border-radius: 6px;
          width: 59.79px;
          height: 32px;
          opacity: 1;
          background: linear-gradient(
            180deg,
            rgba(255, 187, 0, 1) 0%,
            rgba(255, 112, 3, 1) 91.21%,
            rgba(255, 129, 3, 1) 100%
          );
        }
      }
      .btn-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-row-gap: 15px;
        .btn-item {
          text-align: center;
          display: flex;
          align-content: space-between;
          .left {
            width: 70px;
            height: 35px;
            line-height: 35px;
            border-radius: 4px;
            background: linear-gradient(
              180deg,
              rgba(1, 206, 255, 1) 0%,
              rgba(0, 150, 229, 1) 100%
            );
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            font-weight: 400;
          }
          .right {
            width: 140px;
            height: 35px;
            line-height: 35px;
            span {
              vertical-align: middle;
            }
            img {
              padding: 0 5px;
            }
          }
        }
      }
    }
  }
  
  .button-box {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    height: 60px;
    position: absolute;
    background-color: transparent;
    bottom: 0;
    left: 0;
    right: 0;
    .execute, .cancel {
      margin-right: 10px;
      width: 74px;
      height: 40px;
      opacity: 1;
      cursor: pointer;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      border: 0;
      margin-left: 10px;
    }
    .execute {
      background: rgb(67, 136, 251);
      color: white;
    }
    .cancel {
      background: white;
      color: black;
    }
  }
}

.fade-enter-active, .fade-leave-active {
  transform: translateX(0px);
}
.fade-enter-from, .fade-leave-to {
  transform: translateX(496px);
}