75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
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> |