Untitled
unknown
plain_text
2 years ago
1.9 kB
5
Indexable
<template> <div> <MenuComponent view="analytics"></MenuComponent> <FilterAnalyticsComponent view="globalanalytics"></FilterAnalyticsComponent> <FilterComponent view="analytics-1D"></FilterComponent> <div class="container"> <div class="wrapper"> <div class="box a"> <div class="box-description"> <h4>Feedback di rinforzo</h4> </div> </div> <div class="box b"> <div class="box-description"> <h4>Feedback positivi</h4> </div> </div> <div class="box c"> <div class="box-description"> <h4>Last Feedback</h4> </div> </div> </div> </div> </div> </template> <script> import FilterComponent from '@/components/global/FilterComponent.vue' import FilterAnalyticsComponent from '../global/FilterAnalyticsComponent.vue'; import MenuComponent from '../global/MenuComponent.vue'; export default { name: 'GlobalAnalyticsComponent', components: { FilterComponent, FilterAnalyticsComponent, MenuComponent } } </script> <style scoped> .container { width: 90%; margin-left: 5%; margin-right: 5%; margin-top: 20px; } .wrapper { display: grid; grid-template-columns: auto auto; grid-gap: 40px; } .box { color: #fff; border-radius: 4px; font-size: 13px; text-align: left; height: 150px; 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>
Editor is loading...