<template>
  <div class="tiondesk">
    <div class="left_tiondesk">
      <div class="flex_spection">
        <HeadlineTag value="会议议程"></HeadlineTag>
        <div class="box_arch">
          <conference></conference>
        </div>
      </div>
      <div class="flex_spection">
        <HeadlineTag value="学员反馈"></HeadlineTag>
        <div class="box_arch">
          <gambit></gambit>
        </div>
      </div>
      <div class="flex_spection">
        <HeadlineTag value="会议话题总数"></HeadlineTag>
        <div class="box_arch">
          <feedback></feedback>
        </div>
      </div>
    </div>
    <div class="right_tiondesk">
      <div class="flex_spection">
        <HeadlineTag type="right" value="竞争对手"></HeadlineTag>
        <div class="box_arch">
          <wordcloud></wordcloud>
        </div>
      </div>
      <div class="flex_spection">
        <HeadlineTag type="right" value="过去30天会议"></HeadlineTag>
        <div class="box_arch">
          <formerly></formerly>
        </div>
      </div>
      <div class="flex_spection">
        <HeadlineTag type="right" value="课程满意度评分条形图"></HeadlineTag>
        <div class="box_arch">
          <satisfaction></satisfaction>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeadlineTag from '@/components/HeadlineTag'
import conference from './conference'
import feedback from './feedback'
import gambit from './gambit'
import wordcloud from './wordcloud'
import formerly from './formerly'
import satisfaction from './satisfaction'
</script>

<style scoped lang="scss">
.tiondesk {
  position: relative;
  width: 100%;
  padding-top: 45px;
  height: 100%;
  overflow: hidden;
}

.left_tiondesk {
  position: absolute;
  left: 0;
  width: 25%;
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}

.right_tiondesk {
  position: absolute;
  right: 0;
  width: 25%;
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
}

.flex_spection {
  flex: 1;
  color: #fff;
}

.box_arch {
  display: flex;
  align-items: center;
  height: calc(100% - 40px);
}
</style>
