import styled from 'styled-components'
import '../../style/common.css'
import {rem} from '../../style/function.style'

export const Container = styled.div`
  padding: ${rem(50)} ${rem(36)} ${rem(55)} ${rem(36)};
  .header {
    height: ${rem(44)};
    margin-bottom: ${rem(22)};
    .title {
      font-weight: bold;
      font-size: ${rem(30)};
      color: #000;
      line-height: ${rem(44)};
      width: ${rem(650)};
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: ${rem(110)};
      background: url('https://lofter.lf127.net/1618292296142/head_logo.png') right center no-repeat;
      background-size: ${rem(90)} auto;
    }
  }
  .share-read {
    .content {
      display: flex;
      .words{
        flex: 1;
      }
      .book-cover {
        display: block;
        width: ${rem(203)};
        height: ${rem(287)};
        margin-left: ${rem(35)};
        box-shadow: ${rem(5)} ${rem(5)} ${rem(50)} 0 #d4d4d4;
      }
    }
    .user {
      padding-bottom: ${rem(36)};
      position: relative;
      /* border-bottom: 1px solid #d6d6d6; */
      display: flex;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border-bottom: 1px solid #ECECEC;
        transform: scale(0.5);
        transform-origin: 0 0;
      }
      .avatar {
        width: ${rem(70)};
        height: ${rem(70)};
        border-radius: 100%;
        vertical-align: top;
      }
      .info {
        margin-left: ${rem(24)};
        flex: 1;
        .nickName {
          font-family: PingFangSC-Regular sans-serif;
          font-size: ${rem(23)};
          color: #000;
          text-align: left;
          line-height: ${rem(40)};
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: ${rem(314)};
        }
        .desc {
          font-family: PingFangSC-Regular sans-serif;
          font-size: ${rem(21)};
          color: #888;
          text-align: left;
          line-height: ${rem(32)};
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: ${rem(314)};
        }
      }
    }
    .book {
      padding: ${rem(36)} 0 ${rem(26)} 0;
      .intro {
        display: inline-block;
        /* width: ${rem(454)}; */
        vertical-align: top;
        .book-title {
          font-family: PingFangSC-Medium sans-serif;
          font-weight: bold;
          font-size: ${rem(32)};
          color: #444444;
          line-height: ${rem(48)};
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .desc {
          padding-top: ${rem(24)};
          font-family: PingFangSC-Regular sans-serif;
          font-size: ${rem(21)};
          color: #B3B3B3;
          text-align: left;
          line-height: ${rem(33)};
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          &.desc-book {
            padding-top: 0;
          }
        }
      }
      
    }
    .img-list {
      .preview-img {
        width: ${rem(157)};
        height: ${rem(157)};
        margin-left: ${rem(13)};
        &:first-child {
          margin: 0;
        }
      }
    }
    .action {
      display: flex;
      justify-content: center;
      padding-top: ${rem(46)};
      .btn-1,
      .btn-1-watch,
      .btn-2,
      .btn-2-watch {
        width: ${rem(282)};
        height: ${rem(71)};
        line-height: ${rem(71)};
        border: 1px solid #db0e0d;
        border-radius: ${rem(71)};
        background: #FFFFFF;
        font-size: ${rem(24)};
        color: #db0e0d;
        text-align: center;
        &.strong{
          background: #db0e0d;
          color: #fff;
        }
      }
      .btn-1-dis,
      .btn-2-dis {
        width: ${rem(324)};
        height: ${rem(80)};
        line-height: ${rem(80)};
        border-radius: ${rem(45)};
        background: #e8e8e8;
        font-size: ${rem(24)};
        color: #7b7b7b;
        text-align: center;
      }
      .left {
        margin-right: ${rem(90)};
      }
    }
  }
`