交易分析页面开发（无接口）
This commit is contained in:
parent
b06e15f490
commit
5c89ab4ea6
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container-data">
|
||||
<div class="app-container-title">运营看板</div>
|
||||
<div class="app-container-title">运营看板
|
||||
<el-radio-group v-model="dateRadio" @change="changeDateRadio" size="small" style="float: right;">
|
||||
<el-radio-button label="周" :value="1" />
|
||||
<el-radio-button label="月" :value="2" />
|
||||
<el-radio-button label="年" :value="3" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="app-container-data-left">
|
||||
<div class="app-container-data-left-top">
|
||||
@ -14,7 +20,7 @@
|
||||
/>
|
||||
<div>销售总额(元)</div>
|
||||
</div>
|
||||
<div class="number">4,541.00</div>
|
||||
<div class="number">{{ topLeftData.salesTotalAmount }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">
|
||||
@ -25,7 +31,7 @@
|
||||
/>
|
||||
<div>订单总数(单)</div>
|
||||
</div>
|
||||
<div class="number">45</div>
|
||||
<div class="number">{{ topLeftData.orderTotalNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-container-data-left-bottom">
|
||||
@ -38,7 +44,7 @@
|
||||
/>
|
||||
<div>浏览量(次)</div>
|
||||
</div>
|
||||
<div class="number">61,151</div>
|
||||
<div class="number">{{ topLeftData.viewCount }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">
|
||||
@ -49,7 +55,7 @@
|
||||
/>
|
||||
<div>成功退款金额(元)</div>
|
||||
</div>
|
||||
<div class="number">541.00</div>
|
||||
<div class="number">{{ topLeftData.refundSuccessAmout }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -153,6 +159,7 @@
|
||||
<div class="bottom-box-summary-title">退款金额</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="overflow-y: auto; height: 200px;">
|
||||
<div class="bottom-box-summary" style="line-height: 40px;margin: 0;"
|
||||
v-for="(item, index) in afterSalesData.data" :key="index">
|
||||
<div class="bottom-box-summary-item" style="width: 30%; display: flex;">
|
||||
@ -168,6 +175,7 @@
|
||||
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -176,7 +184,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import { onMounted, ref, onBeforeUnmount } from "vue";
|
||||
import Mock from "mockjs";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import * as echarts from "echarts";
|
||||
@ -187,14 +195,19 @@ import img3 from "@/assets/images/third.png";
|
||||
import alert from "@/assets/images/alert.png";
|
||||
let tomato = ref("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/a866613495ed4678957a4440b8d3776c.png");
|
||||
|
||||
|
||||
// 图表 DOM 引用
|
||||
const chartRef = ref(null);
|
||||
// ECharts 实例
|
||||
let chartInstance = null;
|
||||
// 颜色列表
|
||||
const colorList = ['#3685FE', '#FFD500', '#25BF82'];
|
||||
const colorList = ['#3685FE', '#FFD500', '#25BF82', '#FF7F00'];
|
||||
// x轴数据
|
||||
const xData = ['1日', '2月', '3月', '4月', '5月', '6月', '7月'];
|
||||
const xData = ref([]);
|
||||
const totalSalesData = ref([]); //销售总额数据
|
||||
const totalOrdersData = ref([]); //订单总数数据
|
||||
const pageViewData = ref([]); //浏览量数据
|
||||
const refundAmountData = ref([]); //成功退款金额数据
|
||||
|
||||
// 图表配置
|
||||
const option = {
|
||||
@ -225,8 +238,8 @@ const option = {
|
||||
show: true,
|
||||
backgroundColor: '#fff',
|
||||
color: '#556677',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
shadowColor: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0)',
|
||||
shadowColor: 'rgba(0,0,0,0.3)',
|
||||
shadowOffsetY: 0,
|
||||
},
|
||||
lineStyle: {
|
||||
@ -241,7 +254,7 @@ const option = {
|
||||
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5); text-align: left;',
|
||||
formatter: function (params) {
|
||||
let result = params[0].name + '<br>'; // x轴值（如"1月"）
|
||||
params.forEach((param) => {
|
||||
params.forEach((param,index) => {
|
||||
// 获取系列颜色（param.color）
|
||||
const colorDot = `<span style="
|
||||
display:inline-block;
|
||||
@ -249,9 +262,19 @@ const option = {
|
||||
border-radius:50%;
|
||||
width:10px;
|
||||
height:10px;
|
||||
background-color:${param.color}">
|
||||
background-color:${colorList[index]}">
|
||||
</span>`;
|
||||
result += `${colorDot} ${param.seriesName}: ${param.value}${param.seriesName === '茎秆高度' ? 'cm' : param.seriesName === '叶片温度' ? '℃' : 'mm'} <br>`;
|
||||
let unit = "";
|
||||
if(param.seriesName == '销售总额') {
|
||||
unit = "元";
|
||||
} else if(param.seriesName == '订单总数') {
|
||||
unit = "个";
|
||||
} else if(param.seriesName == '浏览量') {
|
||||
unit = "人次";
|
||||
} else if(param.seriesName == '成功退款金额') {
|
||||
unit = "元";
|
||||
}
|
||||
result += `${colorDot} ${param.seriesName}: ${param.value} ${unit} <br>`;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
@ -260,12 +283,12 @@ const option = {
|
||||
top: '20%',
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 30, // 底部留白给图例
|
||||
bottom: 40, // 底部留白给图例
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
data: xData.value,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(107,107,107,0.37)',
|
||||
@ -405,7 +428,7 @@ const option = {
|
||||
{
|
||||
name: '销售总额',
|
||||
type: 'line',
|
||||
data: [514.14, 468.18, 988.35, 1204.84, 954.16, 651.24, ],
|
||||
data: totalSalesData.value,
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
@ -413,7 +436,7 @@ const option = {
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#25BF82',
|
||||
color: '#3685FE',
|
||||
shadowColor: 'rgba(158,135,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20,
|
||||
@ -426,36 +449,36 @@ const option = {
|
||||
{
|
||||
name: '订单总数',
|
||||
type: 'line',
|
||||
data: [4, 18, 29, 33, 18, 10, 28],
|
||||
data: totalOrdersData.value,
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 1,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
width: 3,
|
||||
color: '#FFD500',
|
||||
shadowColor: 'rgba(115,221,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20,
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorList[2],
|
||||
borderColor: colorList[2],
|
||||
color: colorList[1],
|
||||
borderColor: colorList[1],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '浏览量',
|
||||
type: 'line',
|
||||
data: [1589, 2648, 5289, 4289, 9654, 6487, 5968],
|
||||
data: pageViewData.value,
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 2,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: '#3685FE',
|
||||
width: 3,
|
||||
color: '#25BF82',
|
||||
shadowColor: 'rgba(115,221,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20,
|
||||
@ -468,22 +491,22 @@ const option = {
|
||||
{
|
||||
name: '成功退款金额',
|
||||
type: 'line',
|
||||
data: [62.44, 14.15, 17.48, 25.18, 21.91, 10.02, 2.25],
|
||||
data: refundAmountData.value,
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 3,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: '#3685FE',
|
||||
width: 3,
|
||||
color: '#FF7F00',
|
||||
shadowColor: 'rgba(115,221,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20,
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorList[2],
|
||||
borderColor: colorList[2],
|
||||
color: colorList[3],
|
||||
borderColor: colorList[3],
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -515,6 +538,166 @@ const resizeChart = () => {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
// 加载数据-图表模块
|
||||
const loadEchartsData = async () => {
|
||||
try {
|
||||
let response = await getGoodManageInfo({
|
||||
queryStartTime: startDate.value,
|
||||
queryEndTime: endDate.value
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
option.xAxis[0].data = response.data.xData;
|
||||
option.series[0].data = response.data.totalSalesData;
|
||||
option.series[1].data = response.data.totalOrdersData;
|
||||
option.series[2].data = response.data.pageViewData;
|
||||
option.series[3].data = response.data.refundAmountData;
|
||||
chartInstance.setOption(option);
|
||||
} else {
|
||||
echartsMockData(7);
|
||||
}
|
||||
} catch (error) { }
|
||||
};
|
||||
const echartsMockData = (count = 7) => {
|
||||
console.log("右上角图表数据更新");
|
||||
const xzData = generateDateArray(count)
|
||||
let obj = Mock.mock({
|
||||
// x轴数据 (日期/月份)
|
||||
xData: xzData,
|
||||
|
||||
// 总销售额 (500-5000之间的浮点数，保留2位小数)
|
||||
[`totalSalesData|${count}`]: ['@float(100, 500, 2, 2)'],
|
||||
|
||||
// 总订单数 (1-100之间的整数)
|
||||
[`totalOrdersData|${count}`]: ['@integer(10, 100)'],
|
||||
|
||||
// 页面浏览量 (1000-10000之间的整数)
|
||||
[`pageViewData|${count}`]: ['@integer(1000, 10000)'],
|
||||
|
||||
// 退款金额 (1-100之间的浮点数，保留2位小数)
|
||||
[`refundAmountData|${count}`]: ['@float(10, 100, 2, 2)']
|
||||
})
|
||||
option.xAxis[0].data = obj.xData;
|
||||
option.series[0].data = obj.totalSalesData;
|
||||
option.series[1].data = obj.totalOrdersData;
|
||||
option.series[2].data = obj.pageViewData;
|
||||
option.series[3].data = obj.refundAmountData;
|
||||
console.log(option);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
const generateDateArray = (count) => {
|
||||
const result = []
|
||||
const today = new Date()
|
||||
|
||||
for (let i = count - 1; i >= 0; i--) {
|
||||
const date = new Date(today)
|
||||
date.setDate(date.getDate() - i)
|
||||
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||||
const day = date.getDate().toString().padStart(2, '0')
|
||||
|
||||
result.push(`${month}-${day}`)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
|
||||
// 切换日期按钮
|
||||
let dateRadio = ref(1);
|
||||
let startDate = ref('');
|
||||
let endDate = ref('');
|
||||
const changeDateRadio = (val) => {
|
||||
console.log(val);
|
||||
// val 1 按周 2 按月 3 按年
|
||||
let date = generateDateRange(val);
|
||||
console.log(date);
|
||||
startDate.value = date.startDate;
|
||||
endDate.value = date.endDate;
|
||||
|
||||
// 调用各个模块的方法更新数据
|
||||
loadTopLeftData();
|
||||
echartsMockData(7); //模拟图表数据
|
||||
// loadEchartsData(); //真实图表数据
|
||||
loadMiddleData();
|
||||
loadbottomLeftData();
|
||||
loadbottomRightData();
|
||||
|
||||
// 测试-----------
|
||||
let day = 7;
|
||||
if (val == 1) {
|
||||
day = 7;
|
||||
} else if (val == 2) {
|
||||
day = 30;
|
||||
} else if (val == 3) {
|
||||
day = 365;
|
||||
}
|
||||
echartsMockData(day);
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据给定的时间范围类型，生成相应的日期范围
|
||||
* @param {number} type - 日期范围类型：1:按周 2:按月 3:按年
|
||||
* @returns {Object} 包含开始日期和结束日期的对象，格式为YYYY-MM-DD
|
||||
*/
|
||||
function generateDateRange(type) {
|
||||
// 获取今天的日期
|
||||
const today = new Date();
|
||||
// 结束日期为今天的日期
|
||||
const endDate = new Date(today);
|
||||
// 初始化开始日期为今天的日期
|
||||
let startDate = new Date(today);
|
||||
|
||||
// 根据不同类型计算开始日期
|
||||
switch(type) {
|
||||
case 1: // 周
|
||||
startDate.setDate(today.getDate() - 6); // 7天包括今天
|
||||
break;
|
||||
case 2: // 月
|
||||
startDate.setDate(today.getDate() - 29); // 30天包括今天
|
||||
break;
|
||||
case 3: // 年
|
||||
startDate.setDate(today.getDate() - 364); // 365天包括今天
|
||||
break;
|
||||
default:
|
||||
// 抛出异常，提示参数类型无效
|
||||
throw new Error('无效的参数类型，请输入1(周)、2(月)或3(年)');
|
||||
}
|
||||
|
||||
// 格式化日期为YYYY-MM-DD
|
||||
const formatDate = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
// 返回计算出的日期范围
|
||||
return {
|
||||
startDate: formatDate(startDate),
|
||||
endDate: formatDate(endDate)
|
||||
};
|
||||
}
|
||||
|
||||
let topLeftData = ref({});
|
||||
// 加载数据-左上角模块
|
||||
const loadTopLeftData = async () => {
|
||||
console.log('左上角数据更新');
|
||||
topLeftData.value = Object.assign({}, {
|
||||
salesTotalAmount: '4,541.00', //销售总额
|
||||
orderTotalNum: '45', //订单总数
|
||||
viewCount: '61,151', //浏览量
|
||||
refundSuccessAmout: '541.00', //成功退款金额
|
||||
});
|
||||
// try {
|
||||
// let response = await getGoodManageInfo({
|
||||
// queryStartTime: startDate.value,
|
||||
// queryEndTime: endDate.value
|
||||
// });
|
||||
// if (response.code == 200) {
|
||||
// topLeftData.value = response.data;
|
||||
// }
|
||||
// } catch (error) { }
|
||||
};
|
||||
|
||||
// 中间模块
|
||||
const middleData = ref([]);
|
||||
@ -523,18 +706,18 @@ const generateMockData = () => {
|
||||
"list|5": [
|
||||
{ // 中间模块数据
|
||||
"id|+1": 10000,
|
||||
title: '@pick(["买家数量", "支付转化率", "客单价", "退款率", "加购数量"])',
|
||||
value: "@float(10, 200, 2, 2)",
|
||||
unit: '@pick(["人", "%", "元", "%", "次"])',
|
||||
tooltip: '@pick(["购买商品人数统计", "支付转化率 = 完成支付的订单数量 + 访问网站的用户数量 x 100%", "客单价是指每一位顾客平均购买商品金额", "退款率 = （退款订单数量 + 总订单数量） x 100%", "用户将商品加入购物车次数"])',
|
||||
title: '@pick(["买家数量", "支付转化率", "客单价", "退款率", "加购数量"])', //标题
|
||||
value: "@float(10, 200, 2, 2)", //数值
|
||||
unit: '@pick(["人", "%", "元", "%", "次"])', //单位
|
||||
tooltip: '@pick(["购买商品人数统计", "支付转化率 = 完成支付的订单数量 + 访问网站的用户数量 x 100%", "客单价是指每一位顾客平均购买商品金额", "退款率 = （退款订单数量 + 总订单数量） x 100%", "用户将商品加入购物车次数"])', //描述提示
|
||||
ratioMethod: '@pick(["环比", "同比"])', //比率方式
|
||||
ratioStatus: '@pick(["上升", "下降"])', //比率状态， 后台看存储的是汉字还是数字
|
||||
ratioValue: '@float(10, 20, 1, 1)' + '%', //比率值
|
||||
|
||||
// 底部左侧数据
|
||||
"ranking|+1": 1, //排名
|
||||
goodUrl: tomato.value,
|
||||
goodName: "@cname",
|
||||
goodUrl: tomato.value, //商品图片地址
|
||||
goodName: "@cname", //商品信息
|
||||
stockToUseRatio: "@float(10, 200, 2, 2)" + "%", //存销比
|
||||
salesAmount: "@integer(1000, 20000)" + "元", //销售金额
|
||||
},
|
||||
@ -542,7 +725,7 @@ const generateMockData = () => {
|
||||
}).list;
|
||||
};
|
||||
|
||||
// 底部模块
|
||||
// 底部左侧模块
|
||||
const tableData = ref([]);
|
||||
const columns = ref([
|
||||
{ prop: "ranking", label: "排名", slotName: "ranking", width: 66 },
|
||||
@ -551,36 +734,72 @@ const columns = ref([
|
||||
{ prop: "stockToUseRatio", label: "存销比" },
|
||||
{ prop: "salesAmount", label: "销售金额" },
|
||||
]);
|
||||
// 底部右侧模块
|
||||
const afterSalesData = ref({});
|
||||
|
||||
const afterSalesData = ref({
|
||||
|
||||
// 加载数据-中间模块
|
||||
const loadMiddleData = async () => {
|
||||
console.log('中间数据更新');
|
||||
middleData.value = generateMockData();
|
||||
// try {
|
||||
// let response = await getGoodManageInfo({
|
||||
// queryStartTime: startDate.value,
|
||||
// queryEndTime: endDate.value
|
||||
// });
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// middleData.value = response.data;
|
||||
// }
|
||||
// } catch (error) { }
|
||||
};
|
||||
// 加载数据-底部左侧模块
|
||||
const loadbottomLeftData = async () => {
|
||||
console.log('左下角数据更新');
|
||||
tableData.value = generateMockData();
|
||||
// try {
|
||||
// let response = await getGoodManageInfo({
|
||||
// queryStartTime: startDate.value,
|
||||
// queryEndTime: endDate.value
|
||||
// });
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// tableData.value = response.data;
|
||||
// }
|
||||
// } catch (error) { }
|
||||
};
|
||||
// 加载数据-底部右侧模块
|
||||
const loadbottomRightData = async () => {
|
||||
console.log('右下角数据更新');
|
||||
afterSalesData.value = {
|
||||
totalAfterSalesOrders: 1128,
|
||||
totalRefundOrders: 265,
|
||||
totalReturnOrders: 129,
|
||||
data: [
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "36单", refundAmount: '265元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "51单", refundAmount: '1128元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "51单", refundAmount: '146元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "25单", refundAmount: '239元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "36单", refundAmount: '365元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "51单", refundAmount: '198元' },
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
// 加载数据
|
||||
const loadMiddleData = async () => {
|
||||
middleData.value = generateMockData();
|
||||
tableData.value = generateMockData();
|
||||
console.log(tableData.value);
|
||||
};
|
||||
// try {
|
||||
// let response = await getGoodManageInfo(prams);
|
||||
// let response = await getGoodManageInfo({
|
||||
// queryStartTime: startDate.value,
|
||||
// queryEndTime: endDate.value
|
||||
// });
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// middleData.value = response.data.records;
|
||||
// middleData.value = response.data.total;
|
||||
// tableData.value = response.data;
|
||||
// }
|
||||
// } catch (error) { }
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
loadMiddleData();
|
||||
|
||||
onMounted(async() => {
|
||||
await initChart();
|
||||
changeDateRadio(1);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -588,7 +807,7 @@ onMounted(() => {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 50px;
|
||||
margin-right: 20px;
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
}
|
||||
@ -599,7 +818,7 @@ onMounted(() => {
|
||||
}
|
||||
.number {
|
||||
margin-right: 100px;
|
||||
margin-top: 20px;
|
||||
margin-top: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
@ -613,6 +832,7 @@ onMounted(() => {
|
||||
}
|
||||
.app-container-title {
|
||||
margin-bottom: 20px;
|
||||
padding-right: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -622,17 +842,17 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
.app-container-data-left {
|
||||
width: 40%;
|
||||
width: 500px;
|
||||
.app-container-data-left-top {
|
||||
display: flex;
|
||||
}
|
||||
.app-container-data-left-bottom {
|
||||
margin-top: 50px;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.app-container-data-right {
|
||||
width: 60%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.app-container-block {
|
||||
@ -675,7 +895,7 @@ onMounted(() => {
|
||||
width: 50%;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px 20px 20px 20px;
|
||||
padding: 20px 20px 0px 20px;
|
||||
}
|
||||
.bottom-box-item-title {
|
||||
font-size: 18px;
|
||||
@ -701,6 +921,9 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-table-container {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-ellipsis {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user