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

// 津贴角标，已去除
// const cornerIcon = 'data:image/png;base64,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'

export const Container = styled.div`
  padding: 0 ${rem(16)} ${rem(16)};
`
export const Inner = styled.div`
  width: ${rem(702)};
  padding: ${rem(16)} ${rem(16)} 0;
  margin: 0 auto;
  background: #FFF;
  box-shadow: 0 ${rem(2)} ${rem(30)} 0 rgba(150,150,150,0.11);
  border-radius: ${rem(16)};
  -webkit-border-radius: ${rem(16)};
  .title-wrap{
    padding-top: ${rem(24)};
  }
`

export const Title = styled.div`
  margin: ${rem(34)} auto ${rem(40)} ;
  font-weight: bold;
  line-height: ${rem(45)};
  font-size: ${rem(32)};
  text-align: center;
  color: #1f1f1f;
`

export const ColumnBox = styled.div`
  &::after{
    content: '';
    display: table;
    clear: both;
  }
`
export const Item1Bounty = styled.div<{
  styleColor: string,
  fontColor: string,
}>`
  width: ${rem(670)};
  margin: 0 auto ${rem(16)};
  padding: ${rem(8)};
  height: ${rem(180)};
  background: ${props => props.styleColor};
  color:${props => props.fontColor};
  text-align:center;
  border-radius:${rem(8)};
  -webkit-border-radius:${rem(8)};
  position:relative;
  .wrap {
    width: ${rem(654)};
    height: ${rem(164)};
    border-radius:${rem(4)};
    border: ${rem(2)} solid rgba(255, 255, 255, .4);
    position: relative;
  }
  .lpart{
    height:${rem(164)};
    padding-left:${rem(32)};
    text-align:left;
    overflow: hidden;
    .top {
      display:flex;
    }
    .facevalue{
      margin-top: ${rem(13)};
      margin-right: ${rem(8)};
      height:${rem(58)};
      line-height:${rem(58)};
      text-align:center;
      font-size:${rem(46)};
      font-weight: bold;
      display:flex;
      align-items: center;
      em {
        font-size:${rem(24)};
        margin-right: ${rem(4)};
        margin-top: ${rem(2)};
      }
    }
    .ttl{
      width:auto;
      height:${rem(30)};
      line-height:${rem(30)};
      margin:${rem(30)} 0 ${rem(0)};
      font-size:${rem(28)};
      font-weight: bold;
      color:${props => props.fontColor};
      span {
        margin-right: ${rem(8)};
      }
    }
    .validterm{
      margin:${rem(10)} 0 ${rem(8)};
      height:${rem(26)};
      line-height:${rem(26)};
      font-size:${rem(20)};
    }
    .desc {
      height:${rem(26)};
      line-height:${rem(26)};
      font-size:${rem(20)};
    }
  }
  .rpart{
    position:absolute;
    top:0;
    right:${rem(8)};
    width:${rem(140)};
    height:${rem(164)};
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .getbtn{
      z-index:${zIndex('coupon-hover')};
      width:${rem(100)};
      height:${rem(50)};
      line-height:${rem(54)};
      color:${props => props.styleColor};
      background:${props => props.fontColor};
      font-size:${rem(24)};
      font-weight:bold;
      text-align:center;
      border-radius:${rem(25)};
      -webkit-border-radius:${rem(25)};
    }
    .unable{
      background:#ffffff66;
    }
    .doorsill{
      margin: ${rem(10)} auto 0;
      padding:0 ${rem(8)};
      width: max-content;
      height:${rem(30)};
      line-height:${rem(30)};
      text-align:center;
      font-size:${rem(20)};
      background:rgba(255, 255, 255, .2);
      color: ${props => props.fontColor};
      border-radius:${rem(8)};
      -webkit-border-radius:${rem(8)};
    }
  }
`
export const Item2Bounty = styled.div<{
  styleColor: string,
  fontColor: string,
}>`
  width: ${rem(327)};
  float: left;
  margin-right: ${rem(16)};
  margin-bottom: ${rem(16)};
  padding: ${rem(8)};
  height: ${rem(180)};
  background:  ${props => props.styleColor};
  border-radius:${rem(8)};
  color:${props => props.fontColor};
  text-align:center;
  position:relative;
  &.num-2th{
    margin-right: 0;
  }
  .wrap {
    width: ${rem(311)};
    height: ${rem(164)};
    border-radius:${rem(4)};
    border: ${rem(2)} solid rgba(255, 255, 255, .4);
  }
  .part {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top: ${rem(6)};
    .facevalue{
      margin-right: ${rem(16)};
      height:${rem(60)};
      line-height:${rem(60)};
      text-align:center;
      font-size:${rem(44)};
      font-weight: bold;
      display:flex;
      align-items: center;
      em {
        font-size:${rem(24)};
        margin-right: ${rem(4)};
        margin-top: ${rem(2)};
      }
    }
    .doorsill{
      padding:0 ${rem(8)};
      width: max-content;
      height:${rem(30)};
      line-height:${rem(30)};
      text-align:center;
      font-size:${rem(20)};
      background:rgba(255, 255, 255, .2);
      color: ${props => props.fontColor};
      border-radius:${rem(8)};
      -webkit-border-radius:${rem(8)};
    }
  }
  .title {
    margin: ${rem(0)} auto ${rem(8)};
    font-weight: bold;
    font-size: ${rem(26)};
    line-height: ${rem(36)};
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:${rem(286)};
    color:${props => props.fontColor};
  }
  .bottom {
    margin: 0 auto;
    padding: ${rem(13)} 0 ${rem(10)};
    width: ${rem(295)};
    border-top: ${rem(2)} dashed rgba(255, 255, 255, .4);
    text-align: center;
    .getbtn{
      margin: 0 auto;
      width:${rem(100)};
      height:${rem(28)};
      line-height:${rem(28)};
      color:${props => props.fontColor};
      font-size:${rem(22)};
      z-index:${zIndex('coupon-hover')};
    }
    .unable{
      color:#fff6;
    }
  }
`

