<template>
    <div class="product-block">
      <router-link :to="url?url:'moneyMange'">
        <img :src="source?source:'../../assets/images/1.png'" class="product-block-list" alt="">
        <div class="mask abs flex flex_ac flex_sb">
          <div class="mask-item flex flex_sb">
            <span class="mask-title">{{rate?rate:''}}</span>
            <img src="../../../static/icons/arrow-circle.png" class="arrow-right mask-arrow" alt="">
            <!--<span class="mask-arrow wt flex flex_ac flex_ct">-->
              <!--<i class="iconfont arrow-right flex flex_ac flex_ct" :style="'color:'+color"></i>-->
            <!--</span>-->
          </div>
          <div class="mask-item">
            <span class="mask-product-name bc">{{product?product:''}}</span>
            <span class="bc mask-product-startBuy">
              {{startBuy?startBuy+'元起购':''}}
          </span>
          </div>
        </div>
      </router-link>
    </div>
</template>

<script>
    export default {
        name: "product-block",
        props:['source','color','url','rate','product','startBuy']
    }
</script>

<style scoped>
  @import "../../css/style.css";
  .product-block{
    border-radius:.16rem;
    width: 3.26rem;
    height: 2.2rem;
    position: relative;
    overflow: hidden;
  }
  .product-block-list{
    width: 100%;
    height: 100%;
  }
  .mask-item{
    width: 100%;
    color: #ffffff;
    font-weight: bold;
  }
  .mask{
    top: 0;
    padding: .2rem;
    flex-wrap: wrap;
  }
  .mask-title{
    font-size: .36rem;
    /*width: 2.4rem;*/
    flex-grow: 1;
    display: block;
    white-space:normal;
    font-weight: bold;
    color:white;
  }
  /*.mask-arrow{*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*border-radius: 50px;*/
    /*color: #a08cf5;*/
  /*}*/
  /*.mask-arrow .arrow-right:before{*/
    /*margin-top: 2px;*/
    /*margin-left: 1px;*/
    /*font-size: 10px !important;*/
    /*font-weight: bold;*/
  /*}*/
  .mask-product-name{
    font-size: .3rem;
  }
  .mask-product-startBuy{
    font-size: .26rem;
    padding-top: .05rem;
  }
  .arrow-right{
    width:.4rem;
    align-self: center;
    flex-shrink: 0;
  }
</style>
