zy-pc/src/app/views/main/main.component.less

@import "../../../../src/theme.less";

:host {
  width: 100%;
  height: 100%;
  display: flex;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-layout {
  height: 100%;
}

nz-sider {
  overflow-y: auto;
}

// 下拉列表
.dropdown{
  position: relative;
  height: 48px;
  line-height: 48px;
  .dropdown-content {
    position: absolute;
    top: 48px;
    background-color: #fff;
    width: 156px;
    box-shadow: 0px 2px 4px 1px #D9D9D9;
    z-index: 999999;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    color: rgba(0,0,0,0.65);
    &.ct{
      left: 50%;
      transform: translateX(-50%);
    }
    &.r8{
      right: 8px;
    }
  }

  .dropdown-content .dropdownItem {
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 24px;
  }

  .dropdown-content .dropdownItem:hover {
    background-color: #e9f7e9;
  }
}

.menu-sidebar {
  width: 175px;
  flex: 0 0 175px;
  position: relative;
  z-index: 8;
  min-height: 100vh;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  background: #0f2e3b;

  li.ng-star-inserted.ant-menu-submenu.ant-menu-submenu-inline {
    border-bottom: 1px solid #0f2e3b;

    &.ant-menu-submenu-selected,
    &.selected {
      background: @primary-color;
    }
  }

  li.ng-star-inserted.ant-menu-item {
    margin: 0;
    border-bottom: 1px solid #0f2e3b;

    &:nth-last-child(1) {
      border-bottom: 0;
    }
  }

  li.ng-star-inserted.ant-menu-item.ant-menu-item-selected,
  li.ng-star-inserted.ant-menu-item.selected,
  li.ant-menu-item.selected {
    border-left: 4px solid @primary-color;
    border-bottom: 0;
    margin: 0;
  }
}

// 重写菜单
#ds-menu {
  user-select: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  .mainMenuOne,
  .mainMenu {
    cursor: pointer;
    color: #fff;
    overflow: hidden;
    font-size: 14px;
    line-height: 44px;
    text-overflow: ellipsis;
    background: #284450;
    &:focus {
      outline: none;
    }
  }
  .mainMenuOne {
    min-height: 44px;
    position: relative;
    border-bottom: 1px solid #0f2e3b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);

    & > i {
      margin-left: 16px;
      margin-right: 10px;
      font-size: 14px;
    }
    .transport-xialajiantou {
      color: #999;
      position: absolute;
      top: 0;
      right: 16px;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    &.mainMenuSelected {
      background: @primary-color;
      .transport-xialajiantou {
        color: #fff !important;
      }
    }
    &:hover {
      .transport-xialajiantou {
        color: #fff !important;
      }
    }
  }
  .mainMenu {
    height: 44px;
    &.menuTwoSelected {
      border-left: 4px solid @primary-color;
      background-color: #0f2e3b;
    }
  }
  ul {
    margin: 0;
    padding: 0;
    li {
      white-space: nowrap;
      overflow: hidden;//文本超出隐藏
      text-overflow: ellipsis;//文本超出省略号替代
      padding-left: 40px;
      padding-right: 40px;
      transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45) inset;
    }
  }
}
// 重写菜单

.sidebar-logo {
  position: relative;
  height: 48px;
  overflow: hidden;
  line-height: 48px;
  background: #fff;
  transition: all 0.3s;

  .logoTitle{
    padding: 0 8px;
    line-height: normal;
    height:100%;
  }

  .title {
    color: @primary-color;
    font-size: 15px;
  }
}

.sidebar-logo img {
  display: inline-block;
  max-width: 100%;
  max-height: 50%;
  vertical-align: middle;
}

