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


export const ProductContainer  = styled.a`
  display: block;
  position:relative;
  // z-index:10;
  width:${rem(654)};
  -webkit-tap-highlight-color:transparent;
  .imgwrap{
    position:relative;
    // z-index:10;
    float:left;
    width:${rem(200)};
    height:${rem(200)};
    border-radius:${rem(8)};
    -webkit-border-radius:${rem(8)};
  }
  .imgwrap img{
    display:block;
    width:${rem(200)};
    height:${rem(200)};
    border-radius:${rem(8)};
    -webkit-border-radius:${rem(8)};
  }
  // .imgwrap .soldout{
  //     position:absolute;
  //     left:50%;
  //     top:50%;
  //     z-index:10;
  //     width:${rem(120)};
  //     height:${rem(120)};
  //     margin:-${rem(60)} 0 0 -${rem(60)};
  //     background-position:0 -${rem(720)};
  // }
  .tags-wrapper{
    position: absolute;
    left: ${rem(8)};
    top: ${rem(8)};
    display:flex;
  }
  .preSale-tag{
    margin-right:${rem(8)};
    display: block;
    height: ${rem(30)};
    padding: 0 ${rem(8)};
    line-height: ${rem(30)};
    font-size: ${rem(20)};
    color: #FFFFFF;
    text-align: center;
    background: #8E87FA;
    border-radius: ${rem(8)};
    // z-index: 11;
  }
  .purple-bgc{
    background: #ff88da;
  }
  .info{
    position:relative;
    width:${rem(430)};
    // z-index:10;
    height:${rem(240)};
    margin-left:${rem(230)};
    text-align: left;
    .shop{
      background:#F5F5F5;
      width:${rem(249)};
      height:${rem(38)};
      line-height:${rem(38)};
      padding:${rem(2)} ${rem(12)};
      font-size:${rem(24)};
      border-radius:${rem(222)};
      .shop-name{
        width:${rem(155)};
        height:100%;
        display:inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color:#999999;
      }
      .shop-name::before{
        content:'';
        display:inline-block;
        margin-right:2px;
        width:${rem(29)};
        height:${rem(25)};
        vertical-align: text-top;
        background:url('https://lofter.lf127.net/1638183888718/shop.png') no-repeat;
        background-size:100% auto;
      }
      .shop-entrance{
        float:right;
        color:#2E2E2E;
      }
      .shop-entrance::after{
        content:'';
        display:inline-block;
        margin-right:2px;
        width:${rem(9)};
        height:${rem(17)};
        background:url('https://lofter.lf127.net/1638189085987/right.png') no-repeat;
        background-size:100% auto;
      }
    }
  }

  .name{
    font-family:"PingFangSC-Medium";
    line-height:${rem(42)};
    margin:0 0 ${rem(10)} 0;
    color:#1f1f1f;
    font-size:${rem(30)};
  }

  .desc{
    line-height:${rem(33)};
    color:#999;
    font-size:${rem(24)};
  }

  .coupon{
    float:left;
    height:${rem(28)};
    line-height:${rem(28)};
    padding:${rem(2)} ${rem(6)};
    margin-top:${rem(14)};
    margin-right:${rem(10)};
    color:#FF6C93;
    font-size:${rem(20)};
    font-weight:500;
    text-align:center;
    background:#FF6C931A;
    // border:1px solid #ff5367;
    border-radius:${rem(8)};
    -webkit-border-radius:${rem(8)};
  }

  .price-block{
    position:absolute;
    left:0;
    bottom:0;
    // z-index:10;
    height:${rem(45)};
    line-height:${rem(45)};
    color:#ff5367;
    font-size:${rem(32)};
  }
  .price-block .store-price{
    font-family:"PingFangSC-Medium";
  }
  .price-block .price-coin{
    color:#1f1f1f;
  }
  .price-block .coin{
    position: relative;
    top: ${rem(5)};
    display: inline-block;
    width: ${rem(21)};
    height: ${rem(27)};
    margin-right: ${rem(7)};
    background: url(https://easyreadfs.nosdn.127.net/fle/a0df1d4009c7a2ec5fee/1581579879896/coin.png) 0 0 no-repeat;
    background-size: cover;
  }
  .price-block em{
    height:${rem(33)};
    line-height:${rem(33)};
    margin-left:${rem(10)};
    color:#999;
    font-size:${rem(24)};
    text-decoration:line-through;
  }

  .hoverlink{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    // z-index:20;
  }
  .purchase{
    position:absolute;
    right:0;
    bottom:0;
    // z-index:30;
    width:${rem(136)};
    height:${rem(50)};
    border-radius:${rem(25)};
    line-height:${rem(50)};
    color:#fff;
    font-size:${rem(24)};
    background-color:#ff5367;
    background-image:linear-gradient(135deg, #ff5367 0%, #ff7990 100%);
    text-align:center;
  }
`