<template>
	<view class="index-container">
		<view class="ic-content">
			<view class="ic-header">
				<view class="ih-address" v-if="false">
					<view>广州欧轩智能场馆(共6家)</view>
					<image src="/static/images/icon/arrow_ff.png" mode="aspectFit"></image>
				</view>
				<view class="ih-btn" hover-class="hover-active">点击登陆</view>
				<view class="ih-tip">今日总收入</view>
				<view class="ih-price"><text>¥</text>0.00</view>
				<view class="ih-amount">
					<view>
						<view>收款笔数</view>
						<view>10</view>
					</view>
					<view>
						<view>收款笔数</view>
						<view>10</view>
					</view>
				</view>
				<image class="ih-bg-icon" style="left: 0;" mode="aspectFit" src="/static/images/icon/index/header_bg_a.png"></image>
				<image class="ih-bg-icon" mode="aspectFit" src="/static/images/icon/index/header_bg_b.png"></image>
			</view>
			<view class="ic-notice">
				<view class="in-left">
					<image src="/static/images/icon/index/notice.png" mode="aspectFit"></image>
					<text>消息中心</text>
				</view>
				<view class="in-right">
					<view>99</view>
					<image src="/static/images/icon/arrow_b2.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="ic-tabs">
				<view class="it-item" v-for="e in tabList" :key="e.id">
					<image mode="aspectFit" :src="'/static/images/icon/index/tab_'+ e.id + '.png'"></image>
					<view>{{e.name}}</view>
				</view>
			</view>
		</view>
		<view class="ox-dark-mask" v-if="false">
			<view class="ic-author-modal">
				<view class="iam-title">微信授权</view>
				<view class="iam-tip">您的信息和数据将受到保护</view>
				<image class="iam-pic" mode="aspectFit" src="/static/images/icon/author_modal.png"></image>
				<view class="iam-btns">
					<view hover-class="hover-active">取消</view>
					<view hover-class="hover-active">授权并登录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const tabList = [
		{
			id: 0,
			name: '营业额',
			path: ''
		},
		{
			id: 1,
			name: '收款记录',
			path: ''
		},
		{
			id: 2,
			name: '经营分析',
			path: ''
		},
		{
			id: 3,
			name: '场馆订单',
			path: ''
		},
		{
			id: 4,
			name: '会员卡订单',
			path: ''
		},
		{
			id: 5,
			name: '积分订单',
			path: ''
		},
		{
			id: 6,
			name: '员工管理',
			path: ''
		},
		{
			id: 7,
			name: '核销查询',
			path: ''
		},
		{
			id: 8,
			name: '场地管理',
			path: ''
		},
	];
	export default {
		data() {
			return {
				tabList
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../style/public.scss";
	.index-container{
		position: relative;
	}
	.ic-content{
		padding: 24upx;
	}
	.ic-header{
		position: relative;
		height: 476upx;
		margin-bottom: 48upx;
		padding: 38upx 24upx 0;
		border-radius: 14upx;
		background-color: $themeColor;
		.ih-address{
			margin-bottom: 26upx;
			@include centerFlex(center);
			>view{
				max-width: 90%;
				line-height: 50upx;
				text-align: center;
				font-size: 36upx;
				color: #fff;
				@include textHide(1);
			}
			>image{
				flex-shrink: 0;
				margin-left: 20upx;
				width: 28upx;
				height: 28upx;
			}
		}
		.ih-btn{
			margin: 0 auto 28upx;
			width: 160upx;
			height: 48upx;
			text-align: center;
			line-height: 48upx;
			font-size: 28upx;
			color: $themeColor;
			background-color: #fff;
			border-radius: 24upx;
		}
		.ih-tip{
			margin-bottom: 8upx;
			line-height: 40upx;
			text-align: center;
			font-size: 28upx;
			color: rgba($color: #fff, $alpha: .7);
		}
		.ih-price{
			margin-bottom: 50upx;
			line-height: 96upx;
			text-align: center;
			font-size: 84upx;
			font-weight: 500;
			color: #fff;
			@include textHide(1);
			>text{
				line-height: 74upx;
				font-size: 64upx;
			}
		}
		.ih-amount{
			@include centerFlex(space-around);
			>view{
				>view{
					&:first-child{
						margin-bottom: 16upx;
						line-height: 40upx;
						text-align: center;
						font-size: 28upx;
						color: rgba($color: #fff, $alpha: .7);
					}
					&+view{
						line-height: 56upx;
						text-align: center;
						font-size: 40upx;
						font-weight: 500;
						color: #fff;
					}
				}
			}
		}
		.ih-bg-icon{
			position: absolute;
			top: 0;
			width: 120upx;
			height: 142upx;
			&+.ih-bg-icon{
				right: 0;
				top: 38upx;
				width: 240upx;
				height: 400upx;
			}
		}
	}
	.ic-notice{
		margin-bottom: 24upx;
		padding: 0 24upx;
		height: 108upx;
		border-radius: 10upx;
		background-color: #fff;
		@include centerFlex(space-between);
		.in-left{
			>image{
				vertical-align: middle;
				margin-right: 10upx;
				width: 52upx;
				height: 50upx;

			}
			>text{
				font-size: 28upx;
				line-height: 40upx;
				color: #1a1a1a;
			}
		}
		.in-right{
			@include centerFlex(flex-end);
			>view{
				margin-right: 14upx;
				line-height: 50upx;
				text-align: center;
				width: 50upx;
				height: 50upx;
				line-height: 50upx;
				font-size: 24upx;
				border-radius: 50%;
				color: #fff;
				background-color: #ea5061;
				@include textHide(1);

			}
			>image{
				width: 28upx;
				height: 28upx;

			}
		}
	}
	.ic-tabs{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.it-item{
			padding-top: 54upx;
			margin-bottom: 24upx;
			flex-shrink: 0;
			flex-grow: 0;
			width: 218upx;
			height: 218upx;
			border-radius: 10upx;
			background-color: #fff;
			>image{
				display: block;
				margin: 0 auto 20upx;
				width: 52upx;
				height: 52upx;
			}
			>view{
				text-align: center;
				line-height: 40upx;
				font-size: 28upx;
				color: #1a1a1a;
			}
		}
	}
	.ic-author-modal{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding-top: 60upx;
		width: 662upx;
		height: 884upx;
		border-radius: 10upx;
		background-color: #fff;
		.iam-title{
			margin-bottom: 22upx;
			text-align: center;
			line-height: 60upx;
			font-size: 44upx;
			font-weight: 500;
			color: #1a1a1a;
		}
		.iam-tip{
			margin-bottom: 52upx;
			line-height: 40upx;
			text-align: center;
			font-size: 28upx;
			color: #9c9c9f;
		}
		.iam-pic{
			margin: 0 auto 62upx;
			display: block;
			width: 488upx;
			height: 416upx;
		}
		.iam-btns{
			@include centerFlex(center);
			>view{
				margin: 0 20upx;
				width: 240upx;
				height: 92upx;
				line-height: 88upx;
				text-align: center;
				border-radius: 46upx;
				border: 2upx solid $themeColor;
				font-size: 32upx;
				color: $themeColor;
				&+view{
					background-color: $themeColor;
					color: #fff;
				}
			}
		}

	}
</style>
