<template>
	<view :class="[AppTheme]">
		<view class="bg">
			<view class="canuse">可用积分</view>
			<view class="jf">10分</view>
			<view class="jfsm" v-if="index==3">积分说明</view>
		</view>

		<view class="tab">
			<view :class="index == 1 ? 'act text-primary border-primary item' : 'item'" @click="indicator(1)">明细</view>
			<view :class="index == 2 ? 'act text-primary border-primary item' : 'item'" @click="indicator(2)">带来注册</view>
			<view :class="index == 3 ? 'act text-primary border-primary item' : 'item'" @click="indicator(3)">兑换</view>
			<view :class="index == 4 ? 'act text-primary border-primary item' : 'item'" @click="indicator(4)">带来消费</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Integral',
	data() {
		return {
			primary:this.$theme.primary,
			settingFile:getApp().globalData.siteinfo,
			index: 1
		};
	},
	methods: {
		getDom() {},
		indicator(i) {
			this.index = i;
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f1f1f1;
}
.bg {
	width: 100%;
	background: #ff8300;
	height: 185rpx;
	color: #fff;

	.canuse {
		padding: 25rpx 0 0 25rpx;
	}
	.jf {
		text-align: center;
		font-weight: 400;
		font-size: 34rpx;
		color: #fff;
	}  
	.jfsm {
		text-align: center;
		color: #f00;
		font-size: 44rpx;
	}
}
.tab {
	position: relative;
	width: 100%;
	height: 106rpx;
	display: flex;
	.item {
		width: 25%;
		text-align: center;
		line-height: 106rpx;
	}
	.item.act {
		border-bottom-width:4rpx;
		border-bottom-style: solid;
		box-sizing: border-box;
	}
}
</style>
