<template>
  <div>
    <img class="w-full" src="@/assets/img/login/top_bg.png" />
    <div class="w-full flex flex-grow-0">
      <leftTab></leftTab>
      <div class="right">
        <div class="top">
          <img class="w15" src="@/assets/img/home/light_icon.png" />
          <span>友情提示：</span>
          <span class="text-red-600">您好，请保持安静，认真学习！</span>
        </div>
        <div class="w-full">
          <router-view></router-view>
        </div>

        <!-- <div class="content">
          <div class="w-full h754 bg-white"></div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import leftTab from "./components/leftTab/index.vue";
export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    return {
      ...toRefs(state),
    };
  },
  components: {
    leftTab,
  },
};
</script>

<style lang="scss" scoped>
.w15 {
  width: 15px;
}
.h58 {
  height: 58px;
}
.h754 {
  height: 754px;
}
.right {
  background: #f5f5f5;
  flex: 1;
  flex-shrink: 1;
  .top {
    background: #fff;
    height: 58px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    padding-left: 30px;
    flex-grow: 0;
  }
}
</style>