import styled from 'styled-components'

export const mOpera = styled.div`
  padding:0.5rem 0.4rem;
  .f-clearfix{zoom:1;}
  .f-clearfix:after{clear:both;content:'';display:block;visibility:hidden;height:0;}
  ul {list-style-type:none;}
  li {
    position:relative;
    z-index:2;
    margin-bottom:0.4rem;
    .imgwrap {
      position:relative;
      float:left;
      width:2.5rem;
      height:2.5rem;
      margin-right:-3.2rem;
      img {
        display:block;
        width:2.5rem;
        height:2.5rem;
        border-radius:0.1rem;
        -webkit-border-radius:0.1rem;
        -moz-border-radius:0.1rem;
        -o-border-radius:0.1rem;
      }
      .soldout{
        position:absolute;
        left:50%;
        top:50%;
        z-index:10;
        width:1.6rem;
        height:1.6rem;
        margin:-0.8rem 0 0 -0.8rem;
        background-position:0 -720px;
      }
    }
    .info {
      position:relative;
      height:2.5rem;
      margin-left:3rem;
    }
    .name {
      width:6rem;
      line-height:0.56rem;
      margin:0 0 0.1rem 0;
      color:#333;
      font-size:0.4rem;
    }
    .desc{
      line-height:0.5rem;
      color:#999;
      font-size:0.32rem;
      p {
        margin: 0;
      }
    }
    .coupon{
      float:left;
      height:0.4rem;
      line-height:0.4rem;
      padding:0 0.1rem;
      margin-top:0.2rem;
      color:#ba5038 ;
      font-size:0.32rem;
      text-align:center;
      background:#fff;
      border:0.02rem solid #ba5038;
      border-radius:0.02rem;
      -webkit-border-radius:0.02rem;
      -moz-border-radius:0.02rem;
      -o-border-radius:0.02rem;
    }
    .price{
      position:absolute;
      left:0;
      bottom:0;
      height:0.6rem;
      line-height:0.6rem;
      color:#BA5038;
      font-size:0.4rem;
      em{
        height:0.4rem;
        line-height:0.4rem;
        margin-left:0.3rem;
        color:#999;
        font-size:0.4rem;
        text-decoration:line-through;
        font-style:normal;
      }
    }
    .price-coin{color:#333;}
    .hoverlink{position:absolute;left:0;top:0;right:0;bottom:0;z-index:30;}
  }

`
export const goodList = styled.div`
  padding:0.5rem;
  .f-clearfix{zoom:1;}
  .f-clearfix:after{clear:both;content:'';display:block;visibility:hidden;height:0;}
  .gditm {
    display: inline-block;
    width: 4rem;
    margin-bottom: 0.8rem;
    margin-right: 0.5rem;
    vertical-align: top;
    .imgwrap {
      position:relative;
      width:4rem;
      height:4rem;
      img {
        display:block;
        width:4rem;
        height:4rem;
        border-radius:0.1rem;
        -webkit-border-radius:0.1rem;
        -moz-border-radius:0.1rem;
        -o-border-radius:0.1rem;
      }
      .soldout{
        position:absolute;
        left:50%;
        top:50%;
        z-index:10;
        width:1.6rem;
        height:1.6rem;
        margin:-0.8rem 0 0 -0.8rem;
        background-position:0 -720px;
      }
    }
    .info {
      position:relative;
      height:2.5rem;
    }
    .name {
      width:4rem;
      line-height:0.56rem;
      margin-top:0.2rem;
      color:#333;
      font-size:0.4rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      word-break: break-word;
    }
    .desc{
      line-height:0.4rem;
      color:#999;
      font-size:0.32rem;
      p {
        margin: 0;
      }
    }
    .coupon{
      float:left;
      height:0.4rem;
      line-height:0.4rem;
      padding:0 0.1rem;
      margin-top:0.1rem;
      color:#ba5038 ;
      font-size:0.32rem;
      text-align:center;
      background:#fff;
      border:0.02rem solid #ba5038;
      border-radius:0.02rem;
      -webkit-border-radius:0.02rem;
      -moz-border-radius:0.02rem;
      -o-border-radius:0.02rem;
    }
    .price{
      position:absolute;
      left:0;
      bottom:0;
      height:0.6rem;
      line-height:0.6rem;
      color:#BA5038;
      font-size:0.4rem;
      em{
        height:0.4rem;
        line-height:0.4rem;
        margin-left:0.3rem;
        color:#999;
        font-size:0.4rem;
        text-decoration:line-through;
        font-style:normal;
      }
    }
    .price-coin{color:#333;}
    .hoverlink{position:absolute;left:0;top:0;right:0;bottom:0;z-index:30;}
  }

`