工作251:数据分析的页面处理

<template>
	<view>
		<view style="display: flex;">
			<view class="row_1 common">
				<view style="display: flex;flex-direction: column;">
					<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/price.png"></u-image>
					<text class="icon">交易商品统计</text>
				</view>
			</view>
			
			<view class="row_2 common">
				<view style="display: flex;flex-direction: column;">
					<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/jiaoyi.png"></u-image>
					<text class="icon">商品类别统计</text>
				</view>
			</view>
			<view class="row_3 common">
				<view style="display: flex;flex-direction: column;">
					<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/shanghu.png"></u-image>
					<text class="icon">商品销量统计</text>
				</view>
			</view>
		</view>
		<view style="display: flex;">
			
		<view style="display: flex;flex-direction: column;">
			<view class="row_4 common">
				<view style="display: flex;flex-direction: column;">
					<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/zoushi.png"></u-image>
					<text class="icon">摊位类型统计</text>
				</view>
			</view>
			<view style="display: flex;">
				<view class="row_5 common">
					<view style="display: flex;flex-direction: column;">
						<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/tongji.png"></u-image>
						<text class="icon">交易统计分析</text>
					</view>
				</view>
				<view class="row_6 common">
					<view style="display: flex;flex-direction: column;">
						<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/money.png"></u-image>
						<text class="icon">历史交易对比</text>
					</view>
				</view>
			</view>
		</view>
	<view class="row_7 common">
		<view style="display: flex;flex-direction: column;">
			<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/pricecount.png"></u-image>
			<text class="icon">支付方式分析</text>
		</view>
	</view>
	</view>
		<view style="display: flex;">
			<view class="row_8 common">
				<view style="display: flex;flex-direction: column;">
					<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/pricelei.png"></u-image>
					<text class="icon">商品价格走势</text>
				</view>
			</view>
			<view class="row_9 common">
				<view style="display: flex;flex-direction: column;">
					<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/tanwei.png"></u-image>
					<text class="icon">客流数据分析</text>
				</view>
			</view>
			<view class="row_10 common">
				<view style="display: flex;flex-direction: column;">
					<u-image style="margin-left: 40rpx;" width="60rpx" height="60rpx" src="../../static/analysis_list/zhifu.png"></u-image>
					<text class="icon">客流统计分析</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.row_8 {
		margin: 30rpx 0 0 30rpx;
		width: 214rpx;
		height: 192rpx;
		
background: linear-gradient(90deg, #F5C053 0%, #F8AD11 100%);
		opacity: 1;
		border-radius: 8rpx;
	
	}
	.row_9 {
			margin: 30rpx 0 0 30rpx;
			width: 214rpx;
			height: 192rpx;
			
	
background: linear-gradient(90deg, #5CBEFC 0%, #33AEF9 100%);
			opacity: 1;
			border-radius: 8rpx;
		
		}
	.row_1 {
		margin: 30rpx 0 0 30rpx;
		width: 214rpx;
		height: 192rpx;
		background: linear-gradient(180deg, #71C8F3 0%, #1FADEA 100%);
		opacity: 1;
		border-radius: 8rpx;

	}

	.row_2 {
		margin: 30rpx 0 0 30rpx;
		width: 214rpx;
		height: 192rpx;
		background: linear-gradient(180deg, #F8B87A 0%, #F88213 100%);
		opacity: 1;
		border-radius: 8rpx;

	}

	.row_3 {
		margin: 30rpx 0 0 30rpx;
		width: 214rpx;
		height: 192rpx;
		background: linear-gradient(180deg, #3DD5FE 0%, #05B1FA 100%);
		opacity: 1;
		border-radius: 8rpx;

	}

	.row_4 {
		margin: 30rpx 0 0 30rpx;
		width: 452rpx;
		height: 192rpx;
		background: url(../../static/analysis_list/tanwei1.png);
		opacity: 1;
		border-radius: 8rpx;

	}

	.row_5 {
		margin: 30rpx 0 0 30rpx;
		width: 214rpx;
		height: 192rpx;

		background: linear-gradient(180deg, #C49BFA 0%, #9866FF 100%);
		opacity: 1;
		border-radius: 8rpx;

	}

	.row_6 {
		width: 214rpx;
		height: 192rpx;
		margin: 30rpx 0 0 30rpx;
		width: 214rpx;
		height: 192rpx;
		background: linear-gradient(180deg, #FA946B 0%, #FA682E 100%);
		opacity: 1;
		border-radius: 8rpx;

	}
	.row_7 {
		margin: 24rpx 0 0 24rpx;
		width: 214rpx;
		height: 408rpx;
	
background: linear-gradient(180deg, #71C3F3 0%, #1FB4EA 100%);
		opacity: 1;
		border-radius: 8rpx;
	
	}

	.common {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.icon {

		font-size: 24rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 19rpx;
	}
	.row_10 {
		margin: 30rpx 0 0 30rpx;
		width: 214rpx;
		height: 192rpx;
	
			background: url(../../static/analysis_list/ren.png);
		opacity: 1;
		border-radius: 8rpx;
	
	}
</style>

运行结果