preliminary/src/components/TabPage.vue

<template>
  <div class="tab-wrap">
    <div class="tab" v-if="modlues&&modlues.length>0">
      <p v-for="(it,index) in modlues" :key="it.id">
        <span :class="{current:index==0}" v-if="type[it.type]==1">
          <i>{{it.type}}</i>
          {{it.name}}
        </span>
      </p> 
    </div>
    <!-- 内容 -->
    <div class="content">
      <Symptom />
    </div>
    <!-- <div class="footer">下一步</div> -->
  </div>
</template>
<script type="text/javascript">
  import Symptom from './Symptom.vue';
  export default {
    name:'TabPage',
    data(){
      let sysConfig = this.$store.state.sysConfig;
      let allMoudles = this.$store.state.allMoudles;
      return{
        config:sysConfig,
        modlues:allMoudles,
        type:{
          "1":sysConfig.filter(item=>item.code=="symptoms_show")[0].value,
          "2":sysConfig.filter(item=>item.code=="diagnosis_show")[0].value,
          "3":sysConfig.filter(item=>item.code=="omhistory_show")[0].value,
          "4":sysConfig.filter(item=>item.code=="replenish_show")[0].value,
        }
      }
    },
    created(){
      // console.log('配置信息：',this.config,'type',this.type)
    },
    components:{
      Symptom
    }
  }
</script>
<style lang="less" scoped>
  .tab-wrap{
    width: 100%;
    height: 100%;
    padding-bottom: .88rem;
    .tab{
      height: .82rem;
      line-height: .82rem;
      border-bottom: 1px solid #EDEDED;
      box-sizing: border-box;
      padding-top: .16rem;
      p{
        display: inline-block;
      }
      span{
        font-size: .24rem;
        display: inline-block;
        vertical-align: top;
        width:1.48rem;
        height: .5rem;
        line-height: .5rem;
        color: #7C828E;
        text-align: center;
        margin-left: .2rem;
        margin-right: .19rem;
      }
      .current{
        color: #0043E8;
        background: #E5ECFC;
        border-radius: 25px;
      }
    }
    .content{
      font-size: .3rem;
      padding: .45rem .6rem;
    }
    /* .footer{
      width:100%;
      height: .88rem;
      line-height: .88rem;
      color:#fff;
      font-size: .32rem;
      text-align: center;
      // background: linear-gradient(-270deg, #4F8BFF 0%, #4F4FFF 100%);
      background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
      position: fixed;
      bottom: 0;
      left: 0;
    } */
  }
</style>