<template>
  <div class="data_container">
    <a-breadcrumb class="newBreadcrumb mt0 mb16">
      <a-breadcrumb-item href>
        <router-link :to="{name:'merchantBack'}">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>数据大屏</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="bodyContainer">
      <a-button class="newScreen">
        <router-link target="_blank" to="/largeScreen">新窗口打开</router-link>
      </a-button>
      <largeScreen></largeScreen>
    </div>
  </div>
</template>

<script>
import largeScreen from '../screen/largeScreen.vue'
export default {
  // 组件名称
  name: 'dataScreen',
  // 局部注册的组件
  components: {
    largeScreen,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {}
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.$emit('setTitle', '数据大屏')
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {},
}
</script>

<style scoped lang="less">
.data_container {
  height: 100%;
}
.bodyContainer {
  padding-top: 64px;
  position: relative;
}
.newScreen {
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: 14px;
  color: #fff;
  background-color: #fff;
  border: none;
  // width: 92px;
  padding: 0 12px;
  height: 24px;
  background: #1890ff;
  border-radius: 4px;
}
</style>
