/**
* @Author think
* @Date 2020-08-26 09:38
*/

<template>
  <h-view title="List" class="list-demo">
    <h-header class="bar-custom">
      <h-return slot="left" @click.native="$routeGo()"/>
      <div slot="center">List</div>
    </h-header>
    <h-content>
      <h4>基础用法</h4>
      <list-item :item-height="55" class="wx-list">
        <item>
          <img slot="left-icon" src="@/assets/image/friend@2x.png" class="left-icon">
          <div slot="name">朋友圈</div>
          <img slot="right-icon" src="@/assets/image/right-arrow@2x.png" style="width: 8px" class="right-icon">
        </item>
      </list-item>
      <list-item :item-height="55" class="wx-list">
        <item>
          <img slot="left-icon" src="@/assets/image/shak@2x.png" class="left-icon">
          <div slot="name">扫一扫</div>
          <img slot="right-icon" src="@/assets/image/right-arrow@2x.png" style="width: 8px" class="right-icon">
        </item>
      </list-item>
      <h4>input用法</h4>
      <list-item>
        <item>
          <img slot="left-icon" src="@/assets/image/warning@2x.png" class="left-icon">
          <div slot="name" class="required">检查更新</div>
          <div slot="content">检查更新</div>
          <img slot="right-icon" src="@/assets/image/arrow-down@2x.png" style="width: 8px" class="right-icon">
        </item>
        <item>
          <img slot="left" src="@/assets/image/warning@2x.png" class="left-icon">
          <div slot="name" class="required">字数测试</div>
          <div slot="content">我是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字</div>
        </item>
        <item :showArrow="true">
          <div slot="name" class="required">客户名称</div>
          <input slot="content" v-model="bp_name" type="text" placeholder="请输入">
        </item>
      </list-item>
      <h4>列表用法</h4>
      <list-item :item-height="80">
        <item
          v-for="(list,index) in [1,2,3,4]" :key="index" :proportion="[5,1]">
          <img slot="left-icon" src="@/assets/image/item@2x.png" class="left-icon">
          <div slot="name" class="text">
            <div class="cont-name" style="font-size: 16px;color: #5D98F6">合同编号</div>
            <div class="cont-type" style="color: #8C8C8C;">承租人名称</div>
          </div>
        </item>
      </list-item>

    </h-content>
  </h-view>
</template>

<script>
export default {
  name: 'ListDemo',
  data () {
    return {
      bp_name: '张三',
    }
  },
  methods: {},
}
</script>

<style lang="less">
  .list-demo {

    .hls-item {
      .contents {
        .add-name {
          .left-icon {
            width: 28px;
          }
          .text {
            margin-left: 15px;
            .cont {
              margin-top: 5px;
              font-size: 13px;
              line-height: 18px;
              &:first-child {
                margin-top: 0;
              }
            }
            .cont-num {
              margin-top: 8px;
              font-size: 15px;
              line-height: 21px;
              color: #5D98F6;
            }
          }
        }
      }
    }
    .wx-list{
      .contents{
        .add-name{
          font-size: 16px;
          .left-icon {
            width: 24px;
          }
        }
      }
    }
  }
</style>