拓扑图

ZZJ

2021-10-13 878ce80ef3ca88a2c108fbc713cd6ea461c44de1

 src/pages/settings/views/deviceInfo.vue

@@ -8,43 +8,43 @@
            <span class="general-info">设备信息</span>

          </div>

          <div class=" info-bar">

            <span class="name">设备ID</span>

            <span class="name">设备ID：</span>

            <span class="desc">{{ deviceInfo.server_id }}</span>

          </div>

          <div class=" info-bar">

            <span class="name">设备型号</span>

            <span class="name">设备型号：</span>

            <span class="desc">{{ deviceInfo.deviceModel }}</span>

          </div>

          <div class=" info-bar">

            <span class="name">设备类型</span>

          <div class="info-bar">

            <span class="name">设备类型：</span>

            <span class="desc">{{ deviceInfo.deviceDesc }}</span>

          </div>

          <div class=" info-bar">

            <span class="name">通道个数</span>

            <span class="name">通道个数：</span>

            <span class="desc">{{ deviceInfo.channelCount }}</span>

          </div>

          <div class=" info-bar">

            <span class="name">主控版本</span>

            <span class="name">主控版本：</span>

            <span class="desc">{{ deviceInfo.masterVersion }}</span>

          </div>

          <div class=" info-bar">

            <span class="name">web版本</span>

            <span class="name">web版本：</span>

            <span class="desc">{{ deviceInfo.webVersion }}</span>

          </div>

          <div class=" info-bar">

            <span class="name">硬盘信息</span>

            <span class="name">硬盘信息：</span>

            <span class="desc">{{ deviceInfo.disks }}</span>

          </div>

          <div class=" info-bar">

            <span class="name">CPU</span>

            <span class="name">CPU：</span>

            <span class="desc">{{ deviceInfo.cpu }}</span>

          </div>

          <div class=" info-bar">

            <span class="name">内存</span>

            <span class="name">内存：</span>

            <span class="desc">{{ deviceInfo.memory }}</span>

          </div>

          <div class=" info-bar">

            <span class="name">运行时间</span>

            <span class="name">运行时间：</span>

            <span class="desc">{{ deviceInfo.runningTime }}</span>

          </div>

        </div>

