调整控制台样式

src/views/home/stats/components/C1.vue

@@ -56,11 +56,11 @@
 						symbol: 'none',
 						lineStyle: {
 							width: 1,
-							color: '#F56C6C'
+							color: '#409EFF'
 						},
 						areaStyle: {
 							opacity: 0.1,
-							color: '#F56C6C'
+							color: '#79bbff'
 						},
 						data: (function (){
 							var res = [];

src/views/home/stats/index.vue

@@ -8,8 +8,12 @@
 							<el-avatar :size="60" src="img/avatar.jpg"></el-avatar>
 						</div>
 						<div class="main">
-							<h2>嗨~ admin，忙碌了一上午，记得吃午饭哦。</h2>
+							<h2>欢迎体验SCUI</h2>
-							<p>最近更新：动态面包屑，外部链接，Iframe链接等</p>
+							<p>轻快是SCUI的宗旨，让一切复杂的东西简单化。并且没有免费收费版本区别。如果喜欢点个星星支持一下。
+								<a href='https://gitee.com/lolicode/scui' target="_blank">
+									<img src='https://gitee.com/lolicode/scui/badge/star.svg?theme=dark' alt='star' style="vertical-align: middle;height:18px;">
+								</a>
+							</p>
 						</div>
 						<div class="icons hidden-sm-and-down">
 							<div class="avatar-list">
@@ -30,18 +34,52 @@
 			</el-col>
 		</el-row>
 
-		<el-row :gutter="15">
+		<div class="data-box">
-			<el-col :span="24">
+			<el-row :gutter="15">
-				<el-card shadow="never" header="当前用户权限">
+				<el-col :span="8">
-					<el-tag v-if="$HAS('user.add')">user.add</el-tag>
+					<el-card shadow="never" class="item-background">
-					<el-tag v-if="$HAS('user.edit')">user.edit</el-tag>
+						<div class="item">
-					<el-tag v-if="$HAS('user.delete')">user.delete</el-tag>
+							<div class="main">
-					<el-tag v-if="$HAS('list.add')">list.add</el-tag>
+								<h2>今日收入</h2>
-					<el-tag v-if="$HAS('list.edit')">list.edit</el-tag>
+								<h4>¥1.9K</h4>
-					<el-tag v-if="$HAS('list.delete')">list.delete</el-tag>
+								<p><span class="down"><i class="el-icon-bottom"></i>-18.9%</span> 比昨日</p>
-				</el-card>
+							</div>
-			</el-col>
+							<div class="icon">
-		</el-row>
+								<i class="el-icon-data-analysis"></i>
+							</div>
+						</div>
+					</el-card>
+				</el-col>
+				<el-col :span="8">
+					<el-card shadow="never">
+						<div class="item">
+							<div class="main">
+								<h2>会员总数</h2>
+								<h4>68</h4>
+								<p><span class="up"><i class="el-icon-top"></i>+1.9%</span> 比昨日</p>
+							</div>
+							<div class="icon">
+								<i class="el-icon-user"></i>
+							</div>
+						</div>
+					</el-card>
+				</el-col>
+				<el-col :span="8">
+					<el-card shadow="never">
+						<div class="item">
+							<div class="main">
+								<h2>今日访客</h2>
+								<h4>108</h4>
+								<p><span class="up"><i class="el-icon-top"></i>+7.7%</span> 比昨日</p>
+							</div>
+							<div class="icon">
+								<el-progress type="dashboard" :percentage="25" :width="50"></el-progress>
+							</div>
+						</div>
+					</el-card>
+				</el-col>
+			</el-row>
+		</div>
 
 		<gridLayout></gridLayout>
 
@@ -81,4 +119,17 @@
 	.welTop .icons p {font-size: 12px;}
 	.avatar-list .avatar {margin-left: -10px;border: 3px solid #fff;cursor: pointer;}
 
+	.data-box {}
+	.data-box .item-background {background: #409EFF;color: #fff;}
+	.data-box .item-background .item h2 {color: #fff;}
+	.data-box .item-background .item p {color: rgba(255, 255, 255, 0.5);}
+	.data-box .item-background .item .icon i {background: rgba(255, 255, 255, 0.2);}
+	.data-box .item {display: flex;}
+	.data-box .item h2 {font-size: 12px;color: #999;font-weight: normal;}
+	.data-box .item h4 {font-size: 25px;margin:5px 0 5px 0;}
+	.data-box .item p {font-size: 12px;color: #999;}
+	.data-box .item .icon {margin-left: auto;display: flex;align-items: center;margin-right: 10px;}
+	.data-box .item .icon i {font-size: 18px;background: #409EFF;color: #fff;border-radius: 50%;width:32px;height: 32px;display: flex;align-items: center;justify-content: center;}
+	.data-box .item p span.up {color: #F56C6C;}
+	.data-box .item p span.down {color: #67C23A;}
 </style>