<template>
    <div class="msdsInfo">
      <div class="title-box">
        <p>{{dialogData.dialogTitle}}</p>
        <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
      </div>
      <div class="msdsInfo-page scrollbar-box">
        <div class="w-e-text-min-box">
          <p>化学品名称：</p>
          <p>{{dialogData.name}}</p>
        </div>
        <div class="w-e-text-min-box">
          <p>说明书编号：</p>
          <p>{{dialogData.code}}</p>
        </div>
        <div class="w-e-text-min-box-one">
          <p>说明书详情：</p>
          <p class="w-e-text" v-html="dialogData.content"></p>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "msdsInfo",
    props:{
      dialogData:{},
    },
    methods:{
      backPage(){
        this.$parent.lookItem(false);
      },
    },
  }
</script>

<style scoped lang="scss">
  .msdsInfo{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-weight:500;
    p{
      margin:0;
      padding:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin:25px 25px 0 0;
      }
    }
    .msdsInfo-page{
      flex:1;
      display: flex;
      flex-direction: column;
      padding:20px;
    }
  }
</style>
<style lang="scss">
  .msdsInfo{
    .el-table th > .cell{
      .el-checkbox{
        display: none;
      }
    }
    .w-e-text-min-box{
      display: flex;
      margin-bottom:20px;
      p{
        height:20px;
        line-height:20px;
      }
    }
    .w-e-text-min-box-one{
      display: flex;
    }
    .w-e-text{
      flex:1;
    }
    .w-e-text.table::-webkit-scrollbar{
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    .w-e-text.table::-webkit-scrollbar-thumb{
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #999;
      background: #fff;
    }
    .w-e-text.table::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
      border-radius: 0;
      background: rgba(255,255,255,0);
    }
  }
</style>