@@ -215,273 +215,14 @@
    overflow: auto;

    box-sizing: border-box;

    padding: 10px 15px !important;

   /*  .el-form-item.is-required:not(.is-no-asterisk)

      > .el-form-item__label:before,

    .el-form-item.is-required:not(.is-no-asterisk)

      .el-form-item__label-wrap

      > .el-form-item__label:before {

      display: none;

    }

    .el-select {

      width: 100%;

    }

    .el-form-item {

      margin-bottom: 10px;

      height: 50px;

      background: #f8f8f8;

      padding: 4px 20px;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

      border-radius: 10px;

      .el-form-item__label {

        text-align: left;

        line-height: 42px;

      }

    }

    .el-form-item__content {

      line-height: 40px;

      position: relative;

      font-size: 14px;

    }

    .ip-input-container {

      max-width: none !important;

    }

    .lang {

      position: relative;

      height: calc(83% - 0px);

      .title {

        height: 35px;

        line-height: 35px;

        font-size: 16px;

        text-align: left;

        margin-bottom: 5px;

      }

      .bar-group {

        overflow: auto;

        height: 100%;

      }

      .bar {

        height: 44px;

        background-color: #f8f8f8;

        border-radius: 10px;

        line-height: 44px;

        box-sizing: border-box;

        padding: 0 30px 0 20px;

        display: flex;

        justify-content: space-between;

        margin-bottom: 10px;

        .left-part {

          .icon {

            color: rgba(191, 191, 191, 1);

            font-size: 16px;

            margin-right: 5px;

          }

        }

        .name {

          font-size: 15px;

        }

        .btns {

          width: 50px;

          display: flex;

          justify-content: space-between;

          color: rgba(191, 191, 191, 1);

          .el-icon-video-pause {

            cursor: pointer;

            font-size: 23px;

            vertical-align: middle;

            color: #409eff;

          }

          .el-icon-video-play {

            cursor: pointer;

            font-size: 23px;

            vertical-align: middle;

            color: #409eff;

          }

        }

        .desc {

          font-size: 14px;

          color: rgba(134, 134, 134, 1);

        }

      }

      .bar:hover {

        background-color: rgba(233, 233, 233, 1);

      }

      .add-group {

        margin: 10px auto;

        width: fit-content;

      }

      .upload-demo {

        -webkit-transition: all 0.3s;

        transition: all 0.5s;

        position: absolute;

        bottom: -40px;

  }



        left: calc(50% - 145px);

        .el-upload-dragger {

          width: 290px;

        }

      }

      .add-btn {

        height: 40px;

        line-height: 40px;

        margin: 0 auto;

        cursor: pointer;

        width: fit-content;

        .icon {

          font-size: 32px;

          color: rgba(61, 104, 225, 1);

        }

      }

      .min-dur {

        box-sizing: border-box;

        padding: 0 20px;

        background-color: rgba(248, 248, 248, 1);

        height: 105px;

        margin-bottom: 20px;

        border-radius: 15px;

        .title {

          height: 45px;

          line-height: 45px;

    .info-bar {

     border-radius: 8px;

   }



          text-align: left;

          box-sizing: border-box;

          padding: 0 6px;

          font-size: 14px;

        }

      }



      .min-dur:hover {

        background-color: rgba(233, 233, 233, 1);

      }



      .entity {

        display: flex;

        align-items: center;

        height: 30px;



        .sec {

          min-width: 30px;

          line-height: 80px;

          margin-right: 10px;

          color: rgba(120, 120, 120, 1);

          font-size: 14px;

        }

        .block {

          flex: 1;

          margin: 0 20px 0 6px;

        }

        .el-input-number--small {

          width: 100px;

        }

        .el-input-number.is-controls-right .el-input__inner {

          padding-left: 16px;

        }

        #cut_min_duration {

          .el-slider__bar {

            background-color: #3d68e1;

          }

          .el-slider__button-wrapper .el-tooltip {

            width: 18px;

            height: 18px;

            border: 4px solid #3d68e1;

            box-sizing: border-box;

          }

        }



        #cut_max_duration {

          .el-slider__bar {

            background-color: #ff9e6e;

          }

          .el-slider__button-wrapper .el-tooltip {

            width: 18px;

            height: 18px;

            border: 4px solid #ff9e6e;

            box-sizing: border-box;

          }

        }

      }

    }

    .save-btn {

      background-color: #3d68e1;

      width: 240px;

      height: 40px;

      margin: 0 auto;

      border-radius: 10px;

      color: #fff;

      line-height: 40px;

      cursor: pointer;

      font-size: 14px;

      margin-top: 20px;

    }

    .self-setting {

      .top-title {

        font-size: 16px;

        height: 30px;

        line-height: 30px;

        margin-bottom: 10px;

      }

      .icon-bar:hover {

        background-color: rgba(233, 233, 233, 1);

      }

      .icon-bar {

        cursor: pointer;

        background-color: rgba(248, 248, 248, 1);

        box-sizing: border-box;

        padding: 15px 25px;

        border-radius: 12px;

        margin-bottom: 12px;

        .bar-title {

          line-height: 20px;

          height: 20px;

          margin-bottom: 10px;

          display: flex;

          justify-content: space-between;

          .title {

            font-size: 14px;

          }

        }

        .entity {

          display: flex;

          .entity-img {

            background-color: rgba(248, 248, 248, 1);

            width: 50px;

            height: 50px;

            margin-right: 10px;

            img {

              width: 50px;

              height: 50px;

            }

          }

        }

      }

      .bg-bar {

        background-color: rgba(248, 248, 248, 1);

        box-sizing: border-box;

        padding: 15px 25px;

        border-radius: 12px;

        margin-bottom: 12px;

        .bg-list {

          display: flex;

          .bg-img {

            margin-right: 12px;

            cursor: pointer;

            // width: 120px;

                height: 80px;

            border: 2px solid transparent;

            img {

             border-radius: 5px;

    height: 100%;

            }

          }

          .bg-img:hover {

            border: 2px solid yellow;

          }

          .bg-list-active {

            border: 2px solid yellow;

          }

        }

      }

    } */

   .info-bar .name {

    color: #4F4F4F;

  }

}

</style>