import styled from 'styled-components';
import {
  rem,
} from '../../style/function.style';

export const Container = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  font-size: 0;
`

export const Cover = styled.div`
  position: relative;
  width: ${rem(160)};
  height: ${rem(160)};
  margin-right: ${rem(24)};
  .cover-img {
    background: #F5F5F5;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
    border-radius: ${rem(24)};
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
`
export const HeaderImageBg = styled.div`
  background-color: #ffffff;
  border: 1px solid #CCCCCC;
  border-radius: ${rem(20)};
  position: absolute;
  z-index: 2;
`
// @ts-ignore
export const HeaderImageBg1 = styled(HeaderImageBg)`
  width: ${rem(144)};
  height: ${rem(144)};
  top: ${rem(-9)};
  left: ${rem(8)};
`

// @ts-ignore
export const HeaderImageBg2 = styled(HeaderImageBg)`
  width: ${rem(128)};
  height: ${rem(128)};
  top: ${rem(-17)};
  left: ${rem(16)};
`

export const HeaderImageBorder = styled.div`
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  border-radius: ${rem(24)};
  border: 1px solid rgba(0, 0, 0, 0.1);
`

export const Info = styled.div`
  width: ${rem(454)};
`

export const InfoTitle = styled.div`
  font-weight: 500;
  font-size: ${rem(28)};
  line-height: ${rem(40)};
  margin-bottom: ${rem(32)};
  word-break: break-all;
  display: -webkit-box;
  // 超出截断
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
`

export const InfoDescription = styled.div`
  padding: ${rem(3)} ${rem(16)};
  background: #F5F5F5;
  border-radius: ${rem(20)} ${rem(20)} ${rem(20)} ${rem(4)};
  font-size: ${rem(24)};
  line-height: ${rem(34)};
  color: #B3B3B3;
  display: -webkit-inline-box;
  max-width: 100%;
  // 超出截断
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
`

export const EmptyInfoDescription = styled.div`
  height: ${rem(40)};
`

export const InfoUser = styled.div`
  margin-top: ${rem(12)};
  display: flex;
  align-items: center;
  justify-content: space-between;
  .user {
    display: inline-flex;
    align-items: center;
    .avatar {
      width: ${rem(32)};
      height: ${rem(32)};
      margin-right: ${rem(8)};
      background: #F5F5F5;
      border-radius: 50%;
    }
    .name {
      width: ${rem(160)};
      font-size: ${rem(22)};
      line-height: ${rem(31)};
      color: #B3B3B3;
      height: ${rem(32)};
      line-height: ${rem(32)};
      word-wrap: break-all;
      // 超出截断
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
  .count {
    font-size: ${rem(22)};
    line-height: ${rem(31)};
    color: #B3B3B3;
    .view {
      display: inline-block;
      margin-right: ${rem(12)};
    }
  }
`

export const LoadingCol = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  .cover {
    width: ${rem(160)};
    margin-right: ${rem(24)};
    .img {
      display: inline-block;
      width: 100%;
      height: ${rem(160)};
      margin-right: ${rem(24)};
      background: #F5F5F5;
      border-radius: ${rem(24)};
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  .info {
    position: relative;
    width: ${rem(454)};
    .tips {
      position: absolute;
      color: red;
      top: 0;
      left: 0;
      border: 1px solid red;
      display: inline-block;
      padding: ${rem(2)};
      font-size: ${rem(24)};
    }
    .title {
      width: 100%;
      height: ${rem(40)};
      margin-bottom: ${rem(32)};
      background: #F5F5F5;
      border-radius: ${rem(7)};
    }
    .desc {
      background: #F5F5F5;
      width: 60%;
      height: ${rem(40)};
      border-radius: ${rem(20)} ${rem(20)} ${rem(20)} ${rem(4)};
    }
    .user {
      margin-top: ${rem(16)};
      display: flex;
      align-items: center;
      .avatar {
        width: ${rem(32)};
        height: ${rem(32)};
        margin-right: ${rem(8)};
        background: #F5F5F5;
        border-radius: 50%;
        flex: 0 0 auto;
      }
      .name {
        width: 100%;
        height: ${rem(31)};
        background: #F5F5F5;
        border-radius: ${rem(7)};
      }
    }
  }
`