同步版本

components/store-staff/store-staff.vue

@@ -0,0 +1,159 @@
+<template>
+	<view class="staff">
+		员工
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"store-staff",
+		props:{
+			// 店铺统计
+			top: {
+				type: Object,
+				default: ()=> {
+					return {
+						barter_total: 0,
+						trading_day	: 0,
+						eb_in		: 0,
+						cash_in		: 0
+					}
+				}
+			},
+			// 店铺概况
+			middle: {
+				type: Object,
+				default: ()=> {
+					return {
+						visitors : 0,
+						clinch	 : 0,
+						employees: 0,
+						sale	 : 0,
+						hold	 : 0,
+						transfer : 0
+					}
+				}
+			},
+			// 店铺订单
+			order: {
+				type: Object,
+				default: ()=> {
+					return {
+						not_shipped		: 0,
+						already_shipped	: 0,
+						not_pick		: 0,
+						already_pick	: 0,
+						after_sale		: 0
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.staff{
+		// 店铺统计
+		.statistical{
+			display: flex;
+			background: $text-price;
+			padding: $padding ($padding/2) $padding*5;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			.item{
+				width: calc(25% - #{$padding});
+				text-align: center;
+				color: white;
+				margin: 0 $margin / 2;
+				.number{
+					font-weight: bold;
+					font-size: $title-size;
+				}
+				.text{
+					font-size: $title-size-sm;
+				}
+			}
+		}
+		// 店铺概况
+		.general{
+			margin: -$margin*4 $margin 0 $margin;
+			.general-box{
+				background-color: white;
+				border-radius: $radius/2;
+				display: flex;
+				padding: $padding $padding/2;
+				flex-wrap: wrap;
+				.general-item{
+					width: 33.33%;
+					text-align: center;
+					padding: $padding/2;
+					box-sizing: border-box;
+					.number{
+						font-weight: bold;
+						font-size: $title-size;
+						line-height: 50rpx;
+					}
+					.text{
+						font-size: $title-size-sm;
+						color: $text-gray;
+						line-height: 40rpx;
+					}
+				}
+			}
+		}
+		// 店铺工具
+		.tool-flex{
+			background: white;
+			border-radius: $radius/2;
+			padding: $padding/2;
+			margin: $margin;
+			display: flex;
+			flex-wrap: wrap;
+			.store-item{
+				padding: $padding/2;
+				text-align: center;
+				width: 25%;
+				box-sizing: border-box;
+				.icon{
+					width: 68rpx;
+					height: 68rpx;
+					vertical-align: top;
+				}
+				.title{
+					font-size: $title-size-sm;
+					color: $text-gray;
+					padding-top: $padding/3;
+				}
+			}
+			.order-item{
+				position: relative;
+				padding: $padding/2;
+				text-align: center;
+				width: 20%;
+				box-sizing: border-box;
+				.icon{
+					width: 58rpx;
+					height: 58rpx;
+					vertical-align: top;
+				}
+				.title{
+					font-size: $title-size-sm;
+					color: $text-gray;
+				}
+				.number{
+					position: absolute;
+					top: 10rpx;
+					left: calc( 50% + 10rpx );
+					font-size: $title-size-sm;
+					background: $text-price;
+					color: white;
+					height: 30rpx;
+					line-height: 30rpx;
+					border-radius: 15rpx;
+					min-width: 30rpx;
+					z-index: 9;
+				}
+			}
+		}
+	}
+</style>