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 v-for="item in it.questionMapping" :class="['symp',{'over':item.name&&item.name.length>5}]">{{item.name}}</span> -->
        <span v-for="item in it.questionMapping" class="symp">{{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{
      .label;
    }
    .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>