saas_member_mobile/pages/management/index.vue

<template>
	<view class="management">
		<u-navbar placeholder :safeAreaInsetTop="true" bgColor="#363C4F">
			<view class="u-nav-left" slot="left" style="height:100%;display: flex;
    align-items: center;">
				管理
			</view>
			<view class="u-nav-center" slot="center">
			</view>
		</u-navbar>
		<view class="manageStyle">
			<view class="dis_flex userBox">
				<img src="@/static/logo.png" alt="">
				<view class="userInfo">
					<h3>欧阳娜娜</h3>
					<p>深圳乔恩心理咨询有限公司</p>
				</view>
				<view class="exit">
					<img src="@/static/images/icon_exit@2x.png" alt="">
					<text>退出</text>
				</view>
			</view>
			<view class="bg"></view>
		</view>
		<view class="card_box">
			<view class="c1">
				<view class="title_style">
					<h3>蜜雪冰城（天河店）</h3>
					<img src="@/static/images/chevron-down@2x.png" alt="">
				</view>
				<view class="all_price_box dis_flex">
					<view class="left">
						<h2>5233.09</h2>
						<p>会员消费总金额(元)</p>
					</view>
					<view class="right">
						<text>2023/05/12</text>
						<img src="@/static/images/icon_zk@2x.png" alt="">
					</view>
				</view>
				<view class="fg"></view>
				<view class="bottom_tab dis_flex">
					<view class="li" v-for="(item,index) in 4" :key="index">
						<h3>2313</h3>
						<text>回头客</text>
					</view>
				</view>
			</view>
			<view class="c1">
				<view class="title_style">
					<h3>管理工具</h3>
				</view>
				<u-grid :border="false" col="4">
					<u-grid-item class="grid_item" v-for="(item,index) in tab_list" :key="index"
						@click="active_li(item,index)">
						<img style="width:56rpx;height:56rpx;" :src="item.icon" alt="">
						<text class="grid-text">{{item.label}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_list: [{ 
					label: "店铺管理",
					icon: require("@/static/images/icon_dpgl@2x.png"),
					path: "/pagesA/shop/index"
				}, {
					label: "会员管理",
					icon: require("@/static/images/icon_hygl@2x.png"),
					path: "/pagesA/member/index"
				}, {
					label: "核销管理",
					icon: require("@/static/images/icon_hxgl@2x.png"),
					path: "/pagesA/destroy/index"
				}, {
					label: "冲账管理",
					icon: require("@/static/images/icon_czgl@2x.png"),
					path: "/pagesA/strikeBalance/index"
				}, {
					label: "店员管理",
					icon: require("@/static/images/icon_dygl@2x.png"),
					path: "/pagesA/clerk/index"
				}, {
					label: "商品分类",
					icon: require("@/static/images/icon_spfl@2x.png"),
					path: "/pagesA/commodity/index"
				}, { 
					label: "商品管理",
					icon: require("@/static/images/icon_spgl@2x.png"),
					path: "/pagesA/goodsInfo/index"
				}, {
					label: "系统设置",
					icon: require("@/static/images/icon_xtsz@2x.png")
				}, ] 
			}
		},
		onLoad() {},
		onReady() {},
		methods: {
			active_li(item, index) {
				uni.navigateTo({
					url: item.path
				})
				console.log(item, index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_box {
		padding: 0rpx 32rpx;
		margin-top: -244rpx;

		&>.c1 {
			border-radius: 24rpx;
			background-color: #fff;
			padding: 32rpx;
			margin-bottom: 34rpx;

			&>.title_style {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				&>h3 {
					color: #222222;
					font-weight: bold;
					font-size: 28rpx;
				}

				&>img {
					width: 24rpx;
					height: 24rpx;
					margin-left: 6rpx;
				}
			}

			&>.all_price_box {
				&>.left {
					&>h2 {
						font-size: 60rpx;
						font-weight: 500;
						color: #F9722E;
						margin-bottom: 14rpx;
					}

					&>p {
						font-size: 24rpx;
						font-family: OPPOSans-Regular, OPPOSans;
						font-weight: 400;
						color: #909398;
					}
				}

				&>.right {
					background: #F7F7F7;
					border-radius: 104rpx;
					padding: 18rpx 24rpx;
					display: flex;
					align-items: center;

					&>text {
						font-size: 26rpx;
						font-weight: 400;
						color: #4A4A4B;
					}

					&>img {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
					}
				}
			}

			&>.fg {
				margin: 40rpx 0rpx;
				height: 1rpx;
				background-color: #e1e1e1;
			}

			&>.bottom_tab {
				margin-bottom: 16rpx;
				padding: 0rpx 30rpx;

				&>.li {
					text-align: center;

					&>h3 {
						font-size: 40rpx;
						font-weight: 500;
						color: #4A4A4B;
						margin-bottom: 8rpx;
					}

					&>text {
						font-size: 24rpx;
						font-weight: 400;
						color: #909398;
					}
				}
			}
		}
	}

	.u-nav-left,
	.u-nav-center {
		color: #fff;
	}

	.management {
		background-color: #F5F6FA;
		height: 100vh;
	}

	.manageStyle {
		&>.bg {
			height: 218rpx;
			background: linear-gradient(180deg, #363C4F 0%, rgba(54, 60, 79, 0) 100%);
		}
	}

	.userBox {
		background-color: #363C4F;
		padding: 32rpx;
		padding-bottom: 94rpx;

		&>img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			overflow: hidden;
		}

		&>.userInfo {
			flex: 1;
			margin: 0rpx 24rpx;

			&>h3 {
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 8rpx;
			}

			&>p {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, .8);
			}
		}

		&>.exit {
			display: flex;
			align-items: center;
			border-radius: 80rpx;
			background-color: #4b5260;
			color: rgba(255, 255, 255, .7);
			padding: 16rpx 20rpx;
			font-size: 26rpx;

			&>img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}

	::v-deep .u-grid-item {
		margin-bottom: 56rpx;
	}

	.grid-text {
		margin-top: 28rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(74, 74, 75, .8);
	}
</style>