/**
* @Author Sean
* @Date 2019/4/25
*/
<template>
    <h-view class="public-style" style="height: 100%">
      <div class="s-tab">
        <div :class="{'active':index[0]}" class="s-tab-title" @click="buttonClicked(0)">股东信息</div>
        <div :class="{'active':index[1]}" class="s-tab-title" @click="buttonClicked(1)">对外投资</div>
      </div>
        <h-content>
          <list-item v-show="index[0]">
            <item>
              <div slot="name">股东名称:</div>
              <div slot="content">张三</div>
            </item>
            <item>
              <div slot="name">股东类型:</div>
              <div slot="content">自然人股东</div>
            </item>
            <item>
              <div slot="name">认缴出资额:</div>
              <div slot="content">327.897万人民币</div>
            </item>
            <item>
              <div slot="name">实缴出资额:</div>
              <div slot="content">327.897万人民币</div>
            </item>
          </list-item>

          <list-item v-show="index[1]">
            <item v-for="(list,index) in [0,1,2,3]" :key="index" :proportion="[4,0]">
              <div slot="left-icon" class="left-icon">上</div>
              <div slot="name">上海施吉投资管理有限公司</div>
            </item>
          </list-item>
        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {
              index : [1, 0],
            }
        },
        created: function () {
        },
        mounted: function () {
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          buttonClicked (index) {
            let vm = this
            vm.index = [0, 0]
            vm.index[index] = 1
          },
        }
    }
</script>

<style scoped lang="less" rel="stylesheet">
    .public-style {
      .s-tab {
        z-index: 999;
        width: 100%;
        background: #fff;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        position: fixed;

        .s-tab-title {
          height: 40px;
          width: 50%;
          font-size: 14px;
          color: rgb(124, 130, 141);
          display: -webkit-flex;
          display: flex;
          -webkit-align-items: center;
          align-items: center;
          -webkit-justify-content: center;
          justify-content: center;
          box-sizing: content-box;
        }

        .s-tab-title.active {
          color: #5D98F6;
          border-bottom: 1px solid #5D98F6;
        }
      }
        .content {
          margin-top: 42px;
          .left-icon{
            width: 26px;
            height: 20px;
            background-color: #E6B500;
            text-align: center;
            line-height: 18px;
            color: #FFF;
            font-size: 12px;
          }
        }
    }
</style>