Untitled

<template>
  <div>
    <MenuComponent view="analytics" />
    <FilterAnalyticsComponent view="useranalytics"></FilterAnalyticsComponent>
    <SearchbarComponent></SearchbarComponent>
    <FilterComponent view="analytics-1D"></FilterComponent>
    <div class="container">
      <div class="wrapper">
        <div class="box a">
          <div class="box-description">
            <h4 style="font-weight: bold;">MANAGER</h4>
            <ManagerBoxComponent></ManagerBoxComponent>
          </div>

        </div>
        <div class="box b">
          <div class="box-description">
            <h4 style="font-weight: bold;">TEAM</h4>
            <RefearTeamBoxComponent></RefearTeamBoxComponent>
          </div>
        </div>

        <div class="box c">
          <div class="box-description">
            <h4 style="font-weight: bold;">ATTIVITA'</h4>
            <ActivityBoxComponent></ActivityBoxComponent>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FilterComponent from '@/components/global/FilterComponent.vue'
import MenuComponent from '@/components/global/MenuComponent.vue'
import FilterAnalyticsComponent from '@/components/global/FilterAnalyticsComponent.vue';
import SearchbarComponent from '@/components/global/SearchbarComponent.vue'
import ManagerBoxComponent from '@/components/useranalytics-view/ManagerBoxComponent.vue';
import RefearTeamBoxComponent from '@/components/useranalytics-view/RefearTeamBoxComponent.vue';
import ActivityBoxComponent from '@/components/useranalytics-view/ActivityBoxComponent.vue';

export default {
  name: 'UserAnalyticsComponent',
  components: {
    MenuComponent,
    FilterComponent,
    FilterAnalyticsComponent,
    SearchbarComponent,
    ManagerBoxComponent,
    RefearTeamBoxComponent,
    ActivityBoxComponent
  }
}
</script>

<style scoped>
.container {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-gap: 40px;
}

.box {
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  text-align: left;
  height: auto;
  background-color: #F9F9F9;

}

.box-description {
  color: #ec8c6c;
  margin: 10px;
}

.a {
  grid-column: 1/2;
  grid-row: 1/2;
}

.b {
  grid-column: 2/3;
  grid-row: 1/2;
}

.c {
  grid-column: 1/3;
  grid-row: 2/3;
}


@media (max-width: 720px) {
  .container {
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 20px;
  }

  .a {
    grid-column: 1/3;
    grid-row: 1/2;
  }

  .b {
    grid-column: 1/3;
    grid-row: 2/3;
  }

  .c {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}
</style>