vue safari 瀏覽器部分頁(yè)面顯示空白不報(bào)錯(cuò)BUG

正常情況是有顯示的
就是在系統(tǒng)10.13.4 瀏覽器是11.1 上這個(gè)組件頁(yè)面是這樣顯示空白也不報(bào)錯(cuò)
其他的路由組件也都能顯示

正常情況是有顯示的

<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>個(gè)人評(píng)估報(bào)告</BreadcrumbItem>
              <BreadcrumbItem>專(zhuān)業(yè)版查詢</BreadcrumbItem>
          </Breadcrumb>
          <a @click="modal1 = true" style="position:absolute;top:0;right:10px;font-size:14px;font-weight:bold;text-decoration:underline">查看報(bào)告樣例</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="請(qǐng)輸入姓名" @on-blur="replaceStr('name',formData.name)"></Input>
            </FormItem>
            <FormItem prop="idCard" label="身份證號(hào)" :label-width="80" style="width:260px">
                <Input type="text" :maxlength="18" v-model="formData.idCard" placeholder="請(qǐng)輸入18或15位身份證號(hào)" @on-blur="replaceStr('idCard',formData.idCard)"></Input>
            </FormItem>
            <FormItem prop="mobile" label="手機(jī)號(hào)" :label-width="80" style="width:260px">
                <Input type="text"   :maxlength="11" v-model="formData.mobile" placeholder="請(qǐng)輸入手機(jī)號(hào)碼"></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">專(zhuān)業(yè)版基礎(chǔ)查詢模塊</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">用戶必須授權(quán)信息<span class="mark">（以下模塊用戶必須通過(guò)<i style="color: rgb(52, 157, 238);font-style: normal;">棱鏡APP或H5網(wǎng)頁(yè)</i>進(jìn)行授權(quán)，否則無(wú)法生成報(bào)告）</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">用戶可選授權(quán)信息<span class="mark">（ 建議讓用戶通過(guò)<i style="color: rgb(52, 157, 238);font-style: normal;">棱鏡APP或H5網(wǎng)頁(yè)</i> [ 本地通訊錄只可通過(guò)APP獲取 ] 授權(quán)以下所有信息，可使報(bào)告內(nèi)容更豐富 ）</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>：若您查看過(guò)此用戶的專(zhuān)業(yè)版報(bào)告，也可在個(gè)人中心>用戶管理>個(gè)人信息中免費(fèi)查看該用戶所有最新授權(quán)信息</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"> 點(diǎn)提交后，只有當(dāng)您在用戶管理中生成了“專(zhuān)業(yè)版報(bào)告”，才會(huì)扣除相應(yīng)點(diǎn)劵</span>
    </div>

    <Modal v-model="modal1" width="70%">
        <p slot="header" style="text-align:center;font-weight:bold;font-size:16px;">
            報(bào)告樣例
        </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>

components:{MyModal},
data(){
    return{
        modal1:false,
        formData: {name: "",idCard: "",mobile: ""},
        rule:{
            name: [{ required: true, message: "您還未填寫(xiě)要查詢用戶的姓名", trigger: "blur" }],
            idCard: [{ required: true, message: "您還未填寫(xiě)要查詢用戶的身份證號(hào)", trigger: "blur" }],
            mobile: [{ required: true, message: "您還未填寫(xiě)要查詢用戶的手機(jī)號(hào)", trigger: "blur" }]
        },
        baseModule:[
            {text:"風(fēng)險(xiǎn)評(píng)分",icon:require("../../../static/imgs/icon_a_1.png"),content:"利用海量互聯(lián)網(wǎng)數(shù)據(jù)，對(duì)申請(qǐng)人風(fēng)險(xiǎn)進(jìn)行綜合評(píng)估"},
            {text:"基本信息驗(yàn)證",icon:require("../../../static/imgs/icon_a_2.png"),content:"驗(yàn)證用戶真實(shí)信息，防止盜用他人身份進(jìn)行欺詐"},
            {text:"黑灰名單識(shí)別",icon:require("../../../static/imgs/icon_a_3.png"),content:"從信貸金融、身份特征、異常行為等維度全面查詢申請(qǐng)人風(fēng)險(xiǎn)情況"},
            {text:"司法記錄查詢",icon:require("../../../static/imgs/icon_a_4.png"),content:"查詢申請(qǐng)人在全國(guó)司法系統(tǒng)中是否涉及經(jīng)濟(jì)類(lèi)案件及判決書(shū)執(zhí)行情況"},
            {text:"不良行為識(shí)別",icon:require("../../../static/imgs/icon_a_5.png"),content:"通過(guò)大數(shù)據(jù)技術(shù)搜集用戶是否涉黃賭博或是在逃犯等高風(fēng)險(xiǎn)行為特征"},
            {text:"社交關(guān)系深度分析",icon:require("../../../static/imgs/icon_a_6.png"),content:"核查用戶社交圈的風(fēng)險(xiǎn)聯(lián)系人，識(shí)別社交行為潛在風(fēng)險(xiǎn)"},
            {text:"貸款記錄多平臺(tái)查詢",icon:require("../../../static/imgs/icon_a_7.png"),content:"查詢申請(qǐng)人在各渠道的貸款情況"},
            {text:"還款詳情分析",icon:require("../../../static/imgs/icon_a_8.png"),content:"查詢申請(qǐng)人在各渠道貸款訂單的還款詳情"}
        ],
        mustModule:[],
        switchBtn:false,
        chooseModule:[],//chooseModule
        guideText:true,//引導(dǎo)授權(quán)顯示
        getDisabled:false,
        guideModal:false,
        guideTitle:"報(bào)告查詢提交成功",
        submit:{btn:false,timer:null,num:3}
    }
},//data
computed:{

},
methods:{
    //提交
    submitEvent(){
        let verifyUser = this.userVerify();
        if(verifyUser){
            //先驗(yàn)證是否開(kāi)通高級(jí)版功能--您還沒(méi)有開(kāi)通本功能，請(qǐng)聯(lián)系管理員進(jìn)行開(kāi)通
            //驗(yàn)證三要素--用戶姓名與身份證或姓名不一致，請(qǐng)檢查核對(duì)
            //驗(yàn)證是否有余額
            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(){//驗(yàn)證個(gè)人信息
       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("手機(jī)號(hào)碼格式不正確");
               return false;
           }else if(!idReg.test(this.formData.idCard)){//身份證號(hào)碼15位或18位
               this.warn("身份證號(hào)碼格式不正確");//身份證號(hào)碼為15位或者18位，15位時(shí)全為數(shù)字，18位前17位為數(shù)字，最后一位是校驗(yàn)位，可能為數(shù)字或字符X
               return false;
           }
       }
       return true;
    },
    replaceStr(attr,val){//替換
       this.formData[attr] = val.replace(/-|\s/g,'');
    },
    authText(flag){
        let text = "";
        switch(flag){
          case 0: text = "用戶未授權(quán)";break;
          case 1: text = "用戶已授權(quán)";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;//未授權(quán)--紅
    }
    .must_auth1{
      color:#4cc54c;//已授權(quán)--綠
    }
    .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>

回答

編輯回答