63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<template>
|
|
<view class="interest-analysis mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
|
|
<TitleBar title="兴趣分析与代表人物" />
|
|
|
|
<text class="text-[26rpx] text-[#666] leading-[40rpx] mb-[30rpx] block">
|
|
{{ description }}
|
|
</text>
|
|
|
|
<view class="flex items-center gap-[10rpx] mb-[16rpx]">
|
|
<view class="w-[5rpx] h-[30rpx] bg-[#1580FF]"></view>
|
|
<text class="text-[#1580FF] text-[32rpx]">代表人物</text>
|
|
<text class="text-[#999] text-[24rpx]">以下代表人物仅作为参考</text>
|
|
</view>
|
|
<view class="avatars-list grid grid-cols-4 gap-x-[52rpx] gap-y-[18rpx]">
|
|
<view
|
|
class="avatar-item flex flex-col items-center"
|
|
v-for="(person, index) in personList"
|
|
:key="index"
|
|
>
|
|
<image
|
|
:src="person.avatarUrl"
|
|
class="w-[120rpx] h-[120rpx] rounded-full"
|
|
mode="aspectFill"
|
|
></image>
|
|
<text class="mt-[10rpx] text-[26rpx] text-[28rpx] font-normal text-center">
|
|
{{ person.nickName }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { getTagMapPerson } from '@/service/index/api'
|
|
import TitleBar from './TitleBar.vue'
|
|
|
|
const props = defineProps({
|
|
tag: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const personList = ref([])
|
|
|
|
watch(
|
|
() => props.tag,
|
|
(newV) => {
|
|
console.log(newV)
|
|
|
|
getTagMapPerson({ tag: newV }).then((resp) => {
|
|
if (resp.code === 200) {
|
|
personList.value = resp.result as any[]
|
|
}
|
|
})
|
|
},
|
|
)
|
|
</script>
|