/** * @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>