zyejMAll-mobile/sheep/components/s-menu-list/s-menu-list.vue

<!-- 装修基础组件：列表导航 -->
<template>
	<view class="menu-list-wrap">
		<uni-list :border="true">
			<uni-list-item v-for="(item, index) in data.list" :key="index" showArrow clickable
				@tap="sheep.$router.go(item.url)">
				<template v-slot:header>
					<view class="ss-flex ss-col-center">
						<image v-if="item.iconUrl" class="list-icon" :src="sheep.$url.cdn(item.iconUrl)"
							mode="aspectFit"></image>
						<view class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20"
							:style="[{ color: item.titleColor }]">
							{{ item.title }}
						</view>
					</view>
				</template>
				<template v-slot:footer>
					<view class="notice-text ss-flex ss-row-center ss-col-center new-color"
						:style="[{ color: item.subtitleColor }]">
						{{ item.subtitle }}
					</view>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script setup>
	/**
	 * cell
	 */
	import sheep from '@/sheep';
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
	});
</script>

<style lang="scss">
	 :deep(.container--right){
		padding-left: 5px !important;
	}
	.new-color{
		font-size: 13px;
	}
	.ss-col-center{
		.list-icon {
			position: relative;
			width: 100px;
			height: 40px;
			padding-right: 10px;
			&::after{
				position:absolute;
				content:'';
				top:50%;
				right:0;
				width:1px;
				height:57%;
				border-right:1px solid #ababab;
				transform: translateY(-50%);
			}
		}
	}
	

	.notice-text {}

	.menu-list-wrap {
		::v-deep .uni-list {
			background-color: transparent;
		}
	}
</style>