feat(property-marketing): 优化报表页面布局和功能
- 重新设计了业务分析报告和竞品分析报告的页面布局 - 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式 - 更新了图表组件,支持更多图表类型 - 调整了路由模块中的报表名称
This commit is contained in:
@ -1,6 +1,7 @@
|
|||||||
.arco-input-wrapper,
|
.arco-input-wrapper,
|
||||||
.arco-select-view-single,
|
.arco-select-view-single,
|
||||||
.arco-textarea-wrapper,
|
.arco-textarea-wrapper,
|
||||||
|
.arco-picker,
|
||||||
.arco-select-view-multiple {
|
.arco-select-view-multiple {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border-color: #d7d7d9;
|
border-color: #d7d7d9;
|
||||||
@ -57,3 +58,5 @@
|
|||||||
border-top: 1px solid var(--Border-1, #d7d7d9);
|
border-top: 1px solid var(--Border-1, #d7d7d9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -21,6 +21,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
:deep(.arco-select-view-single),
|
||||||
|
:deep(.arco-select-view-multiple),
|
||||||
|
:deep(.arco-picker),
|
||||||
|
:deep(.arco-input-wrapper) {
|
||||||
|
border-radius: 4px;
|
||||||
|
border-color: #d7d7d9;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 224px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
&:focus-within,
|
||||||
|
&.arco-input-focus {
|
||||||
|
background-color: var(--color-bg-2);
|
||||||
|
border-color: rgb(var(--primary-6));
|
||||||
|
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.search-btn {
|
.search-btn {
|
||||||
// 搜索
|
// 搜索
|
||||||
color: var(--Brand-6, #6d4cfe);
|
color: var(--Brand-6, #6d4cfe);
|
||||||
|
|||||||
@ -31,6 +31,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
@import './style.scss';
|
@import './style.scss';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -66,8 +66,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import './style.scss';
|
@import './style.scss';
|
||||||
|
|||||||
@ -58,6 +58,7 @@
|
|||||||
:value-style="{
|
:value-style="{
|
||||||
color: record.week_consumption_rate > 0 ? '#F64B31' : '#25C883',
|
color: record.week_consumption_rate > 0 ? '#F64B31' : '#25C883',
|
||||||
fontStyle: 'normal',
|
fontStyle: 'normal',
|
||||||
|
fontSize: '14px',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
@ -181,10 +182,7 @@ const listResult = reactive({
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.custom-statistic .arco-statistic-value) {
|
|
||||||
font-size: 14px !important;
|
|
||||||
line-height: 1 !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
<PlacementSuggestions></PlacementSuggestions>
|
<PlacementSuggestions></PlacementSuggestions>
|
||||||
<ActionGuideDistribution></ActionGuideDistribution>
|
<ActionGuideDistribution></ActionGuideDistribution>
|
||||||
<div>
|
<div>
|
||||||
<a-space style="float: right; margin-top: 10px; margin-bottom: 20px">
|
<a-space class="down-btn">
|
||||||
<a-button type="outline" @click="handleSearch">
|
<a-button type="outline" @click="handleSearch">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-download />
|
<icon-download />
|
||||||
@ -64,4 +64,6 @@ const listQuery = reactive({
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './style.scss';
|
@import './style.scss';
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -9,12 +9,17 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
:deep(.arco-tabs) {
|
|
||||||
|
.arco-tabs {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 76px;
|
||||||
|
|
||||||
.arco-tabs-tab {
|
.arco-tabs-tab {
|
||||||
height: 56px;
|
height: 56px;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.part-div-header {
|
.part-div-header {
|
||||||
@ -161,3 +166,11 @@
|
|||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.down-btn {
|
||||||
|
float: right;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user