<!--
      detailsPage: resolve => {require(['@/components/detailsPage'], resolve)},//详情组件

    <div class="big-max-box" v-if="detailsType==0">
    </div>

  .big-max-box
    height:100%;
    width:100%;


组件示例
      <details-page :dataInfo="dataInfo" v-if="detailsType==1"></details-page>
必要参数
      // 详情页状态
      detailsType:0,
      //给组件传参数据
      dataInfo:[],
调用方法
      demo(){
          this.dataInfo =[
            {
              name:"敏感词汇",
              value:row.sensitive,
              color:"#ff6b6a",
            },
            {
              name:"备注",
              value:row.text,
            },
            {
              name:"创建人姓名",
              value:row.name,
            },
            {
              name:"创建时间",
              value:row.createTime,
            },
            {
              name:"创建时间",
              value:row.createTime,
              forType:true,//名称无冒号声明
            },
            {
              name:"创建时间",
              value:row.createTime,
              forType:true,//名称无冒号声明
              borderType:true,//样式声明
            },
          ]
          this.detailsType = 1;
      },
必要方法

      //供子组件调用方法
      outPage(){
        this.detailsType = 0;
      },


-->

<template>
  <div class="max-big-box">
    <!--返回按钮-->
    <div class="out-page-button cursor_pointer" @click="outButton">
      <img src="~@/assets/images/icon_25.png">
      <p>返回</p>
    </div>
    <div class="info-box">
      <div class="info-title">
        <img src="~@/assets/images/xian_1.png">
        <p>详细信息</p>
        <img src="~@/assets/images/xian_2.png">
      </div>
      <div class="info-max-box TabStrip">
        <div class="info-for-box" v-for="(item,index) in newData" :key="index">
          <p v-if="!item.forType">{{item.name}}：</p>
          <p v-if="item.forType">{{item.name}}</p>
          <img :src="item.img" v-if="item.img">
          <p v-if="item.color&&!item.img" :style="'color:'+item.color+'!important;'">{{item.value}}</p>
          <p :class="{'right-p-class':item.borderType}" v-if="!item.color&&!item.img">{{item.value}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "detailsPage",//详情组件
    props:["dataInfo"],
    data () {
      return {
        newData:[],
      }
    },

    created(){
      this.newData = [...this.dataInfo];
    },
    mounted() {

    },
    methods: {
      outButton(){
        this.$parent.outPage();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    //返回按钮
    .out-page-button
      height:30px;
      width:93px;
      margin:27px 0 0 106px;
      background:url("~@/assets/images/button_02.png");
      background-size 100% 100%
      display flex
      img
        display block
        height:12px;
        width:7px;
        margin:9px 10px 0 22px;
      p
        line-height:30px;
        font-size:$font_12;
        color:$color_ff;
        text-align left
    .info-box
      height:670px;
      width:1000px;
      margin:50px 456px 44px;
      background:url("~@/assets/images/min_back_04.png");
      background-size 100% 100%
      .info-title
        display flex
        height:74px;
        width:300px;
        margin:0 auto 30px;
        img
          display block
          height:1px;
          width:76px;
          margin-top:38px;
        p
          width:148px;
          line-height 74px
          font-size $font_20
          color:$theme;
      .info-max-box
        height:500px;
        width:840px;
        margin:0 auto;
        overflow-x:hidden;
        overflow-y:scroll;
        /*white-space: nowrap;*/
        .info-for-box
          display flex
          width:820px;
          p
            padding:10px 0;
            text-align left
            line-height:20px;
            font-size:$font_17;
            word-wrap:break-word !important;
            word-break:break-all;
            overflow: hidden;
          p:nth-child(1)
            width:240px;
            color:$theme;
            text-align right
            margin-right:20px;
          p:nth-child(2)
            width:560px;
            color:$color_ff;
          img
            display block
            height:100px;
            width:100px;
            margin:10px 0;
          .right-p-class
            width:70px !important;
            color:$color_33 !important;
            text-align center
            background:$color_ff;
            border-radius:4px;
            padding:4px 0;
            margin-top:5px;
</style>
