黄尔冬 / net_iou

<template>
  <v-layout column justify-center align-center>
    <v-flex>
      <InfoCard />
      <div id="tabBlock">
        <div id="isBorrowing" :class="tabChoose === 'borrow' ? 'isChoosing' : ''" @click="tabChange('borrow')">正在借款</div>
        <span id="tabDivider"></span>
        <div id="isLending" :class="tabChoose === 'lend' ? 'isChoosing' : ''" @click="tabChange('lend')">正在出借</div>
      </div>
      <v-flex class="cardContainer">
        <v-card v-for="(item, index) in listInfo" :key="index" class="infoCards" flat height="6rem">
          <v-card-title class="infoCardsTitle" >
            <div class="infoCardsAvatar">
              <img v-if="item.avatar" :src="item.avatar" alt="" />
              <i v-if="!item.avatar" class="material-icons icon iconfont icon-face"></i>
            </div>
            <div class="infoCardsName">{{item.name}}</div>
            <div class="infoCardsTitleButton">补借条</div>
            <div class="infoCardsCornerMark">
              <div class="infoCardsCornerMarkString">剩余{{item.timeRemain}}</div>
            </div>
          </v-card-title>
          <v-card-text class="infoCardsContent" >
            <div class="infoCardsContentBlock amount">
              <div class="infoCardsContentKey">筹款金额</div>
              <div class="infoCardsContentValue">{{item.amount}}元</div>              
            </div>
            <div class="infoCardsContentBlock time">
              <div class="infoCardsContentKey">借款时常</div>
              <div class="infoCardsContentValue">{{item.time}}天</div>                            
            </div>
            <div class="infoCardsContentBlock rate">
              <div class="infoCardsContentKey">年利率</div>
              <div class="infoCardsContentValue">{{item.rate}}%</div>                            
            </div>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-flex>
    <v-bottom-nav id="bottomNav" fixed :value="true" :active.sync="navTarget" color="toolbar-grey" >
      <v-btn class="bottomNavBtn" flat color="gold" value="buJieTiao">
        <span>补借条</span>
        <i aria-hidden="true" class="material-icons icon iconfont icon-fuwenbenkuang"></i> 
      </v-btn>
      <v-btn class="bottomNavBtn" flat color="gold" value="chaXinYong">
        <span>查信用</span>
        <i aria-hidden="true" class="material-icons icon iconfont icon-xinyongqia"></i> 
      </v-btn>
      <v-btn class="bottomNavBtn" flat color="gold" value="qiuJieKuan">
        <span>求借款</span>
        <i aria-hidden="true" class="material-icons icon iconfont icon-dkw_jiekuan"></i> 
      </v-btn>
      <v-btn class="bottomNavBtn" to="/userCenter" flat color="gold" value="geRenZhongXin">
        <span>个人中心</span>
        <i aria-hidden="true" class="material-icons icon iconfont icon-gerenzhongxin"></i> 
      </v-btn>
    </v-bottom-nav>
  </v-layout>
</template>

<script>
import InfoCard from '@/components/InfoCard'
export default {
  data:() => ({
    navTarget: 'buJieTiao',
    tabChoose: 'borrow',
    listInfo: [],
  }),
  components: {
    InfoCard
  },
  created() {
    this.listInfo = [{
      name: '姚姚姚',
      amount: '100',
      time: '5',
      rate: '5',
      timeRemain: '96天',
      avatar: ''
    },{
      name: '姚姚姚',
      amount: '100',
      time: '5',
      rate: '5',
      timeRemain: '6天',
      avatar: '/avatar.png'
    },{
      name: '姚姚姚',
      amount: '100',
      time: '5',
      rate: '5',
      timeRemain: '6天',
      avatar: '/avatar.png'
    },{
      name: '姚姚姚',
      amount: '100',
      time: '5',
      rate: '5',
      timeRemain: '6天',
      avatar: '/avatar.png'
    },{
      name: '姚姚姚',
      amount: '100',
      time: '5',
      rate: '5',
      timeRemain: '6天',
      avatar: '/avatar.png'
    },{
      name: '姚姚姚',
      amount: '100',
      time: '5',
      rate: '5',
      timeRemain: '6天',
      avatar: '/avatar.png'
    }]
  },
  methods: {
    tabChange(tab) {
      this.tabChoose = tab
    }
  }
}
</script>

<style lang="scss" scoped>
  body {
    height: 100%;
    overflow: hidden;
  }
  #tabBlock {
    width: 100%;
    padding-top: 1.5rem;
    
    div {
      width: calc(50% - 2px);
      display: inline-block;
      text-align: center;
      height: 18px;
      font-size: 18px;
      transition: color 0.3s ease-in-out;
      -webkit-transition: color 0.3s ease-in-out;
    }

    #tabDivider:before {
      content: "";
      height: 18px;
      width: 0;
      border: 2px solid $gold;
    }
    .isChoosing {
      color: $gold;
    }
  }
  .cardContainer {
    width: 92vw;
    overflow: auto;
    height: 53vh;
    margin-top: 1.5rem;

    .infoCards {
      background-color: #fff;
      color: #000;
      border-radius: 2px;
      margin-bottom: 1rem;
      position: relative;
      overflow:hidden;      

      .infoCardsTitle {
        padding:0.5rem 1.3rem 0.2rem 1.3rem; 
        

        .infoCardsAvatar {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 1.3rem;
          overflow:hidden;

          img {
            width: 100%;
            vertical-align: bottom;
          }
          
          .icon {
            color: $avatar-grey;
            font-size: 2.5rem;
          }
        }

        .infoCardsName {
          margin-left: 0.8rem;
          font-size: 16px;
        }

        .infoCardsTitleButton {
          width: 3.2rem;
          height: 1.2rem;
          font-size: 10px;
          text-align: center;
          background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
          border-radius: 32px;
          margin-left: 0.9rem;
        }
        .infoCardsCornerMark {
          font-size: 10px;
          width: 6rem;
          height: 2.8rem;
          background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
          border-radius: 26px;
          position: absolute;
          top: -1.6rem;
          right: -1rem;
          z-index: 1;

          .infoCardsCornerMarkString {
            position: absolute;
            bottom: 0;
            left: 1rem;
          }
        }
      }

      .infoCardsContent {
        width: 100%;
        padding: 0;

          .infoCardsContentBlock {
            width: 33%;
            display: inline-block;
            text-align: center;

            .infoCardsContentKey {
              font-size: 10px;
              color: #898989;
            }

            .infoCardsContentValue {
              font-size: 10px;
              color: $gold;
              margin: auto;
            }
          }
      }
    }
  }
  #bottomNav {
    height: 42pt;
    box-sizing: border-box;
    
    .bottomNavBtn {
      color: #fff;
      opacity: 1;
    }
    
    .bottomNavBtn.btn--active {
      color: $gold;
    }
  }
</style>