app/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" :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">
.list-icon {
  width: 20px;
  height: 20px;
}

.notice-text {}

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