623ffb13e3
- 在 YlTable 组件中添加 RenderSlot 组件，实现自定义渲染功能 - 在 HomeRecommend 组件中使用自定义渲染功能，根据数据动态显示颜色 - 优化 HomeRecommend组件的代码结构
111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { recommend } from '@/hooks/request/recommend';
|
|
import { ref } from 'vue';
|
|
import YlTable from '@/components/YlTable/Index.vue';
|
|
import CommonLayout from '@/components/Layout/CommonLayout.vue';
|
|
|
|
// 外部获取的数据
|
|
const { data } = recommend({});
|
|
const props = ref<TablePropsType[]>([
|
|
{
|
|
prop: 'rank',
|
|
label: '排名',
|
|
width: 58
|
|
},
|
|
{
|
|
prop: 'trend_name',
|
|
label: '趋势名称',
|
|
width: 100
|
|
},
|
|
{
|
|
prop: 'growth_ring_ratio',
|
|
label: '声量增长环比',
|
|
width: 120
|
|
},
|
|
{
|
|
prop: 'sales_growth_ring_ratio',
|
|
label: '销量增长环比',
|
|
width: 120,
|
|
render: (h, p) => {
|
|
return h(
|
|
'div',
|
|
{
|
|
style: {
|
|
color: p.row.sales_growth_ring_ratio < 0 ? 'red' : 'green'
|
|
}
|
|
},
|
|
p.row.sales_growth_ring_ratio
|
|
);
|
|
}
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<van-cell class="home_recommend">
|
|
<template #extra>
|
|
<div style="width: 90vw">
|
|
<common-layout title="123">
|
|
<template #title>
|
|
<h3 class="recommend-layout-title">内容推荐</h3>
|
|
</template>
|
|
|
|
<span class="recommend-title">{{ data?.title }}</span>
|
|
<yl-table
|
|
style="margin-top: 10px"
|
|
:header-style="{ background: '#E8F9F4' }"
|
|
:data="data?.surveyTrendDataVOS"
|
|
:props="props"
|
|
/>
|
|
<!-- 剧中展示提示语 -->
|
|
<div class="more">
|
|
<span>- 最新数据及更多创新趋势请到YIP探索 - </span>
|
|
</div>
|
|
</common-layout>
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use '@/assets/css/theme' as *;
|
|
|
|
.home_recommend {
|
|
border-radius: $card-radius;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.recommend-layout-title {
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 15px;
|
|
color: #000000;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.recommend-title {
|
|
color: #000000;
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
line-height: 15px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.more {
|
|
margin: 5px;
|
|
color: #919191;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|