<template>
  <box title="产品概括">
    <ul>
      <li v-for="(item, index) in productList" :key="index">
        <img :src="item.icon" class="icon">
        <div class="tag">{{ item.tag }}</div>
        <textarea placeholder="请输入"></textarea>
      </li>
    </ul>
  </box>
</template>

<script>
import Box from './Box.vue'
export default {
  components: { Box },
  data() {
    return {
      productList: [
        {
          icon: 'https://webapp-pub.ezijing.com/x-training-new/products1.png',
          tag: '基金类型'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/x-training-new/products2.png',
          tag: '运作方式'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/x-training-new/products3.png',
          tag: '开放频率'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/x-training-new/products4.png',
          tag: '交易币种'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/x-training-new/products5.png',
          tag: '基金管理人'
        },
        {
          icon: 'https://webapp-pub.ezijing.com/x-training-new/products6.png',
          tag: '基金委托人'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
ul{
  padding-top: 27px;
  display: flex;
  flex-wrap: wrap;
  margin-right: -24px;
  li{
    margin-right: 18px;
    margin-bottom: 13px;
    width: 198px;
    height: 240px;
    background: #F1FCF9;
    border: 1px solid #B8EBDE;
    border-radius: 12px;
    &:nth-child(2){
      background: #ECFAFC;
      border: 1px solid #B5EBEB;
      textarea{
        border-bottom: 1px solid #A5E1E9;
        color: #62C2D0;
      }
    }
    &:nth-child(3){
      background: #FFFDF0;
      border: 1px solid #F0ECCB;
      margin-right: 0;
      textarea{
        border-bottom: 1px solid #DAD396;
        color: #D9D292;
      }
    }
    &:nth-child(4){
      background: #FDF8EE;
      border: 1px solid #ECD7AA;
      textarea{
        border-bottom: 1px solid #E2C485;
        color: #E2C485;
      }
    }
    &:nth-child(5){
      background: #FCEDE9;
      border: 1px solid #F2C1B6;
      textarea{
        border-bottom: 1px solid #DE9888;
        color: #DE9888;
      }
    }
    &:nth-child(6){
      background: #F1FCF9;
      border: 1px solid #B8EBDE;
      margin-right: 0;
      textarea{
        border-bottom: 1px solid #7BC1AF;
        color: #7BC1AF;
      }
    }
    .icon{
      width: 82px;
      display: block;
      margin: 36px auto 18px;
    }
    .tag{
      text-align: center;
      font-size: 16px;
      color: #8E8E8E;
      line-height: 100%;
    }
    textarea{
      width: 150px;
      height: 43px;
      outline: none;
      resize: none;
      margin: 15px auto 0;
      display: block;
      border-bottom: 1px solid #7BC1AF;
      background: none;
      color: #68B8A4;
      text-align: center;
      padding-top: 10px;
      &::-webkit-input-placeholder{
        font-size: 18px;
        color: #CACACA;
      }
    }
  }
}
</style>
