fmui-base 2.0.32 → 2.0.34

package/lib/react_grid/react_grid.less

@@ -0,0 +1,999 @@
+.react-grid {
+
+  .t-tab-bar {
+    padding-left: 6px;
+  }
+
+  .t-tab-bar .t-tab-tab {
+    font-size: 16px;
+    color: #888;
+    flex: initial;
+    padding: 0 10px;
+    min-width: 95px;
+    height: 33px;
+    line-height: 20px;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    background-color: transparent;
+  }
+
+  .t-tab-bar .t-tab-tab-active {
+    color: #333 !important;
+    font-size: 18px;
+  }
+
+  .t-tab-ink-bar {
+    // background-color: @theme-color  !important;
+    margin-left: -33px;
+    border-radius: 4px;
+    height: 4px;
+    width: 25px !important;
+    background-color: #713938;
+  }
+
+  .t-tab-ink-bar:after {
+    content: "";
+    display: block;
+    width: 40px;
+    height: 4px;
+    border-radius: 4px;
+    background: #713938;
+    opacity: 0.3;
+    position: absolute;
+    left: 30px;
+  }
+
+  .t-tab-nav-wrap .t-tab-ink-bar {
+    margin-left: -28px;
+  }
+
+  .react-grid-item.cssTransforms {
+    // width: 100% !important;
+    // margin: 0 10px;
+    overflow: auto;
+    // background-color: #fff;
+  }
+
+  .react-grid-component {
+    .react-grid-banner {
+      color: #fff;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+    
+      .banner {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: -1;
+        width: 100%;
+    
+        .bannerimg {
+          z-index: 0;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    
+      .global-search {
+        display: flex;
+        align-items: center;
+        padding: 16px;
+        padding-bottom: 38px;
+    
+        .t-filter-wrapper {
+          height: 30px;
+          padding: 5px 0;
+          background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.6) 100%);
+          border-radius: 4px 0 0 4px;
+        }
+    
+        .t-filter-bar-wrapper {
+          width: 70px;
+          background: none;
+          border-right: 1px solid #ddd;
+        }
+    
+        .t-filter-bar-wrapper .item {
+          height: 20px;
+          line-height: 20px;
+          font-size: 14px;
+        }
+    
+        .t-filter-bar-wrapper .item .item-wrapper {
+          padding: 0 0 0 10px;
+        }
+    
+        .t-filter-bar-wrapper .item .icon {
+          height: 20px;
+          width: 20px;
+        }
+    
+        .t-filter-bar-wrapper .item .title-wrapper {
+          color: #fff;
+        }
+    
+        .t-filter-bar-wrapper .item .t-svg div {
+          display: none !important;
+        }
+    
+        .t-filter-bar-wrapper .item .t-svg {
+          font-family: "iconfont-ywtb" !important;
+          font-size: 12px;
+          font-style: normal;
+          -webkit-font-smoothing: antialiased;
+          color: #fff;
+          line-height: 18px !important;
+        }
+    
+        .t-filter-bar-wrapper .item .t-svg:before {
+          content: "\e65b";
+        }
+    
+        .t-filter-list-item.active .icon svg {
+          display: none;
+        }
+    
+        .t-filter-panel-wrapper {
+          width: 70px;
+          overflow-y: auto;
+          box-shadow: 0 2px 5px #ddd;
+          margin-top: 5px;
+        }
+    
+        .t-field {
+          flex: 1;
+        }
+    
+        .t-field-box {
+          min-height: 30px;
+        }
+    
+        .t-text-field-content {
+          background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.60) 100%);
+          height: 30px;
+          border-radius: 0 4px 4px 0;
+          padding-left: 10px;
+    
+          .t-text-field-right-addon {
+            color: #fff;
+            padding: 5px 0 2px 0;
+          }
+        }
+    
+        .t-text-field-placeholder {
+          color: #fff;
+          font-size: 14px;
+        }
+    
+        .t-text-field-input {
+          color: #fff;
+        }
+    
+        input.t-text-field-input:focus,
+        textarea.t-textarea-field-content:focus {
+          border: none;
+          box-shadow: none;
+        }
+      }
+    
+      .t-grid {
+        margin: 8px;
+        border: none;
+    
+        .t-grid-row {
+          width: 100%;
+          padding: 10px 0;
+          border-bottom: none;
+          text-align: center;
+        }
+    
+        .t-grid-item+.t-grid-item {
+          border-left: none;
+        }
+      }
+    
+      .react-grid-banner-item {
+        .t-badge {
+          width: 40px;
+          height: 40px;
+          background: #fff;
+          border-radius: 50%;
+          line-height: 40px;
+        }
+    
+        i {
+          font-size: 20px;
+        }
+      }
+    
+      .menu-title {
+        margin: 4px 0;
+        color: #fff;
+      }
+    
+      .t-badge .badge-inner {
+        line-height: 1.3;
+        height: auto;
+        font-weight: 400;
+        padding: 0 5px;
+        top: 9px;
+        right: -2px;
+        border: 2px solid #fff;
+      }
+    }
+    
+  }
+
+  .systemItem {
+    display: inline-block;
+    text-align: center;
+    // width: 25%;
+    vertical-align: top;
+    padding-top: 25px;
+
+    .iconblock {
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      margin: 0 auto;
+      border-radius: 3px;
+      color: #fff;
+    }
+
+    .iconblock.t-iconBCred {
+      background-image: linear-gradient(180deg, #BF6052 7%, #AB5548 100%);
+      ;
+    }
+
+    .iconblock.t-iconBCblue {
+      background-image: linear-gradient(180deg, #1E65BB 0%, #1054A7 100%);
+      ;
+    }
+
+    .iconblock.t-iconBCgreen {
+      background-image: linear-gradient(180deg, #2CCDB7 0%, #15B49E 100%);
+    }
+
+    .iconblock.t-iconBCorange {
+      background-image: linear-gradient(180deg, #ECCCA1 0%, #E4C294 100%);
+    }
+    .iconblock.t-iconBCpurple{
+      background-image: linear-gradient(180deg, #abacff, #7ca6ff);
+    }
+
+    .iconblock.t-iconBCgray {
+      background-image: linear-gradient(180deg, #c1d1d7, #97b0bd);
+    }
+
+    .iconfont {
+      font-size: 20px;
+    }
+
+    .text {
+      color: #000;
+      text-align: center;
+      font-size: 14px;
+    }
+  }
+
+  .react-app-collect {
+    position: relative;
+    height: 100%;
+
+    .t-grid .t-grid-item + .t-grid-item  {
+      border-left: none;
+    }
+  
+    .t-grid .t-grid-row {
+      border-bottom: none;
+    }
+
+    .t-grid.t-has-line {
+      border-top: none;
+    }
+
+  }
+
+  // 办事事项
+  // .component-bssx .t-tab-tabpane{
+  //   overflow: hidden;  //莫名其妙多出滚动条问题，浏览器正常，手机有滚动条
+  // }
+  .component-bssx {
+    position: relative;
+    .rightMore {
+      position: absolute;
+      right: 10px;
+      color: #999;
+      z-index: 999;
+      padding: 2px;
+      font-size: 14px;
+    }
+  }
+  .banshi-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 16px;
+    padding-bottom: 0;
+
+    .banshi-item {
+      width: calc(50% - 8px);
+      background: #FEF8E8;
+      border-radius: 8px;
+      margin: 6px 0;
+      padding: 10px;
+      padding-right: 60px;
+      position: relative;
+      height: 60px;
+
+      .title {
+        font-size: 14px;
+      }
+
+      .describe {
+        font-size: 12px;
+        color: #9A968D;
+      }
+
+      .iconfont-ywtb.ic {
+        position: absolute;
+        right: 16px;
+        top: 0;
+        line-height: 60px;
+        font-size: 30px;
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      .iconfont-ywtb.bg {
+        position: absolute;
+        right: 0;
+        top: -15px;
+        bottom: 0;
+        font-size: 60px;
+        opacity: 0.16;
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
+    .banshi-item:nth-child(1) {
+      background: #FEF8E8;
+
+      .iconfont-ywtb.ic,
+      .iconfont-ywtb.bg {
+        background-image: linear-gradient(to bottom, #FFA92B 20%, #FFD253 80%); // 背景线性渐变
+        color: #FFA92B; // 兜底颜色，防止文字裁剪不生效
+      }
+    }
+
+    .banshi-item:nth-child(2) {
+      background: #FFF1F2;
+
+      .iconfont-ywtb.ic,
+      .iconfont-ywtb.bg {
+        background-image: linear-gradient(to bottom, #FF766D 20%, #FDAD78 80%); // 背景线性渐变
+        color: #FF766D; // 兜底颜色，防止文字裁剪不生效
+      }
+    }
+
+    .banshi-item:nth-child(3) {
+      background: #DFF0FF;
+
+      .iconfont-ywtb.ic,
+      .iconfont-ywtb.bg {
+        background-image: linear-gradient(106deg, #1990F0 20%, #73D2FF 80%); // 背景线性渐变
+        color: #1990F0; // 兜底颜色，防止文字裁剪不生效
+      }
+    }
+
+    .banshi-item:nth-child(4) {
+      background: #DEF8F7;
+
+      .iconfont-ywtb.ic,
+      .iconfont-ywtb.bg {
+        background-image: linear-gradient(to bottom, #00C1CE 20%, #65DBD8 80%); // 背景线性渐变
+        color: #00C1CE; // 兜底颜色，防止文字裁剪不生效
+      }
+    }
+
+    .banshi-item:nth-child(5) {
+      background: #FEF5F3;
+
+      .iconfont-ywtb.ic,
+      .iconfont-ywtb.bg {
+        background-image: linear-gradient(to bottom, #FF7661 20%, #FBA772 80%); // 背景线性渐变
+        color: #FF7661; // 兜底颜色，防止文字裁剪不生效
+      }
+    }
+
+    .banshi-item:nth-child(6) {
+      background: #EFF5FF;
+
+      .iconfont-ywtb.ic,
+      .iconfont-ywtb.bg {
+        background-image: linear-gradient(to bottom, #686BC9 20%, #A2A8FA 80%); // 背景线性渐变
+        color: #686BC9; // 兜底颜色，防止文字裁剪不生效
+      }
+    }
+  }
+
+  // 通知部件
+  .carousel-notice.t-slide {
+    margin: 16px;
+    border-radius: 5px;
+
+    .t-slide-item {
+      padding: 16px;
+      // background-color: @theme-color-4;
+      background-image: url(/mobile/fmui/images/notice-card-bg.png);
+      background-size: 100% 100%;
+    }
+
+    .t-slide-item img {
+      display: none
+    }
+
+    .notice-card-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      span {
+        font-size: 20px;
+        font-weight: 700;
+      }
+
+      .t-button {
+        // color: @theme-color;
+        // background-color: @theme-color-10;
+        height: 26px;
+        line-height: 26px;
+        font-size: 14px;
+        padding: 0 16px;
+        margin: 0;
+        background-color: rgba(113, 57, 56,0.1);
+        color: #713938;
+      }
+    }
+  }
+
+  .t-image-slide-item {
+    margin: 16px;
+    height: 100px !important;
+    background-image: url(/mobile/fmui/images/notice-card-bg.png);
+    background-size: 100% 100%;
+    border-radius: 10px;
+  }
+
+  // 
+  .infoList {
+    margin: 0 16px;
+    padding: 10px 0;
+    border-bottom: 1px solid #e9e9e9;
+
+    .infoContent {
+      display: flex;
+      justify-content: space-between;
+
+      .rightContent {
+        flex: 1;
+      }
+
+      p:first-child {
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        display: -webkit-box;
+        font-size: 16px;
+        text-align: left;
+        color: #000000;
+        line-height: 22.5px;
+        margin-bottom: 5px;
+        word-break: break-all;
+      }
+
+      p:last-child {
+        display: flex;
+        align-items: center;
+
+        img {
+          margin: 0 .1667rem 0 0;
+          width: .3467rem;
+          height: .2933rem;
+        }
+
+        span {
+          margin: 0 10px 0 0;
+          // // font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+          text-align: left;
+          // letter-spacing: .0267rem;
+          color: #00000066;
+          line-height: 1.3;
+          word-break: break-all;
+        }
+      }
+
+      .imgContent {
+        img {
+          margin: auto;
+          width: 2.96rem;
+          height: 1.9333rem;
+          border-radius: .1067rem;
+        }
+      }
+    }
+
+  }
+
+  .infoList:last-of-type {
+    border-bottom: none;
+  }
+
+  .infoList3 {
+    background-color: #fff;
+    padding-top: .2667rem;
+    padding-left: .2667rem;
+    padding-right: .2667rem;
+
+    .infoContent {
+      border-bottom: .0267rem solid #dcdcdc;
+      padding-bottom: .2667rem;
+
+      p:first-child {
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        display: -webkit-box;
+        font-size: 16px;
+        // // font-family: Microsoft YaHei-Regular;
+        font-weight: 400;
+        text-align: left;
+        color: #000000;
+        line-height: 22.5px;
+        margin-bottom: .2667rem;
+      }
+
+      p:last-child {
+        display: flex;
+        align-items: center;
+
+        img {
+          margin: 0 .1667rem 0 0;
+          width: .3467rem;
+          height: .2933rem;
+        }
+
+        span {
+          margin: 0 10px 0 0;
+          font-size: 12px;
+          font-weight: 400;
+          text-align: left;
+          // letter-spacing: .0267rem;
+          color: #00000066;
+          line-height: 1.3;
+          word-break: break-all;
+        }
+      }
+
+      .infoPics {
+        margin-bottom: .2667rem;
+        display: flex;
+        justify-content: space-between;
+
+        img {
+          width: 2.8667rem;
+          height: 1.9333rem;
+          border-radius: .1067rem;
+        }
+      }
+    }
+  }
+
+  .info-more-btn {
+    color: #999;
+    padding: 10px 16px;
+    margin: 0 auto;
+    width: 100px;
+  }
+
+  // 日历、日程
+  .calendar-title,
+  .show-all-content {
+    display: none;
+  }
+
+  .calendar-container {
+    background: #fff;
+  }
+
+  .calendar-week {
+    height: 20px;
+
+    div {
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+
+  .calendar-wrap {
+    border-bottom: none;
+    margin-bottom: 10px;
+  }
+
+  .calendar-content .canChoose-active span {
+    color:#713938 !important;
+    // background: #F6F6F6 !important;
+    background: transparent !important;
+  }
+
+  .calendar-content span.hasEvent:before {
+    color: #FAB88D;
+  }
+
+  .rc-list {
+    .rc-item {
+      padding: 5px 16px 5px 10px;
+    }
+
+    .rc-item-time {
+      width: 40px;
+      color: #999;
+      font-size: 14px;
+      text-align: center;
+    }
+
+    .rc-item-time-line {
+      position: absolute;
+      top: 36px;
+      left: 22px;
+      color: #999;
+    }
+
+    .rc-item-title {
+      padding: 0 16px;
+      background: #FFF6F5;
+      border-radius: 4px;
+      line-height: 36px;
+      height: 36px;
+      margin-left: 10px;
+    }
+  }
+
+  .rc-item.rc-completed {
+    .rc-item-title {
+      color: #ccc;
+      background: #F9F9FA;
+    }
+  }
+
+  .rc-item:last-of-type {
+    .rc-item-time-line {
+      display: none;
+    }
+  }
+
+  // 
+  .meetingCard {
+    width: 100%;
+    background: transparent;
+    padding: 8px;
+    position: relative;
+
+    .lineTop {
+      position: absolute;
+      top: 0;
+      left: 10px;
+      width: calc(100% - 20px);
+      height: 16px;
+      background: #713938;
+      border-radius: 8px;
+    }
+
+    .meetingBg {
+      padding: 15px;
+      margin: 0 15px;
+      width: calc(100% - 30px);
+      background: #fff;
+      position: relative;
+      border-radius: 0 0 8px 8px;
+      box-shadow: 0 2px 6px 0 #eee;
+    }
+
+    .meetingContent {
+      .meetingTitle {
+        padding-bottom: 10px;
+        border-bottom: 1px dashed #dcdcdc;
+
+        p {
+          font-size: 16px;
+          font-weight: 400;
+          text-align: left;
+          color: #000000;
+          word-break: break-all;
+        }
+      }
+
+    }
+
+    .meetingTime {
+      // border: 1px solid red;
+      // height: 4rem;
+      height: 70%;
+      padding-top: .2667rem;
+
+      .meetingDate {
+        color: #737373;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+
+        .iconfont {
+          color: #BCC2C6;
+        }
+      }
+
+      .timeTitle {
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        color: #B8B8B8;
+        margin: 20px 20px 10px 20px;
+      }
+
+      .time {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin-top: 0;
+        padding: 0 16px;
+
+        li {
+          list-style-type: none;
+          // border: 1px solid red;
+        }
+
+        li:first-child {
+          width: 30%;
+          font-size: 25px;
+          // font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+          font-weight: 700;
+          text-align: left;
+          color: #000000;
+        }
+
+        li:nth-child(2) {
+          width: 40%;
+          position: relative;
+
+          p {
+            background: #713938;
+            border-radius: 11px;
+            color: #fff;
+            text-align: center;
+            height: 22px;
+            width: 90px;
+            line-height: 22px;
+            margin: auto;
+          }
+        }
+
+        li:nth-child(2)::before,
+        li:nth-child(2)::after {
+          content: "";
+          display: block;
+          width: calc((100% - 90px) / 2);
+          height: 1px;
+          background-color: #713938;
+          position: absolute;
+        }
+
+        li:nth-child(2)::before {
+          top: 10px;
+          left: 0;
+        }
+
+        li:nth-child(2)::after {
+          top: 10px;
+          right: 0;
+        }
+
+        li:last-child {
+          width: 30%;
+          font-size: 25px;
+          font-weight: 700;
+          text-align: right;
+          color: #000000;
+        }
+      }
+
+      .location {
+        margin-top: .5333rem;
+        color: #737373;
+        font-size: 14px;
+        font-weight: 400;
+        text-align: left;
+
+        .iconfont {
+          color: #BCC2C6;
+        }
+      }
+    }
+
+    .startIcon {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      width: 2rem;
+    }
+  }
+  .emailListItem {
+    height: 1.8rem;
+    border-bottom: .0267rem solid #dcdcdc;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+
+    .leftPic {
+      width: 20%;
+      height: 80%;
+      // height: 100%;
+      display: flex;
+      // align-items: center;
+      text-align: center;
+      position: relative;
+
+      // border: 1px solid red;
+      .emailIcon {
+        margin: auto;
+        width: 1.0667rem;
+        height: 1.0667rem;
+      }
+
+      .badge {
+        width: .4rem;
+        height: .4rem;
+        position: absolute;
+        top: .2667rem;
+        right: .3467rem;
+      }
+    }
+
+    .rightContent {
+      width: 80%;
+
+      .sendUserName {
+        font-size: 16px;
+        font-weight: 700;
+        color: #000;
+      }
+
+      .content {
+        font-size: 14px;
+        font-weight: 400;
+        text-align: left;
+        color: #000000B3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .emailTime {
+      position: absolute;
+      top: .2667rem;
+      right: .2667rem;
+      font-size: 12px;
+      // font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+      font-weight: 400;
+      color: #00000066;
+    }
+  }
+
+  .approveList {
+    margin: 0 auto 10px auto;
+    width: 9.1467rem;
+    background-color: #fff;
+    overflow: hidden;
+    border-radius: 6px;
+
+    .t-FBH {
+      justify-content: space-between;
+    }
+
+    .time-tag {
+      background: #fce68f;
+      padding: 8px 16px;
+      border-radius: 0 0 16px 0;
+      color: #806207;
+    }
+
+    .urgency-tag {
+      text-align: center;
+      height: 22px;
+      line-height: 22px;
+      font-size: 12px;
+      color: #fff;
+      margin-top: 6px;
+      padding: 0 16px;
+      border-radius: 12px 0 0 12px;
+    }
+  }
+
+  .documentList {
+    margin: 0 auto 10px auto;
+    width: 9.1467rem;
+    background-color: #fff;
+    overflow: hidden;
+    border-radius: 6px;
+
+    .t-tag-red {
+      line-height: 16px;
+      border: 1px solid #d6403b;
+    }
+  }
+
+  .personal-tab {
+    color: red;
+  }
+  
+  .department-tab {
+    color: blue;
+  }
+
+  .list-RT-label .list-item .item-title::before  {
+    background:#713938;
+  }
+
+  .rightMore {
+    position: absolute;
+    right: 10px;
+    color: #999;
+    z-index: 999;
+    padding: 2px;
+    font-size: 14px;
+  }
+
+  .sxbl_buttons {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    button {
+      width: 45.4%;
+      height: 35px;
+      // line-height: 29px;
+      background: rgba(112,58,58,0.12);
+      border: 2px solid rgba(112,58,58,1);
+      border-radius: 4px;
+      font-size: 16px;
+      color: #703A3A;
+    }
+  }
+
+  .wdsx-list {
+    .list-item {
+      display: flex;
+      align-items: center;
+      justify-content:space-between;
+    }
+    .list-item .item-content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: initial;
+    }
+  }
+ 
+}
+