Layout do sistema - resolvido

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 ?

Foi feito de outra forma

1 curtida