ChuangHeng/src/App.vue

<template>
  <transition name="el-fade-in-linear">
    <router-view />
  </transition>
</template>
<style lang='scss'>
.el-drawer__wrapper .el-drawer__body{
    overflow-y: auto !important;
  }
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
p {
  margin: 0;
  padding: 0;
}
body {
  overflow: hidden;
}
.position {
  display: flex;
  margin: 10px 0;
  color: #999 !important;
  .el-breadcrumb__inner {
    color: #999 !important;
  }
}
.nodata {
  padding: 50px 0 0;
  text-align: center;
  display: block;
  width: 100%;
  color: #999;
  font-size: 14px;
}
.look {
  display: flex;
  width: 100%;
  height: 80px;
  margin-bottom: 20px;
  .l-look {
    background: #ffffff;
    box-shadow: 0px 0px 10px 2px rgba(153, 153, 153, 0.2);
    width: 440px;
    margin-right: 10px;
    .meterItem {
      height: 80px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .num {
        color: #2e69eb;
        font-size: 24px;
      }
      .text {
        margin-top: 5px;
        color: #0c1935;
        font-size: 16px;
      }
    }
  }
  .r-look {
    background: #ffffff;
    box-shadow: 0px 0px 10px 2px rgba(153, 153, 153, 0.2);
    flex: 1;
    .img {
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
    .meterItem {
      margin-left: 5px;
      height: 80px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .num {
        color: #2e69eb;
        font-size: 24px;
      }
      .text {
        margin-top: 5px;
        color: #0c1935;
        font-size: 16px;
      }
    }
  }
}
.page_info {
  height: calc(100% - 0.8rem);
  width: 100%;
  padding: 0.25rem 0.25rem 0px 0.25rem;

  .count_pannel {
    display: flex;
    width: 100%;
    height: 1rem;
    margin-bottom: 0.25rem;

    .pannel_info {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #ffffff;
      box-shadow: 0px 0px 10px 2px rgba(153, 153, 153, 0.2);
      .pannel_item {
        display: flex;
        align-items: center;
        justify-content: center;
        .img {
          margin-right: 0.075rem;
        }
        .count_info {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .count_up {
            color: #2e69eb;
            font-size: 0.3rem;
            font-weight: 600;
          }
          .text {
            margin-top: 0.075rem;
            color: #0c1935;
            font-size: 0.2rem;
          }
        }
      }
    }
  }

  .card_info {
    height: calc(100% - 1.25rem);
    background: #ffffff;
    box-shadow: 0px 0px 10px 2px rgba(153, 153, 153, 0.2);
    .function_btn {
      padding: 0.25rem;
    }
    .info_list {
      height: calc(100% - 1.75rem);
      // margin: 0 0.25rem;
      overflow: hidden;
      .el-tag--small {
        font-size: 0.15rem;
        height: 0.3rem;
        padding: 0 0.1rem;
        line-height: 0.3rem;
      }
    }
  }
}
.search_pannel {
  height: 1rem;
  background: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(153, 153, 153, 0.2);
  margin-bottom: 0.25rem;
  padding: 0.25rem;
  display: flex;
  align-items: center;

  .el-form {
    width: 100%;
    display: flex;
    .el-form-item {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      margin-right: 0.15rem;
      .el-form-item__label {
        color: #0c1935;
        line-height: 0.5rem;
        padding: 0 0.15rem 0 0;
        font-size: 0.175rem;
      }
      .el-form-item__content {
        line-height: 0.5rem;
      }
      .el-input__inner {
        height: 0.5rem;
        line-height: 0.5rem;
      }
      .el-input__icon {
        line-height: 0.5rem;
      }
      .el-range-editor {
        width: 3rem;
        padding: 0.0375rem 0.0625rem;
        .el-range__icon,
        .el-range__close-icon {
          display: none;
        }
        .el-range-input {
          flex: 1;
          font-size: 0.175rem;
        }
        .el-range-separator {
          width: 0.325rem;
          line-height: 0.4rem;
          padding: 0 0.0625rem;
          font-size: 0.175rem;
          color: #999;
        }
      }
      .el-input {
        width: 2.5rem;
        font-size: 0.175rem;
        .el-input__clear {
          font-size: 0.175rem;
        }
      }
      .el-select {
        width: 2.5rem;
        font-size: 0.175rem;
        .el-select__caret {
          font-size: 0.175rem;
        }
      }
    }
  }
  .search_btn {
    flex: 1;
    display: flex;
  }
}
.el-button {
  font-size: 0.175rem !important;
  //padding: 0.1rem 0.25rem !important;
}
.iconfont {
  font-size: 0.2rem !important;
}
.btn_color {
  color: #2e69eb !important;
  border: 1px solid #2e69eb !important;
}
.btn_color.is-plain:active {
  background: #fff !important;
  outline: 0 !important;
}
.btn_color.is-active,
.btn_color.is-plain:active {
  color: #3a8ee6 !important;
  border-color: #3a8ee6 !important;
}
.btn_color.is-plain:focus,
.btn_color.is-plain:hover {
  background: #fff !important;
  border-color: #409eff !important;
  color: #409eff !important;
}

a:focus,
a:hover {
  text-decoration: none !important;
}
.el-link {
  font-size: 0.175rem !important;
}
.el-table {
  font-size: 0.175rem !important;
  th {
    padding: 0.125rem 0 !important;
  }
  td {
    padding: 0.25rem 0 !important;
  }
  .cell {
    line-height: 0.3rem !important;
  }
  &::before {
    height: 0 !important;
  }
  .caret-wrapper {
    height: 0.3rem !important;
    .sort-caret.ascending {
      top: 0px;
    }
    .sort-caret.descending {
      bottom: 2px;
    }
  }
}
.el-pagination {
  margin-top: 0.25rem !important;
  text-align: center !important;
  padding: 0 !important;
  button,
  span:not([class*="suffix"]) {
    font-size: 0.1625rem !important;
    height: 0.35rem !important;
    line-height: 0.35rem !important;
  }
  .el-pagination__sizes {
    .el-input {
      width: 1.25rem !important;
    }
    .el-input__inner {
      font-size: 0.175rem !important;
      height: 0.35rem !important;
      line-height: 0.35rem !important;
      padding-left: 0.1rem !important;
      padding-right: 0.3125rem !important;
    }
    .el-select__caret {
      font-size: 0.175rem !important;
      line-height: 0.35rem !important;
    }
  }
  .el-pager li {
    font-size: 0.1625rem !important;
    height: 0.35rem !important;
    line-height: 0.35rem !important;
  }
  .el-pagination__jump {
    .el-pagination__editor {
      font-size: 0.175rem !important;
      height: 0.35rem !important;
      line-height: 0.35rem !important;
      .el-input__inner {
        height: 0.35rem !important;
        line-height: 0.35rem !important;
      }
    }
  }
}
.el-drawer__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  .el-drawer__body {
    overflow: hidden;
    .drawer_info {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .sub_title {
        margin: 0 0.25rem 0.375rem 0;
        font-size: 14px;
        font-weight: 400;
        color: #0c1935;
        padding-left: 0.125rem;
        position: relative;
        line-height: 14px;
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          display: block;
          content: "";
          border-left: 0.05rem solid #2681f3;
        }
      }
      .drawer_list {
        max-height: calc(100% - 2.075rem);
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 0.25rem;

        .el-form-item {
          margin-bottom: 0.25rem;
          margin-right: 0.125rem;
          display: flex;
          .el-form-item__label {
            line-height: 0.5rem;
            width: 1.25rem;
            font-size: 0.175rem;
            padding: 0 0.15rem 0 0;
          }
          .el-form-item__content {
            flex: 1;
            font-size: 0.175rem;
            line-height: 0.5rem;
          }
        }

        .special_form_item {
          .el-form-item__label {
            line-height: 0.25rem;
          }
        }

        .mb15 {
          margin-bottom: 0.25rem;
          color: #0c1935;
          font-size: 0.175rem;
          span {
            color: #697081;
          }
        }
        .img_col {
          display: flex;
          img {
            margin-right: 0.125rem;
            width: 1.25rem;
            height: 1.25rem;
            vertical-align: top;
            cursor: pointer;
          }
        }
      }
      .company.drawer_list {
        .el-form-item {
          .el-form-item__label {
            width: 2.5rem;
          }
        }
      }
        .mainArea.drawer_list {
        .el-form-item {
          .el-form-item__label {
            width: 1.9rem;
          }
        }
      }
      

      .el-input__inner {
        height: 0.5rem;
        line-height: 0.5rem;
      }
      .el-input__icon {
        line-height: 0.5rem;
      }
      .el-range-editor {
        width: 100%;
        padding: 0.0375rem 0.0625rem;
        .el-range__icon,
        .el-range__close-icon {
          display: none;
        }
        .el-range-input {
          flex: 1;
          font-size: 0.175rem;
        }
        .el-range-separator {
          width: 0.325rem;
          line-height: 0.4rem;
          padding: 0 0.0625rem;
          font-size: 0.175rem;
          color: #999;
        }
      }
      .el-input {
        width: 100%;
        font-size: 0.175rem;
        .el-input__clear {
          font-size: 0.175rem;
        }
      }
      .el-cascader {
        font-size: 0.175rem;
        line-height: 0.5rem;
      }
      .el-select {
        width: 100%;
        font-size: 0.175rem;
        .el-select__caret {
          font-size: 0.175rem;
        }
        .el-input__inner {
          padding: 0 0.375rem 0 0.1875rem;
        }
      }
      .el-textarea {
        font-size: 0.175rem;
      }
      .el-radio__label {
        font-size: 0.175rem;
        padding-left: 0.125rem;
      }
      .el-radio__inner {
        width: 0.175rem;
        height: 0.175rem;
      }
      .save_btn {
        text-align: center;
        margin: 0.25rem 0;
        .el-button {
          font-size: 0.175rem;
          padding: 0.1rem 0.25rem;
        }
      }
      .img_preview {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 40%;
        }
      }
    }
  }
}

