vue safari 浏览器部分页面显示空白不报错BUG

Question

正常情况是有显示的
就是在 系统10.13.4 浏览器 是11.1 上这个组件页面是这样显示空白 也不报错
其他的路由组件也都能显示

正常情况是有显示的

<template lang="html">

<div id="advance">
    <div class="ad_content white">
        <div style="position:relative;overflow:hidden;clear:both">
          <a class="go_back" @click="back()"></a>
          <Breadcrumb separator=">" style="float:left">
              <BreadcrumbItem>个人评估报告</BreadcrumbItem>
              <BreadcrumbItem>专业版查询</BreadcrumbItem>
          </Breadcrumb>
          <a @click="modal1 = true" style="position:absolute;top:0;right:10px;font-size:14px;font-weight:bold;text-decoration:underline">查看报告样例</a>
        </div>
        <div class="hr" style="margin:10px 0 40px"></div>
        <Form ref="formInline" :model="formData" :rules="rule" inline>
            <FormItem prop="name" label="姓名" :label-width="80" style="width:260px">
                <Input type="text" v-model="formData.name"  placeholder="请输入姓名" @on-blur="replaceStr('name',formData.name)"></Input>
            </FormItem>
            <FormItem prop="idCard" label="身份证号" :label-width="80" style="width:260px">
                <Input type="text" :maxlength="18" v-model="formData.idCard" placeholder="请输入18或15位身份证号" @on-blur="replaceStr('idCard',formData.idCard)"></Input>
            </FormItem>
            <FormItem prop="mobile" label="手机号" :label-width="80" style="width:260px">
                <Input type="text"   :maxlength="11" v-model="formData.mobile" placeholder="请输入手机号码"></Input>
            </FormItem>
        </Form>
        <div class="hr" style="margin-top:10px"></div>
    </div>
    <div class="ad_content white base_module">
         <div class="ad_title"><h1 class="headline">专业版基础查询模块</h1></div>
         <Row style="padding:10px;">
           <div v-for="(item,index) in baseModule" :key="index">
              <Col span="10" style="margin-bottom:30px;margin-right:5%">
                  <Card shadow style="overflow:hidden;clear:both">
                      <p slot="title" style="color:#349dee"><img :src="item.icon" style="height:24px;vertical-align:middle;margin:-5px 8px 0 0" />{{item.text}}<span :class="'must_auth_'+item.auth">{{authText(item.auth)}}</span></p>
                      <p class="mt_8" v-text="item.content"></p>
                  </Card>
              </Col>
          </div>
        </Row>
        <div class="hr"></div>
    </div>
    <div class="ad_content white must_module">
         <div class="ad_title"><h1 class="headline must_auth">用户必须授权信息<span class="mark">（以下模块用户必须通过<i style="color: rgb(52, 157, 238);font-style: normal;">棱镜APP或H5网页</i>进行授权，否则无法生成报告）</span></h1></div>
         <Row style="padding:10px">
             <Col span="10" v-for="(item,index) in mustModule" :key="index" style="margin-right:5%">
                 <div>
                     <Card :bordered="true" shadow >
                       <p slot="title" style="color:#349dee"><img :src="item.icon" style="height:24px;vertical-align:middle;margin:-5px 8px 0 0" />{{item.platform+'信息'}}</p>
                       <p class="mt_8">{{item.remark}}</p>
                     </Card>
                 </div>
             </Col>
         </Row>
    </div>
    <div class="ad_content white choose_module">
         <div class="hr" style="margin:20px 0"></div>
         <div class="ad_title"><h1 class="headline">用户可选授权信息<span class="mark">（ 建议让用户通过<i style="color: rgb(52, 157, 238);font-style: normal;">棱镜APP或H5网页</i> [ 本地通讯录只可通过APP获取 ] 授权以下所有信息，可使报告内容更丰富 ）</span></h1></div>
         <Row style="padding:10px">
             <div v-for="(item,index) in chooseModule" :key="index">
                 <Col span="10" style="margin-right:5%;margin-bottom:30px;">
                     <Card shadow>
                         <p slot="title" style="color:#349dee;"><img :src="item.icon" style="height:24px;vertical-align:middle;margin:-5px 8px 0 0"/>{{item.platform+'信息'}}</p>
                         <p class="mt_8" v-text="item.remark"></p>
                     </Card>
                 </Col>
             </div>
         </Row>
         <p style="font-size:14px"><strong>注</strong>：若您查看过此用户的专业版报告，也可在个人中心>用户管理>个人信息中免费查看该用户所有最新授权信息</p>
         <div class="hr" style="margin-top:40px"></div>
          <Button type="primary" size="large" :class="{'disa':!formData.name||!formData.idCard||!formData.mobile}" :disabled="submit.btn"  @click="submitEvent" style="margin:50px 0;width:140px">{{submit.btn?submit.num+"s":'提交'}}</Button> <span class="mark"> 点提交后，只有当您在用户管理中生成了“专业版报告”，才会扣除相应点劵</span>
    </div>

    <Modal v-model="modal1" width="70%">
        <p slot="header" style="text-align:center;font-weight:bold;font-size:16px;">
            报告样例
        </p>
        <div  >
          <img src="../../../static/imgs/advance.jpg" width="100%" >
        </div>
        <div slot="footer"></div>
    </Modal>

    <my-modal :guideModals="guideModal" :guideTitle="guideTitle" :userDatas="formData" @closeGuide="closeGuide"></my-modal>

