diantou/src_custom/performance-tracking/xm-todolist-detail.vue

<template>
  <div>
    <div :class="$style.wrapbackground">
      <a-layout-header :class="$style.header">
        <div :class="$style.logo" />
        <div :class="$style.title">关键用户使用体验监测</div>
      </a-layout-header>
    </div>
    <div><user-todolist :class="$style.wrap"></user-todolist></div>
  </div>
</template>

<script>
import components from './_import-components/xm-todolist-detail-import'
import UserTodolist from './xm-user-todolist.vue'
export default {
  name: 'XmTodolistDetail',
  metaInfo: {
    title: 'TodolistDetail',
  },
  components: {
    ...components,
    'user-todolist': UserTodolist,
  },
  data() {
    return {}
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.logo {
  float: left;
  width: 256px;
  height: 100%;
  background: url('~@custom/images/logo.png') no-repeat center;
}
.title {
  display: inline-block;
  float: left;
  height: 100%;
  font-size: $heading-4-size;
}
.right {
  float: right;
}
.wrapbackground {
  height: 100%;
  background: #01267b;
}
.header {
  &:global(.ant-layout-header) {
    padding: 0 20px 0 0;
    color: $text-color-inverse;
    background: $primary-10;
  }
  :global(.ant-btn-link) {
    color: $white;
    &:hover {
      color: $primary-2;
    }
    &:active {
      background-color: $disabled-color-dark;
    }
  }
}
body {
  background: #01267b;
}
.customwrap {
  height: 100%;
  overflow: scroll;
}
.wrap {
  height: 88%;
}
.box_xm-user-todolist_custom {
  height: 100%;
}
</style>