<template>
	<view class="rule-body">
		<view class="rule-body-top">
			<view class="rule-body-top-image" :style="{ 'background': themeStore.theme.itemLightBgColor }">
				<theme-image class="earn-tree-image" src="@/static/earn/earn-tree.png"></theme-image>
			</view>
		</view>
		<view style="height: 8rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
		<view class="rule-content">
			<view class="rule-list">
				<view class="rule-item" :style="{ 'background': themeStore.theme.itemLightBgColor }">
					<theme-image src="@/static/earn/rule1.png" class="rule-item-icon"></theme-image>
					<theme-image src="@/static/account/icon/segmentation.png" class="segmentation-iamge"></theme-image>
					<view class="rule-item-center">
						<view class="rule-item-center-text">
							<text :style="{ 'color': themeStore.theme.text.theme }">5 </text>
							<text class="plr8">{{ $t("earn.rule.text") }}</text>
							<text :style="{ 'color': themeStore.theme.text.theme }">{{ $t("earn.rule.cashBonus") }}</text>
						</view>
						<view class="rule-item-center-text">
							<text :style="{ 'color': themeStore.theme.text.theme }">0.5% </text>
							<text class="plr8">{{ $t("earn.rule.text") }}</text>
							<text :style="{ 'color': themeStore.theme.text.theme }">{{ $t("earn.rule.cashBalance") }}</text>
						</view>
					</view>
				</view>
				<view class="rule-item" :style="{ 'background': themeStore.theme.itemLightBgColor }">
					<theme-image src="@/static/earn/rule2.png" class="rule-item-icon"></theme-image>
					<theme-image src="@/static/account/icon/segmentation.png" class="segmentation-iamge"></theme-image>
					<view class="rule-item-center">
						<view class="rule-item-center-text">
							<text :style="{ 'color': themeStore.theme.text.theme }">0.3%  </text>
							<text class="plr8">{{ $t("earn.rule.text") }}</text>
							<text :style="{ 'color': themeStore.theme.text.theme }">{{ $t("earn.rule.cashBalance") }}</text>
						</view>
					</view>
				</view>
				<view class="rule-item" :style="{ 'background': themeStore.theme.itemLightBgColor }">
					<theme-image src="@/static/earn/rule3.png" class="rule-item-icon"></theme-image>
					<theme-image src="@/static/account/icon/segmentation.png" class="segmentation-iamge"></theme-image>
					<view class="rule-item-center">
						<view class="rule-item-center-text">
							<text :style="{ 'color': themeStore.theme.text.theme }">0.2%  </text>
							<text class="plr8">{{ $t("earn.rule.text") }}</text>
							<text :style="{ 'color': themeStore.theme.text.theme }">{{ $t("earn.rule.cashBonus") }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="rule-faq">
				<view class="rule-faq-item">
					<view class="rule-faq-item-title">{{ $t("earn.rule.tipOneProblem") }}</view>
					<view class="rule-faq-item-text" :style="{ 'color': themeStore.theme.text.subtitle }">
						{{ $t("earn.rule.tipOneText") }}
					</view>
				</view>
				<view class="rule-faq-item">
					<view class="rule-faq-item-title">{{ $t("earn.rule.tipTwoProblem") }}</view>
					<view class="rule-faq-item-text" :style="{ 'color': themeStore.theme.text.subtitle }">
						{{ $t("earn.rule.tipTwoText") }}
					</view>
				</view>
				<view class="rule-faq-item">
					<view class="rule-faq-item-title">{{ $t("earn.rule.tipThreeProblem") }}</view>
					<view class="rule-faq-item-text" :style="{ 'color': themeStore.theme.text.subtitle }">
						{{ $t("earn.rule.tipThreeText") }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { useThemeStore } from '@/store/useThemeStore';

const themeStore = useThemeStore()
</script>

<style lang="scss" scoped>
.rule-body {
	width: 100%;
	height: 100%;

	.rule-body-top {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx 20rpx 30rpx;

		.rule-body-top-image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			padding: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.earn-tree-image {
				width: 648rpx;
				height: 319rpx;
			}
		}
	}
	.rule-content {
		width: 100%;
		height: calc(100% - 452rpx);
		margin-top: 11rpx;
		box-sizing: border-box;
		padding: 22rpx 31rpx 27rpx 31rpx;
		.rule-list {
			width: 100%;
			height: 298rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.rule-item {
				width: 100%;
				background: #922222;
				height: 90rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				box-sizing: border-box;
				padding-left: 21rpx;
				.rule-item-icon {
					width: 153rpx;
					height: 53rpx;
				}
				.segmentation-iamge {
					width: 3rpx;
					height: 71rpx;
					margin-left: 22rpx;
				}
				.rule-item-center {
					margin-left: 28rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.rule-item-center-text {
						font-size: 20rpx;
						line-height: 20rpx;
						display: flex;
						align-items: center;
					}
					.rule-item-center-text::before {
						content: '';
						width: 7rpx;
						display: block;
						height: 7rpx;
						background: #e6312d;
						border-radius: 50%;
						margin-right: 18rpx;
					}
				}
			}
		}
		.rule-faq {
			width: 100%;
			margin-top: 27rpx;
			box-sizing: border-box;
			.rule-faq-item {
				width: 100%;
				margin-bottom: 10rpx;
				.rule-faq-item-title {
					font-size: 24rpx;
				}
				.rule-faq-item-text {
					font-size: 20rpx;
					margin-top: 5rpx;
				}
			}
		}
	}
}
</style>
