<template>
	<view class="content flex flex-direction">
		<view v-if="coad" style="position: relative;">
			<image src="http://m.qpic.cn/psc?/V11kyB1O080aC1/cnQ2D7YjAZ5R6pY0fmc9joZ6fC6TxFlt9mW4UhUn2PEgUne7OUt4q4mNE.k9gU.rSr8Eu*pFToZoVwUOEGDrKMycDqdn1mLFGE1dxYTGUcE!/b&bo=7gKRAu4CkQIDWXw!&rf=viewer_4&t=5"
			 class="bg1"></image>
			<view class="bg-code">
				<image class="healthy-code" src="../../../static/img/qrcode.png" :style="{'background':healthyCodeColor}"></image>
			</view>
		</view>
		<image v-else src="http://m.qpic.cn/psc?/V11kyB1O080aC1/cnQ2D7YjAZ5R6pY0fmc9jhx9v1rh8VuBAojvYxrYvg*uVMAXaD2En3CPiaHx7AWMjFTafVrGxwJR4jZd5s4ProhQT1ceDVquyQR7HVquBKk!/b&bo=7gLuAe4C7gEDORw!&rf=viewer_4&t=5"
		 class="bg"></image>

		<view :class="coad ? 'box1' : 'box'">
			<view v-show="!coad" class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/get-code/get-code')">
				<view class="flex align-center padding">
					<view class="round lg cu-avatar icon1">
						<view class="iconfont icon-qrcode"></view>
					</view>
					<view class="padding-left-sm flex-sub">
						<view class="text-xl">领取健康码</view>
						<view class="text-df padding-top-xs description">介绍文本</view>
					</view>
				</view>
			</view>
			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/apply-code/apply-code')">
				<view class="flex align-center padding">
					<view class="round lg cu-avatar icon2">
						<view class="iconfont icon-carryout"></view>
					</view>
					<view class="padding-left-sm flex-sub">
						<view class="text-xl">每日健康打卡</view>
						<view class="text-df padding-top-xs description">每日健康打卡介绍文本</view>
					</view>
				</view>
			</view>
			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/add-stroke/add-stroke')">
				<view class="flex align-center padding">
					<view class="round lg cu-avatar icon3">
						<view class="iconfont icon-car"></view>
					</view>
					<view class="padding-left-sm flex-sub">
						<view class="text-xl">行程上报</view>
						<view class="text-df padding-top-xs description">行程上报介绍文本</view>
					</view>
				</view>
			</view>
			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/statistics/statistics')">
				<view class="flex align-center padding">
					<view class="round lg cu-avatar icon4">
						<view class="iconfont icon-linechart"></view>
					</view>
					<view class="padding-left-sm flex-sub">
						<view class="text-xl">统计</view>
						<view class="text-df padding-top-xs description">统计介绍文本</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				coad: false,
				healthyCodeColor: '#11A20D',
			}
		}
	};
</script>

<style scoped lang="scss">
	.bg {
		width: 100%;
		height: 495rpx;
	}

	.bg1 {
		width: 100%;
		height: 635rpx;
	}

	.bg-code {
		display: flex;
		width: 100%;
		position: absolute;
		top: 370rpx;

		.healthy-code {
			margin: 0 auto;
			width: 230rpx;
			height: 230rpx;
		}
	}

	.box {
		position: relative;
		top: -100rpx;
	}

	.box1 {
		position: relative;
		top: 0;
	}

	.card-radius {
		border-radius: 15rpx;
	}

	.description {
		color: $grey;
	}

	.icon1 {
		background: $iconGreen;
	}

	.icon2 {
		background: $iconCyan;
	}

	.icon3 {
		background: $iconBlue;
	}

	.icon4 {
		background: $iconPurple;
	}
</style>