nz-header.ant-layout-header {
  padding: 0;
  width: 100%;
  z-index: 99;
  background: #fff;
  height: 48px;

  .app-header {
    position: relative;
    height: 48px;
    padding: 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    padding-left: 24px;
    border-bottom: 1px solid rgba(0, 21, 41, 0.08);

    .left {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .icon_transport{
        margin-right: 24px;
        cursor: pointer;
        font-size: 20px;
        height: 48px;
        line-height: 48px;
        display: inline-block;
      }
      .menuLabel {
        color: #333;
        font-size: 22px;
        font-weight: 400;
        margin-right: 80px;
        vertical-align: bottom;
        display: inline-block;
        width: 175px;
        text-align: left;
      }

      button {
        margin-right: 8px;
        margin-top: 4px;
        margin-bottom: 4px;
      }
    }

    .right {
      height: 100%;
      flex-shrink: 0;
      display: flex;
      align-items: center;

      .msg {
        float: left;
        width: 50px;
        height: 100%;
        border-left: 1px solid #e5e9ed;

        .msgBtn {
          width: 100%;
          height: 100%;

          i {
            font-size: 30px;
          }
        }
      }

      .userInfo {
        height: 100%;
        float: right;
        padding: 0 24px;
        box-sizing: border-box;
        font-size: 14px;
        border-left: 1px solid #e5e9ed;

        .wel {
          line-height: 15px;
          white-space: nowrap;
          overflow: hidden;//文本超出隐藏
          text-overflow: ellipsis;//文本超出省略号替代
        }

        .user {
          overflow: hidden;
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          cursor: pointer;

          img {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }

          span, .transport-xiala1 {
            height: 48px;
            line-height: 48px;
          }
        }

        .logOut {
          text-align: right;
          color: @primary-color;
          line-height: 20px;

          span {
            cursor: pointer;
            padding: 10px;
          }
        }
      }
    }
  }
}

.inner-content {
  background: #fff;
  height: 100%;
}

