要在bladex 做大屏，我们可以去下载一些大屏模板，但一般网上的模板都是纯html,如何引用框架呢？我们以vue框架为例：
1、把大屏模板放入在public ,这样方便后续直接访问。
2、把这个html引入vue框架，我这里想到的方法是放在iframe里，完整文件代码如下：
detail.vue

<template>
  <div style="height: 1000px">
    <iframe id="content_frame" ref="content_frame" name="content_frame" width="100%" height="100%" :src="src" frameborder="0"></iframe>
  </div>
</template>

<script>

import {getToken} from '@/util/auth';

export default {

name: "detail",

data() {

return {

src: "",

}

},

mounted() {

this.getSrc();

},

methods:{

/**

* 传token给大屏，也可以用iframe的通信方法

*/

getSrc(){

this.src = "/bigScreen/4/people.html?token=" +getToken();

},

}

}

</script>

<style scoped="">

</style>

其中的：/bigScreen/4/people.html就是我们放在public目录下的，我们要把登录的token送过去，后面才要去后面获取数据。
这样就得修改一下people.html内容，要去请求，修改如下：

<script src="js/jquery-3.2.0.min.js" charset="utf-8"></script>
<script type="text/javascript">
  var token = 'bearer ' + getToken() ;

$('document').ready(function () {

$("body").css('visibility', 'visible');

var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()]

localStorage.setItem("data", localData);

// 用jquery的ajax请求后台接口

$.ajax({

// 用ng代理后不用添加请求头

headers: {

'Blade-Auth': token,

},

async: false,

url: '/api/san/person/count',

type: 'GET',

success: function (res) {

var qian=res.data.split(",");

console.log(qian[1]);

$("#qianfan1").text(qianData[0]+"人");

          $("#qianfan2").text(qianData[1]+"人");
          $("#qianfan3").text(qianData[2]+"人");

      },
      error: function (res) {
          console.log(res)
      }
  })

})

function getToken() {

var query = window.location.search.substring(1);

var vars = query.split("=");

return vars[1];

}

</script>

然后配置路由：

{
  path: '/bigScreen',
  component: Layout,
  redirect: '/bigScreen/index',
  children: [{
    path: 'index',
    name: '大屏中间页',
    meta: {
      i18n: 'index'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/bigScreen/index')
   },]
},
{
  path: '/detail',
  name: '大屏展示',
  meta: {
    i18n: 'detail',
    keepAlive: true,
    isTab: false,
    isAuth: true
  },
  component: () =>
    import( /* webpackChunkName: "views" */ '@/views/bigScreen/detail')
  }

配置菜单，在界面上配置，这里就不写了。
这里有一个大屏中间页，是什么用呢？原来是因为如果不用这个，我们配置后，点击出来的大屏，是在tab里，无法全屏化，用这个可以解决（我找不出更好的办法）：
index.vue的内容如下：

<template>
  <div class="myCss">
    <div>
      <el-button @click="open">查看大屏</el-button>
    </div>
  </div>
</template>

<script>

export default {

name: "index",

created() {

this.open()

},

methods:{

open(){

let url = window.location.origin + "/#/detail"

window.open(url)

}

}

}

</script>

<style scoped="">

.myCss {

width: 100%;

height: 100%;

display: -webkit-flex; /* Safari /

-webkit-align-items: center; / Safari 7.0+ */

justify-content: center;

display: flex;

align-items: center;

}

</style>

一打开这个界面，弹出大屏出来。