feat: 新增账户仪表盘组件和优化投放指南操作功能
This commit is contained in:
林志军
@ -1,340 +0,0 @@
|
||||
<template>
|
||||
<div class="materials-page">
|
||||
<!-- 顶部标题和新增按钮 -->
|
||||
<div class="header-row">
|
||||
<h2 class="page-title">品牌物料</h2>
|
||||
<a-button type="primary" @click="handleAdd" class="add-btn">+ 添加品牌</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-row">
|
||||
品牌名称
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索..." allow-clear class="search-input" />
|
||||
<a-button type="outline" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
|
||||
<a-table :data="listResult.list" :pagination="false">
|
||||
<template #columns>
|
||||
<a-table-column title="品牌名称" data-index="name" />
|
||||
<a-table-column title="品牌logo" data-index="logo">
|
||||
<template #cell="{ record }">
|
||||
<img :src="record.logo" style="width: 50px; height: 50px" />
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="Slogan" data-index="slogan" />
|
||||
<a-table-column title="操作" data-index="optional">
|
||||
<template #cell="{ record }">
|
||||
<a-popconfirm
|
||||
content="确定删除吗?"
|
||||
type="warning"
|
||||
ok-text="确认删除"
|
||||
cancel-text="取消"
|
||||
@ok="deleteBrand(record.id)"
|
||||
>
|
||||
<icon-delete></icon-delete>
|
||||
</a-popconfirm>
|
||||
<a-button type="outline" @click="handleEdit(record.id)">编辑</a-button>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<a-space direction="vertical" size="large">
|
||||
<a-pagination :total="listResult.total" :size="listQuery.page_size" show-total show-jumper show-page-size />
|
||||
</a-space>
|
||||
|
||||
<!-- 新增/编辑品牌弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="modalVisible"
|
||||
:title="modalTitle"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
width="480px"
|
||||
@cancel="handleModalCancel"
|
||||
>
|
||||
<a-form
|
||||
:model="form"
|
||||
:label-col-props="{ span: 5, offset: 0 }"
|
||||
:wrapper-col-props="{ span: 19, offset: 0 }"
|
||||
label-align="left"
|
||||
:rules="formRule"
|
||||
ref="formRef"
|
||||
layout="left"
|
||||
>
|
||||
<a-form-item field="name" label="品牌名称">
|
||||
<a-input v-model="form.name" placeholder="请输入品牌名称" />
|
||||
</a-form-item>
|
||||
<a-form-item field="logo" class="form-item-logo" label="标准版Logo">
|
||||
<ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
|
||||
<div class="form-tip">品牌常规展示标识，支持PNG、JPG格式</div>
|
||||
</a-form-item>
|
||||
<a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
|
||||
<ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
|
||||
</a-form-item>
|
||||
<a-form-item field="slogan" label="Slogan">
|
||||
<a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleModalCancel">取消</a-button>
|
||||
<a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, reactive, onMounted } from 'vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { IconDelete } from '@arco-design/web-vue/es/icon';
|
||||
import {
|
||||
addMaterials,
|
||||
deleteMaterials,
|
||||
getMaterialsList,
|
||||
getMaterialsDetail,
|
||||
updateMaterials,
|
||||
} from '@/api/all/enterpriseKnowledge';
|
||||
import ImageUpload from '@/components/upload/ImageUpload.vue';
|
||||
import { valid } from 'mockjs';
|
||||
|
||||
const searchName = ref('');
|
||||
const current = ref(1);
|
||||
|
||||
const listResult = reactive({
|
||||
list: ref([]),
|
||||
total: ref(0),
|
||||
});
|
||||
|
||||
const listQuery = reactive({
|
||||
page: ref(1),
|
||||
name: ref(''),
|
||||
page_size: ref('10'),
|
||||
});
|
||||
|
||||
const modalVisible = ref(false);
|
||||
const modalTitle = ref('编辑品牌');
|
||||
const formRef = ref();
|
||||
//表单验证
|
||||
const formRule = {
|
||||
name: [{ required: true, message: '请输入品牌名称', trigger: ['blur', 'change'] }],
|
||||
logo: [{ required: true, message: '请上传品牌logo', trigger: ['blur', 'change'] }],
|
||||
};
|
||||
const form = reactive({
|
||||
name: '',
|
||||
logo: '',
|
||||
id: 0,
|
||||
other_logos: [], // [{ url: '' }]
|
||||
slogan: '',
|
||||
});
|
||||
|
||||
const btn_str = ref('确认添加');
|
||||
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
getMaterialsList(listQuery).then((response) => {
|
||||
listResult.list = response.data;
|
||||
listResult.total = response.total;
|
||||
});
|
||||
};
|
||||
|
||||
const deleteBrand = (id) => {
|
||||
console.log(id, 'id');
|
||||
deleteMaterials(id).then(() => {
|
||||
Message.success('删除成功');
|
||||
handleSearch();
|
||||
});
|
||||
};
|
||||
|
||||
function handleReset() {
|
||||
searchName.value = '';
|
||||
current.value = 1;
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
modalTitle.value = '添加品牌';
|
||||
btn_str.value = '确认添加';
|
||||
form.id = 0;
|
||||
form.logo = '';
|
||||
form.name = '';
|
||||
form.slogan = '';
|
||||
form.other_logos = [];
|
||||
modalVisible.value = true;
|
||||
}
|
||||
|
||||
function handleModalCancel() {
|
||||
modalVisible.value = false;
|
||||
}
|
||||
|
||||
function handleModalOk() {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then((valid) => {
|
||||
if (!valid) {
|
||||
if (form.id) {
|
||||
updateMaterials(form.id, form).then(() => {
|
||||
Message.success('修改成功');
|
||||
handleSearch();
|
||||
});
|
||||
} else {
|
||||
addMaterials(form).then(() => {
|
||||
Message.success('新增成功');
|
||||
handleSearch();
|
||||
});
|
||||
}
|
||||
modalVisible.value = false;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('验证失败:', error);
|
||||
Message.error('请检查表单填写是否正确');
|
||||
});
|
||||
}
|
||||
|
||||
function handleEdit(id) {
|
||||
modalTitle.value = '编辑品牌';
|
||||
formRef.value.resetFields();
|
||||
modalVisible.value = true;
|
||||
btn_str.value = '确认修改';
|
||||
getMaterialsDetail(id).then((response) => {
|
||||
Object.assign(form, response);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.materials-page {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 32px 24px 24px 24px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
font-size: 16px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.search-btn,
|
||||
.reset-btn {
|
||||
min-width: 72px;
|
||||
}
|
||||
|
||||
.brand-table {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.logo-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logo-emoji {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pagination-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.page-size-select {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.upload-card {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 24px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.form-item-logo .logo-upload-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.logo-upload-card {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.form-tip {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
margin-left: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.a-form .a-form-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.a-modal .a-modal-footer {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@ -118,7 +118,7 @@ import { ref, computed, reactive, onMounted } from 'vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { IconDelete } from '@arco-design/web-vue/es/icon';
|
||||
import noDataImage from '@/assets/img/guide/no_data.png';
|
||||
import '@/views/property-marketing/enterpriseKnowledge/brand-materials/style.scss';
|
||||
import '@/views/property-marketing/brands/brand-materials/style.scss';
|
||||
|
||||
import {
|
||||
addMaterials,
|
||||
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<a-card :bordered="false" class="echart-item-card">
|
||||
<template #title>
|
||||
<span>{{ title.name }}</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">{{ title.popover }}</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</template>
|
||||
<div id="echarts-line" style="width: 100%; height: 450px"></div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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({
|
||||
title: {
|
||||
type: Object,
|
||||
default: {
|
||||
name: '',
|
||||
popover: '',
|
||||
},
|
||||
},
|
||||
xAxisData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
const xAxisData = props.xAxisData;
|
||||
const seriesData = props.seriesData;
|
||||
onMounted(() => {
|
||||
const myChart = echarts.init(document.getElementById('echarts-line'));
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderColor: '#ccc',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#333' },
|
||||
formatter: function (params) {
|
||||
let date = params[0].axisValue;
|
||||
let tooltipHtml = `<div style="font-weight:bold;">消耗量 ${date}</div>`;
|
||||
params.forEach((item) => {
|
||||
tooltipHtml += `
|
||||
<div style="display:flex;align-items:center;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:5px;margin-right:5px;background-color:${item.color}"></span>
|
||||
<span style="margin-right:10px;">${item.seriesName}</span>
|
||||
<span>${item.value}</span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
return tooltipHtml;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'horizontal',
|
||||
top: 10, // 将图例位置调整到顶部
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
pageButtonItemGap: 5,
|
||||
pageButtonStyle: { color: '#666' },
|
||||
textStyle: { color: '#666' },
|
||||
data: seriesData.map((item) => item.name),
|
||||
},
|
||||
grid: {
|
||||
top: 80, // 调整图表内容位置，避免与图例重叠
|
||||
left: 40,
|
||||
right: 40,
|
||||
bottom: 40,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: { color: '#666' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: { color: '#666' },
|
||||
splitLine: { lineStyle: { type: 'dashed', color: '#eee' } },
|
||||
},
|
||||
series: seriesData,
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
.echart-item-card {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
margin:13px;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
@ -0,0 +1,164 @@
|
||||
<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>
|
||||
<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>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '消耗量', popover: '消耗量' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '消耗量', popover: '消耗量' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import EchartsItem from './components/echarts-item/index.vue';
|
||||
|
||||
const xhlEcharts = reactive({
|
||||
xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],
|
||||
seriesData: [
|
||||
{
|
||||
name: '本地推-小庭院推广计划',
|
||||
type: 'line',
|
||||
data: [30000, 40000, 25000, 20000, 29019, 29019, 29019],
|
||||
color: '#7b68ee',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '全球旅行小助手推广',
|
||||
type: 'line',
|
||||
data: [25000, 27000, 23000, 20000, 29019, 29019, 29019],
|
||||
color: '#32c5ff',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '定向旅居推广顶级套餐',
|
||||
type: 'line',
|
||||
data: [10000, 5000, 12000, 15000, 29019, 29019, 29019],
|
||||
color: '#feb62f',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '城市探索者特惠活动',
|
||||
type: 'line',
|
||||
data: [15000, 18000, 12000, 16000, 20000, 22000, 24000],
|
||||
color: '#ff7d00',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '高端民宿精选推荐',
|
||||
type: 'line',
|
||||
data: [22000, 20000, 25000, 23000, 21000, 19000, 22000],
|
||||
color: '#f5222d',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '美食探店达人计划',
|
||||
type: 'line',
|
||||
data: [18000, 19000, 17000, 16000, 18000, 20000, 21000],
|
||||
color: '#722ed1',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '户外探险装备推荐',
|
||||
type: 'line',
|
||||
data: [12000, 14000, 13000, 15000, 17000, 16000, 18000],
|
||||
color: '#13c2c2',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
.part-div {
|
||||
width: 100%;
|
||||
background: var(--BG-white, white);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
outline: 1px var(--BG-300, #E6E6E8) solid;
|
||||
outline-offset: -1px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
display: inline-flex;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.part-div-header {
|
||||
align-self: stretch;
|
||||
height: 64px;
|
||||
padding: 10px 24px 10px 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: inline-flex
|
||||
}
|
||||
|
||||
: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 {
|
||||
// 搜索
|
||||
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: 20px;
|
||||
|
||||
}
|
||||
@ -25,11 +25,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import './style.scss';
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
//本月摘要数据-div
|
||||
.month-data-div {
|
||||
align-self: stretch;
|
||||
padding: 16px 30px 16px 16px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
background: var(--Brand-Brand-1, #F0EDFF);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
//本月摘要-蓝色字体
|
||||
.month-text-blue {
|
||||
color: var(--Brand-Brand-6, #6D4CFE);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//红色字体
|
||||
.month-text-red {
|
||||
color: var(--Functional-Danger-6, #F64B31);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//黑色字体
|
||||
.month-text-black {
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="24">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">总体策略</span>
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">预算分配</span>
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">人群包优化</span>
|
||||
|
||||
@ -7,7 +7,25 @@
|
||||
:filter-icon-align-left="alignLeft"
|
||||
:pagination="false"
|
||||
>
|
||||
|
||||
<template #operation="{ record }">
|
||||
<a-space size="medium">
|
||||
<a-space>
|
||||
<a-popconfirm
|
||||
content="确定删除吗?"
|
||||
type="warning"
|
||||
ok-text="确认删除"
|
||||
cancel-text="取消"
|
||||
@ok="deleteBrand(record.id)"
|
||||
>
|
||||
<icon-delete></icon-delete>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-button type="outline" class="operation-btn">下载</a-button>
|
||||
<a-button type="outline" class="operation-btn">详情</a-button>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
</view>
|
||||
</template>
|
||||
@ -15,6 +33,7 @@
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
import top2 from '@/assets/img/captcha/top2.svg';
|
||||
import top3 from '@/assets/img/captcha/top3.svg';
|
||||
import { IconDelete } from '@arco-design/web-vue/es/icon';
|
||||
|
||||
const listQuery = reactive({
|
||||
project_id: ref(''),
|
||||
@ -53,7 +72,7 @@ const columns = [
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'date',
|
||||
dataIndex: 'operation',
|
||||
slotName: 'operation',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
@ -114,4 +133,13 @@ const topImages = [top1, top2, top3];
|
||||
}
|
||||
}
|
||||
|
||||
.operation-btn {
|
||||
// 下载
|
||||
color: var(--Brand-6, #6d4cfe);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -52,13 +52,13 @@
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-space>
|
||||
<a-button type="outline" @click="handleSearch">
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" @click="handleSearch">
|
||||
<a-button type="outline" class="reset-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
@ -95,4 +95,28 @@ const handleSearch = () => {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -56,7 +56,6 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
.month-data-body {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
@ -98,58 +97,11 @@
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//本月摘要-蓝色字体
|
||||
.month-text-blue {
|
||||
color: var(--Brand-Brand-6, #6D4CFE);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//红色字体
|
||||
.month-text-red {
|
||||
color: var(--Functional-Danger-6, #F64B31);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//黑色字体
|
||||
.month-text-black {
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
//本月摘要数据-div
|
||||
.month-data-div {
|
||||
align-self: stretch;
|
||||
padding: 16px 30px 16px 16px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
background: var(--Brand-Brand-1, #F0EDFF);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
//投放建议-总体策略
|
||||
.overall-strategy {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
padding: 20px 24px 20px 16px;
|
||||
padding: 20px 10px 20px 16px;
|
||||
background: var(--BG-100, #F7F8FA);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
@ -158,7 +110,7 @@
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
display: inline-flex;
|
||||
margin: 10px 0px 15px 20px;
|
||||
margin: 10px 24px 15px 20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user