.msgTemBox {
  .borderLeft {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background-image: linear-gradient(90deg, @bg-start 0%, @bg-end 100%);
  }
  .icon {
    color: @primary-color;
    font-size: 26px;
  }
  .ant-notification-notice-message {
    margin-left: 34px;
    font-weight: 500;
  }
  .ant-notification-notice-description {
    margin-left: 34px;
    color: #333;
  }
}
.save {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;

  .modalBody {
    width: 350px;
    background: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    color: #333;

    .title {
      width: 100%;
      text-align: center;
      font-size: 18px;
      position: relative;

      i {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 20px;
        color: #666;
        cursor: pointer;
        padding: 0 5px;
      }
    }

    .content {
      width: 100%;
      height: 117px;
      background: #f9fafb;
      border: 1px solid #e5e9ed;
      border-radius: 5px;
      overflow: hidden;
      margin-top: 12px;

      div {
        text-align: center;
        margin: 0;

        &.icon {
          margin-top: 17px;

          i {
            color: #34b349;
            font-size: 30px !important;

            &.transport-wenhao {
              color: #f5a523;
            }

            &.transport-shibai {
              color: #ff3a52;
            }
          }
        }

        &.defeat {
          color: #333;
          font-size: 16px;
        }

        &:nth-child(3) {
          font-size: 14px;
          color: #666;
        }
      }
    }

    button {
      margin-top: 10px;

      &.btn {
        margin-left: 8px;
      }
    }
  }
}

  // 新建工单弹框
  .newOrder {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;

    .modalBody {
      width: 1318px;
      // height: 580px;
      background: #fff;
      border-radius: 5px;
      // padding: 12px 20px;
      padding: 12px 0;
      color: #333;
      font-size: 14px;

      .title {
        font-size: 18px;
        // text-align: center;
        line-height: 24px;
        margin: 6px 24px 18px;
        position: relative;

        i {
          position: absolute;
          right: 0;
          top: 0;
          font-size: 20px;
          color: #666;
          cursor: pointer;
          padding: 0 5px;
        }

        .newTop{
          display: flex;
          align-items: center;
          font-size: 14px;
          .name{
            font-weight: bold;
            margin-right: 24px;
          }
          .newTopItem{
            margin-right: 16px;
            &:last-of-type{
              margin-right: 0;
            }
          }
        }
      }

      .content {
        // width: 960px;
        // height: 474px;
        height: 603px;
        // border: 1px solid #e5e9ed;
        border-top: 1px solid #e5e9ed;
        border-bottom: 1px solid #e5e9ed;
        // background: #f9fafb;
        // border-radius: 5px;
        overflow: hidden;

        .grayFont {
          color: #666;
        }

        .col {
          height: 100%;

          &.left {
            border-right: 2px solid #e5e9ed;
            display: flex;
            flex-direction: column;

            .top {
              padding: 8px;
              nz-select {
                margin-right: 8px;
              }

              .tel {
                margin: 0 8px 0 0;
              }
            }
            // tab 任务类型
            .tabs {
              display: flex;
              height: 37px;
              border-bottom: 1px solid #e5e9ed;
              background-color: #fff;
              .tabs__inner {
                flex: 1;
                overflow: hidden;
                .tabs__wrap {
                  position: relative;
                  z-index: 1;
                  display: flex;
                  transition: all 1s;
                  .tab {
                    width: 120px;
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    background: #fff;
                    cursor: pointer;
                    font-size: 14px;
                    position: relative;

                    &.checked {
                      color: @primary-color;
                      &::after{
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background-color: @primary-color;
                      }
                    }
                  }
                }
              }
              .tabs__operate {
                border-bottom: 1px solid #e5e9ed;
                border-left: 1px solid #e5e9ed;
                width: 22px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
                z-index: 2;
                .tabs__Icon--left {
                  font-size: 12px;
                  color: #e5e9ed;
                  cursor: pointer;
                  &:hover {
                    color: #333;
                  }
                }
                .tabs__Icon--right {
                  transform: rotateY(180deg);
                  font-size: 12px;
                  color: #e5e9ed;
                  cursor: pointer;
                  &:hover {
                    color: #333;
                  }
                }
              }
            }

            // 底部tab页
            .bottomWrap {
              flex: 1;
              height: 300px;
              .bottom_req{
                height: 100%;
                padding: 16px;
                ::ng-deep .ant-calendar-picker{
                  width: 100%!important;
                }
                .row{
                  display: flex;
                  align-items: center;
                  margin-bottom: 16px;
                  &:last-of-type{
                    margin-bottom: 0;
                  }
                  .col{
                    flex: 1;
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    word-break: break-all;
                    position: relative;
                    margin-right: 8px;
                    &:last-of-type{
                      margin-right: 0;
                    }
                    &.alignItemsStart{
                      align-items: flex-start;
                    }
                    &.flex2{
                      flex: 2;
                    }
                    &.flex3{
                      flex: 3;
                    }
                    &.flex4{
                      flex: 4;
                    }
                    &.flex5{
                      flex: 5;
                    }
                    &.flex6{
                      flex: 6;
                    }
                    &.flex7{
                      flex: 7;
                    }
                    .addressList{
                      position: absolute;
                      top: 100%;
                      left: 0;
                      width: 100%;
                      max-height: 256px;
                      z-index: 2;
                      background: #fff;
                      border: 1px solid #d9d9d9;
                      border-radius: 4px;
                      overflow: hidden auto;
                      .addressItem{
                        padding: 5px 12px;
                        cursor: pointer;
                        &:hover{
                          background-color: #e9f7e9;
                        }
                      }
                    }
                    .ant-input-clear-icon{
                      align-self: center;
                      font-style: normal;
                      cursor: pointer;
                      margin-left: 8px;
                      font-size: 12px;
                      border-bottom: 1px solid #49b856;
                      color: #49b856;
                      flex-shrink: 0;
                    }
                    .name{
                      flex-shrink: 0;
                      width: 6em;
                      text-align-last: justify;
                      padding-left: 12px;
                      box-sizing: content-box;
                    }
                    em{
                      font-style: normal;
                      cursor: pointer;
                      margin-left: 8px;
                      font-size: 12px;
                      border-bottom: 1px solid @primary-color;
                      color: @primary-color;
                    }
                  }
                }
              }
              .bottom {
                padding: 0 16px;
                // height: 310px;
                height: 567px;
                overflow-y: auto;
                .ant-form {
                  height: 100%;
                  .ant-form-item {
                    margin-bottom: 0;
                  }
                }
                .control-flex {
                  margin-top: 16px;
                  overflow: hidden;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .patient-control{
                    flex-shrink: 0;
                  }
                  .goods-control{
                    display: flex;
                    flex-shrink: 0;
                    margin-left: 16px;
                    align-items: center;
                  }
                }
                .goods-wrap {
                  margin-left: 8px;
                  .goods-item {
                    display: inline-block;
                  }
                }
                // 标本轮巡
                .bottom380256 {
                  height: 100%;
                  font-size: 16px;
                  color: #333;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  text-align: center;
                }
                .bottom255 {
                  height: 100%;
                  // overflow-y: auto;
                  .txtC {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                  }
                }

                .label {
                  text-align: left;
                }

                .handlerType {
                  margin: 21px 0 0 0;
                }

                .radios {
                  // height: 96px;
                  max-height: 267px;
                  width: 100%;
                  overflow-y: auto;
                  padding: 8px;
                  background: #fff;
                  border: 1px solid #e6dede;
                  border-radius: 5px;
                  .ant-row {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    .ant-radio-wrapper {
                      width: 20%;
                      display: flex;
                      align-items: center;
                      margin-right: 0;
                      ::ng-deep span.ant-radio + * {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: inherit;
                      }
                    }
                  }
                }
              }
            }
            // 底部信息提示
            .bottomInfo {
              border-top: 2px solid #e5e9ed;
              padding-left: 32px;
              padding-right: 32px;
              height: 52px;
              line-height: 52px;
              font-size: 14px;
              color: #ff3b53;
            }
          }

          &.right {
            background: #fff;
            position: relative;

            .rightTitle {
              position: absolute;
              width: 100%;
              height: 37px;
              line-height: 37px;
              font-size: 16px;
              margin: 0;
              border-bottom: 1px solid #e5e9ed;
              background: #fff;
              z-index: 9999;
              display: flex;
              align-items: center;
              .rightTitle_tab {
                width: 120px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                background: #fff;
                cursor: pointer;
                font-size: 14px;
                position: relative;
                overflow: hidden;
                &.active {
                  color: @primary-color;
                  &::after{
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background-color: @primary-color;
                  }
                }
              }
            }

            .cots_body {
              width: 100%;
              height: 100%;
              // overflow: scroll;
              // padding-right: 2%;
              padding-top: 47px;
            }
          }
        }
      }
    }

    .btns {
      padding-top: 12px;
      .btn {
        margin: 0 4px;
      }
    }
  }

	.required{
	  position: relative;
	  padding-left: 12px;
	  box-sizing: content-box;
	  &::before{
	    font-family: icon_transport;
	    font-size: 10px;
	    content:'\e606';
	    color: red;
	    position: absolute;
	    left: 0;
	    top: 50%;
	    transform: translateY(-50%);
	  }
	}

	/* 未分派 */
	.weifenpai .list {
	  // height: 100px;
	  border-bottom: 1px rgb(225, 229, 232) solid;
	  position: relative;
	  // overflow: hidden;
	  display: flex;
	}

	// 转出院记录
	.patientLog .list {
	  height: auto !important;
	  th,
	  td {
	    text-align: center !important;
	  }
	}

	/* 左边 */
	.left_cots {
	  // height: 100px;
	  width: 78%;
	  float: left;
	  margin-left: 2%;
	  padding-right: 2%;
	  cursor: pointer;
	  position: relative;
	}

	/* 急标 */
	.left_cots .ji {
	  position: absolute;
	  right: -3px;
	  top: -3px;
	  width: 30px;
	}

	/* 右边 */
	.right_bots {
	  width: 20%;
	  border-left: 1px #e1e5e8 solid;
	  padding: 8px 0;
	}

	/* 上按钮 */
	.right_bots .top_bot {
	  width: 70%;
	  border-radius: 4px;
	  color: white;
	  background-color: @primary-color;
	  border: 1px @primary-color solid;
	  cursor: pointer;
	  height: 27px;
	  margin-bottom: 8px;
	}

	.slider {
	  position: absolute;
	  // top: 98px;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 2px;

	  &.sgreen {
	    background: rgb(86, 186, 182);
	  }

	  &.syellow {
	    background: rgb(245, 166, 35);
	  }
	  &.sred {
	    background: #d81e06;
	  }
	}

	/* 中按钮 */
	.right_bots .mid_bot {
	  width: 70%;
	  border-radius: 4px;
	  color: white;
	  background-color: @primary-color;
	  border: 1px @primary-color solid;
	  cursor: pointer;
	  height: 27px;
	}

	/* 下按钮 */
	.right_bots .btm_bot {
	  width: 70%;
	  border-radius: 4px;
	  color: #78797a;
	  background-color: #FFF;
	  border: 1px #e5e9ed solid;
	  cursor: pointer;
	  height: 27px;
	}

	/* 工单 */
	.weifenpai .left_cots .gongdan {
	  height: 24px;
	  margin: 4px 0;
	  line-height: 24px;
	  text-align: center;
	}

	.weifenpai .left_cots .gongdan .left {
	  float: left;
	  color: #333;
	  font-size: 14px;
	}
	.gongdan_name {
	  max-width: 80% !important;
	  overflow: hidden !important;
	  text-overflow: ellipsis !important;
	  white-space: nowrap !important;
	}

	.weifenpai .left_cots .gongdan .right {
	  float: right;
	  color: #666666;

	  &.colorRed {
	    color: red;
	  }
	}

	.weifenpai .left_cots .gongdan .right span:nth-child(1) {
	  float: right;
	  font-size: 12px;

	  &.colorRed {
	    color: red;
	  }
	}

	.weifenpai .left_cots .gongdan .right span:nth-child(2) {
	  float: right;
	  border-radius: 50%;
	  width: 10px;
	  height: 10px;
	  background-color: red;
	  margin-top: 7px;
	  margin-right: 8px;
	}

	/* 地点 */
	.weifenpai .didian {
	  height: 24px;
	  line-height: 24px;
	  margin: 4px 0;
	  display: flex;
	}

	.weifenpai .didian .left {
	  float: left;
	  color: #666666;
	  font-size: 14px;
	  flex: 1;
	  white-space: nowrap;
	  overflow: hidden;//文本超出隐藏
	  text-overflow: ellipsis;//文本超出省略号替代
	  &.noEllipsis{
	    white-space: normal;
	    overflow: visible;
	    text-overflow: inherit;
	    word-break: break-all;
	  }
	}

	.weifenpai .didian .right {
	  float: right;
	  flex: 1;
	  white-space: nowrap;
	  overflow: hidden;//文本超出隐藏
	  text-overflow: ellipsis;//文本超出省略号替代
	  text-align: right;
	}

	.weifenpai .didian .right i {
	  font-size: 12px;
	  color: @primary-color;
	}

	.weifenpai .didian .right span {
	  font-size: 12px;
	}

	/* 时间 */
	.weifenpai .shijian {
	  height: 24px;
	  line-height: 24px;
	  margin: 4px 0;
	}

	.weifenpai .shijian .left {
	  float: left;
	}

	.weifenpai .shijian .right {
	  float: right;
	  font-size: 12px;
	  color: #999999;
	}

	.weifenpai .shijian .left i {
	  color: @primary-color;
	  font-size: 14px;

	  &.colorRed {
	    color: red;
	  }
	}

	.weifenpai .shijian .left span {
	  font-size: 12px;
	  color: #666666;
	}

	/* 待到达 */
	.daidaoda .list {
	  // height: 100px;
	  // overflow: hidden;
	  border-bottom: 1px rgb(225, 229, 232) solid;
	  position: relative;
	  display: flex;
	}

	/* 左边 */
	.daidaoda .left_cots {
	  // height: 100px;
	  width: 78%;
	  float: left;
	  margin-left: 2%;
	  padding-right: 2%;
	  cursor: pointer;
	  position: relative;
	}

	/* 急标 */
	.daidaoda .left_cots .ji {
	  position: absolute;
	  right: -3px;
	  top: -3px;
	  width: 30px;
	}

	/* 急标 */
	.daidaoda .list .ji {
	  position: absolute;
	  right: -3px;
	  top: -3px;
	  width: 30px;
	}

	/* 工单 */
	.daidaoda .gongdan {
	  height: 24px;
	  margin: 4px 0;
	  line-height: 24px;
	  text-align: center;
	}

	.daidaoda .gongdan .left {
	  float: left;
	  color: #333;
	  font-size: 14px;
	}

	.daidaoda .gongdan .right {
	  float: right;
	  color: #666666;

	  &.colorRed {
	    color: red;
	  }
	}

	.cots_body .loading {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  left: 0;
	  top: 0;
	  // display: flex;
	  // flex-flow: column;
	  // justify-content: center;
	  // align-items: center;
	}

	/* 暂无数据 */
	.cots_body .no_data {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  left: 0;
	  top: 0;
	  // text-align: center;
	  // line-height: 593px;
	  color: @primary-color;
	  font-size: 24px;
	  font-weight: bold;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.toLastTime {
	  margin-left: auto;
	  color: #999999;
	  font-size: 12px;

	  &.colorRed {
	    color: red;
	  }
	  .order{
	    color: #000;
	    font-weight: bold;
	    margin-right: 16px;
	    cursor: pointer;
	  }
	}

	.toLastTime .time {
	  font-size: 12px;
	  color: @primary-color;
	  margin-left: 8px;
	}
	.toLastTime1 {
	  position: absolute;
	  right: 10px;
	  color: #999999;
	  font-size: 12px;

	  &.colorRed {
	    color: red;
	  }
	}

	.toLastTime1 .time {
	  font-size: 12px;
	  color: @primary-color;
	}