refactor(brand-materials):重构品牌物料页面
- 优化页面布局和样式，使用 flex布局 - 重新组织组件结构，提高可维护性- 改进搜索和分页功能，提升用户体验 - 统一按钮和输入框样式，增强一致性 - 移除冗余代码，提高代码可读性
This commit is contained in:
林志军
@ -144,7 +144,7 @@ const tableData = ref([]);
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 100,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const query = reactive({
|
||||
|
||||
@ -1,75 +1,88 @@
|
||||
<template>
|
||||
<view>
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||||
<a-space align="end">
|
||||
<span class="part-div-header-title">业务洞察报告 </span>
|
||||
</a-space>
|
||||
<a-space align="center" class="search-form-div" size="medium">
|
||||
<a-form-item field="name" class="search-form" label="服务/产品">
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索...">
|
||||
<div class="business-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
|
||||
<div class="top flex h-64px px-24px py-10px justify-between items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 title">业务洞察报告</p>
|
||||
</div>
|
||||
|
||||
<div class="container px-24px pt-12px pb-24px">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">服务/产品</span>
|
||||
<a-space size="medium">
|
||||
<a-input v-model="query.name" class="w-240px" placeholder="请搜索..." size="medium" allow-clear>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="时间筛选">
|
||||
<a-range-picker
|
||||
showTime
|
||||
:time-picker-props="{
|
||||
defaultValue: ['00:00:00', '00:00:00'],
|
||||
}"
|
||||
style="width: 380px"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item field="name">
|
||||
<a-space>
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
</a-space>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="filter-row flex">
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" class="reset-btn" @click="handleSearch">
|
||||
<a-button class="w-84px reset-btn" size="medium">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-space>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="listResult.data"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
|
||||
>
|
||||
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false">
|
||||
</a-table>
|
||||
<div class="pagination-box">
|
||||
<a-pagination
|
||||
style="float: right"
|
||||
:total="listResult.total"
|
||||
:size="listQuery.size"
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.pageSize"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</a-space>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const listQuery = reactive({
|
||||
name: '',
|
||||
size: 0,
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
});
|
||||
const query = reactive({
|
||||
name: ref(''),
|
||||
});
|
||||
|
||||
const listResult = reactive({
|
||||
data: [],
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const onPageSizeChange = () => {};
|
||||
const tableData = ref([]);
|
||||
const handleChange = () => {};
|
||||
const onPageChange = () => {};
|
||||
const columns = [
|
||||
{
|
||||
title: '服务/产品',
|
||||
@ -83,9 +96,6 @@ const columns = [
|
||||
dataIndex: 'create_time',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
titleSlotName: 'hotTitle',
|
||||
@ -107,9 +117,6 @@ const columns = [
|
||||
dataIndex: 'volumeRate',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'lasterUpdateTime',
|
||||
},
|
||||
{
|
||||
@ -118,32 +125,46 @@ const columns = [
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operator',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.part-div-header-title {
|
||||
justify-content: center;
|
||||
<style scoped lang="scss">
|
||||
.business-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word;
|
||||
|
||||
:deep(.search-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
color: #6d4cfe;
|
||||
}
|
||||
|
||||
.search-form-div {
|
||||
margin-top: 10px;
|
||||
:deep(.edit-btn) {
|
||||
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);
|
||||
}
|
||||
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-select-view-single),
|
||||
:deep(.arco-textarea-wrapper),
|
||||
:deep(.arco-picker),
|
||||
:deep(.arco-input-wrapper) {
|
||||
:deep(.arco-select-view-multiple) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
height: 32px;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
@ -153,8 +174,39 @@ const columns = [
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
min-width: 72px;
|
||||
color: black;
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
.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% */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,74 +1,84 @@
|
||||
<template>
|
||||
<view>
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||||
<a-space align="end">
|
||||
<span class="part-div-header-title">竞品对比报告 </span>
|
||||
</a-space>
|
||||
<a-space align="center" class="search-form-div" size="medium">
|
||||
<a-form-item field="name" class="" label="服务/产品">
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索...">
|
||||
<div class="competitive-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
|
||||
<div class="top flex h-64px px-24px py-10px justify-between items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 title">竞品对比报告</p>
|
||||
</div>
|
||||
|
||||
<div class="container px-24px pt-12px pb-24px">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">服务/产品</span>
|
||||
<a-space size="medium">
|
||||
<a-input v-model="query.name" class="w-240px" placeholder="请搜索..." size="medium" allow-clear>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="时间筛选">
|
||||
<a-range-picker
|
||||
showTime
|
||||
:time-picker-props="{
|
||||
defaultValue: ['00:00:00', '00:00:00'],
|
||||
}"
|
||||
style="width: 380px"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item field="name">
|
||||
<a-space>
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
</a-space>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="filter-row flex">
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" class="reset-btn" @click="handleSearch">
|
||||
<a-button class="w-84px reset-btn" size="medium">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-space>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="listResult.data"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
|
||||
>
|
||||
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false">
|
||||
</a-table>
|
||||
<div class="pagination-box">
|
||||
<a-pagination
|
||||
style="float: right"
|
||||
:total="listResult.total"
|
||||
:size="listQuery.size"
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.pageSize"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</a-space>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const listQuery = reactive({
|
||||
name: '',
|
||||
size: 0,
|
||||
});
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const listResult = reactive({
|
||||
data: [],
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
});
|
||||
const query = reactive({
|
||||
name: ref(''),
|
||||
});
|
||||
|
||||
const handleChange = () => {};
|
||||
const onPageChange = () => {};
|
||||
const onPageSizeChange = () => {};
|
||||
const tableData = ref([]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
@ -83,25 +93,22 @@ const columns = [
|
||||
dataIndex: 'create_time',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
|
||||
},
|
||||
{
|
||||
titleSlotName: 'hotTitle',
|
||||
titleSlotName: 'customer',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '竞争对手',
|
||||
dataIndex: 'customer',
|
||||
slotName: 'hot',
|
||||
},
|
||||
|
||||
{
|
||||
titleSlotName: 'lasterUpdateTime',
|
||||
title: '最后更新日期',
|
||||
dataIndex: 'volumeRate',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'lasterUpdateTime',
|
||||
},
|
||||
{
|
||||
@ -112,36 +119,44 @@ const columns = [
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'handle',
|
||||
dataIndex: 'operator',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.part-div-header-title {
|
||||
justify-content: center;
|
||||
<style scoped lang="scss">
|
||||
.competitive-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word;
|
||||
|
||||
:deep(.search-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
color: #6d4cfe;
|
||||
}
|
||||
|
||||
.search-form-div {
|
||||
margin-top: 10px;
|
||||
:deep(.edit-btn) {
|
||||
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);
|
||||
}
|
||||
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-select-view-single),
|
||||
:deep(.arco-textarea-wrapper),
|
||||
:deep(.arco-picker),
|
||||
:deep(.arco-input-wrapper) {
|
||||
:deep(.arco-select-view-multiple) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
height: 32px;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
@ -151,8 +166,39 @@ const columns = [
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
min-width: 72px;
|
||||
color: black;
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
.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% */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div >
|
||||
<a-card :bordered="false" class="echart-item-card">
|
||||
<template #title>
|
||||
<span class="a-card-title">{{ title.name }}</span>
|
||||
@ -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({
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-space>
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
</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 type="outline" class="reset-btn" @click="handleSearch">
|
||||
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</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'],
|
||||
|
||||
@ -1,16 +1,23 @@
|
||||
@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(.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 {
|
||||
@ -18,19 +25,55 @@
|
||||
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%;
|
||||
|
||||
.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),
|
||||
:deep(.arco-input-wrapper) {
|
||||
:deep(.arco-picker) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
width: 224px;
|
||||
height: 32px;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
@ -39,31 +82,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
// 搜索
|
||||
color: var(--Brand-6, #6d4cfe);
|
||||
.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-family: Alibaba PuHuiTi;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
height: 32px;
|
||||
border-radius: 3px;
|
||||
word-wrap: break-word;
|
||||
flex-shrink: 0;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
|
||||
.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;
|
||||
:deep(.arco-space-item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 5px 10px 24px 24px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user