salvato.newfreeplanet/src/components/CDashboard/CDashboard.vue

<template>
  <div class="q-ma-xs">
    <div
      class="row q-my-sm shadow"
      style="border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12)"
    >
      <!--<div class="col-md-3 col-lg-3 col-sm-12 col-xs-12 box_4" style="border-left: 1px solid #efefef;"
           v-bind:class="{'border-top': $q.platform.is.mobile}">
        <q-card class="no-shadow q-pa-sm">
          <q-item class="q-pb-none q-pt-xs">
            <q-item-section>
              <q-item-label class="text-h4" style="font-weight: 500;letter-spacing: 3px;">{{
                  calcstat.numUsersReg
                }}
              </q-item-label>
              <q-item-label :class="!$q.dark.isActive? 'text-grey-7':'text-white'" style="letter-spacing: 1px;">Persone Iscritte
              </q-item-label>
            </q-item-section>

            <q-item-section side>
              <q-icon name="o_people" class="box_4" size="60px"></q-icon>
            </q-item-section>
          </q-item>
          <q-item class="q-py-xs" style="min-height: unset">
            <q-item-section>
              <div class="progress-base q-my-sm">
                <div class="progress-bar-4" style="width:100%"></div>
              </div>
            </q-item-section>
          </q-item>
        </q-card>
      </div>-->

      <div
        v-for="(rec, index) of visustat"
        :class="`col-md-3 col-lg-3 col-sm-6 col-xs-6 text-` + rec.color"
        style="border-left: 1px solid #efefef"
        :key="index"
      >
        <q-card class="no-shadow q-pa-xs">
          <q-item class="q-pb-none q-pt-xs cursor-pointer" :to="rec.to">
            <q-item-section>
              <q-item-label
                :class="
                  (!$q.dark.isActive ? 'text-grey-5' : 'text-white') +
                  ` title_view_shadow`
                "
                style="letter-spacing: 1px"
              >
                {{ rec.title }}
              </q-item-label>
              <q-item-label
                v-if="rec.subtitle"
                :class="
                  (!$q.dark.isActive ? 'text-grey-5' : 'text-white') +
                  ` title_view_subtitle_shadow`
                "
              >
                <span v-html="rec.subtitle"></span>
              </q-item-label>
              <q-item-label class="text-h9" style="letter-spacing: 2px">
                <!--{{ calcstat.numByTab[rec.table] }}-->
              </q-item-label>
            </q-item-section>

            <q-item-section side>
              <q-img v-if="rec.image" :src="rec.image" style="width: 35px;"></q-img>
              <q-icon
                v-else
                :name="rec.icon"
                :class="`text-` + rec.color"
                size="35px"
              ></q-icon>
            </q-item-section>
          </q-item>
          <q-item class="q-py-xs" style="min-height: unset">
            <q-item-section>
              <div class="progress-base q-my-sm">
                <div
                  class="progress-base"
                  :style="tools.getbackgroundGradient(rec.color, 45)"
                ></div>
              </div>
            </q-item-section>
          </q-item>
        </q-card>
      </div>
    </div>

    <div class="row" style="margin-top: 4px important; font-size: 0.75rem">
      &nbsp;
    </div>

    <div
      class="row q-my-md shadow"
      style="border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12)"
    >
      <div
        v-for="(rec, index) of visulinks"
        :class="`col-md-3 col-lg-3 col-sm-6 col-xs-6 text-` + rec.color"
        style="border-left: 1px solid #efefef"
        :key="index"
      >
        <q-card class="no-shadow q-pa-xxs">
          <q-item class="q-pb-none q-pt-xs cursor-pointer" :to="rec.to">
            <q-item-section>
              <q-item-label
                :class="
                  (!$q.dark.isActive ? 'text-grey-7' : 'text-white') +
                  ` title_view_small_shadow`
                "
                style="letter-spacing: 0.5px"
              >
                {{ rec.title }}
              </q-item-label>
              <q-item-label
                v-if="rec.subtitle"
                :class="
                  (!$q.dark.isActive ? 'text-grey-7' : 'text-white') +
                  ` title_view_subtitle_shadow`
                "
                style="letter-spacing: 0.2px"
              >
                <span v-html="rec.subtitle"></span>
              </q-item-label>
            </q-item-section>

            <q-item-section side>
              <q-img v-if="rec.image" :src="rec.image" style="width: 35px">IMAGE</q-img>
              <q-icon
                v-else
                :name="rec.icon"
                :class="`text-` + rec.color"
                size="25px"
              ></q-icon>
            </q-item-section>
          </q-item>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./CDashboard.ts">
</script>

<style lang="scss" scoped>
@import './CDashboard.scss';
</style>