.el-progress-bar {
  padding-right: 100px !important;
  margin-right: -100px !important;
}

.el-upload-dragger {
  width: 220px;
  height: 130px;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: #2e69eb !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.input_suffix {
  position: absolute;
  right: 0.125rem;
  color: #c0c4cc;
}

.drawer_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.8rem;
  font-size: 0.2rem;
  font-weight: 600;
  border-bottom: 1px solid #d8d8d8;
  padding-left: 0.25rem;
  margin: 0 0 0.375rem 0;
  color: #0c1935;
}
.icon-export {
  margin-right: 4px;
}
.icon-feeInfo,
.icon-open,
.icon-forbidden,
.icon-hasten {
  font-style: normal !important;
  margin-right: 0.075rem;
}
//碳资产 填报数据tab 字体设置
.cfilldata .el-tabs__item{
  font-size: 12px!important;
}
.el-tabs__content{height:100%}
.cfilldata .el-tabs__content{
  height: 400px;
  flex:1
}
.seasonal .el-tabs__content{height:100%}

.el-card.is-always-shadow,.current_position,.aui-sidebar{
  box-shadow: none !important;
}
.cell .el-tag{
  background-color: #F2F8FF !important;
  border: none;
}
</style>
<style>
.app-container{
  padding: 0 !important;
  margin: 20px;
  min-height: calc(100% - 88px);
  background: #FFFFFF;
}
.el-card{
  border: none !important;
}

.agent_page{
    width: calc(100% - 26px);
    height: calc(100vh - 26px);
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #F3F4F6;
    margin: 12px;
    overflow-y: auto;
}

.adf{
  display: flex;
}
.adfac{
  display: flex;
  align-items: center;
}
.adfacjc{
  display: flex;
  align-items: center;
  justify-content: center;
}
.adfacjb{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.adffcacjc{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.adffcacjb{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
</style>