guosen-ldt-mall/pages/index/index.vue

<template>
	<view class="">
		<view style="position: relative;">
			<image src="../../static/icon/bg.png"  style="width: 100vw;height: 400rpx"></image>
			<view class="card-top" >
				<view class="top">
					<text class="name">商场名称</text>
					<view class="btn">
						<view class="image">
							<image src="../../static/icon/chongzhi.png" mode=""></image>
						</view>
						<navigator url="../recharge/recharge" class="center padding-left-10" >
							<text>充值</text>
							<text class="cuIcon-right"></text>
						</navigator>
					</view>
				</view>
				
				<view class="menu-list">
					<view @click="$jump('/pages/stores/stores')" class="menu menu1">
						<view class="menu-top">
							<image src="../../static/icon/mendian.png"></image>
							<view class="center padding-left-20">
								<text class="text-lg">我的门店</text>
							</view>
						</view>
						<view class="padding-top-20 text-df">
							<text>门店数量</text>
							<text class="padding-left-20">1066</text>
						</view>
					</view>
					<view class="menu menu2" @click="$jump('/pages/member-center/member-center')">
						<view class="menu-top">
							<image src="../../static/icon/huiyuan.png"></image>
							<view class="center padding-left-20">
								<text class="text-lg">会员中心</text>
							</view>
						</view>
						<view class="padding-top-20 text-df">
							<text>会员总数</text>
							<text class="padding-left-20">106600</text>
						</view>
					</view>
				</view>
				
				<view class="cu-list grid col-3 no-border" style="border-radius:20rpx ;">
					<view class="cu-item" >
						<text style="color: #FF9447;font-size: 34rpx;font-weight: 800;">4100.00</text>
						<text  style="color: #242424;font-size: 26rpx;" >今日营收</text>
					</view>
					<view class="cu-item" >
						<text style="color: #FF9447;font-size: 34rpx;font-weight: 800;">330</text>
						<text  style="color: #242424;font-size: 26rpx;" >交易笔数</text>
					</view>
					<view class="cu-item" >
						<text style="color: #FF9447;font-size: 34rpx;font-weight: 800;">88</text>
						<text  style="color: #242424;font-size: 26rpx;" >新增会员</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="market" >
			<text class="title">营销管理</text>
			
			<view class="cu-list grid col-2 no-border margin-top-30" >
				<view class="cu-item" @click="$jump(item.path)" v-for="(item,index) in marketList" :key="index">
					<view class="center">
						<view class="icon" :style="item.background">
							<image :src="item.icon" mode=""></image>
						</view>
					</view>
					<text  style="color: #222222;font-size: 26rpx;margin-top: 20rpx;" >{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="mall">
			<view class="flex justify-between">
				<text class="title">商场管理</text>
				<view class="" style="color: #A3A3A3;font-size: 24rpx;">
					<text >查看全部</text>
					<text class="cuIcon-right" style="margin-left: 4rpx;"></text>
				</view>
			</view>
			<view class="cu-list grid col-4 no-border" style="border-radius:20rpx;margin-top: 50rpx;">
				<view class="cu-item" @click="$jump(item.path)" v-for="(item,index) in mallList" :key="index">
					<view class="grid-icon" >
						<image  style="width: 60rpx;height: 60rpx" :src="item.icon"/>
					</view>
					<text  style="color: #222222;font-size: 26rpx;" >{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="" style="height: 60rpx;" v-if="safeAreaBottom == 0"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				marketList:[
					{
						icon:'/static/icon/publish.png',
						name:'发起活动',
						background:"background-image:linear-gradient(#FF9549,#FCB07B)",
						path:'/pages/publish/publish'
					},
					{
						icon:'/static/icon/list.png',
						name:'活动清单',
						background:"background-image:linear-gradient(#5892F7,#67BBF9)",
						path:'/pages/activity/activity'
					},
				],
				mallList:[
					{
						icon:'/static/icon/mall.png',
						name:'商家管理',
						path:''
					},
					{
						icon:'/static/icon/shanghu.png',
						name:'商户审核',
						path:''
					},
					{
						icon:'/static/icon/tag.png',
						name:'标签管理',
						path:''
					},
					{
						icon:'/static/icon/audit.png',
						name:'活动审核',
						path:''
					},
				]
			}
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.icon{
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		padding: 20rpx;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	
	.card-top{
		height: 400rpx;
		position: relative;
		margin: -236rpx 20rpx 0;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
		.top{
			padding: 40rpx 0 30rpx 60rpx;
			display:flex;
			justify-content: space-between;
			
			.name{
				font-weight: 800;
				font-size: 32rpx;
			}
			
			.btn{
				display: flex;
				
				.image{
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					background-color: #FFFFFF;
					padding: 8rpx;
					image{
						width: 20rpx;
						height: 20rpx;
					}
				}
				
				color: #FFFFFF;
				border-radius: 50rpx 0 0 50rpx;
				padding:8rpx 10rpx 8rpx 35rpx;
				background-image: linear-gradient(to right,#FFD67B,#F99200);
			}
		}
		
		.menu-list{
			display: flex;
			justify-content: space-around;
			padding: 20rpx;
			
			.menu{
				width: 48%;
				color: #FFFFFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 14rpx;
				padding:30rpx 20rpx;
				
				.menu-top{
					display: flex;
					image{
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
			
			.menu1{
				background-color: #5C6186;
			}
			.menu2{
				background-color: #E19D5B;
			}
		}
	}
	
	.market{
		border-radius: 20rpx;
		margin:140rpx 20rpx 0;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx 20rpx;
		.title{
			font-weight: 800;
		}
	}
	
	.mall{
		border-radius: 20rpx;
		margin:30rpx 20rpx 0;
		background-color: #FFFFFF;
		padding: 30rpx 10rpx 20rpx 50rpx;
		.title{
			font-weight: 800;
		}
	}
</style>