renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 页面样式优化

Browse Source
This commit is contained in:
rd
2025-06-30 18:37:27 +08:00
parent bce406d2ca
commit a486d42fa5
8 changed files with 354 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/views/components/dataEngine/topHeader.vue
View File

@ -3,95 +3,86 @@
<!-- 头部 -->
<a-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid"
style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0; color: #737478; font-size: 14px"
>
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
<span style="width: 60px; flex-shrink: 0; line-height: 28px">行业大类</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
<a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<span style="flex-shrink: 0; line-height: 28px" class="mr-32px">行业大类</span>
<div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
<a-tag
size="Medium"
v-for="item in industriesTree"
:key="item.id"
size="Medium"
:checkable="true"
:checked="selectedIndustry == item.id"
@check="handleIndustryCheck(item.id)"
style="padding: 4px 16px; border-radius: 30px; height: 28px"
style="padding: 10px 16px; border-radius: 30px; height: 28px"
:style="
selectedIndustry == item.id
? 'color: #6d4cfe; background-color: #f0edff'
? 'color: #6D4CFE; background-color: #F0EDFF'
: 'color: #3C4043; background-color: #F7F8FA'
"
@check="handleIndustryCheck(item.id)"
>{{ item.name }}</a-tag
>
</div>
</a-space>
<!-- 二级类目 -->
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
<span style="width: 60px; flex-shrink: 0; line-height: 28px">二级类目</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
<a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<span style="flex-shrink: 0; line-height: 28px" class="mr-32px">二级类目</span>
<div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
<a-tag
size="Medium"
v-for="item in subCategories"
:key="item.id"
size="Medium"
:checkable="true"
:checked="selectedSubCategory == item.id"
@check="handleSubCategoryCheck(item.id)"
style="padding: 4px 16px; border-radius: 30px; height: 28px"
style="padding: 10px 16px; border-radius: 30px; height: 28px"
:style="
selectedSubCategory == item.id
? 'color: #6d4cfe; background-color: #f0edff'
: 'color: #3C4043; background-color: #F7F8FA'
"
@check="handleSubCategoryCheck(item.id)"
>{{ item.name }}</a-tag
>
</div>
</a-space>
<!-- </a-space> -->
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
<span style="width: 60px; flex-shrink: 0; line-height: 28px">时间筛选</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
<a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<span style="flex-shrink: 0; line-height: 28px" class="mr-32px">时间筛选</span>
<div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
<a-tag
size="Medium"
v-for="item in timePeriods"
:key="item.value"
size="Medium"
:checkable="true"
:checked="selectedTimePeriod == item.value"
@check="handleTimePeriodCheck(item.value)"
style="padding: 4px 16px; border-radius: 30px; height: 28px"
style="padding: 10px 16px; border-radius: 30px; height: 28px"
:style="
selectedTimePeriod == item.value
? 'color: #6d4cfe; background-color: #f0edff'
: 'color: #3C4043; background-color: #F7F8FA'
"
@check="handleTimePeriodCheck(item.value)"
>{{ item.label }}
</a-tag>
</div>
</a-space>
<!-- 搜索区域 -->
<a-space style="margin-left: 'auto'; margin-top: 20px">
<a-button type="primary" @click="handleSearch">
<a-space style="margin-left: 'auto'">
<a-button type="primary" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<!-- Use the default slot to avoid extra spaces -->
<template #default>搜索</template>
</a-button>
<div
@click="handleReset"
style="
width: 92px;
height: 32px;
font-size: 14px;
color: #3c4043;
border: 1px solid #d7d7d9;
text-align: center;
line-height: 32px;
border-radius: 4px;
"
>
<icon-refresh></icon-refresh>
<span>重置</span>
</div>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>
<template #default>重置</template>
</a-button>
</a-space>
</a-space>
</view>
@ -101,6 +92,7 @@
import { ref, computed } from 'vue';
import { fetchIndustriesTree } from '@/api/all/index';
const emit = defineEmits<(e: 'search') => void>();
// 行业大类
const industriesTree = ref([]);
// 数据状态
@ -169,9 +161,6 @@ const getIndustriesTree = async () => {
subCategories.value.unshift({ id: 0, name: '全部' });
}
};
const emit = defineEmits<{
(e: 'search'): void;
}>();
// 搜索
const handleSearch = () => {
emit('search');
@ -183,7 +172,7 @@ const handleReset = () => {
};
</script>
<style scoped>
<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
background-color: var(--color-fill-2);
@ -199,4 +188,12 @@ const handleReset = () => {
:deep(.arco-modal-body) {
padding: 0px;
}
.reset-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
</style>