<template>
  <div class="app-container">

    <el-tabs class="st-tab" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane class="st-tab2" label="积分商城订单" name="first">
        <el-alert
          title="当前页面订单为油站小程序端用户在积分商城兑换的订单记录,如有付款金额,付款订单请在增值性订单列表中查看,类型为:积分商城"
          :closable="false"
          type="error">
        </el-alert>
        <points-mall></points-mall>
      </el-tab-pane>
      <el-tab-pane label="积分收银台订单" name="second">
        <el-alert
          title="PC积分收银台在线兑换订单记录,收银台订单无需确认操作,如有付款金额,付款订单请在增值性订单列表中查看,类型为:积分收银"
          :closable="false"
          type="error">
        </el-alert>
        <points-cashier></points-cashier>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>

import PointsMall from '@/views/integral/order/pointsMall'
import PointsCashier from "@/views/integral/order/pointsCashier";

export default {
  name: "index",
  components: {PointsCashier, PointsMall},
  data() {
    return {
      activeName:'first',
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
}
.st-tab {
  padding: 0px;
  padding-bottom: 0px;
}
.st-tab2 {
  /* background-color: #00aaff */
}
/deep/ .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 0px !important;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav {
  background-color: #ffffff;
}

/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-bottom-color: #E4E7ED;
}
/* .is-active */
</style>

