/**
* @Author Sean
* @Date 2019/4/29
*/
<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 :proportion="[5,1]" v-for="(list,index) in [0,1,2,3]" :key="index" class="indusItem">
              <div slot="name">
                <div class="cont-name">DevEco标志</div>
                <div class="cont-name">类型:<span class="fontColor">&nbsp;&nbsp;F美术</span></div>
                <div class="cont-name">登记号:<span class="fontColor">&nbsp;&nbsp;粤作登字-2016-F-0017806</span></div>
                <div class="cont-name">登记日期:<span class="fontColor">&nbsp;&nbsp;2016-08-10</span></div>
                <div class="cont-name">发布日期:<span class="fontColor">&nbsp;&nbsp;2016-04-12</span></div>
                <div class="cont-name">创作完成日期:<span class="fontColor">&nbsp;&nbsp;2016-04-11</span></div>
              </div>
            </item>
          </list-item>

          <list-item v-show="index[1]">
            <item :proportion="[5,1]" v-for="(list,index) in [0,1,2,3]" :key="index" class="indusItem">
              <div slot="name">
                <div class="cont-name">华为通用PaaS平台软件</div>
                <div class="cont-name">登记号:<span class="fontColor">&nbsp;&nbsp;2017SR262768</span></div>
                <div class="cont-name">分类号:<span class="fontColor">&nbsp;&nbsp;30200-0000</span></div>
                <div class="cont-name">登记日期:<span class="fontColor">&nbsp;&nbsp;2016-08-10</span></div>
              </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;
          .fontColor{
            color: #9D9D9D;
          }
          .indusItem{
            padding: 10px;
          }
        }
    }
</style>
