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

refactor(brand-materials):重构品牌物料页面

Browse Source 
- 优化页面布局和样式，使用 flex布局
- 重新组织组件结构，提高可维护性- 改进搜索和分页功能，提升用户体验
- 统一按钮和输入框样式，增强一致性
- 移除冗余代码，提高代码可读性
This commit is contained in:
林志军
2025-07-01 13:55:54 +08:00
parent e6d0e19fb4
commit d0d459e0e0
7 changed files with 436 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="chart-container">
<div >
<a-card :bordered="false" class="echart-item-card">
<template #title>
<span class="a-card-title" >{{ title.name }}</span>
<span class="a-card-title">{{ title.name }}</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
@ -18,7 +18,6 @@
<script setup lang="ts">
import { defineProps, onMounted } from 'vue';
import * as echarts from 'echarts';
import { Card } from '@arco-design/web-vue';
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
//子组件参数传递
const props = defineProps({

3
src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss
View File

@ -1,8 +1,9 @@
.echart-item-card {
width: 100%;
height: 50%;
margin: 13px;
border-radius: 10px;
margin-bottom: 24px;
:deep(.arco-card-header) {
border-bottom: none !important;

139
src/views/property-marketing/put-account/account-dashboard/index.vue
View File

@ -1,84 +1,63 @@
<template>
<view>
<div class="part-div">
<div>
<a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="acctoun">
<a-tab-pane key="acctoun" title="账户"></a-tab-pane>
<a-tab-pane key="project">
<template #title>项目</template>
</a-tab-pane>
</a-tabs>
<div class="account-dashboard-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
<a-tabs>
<a-tab-pane :key="1" title="账户"></a-tab-pane>
<a-tab-pane :key="2" title="项目"></a-tab-pane>
</a-tabs>
<div class="container px-24px">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">账号名称</span>
<a-select multiple placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
</div>
<div class="filter-row-item flex items-center">
<span class="label">平台</span>
<a-select placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
</div>
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-select placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
</div>
</div>
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>
<template #default>重置</template>
</a-button>
</div>
</div>
<a-space size="large" direction="vertical" class="search-form">
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
<a-col :span="5">
<a-space>
<span>账户名称</span>
<a-select :style="{ width: '320px' }" placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
</a-space>
</a-col>
<a-col :span="5">
<a-space>
<span>平台</span>
<a-select :style="{ width: '320px' }" placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
</a-space>
</a-col>
<a-col :span="5">
<a-space>
<span>运营人员</span>
<a-select :style="{ width: '320px' }" placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
</a-space>
</a-col>
</a-row>
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
<a-col :span="6">
<a-space>
<span>时间筛选</span>
<a-range-picker
showTime
:time-picker-props="{
defaultValue: ['00:00:00', '00:00:00'],
}"
@change="onChange"
@select="onSelect"
style="width: 380px"
/>
</a-space>
</a-col>
<a-col :span="5">
<a-space>
<a-button type="outline" class="search-btn" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button type="outline" class="reset-btn" @click="handleSearch">
<template #icon>
<icon-refresh />
</template>
<template #default>重置</template>
</a-button>
</a-space>
</a-col>
</a-row>
</a-space>
</div>
<div>
<div class="table-wrap rounded-8px py-5px flex-1 flex flex-col">
<a-row class="grid-demo" :gutter="24">
<a-col :span="12">
<EchartsItem
@ -179,10 +158,10 @@
</a-col>
</a-row>
</div>
</view>
</div>
</template>
<script setup lang="ts">
import EchartsItem from './components/echarts-item/index.vue';
import EchartsItem from './components/echarts-item/index';
const xhlEcharts = reactive({
xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],

160
src/views/property-marketing/put-account/account-dashboard/style.scss
View File

@ -1,69 +1,109 @@
@import "@/views/property-marketing/component.scss";
.part-div {
width: 100%;
background: var(--BG-white, white);
overflow: hidden;
border-radius: 8px;
outline: 1px var(--BG-300, #E6E6E8) solid;
outline-offset: -1px;
.account-dashboard-wrap {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
display: inline-flex;
margin: 10px;
:deep(.arco-tabs) {
.arco-tabs-tab {
height: 56px;
padding: 0 8px;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.filter-wrap {
border-radius: 8px;
border: 1px solid #e6e6e8;
:deep(.arco-tabs) {
.arco-tabs-tab {
height: 56px;
padding: 0 8px;
}
}
.top {
.title {
font-family: 'Alibaba PuHuiTi';
font-style: normal;
}
:deep(.arco-btn) {
.arco-btn-icon {
line-height: 14px;
}
}
}
.overview-row {
.overview-item {
height: 88px;
border-radius: 8px;
background: var(--BG-100, #f7f8fa);
padding: 16px;
&:not(:last-child) {
margin-right: 12px;
}
}
}
}
}
.table-wrap {
width: 100%;
: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;
.pagination-box {
display: flex;
width: 100%;
padding: 16px 24px;
justify-content: flex-end;
align-items: center;
}
}
.container {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple),
:deep(.arco-picker) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
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);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {
margin-right: 24px;
}
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
flex-shrink: 0;
line-height: 22px; /* 157.143% */
}
:deep(.arco-space-item) {
width: 100%;
}
}
}
&: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 {
// 搜索
color: var(--Brand-6, #6d4cfe);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 22px;
height: 32px;
border-radius: 3px;
word-wrap: break-word;
}
.reset-btn {
// 重置
color: var(--Text-2, #3c4043);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 22px;
height: 32px;
border-radius: 3px;
word-wrap: break-word;
}
.search-form {
margin: 5px 10px 24px 24px;
}