app/sheep/components/s-menu-grid/s-menu-grid.vue

<!-- 装修基础组件：宫格导航 -->
<template>
	<view class="user-tools">
		<view class="tools-header">
			<text class="tools-title">常用工具</text>
			<view class="tools-grid">
				<view class="tools-item" @tap="sheep.$router.go(item.url)" v-for="(item, index) in data.list.slice(0, 4)"
					:key="index">
					<image class="tools-icon" :src="sheep.$url.cdn(item.iconUrl)" mode="aspectFit" />
					<text class="tools-text">{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>
	<div class="container">
		<div class="menu-list">
			<div class="menu-item" @tap="sheep.$router.go(item.url)" v-for="(item, index) in data.list.slice(4)" :key="index">
				<div class="menu-row">
					<div class="menu-title">
						<img class="icon" :src="sheep.$url.cdn(item.iconUrl)" />
						<text class="text">{{ item.title }}</text>
					</div>
					<img class="arrow"
						src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/60938800883/9099/a51c/4f35/ba4922804bc38ca1168b7b3577ddf938.png" />
				</div>
				<div class="divider" v-if="index !== data.list.slice(4).length - 1"></div>
			</div>
		</div>
	</div>
	<!-- <view :style="[bgStyle, { marginLeft: `${data.space}px` }]">

		<uni-grid :showBorder="Boolean(data.border)" :column="data.column">
			<uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="sheep.$router.go(item.url)">
				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
					<view class="img-box">
						<view class="tag-box" v-if="item.badge.show"
							:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
							{{ item.badge.text }}
						</view>
						<image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
					</view>

					<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
						<view class="grid-text" :style="[{ color: item.titleColor }]">
							{{ item.title }}
						</view>
						<view class="grid-tip" :style="[{ color: item.subtitleColor }]">
							{{ item.subtitle }}
						</view>
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view> -->

</template>

<script setup>
import sheep from '@/sheep';
import {
	computed
} from 'vue';

const props = defineProps({
	// 装修数据
	data: {
		type: Object,
		default: () => ({}),
	},
	// 装修样式
	styles: {
		type: Object,
		default: () => ({}),
	},
});

</script>

<style lang="scss" scoped>
.user-tools {
	width: calc(100% - 32px);
	padding: 24rpx;
	border-radius: 16rpx;
	background-color: #fff;
	box-sizing: border-box;
	margin: 16px;

	.tools-header {
		position: relative;
		width: 620rpx;
		height: 190rpx;
	}

	.tools-title {
		font-size: 32rpx;
		font-family: 'Source Han Sans';
		font-weight: 600;
		line-height: 46rpx;
		color: #333;
	}

	.tools-grid {
		position: absolute;
		left: 16rpx;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		gap: 52rpx;
	}

	.tools-item {
		width: 112rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		font-size: 28rpx;
		font-family: 'Source Han Sans';
		font-weight: 400;
		line-height: 40rpx;
		color: #333;
	}

	.tools-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.tools-text {
		flex-shrink: 0;
	}
}

.container {
	display: flex;
	padding: 32rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	margin: 16px;

	.menu-list {
		display: flex;
		flex-direction: column;
		gap: 32rpx;
		width: 100%;

		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 32rpx;
			width: 622rpx;

			.menu-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.menu-title {
					display: flex;
					align-items: center;
					gap: 16rpx;
					font-size: 28rpx;
					font-family: 'Source Han Sans';
					line-height: 40rpx;
					color: #333333;

					.icon {
						width: 48rpx;
						height: 48rpx;
						flex-shrink: 0;
					}

					.text {
						flex-shrink: 0;
					}
				}

				.arrow {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}
			}

			.divider {
				width: 558rpx;
				height: 1rpx;
				background-color: #ebedf0;
			}
		}
	}
}
</style>