.device-detail {
  width: calc(100% - 140px);
  height: calc(100% - 140px);
  margin: 30px 70px;

  .device-detail-cell {
    border-radius: 10px 10px 0 0;
    border: 1px solid #f3f3f3;
    box-shadow: 0 0 6px 0 #bdbdbd;

    //上部基本信息区
    .device-detail-title {
      color: #333;
      font-size: 15px;
      border-radius: 10px 10px 0 0;
      height: 48px;
      padding-top: 10px;
      padding-left: 20px;
      background-image: linear-gradient(to top, #f3f3f3, white);

      &::before {
        content: '';
        border-width: 4px;
        border-style: solid;
        border-color: #2f699d;
        border-radius: 4px;
        left: -8px;
        position: relative;
      }

      > label {
        color: #7c9cb7;
        font-weight: bold;
        font-size: 18px;
      }

      .device-detail-title-button {
        float: right;
        cursor: pointer;

        > img {
          margin-top: 5px;
          margin-right: 14px;
        }

        > label {
          cursor: pointer;
          font-size: 15px;
          color: #333;
          right: 10px;
          top: -4px;
          position: relative;
        }
      }

      .device-detail-title-button-hidden {
        display: none;
      }
    }

    .device-detail-title-content {
      background-color: #f9f9f9;
      height: 310px;
      padding: 25px 0;

      .device-detail-basic-img {
        position: relative;
        left: 20px;
        float: left;
        width: 320px;
        height: 180px;
        padding: 10px;
        line-height: 180px;
        text-align: center;
        border: 1px solid #345fa6;
      }

      .device-detail-edit-img {
        position: relative;
        left: 20px;
        float: left;
        width: 320px;
        height: 180px;
        border: 1px solid #345fa6;

        .ant-upload-select-picture-card {
          width: 317px;
          height: 177px;
          padding: 10px;
          color: black;
          background-color: #fbfbfb;
          text-align: center;
          border: 0;
          border-radius: 4px;
          cursor: pointer;
          -webkit-transition: border-color 0.3s ease;
          transition: border-color 0.3s ease;
          display: inline-block;
          vertical-align: top;
          margin-right: 8px;
          margin-bottom: 8px;

          .ant-upload {
            display: block;
            width: 100%;
            height: 100%;
            padding: 0;
          }
        }
      }

      .device-detail-basic-info {
        margin-left: 380px;
        height: 180px;

        .device-title-value {
          color: #666;
          font-size: 14px;
          line-height: 50px;
          margin-left: 20px;
        }

        .device-title-name {
          color: #666;
          font-size: 14px;
          line-height: 50px;
        }

        .ant-row {
          position: relative;
          margin-left: 0;
          margin-right: 0;
          margin-bottom: 12px;
          height: 50px;
          zoom: 1;
          display: block;
        }

        .device-detail-descr {
          height: 130px;
          padding-right: 20px;
          margin-top: 10px;
          overflow-y: auto;

          .device-title-descr-value {
            color: #666;
            font-size: 14px;
            margin-left: 20px;
          }

          .device-title-descr-name {
            color: #666;
            font-size: 14px;
          }
        }
      }
    }

    .device-detail-title-content-hidden {
      background-color: #f9f9f9;
      height: 150px;
      padding: 25px;
      display: none;
    }
  }
  //下部属性区
  .current-device-detail {
    height: calc(100% - 300px);
    overflow-y: auto;
    //DeviceInterface
    .device-interface {
      border-radius: 10px 10px 0 0;
      border: 1px solid #f3f3f3;
      box-shadow: 0 0 6px 0 #bdbdbd;
      margin: 20px 1px 0;
      height: auto;
      min-height: 166px;
      overflow: hidden;

      .device-detail-interface {
        border-radius: 10px 10px 0 0;
        height: 48px;
        padding-top: 10px;
        padding-left: 20px;
        background-image: linear-gradient(to top, #f3f3f3, white);

        &::before {
          content: '';
          border-width: 4px;
          border-style: solid;
          border-color: #2f699d;
          border-radius: 4px;
          left: -8px;
          position: relative;
        }

        > label {
          color: #7c9cb7;
          font-weight: bold;
          font-size: 18px;
        }

        //AddInterfaceProperty
        .interface-detail-property-button {
          float: right;

          .detail-add-img {
            cursor: pointer;

            > img {
              margin-top: 5px;
              margin-right: 14px;
            }

            > label {
              cursor: pointer;
              font-size: 15px;
              color: #333;
              right: 10px;
              top: -4px;
              position: relative;
            }
          }

          //AddEditDeviceInterface
          .device-interface-add-modal {
            height: 100%;
          }
        }
      }

      .device-detail-interface-content {
        height: auto;
        width: 100%;

        .device-cell-detail {
          height: 102px;
          width: 278px;
          background-color: white;
          float: left;
          margin: 5px;
          border: 1px solid #f0f0f0;
          border-radius: 10px 10px 0 0;

          .device-cell-title-text {
            position: absolute;
            left: 2rem;
            width: 15rem;
            overflow: hidden;
            font-size: 15px;
            color: black;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .device-cell-title {
            height: 38px;
            border: 1px solid #f0f0f0;
            border-radius: 10px 10px 0 0;
            line-height: 38px;

            //EditInterfaceProperty
            .interface-detail-property-button {
              position: relative;
              display: inline-block;
              left: 230px;
              top: 4px;

              .device-interface-button {
                cursor: pointer;
              }

              //AddEditDeviceInterface
              .device-interface-add-modal {
                height: 100%;
              }
            }

            .device-cell-delete-button {
              cursor: pointer;
              position: relative;
              display: inline-block;
              left: 230px;
              top: 4px;
            }
          }

          .device-cell-content {
            .single-info {
              width: 268px;
              height: 30px;
              margin: 0 4px;
              overflow: hidden;
              font-size: 14px;
              line-height: 30px;
              color: #666;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
    //DeviceProperty
    .device-property {
      border-radius: 10px 10px 0 0;
      border: 1px solid #f3f3f3;
      box-shadow: 0 0 6px 0 #bdbdbd;
      margin: 10px 1px;
      height: auto;
      min-height: 256px;
      overflow: hidden;

      .device-detail-property {
        border-radius: 10px 10px 0 0;
        height: 48px;
        padding-top: 10px;
        padding-left: 20px;
        background-image: linear-gradient(to top, #f3f3f3, white);

        &::before {
          content: '';
          border-width: 4px;
          border-style: solid;
          border-color: #2f699d;
          border-radius: 4px;
          left: -8px;
          position: relative;
        }

        > label {
          color: #7c9cb7;
          font-weight: bold;
          font-size: 18px;
        }

        //AddDeviceProperty
        .device-detail-property-button {
          float: right;

          .detail-add-img {
            cursor: pointer;

            > img {
              margin-top: 5px;
              margin-right: 14px;
            }

            > label {
              cursor: pointer;
              font-size: 15px;
              color: #333;
              right: 10px;
              top: -4px;
              position: relative;
            }
          }

          //AddEditDeviceProperty
          .device-property-add-modal {
            height: 100%;
          }
        }
      }

      .device-detail-property-content {
        height: auto;
        width: 100%;

        .device-cell-detail {
          height: 200px;
          width: 278px;
          background-color: white;
          float: left;
          margin: 5px;
          border: 1px solid #f0f0f0;
          border-radius: 10px 10px 0 0;

          .device-cell-title {
            height: 38px;
            border: 1px solid #f0f0f0;
            border-radius: 10px 10px 0 0;
            line-height: 38px;

            .device-cell-title-text {
              position: absolute;
              left: 2rem;
              width: 15rem;
              overflow: hidden;
              font-size: 15px;
              color: black;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            //EditDeviceProperty
            .device-detail-property-button {
              position: relative;
              display: inline-block;
              left: 230px;
              top: 4px;

              .device-property-button {
                cursor: pointer;
              }
              //AddEditDeviceProperty
              .device-property-add-modal {
                height: 100%;
              }
            }

            .device-cell-delete-button {
              cursor: pointer;
              position: relative;
              display: inline-block;
              left: 204px;
              top: 4px;
            }
          }

          .device-cell-content {
            div {
              label {
                float: left;
                width: 130px;
                height: 30px;
                margin: 0 4px;
                overflow: hidden;
                font-size: 14px;
                line-height: 30px;
                color: #666;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              div {
                width: 130px;
                height: 30px;
                margin: 0 4px;
                overflow: hidden;
                font-size: 14px;
                line-height: 30px;
                color: #666;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .single-info {
                width: 268px;
                height: 30px;
                margin: 0 4px;
                overflow: hidden;
                font-size: 14px;
                line-height: 30px;
                color: #666;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
    //DeviceCapacity
    .device-capacity {
      border-radius: 10px 10px 0 0;
      border: 1px solid #f3f3f3;
      box-shadow: 0 0 6px 0 #bdbdbd;
      margin: 30px 1px 0;
      height: auto;
      min-height: 256px;
      overflow: hidden;

      .device-detail-capacity {
        border-radius: 10px 10px 0 0;
        height: 48px;
        padding-top: 10px;
        padding-left: 20px;
        background-image: linear-gradient(to top, #f3f3f3, white);

        &::before {
          content: '';
          border-width: 4px;
          border-style: solid;
          border-color: #2f699d;
          border-radius: 4px;
          left: -8px;
          position: relative;
        }

        > label {
          color: #7c9cb7;
          font-weight: bold;
          font-size: 18px;
        }

        //EditDeviceCapacity
        .capacity-detail-property-button {
          float: right;

          .detail-add-img {
            cursor: pointer;

            img {
              margin-top: 5px;
              margin-right: 14px;
            }

            label {
              cursor: pointer;
              font-size: 15px;
              color: #333;
              right: 10px;
              top: -4px;
              position: relative;
            }
          }

          //AddEditDeviceCapacity
          .device-capacity-add-modal {
            height: 100%;
          }
        }
      }

      .device-detail-capacity-content {
        height: auto;
        width: 100%;
        //DeviceCapacityCell
        .device-cell-detail {
          height: auto;
          width: calc(100% - 22px);
          background-color: white;
          float: left;
          margin: 10px;
          border: 1px solid #f0f0f0;
          border-radius: 10px 10px 0 0;

          .device-cell-title {
            background-color: white;
            height: 38px;
            line-height: 38px;
            border: 1px solid #f0f0f0;
            border-radius: 10px 10px 0 0;
            //EditDeviceCapacity
            .capacity-detail-property-button {
              float: right;
              margin-right: 9px;

              .device-capacity-button {
                cursor: pointer;
                float: right;

                label {
                  cursor: pointer;
                  font-size: 14px;
                  color: #333;
                  top: -4px;
                  position: relative;
                }
              }

              .device-cell-delete-button {
                cursor: pointer;
                float: right;

                label {
                  cursor: pointer;
                  font-size: 14px;
                  color: #333;
                  top: -4px;
                  position: relative;
                }
              }
              //AddEditDeviceCapacity
              .device-capacity-add-modal {
                height: 100%;
              }
            }
          }

          .device-cell-content-basic {
            background-color: white;
            height: 60px;
            line-height: 60px;

            label {
              color: #666;
              font-size: 14px;

              .device-title-name {
                color: black;
              }

              .device-title-value {
                color: black;
              }
            }
          }
          //CapacityInterface
          .capacity-interface {
            background-color: #f8f8f8;

            .capacity-detail-interface {
              height: 38px;

              > label {
                color: #333;
                font-size: 14px;
                line-height: 38px;
                padding-left: 10px;
              }

              //AddCapacityInterface
              .interface-detail-property-button {
                float: right; //AddEditDeviceInterface
                .detail-add-img {
                  cursor: pointer;

                  img {
                    margin-top: 5px;
                    margin-right: 14px;
                  }

                  label {
                    cursor: pointer;
                    font-size: 14px;
                    color: #333;
                    right: 10px;
                    top: -4px;
                    position: relative;
                  }
                }

                .device-interface-button {
                  cursor: pointer;
                }

                .device-interface-add-modal {
                  height: 100%;
                }
              }
            }

            .capacity-detail-interface-content {
              height: auto;
              width: 100%;
              //CapacityInterfaceCell
              .capacity-cell-detail {
                height: 102px;
                width: 278px;
                background-color: white;
                float: left;
                margin: 5px;
                border: 1px solid #f0f0f0;
                border-radius: 10px 10px 0 0;

                .capacity-cell-title {
                  height: 38px;
                  border: 1px solid #f0f0f0;
                  border-radius: 10px 10px 0 0;
                  line-height: 38px;

                  .capacity-cell-title-text {
                    position: absolute;
                    left: 2rem;
                    width: 15rem;
                    overflow: hidden;
                    font-size: 15px;
                    color: black;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  .capacity-cell-delete-button {
                    cursor: pointer;
                    position: relative;
                    display: inline-block;
                    left: 230px;
                    top: 4px;
                  }

                  //EditCapacityInterface
                  .interface-detail-property-button {
                    position: relative;
                    display: inline-block;
                    left: 230px;
                    top: 4px;
                    //AddEditDeviceInterface
                    .capacity-interface-button {
                      cursor: pointer;
                    }

                    .device-interface-add-modal {
                      height: 100%;
                    }
                  }
                }

                .capacity-cell-content {
                  .single-info {
                    width: 268px;
                    height: 30px;
                    margin: 0 4px;
                    overflow: hidden;
                    font-size: 14px;
                    line-height: 30px;
                    color: #666;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }
            }
          }
          //CapacityProperty
          .capacity-property {
            background-color: #f8f8f8;

            .capacity-detail-property {
              height: 38px;

              //AddDeviceProperty
              .interface-detail-property-button {
                float: right;

                .detail-add-img {
                  cursor: pointer;

                  img {
                    margin-top: 5px;
                    margin-right: 14px;
                  }

                  label {
                    cursor: pointer;
                    font-size: 14px;
                    color: #333;
                    right: 10px;
                    top: -4px;
                    position: relative;
                  }
                }

                //EditDeviceProperty
                .device-property-add-modal {
                  height: 100%;
                }
              }

              > label {
                color: #333;
                font-size: 14px;
                line-height: 38px;
                padding-left: 10px;
              }
            }

            .capacity-detail-property-content {
              height: auto;
              width: 100%;
              //CapacityPropertyCell
              .capacity-cell-detail {
                height: 200px;
                width: 278px;
                background-color: white;
                float: left;
                margin: 5px;
                border: 1px solid #f0f0f0;
                border-radius: 10px 10px 0 0;

                .capacity-cell-title {
                  height: 38px;
                  border: 1px solid #f0f0f0;
                  border-radius: 10px 10px 0 0;
                  line-height: 38px;

                  .capacity-cell-title-text {
                    position: absolute;
                    left: 2rem;
                    width: 15rem;
                    overflow: hidden;
                    font-size: 15px;
                    color: black;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  .capacity-cell-delete-button {
                    cursor: pointer;
                    position: relative;
                    display: inline-block;
                    left: 230px;
                    top: 4px;
                  }

                  //EditDeviceProperty
                  .interface-detail-property-button {
                    position: relative;
                    display: inline-block;
                    left: 230px;
                    top: 4px;

                    .capacity-property-button {
                      cursor: pointer;
                    }
                    //EditDeviceProperty
                    .device-property-add-modal {
                      height: 100%;
                    }
                  }
                }

                .capacity-cell-content {
                  div {
                    label {
                      float: left;
                      width: 130px;
                      height: 30px;
                      margin: 0 4px;
                      overflow: hidden;
                      font-size: 14px;
                      line-height: 30px;
                      color: #666;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }

                    div {
                      width: 130px;
                      height: 30px;
                      margin: 0 4px;
                      overflow: hidden;
                      font-size: 14px;
                      line-height: 30px;
                      color: #666;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }

                    .single-info {
                      width: 268px;
                      height: 30px;
                      margin: 0 4px;
                      overflow: hidden;
                      font-size: 14px;
                      line-height: 30px;
                      color: #666;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
