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

export const Container = styled.div`
  padding: ${rem(40)} ${rem(40)} 0 ${rem(40)};
  .header {
    height: ${rem(44)};
    margin-bottom: ${rem(41)};
    .title {
      font-weight: bold;
      font-size: ${rem(34)};
      color: #444444;
      line-height: ${rem(44)};
      
    }
    .link {
      font-size: ${rem(28)};
      color: #B3B3B3;
      text-align: right;
      float: right;
      &::after {
        content: '';
        display: inline-block;
        width: ${rem(20)};
        height: ${rem(20)};
        background: url('https://easyreadfs.nosdn.127.net/b98ee313a7cf45e7b723e96a9c0418db_1569391224113.png') no-repeat;
        background-size: contain;
      }
    }
  }
  .share-read {
    .user {
      padding-bottom: ${rem(24)};
      position: relative;
      &::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(64)};
        height: ${rem(64)};
        border-radius: 100%;
        vertical-align: top;
        box-shadow: 0 ${rem(12)} ${rem(24)} 0 rgba(0,0,0,0.09);
      }
      .info {
        display: inline-block;
        margin-left: ${rem(24)};
        .nickName {
          font-family: PingFangSC-Regular sans-serif;
          font-size: ${rem(28)};
          color: #444444;
          text-align: left;
          line-height: ${rem(42)};
        }
        .desc {
          font-family: PingFangSC-Regular sans-serif;
          font-size: ${rem(24)};
          color: #B3B3B3;
          text-align: left;
          line-height: ${rem(36)};
          width: ${rem(534)};
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }
    .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(26)};
          color: #B3B3B3;
          text-align: left;
          line-height: ${rem(39)};
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
      .book-cover {
        width: ${rem(190)};
        margin-left: ${rem(18)};
        box-shadow: 0 ${rem(12)} ${rem(50)} 0 #d4d4d4;
        vertical-align: top;
      }
    }
    .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(32)};
      .btn-1,
      .btn-1-watch,
      .btn-2,
      .btn-2-watch {
        width: ${rem(324)};
        height: ${rem(80)};
        line-height: ${rem(80)};
        border: 1px solid #CE5959;
        border-radius: ${rem(45)};
        background: #FFFFFF;
        font-size: ${rem(30)};
        color: #CE5959;
        text-align: center;
      }
      .btn-1-dis,
      .btn-2-dis {
        width: ${rem(324)};
        height: ${rem(80)};
        line-height: ${rem(80)};
        border-radius: ${rem(45)};
        background: #ECECEC;
        font-size: ${rem(30)};
        color: #B3B3B3;
        text-align: center;
      }
      .left {
        margin-right: ${rem(22)};
      }
    }
  }
`
export const Divider = styled.div`
  margin-left: -${rem(40)};
  margin-right: -${rem(40)};
  margin-top: ${rem(40)};
  height: ${rem(16)};
  background-color: #f6f6f6;
`