preliminary/src/components/Others.vue

<template>
  <div class="other-wrap">
    <div v-for="(it,i) in datas.moduleDetailDTOList" 
        v-if="datas&&datas.moduleDetailDTOList"
        :key="it.id">
      <div class="label" v-if="it.controlType==0">
        <p class="quest">{{it.name}}</p>
        <span class="symp" v-for="item in it.questionMapping">{{item.name}}</span>
      </div>
    </div>
    <div class="result">
      <p class="title">其他病史</p>
      <p>结果</p>
    </div>
    <div class="foot">
      <span class="back" @click="beBack">{{'返回'+ preName}}</span>
      <span class="next" @click="toNext">{{'进入'+ nextName}}</span>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    name:'Others',
    data(){
      return{
        msg:"诊疗情况",
        chooseSymp:[{name:'未治疗'}]
      }
    },
    props:['datas','preName','nextName'],
    methods:{
      beBack(){
        this.$emit('back');
      },
      toNext(){
        this.$emit('next');
      }
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .other-wrap{
    font-size: .3rem;
    .quest{
      color: #000;
      margin-bottom: .36rem;
      font-weight: 700;
    }
    .label{
      padding-bottom: .2rem;
      .symp{
        display: inline-block;
        width:1.9rem;
        height: .74rem;
        line-height: .74rem;
        border: 1px solid #DFE0E4;
        border-radius: .08rem;
        text-align: center;
        color: #7C828E;
        margin: 0 0 .3rem .3rem;
        box-sizing: border-box;
      }
      .symp:nth-child(3n+2){
        margin-left: 0;
      }
    }
    .result{
      .title{
        color: #4F50FF;
        padding-left: .1rem;
        border-left: .08rem solid #4F50FF;
        margin-bottom: .19rem;
        font-weight: 700;
      }
      p{
        color: #666;
        line-height: .44rem;
      }
    }
  }
  .foot{
    .dbfooter;
  }
  
</style>