refactor(brand-materials):重构品牌物料页面
- 优化页面布局和样式，使用 flex布局 - 重新组织组件结构，提高可维护性- 改进搜索和分页功能，提升用户体验 - 统一按钮和输入框样式，增强一致性 - 移除冗余代码，提高代码可读性
This commit is contained in:
林志军
@ -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'],
|
||||
|
||||
Reference in New Issue
Block a user