49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<view class="mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
|
|
<TitleBar :title="title" />
|
|
|
|
<view v-for="(item, index) in items" :key="index" class="suggestion-item">
|
|
<view class="text-[32rpx] font-700">{{ item.title }}</view>
|
|
<view class="mt-[20rpx] text-left" v-for="sonItem in item.items">
|
|
<view class="text-[#000] text-[26rpx] font-700">{{ sonItem.title }}</view>
|
|
<view class="mt-[10rpx] text-[26rpx] text-[#666]">
|
|
{{ sonItem.description }}
|
|
</view>
|
|
</view>
|
|
<view class="text-[26rpx] font-400 mt-[10rpx] text-[#666]">
|
|
{{ item.description instanceof Array ? item.description.join(',') : item.description }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import TitleBar from './TitleBar.vue'
|
|
defineProps({
|
|
items: {
|
|
type: Array<{
|
|
title: string
|
|
description?: string | []
|
|
items?: { title: string; description?: string }[]
|
|
}>,
|
|
default: () => [],
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.suggestion-item {
|
|
&:not(:last-child) {
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
</style>
|