applet/edition1.0.0/pages/hrDetail/hrDetail.scss

/* pages/hrDetail/hrDetail.wxss */
page{
  padding-bottom:90rpx;
}
.loadingView{
  padding: 40rpx;
  text-align: center;
  font-size: 24rpx;
  color: #444444;
}
.loadingView .dataLoadingImg{
  width: 318rpx;
  height: 253rpx;
  margin: auto;  
}
.goTop{
  position: fixed;
  bottom: 180rpx;
  right: 40rpx;
  width: 60rpx;
  height: 60rpx;
  z-index: 22;
}
.scroll-view-fixed{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}
  .scroll-view_H {
    white-space: nowrap;
    height: 78rpx;
    border-bottom: 2rpx solid #E3E3E3;
    background: #ffffff;
  }
  
  .scroll-view-item_H {
    display: inline-block;
    width: 70%;
  }
  
  .scroll-view-item_H > view {
    display: inline-block;
    width: 100px;
    text-align: center;
    line-height: 78rpx;
    font-size: 28rpx;
    color: #7D9CAB;
  }
  
  .scroll-view-item_H > view.active {
    color: #2A89F3;
    font-weight: bold;
    &::after{
      width: 52rpx;
      height: 4rpx;
      border-radius: 4rpx;
      background: #2A85EA;
      content: '';
      display: block;
      margin: auto;
      margin-top: -14rpx;
    }
  }
  