</div>

</template>

<script>
import MyModal from '../common/authModal.vue';
export default {

components:{MyModal},
data(){
    return{
        modal1:false,
        formData: {name: "",idCard: "",mobile: ""},
        rule:{
            name: [{ required: true, message: "您还未填写要查询用户的姓名", trigger: "blur" }],
            idCard: [{ required: true, message: "您还未填写要查询用户的身份证号", trigger: "blur" }],
            mobile: [{ required: true, message: "您还未填写要查询用户的手机号", trigger: "blur" }]
        },
        baseModule:[
            {text:"风险评分",icon:require("../../../static/imgs/icon_a_1.png"),content:"利用海量互联网数据，对申请人风险进行综合评估"},
            {text:"基本信息验证",icon:require("../../../static/imgs/icon_a_2.png"),content:"验证用户真实信息，防止盗用他人身份进行欺诈"},
            {text:"黑灰名单识别",icon:require("../../../static/imgs/icon_a_3.png"),content:"从信贷金融、身份特征、异常行为等维度全面查询申请人风险情况"},
            {text:"司法记录查询",icon:require("../../../static/imgs/icon_a_4.png"),content:"查询申请人在全国司法系统中是否涉及经济类案件及判决书执行情况"},
            {text:"不良行为识别",icon:require("../../../static/imgs/icon_a_5.png"),content:"通过大数据技术搜集用户是否涉黄赌博或是在逃犯等高风险行为特征"},
            {text:"社交关系深度分析",icon:require("../../../static/imgs/icon_a_6.png"),content:"核查用户社交圈的风险联系人，识别社交行为潜在风险"},
            {text:"贷款记录多平台查询",icon:require("../../../static/imgs/icon_a_7.png"),content:"查询申请人在各渠道的贷款情况"},
            {text:"还款详情分析",icon:require("../../../static/imgs/icon_a_8.png"),content:"查询申请人在各渠道贷款订单的还款详情"}
        ],
        mustModule:[],
        switchBtn:false,
        chooseModule:[],//chooseModule
        guideText:true,//引导授权显示
        getDisabled:false,
        guideModal:false,
        guideTitle:"报告查询提交成功",
        submit:{btn:false,timer:null,num:3}
    }
},//data
computed:{

},
methods:{
    //提交
    submitEvent(){
        let verifyUser = this.userVerify();
        if(verifyUser){
            //先验证是否开通高级版功能--您还没有开通本功能，请联系管理员进行开通
            //验证三要素--用户姓名与身份证或姓名不一致，请检查核对
            //验证是否有余额
            const url = this.__WEBSERVERURL__+'/user/report/apply';
            const params = {
                type:'gjb',
                name:this.formData.name,
                certNo:this.formData.idCard,
                mobile:this.formData.mobile
            };

            this.$httpData(url,params,(res)=>{
                 this.formData = {name: params.name,idCard: params.certNo,mobile:params.mobile};
                 this.guideModal = true;
            });

        }
    },
    userVerify(){//验证个人信息
       const _self = this;
       const telReg = /^[1][0-9]{10}$/;
       const idReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
       for(var i in this.formData){
           if(!this.formData[i]){
               this.warn(_self.rule[i][0].message);
               return false;
           }else if(!telReg.test(this.formData.mobile)){
               this.warn("手机号码格式不正确");
               return false;
           }else if(!idReg.test(this.formData.idCard)){//身份证号码15位或18位
               this.warn("身份证号码格式不正确");//身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
               return false;
           }
       }
       return true;
    },
    replaceStr(attr,val){//替换
       this.formData[attr] = val.replace(/-|\s/g,'');
    },
    authText(flag){
        let text = "";
        switch(flag){
          case 0: text = "用户未授权";break;
          case 1: text = "用户已授权";break;
        }
        return text;
    },
    closeGuide(attr){
       this.guideModal = attr;
    },
    chooseStatus(flag){
      for(var i in this.chooseModule){
          this.chooseModule[i].choose = flag;
      }
    },
    warn(c){
        this.$Message.warning({
          content: c,
          duration: 3,
          closable: true
        });
    }
},
mounted(){
  const url = this.__WEBSERVERURL__+'/platform/list';
//   const url = 'api/mock/4c0fdc85afc6c0f01766671f4f13ace3/platform/list'
  this.$httpData(url,{},(res)=>{
     this.chooseModule = res.data.noMustAuth;
     for(var i in res.data.noMustAuth){
       this.chooseModule[i].icon = require("../../../static/imgs/icon_"+res.data.noMustAuth[i].type+".png");
     }
     this.mustModule = res.data.mustAuth;
     for(var i in res.data.mustAuth){
          this.mustModule[i].icon = require("../../../static/imgs/icon_"+res.data.mustAuth[i].type+".png");
     }
  });
}

}
</script>
<style lang="stylus">

