<!--
 * @Date: 2020-12-14 09:07:03
 * @LastEditors: zwq
 * @LastEditTime: 2022-01-23 00:14:53
 * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
 * @Description:
-->
<template>
  <el-row class="base-footer-container" :style="{height: 36 + 'px'}">
    <el-col v-for="item in footerList" :key="item" :span="4" class="base-footer-item" :style="{lineHeight: 36 + 'px', fontSize: 18 + 'px'}" :class="check === item ? 'isActive' : ''" @click.native="handleCheck(item)">
      {{ item }}
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'BaseFooter',
  props: {
    beilv: {
      type: Number,
      default: () => 1
    }
  },
  data() {
    return {
      footerList: ['钢1线', '钢2线', '钢3线', '钢4线', '钢5线', '钢6线'],
      check: '钢1线'
    }
  },
  methods: {
    handleCheck(name) {
      this.check = name
    }
  }
}
</script>
<style lang="scss" scoped>
  .base-footer-container{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    .base-footer-item {
      text-align: center;
      cursor: pointer;
      background: rgba($color: #133648, $alpha: 0.29);
    }
    .isActive {
      background: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
      position: relative;
    }
    .isActive::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 0;
      height:0;
      width: 100%;
      height: 10px;
      transform-origin: 50% 100% 0;
      transform: perspective(40px)  rotateX(45deg);
      background-image: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
    }
  }
</style>
