#area {
  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-right 0
  }
  // confirm

  .el-message-box {
    width 460px
    height 205px
  }

  .el-message-box__message p {
    font-size 20px
  }

  // btn

  .add-btn {
    padding 0
    padding-left 12px
    padding-right 12px
    font-size 14px
    line-height 32px
  }

  .search-btn {
    padding 0
    padding-left 16px
    padding-right 16px
    font-size 14px
    line-height 32px
  }

  // table

  .el-table {
    color #666666

		tr {
			height 48px
			line-height 48px
			font-size 14px
			&:hover{
				background-color rgb(248, 252, 255)	
			}
			&:active{
				background-color rgb(241, 249, 255)
			}
		}

		td {
			padding-top: 0px
			padding-bottom: 0px
      .cell {
        /* 最多显示2行,生成省略号 */
        max-height: 48px
        overflow: hidden 
        -webkit-line-clamp: 2 
        display: -webkit-box
        text-overflow: ellipsis
        -webkit-box-orient: vertical
        & > .beyondContent .el-popover__reference {
          max-height: 36px
          overflow: hidden 
          -webkit-line-clamp: 2 
          display: -webkit-box
          text-overflow: ellipsis
          -webkit-box-orient: vertical
        }
        & > div {
          max-height: 48px
          overflow: hidden 
          -webkit-line-clamp: 2 
          display: -webkit-box
          text-overflow: ellipsis
          -webkit-box-orient: vertical
        }  
      }
      &:last-child {
        .cell {
          max-height: inherit;
        }
      }
		}

    thead {
      color #222222
      .cell{
        font-weight 500
        font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",SimSun, sans-serif
        font-size 14px
        height 20px
        line-height 20px
        font-weight bold
      }
    }

    .cell {
      line-height 18px
      button {
        font-size 14px
        line-height 20px
      }
			// 列表页第二个按钮与第一个按钮的间距
			.el-button+.el-button{
				margin-left: 20px	
			}
    }

    th {
      padding-top 0px
      padding-bottom 0px
      background-color #f5f5f5
    }
  }

  #enter-form {
    //.el-col {
    //  .el-form-item {
    //    margin-bottom 24px
    //    display flex
    //    align-items: center;
    //
    //    .el-form-item__label {
    //      width 180px
    //      font-size 14px
    //      line-height 16px
    //      color #888888
    //    }
    //
    //    .el-input {
    //      width 180px
    //      height 32px
    //
    //      input {
    //        width 180px
    //        height 32px
    //      }
    //
    //      .el-input__icon {
    //        line-height 30px
    //      }
    //    }
    //  }
    //}
  }

  //.el-col-8 {
  //  .el-form-item {
  //    margin-bottom 24px
  //    display flex
  //    align-items: center;
  //
  //    .el-form-item__label {
  //      width 180px
  //      font-size 14px
  //      line-height 16px
  //      color #888888
  //    }
  //
  //    .el-input {
  //      width 180px
  //      height 32px
  //
  //      input {
  //        width 180px
  //        height 32px
  //      }
  //
  //      .el-input__icon {
  //        line-height 30px
  //      }
  //    }
  //  }
  //}

  //.el-col-24 {
  //  .el-form-item {
  //    display: flex
  //
  //    .el-form-item__label {
  //      width 180px
  //      font-size 14px
  //      line-height 16px
  //    }
  //
  //    .el-form-item__content {
  //      flex: 1 1 auto
  //    }
  //  }
  //}
  // images
  &.dataBack {
    & > .el-loading-mask {
      & > .el-loading-spinner {
        top 400px 
      }
    }
  }

  #images {
    .title {
      font-size 14px
      line-height 20px
      margin-bottom 20px
    }

    .title:before {
      background-color #ffffff
    }

    .image-title-required {
      font-weight bold
      font-size 14px
      color: #222222
      line-height 20px
    }

    .image-title-required:before {
      content: "*";
      display: block;
      color #FF4300
      width: 2px;
      height: 14px;
      float: left;
      margin: 3px 10px 0 0;
    }

    .imgList {
      min-height 104px
    }

    .imgbox {
      float: left
      margin-left 20px
      margin-top 20px
      margin-bottom 20px
      position relative

      i {
        position absolute
        color red
        top -8px
        right -8px
      }

      img {
        width 90px
        height 60px
      }
    }

    .el-upload--picture-card {
      margin-left 20px
      margin-top 20px
      margin-bottom 20px
      width 90px
      height 60px
      display flex
      align-items center
      justify-content center

      p {
        i {
          font-size 14px
        }
        font-size 12px
        line-height 16px
      }
    }
  }

  // 图片
  .imageData {
    .el-card__body {
      padding: 0 0 0 10px
      .images .imagesList {
        width 420px  
        min-height 60px
        padding 20px 20px 0
        & > div {
          margin-top 0 
          & > img {
            display block
            margin-bottom 20px  
          }  
          & .el-upload--picture-card {
            margin-bottom 20px  
          }
        }
        & div:nth-child(4n) {
          & > img {
            margin-right 0  
          }  
        }
      }
    } 
  }

  // container容器
  .el-container {
    min-width: auto
    .el-main {
      padding: 0px 20px 20px
      .returnList {
        background-color #eee
      }
    }
  }

  .el-dialog {
    // .el-form .el-form-item__content .el-input .el-input__inner {
    //   min-width 180px 
    // }
    // 新增准入样式
    #msgForm {
      & .el-form-item__content {
        width auto
        & .el-input__inner {
          min-width auto 
          border-color #ccc 
          padding 0 12px
        }
      }
    }
    .el-form-item {
      margin-bottom 20px
      display flex
      align-items: center;

      .el-form-item__label {
        width 180px
        font-size 14px
        line-height 16px        
      }

      .el-input {
        width 180px
        height 32px

        input {
          // min-width 180px
          width 180px
          height 32px
          font-size 14px
        }

        .el-input__icon {
          line-height 30px
        }
      }
    }
  }

  // title

  .el-row {
    .title {
      font-weight bold
      font-size 14px
      color: #222222
      line-height 20px
      margin 38px 0 30px 0
      // margin-top: 30px
    }

    .title:before {
      content: "";
      display: block;
      background-color #0081F0
      width: 2px;
      height: 14px;
      float: left;
      margin: 3px 10px 0 0;
      border-radius: 1px;
    }
  }

  // 栅格化
  /* 中等屏幕（桌面显示器，大于等于 992px） */
  //@media (min-width: 992px) {
  //  #search-form{
  //    .el-col-6{
  //      width 33.33%
  //    }
  //  }
  //  .el-form{
  //    .el-col-8{
  //      width 50%
  //    }
  //  }
  //
  //}

  /* 大屏幕（大桌面显示器，大于等于 1200px） */
  //@media (min-width: 1200px) {
  //  #search-form{
  //    .el-col-6{
  //      width 25%
  //    }
  //  }
  //  .el-form{
  //    .el-col-8{
  //      width 33.33%
  //    }
  //  }
  //}

  .cell {
    .el-button {
      // margin-right 20px
    }

    .el-date-editor.el-input {
      width 100%
    }

    .el-form-item {
      margin-bottom 0px
    }
  }


  .el-footer {
    .el-button {
      width 120px
      height 30px
    }
  }

  // 普通表单

  .el-form {
    .el-form-item__content{
      width 100%
      .el-input{
        .el-input__inner {
          border-color #ccc
          // min-width 220px
          height 32px
          color #000
          padding 0 12px
        }
        // 文本框为readonly时,只读
        .el-input__inner[readonly="readonly"] {
          border-color #ccc
          color #666
          background-color: #fafafa;
        }
      }
      .el-select {
        width 100%
        .el-input--suffix{
          // 下拉框有readonly属性时,仍然是可编辑的
          .el-input__inner[readonly="readonly"] {
            border-color #ccc
            color #222222
            background-color: #fff;
          }
          // 下拉框为disbaled时不可能编辑
          .el-input__inner[disabled="disabled"] {
            border-color #ccc
            color #666
            background-color: #fafafa;
          }
        }
      }
      .el-date-editor {
        width 100%
        .el-input__inner {
           padding 0 30px 
        }  
      }
    }
    .el-form-item__label {
      min-width 160px
      max-width 160px
      font-size 14px
      line-height 16px
      color #888888
      font-weight 400
      padding-right 10px
    }

    .el-form-item {
      display flex
      align-items center
    }
    .el-col-lg-8 {
      box-sizing border-box
      padding-right 60px
      @media only screen and (max-width: 1280px) {
          width calc(100% / 2 )
      }
    }
    @media (min-width: 1280px) and (max-width: 1460px) {
      .el-col-lg-8 {
        width calc(100% / 2)
      } 
    }      
    .el-col-lg-24,.el-col-24 {
      padding-right 60px  
    }
  }

  // textarea

  .el-form-textarea {
    .el-form-item {
      display flex
      align-items flex-start
    }

    .el-form-item__content {
      width 100%
    }
  }

  // 搜索表单

  #search-form {
    margin-top 16px
    // 不使用Layout布局
    &.search-form {
      display flex
      justify-content flex-start
      flex-wrap wrap
      justify-content: space-between
      .el-form-item {
        // display table
        box-sizing border-box
        margin-right 40px
        margin-bottom 24px
        width calc(100% / 4 - 40px)
        @media screen and (max-width:1550px){
          &{
              width calc(100% / 3 - 40px)
          }
        } 
      } 
    }
    // 使用Layout布局样式----
    .el-row {
      display flex
      flex-flow row wrap
      margin-left 0px !important
    }

    // .el-col {
      .el-col-lg-6 {
        padding: 0 40px 0 0 !important 
        margin-bottom: 20px
      } 
      @media only screen and (max-width: 1280px) {
        .el-col-lg-6 {
          width calc( 100% / 3 )
        } 
      }
      @media only screen and (min-width: 1460px) {
        .el-col-lg-6 {
          width calc(100% / 4)
        } 
      }
      @media (min-width: 1280px) and (max-width: 1460px) {
        .el-col-lg-6 {
          width calc(100% / 3)
        } 
      }
      // min-width 最小宽度
      // max-width 最大宽度
      // @media (min-width: 1280px) {
      //   .el-col-md-8 {
      //     width: 33.33%;
      //   } 
      // }
    // }
    .el-form-item {
      display flex
      align-items center
      margin: 0
      .el-form-item__content {
        .from-buttons {
          font-size 12px
        }  
      }
    }

    .el-form-item__content {
      width 100%
      @media only screen and (max-width: 1280px) {
        .el-col-lg-6 {
          width: 50%;
        } 
      }
    }

    .el-select {
      width 100%
    }

    .el-input__inner {
      width 100%
      height 32px !important
      border 1px solid #eeeeee
      font-size 14px
      padding 0 12px
    }

    .el-select__tags-text {
      display inline-block
      max-width 132px
      overflow hidden
      text-overflow: ellipsis
      white-space: nowrap
    }

    .el-select .el-tag__close {
      margin-top -14px
    }

    .el-form-item__label {
      // min-width 115px
      min-width 96px
      max-width 96px
      font-size 14px
      line-height 16px
      flex 0 0 115px
    }

    .el-form-item__label {
      color #888888
      padding 0 10px 0 0
    }

    .pull-right {
      & .el-form-item__content {
        display: flex
        justify-content: flex-end
        & .el-button {
          height 32px
          width 60px
        } 
      }
    }
    .pull-left {
      // margin-left: 50%
      & .el-form-item__content {
        & .el-button {
          height 32px
          width 60px
          // border-color: #cccccc
          &.el-button--text {
            border: none 
          }
        } 
      }
    }
    @media only screen and (max-width: 1279px) {
      // .pull-right {
      //   margin-left: 200%
      // } 
      .pull-left {
        width 100%
        margin-left calc(100% - 212px)
      } 
    }
  }
  &.areaDetail {
    .el-col-8 {
      box-sizing border-box
      padding-right 60px
      @media only screen and (max-width: 1460px) {
          width calc(100% / 2)
      }
    }
    .el-col-lg-24,.el-col-24 {
      padding-right 60px  
    }
    .el-main {
      padding 0px  
      overflow hidden
    }  
  }
  
  & > #opinionFlow {
    // .el-main {
    //   .el-row {
    .el-form {
      .el-col {
        & > .el-form-item {
          & > .el-form-item__label {
            min-width 78px
            width 78px
          }
          & > .el-form-item__content {
            margin-left 0px 
          }
        }
        & > .buttonAbout {
          margin-left 20px
          margin-top 3px
          & > .el-button  {
            width 70px 
            height 32px  
          }
        }
      }
    }
    //   }
    // }
  }
}