mobile-frame-h5-example/pages/componentsC/color/index.vue

<template>
	<view class="wrap">
		<view class="item">
			<view class="title">
				主色调
			</view>
			<view class="color-box">
				<view class="color-item" style="background: #2979ff;">
					<view class="color-title">
						Primary
					</view>
					<view class="color-value">
						#2979ff
					</view>
				</view>
				<view class="color-item" style="background: #2b85e4;">
					<view class="color-title">
						Dark
					</view>
					<view class="color-value">
						#2b85e4
					</view>
				</view>
				<view class="color-item" style="background: #a0cfff;">
					<view class="color-title">
						Disabled
					</view>
					<view class="color-value">
						#a0cfff
					</view>
				</view>
				<view class="color-item" style="background: #ecf5ff;color: #909399;">
					<view class="color-title">
						Light
					</view>
					<view class="color-value">
						#ecf5ff
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">
				Error
			</view>
			<view class="color-box">
				<view class="color-item" style="background: #fa3534;">
					<view class="color-title">
						Error
					</view>
					<view class="color-value">
						#fa3534
					</view>
				</view>
				<view class="color-item" style="background: #dd6161;">
					<view class="color-title">
						Dark
					</view>
					<view class="color-value">
						#dd6161
					</view>
				</view>
				<view class="color-item" style="background: #fab6b6;">
					<view class="color-title">
						Disabled
					</view>
					<view class="color-value">
						#fab6b6
					</view>
				</view>
				<view class="color-item" style="background: #fef0f0;color: #909399;">
					<view class="color-title">
						Light
					</view>
					<view class="color-value">
						#fef0f0
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">
				Warning
			</view>
			<view class="color-box">
				<view class="color-item" style="background: #ff9900;">
					<view class="color-title">
						Warning
					</view>
					<view class="color-value">
						#ff9900
					</view>
				</view>
				<view class="color-item" style="background: #f29100;">
					<view class="color-title">
						Dark
					</view>
					<view class="color-value">
						#f29100
					</view>
				</view>
				<view class="color-item" style="background: #fcbd71;">
					<view class="color-title">
						Disabled
					</view>
					<view class="color-value">
						#fcbd71
					</view>
				</view>
				<view class="color-item" style="background: #fdf6ec;color: #909399;">
					<view class="color-title">
						Light
					</view>
					<view class="color-value">
						#fdf6ec
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">
				Info
			</view>
			<view class="color-box">
				<view class="color-item" style="background: #909399;">
					<view class="color-title">
						Info
					</view>
					<view class="color-value">
						#909399
					</view>
				</view>
				<view class="color-item" style="background: #82848a;">
					<view class="color-title">
						Dark
					</view>
					<view class="color-value">
						#82848a
					</view>
				</view>
				<view class="color-item" style="background: #c8c9cc;">
					<view class="color-title">
						Disabled
					</view>
					<view class="color-value">
						#c8c9cc
					</view>
				</view>
				<view class="color-item" style="background: #f4f4f5;color: #909399;">
					<view class="color-title">
						Light
					</view>
					<view class="color-value">
						#f4f4f5
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">
				Success
			</view>
			<view class="color-box">
				<view class="color-item" style="background: #19be6b;">
					<view class="color-title">
						Success
					</view>
					<view class="color-value">
						#19be6b
					</view>
				</view>
				<view class="color-item" style="background: #18b566;">
					<view class="color-title">
						Dark
					</view>
					<view class="color-value">
						#18b566
					</view>
				</view>
				<view class="color-item" style="background: #71d5a1;">
					<view class="color-title">
						Disabled
					</view>
					<view class="color-value">
						#71d5a1
					</view>
				</view>
				<view class="color-item" style="background: #dbf1e1;color: #909399;">
					<view class="color-title">
						Light
					</view>
					<view class="color-value">
						#dbf1e1
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">
				文字颜色
			</view>
			<view class="color-box">
				<view class="color-item" style="background: #303133;">
					<view class="color-title">
						主要文字
					</view>
					<view class="color-value">
						#303133
					</view>
				</view>
				<view class="color-item" style="background: #606266;">
					<view class="color-title">
						常规文字
					</view>
					<view class="color-value">
						#606266
					</view>
				</view>
				<view class="color-item" style="background: #909399;">
					<view class="color-title">
						次要文字
					</view>
					<view class="color-value">
						#909399
					</view>
				</view>
				<view class="color-item" style="background: #c0c4cc;">
					<view class="color-title">
						占位文字
					</view>
					<view class="color-value">
						#c0c4cc
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">                                                                                                          
				边框颜色
			</view>
			<view class="color-box">
				<view class="color-item" style="background: #dcdfe6;color: #909399;">
					<view class="color-title">
						一级边框
					</view>
					<view class="color-value">
						#dcdfe6
					</view>
				</view>
				<view class="color-item" style="background: #e4e7ed;color: #909399;">
					<view class="color-title">
						二级边框
					</view>
					<view class="color-value">
						#e4e7ed
					</view>
				</view>
				<view class="color-item" style="background: #ebeef5;color: #909399;">
					<view class="color-title">
						三级边框
					</view>
					<view class="color-value">
						#ebeef5
					</view>
				</view>
				<view class="color-item" style="background: #f2f6fc;color: #909399;">
					<view class="color-title">
						四级边框
					</view>
					<view class="color-value">
						#f2f6fc
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">
				背景颜色
			</view>
			<view class="color-box">
				<view class="color-item" style="background: #f3f4f6;color: #909399;">
					<view class="color-title">
						背景颜色
					</view>
					<view class="color-value">
						#f3f4f6
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			getApp().globalData.username = 'test12';
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 18rpx;
	}
	
	.item {
		margin: 30rpx 0;
		margin-top: 44rpx;
		
		&:first-child {
			margin-top: 0;
		}
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.title {
			font-size: 30rpx;
			position: relative;
			line-height: 1;
			padding-left: 22rpx;
			
			&:before {
				width: 4px;
				height: 15px;
				border-radius: 100rpx;
				background-color: $u-content-color;
				content: '';
				position: absolute;
				left: 6rpx;
				top: -1px;
			}
		}
		
		.color-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
			text-align: center;
			margin-top: 20rpx;
			
			.color-item {
				display: flex;
				flex: 1;
				margin: 0 8rpx;
				flex-direction: column;
				border-radius: 6rpx;
				padding: 12rpx 0;
			}
			
			
			.color-title {
				font-size: 28rpx;
			}
			
			.color-value {
				font-size: 24rpx;
			}
		}
	}
</style>