poster.less

ul,li,dl,dt,dd{
  list-style:none;
  margin:0; padding:0;
}
body{
  background:#F5F5F5 !important;
  margin:0; padding:0;
}
:global(.am-tabs-default-bar-tab){
  font-size: .17rem;
  color:#ABABAB;
}
:global(.am-tabs-default-bar-tab-active){
  color:#101010;
}
:global(.am-tabs-default-bar-underline){
  border: .02rem solid #FF9D5C;
}
.wrapper {
  width: 100%;
  color:#101010;
}

.tabCon {
  font-family: helvetica;
  font-size: .17rem;
  .splitline{
    width: 100%;
    height: .1rem;
    background:linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity:0.1041;
  }
  .tags{
    display:flex;
    font-size: .17rem;
    background: white;
    padding-left:.05rem;
    li{
      cursor: pointer;
      line-height: .5rem;
      margin: 0 .15rem;
    }
    :global(.on){
      color:#FF9D5C;
    }
  }
  .pList {
    display:flex;
    width: 100%;
    flex-wrap: wrap;
    padding-left:.06rem;
    margin-top: .05rem;
    li{
      width: 1.24rem;
      height: 2.24rem;
      background: pink;
      margin: .05rem;
      img{ width: 100%; }
    }
  }
}
.sentList{
  font-family: helvetica;
  font-size: .17rem;
  margin-top: .1rem;
  background: white;
  dl{
    display: flex;
    padding-top: .1rem;
    dt{
      width: .8rem; height: .8rem;
      border-radius:.05rem;
      background: yellowgreen;
      margin-left: .1rem;
    }
    dd{
      padding-left: .14rem;
      width: 3.1rem;
      .tit{
        color:#333;
        line-height: .24rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time{
        font-size: .14rem;
        color:#666;
        line-height: .24rem;
        margin-top: .04rem;
      }
      .other{
        color:#999;
        font-size: .13rem;
        margin-top: .01rem;
        line-height: .24rem;
        display:flex;
        .visited{
          display:block;
          position: relative;
          width: .9rem;
          padding-left: .24rem;
          &:before {
            position: absolute;
            left:0; top:.04rem;
            content:'';
            width: .18rem;
            height: .14rem;
            background: url('../../assets/image/icon_visited.png') no-repeat;
            background-size: 100%;
          }
        }
        .forward{
          display:block;
          position: relative;
          width: .8rem;
          padding-left:.24rem;
          &:before{
            position: absolute;
            left:0; top: .04rem;
            content:''; width: .16rem;
            height: .16rem;
            background: url('../../assets/image/icon_forward.png') no-repeat;
            background-size: 100%;
          }
        }
      }
    }
  }
}

.posterWrapper {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  overflow-y: auto;
  flex-flow: column;
  .date_section{
    position: absolute;
    top: .1rem;
    z-index: 5;
    height: .22rem;
    line-height: .22rem;
    width: 1.7rem;
    left: 50%;
    margin-left: -.85rem;
    text-align: center;
    color:#333333;
    font-size: .14rem;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: .1rem;
    background:#fff;
  }
  .poster{
    position: relative;
    width: 3.26rem;
    height: 5.8rem;
    margin: 0 auto;
    font-variant: small-caps;
    img{
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    .info{
      position: absolute;
      display:flex;
      left:0; bottom:0;
      width: 100%;
      z-index: 4;
      padding: .12rem;
      box-sizing: border-box;
      &:before{
        position: absolute; left:0; top:0;
        width:100%; height: 100%; background:#000;
        opacity: .4; z-index: 1;
      }
      .content{
        position: relative;
        display:flex;
        justify-content:space-between;
        width:100%;
        height: .9rem;
        z-index: 2;
        color: white;
        align-items: center;
        .contentBg {
          position: absolute;
          left:0; top:0;
          width: 100%; height: 100%;
          z-index: 1;
        }
        .infoSplice {
          position: absolute;z-index: 3;
          width: 1px; height: .6rem; left: .76rem; top: .14rem;
        }
        .info_name{
          position: relative;
          display: table-cell;
          width:.76rem;
          color:#333;
          font-size: .2rem;
          //padding-top: .3rem;
          flex-shrink: 0;
          //height: .9rem;
          text-align: center;
          vertical-align:middle;
          z-index: 2;
        }
        .info_mid{
          position: relative;
          z-index: 3;
          font-size:.15rem;
          // padding-left: .12rem;
          width:40%;
          //padding-top: .22rem;
          color:#666;
        }
        .info_img{
          position: relative;
          z-index: 4;
          width:.78rem;
          height: .78rem;
          text-align: right;
          margin-right:.06rem;
          margin-top :.06rem;
          .info_bg{
            position: relative;
            width: 100%; height: 100%;
          }
          .info_qrcode{
            position: absolute;
            width: .7rem; height: .7rem;
            left: .04rem; top: .04rem;
          }
        }
      }
    }
    .posterImg {
      position: absolute;
      left:0; top:0;
      width:100%;
      opacity: 0;
      z-index: 6;
    }
  }
  .post_tips {
    color:#999; font-size: .14rem; text-align: center;
    line-height: .26rem;
  }
  .operation{
    height: 1.27rem;
    width: 100%;
    background: white;
    flex-shrink:0;
    display: flex;
    li{
      font-size: .15rem;
      color:#666;
      margin-top: .2rem;
      padding-top: .44rem;
      text-align: center;
    }
    .msg {
      width: .45rem;
      height: .36rem;
      background: url('../../assets/image/icon_wechat.png') no-repeat;
      background-size: 100%;
      margin-left: .44rem;
      margin-right: 1rem;
    }
    .moments {
      width: .5rem;
      height: .36rem;
      background: url('../../assets/image/icon_moments.png') center top no-repeat;
      background-size: 79%;
      margin-right: 1.05rem;
    }
    .download {
      width: .39rem;
      height: .36rem;
      background: url('../../assets/image/icon_download.png') no-repeat;
      background-size: 100%;
    }
  }
}

.haveNoData{
    position: relative;
    top: 0;
    left: 0;
    margin: 50% 0 0 50%;
    transform: translate(-50%,-50%);
    img{
      width:2rem;
      height:2rem;
    }
    .text{
      text-align: center;
      font-size: .2rem;
      margin-top: .1rem;
      color: #9b9b9b;
    }
}