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

export const Container = styled.div`
  position: relative;

// 编辑器样式
  & > .resize {
    z-index: 2;
  }
`;

export const Header = styled.div`
  top: 0;
  left: 0;
  right: 0;
  color: #3535D8;
  font-size:${rem(24)};
  // margin-bottom:${rem(30)};
  font-weight:500;
  z-index: 2;
`;
export const Rank = styled.span`
   padding:0 ${rem(110)} 0 ${rem(36)}; 
`;
export const WorkName = styled.span`
   padding-right:${rem(125)}
`;
export const Author = styled.span`
   padding-right:${rem(105)}
`;
export const Vote= styled.span` 
`;
export const Content = styled.div`
  // display:flex;
  padding: 0 0 ${rem(20)} 0;
`;



export const ContentItem = styled.div`
  minHeight:${rem(200)};
  margin:${rem(28)} 0 ${rem(28)} ${rem(25)};
  padding-bottom:${rem(19)};
  font-size:${rem(21)};
  border-bottom:solid #EEEEEE 1px;
  width:${rem(632)};
  color:#7D7D7D;
  vertical-align: middle;
`;

export const IndexItem = styled.span`
  padding-right:${rem(42)};
  padding-left:${rem(20)};
  text-align:center;
  display:inline-block;
  z-index: 4;
  color:#000000;
  font-weight:600;
  vertical-align: middle;
`;

export const WorkItem = styled.span`
  padding-left:${rem(60)};
  width:${rem(195)};
  height:${rem(35)};
  overflow:hidden;
  display:inline-block; 
  text-overflow:ellipsis; 
  white-space:nowrap; 
  z-index: 4;
  // text-align:center;
  vertical-align: middle;
`;

export const AuthorItem = styled.span`
padding-left:${rem(50)};
padding-right:${rem(60)};
height:${rem(35)};
width:${rem(235)};
z-index: 4;
overflow:hidden;
display:inline-block; 
text-overflow:ellipsis; 
white-space:nowrap;
vertical-align: middle;
`;

export const VoteItem = styled.span`
margin-left:${rem(6)};
width:${rem(95)};
z-index: 4;
height:${rem(35)};
display:inline-block;
vertical-align: middle;
`;
export const Bracket= styled.span`
z-index: 4;
height:${rem(31)};
display:inline-block;
text-align:center;
vertical-align: middle;
`;
export const Work = styled.span`
z-index: 4;
height:${rem(35)};
min-width:${rem(100)}
display:inline-block;
text-align:center;
vertical-align: middle;
`;

export const NullList = styled.div`
   font-size:${rem(22)};
   display:flex;
   align-items: center;
   vertical-align: middle;
   justify-content: center;
   height:${rem(235)};

`
export const ShowMore =  styled.div`
font-size:${rem(26)};
margin:0 auto;
text-align:center;
color:#FF762D;
font-weight:500;
`