.userInfo{
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 10rpx;
    height: 286rpx;
    background: url('https://kx-bigdata.oss-cn-beijing.aliyuncs.com/Applet/banner.png') no-repeat;
    background-size:100% 100% ;
    margin-bottom: 20rpx;
    .userLeft{
      width: 200rpx;
      position: relative;
      &::after{
        content: '';
        display: inline-block;
        width: 2rpx;
        height: 200rpx;
        background: #62A9F8;
        vertical-align: middle;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .userImg{
        width: 130rpx;
        height: 130rpx;
        border-radius: 50%;
        overflow: hidden;
        background: #ffffff;
        position: relative;
        margin: auto;
        image{
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    }
    .followButton{
      width:140rpx;
      height:58rpx;
      background:rgba(255,255,255,1);
      border-radius:12rpx;
      color: #2A85EA;
      font-size: 28rpx;
      line-height: 58rpx;
      text-align: center;
      margin: 20rpx auto 0;
    }
    .followButton2{
      background: rgba(255,255,255,0.73);
      color: #2A85EA;
    }
    .info{
        flex: 1;
        font-size: 24rpx;
        padding-left: 28rpx;
        padding-right: 18rpx;
        .userName{
          width: 440rpx;
          color: #FFFFFF;
          font-size: 32rpx;
          line-height: 44rpx;
          font-weight: bold;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .fan{
          color: #CDE5FF;
          font-size: 22rpx;
          line-height: 32rpx;
          margin-top: 14rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .generalize{
          color: #CDE5FF;
          font-size: 22rpx;
          line-height: 32rpx;
          margin-top: 14rpx;
          text{
            &::before{
              content: '';
              display: inline-block;
              width: 2rpx;
              height: 20rpx;
              background: #ffffff;
              margin-right: 6rpx;
              margin-left: 6rpx;
              vertical-align: middle;
            }
            &:first-of-type{
              &::before{
                width: 0rpx;
                margin: 0;
              }
            }
          }
        }
        .user_text{
            display: inline-block;
            width: 400rpx;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }
        .user_text_more{
            color: #FFFFFF;
            vertical-align: middle;
        }
    }  
}
.videoAnalysis{
    position: relative;
    min-height: 600rpx;
    background: #ffffff;
    .echartsButton{
        background: #ffffff;
        button{
            display: inline-block;
            width: 130rpx;
            height: 48rpx;
            font-size: 28rpx;
            padding: 0;
            margin:10rpx;
            border-radius: 12rpx;
            color: #666666;
            border:2rpx solid #666666;
            line-height: 48rpx;
            background: transparent;
            margin-left: 30rpx;
            &.active{
                color: #2396F3;
                border: 2rpx solid #2396F3;
            }
        }
    }
}
.bringGoodsList{
  padding: 20rpx;
  border-top: 2rpx solid #f4f4f4;
  margin-top: 20rpx;
  .bringGoodsView{
    .bringGoodsInfo{
      display: flex;
      align-items: center;
      padding: 20rpx;
      margin-bottom: 20rpx;
      border-bottom: 2rpx solid #f4f4f4;
      .videoImg{
        width: 140rpx;
        height: 140rpx;
        border-radius: 4rpx;
        overflow: hidden;
        image{
          width: 100%;
        }
      }
      .info{
        flex:1;
        margin-left: 26rpx;
        .name{
          color: #000000;
          font-size: 28rpx;
          line-height: 40rpx;
          font-weight: bold;
          width: 460rpx;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .price{
          color: #F66A1B;
          font-size: 22rpx;
          margin-top: 6rpx;
          .tag{
            background: #f1f4fb;
            padding: 2rpx 8rpx;
            color: #585858;
            border-radius: 2rpx;
            font-size: 20rpx;
          }
        }
        .fan{
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #7D9CAB;
          font-size: 28rpx;
          line-height: 40rpx;
          margin-top: 6rpx;
          text{
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }
  }
}
.dataHint{
  color: #333333;
  font-size: 24rpx;
  line-height: 34rpx;
  padding-left: 26rpx;
  padding-top: 24rpx;
}
.videoListView{
  .videoListInfo{
    display: inline-block;
    position: relative;
    width: 31%;
    height: 340rpx;
    overflow: hidden;
    margin:0 1.1%;
    margin-bottom: 20rpx;
    border: 1px solid #dadada;
    border-radius: 8rpx;
    .videoImg{
      width: 100%;
      height: 250rpx;
      overflow: hidden;
      position: relative;
      background: url('https://kx-bigdata.oss-cn-beijing.aliyuncs.com/blur_bg.png') no-repeat;
      background-size:100% 100% ;
      image{
        width: 100%;
      }
      .ad{
        position: absolute;
        background: rgba(0,0,0,.4);
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 10rpx;
        image{
          width: 50rpx;
          height: 50rpx;
          border-radius: 4rpx;
        }
        text{
          color: #ffffff;
          font-size: 20rpx;
          margin-left: 10rpx;
          display: inline-block;
          width: 80%;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
    }
    .time{
      background: rgba(0,0,0,.5);
      border-radius: 6rpx;
      color: #fff;
      font-size: 20rpx;
      position: absolute;
      padding: 4rpx;
      z-index: 4;
      top: 14rpx;
      left: 8rpx;
    }
    .other{
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 20rpx;
      color: #7D9CAB;
      line-height: 40rpx;
      view{
        text-align: center;
      }
      text{
        font-size: 24rpx;
        display: block;
        color: #333;
      }
    }
  }
}
.videoTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2rpx solid #f4f4f4;
  padding: 20rpx 0;
  margin-top: 20rpx;
  .checkboxView{
    font-size: 24rpx;
    color: #333333;
    padding-right: 40rpx;
    vertical-align: middle;
    .checkbox{
      transform: scale(0.6,0.6);
      vertical-align: middle;
    }
  }
}
.listView{
  margin: 0 20rpx 0;
  padding: 30rpx 22rpx;
  border-bottom: 2rpx solid #f4f4f4;
  .infoView{
      display: flex;
      align-items: center;
      .coverImg{
          width: 160rpx;
          height: 200rpx;
          position: relative;
          overflow: hidden;
          background: url('https://kx-bigdata.oss-cn-beijing.aliyuncs.com/blur_bg.png') no-repeat;
          background-size:100% 100% ;
          margin-right: 32rpx;
          image{
              width: 100%;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
          }
      }
      .info{
          flex: 1;
          padding: 0 10rpx;
          .caption{
              font-size: 28rpx;
              line-height: 40rpx;
              font-weight: bold;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              word-wrap: break-word;
              white-space: normal !important;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
          }
          .nameInfo{
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 24rpx;
              color: #333333;
              margin-top: 6rpx;
              .name{
                  image{
                      display: inline-block;
                      width: 32rpx;
                      height: 32rpx;
                      vertical-align: middle;
                      border-radius: 50%;
                      margin-right: 10rpx;
                  }
              }
          }
          .time{
              font-size: 20rpx;
              color: #888888;
              line-height: 28rpx;
              margin-top: 12rpx;
          }
          .other_info{
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 24rpx;
              line-height: 34rpx;
              color: #7D9CAB;
              margin-top: 4rpx;
              text{
                  color: #333333;
                  font-weight: bold;
              }
          }
      }
  }
}