Sistema em vue
<template> <div class="box"> <div class="row "> <div class="col-sm-2"> <div class="row; col-sm-3">Filtros</div> </div> <div class="col-sm-2">Quantidade de horas</div> <div class="col-sm-2">Telas Online</div> <div class="col-sm-6"> <b-tabs content-class="mt-3" align="center"> <b-tab title="Dashboard" active> <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts> <button @click="load">load</button> </b-tab> <b-tab title="Mapa"><p>Segundo tab</p></b-tab> </b-tabs> </div> </div> <div class="row"> <div class="col-sm-2"> <select v-model="filtro.campanha" style="width: auto;" class="form-control form-filtro"> <option value="" selected>Número da campanha</option> <option v-for="item in campanhas" :key="item.idCampanha" v-bind:value="item.idCampanha"> {{ item.idCampanha }} </option> </select> </div> <div class="col-sm-2">50</div> <div class="col-sm-2">10</div> </div> <div class="row"> <div class="col-sm-2"> <input v-model="filtro.investimento" @keyup.enter="doFilter" type="text" class="form-control form-filtro" placeholder="Investimento"> </div> <div class="col-sm-2">Número de visualizações</div> <div class="col-sm-2">OTS</div> </div> <div class="row"> <div class="col-sm-2"> <input v-model="filtro.numeroCorrida" @keyup.enter="doFilter" type="text" class="form-control form-filtro" placeholder="Número da corrida"> </div> <div class="col-sm-2">50</div> <div class="col-sm-2">10</div> </div> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-2">KM percorrido</div> <div class="col-sm-2">CPM</div> </div> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-2">50</div> <div class="col-sm-2">10</div> </div> </div> </template> <script> import VueHighcharts from 'vue2-highcharts' const asyncData = { name: 'Tokyo', marker: { symbol: 'square' }, data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { y: 26.5, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } }, 23.3, 18.3, 13.9, 9.6] } export default { name: 'Dashboard', components: { VueHighcharts }, data () { return { filtro: { investimento: '', numeroCorrida: '', campanha: '' }, campanhas: [], options: { chart: { type: 'spline' }, title: { text: 'title' }, subtitle: { text: 'subtitle' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Horas' }, labels: { formatter: function () { return this.value + '°' } } }, tooltip: { crosshairs: true, shared: true }, credits: { enabled: false }, plotOptions: { spline: { marker: { radius: 4, lineColor: '#666666', lineWidth: 1 } } }, series: [] } } }, mounted () { this.$parent.$data.title = this.title this.$parent.$data.description = '' }, methods: { doFilter () { this.$events.fire('filter-set', this.filterText) }, load () { let lineCharts = this.$refs.lineCharts lineCharts.delegateMethod('showLoading', 'Loading...') setTimeout(() => { lineCharts.addSeries(asyncData) lineCharts.hideLoading() }, 2000) } } } </script>
Clicando na primeira aba
clicando na segunda aba
Na primeira aba, os componentes, vão para baixo. Como fazer para que eles ficar aonde estão ?