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

export const CardGroupContainer = styled.div<{
  backgroundColor: string,
  topOffset: number,
}>`
  background: ${props => props.backgroundColor || '#FAFAFA'};
  border-radius: ${rem(44)} ${rem(44)} 0 0;
  margin-top: ${props => rem(props.topOffset)};
  position: relative;
  overflow: hidden;
  .search{
    width: ${rem(698)};
    margin: ${rem(31)} auto 0;
    position: relative;
    .search-input{
      display: block;
      margin-bottom: ${rem(28)};
      width: 100%;
      height: ${rem(54)};
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJgSURBVHgBtVbrUQIxEE4OCjj/87oKxArEDrQCsQLowKMCpQKxArQCzwqkAyI0QAE8/BYCkyx73Gv8ZsINSXa/7COb1SoH5vN5D5/7IAhu8Q0xOhgrDKO1nuH73Wq1JqoA9KXF5XI52G63sSXLgsHBJuv1ehxF0Sprs0gMCzuw5APjWhWHwWEfQD5TRYhB2sXJv1Q+K1NRq9X6jUbjPW09YKSdFNIVrBhj3GFE7XZb43tl/4+xbrjizWYzgb57lQLtkIYg/VGHxDnBKo6z4gb5GPLPwoFvIGv4/pPF9Xp9IJCOIDTMkyzYE2P/E5sO4fI3ab+2pyUXzwXSWBUEdA2h64XpuoOuxJ07Wtxj8qYMKQFyr7gNCZs+i/WeGO54dCchOFIVgMTy5OGBR5F4t9v1mGCiKsC61c2LkMLpEdO9ZXIzKQtL4Jv993jIYu/OwvrMDM4DJBTXE3JibwPiW6li5cUZsWJ3uSyQsG02ZTxiG8+LiVAGPGHPiOnHvqku+qoCcPA+J+UJuyfG9Rl7k0EwKGu1rflezUainb1Se2Kc5kP5riDhKSlRBYHYEmmHTU+URGxPxatVF0qmRSxfLBYviO3QnaPyKdUFzQSnEOR1lfqq0aWeinoy7HlN61jgvbjZbI5SiW18qBHoCvLU0nzi6yYieeVayOBMcqn1uUReCS55wBfp0UdrcyPEPBeoSUxbo46V3muR2DkAdRSRvQpZ9XsFdyf04CMXHoRO5ITjVdMqJ2xT33NLIe7/rzrEPOHtERURkEhtj4FHo9zEZSCQG9sGmX8ldsifEQqD8XS803/iXC/rebpKLgAAAABJRU5ErkJggg==) no-repeat;
      background-position: ${rem(17.78)} center;
      background-size: ${rem(30)} auto;
      text-indent: ${rem(56.65)};
      font-weight: bold;
      &::placeholder{
        color: #E1E1E1;
      }
    }
    .search-btn{
      position: absolute;
      top: ${rem(3.16)};
      right: ${rem(3.71)};
      width: ${rem(88.29)};
      height: ${rem(47.68)};
      background: linear-gradient(260.38deg, #EDD7AD -60.75%, #F1E1C2 9.39%, #E7CE9F 96.34%);
      border-radius: ${rem(77.6988)};
      font-size: 0;
      &::after{
        content: '';
        position: absolute;
        top: ${rem(9.89)};
        left: ${rem(30.03)};
        width: ${rem(29)};
        height: ${rem(28)};
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAcCAYAAACdz7SqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGTSURBVHgBvZaLcYMwDIZFFygjuBM0G4QN2hHoBGWDZIRuEDZoM4GzQdMJoBNAJ1Dlw7mC/MRO+t3pHIikH2FbpoAAiFjRsCVTo9A2kvXajmSnoih6yEWJkUmM50AmIAUKLHWCFAayZq2gIOswn12sYOkRlGQ1zl4f/d7oe12yMDm1lsCzSh4R6xJ/DgVxWlgB2qdGzXHpCuDOHSSgX/nAcu1tjpWlSgGJKBFerc3pjTkdIAOcFiSvdrEu7sgeWdwRMqDONFpyVFxUMIcz5MNzCK/oVXro1Jvn3HPREf4ZQzRn5c4Q7Pqbi34xB3cXiWfLrpdzTJU1bHlLyEB3Jv++1/uKk1wtmj1cxjoOKXNLMa+WAmqXs0Czi3RrhB2CXSiosQSpB9kF4tQDv6Mbo60WLMGeBptIT3aCaaVftpg6sp6AtTgHLTWdF+e/aJ4S18J/kKD/M8SHDMQFhdVcNRgnLnH6Po75uNsUEIFOqM5EAX/N+wemTvOhj7PFA9MgwWyHige4FY6Ka7g1WvgTp61XX+7/AqBsMqjgvIjUAAAAAElFTkSuQmCC) no-repeat;
        background-position: center center;
        background-size: ${rem(29)} auto;
      }
      &:active{
        opacity: .7;
      }
    }
  }
`
export const Group = styled.div`
  padding: 0 ${rem(25)} ${rem(12)};
  .title{
    line-height: ${rem(44)};
    font-size: ${rem(30)};
    color: #000;
    font-weight: bold;
    width: ${rem(123)};
    box-sizing: content-box;
    padding-right: ${rem(72)};
    background: url(https://lofter.lf127.net/1655725652065/title.png) right center no-repeat;
    background-size: auto ${rem(44)};
  }
  .list{
    margin-top: ${rem(16)};
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item{
      width: ${rem(339)};
      background: #FFFFFF;
      box-shadow: 0px 0px ${rem(10)} rgba(0, 0, 0, 0.06);
      border-radius: ${rem(24)};
      overflow: hidden;
      margin-bottom: ${rem(34)};
      position: relative;
      .cover{
        height: ${rem(312)};
        background: url(https://lofter.lf127.net/1655726492940/lofter_post.png?imageView&thumbnail=339y312&type=webp) center top no-repeat;
        background-size: 100% auto;
        flex-shrink: 0;
        position: relative;
        .mask{
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: rgba(78, 78, 78, .4);
          overflow: hidden;
          .text{
            margin: ${rem(226)} auto 0;
            width: ${rem(148)};
            height: ${rem(44)};
            line-height: ${rem(44)};
            border-radius: ${rem(68)};
            text-align: center;
            background: #FFFFFF;
            color: #3C3C3C;
            opacity: 0.8;
          }
        }
        .time{
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: ${rem(49)};
          line-height: ${rem(49)};
          font-size: ${rem(24)};
          font-weight: 500;
          background: rgba(0, 0, 0, 0.8);
          color: #fff;
          text-align: center;
        }
      }
      .info{
        padding-left: ${rem(20)};
        padding-right: ${rem(20)};
        position: relative;
        overflow: hidden;
        flex: 1;
        .name{
          font-weight: bold;
          font-size: ${rem(28)};
          line-height: ${rem(44)};
          color: #000;
          margin-top: ${rem(15)};
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .desc{
          font-size: ${rem(24)};
          color: #808080;
          line-height: ${rem(44)};
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &.short{
            width: ${rem(195)};
          }
        }
        .detail{
          height: ${rem(44)};
          display: flex;
          align-items: center;
          margin-top: ${rem(3)};
          margin-bottom: ${rem(20)};
          .price{
            color: #DCBC76;
            font-size: ${rem(28)};
            font-weight: 600;
          }
          .action{
            margin-left: auto;
            width: ${rem(91)};
            height: ${rem(34)};
            text-align: center;
            line-height: ${rem(34)};
            font-size: ${rem(22)};
            background: #DCBC76;
            color: #fff;
            border-radius: ${rem(19)};
            &.already{
              background: #A183FF;
            }
            &:active{
              opacity: .7;
            }
          }
        } 
      }
    }
  }
`
export const Bottom = styled.div`
  width: ${rem(698.71)};
  margin: 0 auto ${rem(72)};
  height: ${rem(144.73)};
  border-radius: ${rem(9.38)};
  background: #fff url(https://lofter.lf127.net/nos-upload-cli/1670835056911/qr.png) center center no-repeat;
  background-size: ${rem(608)} auto;
`