borrowContent.vue 7.23 KB
<template>
	<v-layout id="Setting" column justify-center align-center>
    <v-flex>
    	<p>▍借款内容</p>
      <v-card id="SettingMenu" flat >
        <v-list class="list">
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">借款人</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">史文斌</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">出借人</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">姚婷</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">借款金额</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">10000.00</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">出借方式</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">线下出借</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
           <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">还款方式</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">到期还本付息</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
           <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">借款日期</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">2018-3-13</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
           <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">还款日期</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">2018-3-13</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
           <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">服务费</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">5%</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
           <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">担保费</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">到期还本付息</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
           <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">借款用途</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">2018-3-13</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
           <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">补充说明</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">2018-3-13</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
           <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">借条ID</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">5%</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
           <v-divider></v-divider>
           <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title class="SettingMenuTitle">创建时间</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-content >
              <v-list-tile-title class="SettingMenuTitle">到期还本付息</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-divider></v-divider>
          <v-list-tile >
            <v-list-tile-content>
              <v-list-tile-title  class="SettingMenuTitle">借款协议</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-icon class="SettingMenuArrow">查看keyboard_arrow_right</v-icon>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider>
          <v-list-tile >
            <v-list-tile-content>
              <v-list-tile-title  class="SettingMenuTitle">居间服务协议</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-icon class="SettingMenuArrow">查看keyboard_arrow_right</v-icon>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider>
          <!--图片说明-->
         
          	<p style="text-align: center;">图片说明</p>
         
        </v-list>
      </v-card>
    </v-flex>
  </v-layout>
</template>


<script>
export default {
  data:() => ({
    userInfo: {},
  }),
  created() {
    this.userInfo = {}
  }
}
</script>

<style lang="scss" scoped>
  #Setting {
    padding-top: 0.8rem;
    color: $light-gold;

    #SettingMenu {
      width: 92vw;
      margin-top: 1.5rem;
      border-radius: 10px;

      .list {
        background-color: $menu-grey;
        height: 100%;

        .divider {
          width: 94%;
          margin: auto;
          color: #586C80;
        }

        .version {
          color: $light-gold;
          font-size: 18px;
          font-weight: bold;
        }

        .iconfont {
          color: $light-gold;
        }

        .SettingMenuTitle {
          color: $light-gold;
          font-size: 18px;
          font-weight: bold;
        }
       
      }
    }
  }
</style>