<template>
  <div>
    <div class="rarle">
      <!--上部分-->
      <div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
        <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
          <van-col  span="15" class="jfNumber">2134</van-col>
        </tatle-bar>
      </div>

      <!--下部分-->
      <div style="width:100%;height: calc(100vh);background-color: #ebeef5;">
        <van-tabs v-model:active="active" class="tab">
          <van-tab title="积分收支明细">
            <!--按钮部分-->
<!--            <van-row>
              <van-col span="8">全部</van-col>
              <van-col span="8">已获取</van-col>
              <van-col span="8">已消耗</van-col>
            </van-row>-->
            <van-row gutter="20" class="brn-DIV">
              <van-col span="8">全部</van-col>
              <van-col span="8">已获取</van-col>
              <van-col span="8">已消耗</van-col>
            </van-row>
            <van-row class="ms-style" >
              <van-col span="8" style="width: 90%;background-color: #ffffff;text-align: revert;">本月获取积分3842 已消耗3400</van-col>
            </van-row>
            <div style="width: 100%;height: 100%;">
              <van-row>
                <van-col span="4">存款积分奖励</van-col>
                <van-col span="10" offset="4">3211</van-col>
              </van-row>

              <van-row>
                <van-col span="4" style="margin-left: 6%;">2022-07-24 15:38</van-col>
              </van-row>

            </div>
            <div style="width: 100%;height:1px;border: 1px solid #f5f2f0;"></div>
          </van-tab>

          <van-tab title="积分兑换记录">
            <div>

            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({
  name: "ExchangeRecord",
})
export default class ExchangeRecord extends Vue {
  titleName="积分收支明细";
  titleflag= true;
}
</script>

<style scoped lang="scss">
.body{
  width: 96%;
  background-color: #02a7f0;
  border-radius: 6px;
  margin-left: 2%;
  z-index: 10;
}
.jfNumber{
  font-size: 24px;
  color: #ffffff;
  font-weight: 900;
  margin-left: 2%;
  margin-top: 18%;
}
.tab{
  position: fixed;
  top: 24vh;
  left: auto;
  left: 2%;
  width: 96%;
  height: 100%;
  /* border-radius: 108px; */
  margin: 0px auto;
  text-align: center;
  background-color: #ffffff;
}
.van-col--8 {
  width: 20%;
  margin-top: 10px;
  background-color: #1989fa;
/*  border: 1px solid;*/
  margin: 7px;
  border-radius: 5px;
  text-align: center;
}
.ms-style{
  width: 90%;
  text-align: initial;
  background-color: #ffffff;
}
.van-col--4 {
  width: 40%;
}
</style>
