jiahe_device/src/views/limsConfig/RetentionXiangq.vue

<template>
<!-- 样品管理的查看详情 -->
    <div id="header">
    <div class="next"><i class="header">查看详情</i></div>
    <figure class="figure">
      <figcaption class="figcaption">
        <i>&nbsp;&nbsp;</i>
        <span style="">详细信息</span>
      </figcaption>
      <div style="height:30px;color:black">样品名称：{{ list[0].simpleName }}</div>
        <el-descriptions v-for="(item,index) in list" :key="index" :column="3" class="descriptions" border>
            <el-descriptions-item label="样品编号:" label-class-name="my-label" content-class-name="my-content">{{ item.experieNum }}</el-descriptions-item>
            <el-descriptions-item label="原始编号:">{{ item.originalNum }}</el-descriptions-item>
            <el-descriptions-item label="是否留样:">{{item.isReagent === '0' ? "实验":"留样" }}</el-descriptions-item>
        </el-descriptions>
      <main>
        <el-button @click="xqDialogVisible()">关 闭</el-button>
      </main>
    </figure>
  </div>
</template>

<script>
export default {
    data(){
        return{
            // row查看详情
            list:[],
        }
    },
    created(){
        console.log(this.$route.query,'qqqqqqqres');
        this.list = this.$route.query.lookxqlist
        console.log(this.list,'this.liat')
    },
    methods:{
        xqDialogVisible(){
            this.$router.push({ path: "/limsConfig/RetentionSample"})
            this.$router.$avueRouter.closeTag();
        }
    },
}
</script>

<style lang="scss" scoped>
.next{
  padding-bottom: 30px;
    .header{
    color:black;
    font-size: 16px;
    font-weight: 500;
    font-style:normal;
    }
}
.figure{
  padding: 30px;
  background:white;
  width:100%;
  height:100%;
  .figcaption{
    padding-bottom:30px;
    i{
      border-left:4px solid #1E60F5;
      font-size: 16px;
    }
    span{
      color:black;
      font-size: 16px;
      line-height: 16px;
      font-weight: 600;
    }
  }
  main{
    width: 100%;
    margin: 48px 50%;
    transform: translate(-65px, 0px);
  }
}
.button{
  color: #999999;
  background-color: #fff;
  border-color: #e4e7ec;
  height: 46px;
  width: 100px;
  border-radius: 0px;

}
.button:hover {
  color: #fff;
  background-color: #1e60f5;
  border-color: #1e60f5;
  height: 46px;
  width: 100px;
  border-radius: 0px;
}
/deep/ .el-descriptions-item__label.is-bordered-label{
  width: 180px!important;
  height: 40px!important;
  padding-top: 0!important;
  padding-bottom: 0!important;
  padding-left: 16px!important;
  color: #999;
} 
/deep/ .el-descriptions-item__content{
  width: 343px!important;
  height: 40px!important;
  padding-top: 0!important;
  padding-bottom: 0!important;
  padding-left: 16px!important;
  color:black;
}
/deep/ .el-descriptions-row{
  width:100%;
}
</style>