Color颜色

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Color颜色展示">
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<view class="color-section">
				<!-- 主题色展示 -->
				<view class="section-title"> <zk-text text="主题色"> </zk-text> </view>
				<view class="color-item" :style="{ backgroundColor: theme.primary  }">
					<text class="color-item-text" :style="{   color: theme.white }">Primary主色</text>
				</view>
				<view class="color-item" :style="{ backgroundColor: theme.secondary, color: theme.textPrimary }">
					<text class="color-item-text" :style="{   color: theme.white }">Secondary 次要色</text>
				</view>
				<view class="color-item" :style="{ backgroundColor: theme.success, color: theme.textPrimary }">
					<text class="color-item-text" :style="{   color: theme.white }">Success 成功色</text>
				</view>
				<view class="color-item" :style="{ backgroundColor: theme.warning, color: theme.textPrimary }">
					<text class="color-item-text" :style="{   color: theme.white }">Warning 警告色</text>
				</view>
				<view class="color-item" :style="{ backgroundColor: theme.error, color: theme.textPrimary }">
					<text class="color-item-text" :style="{   color: theme.white }">Error 错误色</text>
				</view>

				<!-- 文字颜色展示 -->

				<view class="section-title"> <zk-text text="文字颜色"> </zk-text> </view>
				<view class="">
					<text class="color-text" :style="{ color: theme.textPrimary  }">主要文字颜色</text>
				</view>
				<view class="">
					<text class="color-text" :style="{ color: theme.textRegular  }">常规文字颜色</text>
				</view>
				<view class="">
					<text class="color-text" :style="{ color: theme.textSecondary  }">次要文字颜色</text>
				</view>

				<view class="">
					<text class="color-text" :style="{ color: theme.textPlaceholder  }">占位文字颜色</text>
				</view>






				<!-- 背景色展示 -->
				<view class="section-title"> <zk-text text="背景色"> </zk-text> </view>
				<view class="color-item" :style="{ backgroundColor: theme.bgPage  }">
					<text class="color-item-text" :style="{   color: theme.textPrimary }">页面背景色</text>

				</view>
				<view class="color-item" :style="{ backgroundColor: theme.bgCard  }">
					<text class="color-item-text" :style="{   color: theme.textPrimary }">卡片背景色</text>

				</view>
				<view class="color-item" :style="{ backgroundColor: theme.bgInput  }">
					<text class="color-item-text" :style="{   color: theme.textPrimary }">输入框背景色</text>
				</view>

				<!-- 渐变色展示 -->
				<view class="section-title"> <zk-text text="渐变色"> </zk-text> </view>
				<view class="color-item" :style="{ backgroundImage: theme.gradientPrimary  }">

					<text class="color-item-text" :style="{   color: theme.white }">主要渐变色</text>
				</view>
				<view class="color-item" :style="{ backgroundImage: theme.gradientSuccess  }">

					<text class="color-item-text" :style="{   color: theme.white }">成功渐变色</text>
				</view>
				<view class="color-item" :style="{ backgroundImage: theme.gradientWarning  }">
					<text class="color-item-text" :style="{   color: theme.white }">警告渐变色</text>
				</view>
				<view class="color-item" :style="{ backgroundImage: theme.gradientError  }">
					<text class="color-item-text" :style="{   color: theme.white }">错误渐变色</text>
				</view>
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		name: 'ColorDemo',
		data() {
			return {
				theme: uni.$store.state['zk-global'].theme.current
			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	.color-section {
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin: 30rpx 0 20rpx;
		}

		.color-item {
			padding: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 8rpx;

		}

		.color-text {

			padding: 20rpx 0;
			font-size: 28rpx;
		}
	}

	.color-item-text {
		font-size: 28rpx;
	}
</style>