<template>
	<view>
		<!-- 用户信息 -->
		<view class="user">
			唐明明
		</view>
		<!-- 收藏 -->
		<view class="tool-block">
			<view class="tool-content">
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">商品收藏</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">店铺收藏</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">浏览记录</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">优惠券</view>
				</view>
			</view>
		</view>
		<!-- 易货订单 -->
		<view class="tool-block">
			<view class="title">
				<view class="title-mian">
					易货订单
				</view>
				<view class="title-more">
					全部订单<uni-icons type="arrowright" size="30" />
				</view>
			</view>
			<view class="order-content">
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">待付款</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">待发货</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">待提货</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">待评价</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">退换货</view>
				</view>
			</view>
		</view>
		<!-- 易货中心 -->
		<view class="tool-block">
			<view class="title">
				<view class="title-mian">
					易货中心管理
				</view>
				<view class="title-more">
					交易中心<uni-icons type="arrowright" size="30" />
				</view>
			</view>
			<view class="tool-content">
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">上架中</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">寄存中</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">低价求购</view>
				</view>
			</view>
		</view>
		<!-- 我的资产 -->
		<view class="tool-block">
			<view class="title">
				<view class="title-mian">
					我的资产
				</view>
			</view>
			<view class="tool-content">
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">原石</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">贡献值</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">易币</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">零钱</view>
				</view>
			</view>
		</view>
		<!-- 管理工具 -->
		<view class="tool-block">
			<view class="title">
				<view class="title-mian">
					管理工具
				</view>
			</view>
			<view class="tool-content">
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">店铺管理</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">员工管理</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">营销管理</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">产品管理</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">核销管理</view>
				</view>
				<view class="item">
					<image class="item-cover" src="" mode="aspectFill"></image>
					<view class="item-title">卡券管理</view>
				</view>
			</view>
		</view>
		<!-- 版权信息 -->
		<view class="copyright">易品新境 beta 1.0.0</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	// 用户卡片
	.user{
		background: white;
		margin: $margin;
		border-radius: $radius;
		box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
		text-align: center;
		padding: $padding * 2;
	}
	// 工具块
	.tool-block{
		background: white;
		margin: $margin;
		border-radius: $radius;
		box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
		.title{
			display: flex;
			justify-content: space-between;
			border-bottom: solid 1rpx $border-color-lg;
			padding: ($padding - 10) $padding ($padding/2);
			.title-mian{
				font-size: $title-size + 4;
				font-weight: bold;
				line-height: 60rpx;
				color: $text-color;
			}
			.title-more{
				font-size: $title-size-lg;
				color: $text-gray;
				line-height: 60rpx;
			}
		}
	}
	// 营销工具
	.tool-content{
		padding: $padding - 10;
		display: flex;
		flex-wrap: wrap;
		.item{
			width: calc(25% - #{($margin / 3) * 2});
			margin: ($margin/2) ($margin / 3);
			text-align: center;
			.item-cover{
				background: #999999;
				width: 68rpx;
				height: 68rpx;
				vertical-align: top;
			}
			.item-title{
				font-size: $title-size-sm;
				padding-top: $padding/3;
				color: $text-gray;
			}
		}
	}
	// 订单
	.order-content{
		@extend .tool-content;
		.item{
			width: calc(20% - #{($margin / 3) * 2});
		}
	}
	// 易品新境
	.copyright{
		padding: $padding 0 ($padding * 2);
		text-align: center;
		font-size: $title-size-sm;
		color: $text-gray-m;
	}
</style>
