
<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="8">
				<el-card shadow="never" header="脉冲圆点">
					<el-space wrap :size="15">
						<x-status-indicator pulse type="primary"></x-status-indicator>
						<x-status-indicator pulse type="success"></x-status-indicator>
						<x-status-indicator pulse type="warning"></x-status-indicator>
						<x-status-indicator pulse type="danger"></x-status-indicator>
						<x-status-indicator type="info"></x-status-indicator>
					</el-space>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never" header="趋势">
					<el-space wrap :size="15">
						<x-trend v-model="trendValue" prefix="¥"></x-trend>
						<x-trend v-model="trendValue2"></x-trend>
						<x-trend v-model="trendValue3" suffix="%"></x-trend>
					</el-space>

					<p style="margin-top: 15px;color: #999;">设置reverse可反转颜色。</p>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<div class="up">
						<h2>持续更新中...</h2>
						<p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
						<p>原子组件库位置：@/components/xMini/*</p>
						<el-button type="primary" text @click="goIssue">提交想法</el-button>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	export default {
		name: 'minivab',
		data() {
			return {
				trendValue: 4.6,
				trendValue2: 0,
				trendValue3: -32
			}
		},
		mounted() {

		},
		methods: {
			goIssue(){
				window.open("https://gitee.com/lolicode/scui/issues")
			}
		}
	}
</script>

<style scoped>
	.up {text-align: center;}
	.up h2 {margin-bottom: 10px;}
	.up p {color: #999;line-height: 1.5;}
	.el-card {height:150px;}
</style>