export const Item3Bounty = styled.div<{
  styleColor: string,
  fontColor: string,
}>`
  width: ${rem(212)};
  float: left;
  margin-right: ${rem(17)};
  margin-bottom: ${rem(16)};
  padding: ${rem(8)};
  height: ${rem(222)};;
  background:  ${props => props.styleColor};
  border-radius:${rem(8)};
  color:${props => props.fontColor};
  text-align:center;
  position:relative;
  &.num-3th{
    margin-right: 0;
  }
  .wrap {
    width: ${rem(196)};
    height: ${rem(206)};
    border-radius:${rem(4)};
    border: ${rem(2)} solid rgba(255, 255, 255, .4);
  }
  .facevalue{
    margin-top: ${rem(8)};
    height:${rem(50)};
    line-height:${rem(50)};
    font-size:${rem(44)};
    font-weight: bold;
    display:flex;
    align-items: center;
    justify-content:center;
    em {
      font-size:${rem(24)};
      margin-right: ${rem(4)};
      margin-top: ${rem(2)};
    }
  }
  .doorsill{
    margin: ${rem(8)} auto 0;
    padding: 0 ${rem(8)};
    width: max-content;
    height:${rem(30)};
    line-height:${rem(30)};
    text-align:center;
    font-size:${rem(20)};
    background:rgba(255, 255, 255, .2);
    color: ${props => props.fontColor};
    border-radius:${rem(8)};
    -webkit-border-radius:${rem(8)};
  }
  .title {
    margin: ${rem(16)} auto ${rem(20)};
    font-weight: bold;
    font-size: ${rem(22)};
    line-height: ${rem(28)};
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:${rem(180)};
    color: ${props => props.fontColor};
  }
  .bottom {
    margin: 0 auto;
    padding: ${rem(10)} 0 ${rem(5)};
    width: ${rem(180)};
    border-top: ${rem(2)} dashed rgba(255, 255, 255, .4);
    text-align: center;
    .getbtn{
      margin: 0 auto;
      width:${rem(100)};
      height:${rem(28)};
      line-height:${rem(28)};
      color:${props => props.fontColor};
      font-size:${rem(22)};
      z-index:${zIndex('coupon-hover')};
    }
    .unable{
      color:#fff6;
    }
  }
`