advance{

.ivu-col-span-10{

  max-width: 220px;
  .ivu-card{
     .mt_8{
        padding-left:30px;
        color:#878c9f;
     }
  }

}
.ivu-form .ivu-form-item-label{

  font-size:14px;

}
.ivu-input{

    font-size:14px;

}
.base_module{

.ivu-col-span-10{
    .ivu-card{
       height:125px;
    }
}

}
}

</style>
<style lang="stylus" scoped>
$g_g=#b3b9c7;
.white{
background:#fff;
}
.pd_10{

padding-left:10px;

}
.ivu-card-shadow{
cursor:pointer;
box-shadow:0px 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.ivu-switch{

margin-left:20px;

}

guideAuth{

.send_msg{

  margin-left:40px;

}
.disa{

   background:#ccc!important;
   color:#fff;

}
}

advance{

 .mark{
   color:$g_g;
   font-size:13px;
   font-weight:bold;
   margin-left:10px;
 }
 .disa{
   background:#ccc;
   border-color:#ccc;
 }
.headline {
  font-size: 16px;
  font-weight: 800;
  border-bottom:none;
  margin-bottom:10px;
  padding-left:0;
  &.must_auth::before{
      content: '*';
      display: inline-block;
      margin-right: 4px;
      line-height: 1;
      font-family: SimSun;
      font-size: 12px;
      color: #ed3f14;
  }
  .exep{
    display: inline-block;
    float:right;
    text-align:center;
    margin-top: 10px;
    background-color: #2b85e4;
    height: 36px;
    font-size: 14px;
    line-height: 36px;
    color: #fff;
    width: 130px;
    border-radius: 18px;
    cursor: pointer;
  }
}
.ad_content{
    padding:20px 25px 0;
    border-radius:4px;
    .must_auth0{
      color:red;//未授权--红
    }
    .must_auth1{
      color:#4cc54c;//已授权--绿
    }
    .choose_y{
        background:url("../../../static/imgs/y.png") no-repeat right top;
    }
    &.base_module{
        ul{
            li{
                display:inline-block;
                width:260px;
                font-size:15px;
                line-height:30px;
                margin-bottom:10px;
            }
        }
    }//base_module
    &.must_module{

    }//must_module
    &.choose_module{
        .ivu-col-offset-2{
           margin-left:0!important;
           margin-right:8.333%!important;
           margin-bottom:30px!important;
        }
    }
}//ad_content
.ad_footer{
  text-align:center;
  padding:30px 0;
  p{
    padding:10px;
    font-size:14px;
    a{
       text-decoration:underline;
    }
  }
  button{
     padding:8px 20px;
  }
}

}
</style>

Answer 1

看看能否解决：http://www.fly63.com/article/...