FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/usageRecord/infoPage.vue

<template>
    <div class="infoPage">
      <div class="title-box">
        <p>使用详情</p>
        <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
      </div>
      <div class="infoPage-max-box">
        <div class="infoPage-left-box scrollbar-box">
          <div class="infoPage-left-text-box-one">
            <div>
              <p>化学品名称：</p>
              <p></p>
            </div>
            <div>
              <p>化学品编号：</p>
              <p></p>
            </div>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>CAS：</p>
              <p></p>
            </div>
            <div>
              <p>别名：</p>
              <p></p>
            </div>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>化学品分类：</p>
              <p></p>
            </div>
            <div>
              <p>纯度：</p>
              <p></p>
            </div>
          </div>
          <div class="infoPage-left-text-box-two">
            <p>形态：</p>
            <p></p>
          </div>
          <div class="infoPage-left-text-box-two">
            <p>属性：</p>
            <p></p>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>标签类型：</p>
              <p></p>
            </div>
            <div>
              <p>标签编号：</p>
              <p></p>
            </div>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>容量规格：</p>
              <p></p>
            </div>
            <div>
              <p>容器规格：</p>
              <p></p>
            </div>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>过期时间：</p>
              <p></p>
            </div>
            <div>
              <p>领用时效：</p>
              <p></p>
            </div>
          </div>
          <div class="infoPage-left-text-box-two">
            <p>化学品柜：</p>
            <p></p>
          </div>
          <div class="infoPage-left-text-box-two">
            <p>所在位置：</p>
            <p></p>
          </div>
        </div>
        <div class="infoPage-right-box scrollbar-box">
          <p class="infoPage-right-title">当前使用状态：aaaaaaaaaaaaaa</p>
          <div class="infoPage-right-data-box">
            <div class="title-button-max-box">
              <p></p>
              <p>领用</p>
              <p>2022-06-09 10:12:22</p>
              <p class="inquire-button-one" @click="lockVideo">操作视频</p>
            </div>
            <div class="table-title-box">
              <p>领用时净重</p>
              <p>损耗量</p>
              <p>领用净重</p>
              <p>操作人</p>
              <p>双人验证</p>
              <p>称重方式</p>
            </div>
            <div class="table-list-box">
              <p>100g</p>
              <p>100g</p>
              <p>100g</p>
              <p>100g</p>
              <p>100g</p>
              <p>100g</p>
            </div>
          </div>
          <div class="infoPage-right-data-box">
            <div class="title-button-max-box">
              <p></p>
              <p>归还</p>
              <p>2022-06-09 10:12:22</p>
              <p class="inquire-button-one" @click="lockVideo">操作视频</p>
            </div>
            <div class="table-title-box">
              <p>领用时净重</p>
              <p>损耗量</p>
              <p>领用净重</p>
              <p>操作人</p>
              <p>双人验证</p>
              <p>称重方式</p>
            </div>
            <div class="table-list-box">
              <p>100g</p>
              <p>100g</p>
              <p>100g</p>
              <p>100g</p>
              <p>100g</p>
              <p>100g</p>
            </div>
          </div>
        </div>
      </div>
      <el-dialog title="操作视频" :visible.sync="videoType" v-if="videoType"
                 width="840px" append-to-body id="operationRecord-dialog-box">
        <video style="width:800px;height:450px;" controls="" autoplay="" name="media" :poster="videoCover">
          <source :src="videoData.url" type="video/mp4">
        </video>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "infoPage",
    props:{
      infoData:{},
    },
    data(){
      return {
        videoType:false,
        videoData:{},
      }
    },
    created() {

    },
    mounted(){

    },
    methods: {
      //视频按钮
      lockVideo(type,row){
        let obj = {
          // type:type,
          // url:row.unLockVideo
        }
        this.$set(this,'videoData',obj);
        this.videoType = true;
      },
      backPage(){
        this.$parent.goPageInfo(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .infoPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    p{
      margin: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;
      }
    }
    .infoPage-max-box{
      flex:1;
      display: flex;
      overflow: hidden;
      font-weight: 500;
      .infoPage-left-box{
        flex:1;
        margin:44px 22px 37px 80px;
        padding:13px 0;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        .infoPage-left-text-box-one{
          display: flex;
          div{
            flex:1;
            display: flex;
            p{
              font-size:14px;
              line-height:56px;
            }
            p:nth-child(1){
              color:#333;
              text-align: right;
              width:116px;
            }
            p:nth-child(2){
              color:#666;
              flex:1;
            }
          }
        }
        .infoPage-left-text-box-two{
          display: flex;
          p{
            font-size:14px;
            line-height:56px;
          }
          p:nth-child(1){
            color:#333;
            text-align: right;
            width:116px;
          }
          p:nth-child(2){
            color:#666;
            flex:1;
          }
        }
      }
      .infoPage-right-box{
        width:839px;
        margin:44px 80px 37px 0;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        .infoPage-right-title{
          line-height:60px;
          margin:0 24px;
          font-size:16px;
        }
        .infoPage-right-data-box{
          width:792px;
          margin:0 auto;
          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
          padding-bottom:22px;
          border-radius:10px;
          margin-bottom:21px;
          .title-button-max-box{
            width:755px;
            margin:0 auto;
            height:80px;
            display: flex;
            font-size:16px;
            p:nth-child(1){
              background: #0045AF;
              width:3px;
              height:14px;
              margin:33px 0;
              margin-right:12px;
              margin-left:7px;
            }
            p:nth-child(2){
              line-height:80px;
              margin-right:27px;
            }
            p:nth-child(3){
              line-height:80px;
              flex:1;
            }
            p:nth-child(4){
              width:100px;
              line-height:40px;
              margin:20px 10px 0 0;
            }
          }
          .table-title-box{
            width:755px;
            height:60px;
            background: #f5f5f5;
            margin:0 auto;
            display: flex;
            p{
              color:#333;
              font-size:16px;
              line-height:60px;
            }
            p:nth-child(1){
              text-align: center;
              width:130px;
            }
            p:nth-child(2){
              text-align: center;
              width:108px;
            }
            p:nth-child(3){
              text-align: center;
              width:118px;
            }
            p:nth-child(4){
              text-align: center;
              width:132px;
            }
            p:nth-child(5){
              text-align: center;
              width:136px;
            }
            p:nth-child(6){
              text-align: center;
              width:131px;
            }
          }
          .table-list-box{
            width:755px;
            height:70px;
            border:1px solid #e0e0e0;
            margin:0 auto;
            display: flex;
            p{
              color:#333;
              font-size:16px;
              line-height:70px;
            }
            p:nth-child(1){
              text-align: center;
              width:130px;
            }
            p:nth-child(2){
              text-align: center;
              width:108px;
            }
            p:nth-child(3){
              text-align: center;
              width:118px;
            }
            p:nth-child(4){
              text-align: center;
              width:132px;
            }
            p:nth-child(5){
              text-align: center;
              width:136px;
            }
            p:nth-child(6){
              text-align: center;
              width:131px;
            }
          }
        }
      }
    }
  }
</style>