dangxingjiaoyujidi-web/src/views/dashboard/components/PanelGroup.vue

<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #FDC830;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F37335, #FDC830);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text" style="font-family: '微软雅黑'">
            234
          </div>
          <div class="card-panel-text" style="color: #fff;font-size:16px">
            预约参观总人次
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #FFB75E;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
      <div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="user-group" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text" style="font-family: '微软雅黑'">
            204
          </div>
          <div class="card-panel-text" style="color: #fff;font-size:16px">
            入场参观总人次
          </div>
          <!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #ffe259;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffa751, #ffe259);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
      <div class="card-panel" @click="handleRoute('tool')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text" style="font-family: '微软雅黑'">
            305
          </div>
          <div class="card-panel-text" style="color: #fff;font-size:16px">
            预约活动总人次
          </div>
          <!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #fe8c00;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
      <div class="card-panel" @click="handleRoute('user')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="user-group" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text" style="font-family: '微软雅黑'">
            267
          </div>
          <div class="card-panel-text" style="color: #fff;font-size:16px">
            参与活动总人次
          </div>
          <!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
        </div>

      </div>
    </el-col>
  </el-row>
</template>

<script>
  import CountTo from 'vue-count-to'

  export default {
    props: {
      countsData: {
        type: Object
      }
    },
    components: {
      CountTo
    },
    methods: {
      handleRoute(type) {
        this.$emit('handleRoute', type)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .panel-group {
    // margin-top: 18px;
    margin-left: -2% !important;
    margin-right: -3% !important;

    .card-panel-col {
      // margin:0 2%;
      margin: 0 2%;
      margin-bottom: 32px;
    }

    .card-panel {
      height: 130px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      text-align: center;
      // background: #fff;
      // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      // border-color: rgba(0, 0, 0, .05);

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        // .icon-people {
        //   background: #40c9c6;
        // }

        // .icon-message {
        //   background: #36a3f7;
        // }

        // .icon-money {
        //   background: #f4516c;
        // }

        // .icon-shopping {
        //   background: #34bfa3
        // }
      }

      .icon-people {
        color: #fff;
      }

      .icon-message {
        color: #fff;
      }

      .icon-money {
        color: #fff;
      }

      .icon-shopping {
        color: #fff
      }

      .card-panel-icon-wrapper {
        float: right;
        margin: 22px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 42px;
      }

      .card-panel-description {
        // float: right;
        font-weight: bold;
        margin: 33px 0;

        .card-panel-text {
          line-height: 25px;
          color: rgb(255, 255, 255);
          font-size: 28px;
          margin-bottom: 12px;

        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  @media (max-width:550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }
</style>